/* Noto Serif gras, servie par l'application (licence SIL OFL) : les accents vietnamiens
   (ế, ộ…) et les macrons du rōmaji s'affichent juste, quel que soit le téléphone.
   Chaque fichier n'est téléchargé que si la page contient ses lettres (unicode-range). */
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../polices/noto-serif-700-latin.woff2) format("woff2");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:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../polices/noto-serif-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../polices/noto-serif-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* Méthode polyglotte — application de révision par paliers.
   Mobile d'abord. Les couleurs sont celles des livres et du site anthony-bouillon.com.
   Toutes les valeurs (couleurs, tailles, espaces) se décident dans :root. */
:root{
  --encre:#0c447c;--nuit:#0b1a2e;--papier:#fbf6ec;--or:#d4a544;--sceau:#c8102e;--plume:#5d6675;--vert:#1f7a4d;
  --fond:var(--papier);--texte:var(--nuit);--discret:var(--plume);--titre:var(--encre);--filet:#e3d8c2;--carte:#fffdf8;
  --ombre:0 1px 2px rgba(11,26,46,.12),0 14px 32px -10px rgba(11,26,46,.35);
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-petit:.875rem;--t-corps:1rem;--t-3:1.25rem;--t-2:1.6rem;--t-mot:clamp(2rem,9vw,3rem);
  --e1:.5rem;--e2:1rem;--e3:1.5rem;--e4:2.5rem;
  --rayon:16px;--largeur:34rem;
}
@media (prefers-color-scheme:dark){
  :root{--fond:#0b1a2e;--texte:#ece5d6;--discret:#a7b0bf;--titre:#f1e7d0;--filet:#24344d;--carte:#132640;--ombre:0 14px 32px -10px rgba(0,0,0,.7)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fond);color:var(--texte);font:var(--t-corps)/1.55 var(--sans);overscroll-behavior-y:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:4px}
.sauter{position:absolute;left:var(--e2);top:-4rem}
.sauter:focus{top:var(--e1);background:var(--fond);padding:var(--e1) var(--e2);z-index:10}
h1,h2,h3{font-family:var(--serif);color:var(--titre);line-height:1.2;margin:0 0 var(--e1)}
h1{font-size:var(--t-2)}
h2{font-size:var(--t-3)}
p{margin:0 0 var(--e2)}
.discret{color:var(--discret);font-size:var(--t-petit)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Barre du haut */
.barre{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2);background:var(--encre);color:#fff;padding:calc(var(--e1) + env(safe-area-inset-top)) var(--e2) var(--e1)}
.barre .site{font-size:var(--t-petit);color:#dbe6f3;text-decoration:none}
.barre .site:hover{text-decoration:underline}
.marque{font-family:var(--serif);font-weight:700;text-decoration:none;font-size:1.05rem}
.marque span{color:#e9c46a}
main{width:min(var(--largeur),100% - 2*var(--e2));margin:0 auto;padding:var(--e3) 0 calc(var(--e4) + env(safe-area-inset-bottom))}
main:focus{outline:none}
.chargement{text-align:center;color:var(--discret);padding:var(--e4) 0}
.retour{display:inline-block;margin-bottom:var(--e2);font-size:var(--t-petit);color:var(--discret);text-decoration:none}

/* Choix de la langue */
.groupe{font-size:var(--t-petit);font-weight:700;color:var(--discret);border-bottom:2px solid var(--or);padding-bottom:.3rem;margin:var(--e3) 0 0;text-transform:none}
.langues{list-style:none;margin:0;padding:0}
.langues li{border-bottom:1px solid var(--filet)}
.langues a,.langues .fermee{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);padding:var(--e2) 0;text-decoration:none;min-height:56px}
.langues .endo{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--titre);line-height:1.1}
.langues .nom{display:block;font-size:var(--t-petit);color:var(--discret);font-weight:400;font-family:var(--sans)}
.langues .fermee{opacity:.55}
.etiquette{font-size:.75rem;padding:.15rem .55rem;border-radius:99px;background:var(--filet);color:var(--discret);white-space:nowrap}
.etiquette.ok{background:var(--encre);color:#fff}

/* Tableau de bord d'une langue */
.honnetete{background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);padding:var(--e3);margin:var(--e2) 0 var(--e3)}
.honnetete .chiffre{font-family:var(--serif);font-size:3rem;font-weight:700;color:var(--titre);line-height:1;margin:0 0 .3rem}
.honnetete .source{font-size:.75rem;color:var(--discret);margin:var(--e1) 0 0}
.jauge{height:8px;border-radius:99px;background:var(--filet);overflow:hidden;margin:var(--e1) 0}
.jauge span{display:block;height:100%;background:var(--encre);border-radius:inherit;transition:width .4s}
.paliers{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1)}
.palier{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--e2);padding:var(--e2);border-radius:12px;border:1px solid var(--filet);background:var(--carte)}
.palier .num{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;background:var(--filet);color:var(--discret)}
.palier.valide .num{background:var(--vert);color:#fff}
.palier.en-cours{border-color:var(--encre);box-shadow:0 0 0 1px var(--encre)}
.palier.en-cours .num{background:var(--encre);color:#fff}
.palier.verrouille{opacity:.6}
.palier h3{font-size:1rem;margin:0}
.palier p{margin:0;font-size:var(--t-petit);color:var(--discret)}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;padding:.6rem 1.2rem;border-radius:12px;border:2px solid var(--encre);background:var(--encre);color:#fff;font:700 var(--t-corps) var(--sans);text-decoration:none;cursor:pointer}
.bouton.second{background:transparent;color:var(--titre);border-color:currentColor}
.bouton.large{width:100%}
.reinit{margin-top:var(--e4);background:none;border:0;color:var(--discret);text-decoration:underline;font:inherit;font-size:var(--t-petit);cursor:pointer}

/* Session : la pile de cartes */
.session-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);margin-bottom:var(--e1)}
.session-tete .discret{margin:0}
.pile{position:relative;height:min(62dvh,26rem);margin:var(--e2) 0 var(--e3);perspective:1200px}
.carte{position:absolute;inset:0;border-radius:var(--rayon);background:var(--carte);border:1px solid var(--filet);box-shadow:var(--ombre);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.carte.saisie{cursor:grabbing}
.carte.dessous{transform:scale(.95) translateY(12px);opacity:.7;pointer-events:none;box-shadow:none}
.carte .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--e3);backface-visibility:hidden;transition:transform .35s}
.carte .verso{transform:rotateY(180deg)}
.carte.retournee .recto{transform:rotateY(-180deg)}
.carte.retournee .verso{transform:rotateY(0)}
.carte .mot{font-family:var(--serif);font-size:var(--t-mot);font-weight:700;color:var(--titre);line-height:1.15;margin:0 0 var(--e1);overflow-wrap:anywhere}
.carte .aide{font-size:var(--t-petit);color:var(--discret);margin:var(--e2) 0 0}
.carte .fr{font-family:var(--serif);font-size:1.6rem;font-weight:700;margin:0 0 var(--e2)}
.carte .pron{font-size:1.15rem;margin:0 0 var(--e1)}
.carte .pron b{font-weight:400;color:var(--discret);font-size:var(--t-petit);display:block}
.carte .rubrique{font-size:.75rem;color:var(--discret);margin:var(--e2) 0 0;padding:.2rem .6rem;border:1px solid var(--filet);border-radius:99px}
.carte .tampon{position:absolute;top:var(--e3);padding:.3rem .8rem;border:3px solid;border-radius:8px;font:800 1rem var(--sans);text-transform:uppercase;letter-spacing:.04em;opacity:0;pointer-events:none}
.carte .tampon.oui{left:var(--e3);color:var(--vert);transform:rotate(-12deg)}
.carte .tampon.non{right:var(--e3);color:var(--sceau);transform:rotate(12deg)}
.gestes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.gestes .bouton.non{background:transparent;border-color:var(--sceau);color:var(--sceau)}
.gestes .bouton.oui{background:var(--vert);border-color:var(--vert)}
.clavier{text-align:center;margin-top:var(--e2)}
@media (hover:none){.clavier{display:none}}

/* Fin de palier */
.fin{text-align:center;padding:var(--e3) 0}
.fin .medaille{width:4.5rem;height:4.5rem;margin:0 auto var(--e2);border-radius:50%;display:grid;place-items:center;background:var(--vert);color:#fff;font-size:2rem}
.erreur{border-left:3px solid var(--sceau);padding:var(--e1) var(--e2)}

/* Bouton « Écouter » au dos de la carte */
.carte .ecouter{margin:var(--e1) 0 0;min-height:44px;padding:.45rem 1rem;border-radius:99px;border:1px solid var(--filet);background:transparent;color:var(--titre);font:600 var(--t-petit) var(--sans);cursor:pointer}
.carte .ecouter:hover{border-color:var(--titre)}