/* Écrans ajoutés au prototype Prestige : compte, et onglets Révisions, La bande, Profil. Mêmes jetons que namico.css. */

/* ---------- Compte ---------- */
.compte { padding: 34px 26px 26px; gap: 14px; overflow-y: auto; }
.compte-marque { font-family: var(--serif); font-weight: 600; font-size: 34px; letter-spacing: -.012em; color: var(--ink); text-decoration: none; }
.compte .rule { width: 100%; height: 3px; flex: none; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); margin-bottom: 18px; }
.compte h1 { margin: 0 0 10px; }
.compte-form { display: grid; gap: 18px; }
.compte-form .btn-ink { margin-top: 10px; }
.compte-form a.btn { text-decoration: none; }
.champ { display: grid; gap: 2px; }
.champ label { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.champ input { width: 100%; height: 52px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  padding: 0 2px; font-family: var(--sans); font-size: 19px; outline: none; transition: border-color var(--t2); }
.champ input:focus { border-bottom: 2px solid var(--gold); }
.champ.en-erreur input { border-bottom: 2px solid var(--ko); }
.compte-erreur { margin: 4px 0 0; font-size: 14px; color: var(--ko); }
.compte-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--hair); background: var(--paper-3); }

.btn-google { text-decoration: none; background: var(--paper-3); gap: 12px; }
.compte-ou { display: flex; align-items: center; gap: 12px; margin: 2px 0; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.compte-ou::before, .compte-ou::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ---------- Onglets ---------- */
.panel { position: absolute; inset: 0 0 61px 0; z-index: 9; overflow-y: auto; background: var(--paper); padding: 26px 22px 30px; display: flex; flex-direction: column; gap: 18px; }
.panel h2 { margin: 0; }
.panel p { margin: 0; }
.panel-head { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.panel .stats { padding: 14px 0; box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); text-align: center; }
.carnet { background: var(--paper-3); padding: 20px 18px; display: grid; gap: 12px; box-shadow: 0 0 0 1px var(--hair), 0 12px 30px -18px rgba(60, 45, 20, .4); position: relative; }
.carnet::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(169, 130, 74, .55); pointer-events: none; }
.carnet > * { position: relative; }
.carnet .grand { font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: 1; font-variant-numeric: lining-nums; }
.bande { display: grid; gap: 14px; }
.perso { --lc: var(--gold); }
.perso .s-head .medal { width: 64px; height: 64px; }
.perso .who { font-family: var(--serif); font-weight: 600; font-size: 22px; }
.perso .role { font-size: 14px; color: var(--ink-2); }
.perso .line-tag .bullet { width: 10px; height: 10px; }
.repliques { list-style: none; margin: 0; padding: 0; display: grid; }
.repliques li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.repliques .e { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.2; }
.repliques .f { font-size: 13.5px; color: var(--ink-2); }
.repliques .say { width: 40px; height: 40px; margin-left: auto; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); font-size: 16px; }
.reglage small { display: block; font-size: 13px; color: var(--ink-2); }
.reglage .btn { min-height: 44px; padding: 0 16px; flex: none; }
.panel form { display: grid; }

/* ---------- Leçon : variantes sans illustration, et micro ---------- */
.pick.texte .pick-card { height: 84px; padding: 10px 12px; }
.pick.texte .lbl { position: static; opacity: 1; transform: none; font-style: normal; font-family: var(--sans); font-size: 16px; }
.pick-card img.illu { height: 92px; width: auto; max-width: 92%; }
.back .pair img.illu { height: 64px; width: auto; margin-left: auto; }
.wd.low span:first-child { color: var(--ko); }
.mini-line .dots { gap: 0; }

/* ---------- Leçon : traduction à la demande ---------- */
.trad { display: grid; gap: 6px; justify-items: start; margin-top: -6px; }
.btn-trad { border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--gold-lo);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid rgba(169, 130, 74, .45); }
.btn-trad:hover { color: var(--ink); }

/* ---------- Leçon : images de situation dans les planches ---------- */
/* Le fond ivoire de l'image se fond dans le papier de la planche. Hauteurs en pixels : un pourcentage
   ne se résout pas dans la grille de la planche et l'image déborderait. */
.plate { overflow: hidden; }
.plate:has(img.illu) { background: #FAF7F0; }   /* le fond des images générées : plus de carré visible */
.plate img.illu { height: 146px; width: auto; max-width: 92%;
  /* Les bords de l'image s'estompent : son fond n'a jamais exactement la teinte du papier. */
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent); mask-image: radial-gradient(closest-side, #000 80%, transparent); }
.plate.sm img.illu { height: 120px; }
.plate svg.illu { height: 124px; }
.plate.sm svg.illu { height: 102px; }
.back .pair img.illu, .pick-card img.illu { mix-blend-mode: multiply; }

/* ---------- Leçon : glisser-déposer des mots placés ---------- */
.answer .tile { touch-action: none; cursor: grab; }
.tile.glisse { position: relative; z-index: 5; cursor: grabbing; box-shadow: 0 16px 28px -14px rgba(60, 45, 20, .55); }

/* ---------- Leçon : petits écrans (iPhone SE et proches) ---------- */
/* Au-delà de dix étapes, des points plus petits : sinon ils se touchent. */
.mini-line.dense .dot { width: 10px; height: 10px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--l1) 35%, var(--paper)); }
.mini-line.dense .dot.done { width: 8px; height: 8px; margin: 1px; box-shadow: 0 0 0 2px var(--l1); }
.mini-line.dense .dot.now { box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(169, 130, 74, .16); }

/* Chaque exercice doit tenir sur un écran sans défiler : on resserre d'abord, puis on réduit la planche. */
@media (max-height: 760px) {
  .lesson-top { padding-top: 6px; }
  .ex { gap: 14px; padding: 12px 20px 10px; }
  .plate { height: 112px; } .plate.sm { height: 96px; }
  .plate img.illu { height: 104px; } .plate.sm img.illu { height: 88px; }
  .plate svg.illu { height: 88px; } .plate.sm svg.illu { height: 74px; }
  .ex .en { font-size: 28px; }
  .q { font-size: 16.5px; }
  .opts { gap: 8px; }
  .opt { min-height: 48px; padding: 10px 48px 10px 16px; font-size: 16.5px; }
  .trad { margin-top: -6px; } .btn-trad { padding: 3px 0; }
  .lesson-foot { padding: 6px 20px 12px; } .lesson-foot .btn { min-height: 48px; }
  .card { min-height: 330px; }
  .mic-zone { gap: 10px; } .mic { width: 88px; height: 88px; } .wave-cv { height: 44px; }
  .pick { gap: 8px; } .pick-card { height: 118px; } .pick-card svg.illu, .pick-card img.illu { height: 72px; }
  .pick.texte .pick-card { height: 64px; }
}
@media (max-height: 600px) {
  .ex { gap: 10px; padding-top: 8px; }
  .plate { height: 84px; } .plate.sm { height: 72px; }
  .plate img.illu { height: 78px; } .plate.sm img.illu { height: 66px; }
  .plate svg.illu { height: 66px; } .plate.sm svg.illu { height: 56px; }
  .ex .en { font-size: 24px; }
  .opt { min-height: 42px; padding: 8px 44px 8px 14px; font-size: 16px; }
  .card { min-height: 280px; }
  .mic { width: 76px; height: 76px; }
  .pick-card { height: 98px; } .pick-card svg.illu, .pick-card img.illu { height: 56px; }
}

/* ---------- Rappel : la lettre d'indice bien lisible, les tirets en retrait ---------- */
.hintline b { color: var(--ink); font-weight: 600; }

/* ---------- L'anglais à apprendre : Newsreader, en droit ---------- */
/* La Bodoni reste la police de la maison (Namico, titres, chiffres). Pour lire et épeler une langue qu'on
   découvre, ses traits fins et son italique sont trop difficiles : l'anglais des leçons passe en Newsreader. */
:root { --anglais: "Newsreader", "Iowan Old Style", Georgia, serif; }
.en, .say-row .en, .front .big, .back .pair .w, .ex-line .e, .tile, .field, .hintline, .word-chip, .blank,
.pick-card .lbl, .fb-title, .repliques .e, .acquired, .st-label b, .ns-title, .t-name {
  font-family: var(--anglais); font-style: normal; font-optical-sizing: auto;
}
.en, .front .big, .fb-title, .ns-title, .t-name { font-weight: 500; letter-spacing: -.005em; }
.field::placeholder { font-style: italic; }