/* =========================================================
   IvyChinese — Espace membres
   Reprend la palette du site principal : papier, encre, cinabre.
   ========================================================= */

:root{
  --paper:        #f4efe6;
  --paper-deep:   #ebe4d6;
  --paper-soft:   #faf7f0;
  --ink:          #1a1814;
  --ink-soft:     #3a342c;
  --ink-mute:     #6b6258;
  --ink-faint:    #a89f93;
  --cinnabar:     #b73225;
  --cinnabar-soft:#c94a3a;
  --jade:         #5c7a6a;
  --ok:           #5c7a6a;
  --warn:         #b07b2a;
  --err:          #b73225;
  --line:         rgba(26,24,20,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
html,body{background:var(--paper);color:var(--ink);min-height:100vh}
body{
  font-family:'Noto Serif SC','Cormorant Garamond',serif;
  font-weight:300;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}

/* Texture papier + grain */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(183,50,37,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(92,122,106,.05) 0%, transparent 55%);
  pointer-events:none; z-index:1;
}
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1, 0 0 0 0 0.09, 0 0 0 0 0.07, 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:multiply; pointer-events:none; z-index:2;
}

.ink-flow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ink-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;animation:drift 30s ease-in-out infinite}
.ink-blob.b1{width:480px;height:480px;background:radial-gradient(circle,rgba(26,24,20,.5),transparent 65%);top:-8%;left:-8%}
.ink-blob.b2{width:380px;height:380px;background:radial-gradient(circle,rgba(183,50,37,.35),transparent 65%);top:60%;right:-6%;animation-delay:-10s;animation-duration:36s}
.ink-blob.b3{width:340px;height:340px;background:radial-gradient(circle,rgba(92,122,106,.4),transparent 65%);bottom:-12%;left:35%;animation-delay:-18s;animation-duration:40s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(60px,-40px) scale(1.08)}
  50%{transform:translate(-30px,50px) scale(.95)}
  75%{transform:translate(-50px,-20px) scale(1.05)}
}

/* ---- Navigation ---- */
.m-nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:rgba(244,239,230,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.m-logo{
  display:flex; align-items:center; gap:12px;
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-weight:400; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
}
.m-logo small{font-size:12px;color:var(--ink-mute);letter-spacing:.1em;text-transform:uppercase}
.seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--cinnabar);color:var(--paper);
  font-family:'Noto Serif SC',serif;font-weight:400;
  font-size:18px;
  border-radius:4px;
}
.m-nav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.m-nav-links a{
  position:relative;
  color:var(--ink-soft);text-decoration:none;
  font-family:'Cormorant Garamond',serif;font-size:15px;
  letter-spacing:.04em;
  padding:6px 0;
}
.m-nav-links a span[lang="zh"]{
  font-family:'Noto Serif SC',serif;font-size:12px;
  color:var(--ink-faint);margin-left:6px;
}
.m-nav-links a:not(.m-btn-ghost)::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--cinnabar);
  transition:width .3s ease;
}
.m-nav-links a:not(.m-btn-ghost):hover{color:var(--cinnabar)}
.m-nav-links a:not(.m-btn-ghost):hover::after{width:100%}
.m-user{
  font-family:'Inter',sans-serif;font-size:13px;
  color:var(--ink-mute);
}
.m-role{
  display:inline-block;
  padding:2px 8px;margin-left:4px;
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:11px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.08em;
}
.m-btn-ghost{
  padding:8px 18px;
  border:1px solid var(--ink-soft);
  border-radius:2px;
  font-family:'Cormorant Garamond',serif;
  transition:all .25s ease;
}
.m-btn-ghost:hover{background:var(--ink);color:var(--paper)!important}

/* ---- Layout général ---- */
.m-main{
  position:relative; z-index:3;
  max-width:1100px; margin:0 auto;
  padding:60px 40px 100px;
}

.m-page-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(36px, 4vw, 56px);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.m-page-title em{color:var(--cinnabar);font-style:italic}
.m-page-sub{
  font-family:'Noto Serif SC',serif;
  font-weight:300;
  color:var(--ink-mute);
  font-size:16px;
  letter-spacing:.05em;
  margin-bottom:40px;
}
.m-page-zh{
  font-family:'Noto Serif SC',serif;
  color:var(--cinnabar);
  font-size:.5em;
  display:block;
  margin-top:8px;
  letter-spacing:.1em;
}

.m-section-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;font-size:24px;
  letter-spacing:.02em;
  margin:48px 0 20px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.m-section-title .zh{
  font-family:'Noto Serif SC',serif;
  font-size:14px;color:var(--ink-mute);font-weight:300;letter-spacing:.1em;
}

/* ---- Cards / grilles ---- */
.m-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
}
.m-card{
  position:relative;
  background:var(--paper-soft);
  border:1px solid var(--line);
  padding:28px;
  text-decoration:none;color:var(--ink);
  transition:all .25s ease;
  display:flex;flex-direction:column;gap:12px;
}
.m-card:hover{
  border-color:var(--cinnabar);
  transform:translateY(-2px);
  box-shadow:0 10px 30px -16px rgba(26,24,20,.3);
}
.m-card .tag{
  display:inline-block;
  font-family:'Inter',sans-serif;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);
}
.m-card h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;font-size:22px;
  line-height:1.25;
  margin-top:4px;
}
.m-card .zh{
  font-family:'Noto Serif SC',serif;
  color:var(--cinnabar);font-size:18px;
  letter-spacing:.05em;
}
.m-card p{
  color:var(--ink-mute);font-size:14px;line-height:1.7;
}
.m-card .arrow{
  align-self:flex-end;margin-top:auto;
  width:34px;height:34px;border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  transition:all .3s ease;
}
.m-card:hover .arrow{background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar);transform:translateX(4px)}

/* ---- Tableaux ---- */
.m-table{
  width:100%;border-collapse:collapse;
  background:var(--paper-soft);
  font-family:'Inter',sans-serif;font-size:14px;
}
.m-table th,.m-table td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
}
.m-table th{
  font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-mute);
  background:var(--paper-deep);
}
.m-table tr:hover td{background:rgba(183,50,37,.03)}
.m-table .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Formulaires ---- */
.m-form{
  max-width:440px;margin:60px auto;
  background:var(--paper-soft);
  border:1px solid var(--line);
  padding:48px 40px;
}
.m-form h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;font-size:38px;
  margin-bottom:8px;text-align:center;
}
.m-form .sub{
  text-align:center;color:var(--ink-mute);
  font-size:14px;margin-bottom:32px;letter-spacing:.05em;
}
.m-field{margin-bottom:20px}
.m-field label{
  display:block;
  font-family:'Inter',sans-serif;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-mute);
  margin-bottom:8px;
}
.m-field input, .m-field select, .m-field textarea{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px 14px;
  font-family:'Noto Serif SC',serif;
  font-size:15px;color:var(--ink);
  transition:border-color .2s;
}
.m-field input:focus, .m-field select:focus, .m-field textarea:focus{
  outline:none;border-color:var(--cinnabar);
}
.m-btn{
  display:inline-block;
  width:100%;padding:14px;
  background:var(--ink);color:var(--paper);
  border:none;cursor:pointer;
  font-family:'Cormorant Garamond',serif;
  font-size:16px;letter-spacing:.08em;
  transition:background .2s;
  text-align:center;text-decoration:none;
}
.m-btn:hover{background:var(--cinnabar)}
.m-btn-small{
  padding:6px 14px;width:auto;font-size:13px;
}
.m-btn-danger{background:var(--err)}
.m-btn-danger:hover{background:#8e2719}
.m-btn-ghost-inline{
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--line);
}
.m-btn-ghost-inline:hover{background:var(--paper-deep);color:var(--ink)}

.m-alert{
  padding:14px 18px;margin-bottom:24px;
  font-family:'Inter',sans-serif;font-size:14px;
  border-left:3px solid var(--ink-mute);
  background:var(--paper-deep);
}
.m-alert-err{border-color:var(--err);background:rgba(183,50,37,.08);color:var(--ink)}
.m-alert-ok{border-color:var(--ok);background:rgba(92,122,106,.1)}
.m-alert-warn{border-color:var(--warn);background:rgba(176,123,42,.1)}

/* ---- Contenu (leçons) ---- */
.m-lesson{max-width:760px;margin:0 auto}
.m-lesson h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;font-size:28px;
  margin:40px 0 16px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.m-lesson p{margin-bottom:18px;line-height:1.85}
.m-lesson .dialogue{
  background:var(--paper-soft);
  border-left:3px solid var(--cinnabar);
  padding:24px 28px;margin:24px 0;
}
.m-lesson .dialogue .line{margin-bottom:18px}
.m-lesson .dialogue .speaker{
  font-family:'Inter',sans-serif;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cinnabar);
  margin-bottom:4px;
}
.m-lesson .dialogue .zh{
  font-size:20px;font-weight:400;color:var(--ink);
}
.m-lesson .dialogue .pinyin{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--ink-mute);font-size:14px;margin-top:2px;
}
.m-lesson .dialogue .fr{
  color:var(--ink-soft);font-size:14px;margin-top:4px;
}
.m-vocab{
  width:100%;border-collapse:collapse;margin:24px 0;
  background:var(--paper-soft);
}
.m-vocab th, .m-vocab td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.m-vocab th{
  background:var(--paper-deep);
  font-family:'Inter',sans-serif;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);font-weight:500;
}
.m-vocab .hanzi{font-size:18px;color:var(--ink);font-weight:400}
.m-vocab .pinyin{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--ink-mute)}

/* ---- Footer ---- */
.m-footer{
  position:relative;z-index:3;
  border-top:1px solid var(--line);
  padding:32px 40px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-mute);
}
.m-footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.m-footer a:hover{border-color:var(--cinnabar);color:var(--cinnabar)}

/* ---- Responsive ---- */
@media (max-width:720px){
  .m-nav{padding:14px 20px;flex-direction:column;gap:14px}
  .m-nav-links{gap:14px;font-size:13px;justify-content:center}
  .m-main{padding:40px 20px 60px}
  .m-form{padding:32px 24px;margin:30px 16px}
  .m-table{font-size:12px}
  .m-table th, .m-table td{padding:10px 8px}
}