/* Tchip — styles
   Mise en page : une colonne mobile (max 460px), écrans empilés, style « autocollant ». */
:root {
  --papier: #FFF3DF;
  --surface: #FFFBF4;
  --sable: #FBE6C4;
  --encre: #1D1B4F;
  --encre-douce: #5A5778;
  --trait: #E9D6B5;
  --indigo: #1D1B4F;
  --sur-indigo: #FFF3DF;
  --piment: #FF4D2E;
  --mangue: #FFC233;
  --menthe: #19B38A;
  --danger: #C2311A;                         /* texte d'action destructive, lisible sur le papier */
  --encre-fixe: #1D1B4F;
  --ombre: #1D1B4F;

  --f-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --bord: 2.5px solid var(--encre);
  --pop: 0 4px 0 0 var(--ombre);
  --pop-sm: 0 2px 0 0 var(--ombre);
  --pop-haut: 0 7px 0 0 var(--ombre);      /* autocollant soulevé (survol à la souris) */
  --pop-sm-haut: 0 5px 0 0 var(--ombre);

  /* Mouvement : un seul rythme pour toute l'app */
  --ressort: cubic-bezier(.3, 1.6, .5, 1);  /* petit rebond, pour ce qui arrive ou se relâche */
  --sortie: cubic-bezier(.5, 0, .9, .4);    /* ce qui s'en va part plus vite qu'il n'est venu */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #14122E; --surface: #221F4A; --sable: #2E2A5E; --encre: #FFF3DF;
    --encre-douce: #B9B5D9; --trait: #3A3670; --indigo: #4A45B8; --piment: #FF6B4D;
    --menthe: #2FD3A5; --ombre: #05040F; --danger: #FF8A73; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #14122E; --surface: #221F4A; --sable: #2E2A5E; --encre: #FFF3DF;
  --encre-douce: #B9B5D9; --trait: #3A3670; --indigo: #4A45B8; --piment: #FF6B4D;
  --menthe: #2FD3A5; --ombre: #05040F; --danger: #FF8A73; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;            /* pas de rebond « élastique » façon web dans un WebView */
  text-rendering: optimizeLegibility;
}
button {
  font: inherit; color: inherit; cursor: pointer;
  -webkit-user-select: none; user-select: none;   /* pas de sélection / menu au long-press iOS */
  -webkit-touch-callout: none;
  touch-action: manipulation;                       /* supprime le délai de 300 ms et le double-tap zoom */
}
:focus-visible { outline: 3px solid var(--mangue); outline-offset: 3px; }

.app {
  max-width: 460px;
  margin: 0 auto;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- En-tête ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar .wordmark { height: 34px; width: auto; display: block; }
.topbar .wordmark .ink { stroke: var(--encre); }
.icons { display: flex; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  border: var(--bord); background: var(--surface); box-shadow: var(--pop-sm);
  display: grid; place-items: center; padding: 0;
}
.icon-btn svg { width: 20px; height: 20px; stroke: var(--encre); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------- Relief des autocollants ----------
   Au doigt : l'autocollant s'enfonce vite, puis remonte avec un petit rebond.
   À la souris : il se soulève au survol (l'ombre grandit). */
.icon-btn, .option, .btn, .btn-son, .carte-pays, .carte-revision, .mot, .archives button, .passeport .tampon {
  transition: transform .22s var(--ressort), box-shadow .22s var(--ressort), background .15s ease;
}
.icon-btn:active, .option:active, .btn:active, .btn-son:active, .carte-pays:active, .carte-revision:active,
.mot:active, .archives button:active, .passeport .tampon:active { transition-duration: .06s; }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover, .btn-son:hover, .carte-pays:hover, .mot:hover, .archives button:hover { transform: translateY(-2px); box-shadow: var(--pop-sm-haut); }
  .option:not(:disabled):hover, .btn:not(.ajout):hover, .carte-revision:hover { transform: translateY(-3px); box-shadow: var(--pop-haut); }
  .passeport .tampon[data-voyage]:hover { transform: rotate(0deg) scale(1.06); }
  /* appuyer reste plus fort que survoler */
  .icon-btn:hover:active, .btn-son:hover:active, .carte-pays:hover:active, .mot:hover:active, .archives button:hover:active { transform: translateY(2px); box-shadow: none; }
  .option:not(:disabled):hover:active, .btn:not(.ajout):hover:active, .carte-revision:hover:active { transform: translateY(4px); box-shadow: none; }
}

/* ---------- Bandeau du jour ---------- */
.dayline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); border: var(--bord); background: var(--surface);
}
.chip.serie { background: var(--mangue); color: var(--encre-fixe); border-color: var(--encre-fixe); }
.chip.serie .flamme { display: inline-block; transform-origin: 50% 90%; }
.chip.serie.danse { animation: gonfle .5s var(--ressort) .2s; }
.chip.serie.danse .flamme { animation: danse 1s ease .2s; }   /* la série vient d'augmenter */
@keyframes danse {
  20% { transform: scale(1.5) rotate(-12deg); } 40% { transform: scale(1.3) rotate(10deg); }
  60% { transform: scale(1.4) rotate(-6deg); } 80% { transform: scale(1.1) rotate(4deg); }
}
.chip.archive { background: var(--sable); }

/* ---------- Carte expression ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: var(--bord);
  border-radius: var(--r-lg);
  box-shadow: var(--pop);
  padding: 28px 20px 22px;
}
.card .question {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-douce); margin: 0 0 10px;
}
.expression {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(32px, 9vw, 42px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance; padding-right: 64px;
}
.mascotte {
  position: absolute; right: -10px; top: -22px; width: 84px; height: 84px;
  transform: rotate(8deg); transition: transform .25s ease;
  animation: flotte 5s ease-in-out infinite;   /* au repos, elle respire et jette un coup d'œil de temps en temps */
}
.mascotte .yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
.mascotte .ondes { transform-box: fill-box; transform-origin: left center; animation: vibre 2.4s ease-in-out infinite; }
.mascotte.tchip { animation: tchip .5s ease; }
.mascotte.joie { animation: hop .6s var(--ressort); }
@keyframes tchip { 0%,100% { transform: rotate(8deg); } 25% { transform: rotate(-6deg) translateX(-4px); } 60% { transform: rotate(14deg) translateX(3px); } }
@keyframes hop { 0%,100% { transform: rotate(8deg) translateY(0); } 40% { transform: rotate(-4deg) translateY(-14px) scale(1.06); } }
@keyframes flotte {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  40% { transform: rotate(6deg) translateY(-3px); }
  70% { transform: rotate(8deg) translateY(0); }
  76% { transform: rotate(13deg); }
  82% { transform: rotate(8deg); }
}
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
@keyframes vibre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }

.vies { display: flex; gap: 6px; align-items: center; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--encre-douce); }
.vie { width: 20px; height: 16px; }
.vie path { fill: var(--indigo); }
.vie.perdue path { fill: var(--trait); }

/* ---------- Indice ---------- */
.indice {
  border: 2.5px dashed var(--encre-douce); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 15px; background: transparent; color: var(--encre-douce);
}
.indice.ouvert { border-style: solid; border-color: var(--encre); background: var(--sable); color: var(--encre); }
.indice b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 2px; }

/* ---------- Propositions ---------- */
.options { display: grid; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; min-height: 58px; padding: 12px 16px;
  background: var(--surface); border: var(--bord); border-radius: var(--r-md);
  box-shadow: var(--pop); font-size: 16px; font-weight: 600; line-height: 1.3;
}
.option .lettre {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--sable); border: 2px solid var(--encre);
}
.option:not(:disabled):active { transform: translateY(4px); box-shadow: none; }
.option:disabled { cursor: default; }
.option.faux { background: var(--piment); color: var(--encre-fixe); border-color: var(--encre-fixe); animation: shake .35s ease; }
.option.bon { background: var(--menthe); color: var(--encre-fixe); border-color: var(--encre-fixe); animation: gonfle .45s var(--ressort); }
@keyframes gonfle { 40% { transform: scale(1.05); } }
/* Confettis de la bonne réponse : de petits carrés « autocollant » aux couleurs du jeu */
.confettis { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.confettis i {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 2px;
  border: 1.5px solid var(--encre-fixe); animation: vole .75s cubic-bezier(.2, .8, .4, 1) forwards;
}
.confettis i:nth-child(3n) { border-radius: 50%; }
@keyframes vole { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.option.faux .lettre, .option.bon .lettre { background: var(--papier); border-color: var(--encre-fixe); color: var(--encre-fixe); }
.option.eteint { opacity: .45; box-shadow: none; }
/* Drapeaux en image (assets/drapeaux, voir tools/copier-drapeaux.js) */
.drapeau-img {
  display: inline-block; flex: none; width: 1.33em; height: 1em; vertical-align: -0.15em;
  object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--encre);
}
.drapeau-img.moyen { width: 36px; height: 27px; vertical-align: middle; }
.drapeau-img.grand { width: 44px; height: 33px; border-radius: 5px; vertical-align: middle; }
.drapeau-img.tres-grand { width: 72px; height: 54px; border-radius: 8px; box-shadow: 0 0 0 2.5px var(--encre), var(--pop-sm); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.etape-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.etape-titre h2 { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 0; }
.etape-titre span { font-size: 13px; font-weight: 700; color: var(--encre-douce); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--indigo); color: var(--sur-indigo); font-weight: 700;
  padding: 10px 18px; border-radius: var(--r-pill); box-shadow: var(--pop);
  transition: opacity .2s ease, transform .2s ease; z-index: 30;
  width: max-content; max-width: calc(100vw - 32px); text-align: center; /* passe à la ligne sur petit écran */
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Résultat ---------- */
.resultat { display: flex; flex-direction: column; gap: 16px; }
.motif { display: block; width: 100%; height: 44px; }
.score-card { background: var(--indigo); color: var(--sur-indigo); border-color: var(--encre); text-align: left; }
.score-card .mascotte .bulle { fill: var(--piment) !important; }
.score-card .question { color: var(--sur-indigo); opacity: .8; }
.score {
  font-family: var(--f-display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.03em; margin: 4px 0 6px;
}
.score small { font-size: 28px; opacity: .7; }
.verdict { font-size: 17px; font-weight: 600; margin: 0; }
.grille { font-size: 22px; letter-spacing: 4px; margin-top: 10px; }

.fiche h3 { font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1.1; margin: 0 0 4px; text-wrap: balance; }
.fiche .origine { font-weight: 700; margin: 0 0 12px; }
.fiche dl { margin: 0; display: grid; gap: 10px; }
.fiche dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.fiche dd { margin: 0; }
.fiche .exemple { font-style: italic; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 12px 22px; width: 100%;
  border-radius: var(--r-pill); border: 2.5px solid var(--encre-fixe);
  background: var(--piment); color: var(--encre-fixe);
  font-weight: 800; font-size: 17px; box-shadow: var(--pop);
}
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn.secondaire { background: var(--surface); color: var(--encre); border-color: var(--encre); }
.btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.actions { display: grid; gap: 12px; }

.prochain { text-align: center; font-size: 14px; color: var(--encre-douce); margin: 0; }
.prochain strong { font-family: var(--f-display); font-size: 22px; color: var(--encre); display: block; font-variant-numeric: tabular-nums; }

/* ---------- Feuilles (aide, stats, archives) ---------- */
.feuille-fond {
  position: fixed; inset: 0; background: rgba(10, 8, 30, .55); z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fondu .22s ease-out;
}
.feuille-fond.sortie { animation: fondu .18s var(--sortie) reverse forwards; pointer-events: none; }
.feuille-fond.sortie .feuille { animation: descend .18s var(--sortie) forwards; }
@keyframes fondu { from { opacity: 0; } }
@keyframes descend { to { transform: translateY(70%); } }
.feuille {
  width: 100%; max-width: 460px; max-height: 88vh; overflow: auto;
  background: var(--papier); border: var(--bord); border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px max(20px, env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 16px;
  animation: monte .34s cubic-bezier(.2, 1.15, .4, 1);
}
@keyframes monte { from { transform: translateY(60%); } }
.feuille header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.feuille h2 { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0; }
.feuille p { margin: 0; }
.regles { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.regles li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.pastille {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; border: 2px solid var(--encre-fixe); color: var(--encre-fixe);
}
.p1 { background: var(--piment); } .p2 { background: var(--mangue); } .p3 { background: var(--menthe); } .p4 { background: var(--sable); color: var(--encre); border-color: var(--encre); }
.exemple-grille { background: var(--surface); border: var(--bord); border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; white-space: pre-line; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--surface); border: var(--bord); border-radius: var(--r-md); padding: 10px 6px; text-align: center; }
.stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; font-weight: 700; color: var(--encre-douce); line-height: 1.2; display: block; }
.distrib { display: grid; gap: 6px; }
.distrib-ligne { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.barre {
  height: 26px; min-width: 28px; border-radius: var(--r-sm); background: var(--sable); border: 2px solid var(--encre);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; font-variant-numeric: tabular-nums;
}
.barre.actuelle { background: var(--mangue); color: var(--encre-fixe); border-color: var(--encre-fixe); }

.archives { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.archives button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface); border: var(--bord); border-radius: var(--r-md); box-shadow: var(--pop-sm);
  font-weight: 700; text-align: left;
}
.archives button:active { transform: translateY(2px); box-shadow: none; }
.archives .etat { font-size: 14px; color: var(--encre-douce); font-weight: 600; }
.vide { color: var(--encre-douce); }

/* ---------- Réglages ---------- */
.reglage {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; background: var(--surface); border: var(--bord); border-radius: var(--r-md);
}
.reglage b { display: block; }
.reglage span { display: block; font-size: 13px; color: var(--encre-douce); line-height: 1.35; }
.reglage select {
  font: inherit; font-weight: 700; color: var(--encre); background: var(--sable);
  border: 2px solid var(--encre); border-radius: var(--r-pill); padding: 6px 12px; min-height: 40px;
}
.interrupteur {
  flex: none; position: relative; width: 56px; height: 34px; padding: 0;
  border-radius: var(--r-pill); border: 2.5px solid var(--encre); background: var(--trait);
  transition: background .15s ease;
}
.interrupteur span {
  position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--encre); transition: transform .15s ease;
}
.interrupteur[aria-checked="true"] { background: var(--menthe); }
.interrupteur[aria-checked="true"] span { transform: translateX(22px); }
.groupe-titre {
  margin: 6px 0 -6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce);
}
.groupe { display: grid; gap: 8px; }
/* Ligne de menu (règles, inviter, à propos…) : tout l'autocollant se touche */
.reglage.lien { width: 100%; justify-content: flex-start; gap: 12px; text-align: left; font: inherit; color: inherit; box-shadow: var(--pop-sm); }
.reglage.lien .ico svg { display: block; width: 22px; height: 22px; stroke: var(--encre); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.reglage.lien .texte { flex: 1; min-width: 0; }
.reglage.lien .chevron { font-size: 26px; line-height: 1; font-weight: 800; color: var(--encre-douce); }
.reglage.lien:active { transform: translateY(2px); box-shadow: none; }
/* Choix entre quelques valeurs (thème, langue) */
.segments { flex: none; display: inline-flex; gap: 2px; padding: 3px; border: 2px solid var(--encre); border-radius: var(--r-pill); background: var(--sable); }
.segments button {
  min-height: 38px; padding: 4px 12px; border: none; border-radius: var(--r-pill); background: transparent;
  font-size: 14px; font-weight: 700; color: var(--encre-douce); transition: background .15s ease, color .15s ease;
}
.segments button[aria-checked="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 0 0 2px var(--encre); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; min-height: 48px; font-size: 15px; }
.feuille > .lien-retour { margin-bottom: -10px; }
/* À propos */
.a-propos { display: grid; justify-items: center; gap: 2px; padding: 4px 0; }
.a-propos .wordmark { height: 52px; width: auto; }
.a-propos .wordmark .ink { stroke: var(--encre); }
.a-propos p { font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.infos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.infos div { padding: 10px 12px; background: var(--surface); border: var(--bord); border-radius: var(--r-md); }
.infos dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.infos dd { margin: 0; font-weight: 700; }
.credits { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--encre-douce); }
.version { font-size: 13px; text-align: center; }
.texte-legal { display: grid; gap: 10px; font-size: 15px; }
.texte-legal h2 { font-family: var(--f-display); font-size: 19px; line-height: 1.2; margin: 8px 0 0; }
.texte-legal p, .texte-legal ul { margin: 0; }
.texte-legal ul { padding-left: 20px; }
.texte-legal a { color: inherit; font-weight: 700; }

.pied { text-align: center; font-size: 13px; color: var(--encre-douce); }
.pied button { background: none; border: none; text-decoration: underline; padding: 4px; font-weight: 600; color: var(--encre-douce); }

/* ---------- Onglets (Aujourd'hui, Voyager, Carnet) ---------- */
:root { --h-onglets: 66px; }
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; justify-content: center; gap: 4px;
  padding: 6px max(12px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
  background: var(--surface); border-top: var(--bord);
}
.onglets button {
  position: relative; flex: 1; max-width: 150px; min-height: 52px; padding: 4px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; border-radius: var(--r-md);
  font-size: 12px; font-weight: 700; color: var(--encre-douce);
}
.onglets svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.onglets button.actif { color: var(--encre); background: var(--sable); }
.onglets .badge {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--r-pill); border: 2px solid var(--surface);
  background: var(--piment); color: var(--encre-fixe); font-size: 11px; font-weight: 800;
}
body.en-serie .onglets { display: none; }
body:not(.en-serie) .app { padding-bottom: calc(var(--h-onglets) + max(28px, env(safe-area-inset-bottom, 0px))); }
body:not(.en-serie) .toast { bottom: calc(var(--h-onglets) + 16px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Pages Voyager et Carnet ---------- */
.intro-page { display: grid; gap: 6px; }
.intro-page p { margin: 0; }
.intro-page .question, .accent-card .question {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); margin: 0;
}
.titre-page {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 8vw, 38px);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.region { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 6px 0 -6px; }
.vide.centre { text-align: center; margin: -6px 0 0; font-size: 14px; }
/* Aide : accueil et « ? » */
.intro-aide { font-size: 17px; }
.etapes-aide { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.etapes-aide li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; background: var(--surface); border: var(--bord); border-radius: var(--r-md); }
.etapes-aide b { display: block; font-size: 17px; }
.etapes-aide div span { display: block; color: var(--encre-douce); line-height: 1.35; }
.etapes-aide .pastille, .aide-bloc .pastille { width: 44px; height: 44px; }
.pastille svg { width: 24px; height: 24px; stroke: var(--encre-fixe); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aide-bloc { display: grid; gap: 8px; }
.aide-bloc h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-display); font-size: 22px; }
.aide-bloc .pastille { width: 36px; height: 36px; }
.aide-bloc .pastille svg { width: 20px; height: 20px; }
.aide-bloc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.paliers-aide { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px 10px; padding: 12px; background: var(--surface); border: var(--bord); border-radius: var(--r-md); font-weight: 700; }
.paliers-aide .rang { text-align: center; }

.carte-revision {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left;
  border: 2.5px solid var(--encre-fixe); border-radius: var(--r-lg); background: var(--mangue); color: var(--encre-fixe); box-shadow: var(--pop);
}
.carte-revision .ico { font-size: 26px; }
.carte-revision b { display: block; font-size: 17px; }
.carte-revision small { display: block; font-size: 13px; font-weight: 600; }
.carte-revision .fleche { margin-left: auto; font-size: 22px; font-weight: 800; }
.carte-revision:active, .carte-pays:active, .mot:active { transform: translateY(2px); box-shadow: none; }

.grille-pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.carte-pays {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 12px; text-align: left;
  background: var(--surface); border: var(--bord); border-radius: var(--r-md); box-shadow: var(--pop-sm);
}
.carte-pays b { font-size: 16px; line-height: 1.15; }
.carte-pays .compte { font-size: 12px; font-weight: 600; color: var(--encre-douce); }
.carte-pays .rang { margin-top: auto; }

.barre-prog { position: relative; display: block; width: 100%; height: 8px; border-radius: var(--r-pill); background: var(--trait); overflow: hidden; }
/* le remplissage est une échelle (--p de 0 à 1) : ça s'anime sans recalculer la mise en page */
.barre-prog i, .progression i { display: block; height: 100%; background: var(--menthe); transform-origin: left; transform: scaleX(var(--p, 0)); }
.barre-prog b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--encre); opacity: .35; } /* paliers des tampons */
.barre-prog b.eclat { animation: eclat .7s var(--ressort) .75s both; }   /* palier qu'on vient de passer */
@keyframes eclat { 0% { opacity: .35; } 40% { opacity: 1; background: var(--mangue); transform: scaleX(4); } 100% { opacity: .9; background: var(--encre); } }
.barre-prog.complete { animation: gonfle .5s var(--ressort) .8s; }
.palier { margin: 0; font-size: 14px; color: var(--encre-douce); }
.palier b { color: var(--encre); }
.palier-carte { display: grid; gap: 8px; }
.palier-carte .niveau { margin: 0; }
.legende-paliers { margin: -4px 0 0; font-size: 13px; line-height: 1.9; color: var(--encre-douce); }
.legende-paliers .rang { padding: 1px 6px; font-size: 10px; }
.tampon .t-pct { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rang {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-pill); border: 2px solid var(--encre); background: var(--surface);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.rang-1 { background: var(--sable); }
.rang-2 { background: var(--mangue); color: var(--encre-fixe); border-color: var(--encre-fixe); }
.rang-3 { background: var(--menthe); color: var(--encre-fixe); border-color: var(--encre-fixe); }
.rang-4 { background: var(--piment); color: var(--encre-fixe); border-color: var(--encre-fixe); }

.lien-retour {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 4px 0;
  background: none; border: none; font-weight: 700; color: var(--encre-douce);
}
.lien-retour svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.entete-pays { display: grid; gap: 10px; }
.entete-pays p { margin: 0; color: var(--encre-douce); }
.niveau { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.note-verrou { margin: 0; padding: 10px 14px; border: 2px dashed var(--encre-douce); border-radius: var(--r-md); font-size: 14px; color: var(--encre-douce); }

/* ---------- Lexique ---------- */
.theme { display: flex; align-items: center; gap: 6px; margin: 4px 0 -8px; font-size: 15px; font-weight: 800; }
.lexique { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mot {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "expr pts" "sens pts";
  align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 14px; text-align: left;
  background: var(--surface); border: var(--bord); border-radius: var(--r-md); box-shadow: var(--pop-sm);
}
.mot-expr { grid-area: expr; font-weight: 800; }
.mot-sens { grid-area: sens; font-size: 14px; line-height: 1.3; color: var(--encre-douce); }
.mot-sens.cache { font-style: italic; }
.mot .pastilles { grid-area: pts; }
.bilan .mot.juste { box-shadow: var(--pop-sm), inset 6px 0 0 var(--menthe); }
.bilan .mot.rate { box-shadow: var(--pop-sm), inset 6px 0 0 var(--piment); }
.pastilles { display: inline-flex; gap: 3px; }
.pastilles i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--encre); }
.pastilles i.plein { background: var(--menthe); }
.maitrise {
  display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px dashed var(--trait);
  font-size: 14px; font-weight: 600; color: var(--encre-douce);
}
.feuille .origine { margin: 0; font-weight: 700; }
.fiche .ou { font-size: 14px; color: var(--encre-douce); }

/* ---------- Prononciation et voix ---------- */
.bloc-son { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.btn-son {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: var(--r-pill); border: 2.5px solid var(--encre-fixe); background: var(--mangue); color: var(--encre-fixe);
  font-weight: 800; box-shadow: var(--pop-sm);
}
.btn-son:active { transform: translateY(2px); box-shadow: none; }
.btn-son svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-son span { text-align: left; line-height: 1.2; }
.btn-son small { display: block; font-size: 11px; font-weight: 600; }
.prononciation { margin: 0; font-size: 14px; color: var(--encre-douce); }
.prononciation i { font-style: normal; font-weight: 800; letter-spacing: .02em; color: var(--encre); }

/* ---------- Série ---------- */
.serie-haut { display: flex; align-items: center; gap: 12px; }
.progression { flex: 1; height: 14px; overflow: hidden; border-radius: var(--r-pill); border: 2px solid var(--encre); background: var(--surface); }
.compteur { font-weight: 800; font-variant-numeric: tabular-nums; }
.carte-question .expression { padding-right: 0; }
.expression.inverse { font-size: clamp(24px, 6.5vw, 30px); line-height: 1.15; }
.retour-reponse { display: grid; gap: 8px; }
.retour-reponse.juste { box-shadow: var(--pop), inset 8px 0 0 var(--menthe); }
.retour-reponse.rate { box-shadow: var(--pop), inset 8px 0 0 var(--piment); }
.retour-reponse .bloc-son { margin: 0; }
.verdict-court { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.retour-reponse h3 { margin: 0; font-family: var(--f-display); font-size: 24px; line-height: 1.1; }
.sens-rappel { margin: 0; font-weight: 700; }
.retour-reponse .exemple { margin: 0; font-style: italic; }
.petit { margin: 0; font-size: 14px; color: var(--encre-douce); }

/* ---------- Passeport ---------- */
.accent-card { display: grid; gap: 6px; }
.accent-phrase {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0;
  font-family: var(--f-display); font-size: 26px; font-weight: 800; line-height: 1.15;
}
.passeport { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tampon {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px;
  text-align: center; overflow-wrap: anywhere; border-radius: 50%; border: 4px double var(--encre); background: var(--surface);
  transform: rotate(-6deg);
}
.passeport .tampon:nth-child(even) { transform: rotate(5deg); }
.tampon .drapeau-img { margin-bottom: 2px; }
.tampon .t-nom { font-size: 11px; font-weight: 800; line-height: 1.1; }
.tampon .t-rang { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tampon.rang-0 { opacity: .5; border: 2px dashed var(--encre-douce); background: transparent; filter: grayscale(1); }
.tampon.rang-1 { background: var(--sable); }
.tampon.rang-2 { background: var(--mangue); color: var(--encre-fixe); border-color: var(--encre-fixe); }
.tampon.rang-3 { background: var(--menthe); color: var(--encre-fixe); border-color: var(--encre-fixe); }
.tampon.rang-4 { background: var(--piment); color: var(--encre-fixe); border-color: var(--encre-fixe); }
.nouveau-tampon { display: flex; align-items: center; gap: 16px; }
.nouveau-tampon p { margin: 0; }
.nouveau-tampon .tampon { position: relative; flex: none; width: 110px; animation: tamponner .55s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
/* l'encre gicle autour du tampon au moment où il touche le papier */
.nouveau-tampon .tampon::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--encre);
  opacity: 0; animation: onde .6s ease-out .55s;
}
@keyframes tamponner { 0% { transform: scale(1.9) rotate(-25deg); opacity: 0; } 55% { transform: scale(.9) rotate(-4deg); opacity: 1; } }
@keyframes onde { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }

/* ---------- Entrées d'écran ----------
   Seulement quand on arrive sur un écran (pas quand il se redessine) : app.js pose .anime pendant un instant.
   Le sens du glissement suit la navigation : vers la droite = on avance, vers la gauche = on revient. */
.app.vient-de-droite { animation: glisse-g .26s ease-out; }
.app.vient-de-gauche { animation: glisse-d .26s ease-out; }
.app.vient-du-bas { animation: glisse-h .3s cubic-bezier(.2, 1.1, .4, 1); }
@keyframes glisse-g { from { transform: translateX(28px); opacity: 0; } }
@keyframes glisse-d { from { transform: translateX(-28px); opacity: 0; } }
@keyframes glisse-h { from { transform: translateY(36px); opacity: 0; } }
/* les listes arrivent en cascade, un élément après l'autre (--i posé par app.js, plafonné) */
.app.anime :is(.grille-pays, .lexique, .passeport, .stats-grid, .options, .actions) > * {
  animation: apparait .32s var(--ressort) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms);
}
@keyframes apparait { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.app.anime .barre-prog i, .app.anime .progression i { animation: remplit .7s cubic-bezier(.3, 1.2, .5, 1) .2s both; }
@keyframes remplit { from { transform: scaleX(var(--de, 0)); } }
.app.anime .passeport .tampon { animation-name: apparait-tampon; }
@keyframes apparait-tampon { from { transform: scale(1.3) rotate(-14deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Réglages › Animations coupées */
.sans-animation *, .sans-animation *::before, .sans-animation *::after { animation: none !important; transition: none !important; }

/* ---------- Autres sens ---------- */
.autres-sens { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.autres-sens li { background: var(--sable); border-radius: var(--r-sm); padding: 6px 10px; }
.autres-sens span { color: var(--encre-douce); font-size: 14px; }

/* ---------- Proposer une expression ---------- */
a.btn { text-decoration: none; }
.proposer-carte { display: flex; flex-direction: column; gap: 10px; background: var(--sable); }
.proposer-carte h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.1; margin: 0; }
.proposer-carte p { margin: 0; }
.formulaire { display: flex; flex-direction: column; gap: 8px; }
.formulaire label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.formulaire .opt { font-weight: 500; color: var(--encre-douce); }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px;
  color: var(--encre); background: var(--surface);
  border: 2.5px solid var(--encre); border-radius: var(--r-md);
}
.formulaire textarea { resize: vertical; }
.formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--encre-douce); opacity: .8; }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deux-colonnes > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sens-bloc { margin: 6px 0 0; padding: 4px 12px 12px; border: 2.5px dashed var(--encre-douce); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px; }
.sens-bloc legend { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; }
.lien-retirer { align-self: flex-start; background: none; border: none; padding: 6px 0; text-decoration: underline; color: var(--encre-douce); font-weight: 600; font-size: 14px; }
.btn.ajout { background: transparent; color: var(--encre); border: 2.5px dashed var(--encre); box-shadow: none; min-height: 48px; font-size: 15px; }
.erreur-form { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--piment); color: var(--encre-fixe); font-weight: 700; }
@media (max-width: 360px) { .deux-colonnes { grid-template-columns: 1fr; } }