/* ============================================================================
   v3-apprendre.css — V3b « Apprendre + Flashcards » (charte Hextech Or).
   Chargée APRÈS glass-site.css et hextech-or.css, UNIQUEMENT sur apprendre.html
   et flashcards.html. Contient : 1) le bandeau haut d'Apprendre (Reprendre +
   progression ceintures), 2) la grille séance rapide, 3) le hub Flashcards v3
   (Continuer, Mes paquets, Aperçu à losanges), 4) le player de session v3
   (surcharges des .gk-fl-* de glass-site : tuiles hexagonales, barre or).
   Règles charte : aucun arrondi, accent or unique, hiérarchie par opacités de
   blanc, rouge/vert réservés aux ceintures et à la correction.
   ========================================================================== */

/* ── liens hexagonaux : pas de soulignement, couleur héritée ── */
.content a.card.bigmed, .content a.resume, .content a.med,
.content a.cta, .content .crumb a.home { text-decoration: none; color: inherit; }
.content a.resume { display: block; }

/* ============================================================================
   PAGE APPRENDRE
   ========================================================================== */
.ap-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-top: 20px; align-items: stretch; }
.ap-top .resume { margin: 0; height: auto; min-height: 128px; }
@media (max-width: 900px) { .ap-top { grid-template-columns: 1fr; } .ap-top .resume { min-height: 118px; } }

/* carte « Ta progression » (chevrons ceinture) */
.approg { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 22px;
  background: rgba(255,255,255,.045);
  clip-path: polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.06); }
.approg .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 8px; }
.approg .lb { font: 600 10px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.approg .st { font: 800 italic 12px 'Inter Tight'; white-space: nowrap;
  background-image: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ap-belts { display: flex; gap: 5px; padding: 0 8px; }
.ap-belts .bseg { flex: 1; height: 9px;
  clip-path: polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%); }
.ap-belts .bseg.off { opacity: .32; }
.ap-belts .bseg.cur { box-shadow: inset 0 0 0 1.5px rgba(240,230,210,.95), 0 0 14px rgba(200,170,110,.35); }
.approg .ft { display: flex; justify-content: space-between; gap: 10px; padding: 0 8px;
  font: 500 10.5px Inter; color: var(--muted); }

/* séance rapide (tuiles médaillon cliquables) */
.ap-sublbl { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }
.medgrid.ap-medgrid { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) { .medgrid.ap-medgrid { grid-template-columns: repeat(2,1fr); } }
a.med:hover { filter: brightness(1.12); }
.ap-cta { margin-top: 24px; }

/* carte « Bientôt » (Corps humain) */
.card.bigmed.is--soon { cursor: default; opacity: .7; }
.card.bigmed.is--soon:hover { background: rgba(255,255,255,.05); }
.bigmed .gsoon { flex: 0 0 auto; }

/* ============================================================================
   FLASHCARDS — HUB (Continuer + Mes paquets + Aperçu)
   ========================================================================== */
.fl3-board { margin-top: 4px; }
button.resume.fl3-cont { display: block; width: 100%; border: 0; padding: 0; background: none;
  text-align: left; font: inherit; color: inherit; }
.fl3-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start; }
@media (max-width: 980px) { .fl3-grid { grid-template-columns: 1fr; } }

/* cartes paquet (boutons .card.bigmed) */
button.card.bigmed { width: 100%; border: 0; text-align: left; color: inherit; font: inherit; }
.fl3-decks .card.bigmed.on { background: linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1.5px rgba(200,170,110,.6); }
.jg.fl3-jgimg { background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.fl3-due { flex: 0 0 auto; font: 800 italic 11px 'Inter Tight'; color: #0B0E1A; padding: 5px 12px;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%); }
.fl3-create { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.fl3-create .cta { margin-top: 0; opacity: .5; cursor: default; }
.fl3-create .cta:hover { filter: none; }

/* panneau Aperçu : groupes par statut, losanges */
.card.fl3-ap { padding: 14px 18px; }
.fl3-gh { font: 600 9.5px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }
.fl3-gh:first-child { margin-top: 0; }
.fl3-gh.is--learned { color: #E8C77E; }
.fl3-gh.is--learning, .fl3-gh.is--review { color: rgba(255,255,255,.85); }
.fl3-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fl3-row.is--new { opacity: .55; }
.fl3-row b { flex: 1; min-width: 0; font: italic 700 13.5px 'GT Sectra Display',Georgia,serif; color: #F2F4FA;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl3-row small { max-width: 45%; font: 500 11px Inter; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl3-dia { width: 8px; height: 8px; flex: 0 0 auto; transform: rotate(45deg); }
.fl3-dia.is--learned { background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%); }
.fl3-dia.is--learning { box-shadow: inset 0 0 0 1.5px rgba(232,199,126,.8); }
.fl3-dia.is--review { background: rgba(200,170,110,.4); box-shadow: inset 0 0 0 1.5px rgba(232,199,126,.9); }
.fl3-dia.is--new { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.fl3-empty { padding: 10px 2px; font-size: 12.5px; color: var(--muted); }
.fl3-apbtns { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.fl3-apbtns .cta { margin-top: 0; border: 0; }
.fl3-apbtns .cta[disabled] { opacity: .45; cursor: default; }
.fl3-apbtns .cta[disabled]:hover { filter: none; }

/* bouton fantôme hexagonal */
.fl3-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; cursor: pointer;
  font: 600 11px Inter; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%); }
.fl3-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

/* ============================================================================
   FLASHCARDS — SESSION (player plein écran v3, fond navy)
   ========================================================================== */
.fl3-play { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column;
  min-height: calc(100vh - 110px); padding-top: 8px; }

/* barre haute : quitter + progression or + compteur */
.fl3-play .gk-fl-top { display: flex; align-items: center; gap: 16px; margin-bottom: 0; }
.fl3-play .gk-fl-quit { display: grid; place-items: center; width: 40px; height: 36px; margin: 0; padding: 0;
  font-size: 16px; color: #F2F4FA; background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%); }
.fl3-play .gk-fl-quit:hover { background: rgba(255,255,255,.12); color: #fff; }
.fl3-play .gk-fl-bar { flex: 1; height: 7px; border-radius: 0; background: rgba(255,255,255,.1); overflow: hidden;
  clip-path: polygon(3px 0,calc(100% - 3px) 0,100% 50%,calc(100% - 3px) 100%,3px 100%,0 50%); }
.fl3-play .gk-fl-bar i { background: linear-gradient(90deg,#C8AA6E,#785A28); }
.fl3-play .gk-fl-count { font: 800 italic 14px 'Inter Tight'; color: #F2F4FA; }

/* badges série / niveau / mode (recette hexagone strokée) */
.fl3-badges { display: flex; justify-content: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.fl3-bdg { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font: 600 10.5px Inter; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.16);
  clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%); }
.fl3-bdg::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: #141B2D;
  clip-path: polygon(7.3px 0,calc(100% - 7.3px) 0,100% 50%,calc(100% - 7.3px) 100%,7.3px 100%,0 50%); }
.fl3-bdg i { color: #C8AA6E; }
.fl3-bdg.is--gold { color: #F0E6D2;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%); }
.fl3-bdg.is--gold::before { background: #0D1524; }
.fl3-bdg.is--retry { background: rgba(200,170,110,.55); color: #E8C77E; }
.fl3-bdg.is--retry::before { background: #131A2B; }

/* corps de question */
.fl3-play .gk-fl-q, .fl3-play .gk-fl-intro, .fl3-play .gk-fl-end { padding: 26px 0 30px; gap: 14px; }
.fl3-kick { font: 600 11px Inter; letter-spacing: .2em; text-transform: uppercase; color: #C8AA6E; margin-top: 10px; }
.fl3-play .gk-fl-face-tx.is--big { font: italic 700 36px 'GT Sectra Display',Georgia,serif; color: #F2F4FA; }
.fl3-play .gk-fl-face-tx.is--big .gk-fl-han { font: 500 18px 'Noto Serif KR',serif; color: rgba(255,255,255,.72); }
.fl3-play .gk-fl-han.is--big { font: 500 22px 'Noto Serif KR',serif; color: rgba(255,255,255,.72); }
.fl3-play .gk-fl-meaning { color: rgba(255,255,255,.8); font-size: 13.5px; }
.fl3-play .gk-fl-face-img { border-radius: 0; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path: polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%); }
.fl3-play .gk-fl-video iframe { border-radius: 0; }

/* zone d'assemblage (réponse composée : tuiles satin or) */
.fl3-play .gk-fl-made { border-bottom: 0; gap: 11px; min-height: 60px; margin-top: 18px; padding: 0; }
.fl3-play .gk-fl-slot { position: relative; isolation: isolate; min-width: 104px; height: 60px;
  display: grid; place-items: center; padding: 0 16px; border: 0; border-radius: 0;
  font: 800 italic 19px 'Inter Tight'; letter-spacing: .04em; color: #F0E6D2;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); }
.fl3-play .gk-fl-slot::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #22252F;
  clip-path: polygon(10.6px 0,calc(100% - 10.6px) 0,100% 50%,calc(100% - 10.6px) 100%,10.6px 100%,0 50%); }
.fl3-play .gk-fl-made-ph { font: 500 12.5px Inter; color: var(--muted); }
/* verts / rouges de correction conservés */
.fl3-play .gk-fl-made.is--ok .gk-fl-slot { background: #5DBB63; color: #CDEFD3; }
.fl3-play .gk-fl-made.is--ko .gk-fl-slot { background: #C4213F; color: #FFC9D3; }

/* banque de tuiles hexagonales */
.fl3-play .gk-fl-bank { gap: 11px; margin-top: 14px; }
.fl3-play .gk-fl-word { position: relative; isolation: isolate; min-width: 104px; height: 60px;
  display: grid; place-items: center; padding: 0 16px; border: 0; border-radius: 0; cursor: pointer;
  font: 800 italic 19px 'Inter Tight'; letter-spacing: .04em; color: #F2F4FA;
  background: rgba(200,170,110,.28);
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); }
.fl3-play .gk-fl-word::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #232731;
  clip-path: polygon(10.6px 0,calc(100% - 10.6px) 0,100% 50%,calc(100% - 10.6px) 100%,10.6px 100%,0 50%); }
.fl3-play .gk-fl-word:not(.is--used):hover { background: rgba(200,170,110,.6); }
.fl3-play .gk-fl-word.is--used { opacity: .35; color: rgba(255,255,255,.3); }

/* QCM : choix hexagonaux */
.fl3-play .gk-fl-choices { gap: 11px; margin-top: 14px; }
.fl3-play .gk-fl-choice { position: relative; isolation: isolate; border: 0; border-radius: 0;
  min-height: 64px; padding: 18px 20px; background: rgba(255,255,255,.16);
  clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%); }
.fl3-play .gk-fl-choice::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: #161D30;
  clip-path: polygon(13.3px 0,calc(100% - 13.3px) 0,100% 50%,calc(100% - 13.3px) 100%,13.3px 100%,0 50%); }
.fl3-play .gk-fl-choice:not(.is--right):not(.is--wrongpick):not(.is--off):hover { background: rgba(200,170,110,.5); }
/* correction : vert / rouge conservés */
.fl3-play .gk-fl-choice.is--right { background: #5DBB63; }
.fl3-play .gk-fl-choice.is--right::before { background: #16301C; }
.fl3-play .gk-fl-choice.is--wrongpick { background: #C4213F; }
.fl3-play .gk-fl-choice.is--wrongpick::before { background: #2E1017; }
.fl3-play .gk-fl-choice.is--off { opacity: .35; }
.fl3-play .gk-fl-verdict { font: 600 13.5px Inter; }
.fl3-play .gk-fl-verdict.is--ok { color: #5DBB63; }
.fl3-play .gk-fl-verdict.is--ko { color: #FF7C93; }
.fl3-play .gk-fl-verdict b { font: italic 700 15px 'GT Sectra Display',Georgia,serif; }

/* boutons d'action (valider / continuer : or satin, encre navy) */
.fl3-play .gk-fl-go { border: 0; border-radius: 0; margin-top: 12px;
  font: 800 italic 13px 'Inter Tight'; color: #0B0E1A; padding: 13px 32px;
  background: linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.5);
  clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); }
.fl3-play .gk-fl-go[disabled] { opacity: .45; }
.fl3-play .gk-fl-audio { border: 0; border-radius: 0; color: rgba(255,255,255,.75);
  font: 600 11px Inter; letter-spacing: .12em; text-transform: uppercase; padding: 12px 22px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%); }
.fl3-play .gk-fl-audio:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.fl3-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin-top: 26px; }
.fl3-hint { font: 500 11.5px Inter; color: var(--muted); }

/* fin de session */
.fl3-play .gk-fl-end-ic { font-size: 44px; color: #C8AA6E; }
.fl3-endh { margin: 0; font-size: 30px; }
.fl3-play .gk-fl-score { font: 500 13px Inter; }

/* petits écrans : tuiles plus compactes */
@media (max-width: 720px) {
  .fl3-play .gk-fl-word, .fl3-play .gk-fl-slot { min-width: 74px; height: 50px; font-size: 15px; padding: 0 12px; }
  .fl3-play .gk-fl-face-tx.is--big { font-size: 27px; }
  .fl3-foot { flex-wrap: wrap; justify-content: center; }
  .fl3-hint { order: 3; width: 100%; text-align: center; }
}