/* ============================================
   POLICES — servies depuis ce serveur
   ============================================

   La version précédente chargeait Fraunces, Nunito et DM Mono depuis
   fonts.googleapis.com. Ce n'est pas une préférence esthétique qui a
   fait retirer cette ligne, c'est le droit : à chaque visite, le
   navigateur envoyait l'adresse IP du visiteur à Google, aux
   États-Unis, sans son consentement et sans que ce soit nécessaire au
   service. La CNIL comme la justice allemande (LG München I,
   3 O 17493/20) ont jugé ce transfert non conforme au RGPD.

   Les fichiers sont donc dans public/fonts/ — 11 fichiers woff2,
   236 Ko au total, sous licence SIL Open Font License 1.1, qui
   autorise explicitement cet hébergement (licences jointes dans le
   même dossier). Le site a exactement la même apparence qu'avant et
   ne contacte plus aucun serveur tiers pour s'afficher.

   La politique de sécurité du contenu (.htaccess) bloque en plus toute
   requête de police hors du site : même une réintroduction accidentelle
   d'un @import vers Google resterait sans effet.

   unicode-range limite chaque fichier au sous-ensemble latin, qui
   couvre l'intégralité du français, œ et Œ compris. font-display: swap
   affiche le texte immédiatement avec la police de repli plutôt que de
   laisser un blanc.
   ============================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  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: 'Fraunces';
  src: url('../fonts/fraunces-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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: 'Fraunces';
  src: url('../fonts/fraunces-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  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: 'Fraunces';
  src: url('../fonts/fraunces-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  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: 'Nunito';
  src: url('../fonts/nunito-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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: 'Nunito';
  src: url('../fonts/nunito-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  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: 'Nunito';
  src: url('../fonts/nunito-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  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: 'Nunito';
  src: url('../fonts/nunito-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  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: 'Nunito';
  src: url('../fonts/nunito-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  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: 'DM Mono';
  src: url('../fonts/dm-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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: 'DM Mono';
  src: url('../fonts/dm-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  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;
}

/* ============================================
   DESIGN TOKENS — Risograph Zine
   ============================================ */
:root {
  --cream:      #FFF8EE;
  --cream2:     #FFF1D6;
  --cream3:     #FFE8BC;
  --coral:      #FF5C3A;
  --coral2:     #FF8A6E;
  --coral-bg:   #FFF0ED;
  --mint:       #00C896;
  --mint2:      #4DDBB4;
  --mint-bg:    #E8FBF5;
  --yellow:     #FFD000;
  --yellow2:    #FFE066;
  --yellow-bg:  #FFFBE6;
  --fuchsia:    #FF3D9A;
  --fuchsia2:   #FF7DC0;
  --fuchsia-bg: #FFF0F7;
  --violet:     #7C3AED;
  --violet2:    #A78BFA;
  --violet-bg:  #F3EEFF;
  --ink:        #1A1209;
  --ink2:       #3D2F1A;
  --ink3:       #7A6347;
  --ink4:       #B8A080;
  --border:     rgba(26,18,9,0.12);
  --border2:    rgba(26,18,9,0.22);
  --shadow:     4px 6px 0px rgba(26,18,9,0.15);
  --shadow-lg:  6px 10px 0px rgba(26,18,9,0.15);
  --radius:     12px;
  --radius-lg:  20px;
  /* Les piles de repli sont complètes : si public/fonts/ est vide, le
     site s'affiche avec des polices présentes sur toutes les machines,
     sans aucune requête vers l'extérieur. */
  --display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --body:       'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:       'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background-color: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
}

/* Decorative background shapes */
body::before {
  content: '';
  position: fixed;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,0,0.12) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  padding: 0 2rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  min-height: 68px;
}

.logo {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
  display: flex; align-items: center; gap: 0.15em;
  flex-shrink: 0;
}
.logo-accent { color: var(--coral); }
.logo-badge {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 500;
  background: var(--yellow);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1.5px solid var(--ink);
  margin-left: 0.4rem;
  vertical-align: middle;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Search */
.search-wrap {
  flex: 1; min-width: 180px; max-width: 380px;
  position: relative;
}
.search-wrap svg {
  position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  color: var(--ink3); width: 16px; height: 16px; pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 2.4rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: 2px 3px 0 var(--ink);
}
.search-input::placeholder { color: var(--ink4); font-weight: 400; }
.search-input:focus { border-color: var(--coral); box-shadow: 2px 3px 0 var(--coral); }

/* Nav pills */
.nav-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-shrink: 0; }
.nav-pill {
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.01em;
  box-shadow: 2px 3px 0 var(--ink);
  white-space: nowrap;
}
.nav-pill:hover { transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); }
.nav-pill:active { transform: translate(1px,1px); box-shadow: 1px 2px 0 var(--ink); }
.nav-pill.active { background: var(--coral); color: #fff; border-color: var(--coral); }
.nav-pill[data-view="flashcard"].active { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.nav-pill[data-view="qcm"].active { background: var(--fuchsia); border-color: var(--fuchsia); }

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; position: relative; z-index: 1; }

/* ============================================
   STATS STRIP
   ============================================ */
.stats-strip {
  display: flex; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.stat-chip {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink2);
  box-shadow: 2px 3px 0 var(--ink);
}
.stat-chip strong { color: var(--ink); font-weight: 500; }
.stat-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral); border: 1.5px solid var(--ink); flex-shrink: 0;
}
.stat-dot.mint { background: var(--mint); }
.stat-dot.yellow { background: var(--yellow); }

/* ============================================
   SECTION LABELS
   ============================================ */
.section-label {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}
.section-label::after { content: ''; flex: 1; height: 1.5px; background: var(--border2); }

/* ============================================
   CATEGORY FILTERS
   ============================================ */
.cat-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.cat-btn {
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 2px 3px 0 var(--ink);
}
.cat-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); }
.cat-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.cat-btn.active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.cat-btn.active[data-cat="COMPUTERS"]          { background: var(--coral);   color: #fff; border-color: var(--coral); }
.cat-btn.active[data-cat="Adjectives"]         { background: var(--violet);  color: #fff; border-color: var(--violet); }
.cat-btn.active[data-cat="Safer on the Internet"] { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.cat-btn.active[data-cat="AI"]                 { background: var(--yellow);  color: var(--ink); border-color: var(--yellow); }
.cat-btn.active[data-cat="New ways of working"]{ background: var(--fuchsia); color: #fff; border-color: var(--fuchsia); }
.cat-btn.active[data-cat="Immersive tech"]     { background: var(--mint);    color: var(--ink); border-color: var(--mint); }
.cat-btn.active[data-cat="Laws - regulations"] { background: var(--coral);   color: #fff; border-color: var(--coral); }
.cat-btn.active[data-cat="Expressions"]        { background: var(--yellow);  color: var(--ink); border-color: var(--yellow); }
.cat-btn.active[data-cat="all"]                { background: var(--ink);     color: #fff; border-color: var(--ink); }

/* ============================================
   WORD GRID
   ============================================ */
.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.word-card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.word-card:hover { transform: translate(-2px,-3px); box-shadow: var(--shadow-lg); }
.word-card:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }

.word-card .card-top-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 18px 18px 0 0;
}
.stripe-computers   { background: linear-gradient(90deg, var(--coral), var(--coral2)); }
.stripe-adjectives  { background: linear-gradient(90deg, var(--violet), var(--violet2)); }
.stripe-internet    { background: linear-gradient(90deg, var(--mint), var(--mint2)); }
.stripe-ai          { background: linear-gradient(90deg, var(--yellow), var(--yellow2)); }
.stripe-working     { background: linear-gradient(90deg, var(--fuchsia), var(--fuchsia2)); }
.stripe-immersive   { background: linear-gradient(90deg, var(--mint), #00E5B8); }
.stripe-laws        { background: linear-gradient(90deg, var(--coral), var(--yellow)); }
.stripe-expressions { background: linear-gradient(90deg, var(--yellow), var(--fuchsia)); }

.word-en {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.25rem;
  margin-top: 0.35rem;
  line-height: 1.3;
}
.word-fr {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--coral);
  margin-bottom: 0.75rem;
  min-height: 1.3em;
}
.word-fr.loading-state { color: var(--ink4); font-style: italic; }

.word-footer {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.word-cat-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.18rem 0.6rem;
  border-radius: 50px;
  border: 1.5px solid var(--ink);
  letter-spacing: 0.04em;
}
.tag-computers   { background: var(--coral-bg);   color: var(--coral); }
.tag-adjectives  { background: var(--violet-bg);  color: var(--violet); }
.tag-internet    { background: var(--mint-bg);    color: #009970; }
.tag-ai          { background: var(--yellow-bg);  color: #9A7000; }
.tag-working     { background: var(--fuchsia-bg); color: var(--fuchsia); }
.tag-immersive   { background: var(--mint-bg);    color: #007A5E; }
.tag-laws        { background: var(--coral-bg);   color: #CC3A1A; }
.tag-expressions { background: var(--yellow-bg);  color: #9A7000; }

.btn-speak {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 50px;
  border: 1.5px solid var(--ink);
  background: var(--yellow-bg);
  color: var(--ink2);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-speak:hover { background: var(--yellow); transform: translate(-1px,-1px); box-shadow: 1px 2px 0 var(--ink); }
.btn-speak svg { width: 12px; height: 12px; }

.word-example {
  display: none;
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: var(--cream2);
  border-radius: 10px;
  border-left: 3px solid var(--coral);
  font-size: 0.82rem;
  color: var(--ink2);
  font-style: italic;
  line-height: 1.55;
}
.word-card.expanded .word-example { display: block; }
.word-card.expanded {
  background: var(--cream);
}

/* Shimmer loading */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--cream3) 25%, var(--cream2) 50%, var(--cream3) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  height: 1em;
  width: 60%;
  display: inline-block;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--ink3);
}
.empty-state .empty-icon {
  font-family: var(--display);
  font-size: 3rem;
  margin-bottom: 0.5rem;
  display: block;
}
.empty-state p { font-size: 0.95rem; }

/* ============================================
   FLASHCARD VIEW
   ============================================ */
#view-flashcard { display: none; }

.fc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;
}
.fc-header-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.fc-cat-select {
  padding: 0.45rem 1rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow: 2px 3px 0 var(--ink);
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1209' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.fc-cat-select option { background: #fff; font-weight: 600; }

.btn-shuffle {
  padding: 0.45rem 1.1rem;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 3px 0 var(--ink);
  transition: all 0.15s;
}
.btn-shuffle:hover { transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); }

.fc-progress-text {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink3);
}

/* Progress bar */
.fc-progress-bar {
  width: 100%; height: 8px;
  background: var(--cream3);
  border: 1.5px solid var(--ink);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.fc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--yellow));
  border-radius: 50px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Flashcard scene */
.fc-scene-wrap { max-width: 560px; margin: 0 auto 2rem; }
.fc-scene {
  width: 100%; height: 300px;
  perspective: 1200px;
  cursor: pointer;
  user-select: none;
}
.fc-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.fc-scene.flipped .fc-inner { transform: rotateY(180deg); }

.fc-face {
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  border: 2px solid var(--ink);
  backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.fc-front { background: #fff; }
.fc-back  { background: var(--mint-bg); transform: rotateY(180deg); }

.fc-word-display {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.fc-flip-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink4);
  border: 1.5px solid var(--ink4);
  border-radius: 50px;
  padding: 0.2rem 0.7rem;
  letter-spacing: 0.06em;
}
.fc-translation {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 0.5rem;
  font-style: italic;
}
.fc-ex {
  font-size: 0.85rem;
  color: var(--ink2);
  font-style: italic;
  line-height: 1.5;
  max-width: 90%;
  margin-top: 0.5rem;
}
.fc-back-listen {
  margin-top: 1rem;
}

/* FC nav buttons */
.fc-nav {
  display: flex; gap: 1rem; justify-content: center; align-items: center;
  max-width: 560px; margin: 0 auto;
}
.fc-nav-btn {
  flex: 1;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.fc-nav-btn:hover  { transform: translate(-1px,-2px); box-shadow: var(--shadow-lg); }
.fc-nav-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.fc-btn-know    { background: var(--mint);   color: var(--ink); }
.fc-btn-dontknow { background: var(--cream2); color: var(--ink); }
.fc-btn-flip    { background: var(--yellow); color: var(--ink); flex: 0 0 auto; padding: 0.8rem 1.5rem; }

/* FC Score board */
.fc-scoreboard {
  display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.fc-score-pill {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 50px;
  font-family: var(--mono);
  font-size: 0.85rem;
  background: #fff;
  box-shadow: 2px 3px 0 var(--ink);
}
.fc-score-pill .score-num { font-weight: 500; font-size: 1rem; }
.pill-good  { color: #009970; }
.pill-good .score-num  { color: var(--mint); }
.pill-bad   { color: #CC3A1A; }
.pill-bad .score-num   { color: var(--coral); }

/* ============================================
   QCM VIEW
   ============================================ */
#view-qcm { display: none; }

.qcm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem;
}
.qcm-mode-tabs { display: flex; gap: 0.4rem; }
.qcm-mode-btn {
  padding: 0.4rem 1rem;
  border-radius: 50px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 2px 3px 0 var(--ink);
}
.qcm-mode-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); }
.qcm-mode-btn.active { background: var(--fuchsia); color: #fff; border-color: var(--fuchsia); transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

.qcm-score-display {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.4rem 1rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50px;
  box-shadow: 2px 3px 0 var(--ink);
}

.qcm-card {
  max-width: 580px; margin: 0 auto;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
.qcm-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  text-align: center;
  margin-bottom: 0.75rem;
}
.qcm-question {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 1.75rem;
  line-height: 1.3;
}
.qcm-opts { display: flex; flex-direction: column; gap: 0.65rem; }
.qcm-opt {
  padding: 0.85rem 1.25rem;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.15s;
  box-shadow: 2px 3px 0 var(--ink);
}
.qcm-opt:hover:not(.locked) { background: var(--cream2); transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); }
.qcm-opt.correct { background: var(--mint-bg); border-color: var(--mint); color: #007A5E; box-shadow: 2px 3px 0 var(--mint); }
.qcm-opt.wrong   { background: var(--coral-bg); border-color: var(--coral); color: var(--coral); box-shadow: 2px 3px 0 var(--coral); }
.qcm-opt.locked  { cursor: default; transform: none; }

.qcm-feedback {
  text-align: center;
  margin-top: 1rem;
  min-height: 1.6rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
}
.qcm-feedback.ok  { color: var(--mint); }
.qcm-feedback.bad { color: var(--coral); }

.btn-next-qcm {
  display: block; width: 100%; margin-top: 1.25rem;
  padding: 0.8rem;
  background: var(--fuchsia);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.15s;
}
.btn-next-qcm:hover { transform: translate(-1px,-2px); box-shadow: var(--shadow-lg); }
.btn-next-qcm:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

/* ============================================
   ADD WORD MODAL
   ============================================ */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26,18,9,0.55);
  z-index: 400;
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.modal-backdrop.open { display: flex; }

.modal-box {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 1.75rem;
  width: 90%; max-width: 460px;
  box-shadow: 8px 12px 0 var(--ink);
  position: relative;
}
.modal-title {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.modal-subtitle {
  font-size: 0.85rem;
  color: var(--ink3);
  margin-bottom: 1.5rem;
}
.modal-close-btn {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: var(--cream2);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
  transition: all 0.15s;
}
.modal-close-btn:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

.field-group { margin-bottom: 1.1rem; }
.field-group label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 0.4rem;
}
.field-group input,
.field-group select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 2px 3px 0 var(--ink);
}
.field-group input:focus,
.field-group select:focus {
  border-color: var(--coral);
  box-shadow: 2px 3px 0 var(--coral);
}
.field-group input::placeholder { color: var(--ink4); font-weight: 400; }
.field-group select { appearance: none; cursor: pointer; }
.field-group select option { font-weight: 600; }

.add-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink3);
  min-height: 1.2rem;
  margin-bottom: 0.9rem;
}
.add-status.error { color: var(--coral); }
.add-status.success { color: var(--mint); }

.btn-add-submit {
  width: 100%;
  padding: 0.8rem;
  background: var(--coral);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.btn-add-submit:hover { transform: translate(-1px,-2px); box-shadow: var(--shadow-lg); }
.btn-add-submit:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn-add-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }

/* ============================================
   FLOATING ADD BUTTON
   ============================================ */
.fab {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 58px; height: 58px;
  background: var(--coral);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 4px 6px 0 var(--ink);
  transition: all 0.15s;
  z-index: 300;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}
.fab:hover { transform: translate(-2px,-3px); box-shadow: 6px 9px 0 var(--ink); }
.fab:active { transform: translate(1px,1px); box-shadow: 2px 3px 0 var(--ink); }

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed; bottom: 5.5rem; right: 2rem;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  border-radius: 50px;
  border: 2px solid var(--ink);
  z-index: 500;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.toast.visible { transform: translateY(0) scale(1); opacity: 1; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.word-card { animation: fadeUp 0.3s ease both; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
  .container { padding: 1rem; }
  .site-header { padding: 0.75rem 1rem; gap: 0.75rem; }
  .logo { font-size: 1.3rem; }
  .nav-pills { gap: 0.25rem; }
  .nav-pill { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
  .word-grid { grid-template-columns: 1fr; }
  .fc-word-display { font-size: 1.5rem; }
  .qcm-card { padding: 1.25rem; }
  .fab { width: 50px; height: 50px; font-size: 1.4rem; }
}

/* Custom categories — cycling colors */
.cat-btn.active[data-cat^="custom-"] { background: var(--fuchsia); color: #fff; border-color: var(--fuchsia); }
.stripe-custom { background: linear-gradient(90deg, var(--fuchsia), var(--violet)); }
.tag-custom { background: var(--fuchsia-bg); color: var(--fuchsia); }
/* Modal tabs */
.modal-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.modal-tab {
  flex: 1; padding: 0.55rem; background: #fff; border: none;
  font-family: var(--body); font-size: 0.82rem; font-weight: 800;
  color: var(--ink2); cursor: pointer; transition: all 0.15s;
}
.modal-tab:not(:last-child) { border-right: 2px solid var(--ink); }
.modal-tab.active { background: var(--yellow); color: var(--ink); }
.modal-tab:hover:not(.active) { background: var(--cream2); }
.modal-panel { display: none; }
.modal-panel.active { display: block; }
.cat-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 220px; overflow-y: auto; margin-bottom: 0.9rem; }
.cat-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.85rem;
  background: #fff; border: 1.5px solid var(--ink);
  border-radius: var(--radius); font-size: 0.88rem; font-weight: 700;
}
.cat-delete-btn {
  background: none; border: none; cursor: pointer;
  color: var(--ink4); font-size: 1rem; line-height: 1; padding: 0 0.2rem;
  transition: color 0.15s;
}
.cat-delete-btn:hover { color: var(--coral); }
.cat-list-empty { color: var(--ink4); font-size: 0.85rem; font-style: italic; text-align: center; padding: 1rem; }
/* =====================================================================
   AJOUTS v2 — comptes, édition collaborative, historique
   =====================================================================

   Note importante : ce fichier ne contient plus AUCUN style inline dans
   le HTML. La politique CSP du site interdit style="…" et <style> :
   c'est ce qui rend une injection HTML inoffensive même si un
   échappement était oublié quelque part. Tout ce qui était écrit en
   attribut style dans la version précédente est devenu une classe ici.
   ===================================================================== */

/* --- Utilitaires ----------------------------------------------------- */
.is-hidden { display: none !important; }
.u-mt-1    { margin-top: 1rem; }

.cat-count   { opacity: 0.55; font-size: 0.8em; font-weight: 400; }
.hint-muted  { color: var(--ink4); font-size: 0.8rem; font-style: italic; }
.err-inline  { color: var(--coral); font-size: 0.78rem; font-weight: 600; }

.btn-mint { background: var(--mint); color: var(--ink); }

/* Bascule entre les trois vues.
   L'ancienne version les masquait uniquement en JavaScript, après le
   premier rendu : les trois vues apparaissaient donc empilées pendant
   un instant au chargement. Ici, le HTML part dans le bon état et
   JavaScript ne fait que déplacer la classe .is-visible.

   Les deux règles portent le même poids de sélecteur (un id + une
   classe contre un id), donc la seconde l'emporte bien sur la
   première — c'est ce qui rend la bascule fiable. */
#view-dictionary,
#view-flashcard,
#view-qcm { display: none; }

#view-dictionary.is-visible,
#view-flashcard.is-visible,
#view-qcm.is-visible { display: block; }

.fc-progress-fill { width: 0; }

/* --- Zone compte, en-tête -------------------------------------------- */
.account-zone { display: flex; align-items: center; gap: 0.5rem; }

.btn-signin,
.btn-account {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: inherit; font-weight: 700; font-size: 0.82rem;
  padding: 0.45rem 0.85rem; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink);
  box-shadow: 2px 3px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-signin:hover,
.btn-account:hover { transform: translate(-1px,-2px); box-shadow: 3px 5px 0 var(--ink); }
.btn-signin:active,
.btn-account:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn-signin { background: var(--mint); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-size: 0.72rem; font-weight: 900; line-height: 1;
}
.account-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Modale de connexion --------------------------------------------- */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; margin: 0.25rem 0 0.9rem;
  padding: 0.7rem 1rem; text-decoration: none;
  font-family: inherit; font-weight: 700; font-size: 0.9rem;
  color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-google:hover { transform: translate(-1px,-2px); box-shadow: 4px 6px 0 var(--ink); }
.g-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--coral); color: #fff; font-weight: 900; font-size: 0.85rem;
}

.auth-sep {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.4rem 0 1rem; color: var(--ink4); font-size: 0.78rem;
}
.auth-sep::before,
.auth-sep::after {
  content: ''; flex: 1; height: 2px; background: var(--ink4); opacity: 0.3;
}

.field-hint {
  display: block; margin-top: 0.3rem;
  font-size: 0.74rem; color: var(--ink4); line-height: 1.35;
}

.field-group textarea {
  width: 100%; font-family: inherit; font-size: 0.9rem; line-height: 1.45;
  padding: 0.65rem 0.8rem; resize: vertical;
  color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 12px;
}
.field-group textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 2px 3px 0 var(--coral);
}

/* --- Carte : actions et attribution ---------------------------------- */
.card-actions { display: flex; align-items: center; gap: 0.4rem; }

.btn-edit {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: inherit; font-size: 0.7rem; font-weight: 700;
  padding: 0.3rem 0.55rem; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink4); border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-edit:hover { background: var(--yellow-bg, #FFF8E1); border-color: var(--ink); }

.word-credit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1.5px dashed rgba(0,0,0,0.09);
  font-size: 0.72rem; color: var(--ink4);
}
.credit-author { font-weight: 800; color: var(--ink); }
.credit-author.is-anon { font-weight: 600; font-style: italic; color: var(--ink4); }
.credit-sep  { opacity: 0.5; }
.credit-meta { font-weight: 500; }

/* --- Liste des catégories -------------------------------------------- */
.cat-lock {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink4); opacity: 0.75;
}

/* --- Historique des révisions ---------------------------------------- */
.history-block {
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
}
.history-title {
  margin: 0 0 0.3rem; font-size: 1rem; font-weight: 900; color: var(--ink);
}
.history-list {
  display: flex; flex-direction: column; gap: 0.6rem;
  max-height: 17rem; overflow-y: auto; padding-right: 0.25rem;
}

.hist-item {
  padding: 0.6rem 0.75rem;
  background: #fff; border: 1.5px solid var(--ink4); border-radius: 12px;
}
.hist-item.is-current { border-color: var(--mint); background: var(--mint-bg); }

.hist-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; color: var(--ink4); margin-bottom: 0.35rem;
}
.hist-rev {
  font-weight: 900; color: var(--ink);
  background: var(--yellow, #FFD84D);
  padding: 0.05rem 0.35rem; border-radius: 6px;
}
.hist-author { font-weight: 800; color: var(--ink); }
.hist-action { font-style: italic; }
.hist-date   { margin-left: auto; }

.hist-body  { font-size: 0.85rem; line-height: 1.4; }
.hist-fr    { font-weight: 700; color: var(--ink); }
.hist-ex    { margin-top: 0.2rem; font-size: 0.78rem; color: var(--ink4); font-style: italic; }

.hist-current {
  display: inline-block; margin-top: 0.4rem;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: #009970;
}
.hist-restore {
  margin-top: 0.45rem; padding: 0.3rem 0.6rem; cursor: pointer;
  font-family: inherit; font-size: 0.72rem; font-weight: 700;
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--ink); border-radius: 8px;
}
.hist-restore:hover { background: var(--coral); color: #fff; border-color: var(--coral); }





/* =====================================================================
   CLASSES, ADMINISTRATION, IMPORT CSV
   ===================================================================== */

/* --- Badge de classe, devenu un bouton -------------------------------
   Il conserve l'apparence du badge d'origine : les utilisateurs le
   reconnaissent, mais il réagit désormais au survol et au clic. */
.brand { display: flex; align-items: center; gap: 0.1rem; }

.class-switch {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  background: var(--yellow);
  color: var(--ink);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1.5px solid var(--ink);
  margin-left: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  max-width: 9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.class-switch:hover { transform: translate(-1px,-1px); box-shadow: 2px 2px 0 var(--ink); }
.class-switch:active { transform: translate(0,0); box-shadow: none; }

/* --- Bouton du panneau d'administration ------------------------------ */
.btn-admin {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: 2px 3px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-admin:hover { transform: translate(-1px,-2px); box-shadow: 3px 5px 0 var(--ink); }

/* --- Modales larges --------------------------------------------------- */
.modal-wide { max-width: 720px; }

/* --- Liste des classes ------------------------------------------------ */
.class-list { display: flex; flex-direction: column; gap: 0.55rem; }

.class-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  width: 100%; padding: 0.75rem 0.95rem; cursor: pointer; text-align: left;
  font-family: inherit;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 2px 3px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.class-item:hover { transform: translate(-1px,-2px); box-shadow: 3px 5px 0 var(--ink); }
.class-item.is-current { background: var(--yellow); }
.class-name { font-weight: 800; font-size: 0.98rem; }
.class-meta { font-size: 0.74rem; color: var(--ink4); }
.class-current-flag {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: #009970;
}

/* --- Statistiques ----------------------------------------------------- */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.55rem; }
.admin-stat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.admin-stat-label { font-size: 0.78rem; color: var(--ink4); }
.admin-stat-value { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }

/* --- Listes du panneau ------------------------------------------------ */
.admin-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 48vh; overflow-y: auto; }

.admin-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.admin-row.is-inactive { opacity: 0.55; }
.admin-row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 14rem; }
.admin-row-title { font-weight: 800; font-size: 0.92rem; }
.admin-row-meta  { font-size: 0.73rem; color: var(--ink4); overflow-wrap: anywhere; }
.admin-row-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.admin-badge {
  display: inline-block; margin-left: 0.35rem;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--yellow); color: var(--ink);
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ink);
}
.admin-badge.is-off { background: var(--coral-bg); color: var(--coral); }

.admin-btn {
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  padding: 0.4rem 0.7rem; cursor: pointer;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 8px;
}
.admin-btn:hover { background: var(--cream2); }
.admin-btn.is-danger { color: var(--coral); border-color: var(--coral); }
.admin-btn.is-danger:hover { background: var(--coral); color: #fff; }

.admin-role {
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink);
}
.admin-role:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Formulaire en ligne ---------------------------------------------- */
.inline-form { display: flex; gap: 0.5rem; align-items: stretch; }
.inline-form input { flex: 1; min-width: 0; }
.btn-inline { width: auto; padding-left: 1.2rem; padding-right: 1.2rem; white-space: nowrap; }

/* --- Entrée vers l'import CSV ----------------------------------------- */
.import-hint {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1.5px dashed rgba(0,0,0,0.12);
  font-size: 0.8rem; color: var(--ink4);
}
.btn-link {
  font-family: inherit; font-size: 0.8rem; font-weight: 800;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--coral); text-decoration: underline; text-underline-offset: 2px;
}

/* --- Import CSV -------------------------------------------------------- */
.csv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; flex-wrap: wrap;
  margin: 0.8rem 0 0.6rem; padding: 0.6rem 0.75rem;
  background: var(--cream2); border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.csv-bulk { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.csv-bulk label { font-size: 0.76rem; font-weight: 700; color: var(--ink); }
.csv-bulk select {
  font-family: inherit; font-size: 0.8rem; padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink);
  max-width: 11rem;
}
.csv-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--ink4); }

.csv-list {
  display: flex; flex-direction: column; gap: 0.35rem;
  max-height: 38vh; overflow-y: auto;
  margin-bottom: 0.9rem; padding-right: 0.2rem;
}
.csv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  background: #fff; border: 1.5px solid var(--ink4); border-radius: 10px;
}
.csv-row.is-skipped { background: var(--cream2); opacity: 0.7; }
.csv-word { font-weight: 700; font-size: 0.86rem; overflow-wrap: anywhere; }
.csv-flag {
  font-size: 0.68rem; font-weight: 700; font-style: italic;
  color: var(--coral); white-space: nowrap;
}
.csv-cat {
  font-family: inherit; font-size: 0.76rem; padding: 0.3rem 0.45rem;
  border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink);
  max-width: 11rem; flex-shrink: 0;
}

.field-group input[type="file"] {
  width: 100%; font-family: inherit; font-size: 0.85rem;
  padding: 0.55rem; background: #fff;
  border: 2px dashed var(--ink); border-radius: 12px; cursor: pointer;
}

/* =====================================================================
   MODALES — hauteur bornée et défilement
   =====================================================================

   Une modale centrée plus haute que la fenêtre déborde des DEUX côtés :
   le haut passe au-dessus du bord supérieur et devient inatteignable,
   bouton de fermeture compris. Mesuré sur la modale d'édition, qui
   contient l'historique : 778 px de haut pour une fenêtre de 720.

   Deux règles suffisent : plafonner la hauteur à celle de la fenêtre,
   et rendre le contenu défilable. Le bouton de fermeture passe en
   position collante pour rester accessible pendant le défilement.
   ===================================================================== */

.modal-backdrop {
  /* Marge de sécurité : la modale ne touche jamais les bords. */
  padding: 1.5rem 1rem;
  overflow-y: auto;
}

.modal-box {
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  /* Colonne flex : permet de coller le bouton de fermeture en haut
     sans le sortir du flux, donc sans toucher au HTML. */
  display: flex;
  flex-direction: column;
  /* Le défilement s'arrête à la modale : la page derrière ne bouge pas. */
  overscroll-behavior: contain;
}

/* Les enfants d'un conteneur flex ne se rétrécissent pas tout seuls :
   sans cela, les champs se tasseraient au lieu de faire défiler. */
.modal-box > * { flex: 0 0 auto; }

.modal-close-btn {
  position: sticky;
  top: 0;
  align-self: flex-end;
  z-index: 10;
  /* Fond opaque : le bouton reste lisible par-dessus le contenu qui
     défile dessous. */
  background: var(--cream);
}

/* La liste des versions a son propre défilement : sans plafond, elle
   allongerait indéfiniment la modale au lieu de défiler. */
.history-list { max-height: 15rem; }

/* =====================================================================
   MOBILE — refonte
   =====================================================================

   Trois problèmes mesurés sur un rendu réel à 360 px :

     1. l'en-tête, collant en haut, occupait 197 px soit 31 % de l'écran :
        logo, recherche, trois onglets et le bouton de compte passaient
        à la ligne les uns après les autres ;
     2. les filtres de catégorie s'étalaient sur sept lignes, repoussant
        le premier mot à plus de 1000 px du haut ;
     3. les cibles tactiles mesuraient 30 px de haut, là où les
        recommandations d'Apple et de Google demandent 44 à 48 px.

   Réponse : en-tête sur deux lignes, onglets déplacés en barre basse
   (zone naturelle du pouce), filtres en bande défilante horizontale.
   ===================================================================== */

@media (max-width: 720px) {

  /* --- En-tête : deux lignes, hauteur réduite de moitié ------------- */
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo   account"
      "search search";
    align-items: center;
    gap: 0.55rem 0.6rem;
    padding: 0.6rem 0.9rem;
    min-height: 0;
  }
  .logo         { grid-area: logo; font-size: 1.15rem; gap: 0.4rem; }
  .logo-badge   { font-size: 0.6rem; padding: 0.1rem 0.4rem; }
  .account-zone { grid-area: account; }
  .search-wrap  { grid-area: search; max-width: none; width: 100%; min-width: 0; }

  /* Le nom reste lisible : l'en-tête n'est plus à l'étroit. */
  .account-name { display: inline; max-width: 6.5rem; }

  /* --- Onglets en barre basse --------------------------------------
     Déplacés du haut vers le bas : c'est la zone atteignable au pouce
     sur un téléphone tenu d'une main, et cela rend 40 px de hauteur à
     l'en-tête collant. env(safe-area-inset-bottom) évite que la barre
     passe sous l'indicateur d'accueil des iPhone récents. */
  .nav-pills {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 350;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    background: var(--cream);
    border-top: 2px solid var(--ink);
    padding: 0.4rem 0.5rem;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-pill {
    min-height: 46px;
    padding: 0.3rem 0.4rem;
    font-size: 0.74rem;
    border-radius: 12px;
    box-shadow: none;
    border-width: 2px;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Le contenu ne doit pas passer sous la barre. */
  .container {
    padding: 1rem 1rem calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Bandeau de statistiques : une seule ligne -------------------- */
  .stats-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    margin: 0 -1rem 1.1rem;
    padding: 0 1rem 0.2rem;
    scrollbar-width: none;
  }
  .stats-strip::-webkit-scrollbar { display: none; }
  .stat-chip { flex: 0 0 auto; font-size: 0.75rem; padding: 0.4rem 0.75rem; }

  /* --- Filtres de catégorie : bande défilante ----------------------
     Sept lignes devenaient une bande d'une ligne. Les marges négatives
     font courir la bande d'un bord à l'autre de l'écran, ce qui indique
     visuellement qu'elle se fait glisser. */
  .cat-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 0.45rem;
    margin: 0 -1rem 1.4rem;
    padding: 0.2rem 1rem 0.5rem;
    scrollbar-width: none;
  }
  .cat-filters::-webkit-scrollbar { display: none; }
  .cat-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
  }

  .section-label { margin-bottom: 0.6rem; }

  /* --- Cibles tactiles ---------------------------------------------
     44 px est le minimum recommandé par Apple, 48 dp par Google. */
  .btn-signin, .btn-account { min-height: 42px; padding: 0.5rem 0.9rem; }

  /* 16 px exactement : en dessous, iOS zoome automatiquement sur le
     champ au moment de la saisie et déforme la mise en page. */
  .search-input {
    min-height: 46px;
    font-size: 16px;
    padding: 0.7rem 1rem 0.7rem 2.6rem;
  }

  .fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 1rem;
    width: 56px; height: 56px;
  }

  /* --- Cartes de mots ----------------------------------------------- */
  .word-grid  { grid-template-columns: 1fr; gap: 0.9rem; }
  .word-card  { padding: 1rem; }
  .word-en    { font-size: 1.05rem; }
  .word-footer { flex-wrap: wrap; gap: 0.5rem; }
  .card-actions { gap: 0.4rem; }
  .btn-edit, .btn-speak {
    min-height: 40px;
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
  }
  .word-credit { font-size: 0.7rem; }

  /* --- Flashcards ---------------------------------------------------- */
  .fc-header { flex-wrap: wrap; gap: 0.6rem; }
  .fc-cat-select { min-height: 44px; font-size: 16px; flex: 1 1 auto; min-width: 0; }
  .btn-shuffle   { min-height: 44px; }
  /* Hauteur relative : la carte ne déborde plus sur les petits écrans. */
  .fc-scene { height: min(52vh, 300px); }
  .fc-nav { gap: 0.5rem; }
  .fc-nav-btn { flex: 1 1 0; min-height: 48px; padding: 0.6rem 0.4rem; font-size: 0.78rem; }
  .fc-scoreboard { flex-wrap: wrap; gap: 0.5rem; }

  /* --- QCM ----------------------------------------------------------- */
  .qcm-topbar { flex-wrap: wrap; gap: 0.6rem; }
  .qcm-mode-tabs { width: 100%; }
  .qcm-mode-btn { flex: 1; min-height: 42px; font-size: 0.75rem; }
  .qcm-card { padding: 1.1rem; }
  .qcm-question { font-size: 1.15rem; }
  .qcm-opt { min-height: 52px; display: flex; align-items: center; font-size: 0.88rem; }
  .btn-next-qcm { min-height: 48px; width: 100%; }

  /* --- Modales : feuille remontant du bas ---------------------------
     Centrée, une modale plus haute que l'écran devient impossible à
     fermer au doigt : le bouton sort du champ. En feuille ancrée en
     bas, l'en-tête reste atteignable et le contenu défile. */
  .modal-backdrop { align-items: flex-end; }
  .modal-box {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0;
    border-width: 2px 0 0 0;
    box-shadow: none;
    padding: 1.3rem 1.1rem;
    padding-bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
  }
  .modal-close-btn {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    top: 0.6rem; right: 0.6rem;
  }
  .modal-title { font-size: 1.25rem; padding-right: 2.5rem; }
  .modal-tab   { min-height: 44px; font-size: 0.78rem; padding: 0.5rem 0.3rem; }
  .field-group input,
  .field-group select,
  .field-group textarea { min-height: 46px; font-size: 16px; }
  .btn-add-submit, .btn-google { min-height: 50px; }
  .cat-list { max-height: 40vh; }
  .cat-list-item { min-height: 48px; }
  .cat-delete-btn { min-width: 44px; min-height: 44px; }

  /* --- Historique ---------------------------------------------------- */
  .history-list { max-height: 45vh; }
  .hist-date    { margin-left: 0; width: 100%; }
  .hist-restore { min-height: 42px; width: 100%; }

  /* --- Notifications ------------------------------------------------- */
  .toast {
    left: 1rem; right: 1rem; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    max-width: none; text-align: center;
  }
}

/* --- Très petits écrans (≤ 380 px) ----------------------------------- */
@media (max-width: 380px) {
  .logo        { font-size: 1.05rem; }

  /* Le badge décoratif disparaît, PAS le sélecteur de classe : il est
     devenu le seul moyen de changer de classe sur un téléphone.
     Il portait les deux classes CSS, et cette règle le masquait. */
  .logo-badge  { display: none; }
  .class-switch { max-width: 4.6rem; font-size: 0.5rem; padding: 3px 5px; }
  .account-name { display: none; }
  .nav-pill    { font-size: 0.68rem; padding: 0.3rem 0.2rem; }
  .stat-chip   { font-size: 0.72rem; }
}

/* --- Confort tactile général ----------------------------------------
   Sur un appareil sans souris, l'effet de survol reste « collé » après
   un appui : le bouton garde l'apparence survolée jusqu'au tap suivant.
   On les neutralise et on donne un retour à l'appui à la place. */
@media (hover: none) {
  .word-card:hover   { transform: none; box-shadow: var(--shadow); }
  .cat-btn:hover:not(.active),
  .nav-pill:hover:not(.active) { background: #fff; }
  .word-card:active  { transform: scale(0.99); }
  .cat-btn:active, .nav-pill:active, .fc-nav-btn:active,
  .qcm-opt:active, .btn-add-submit:active { transform: translateY(1px); }
}

/* Empêche iOS d'agrandir le texte en paysage. */
html { -webkit-text-size-adjust: 100%; }


/* --- Classes et administration sur téléphone -------------------------- */
@media (max-width: 720px) {
  .brand { min-width: 0; }
  .class-switch { max-width: 6rem; min-height: 28px; }
  .btn-admin { width: 40px; height: 40px; }
  .modal-wide { max-width: none; }

  .admin-row { flex-direction: column; align-items: stretch; }
  .admin-row-actions { justify-content: flex-start; }
  .admin-btn, .admin-role { min-height: 40px; }
  .admin-list { max-height: 50vh; }
  .admin-stats { grid-template-columns: 1fr 1fr; }

  .csv-toolbar { flex-direction: column; align-items: stretch; }
  .csv-bulk { flex-direction: column; align-items: stretch; }
  .csv-bulk select, .csv-cat { max-width: none; width: 100%; min-height: 42px; }
  .csv-row { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .csv-list { max-height: 42vh; }
  .inline-form { flex-direction: column; }
  .btn-inline { width: 100%; }
}

/* =====================================================================
   VERSION 4 — codes de classe, mode « All », demandes, pages légales
   ===================================================================== */

/* --- Badge de classe en mode agrégé ---------------------------------- */
.class-switch.is-all {
  background: var(--violet-bg);
  border-color: var(--violet);
  color: var(--violet);
}

/* --- Ligne de classe avec bouton « Retirer » -------------------------- */
.class-row { display: flex; align-items: stretch; gap: 0.4rem; }
.class-row .class-item { flex: 1 1 auto; }

.class-leave {
  flex: 0 0 auto; font-family: inherit;
  font-size: 0.7rem; font-weight: 700; padding: 0 0.7rem; cursor: pointer;
  background: #fff; color: var(--ink4);
  border: 2px solid var(--border2); border-radius: var(--radius);
}
.class-leave:hover { color: var(--coral); border-color: var(--coral); }

.class-item.is-all { background: var(--violet-bg); }
.class-item.is-all.is-current { background: var(--violet); color: #fff; }
.class-item.is-all.is-current .class-meta { color: rgba(255,255,255,0.85); }
/* Le vert du drapeau « affichée » est illisible sur le violet plein :
   sur cette ligne-là, il passe en blanc. */
.class-item.is-all.is-current .class-current-flag { color: #fff; }

/* Une classe non rejointe reste consultable : atténuée, jamais barrée. */
.class-item.is-locked { opacity: 0.75; }
.class-lock { font-size: 0.66rem; font-weight: 700; color: var(--ink4); }
.class-current-flag.is-member { color: var(--violet); }

/* Le code est fait pour être lu à voix haute et recopié : chasse fixe,
   interlettrage large, et sélectionnable d'un double-clic. */
.class-code, .admin-code {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--yellow-bg); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 1px 7px; user-select: all;
}
.admin-code { align-self: flex-start; margin-top: 0.15rem; }

/* --- Formulaire de code ----------------------------------------------
   Le champ de code était écrasé à une trentaine de pixels : la règle
   générique « .inline-form input { flex: 1 } » lui donne une base de 0,
   il ne recevait donc que l'espace restant après le <select> (dimensionné
   par son contenu) et le bouton. Sur une modale étroite, il ne restait
   rien — le champ existait, mesurait la bonne hauteur, et était
   inutilisable.

   Correction : on ne laisse plus la largeur se négocier. Le sélecteur
   occupe sa propre ligne (base 100 %), le code et le bouton se
   partagent la suivante, et l'ensemble retombe proprement quelle que
   soit la largeur disponible. */
#join-box { margin-top: 1rem; padding-top: 0.9rem; border-top: 2px dashed var(--border2); }

.join-form { flex-wrap: wrap; }
.join-form #join-class      { flex: 1 1 100%; min-width: 0; }
.join-form #join-code       { flex: 2 1 7rem;  min-width: 6rem; max-width: none; }
.join-form #btn-join-class  { flex: 1 1 7rem;  min-width: 6rem; }

#join-code {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.25em; text-align: center;
}
/* Le texte de substitution reste discret et ne prend pas l'interlettrage
   du code saisi, qui le ferait déborder du champ. */
#join-code::placeholder { letter-spacing: 0.1em; opacity: 0.45; }

#join-signin-hint { margin-top: 1rem; }

.admin-btn.is-ok { color: #009970; border-color: #009970; }
.admin-btn.is-ok:hover { background: #009970; color: #fff; }

/* Le message d'une demande vient d'un utilisateur : on le laisse
   revenir à la ligne plutôt que de le tronquer. */
.admin-request-msg {
  margin-top: 0.3rem; padding: 0.4rem 0.6rem;
  font-size: 0.78rem; color: var(--ink2);
  background: var(--cream2); border-left: 3px solid var(--ink4);
  border-radius: 0 6px 6px 0; overflow-wrap: anywhere; white-space: pre-wrap;
}

/* --- Bouton d'édition verrouillé ------------------------------------- */
.btn-edit.is-locked {
  opacity: 0.55; border-style: dashed;
}
.btn-edit.is-locked:hover { opacity: 0.85; }

/* --- Fiche « Mon compte » -------------------------------------------- */
.account-info { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.account-info .admin-stat-value { font-family: var(--body); font-size: 0.85rem; overflow-wrap: anywhere; }

.danger-zone {
  margin-top: 1.4rem; padding: 0.9rem 1rem;
  background: var(--coral-bg);
  border: 2px solid var(--coral); border-radius: var(--radius);
}
.danger-zone h3 {
  font-family: var(--display); font-size: 1rem; color: var(--coral);
  margin-bottom: 0.4rem;
}
.danger-zone p { font-size: 0.8rem; color: var(--ink2); margin-bottom: 0.5rem; }
.danger-zone code {
  font-family: var(--mono); font-weight: 700;
  background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--coral);
}
.btn-add-submit.is-danger { background: var(--coral); color: #fff; }

/* --- Pied de page légal ---------------------------------------------- */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 2rem;
  font-size: 0.78rem; color: var(--ink4);
  border-top: 2px dashed var(--border2);
  margin-top: 2.5rem;
}
.site-footer a { color: var(--ink3); text-decoration: underline; }
.site-footer a:hover { color: var(--coral); }
.footer-note { flex-basis: 100%; text-align: center; font-size: 0.72rem; }

/* --- Pages légales ---------------------------------------------------- */
.legal-doc { max-width: 46rem; padding-bottom: 1rem; }
.legal-doc h1 {
  font-family: var(--display); font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin: 1.5rem 0 0.3rem;
}
.legal-doc h2 {
  font-family: var(--display); font-size: 1.25rem;
  margin: 2rem 0 0.6rem; padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--border2);
}
.legal-doc h3 { font-family: var(--display); font-size: 1rem; margin: 1.2rem 0 0.4rem; }
.legal-doc p, .legal-doc li { font-size: 0.9rem; line-height: 1.65; color: var(--ink2); margin-bottom: 0.7rem; }
.legal-doc ul { padding-left: 1.2rem; }
.legal-doc li { margin-bottom: 0.45rem; }
.legal-doc a { color: var(--coral); text-decoration: underline; overflow-wrap: anywhere; }
.legal-doc code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--cream3); padding: 1px 5px; border-radius: 4px;
}
.legal-lead {
  font-size: 1rem !important; font-weight: 600; color: var(--ink) !important;
  padding: 0.8rem 1rem; background: var(--mint-bg);
  border-left: 4px solid var(--mint); border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-updated { font-size: 0.78rem !important; color: var(--ink4) !important; }
.legal-note {
  font-size: 0.82rem !important;
  padding: 0.6rem 0.85rem; background: var(--cream2);
  border-left: 3px solid var(--ink4); border-radius: 0 8px 8px 0;
}
.legal-back { margin-top: 2rem; font-weight: 700; }

/* Un tableau ne tient pas sur un écran de téléphone : il défile
   horizontalement DANS son conteneur, sans emporter la page entière. */
.legal-table {
  width: 100%; border-collapse: collapse; margin: 0.6rem 0 1rem;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.legal-table th, .legal-table td {
  border: 1.5px solid var(--border2); padding: 0.5rem 0.7rem;
  font-size: 0.82rem; line-height: 1.5; text-align: left; vertical-align: top;
}
.legal-table th { background: var(--cream3); font-weight: 800; white-space: nowrap; }
.legal-table td:first-child { font-weight: 700; white-space: nowrap; }

.page-legal .site-header { position: static; }

@media (max-width: 600px) {
  .class-row { flex-direction: column; }
  .class-leave { padding: 0.5rem; }
  /* .inline-form passe en colonne sous 600 px (règle plus haut) : on
     rend sa souplesse au formulaire de code, sinon le bouton et le
     champ occuperaient chacun une ligne entière pour rien. */
  .join-form { flex-direction: row; }
  .legal-table th, .legal-table td { font-size: 0.76rem; padding: 0.4rem 0.5rem; }
  .legal-table td:first-child, .legal-table th { white-space: normal; }
  /* Le pied de page ne doit pas passer sous la barre d'onglets fixe. */
  .site-footer { padding-bottom: 5.5rem; }
}