/* ============================================================
   MÉTHODE HUGO — feuille de style « méthode reliée »
   Direction : le livre-méthode imprimé du XIXᵉ (encre, or, rouge de rubrique, parchemin).
   Fontes libres embarquées (OFL) : Cormorant (titres) · Spectral (lecture) · Public Sans (interface) · Vazirmatn (persan).
   Contrainte : tous les noms de classe existants sont conservés (le moteur JS s'appuie dessus).
   ============================================================ */
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-500-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-500-italic-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:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-600-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-600-normal-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:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/spectral-400-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/spectral-400-italic-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:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/spectral-400-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/spectral-400-normal-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:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/spectral-600-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/spectral-600-normal-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:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/publicsans-500-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/publicsans-500-normal-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:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/publicsans-600-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/publicsans-600-normal-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:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/vazirmatn-400-normal-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/vazirmatn-400-normal-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:'Vazirmatn';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/vazirmatn-600-normal-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/vazirmatn-600-normal-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}

:root{
 --navy:#12324a;--navy-hi:#1b4a6b;--gold:#a07d2f;--gold-hi:#c6a24d;--gold-soft:#e7d9b4;
 --rouge:#8f2c1d;--cream:#efe7d4;--paper:#fbf6ea;--ink:#2b2620;--sepia:#6c5d44;--line:#dccdaa;
 --ok:#4c6a3d;--err:#8f2c1d;--encre:#241b14;
 --display:'Cormorant',Georgia,'Times New Roman',serif;
 --serif:'Spectral',Georgia,'Times New Roman',serif;
 --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
 --fa:'Vazirmatn','Segoe UI',Tahoma,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--sans);line-height:1.58;
 background:var(--cream);
 background-image:radial-gradient(120% 90% at 50% -10%,rgba(255,253,247,.6),transparent 60%),
   radial-gradient(140% 120% at 50% 120%,rgba(160,125,47,.05),transparent 55%)}

/* ---------- en-tête : bandeau d'encre, filet doré, jamais serré ---------- */
header{position:sticky;top:0;z-index:30;background:var(--navy);color:#fbf6ea;
 padding:11px clamp(14px,3vw,26px);display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
 box-shadow:inset 0 -2px 0 rgba(160,125,47,.55),0 2px 12px rgba(18,50,74,.22)}
header h1{font-family:var(--display);font-size:clamp(1.2rem,4.4vw,1.55rem);margin:0;font-weight:600;
 letter-spacing:.015em;white-space:nowrap;line-height:1.02}
header .sub{opacity:.66;font-size:.72rem;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.spacer{flex:1 1 auto;min-width:6px}
.lang{display:flex;gap:2px;background:rgba(251,246,234,.1);border:1px solid rgba(198,162,77,.35);border-radius:22px;padding:2px;flex:0 0 auto}
.lang button{background:none;border:0;color:#fbf6ea;opacity:.66;padding:5px 11px;border-radius:20px;cursor:pointer;
 font-family:var(--sans);font-size:.78rem;font-weight:500;white-space:nowrap;transition:.15s}
.lang button:hover{opacity:.9}
.lang button.on{background:var(--gold-hi);opacity:1;color:#2a2010;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.back{background:none;border:0;color:#fbf6ea;cursor:pointer;font-family:var(--sans);font-size:.9rem;opacity:.82;
 display:flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap}.back:hover{opacity:1}
/* menu de langue : un contrôle natif, compact et clair (jamais de débordement) */
.langsel{display:flex;align-items:center;gap:5px;background:rgba(251,246,234,.1);border:1px solid rgba(198,162,77,.4);
 border-radius:20px;padding:3px 8px 3px 11px;flex:0 0 auto}
.langsel .lgi{font-size:.92rem;opacity:.85;line-height:1}
.langsel select{background:transparent;border:0;color:#fbf6ea;font-family:var(--sans);font-size:.82rem;font-weight:600;
 cursor:pointer;padding:4px 18px 4px 2px;outline:none;max-width:44vw;
 -webkit-appearance:none;appearance:none;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' stroke='%23e7d9b4' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
 background-repeat:no-repeat;background-position:right 2px center}
.langsel select:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
.langsel select option{color:#12324a;background:#fbf6ea;font-weight:500}
@media(max-width:430px){header .sub{display:none}.langsel select{font-size:.78rem;max-width:38vw}}

/* ---------- mise en page : la « page » du livre ---------- */
.wrap{max-width:880px;margin:0 auto;padding:26px clamp(14px,3.5vw,22px) 72px}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:5px;
 padding:clamp(24px,4.5vw,42px) clamp(20px,4.5vw,46px);
 box-shadow:0 0 0 1px rgba(160,125,47,.16) inset,0 1px 2px rgba(18,50,74,.05),0 10px 34px rgba(18,50,74,.09);
 animation:rise .45s ease}
/* double filet doré, comme une page reliée */
.card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(160,125,47,.28);border-radius:2px;pointer-events:none}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card,.frontis{animation:none}}

/* ---------- échelle typographique ---------- */
.eyebrow{font:600 .74rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block}
.htitle{font-family:var(--display);font-size:clamp(2rem,7vw,2.85rem);line-height:1.06;color:var(--navy);
 margin:.28em 0 .5em;font-weight:600;letter-spacing:.005em}
.rtitle{font-family:var(--display);font-size:clamp(1.5rem,5vw,1.9rem);color:var(--navy);margin:6px 0 16px;font-weight:600;line-height:1.1}

/* ---------- bilingue (français + pont) ---------- */
.bi{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 28px;align-items:start}
.bi>.gut{background:linear-gradient(var(--line),rgba(220,205,170,.2));align-self:stretch}
.bi>.fr,.mono{font-family:var(--serif)}
.bi>.en{font-family:var(--serif);font-style:italic;color:var(--sepia)}
@media(max-width:680px){.bi{grid-template-columns:1fr;gap:5px}.bi>.gut{display:none}.bi>.en{border-top:1px dashed var(--line);padding-top:7px;margin-top:3px}}

/* ---------- intro de mission : ouverture de chapitre, avec lettrine ---------- */
.intro .bi>.fr,.intro .bi>.en,.intro .mono{font-size:1.17rem;line-height:1.62}
.intro .mono::first-letter,.intro .bi>.fr::first-letter{
 font-family:var(--display);font-weight:600;font-size:3.3em;line-height:.72;float:left;
 margin:.02em .1em -.08em 0;color:var(--rouge)}
.ui-fa .intro .mono::first-letter,.ui-fa .intro .bi>.fr::first-letter{float:none;font-size:1em;margin:0;color:inherit}

/* ---------- épigraphe / observation : le passage à mettre en lumière ---------- */
.epi{margin:22px 0 6px;padding:18px 24px;border-left:2px solid var(--gold);background:linear-gradient(#faf4e4,#f7efdd);border-radius:0 4px 4px 0}
.epi .lab,.tipbox .lab,.cultbox .lab,.eyebrow{font-family:var(--sans)}
.epi .lab{font:600 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.epi .bi>.fr,.epi .mono{font-size:clamp(1.3rem,4.4vw,1.55rem);color:var(--navy);line-height:1.4}
.epi .bi>.en{font-size:1.04rem}

/* encadrés d'aide : astuce (encre) et pont culturel (or) — filet fin, teinte douce */
.tipbox{background:#eef2f4;border:1px solid #d4dde3;border-left:2px solid var(--navy);border-radius:0 4px 4px 0;padding:13px 17px;margin:15px 0}
.tipbox .lab{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.tipbox .bi>.fr,.tipbox .mono{font-size:1rem}.tipbox .bi>.en{font-size:.92rem}
.cultbox{background:linear-gradient(#faf4e4,#f7efdc);border:1px solid #ecd9bf;border-left:2px solid var(--gold);border-radius:0 4px 4px 0;padding:13px 17px;margin:15px 0}
.cultbox .lab{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#8a6d1f;margin-bottom:7px}
.cultbox .bi>.fr,.cultbox .mono{font-size:1rem;line-height:1.55}.cultbox .bi>.en{font-size:.92rem}
.savbox{background:linear-gradient(#eef3ee,#e7efe7);border:1px solid #cfe0cf;border-left:2px solid #3f7d46;border-radius:0 4px 4px 0;padding:13px 17px;margin:15px 0}
.savbox .lab{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#2f6135;margin-bottom:7px}
.savbox .bi>.fr,.savbox .mono{font-size:1rem;line-height:1.55}.savbox .bi>.en{font-size:.92rem}
.srclink{display:inline-block;margin-top:10px;font:600 .8rem/1 var(--sans);color:#8a6d1f;text-decoration:none;border-bottom:1px dashed #c9a24a}.srclink:hover{color:var(--navy)}

/* ---------- règle : la leçon imprimée ---------- */
.rule{background:linear-gradient(#faf4e4,#f8f0de);border-left:2px solid var(--gold);border-radius:0 4px 4px 0;
 padding:18px 24px;margin:12px 0 18px;font-size:1.12rem;font-family:var(--serif);line-height:1.62}
.rule .fa-tr{font-size:1.02rem}

/* ---------- exemples ---------- */
.exs{margin:10px 0 4px}
.ex{padding:10px 0;border-bottom:1px dashed var(--line)}.ex:last-child{border-bottom:0}
.ex .bi>.fr b,.ex .mono b{color:var(--navy)}
.ex .bi>.fr,.ex .mono{font-size:1.14rem}.ex .bi>.en{font-size:1.01rem}

/* ---------- fil de progression : paliers en pastilles, jauge dorée ---------- */
.steps{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 4px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:.2s}
.dot.on{background:var(--gold-hi);box-shadow:0 0 0 3px rgba(198,162,77,.24)}
.dot.dn{background:var(--ok)}
.bar{height:5px;background:rgba(220,205,170,.55);border-radius:6px;overflow:hidden;margin:12px 0 20px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));width:0;transition:.35s}

/* ---------- SOMMAIRE (table des matières) : le cœur de la navigation ---------- */
.lessons{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.lz{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:baseline;
 background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:15px 20px 15px 17px;
 cursor:pointer;transition:.16s;box-shadow:0 1px 2px rgba(18,50,74,.04)}
.lz::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:.55;border-radius:4px 0 0 4px;transition:.16s}
.lz:hover{border-color:var(--gold);transform:translateX(2px);box-shadow:0 4px 14px rgba(18,50,74,.1)}
.lz:hover::before{opacity:1;width:4px}
.lz.done::before{background:var(--ok);opacity:1}
.lz .m{grid-column:1;grid-row:1;align-self:baseline;font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.lz .t{grid-column:2;grid-row:1;font-family:var(--display);font-weight:600;font-size:1.28rem;color:var(--navy);line-height:1.14;margin:0}
.lz .n{grid-column:2;grid-row:2;font-family:var(--sans);font-size:.82rem;color:var(--sepia)}
.lz.done .m{color:var(--ok)}

/* ---------- pastilles de type de leçon ---------- */
.tag{display:inline-block;border-radius:3px;padding:3px 11px;font:600 .72rem/1.4 var(--sans);letter-spacing:.02em;margin-right:6px}
.tag.kc{background:#eaf0f3;color:var(--navy);border:1px solid #cfdbe3}
.tag.af{background:#f5eaf4;color:#7a3b8a;border:1px solid #e3cbe9}

/* ---------- exercice : la ligne à compléter, ancrée ---------- */
.prompt{font-family:var(--serif);font-size:clamp(1.5rem,5.4vw,1.85rem);line-height:1.5;margin:14px 0 6px;color:var(--ink)}
.blank{color:var(--rouge);font-weight:600;padding:0 .15em}
.trans{font-family:var(--serif);font-style:italic;color:var(--sepia);margin-bottom:16px;font-size:1.06rem}
.dlg{display:flex;flex-direction:column;gap:12px;margin:12px 0 18px}
.bub{max-width:82%;padding:11px 15px;border-radius:14px;font-family:var(--serif);font-size:1.08rem;line-height:1.45;position:relative}
.bub .btx{color:var(--navy)}
.bub.them{align-self:flex-start;background:#f4efe2;border:1px solid var(--line);border-bottom-left-radius:4px}
.bub.me{align-self:flex-end;background:var(--navy);border-bottom-right-radius:4px}
.bub.me .btx{color:var(--cream)}
.bub .btr{font-size:.9rem;font-style:italic;color:var(--sepia);margin-top:4px}
.bub.me .btr{color:#cdd7e0}
.bub .spk{vertical-align:middle}
.bub.me .spk{color:var(--cream)}
.dlgq{font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:8px 0 10px}
.dlgopts{display:flex;flex-direction:column;gap:10px}
.dlgopt{text-align:left}
.dlgopt.wrong{opacity:.5;border-color:var(--rouge);text-decoration:line-through}
.speakrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 4px}
#micbtn{background:var(--rouge);border-color:var(--rouge)}
.srout{margin-top:12px}
.srout .srgood,.srout .srbad,.srout .srself{padding:12px 16px;border-radius:5px;font-family:var(--serif);font-size:1.02rem;line-height:1.5}
.srout .srgood{background:#eaf3ea;border-left:3px solid #3f7d46;color:#2c5730}
.srout .srbad{background:#f7efdd;border-left:3px solid var(--gold);color:var(--navy)}
.srout .srself{background:#f4f1ea;border-left:3px solid var(--sepia);color:var(--navy)}
.srout .heard{font-style:italic;color:var(--rouge)}
input[type=text]{font-size:1.22rem;padding:13px 16px;border:1px solid var(--line);border-radius:4px;width:100%;
 font-family:var(--serif);background:#fffdf8;color:var(--ink);box-shadow:inset 0 1px 2px rgba(18,50,74,.05);transition:.14s}
input[type=text]::placeholder{color:#b3a888;font-style:italic}
input[type=text]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,162,77,.22)}

.opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.opt{font-family:var(--serif);font-size:1.16rem;padding:11px 20px;border:1px solid var(--line);border-radius:4px;background:#fffdf8;cursor:pointer;transition:.13s;color:var(--ink)}
.opt:hover{border-color:var(--gold);background:#fff9ee}
.opt.onopt{border-color:var(--gold);background:#fbf1d8;font-weight:600;box-shadow:0 0 0 2px rgba(198,162,77,.25)}
.oinp{font-family:var(--serif);font-size:1.08rem;padding:9px 14px;border:1px solid var(--line);border-radius:4px;background:#fffdf8;width:100%;max-width:340px;margin-top:6px}.oinp:focus{outline:none;border-color:var(--gold)}

/* ---------- boutons : le sceau d'encre ---------- */
button.go{margin-top:18px;background:var(--navy);color:#fbf6ea;border:0;border-radius:4px;padding:13px 28px;
 font-family:var(--sans);font-size:1rem;cursor:pointer;font-weight:600;letter-spacing:.01em;
 box-shadow:0 2px 8px rgba(18,50,74,.22);transition:.15s}
button.go:hover{background:var(--navy-hi);box-shadow:0 4px 14px rgba(18,50,74,.28)}
button.ghost{background:#fffdf8;color:var(--navy);border:1px solid var(--line);box-shadow:none}
button.ghost:hover{border-color:var(--gold);background:#fff9ee}

/* ---------- retour (juste / à revoir) ---------- */
.fb{margin-top:16px;padding:14px 18px;border-radius:4px;display:none;font-size:1.02rem;font-family:var(--serif)}
.fb.ok{background:#eef4e9;border:1px solid #cadcbb;border-left:3px solid var(--ok);color:#38562a;display:block}
.fb.err{background:#f7e9e5;border:1px solid #e6c6bd;border-left:3px solid var(--rouge);color:#7a2416;display:block}
.fb .r{display:block;margin-top:7px;color:var(--ink);font-size:.94rem}

.muted{color:var(--sepia);font-size:.86rem}
.note{font-size:.82rem;color:var(--sepia);margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.done-screen{text-align:center;padding:24px}
.score{font-family:var(--display);font-size:clamp(2.6rem,9vw,3.2rem);font-weight:600;color:var(--gold);margin:6px 0}
kbd{background:#eef2f4;border:1px solid #d4dde3;border-radius:4px;padding:1px 6px;font-size:.8rem;font-family:var(--sans)}

/* ---------- tables de conjugaison, vocabulaire ---------- */
.conjt{width:100%;border-collapse:collapse;margin-top:6px}
.conjt td{padding:7px 10px;border-bottom:1px solid var(--line);font-size:1.06rem;font-family:var(--serif)}
.conjt td:first-child{color:var(--navy);white-space:nowrap;font-weight:600}
.vgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.vchip{padding:7px 14px;border:1px solid var(--line);border-radius:3px;background:var(--paper);cursor:pointer;font-size:1rem;color:var(--navy);font-family:var(--serif);transition:.13s}
.vchip:hover{background:#fff9ee;border-color:var(--gold)}

/* ---------- bouton écoute ---------- */
.spk{background:#eef2f4;border:1px solid #d4dde3;border-radius:20px;cursor:pointer;font-family:var(--sans);font-size:.82rem;
 opacity:.9;padding:3px 11px;vertical-align:middle;color:var(--navy);transition:.14s}
.spk:hover{opacity:1;background:#e3ebef}
.spk.lbl{font-size:.88rem;padding:6px 15px;font-weight:600}

/* ---------- page de garde (frontispice Hugo) ---------- */
.frontis{position:relative;background:var(--paper);border:1px solid rgba(160,125,47,.7);border-radius:4px;
 padding:clamp(34px,6vw,52px) clamp(20px,5vw,30px) clamp(30px,5vw,44px);text-align:center;color:var(--ink);
 box-shadow:inset 0 0 0 6px var(--paper),inset 0 0 0 7px rgba(160,125,47,.42),0 12px 40px rgba(18,50,74,.12)}
.frontis img.port{width:min(210px,55vw);border:1px solid rgba(160,125,47,.6);padding:6px;background:#fff;box-shadow:0 8px 26px rgba(36,27,20,.24);border-radius:2px}
.frontis .epi2{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.35rem,5vw,1.7rem);line-height:1.5;max-width:26ch;margin:26px auto 6px;color:var(--navy)}
.frontis .sig{height:54px;margin-top:14px;opacity:.85}
.frontis .src{color:var(--sepia);font-size:.85rem;margin-top:2px;letter-spacing:.05em;font-family:var(--sans)}
.frontis .marque{margin-top:26px;color:var(--gold);letter-spacing:.34em;font-size:.76rem;text-transform:uppercase;font-family:var(--sans);font-weight:600}
.frontis .marque::before,.frontis .marque::after{content:"\2766";margin:0 .7em;color:var(--gold);opacity:.8;font-size:1.1em;vertical-align:-.06em;letter-spacing:0}
.frontis .go{margin-top:20px}
@media(prefers-reduced-motion:no-preference){.frontis{animation:fad .9s ease}}
@keyframes fad{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- confort tactile + accessibilité ---------- */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.go,.opt,.spk,.vchip,.lz{transition:all .15s ease}
.go:active,.opt:active{transform:scale(.98)}
@media(max-width:520px){.go,.opt{min-height:44px}.spk{min-height:36px}input[type=text],.oinp{font-size:16px}}

/* ---------- interface persane : bidi propre, police lisible ---------- */
.ui-fa{--fafont:'Vazirmatn','Segoe UI',Tahoma,sans-serif}
.ui-fa button,.ui-fa .eyebrow,.ui-fa .intro,.ui-fa .muted,.ui-fa .fb,.ui-fa .note,.ui-fa .lab,.ui-fa .rule,.ui-fa .sub{unicode-bidi:plaintext}
.ui-fa button,.ui-fa .intro,.ui-fa .rule{font-family:var(--fafont)}
.fa-tr{font-family:var(--fafont);text-align:right;line-height:1.95}
/* nom de l'étudiant : rendu dans son propre alphabet (latin → Spectral, arabe/persan → Vazirmatn) + direction auto, isolé du texte autour */
.uname{font-family:'Spectral','Vazirmatn','Segoe UI',Georgia,serif;unicode-bidi:isolate;font-weight:600}
/* marqueur d'avertissement dans les règles (remplace ⚠) */
.warn{color:var(--rouge);display:inline-block;vertical-align:-.13em;margin-right:.12em}
/* en-tête de mission : gravure ancienne, façon planche de livre */
.mimg{margin:0 0 22px;padding:6px;background:var(--paper);border:1px solid rgba(160,125,47,.5);border-radius:3px;
 box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(160,125,47,.3),0 3px 14px rgba(18,50,74,.12)}
.mimg img{display:block;width:100%;height:auto;border-radius:2px}

/* ---------- Défi Chrono (jeu chrono + combo) ---------- */
.chrono{text-align:center}
.chtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.chscore{font-family:var(--sans);font-size:.95rem;color:var(--sepia)}.chscore b{color:var(--navy);font-size:1.15rem}
.chcombo{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--line);min-width:2.2em}
.chcombo.hot{color:var(--rouge)}
.chtimew{font-family:var(--sans);font-size:.95rem;color:var(--sepia)}.chtimew span{color:var(--navy);font-weight:600;font-size:1.1rem}
.chbar{height:6px;background:rgba(220,205,170,.5);border-radius:6px;overflow:hidden;margin:0 0 24px}
.chbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width .1s linear}
.chask{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.chclue{font-family:var(--display);font-size:clamp(1.9rem,7vw,2.6rem);color:var(--navy);margin:6px 0 24px;line-height:1.14;font-weight:600}
.chclue.fa-tr{font-family:var(--fa);font-weight:600}
.chopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chopt{font-family:var(--serif);font-size:1.28rem;padding:16px 12px;border:1px solid var(--line);border-radius:5px;background:#fffdf8;cursor:pointer;color:var(--ink);transition:.12s}
.chopt:hover{border-color:var(--gold);background:#fff9ee}
.chopt.good{border-color:var(--ok);background:#eef4e9;color:#38562a;box-shadow:0 0 0 2px rgba(76,106,61,.3)}
.chopt.bad{border-color:var(--rouge);background:#f7e9e5;color:#7a2416}
.chend{padding:16px 4px}
.chfleur{color:var(--gold);font-size:1.7rem;margin-bottom:6px;letter-spacing:.3em}
.chbig{font-family:var(--display);font-size:clamp(3.4rem,16vw,5rem);font-weight:600;color:var(--navy);line-height:1}
.chlbl{font-family:var(--sans);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.chrec{font-family:var(--display);font-size:1.55rem;color:var(--rouge);margin-top:16px;font-weight:600}
.chrec2{font-family:var(--sans);color:var(--sepia);margin-top:16px}
.chstat{font-family:var(--serif);color:var(--sepia);margin-top:6px}

/* ---------- Jeu de Paires (mémoire) ---------- */
.prtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:var(--sans);font-size:.95rem;color:var(--sepia)}
.prtop b{color:var(--navy);font-size:1.1rem}
.prgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.prcard{aspect-ratio:3/4;border:1px solid rgba(198,162,77,.5);border-radius:5px;background:var(--navy);color:var(--gold-hi);
 font-family:var(--display);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:5px;line-height:1.05;transition:.14s;
 box-shadow:inset 0 0 0 3px var(--navy),inset 0 0 0 4px rgba(198,162,77,.35)}
.prcard:hover:not(.matched):not(.up){transform:translateY(-2px);box-shadow:inset 0 0 0 3px var(--navy),inset 0 0 0 4px var(--gold-hi)}
.prcard.up{background:#fffdf8;color:var(--navy);border-color:var(--gold);font-family:var(--serif);font-size:clamp(.82rem,3vw,1.08rem);font-weight:600;box-shadow:none}
.prcard.up.fa-tr{font-family:var(--fa)}
.prcard.matched{background:#eef4e9;color:#38562a;border-color:var(--ok);cursor:default;box-shadow:none}
@media(max-width:380px){.prgrid{gap:6px}.prcard{font-size:1.25rem}}

/* ---------- jeux rhabillés : anagramme, pendu, mots mêlés ---------- */
/* anagramme : lettres en caractères de plomb */
.otile{display:inline-block;background:var(--navy);color:var(--gold-hi);border-radius:3px;padding:6px 13px;margin:3px;
 font-family:var(--display);font-weight:600;font-size:1.35rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.28),0 1px 2px rgba(18,50,74,.25)}
.oletter{font-family:var(--display);font-weight:600;font-size:1.4rem;min-width:2.3em;padding:10px 6px;margin:3px;
 border:1px solid var(--line);border-radius:3px;background:#fffdf8;color:var(--navy);cursor:pointer;transition:.12s;
 box-shadow:0 1px 2px rgba(18,50,74,.08)}
.oletter:hover{border-color:var(--gold);background:#fff9ee;transform:translateY(-1px)}
#obuilt{min-height:44px}
/* pendu : vies + clavier */
.plife{color:var(--rouge);letter-spacing:.16em;font-size:1.1rem}
.plost{color:var(--line);letter-spacing:.16em;font-size:1.1rem}
.pkey{font-family:var(--display);font-weight:600;font-size:1.18rem;min-width:2em;padding:9px 0;margin:2px;
 border:1px solid var(--line);border-radius:3px;background:#fffdf8;color:var(--navy);cursor:pointer;transition:.1s}
.pkey:hover:not(.used){border-color:var(--gold);background:#fff9ee}
.pkey.used{opacity:.3;pointer-events:none;background:var(--cream)}
/* mots mêlés : grille encadrée façon typographie */
.wsgrid{border-collapse:separate;border-spacing:2px;margin:10px auto;background:var(--gold-soft);padding:5px;border-radius:4px;box-shadow:0 1px 3px rgba(18,50,74,.12)}
.wscell{width:34px;height:34px;text-align:center;font-family:var(--display);font-weight:600;font-size:1.15rem;
 color:var(--navy);background:#fffdf8;cursor:pointer;user-select:none;border-radius:2px;transition:.1s}
.wscell:hover{background:#fff3d6}
.wscell.found{background:var(--gold-soft);color:var(--navy);font-weight:700}
.wscell.sel{background:var(--navy);color:var(--gold-hi)}
.wschip{display:inline-block;margin:3px 8px 3px 0;padding:5px 13px;border-radius:3px;border:1px solid var(--line);background:var(--paper);font-family:var(--serif)}
.wschip.found{background:#eef4e9;color:var(--ok);text-decoration:line-through;border-color:var(--ok)}