/* Direction A — Cahier : polices de l’interface (licence SIL OFL, voir fonts/LICENSE-*.txt). */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400-normal.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-400-italic.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/public-sans-400-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/public-sans-500-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/public-sans-600-normal.woff2') format('woff2')}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/kalam-400-normal.woff2') format('woff2')}
/* Polices des cartes (licence SIL OFL, voir fonts/LICENSE-*.txt) : chargées seulement si une fiche les utilise. */
@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lexend-400.woff2') format('woff2')}
@font-face{font-family:'Lexend';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/lexend-700.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/atkinson-hyperlegible-400.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/atkinson-hyperlegible-700.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/caveat-400.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/caveat-700.woff2') format('woff2')}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/opendyslexic-400.woff2') format('woff2')}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/opendyslexic-700.woff2') format('woff2')}
:root{
  --paper:#f4efe3;
  --paper-deep:#eae3d4;
  --white:#fffdf7;
  --ink:#202944;
  --ink-soft:#46516b;
  --muted:#77796f;
  --line:#d8d0bf;
  --yellow:#f5d65c;
  --mint:#bfd7c1;
  --coral:#e87554;
  --blue:#5067c8;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 18px 44px rgba(32,41,68,.1);
  --shadow-surface:
    0 0 0 1px oklch(0 0 0 / .06),
    0 1px 2px -1px oklch(0 0 0 / .06),
    0 2px 4px oklch(0 0 0 / .04);
  --shadow-surface-hover:
    0 0 0 1px oklch(0 0 0 / .08),
    0 1px 2px -1px oklch(0 0 0 / .08),
    0 2px 4px oklch(0 0 0 / .06)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5
}
button,input,textarea,select{
  font:inherit
}
button{
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(80,103,200,.42);
  outline-offset:3px
}
.app-shell{
  max-width:1440px;
  margin:auto;
  padding:0 5.2vw
}
.topbar{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:30px
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  text-decoration:none;
  font:italic 24px var(--serif);
  letter-spacing:-.6px
}
.brand-dot{
  color:var(--coral)
}
.brand-mark{
  width:22px;
  height:26px;
  position:relative;
  display:inline-block
}
.brand-mark i{
  position:absolute;
  width:15px;
  height:20px;
  border:1.5px solid var(--ink);
  border-radius:4px 4px 5px 5px;
  background:var(--paper);
  top:3px;
  left:4px;
  transform:rotate(0deg)
}
.brand-mark i:nth-child(1){
  transform:rotate(-13deg);
  left:1px;
  top:4px
}
.brand-mark i:nth-child(2){
  transform:rotate(8deg);
  left:6px;
  top:2px
}
.brand-mark i:nth-child(3){
  transform:rotate(0deg);
  left:4px;
  top:4px
}
.main-nav{
  display:flex;
  gap:30px;
  height:100%;
  align-items:center
}
.nav-link{
  border:0;
  background:none;
  height:100%;
  padding:3px 2px 0;
  cursor:pointer;
  color:#72756f;
  font-size:13px;
  position:relative
}
.nav-link.active{
  color:var(--ink)
}
@media (hover:hover){
  .nav-link:hover{color:var(--ink)}
}
.nav-link.active:after{
  position:absolute;
  content:"";
  height:2px;
  background:var(--coral);
  bottom:0;
  left:0;
  right:0
}
.top-actions{
  display:flex;
  align-items:center;
  gap:22px
}
.save-indicator{
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px
}
.save-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#69a982
}
.profile-button{
  border:1px solid var(--line);
  background:rgba(255,253,247,.58);
  border-radius:999px;
  padding:5px 12px 5px 5px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  cursor:pointer
}
.avatar{
  width:29px;
  height:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--yellow);
  font:italic 14px var(--serif)
}
.chevron{
  font-size:15px;
  color:var(--muted)
}
#app{
  min-height:calc(100vh - 170px)
}
.hero{
  padding:68px 0 74px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
  align-items:center;
  min-height:490px
}
.eyebrow{
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:1.1px;
  color:var(--coral);
  margin:0 0 19px
}
.hero h1,.page-heading h1{
  font:clamp(44px,5.3vw,76px)/.99 var(--serif);
  letter-spacing:-2.1px;
  max-width:650px;
  margin:0
}
.hero h1 em,.page-heading h1 em{
  color:#b39724;
  font-weight:400
}
.hero-copy{
  font-size:14px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:430px;
  margin:23px 0 25px
}
.button-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap
}
.button-primary,.button-secondary,.button-quiet,.button-danger{
  border:0;
  border-radius:999px;
  padding:13px 19px;
  background:var(--ink);
  color:var(--white);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  transition-property:background-color,border-color,color;
  transition-duration:150ms;
  transition-timing-function:ease-out
}
@media (hover:hover){
  .button-primary:hover{
    background:#344263;
  }
}
@media (prefers-reduced-motion:no-preference){
  .button-primary,.button-secondary,.button-quiet,.button-danger{
    transition-property:scale,transform,background-color,border-color,color
  }
  .button-primary:hover{transform:translateY(-1px)}
  button:not(:disabled):not(.flashcard):active{scale:.96}
}
.button-primary .arrow{
  font-size:18px;
  font-weight:400;
  line-height:10px
}
.button-secondary{
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line)
}
@media (hover:hover){
  .button-secondary:hover,.button-quiet:hover{border-color:var(--ink)}
}
.button-quiet{
  background:transparent;
  color:var(--ink);
  padding:10px 12px
}
.button-danger{
  background:#f8e1da;
  color:#973c24;
  padding:10px 14px
}
.microcopy{
  font:10px var(--mono);
  color:var(--muted);
  margin:16px 0 0
}
.hero-art{
  min-height:330px;
  position:relative;
  display:grid;
  place-items:center
}
.art-card{
  position:absolute;
  width:min(340px,77%);
  height:215px;
  border:1.5px solid var(--ink);
  border-radius:12px;
  background:#fffdf8;
  box-shadow:7px 9px 0 var(--ink);
  transform:rotate(4deg);
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:3
}
.art-card.back-one{
  background:var(--yellow);
  width:min(314px,70%);
  height:204px;
  transform:rotate(-9deg) translate(-25px,-20px);
  z-index:1
}
.art-card.back-two{
  background:var(--mint);
  width:min(332px,74%);
  height:211px;
  transform:rotate(-4deg) translate(-9px,-7px);
  z-index:2
}
.card-tag{
  font:9px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  width:max-content
}
.art-question{
  font:29px/.98 var(--serif);
  letter-spacing:-.5px;
  max-width:235px
}
.art-foot{
  font:italic 12px var(--serif);
  color:var(--coral);
  align-self:flex-end
}
.art-sticker{
  position:absolute;
  z-index:4;
  right:7%;
  top:15px;
  width:83px;
  height:83px;
  border-radius:50%;
  background:var(--coral);
  color:#fff9ed;
  display:grid;
  place-items:center;
  text-align:center;
  font:italic 14px/1.1 var(--serif);
  transform:rotate(9deg);
  box-shadow:0 0 0 5px var(--paper)
}
/* Le petit mot est posé sous la pile de cartes (centrée), avec la flèche qui remonte vers elle. */
.scribble{
  position:absolute;
  z-index:5;
  top:calc(50% + 130px);
  left:6%;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  font:italic 14px var(--serif);
  transform:rotate(-6deg)
}
.scribble:after{
  content:"↗";
  font:24px/1 var(--serif)
}
.steps{
  background:var(--ink);
  color:var(--paper);
  margin:0 calc(-5.2vw);
  padding:46px 5.2vw 52px
}
.steps h2{
  font:36px var(--serif);
  margin:0
}
.steps-intro{
  font:italic 13px var(--serif);
  color:var(--yellow);
  margin:0 0 24px
}
.step-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.step-card{
  border:1px dashed rgba(255,253,247,.42);
  border-radius:5px;
  padding:15px 18px;
  min-height:116px
}
.step-number{
  font:italic 31px var(--serif);
  color:var(--yellow);
  line-height:1
}
.step-card:nth-child(2) .step-number{
  color:var(--mint)
}
.step-card:nth-child(3) .step-number{
  color:var(--coral)
}
.step-card h3{
  font:16px var(--serif);
  margin:8px 0 3px
}
.step-card p{
  font-size:11px;
  line-height:1.55;
  color:#c9cbd2;
  margin:0;
  max-width:250px
}
.content-section{
  padding:56px 0 68px
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px
}
.section-heading h2{
  font:32px var(--serif);
  margin:0
}
.section-heading p{
  color:var(--muted);
  font-size:12px;
  margin:5px 0 0
}
.deck-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.deck-card{
  border:1px solid transparent;
  border-radius:9px;
  background:rgba(255,253,247,.64);
  padding:18px;
  min-height:206px;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-surface);
  transition-property:box-shadow;
  transition-duration:150ms;
  transition-timing-function:ease-out
}
@media (hover:hover){
  .deck-card:hover{
    box-shadow:var(--shadow-surface-hover),0 8px 18px rgba(32,41,68,.08)
  }
}
@media (prefers-reduced-motion:no-preference){
  .deck-card{transition-property:transform,box-shadow}
  @media (hover:hover){.deck-card:hover{transform:translateY(-2px)}}
}
.deck-top{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.subject-chip,.status-chip{
  font:9px var(--mono);
  letter-spacing:.45px;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  color:var(--ink-soft)
}
.deck-emoji{
  width:33px;
  height:33px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--paper-deep);
  font-size:15px
}
.deck-card h3{
  font:24px/1.05 var(--serif);
  margin:19px 0 5px;
  letter-spacing:-.3px
}
.deck-card .deck-desc{
  font-size:11px;
  color:var(--muted);
  margin:0;
  line-height:1.55
}
.deck-meta{
  margin-top:auto;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.deck-meta span{
  font:10px var(--mono);
  color:var(--muted)
}
.deck-actions{
  display:flex;
  gap:6px
}
.mini-btn.error-chip{
  border-color:#e8b7a6;
  background:#fff1ec;
  color:#9a4b32
}
.section-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.count-badge{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-left:4px;
  padding:0 6px;
  border-radius:999px;
  background:var(--coral);
  color:var(--white);
  font:10px var(--mono)
}
.note-panel .errors-button{
  margin-top:8px
}
.mini-btn{
  border:1px solid var(--line);
  background:transparent;
  border-radius:999px;
  padding:7px 10px;
  font-size:10px;
  cursor:pointer
}
@media (hover:hover){
  .mini-btn:hover{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--white)
  }
}
.deck-progress{
  height:4px;
  background:#e7e1d4;
  border-radius:4px;
  overflow:hidden;
  margin-top:9px
}
.deck-progress span{
  display:block;
  height:100%;
  border-radius:4px
}
.empty-state{
  border:1px dashed var(--line);
  padding:30px;
  text-align:center;
  border-radius:9px;
  color:var(--muted)
}
.page-wrap{
  padding:56px 0 74px
}
.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:34px
}
.page-heading h1{
  font-size:clamp(40px,4.8vw,64px)
}
.page-heading .eyebrow{
  margin-bottom:14px
}
.page-heading p{
  max-width:390px;
  color:var(--muted);
  font-size:13px;
  margin:12px 0 0
}
.library-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:21px
}
.search-box{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  padding:10px 15px;
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
  max-width:420px
}
.search-box input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  font-size:12px;
  color:var(--ink)
}
.search-icon{
  color:var(--muted)
}
.filter-select{
  border:1px solid var(--line);
  background:transparent;
  border-radius:999px;
  padding:10px 13px;
  font-size:11px;
  color:var(--ink)
}
.library-actions{
  margin-left:auto;
  display:flex;
  gap:8px
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  margin-bottom:34px
}
.overall-progress-panel{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  margin-bottom:32px;
  padding:24px 28px;
  border:1px solid var(--ink);
  border-radius:9px;
  background:var(--ink);
  color:var(--paper)
}
.overall-kicker{
  margin:0 0 7px;
  color:var(--yellow);
  font:10px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase
}
.overall-progress-copy h2{
  margin:0;
  font:clamp(24px,3vw,34px)/1.1 var(--serif)
}
.overall-progress-copy h2 span{
  color:#c9cbd2;
  font-size:.72em
}
.overall-progress-copy>p:not(.overall-kicker){
  margin:7px 0 14px;
  color:#c9cbd2;
  font-size:11px
}
.overall-progress-track,
.subject-track,
.subject-card-track{
  height:7px;
  overflow:hidden;
  border-radius:99px
}
.overall-progress-track{
  background:rgba(255,253,247,.2)
}
.overall-progress-track span,
.subject-track span,
.subject-card-track span{
  display:block;
  height:100%;
  border-radius:inherit
}
@media (prefers-reduced-motion:no-preference){
  .overall-progress-track span,
  .subject-track span,
  .subject-card-track span{
  transition-property:width;
  transition-duration:150ms;
  transition-timing-function:ease-out
  }
}
.overall-progress-track span{
  background:var(--yellow)
}
.overall-progress-number{
  min-width:100px;
  text-align:right;
  font:clamp(48px,7vw,72px)/1 var(--serif);
  color:var(--yellow)
}
.overall-progress-number span{
  font-size:.55em
}
.subject-progress-section{
  margin-bottom:34px
}
.subject-progress-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}
.subject-progress-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,253,247,.58)
}
.subject-card-heading{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:14px
}
.subject-card-heading h3{
  margin:0;
  font:22px/1.1 var(--serif)
}
.subject-card-heading p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:10px
}
.subject-percent{
  color:#a78618;
  font:25px/1 var(--serif)
}
.subject-course-count{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:16px 0 8px
}
.subject-course-count strong{
  font:22px/1 var(--serif)
}
.subject-course-count span,
.subject-card-detail{
  color:var(--muted);
  font-size:10px
}
.subject-track{
  background:#e8e1d4
}
.subject-track span{
  background:var(--coral)
}
.subject-card-detail{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 6px
}
.subject-card-track{
  height:4px;
  background:#e8e1d4
}
.subject-card-track span{
  background:var(--mint)
}
.stat-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,253,247,.55);
  padding:18px
}
.stat-label{
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--muted)
}
.stat-value{
  font:36px/1 var(--serif);
  margin:13px 0 5px
}
.stat-foot{
  font-size:10px;
  color:var(--muted)
}
.progress-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px
}
.panel{
  border:1px solid var(--line);
  border-radius:9px;
  padding:24px;
  background:rgba(255,253,247,.58)
}
.panel h2{
  font:25px var(--serif);
  margin:0 0 17px
}
.mastery-row{
  display:grid;
  grid-template-columns:115px 1fr 34px;
  align-items:center;
  gap:10px;
  margin:15px 0;
  font-size:11px
}
.mastery-label{
  color:var(--ink-soft)
}
.bar-track{
  height:8px;
  background:#e8e1d4;
  border-radius:8px;
  overflow:hidden
}
.bar-fill{
  height:100%;
  background:var(--mint);
  border-radius:8px
}
.mastery-row:nth-of-type(3) .bar-fill{
  background:var(--yellow)
}
.mastery-row:nth-of-type(4) .bar-fill{
  background:var(--coral)
}
.mastery-count{
  text-align:right;
  font:10px var(--mono);
  color:var(--muted)
}
.note-panel{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden
}
.note-panel h2{
  color:var(--paper);
  position:relative;
  z-index:1
}
.note-panel p{
  font-size:12px;
  color:#d1d2d6;
  max-width:310px;
  position:relative;
  z-index:1
}
.note-panel .button-secondary{
  position:relative;
  z-index:1;
  margin-top:8px
}
.session-list{
  margin-top:32px
}
.session-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:12px
}
.session-item small{
  color:var(--muted)
}
.study-wrap{
  max-width:780px;
  margin:0 auto;
  padding:38px 0 72px
}
.study-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:25px
}
.back-button{
  border:0;
  background:transparent;
  font-size:12px;
  color:var(--ink-soft);
  cursor:pointer;
  padding:8px 0
}
.study-title{
  font:22px var(--serif);
  margin:0
}
.study-counter{
  font:10px var(--mono);
  color:var(--muted)
}
.study-progress{
  height:3px;
  background:#e4ddcf;
  margin:0 0 26px
}
.study-progress span{
  height:100%;
  display:block;
  background:var(--coral)
}
@media (prefers-reduced-motion:no-preference){
  .study-progress span{transition:width 150ms ease-out}
}
.study-mode-tabs{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-bottom:17px;
  overflow-x:auto;
  scrollbar-width:none
}
.study-mode-tabs::-webkit-scrollbar{display:none}
.mode-tab{
  flex:0 0 auto;
  border:0;
  background:transparent;
  padding:8px 13px;
  border-radius:999px;
  font-size:11px;
  color:var(--muted);
  cursor:pointer
}
.mode-tab.selected{
  background:var(--ink);
  color:var(--paper)
}
.flashcard{
  width:100%;
  min-height:360px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:7px 8px 0 var(--ink);
  padding:33px 38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition-property:background-color;
  transition-duration:150ms;
  transition-timing-function:ease-out
}
@media (hover:hover){
  .answer-option:hover{border-color:var(--blue)}
}
@media (prefers-reduced-motion:no-preference){
  .flashcard{transition-property:transform,background-color}
  @media (hover:hover){.flashcard:hover{transform:translateY(-2px)}}
}
.flashcard.flipped{
  background:#fffcf4
}
.flashcard .card-side-label,.question-panel .card-side-label{
  font:10px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.flashcard .card-main-text{
  font:clamp(28px,5vw,43px)/1.14 var(--serif);
  max-width:650px;
  align-self:center;
  margin:auto 0;
  text-align:center
}
.flashcard .card-hint{
  font-size:11px;
  color:var(--muted);
  text-align:center
}
.study-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:24px 0
}
.study-controls .button-primary,.study-controls .button-secondary{
  min-width:160px
}
.answer-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0
}
.answer-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  text-align:left;
  padding:14px 15px;
  font-size:13px;
  line-height:1.4;
  color:var(--ink);
  cursor:pointer;
  min-height:58px
}
.answer-option:disabled{
  cursor:default
}
.option-key{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:6px;
  font:10px var(--mono);
  color:var(--muted)
}
.answer-option.correct .option-key{border-color:#6fa37d;color:#39704b}
.answer-option.incorrect .option-key{border-color:#d9775c;color:#a34b32}
.question-panel{
  background:var(--white);
  padding:28px
}
.question-text{
  font:clamp(24px,4vw,30px)/1.18 var(--serif);
  text-align:center;
  margin:27px auto;
  max-width:640px
}
.proposed-answer{
  display:grid;
  gap:8px;
  margin:0 auto 6px;
  max-width:560px;
  padding:16px 18px;
  border:1px dashed var(--line);
  border-radius:10px;
  text-align:center;
  font-size:15px;
  line-height:1.45
}
.answer-result{
  margin-top:6px
}
.expected-answer{
  display:grid;
  gap:4px;
  max-width:560px;
  margin:0 auto;
  text-align:center;
  font-size:14px;
  line-height:1.45
}
.expected-answer span{
  font:9px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.answer-result .study-controls{
  margin:18px 0 0
}
.study-notice{
  margin:0 auto 14px;
  max-width:560px;
  padding:10px 14px;
  border-radius:8px;
  background:var(--paper-deep);
  font-size:12px;
  text-align:center;
  color:var(--ink-soft)
}
.answer-option.correct{
  border-color:#6fa37d;
  background:#eef6ee
}
.answer-option.incorrect{
  border-color:#d9775c;
  background:#fff1ec
}
.answer-input-row{
  display:flex;
  gap:9px;
  margin:18px 0
}
.answer-input-row input{
  flex:1;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:8px;
  padding:13px 14px;
  font-size:12px
}
.feedback{
  min-height:24px;
  text-align:center;
  font-size:12px;
  margin:12px 0;
  color:var(--ink-soft)
}
.feedback.good{
  color:#39704b
}
.feedback.bad{
  color:#a34b32
}
.study-hint{
  font-size:10px;
  text-align:center;
  color:var(--muted)
}
.shortcut-hint{
  margin:14px 0 0;
  text-align:center;
  font:10px var(--mono);
  color:var(--muted)
}

.account-nudge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  flex-wrap:wrap;
  margin-bottom:34px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-left:4px solid var(--coral);
  border-radius:9px;
  background:var(--white)
}
.account-nudge p{
  flex:1 1 320px;
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft)
}
.account-nudge strong{
  color:var(--ink)
}
.account-nudge-actions{
  display:flex;
  align-items:center;
  gap:14px
}
.account-nudge .text-button{
  padding:0
}
.complete-card{
  text-align:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:48px 25px;
  box-shadow:7px 8px 0 var(--ink)
}
.complete-mark{
  font-size:38px;
  margin-bottom:12px
}
.complete-card h2{
  font:38px var(--serif);
  margin:0 0 7px
}
.complete-card p{
  font-size:12px;
  color:var(--muted);
  margin:0 0 23px
}
.complete-stats{
  display:flex;
  justify-content:center;
  gap:34px;
  margin-bottom:27px
}
.complete-stats strong{
  font:27px var(--serif);
  display:block
}
.complete-stats span{
  font:9px var(--mono);
  color:var(--muted);
  text-transform:uppercase
}
.site-footer{
  border-top:1px solid var(--line);
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:italic 11px var(--serif);
  color:var(--muted)
}
.site-footer>div{
  display:flex;
  gap:17px
}
.site-footer a,.site-footer button{
  color:var(--muted);
  font:10px var(--sans);
  text-decoration:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:0
}
@media (hover:hover){
  .site-footer a:hover,.site-footer button:hover{color:var(--ink)}
}
.modal-backdrop{
  position:fixed;
  z-index:20;
  inset:0;
  background:rgba(22,29,47,.46);
  display:grid;
  place-items:center;
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain
}
.modal{
  width:min(600px,100%);
  background:var(--paper);
  border-radius:11px;
  border:1px solid var(--line);
  box-shadow:0 22px 80px rgba(20,29,50,.25);
  padding:26px;
  max-height:calc(100vh - 40px);
  overflow:auto;
  overscroll-behavior:contain
}
.modal.modal-wide{
  width:min(760px,100%)
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:20px;
  gap:20px
}
.modal-header h2{
  font:31px var(--serif);
  margin:0
}
.modal-header p{
  font-size:11px;
  color:var(--muted);
  margin:4px 0 0
}
.icon-close{
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  font-size:17px;
  flex:none
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px
}
.field.full{
  grid-column:1/-1
}
.field label{
  font:10px var(--mono);
  text-transform:uppercase;
  color:var(--ink-soft);
  letter-spacing:.4px
}
.field input,.field textarea,.field select{
  width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--white);
  padding:11px 12px;
  font-size:12px;
  color:var(--ink)
}
.field textarea{
  min-height:93px;
  resize:vertical
}
.modal-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:19px;
  padding-top:16px;
  border-top:1px solid var(--line)
}
.modal-actions .right-actions{
  display:flex;
  gap:8px
}
.card-editor-head{
  display:grid;
  gap:4px;
  margin:24px 0 12px
}
.card-editor-head h3{
  font:18px var(--serif);
  margin:0
}
.card-editor-head p{
  margin:0;
  font-size:11px;
  color:var(--muted)
}
#cardEditor{
  display:grid;
  gap:10px
}
.editor-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  padding:8px 12px 12px
}
.editor-card.dragging{
  opacity:.5;
  border-style:dashed
}
.editor-card.invalid{
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(232,117,84,.18)
}
.editor-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  margin-bottom:6px
}
.drag-handle{
  width:24px;
  height:32px;
  border:0;
  background:none;
  color:var(--muted);
  cursor:grab;
  font-size:14px
}
.editor-card-number{
  font:11px var(--mono);
  color:var(--muted)
}
.editor-card-tools{
  display:flex;
  gap:4px;
  margin-left:auto
}
.icon-button{
  width:32px;
  height:32px;
  border:1px solid transparent;
  border-radius:7px;
  background:none;
  color:var(--ink-soft);
  font-size:14px;
  cursor:pointer
}
.icon-button.danger{
  color:#9a4b32
}
@media (hover:hover){
  .icon-button:hover{border-color:var(--line);background:var(--paper)}
  .icon-button.danger:hover{background:#f5dfd6}
}
.editor-card-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.editor-field{
  display:grid;
  gap:4px
}
.editor-field > span{
  font:9px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.editor-field textarea{
  width:100%;
  min-width:0;
  border:0;
  border-bottom:1.5px solid var(--line);
  background:transparent;
  padding:6px 2px;
  font-size:13px;
  line-height:1.45;
  color:var(--ink);
  resize:vertical
}
.editor-field textarea:focus{
  outline:none;
  border-bottom-color:var(--ink)
}
.add-card-button{
  width:100%;
  min-height:48px;
  margin-top:10px;
  border:1.5px dashed var(--line);
  border-radius:10px;
  background:none;
  color:var(--ink-soft);
  font-size:13px;
  cursor:pointer
}
@media (hover:hover){
  .add-card-button:hover{border-color:var(--ink);color:var(--ink)}
}
.editor-hint{
  margin:8px 0 0;
  text-align:center;
  font:10px var(--mono);
  color:var(--muted)
}
.editor-hint kbd,
.profile-list{
  display:grid;
  gap:8px;
  margin-top:16px
}
.profile-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:8px;
  padding:12px;
  cursor:pointer;
  text-align:left
}
.profile-option.current{
  border-color:var(--ink);
  background:#fbf6e8
}
.profile-option small{
  font:10px var(--mono);
  color:var(--muted)
}
.profile-help{
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:17px;
  font-size:10px;
  line-height:1.6;
  color:var(--muted)
}
.account-form{
  display:grid;
  gap:13px;
  margin-top:18px
}
.account-form .field{
  display:grid;
  gap:6px
}
.account-form input{
  width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--white);
  padding:11px 12px;
  color:var(--ink)
}
.account-form .button-primary{
  justify-content:center
}
.auth-feedback{
  min-height:16px;
  margin:0;
  color:var(--ink-soft);
  font-size:12px
}
.account-email{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:var(--paper-deep);
  font-size:13px
}
.oauth-button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--white);
  padding:11px 12px;
  color:var(--ink);
  font-size:13px;
  cursor:pointer
}
.oauth-button:disabled{
  opacity:.6;
  cursor:wait
}
.oauth-logo{
  font:700 15px var(--serif);
  color:var(--blue)
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 0;
  font:10px var(--mono);
  color:var(--muted)
}
.auth-divider::before,.auth-divider::after{
  content:"";
  flex:1;
  border-top:1px solid var(--line)
}
.auth-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:0 16px
}
.text-button{
  border:0;
  background:none;
  padding:10px 0 0;
  color:var(--blue);
  font-size:12px;
  cursor:pointer
}
.loading-state{
  min-height:55vh;
  display:grid;
  place-items:center;
  color:var(--muted);
  font:italic 22px var(--serif)
}
.toast{
  position:fixed;
  z-index:30;
  bottom:22px;
  left:50%;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  background:var(--ink);
  color:var(--paper);
  padding:10px 16px;
  border-radius:999px;
  font-size:11px;
  box-shadow:var(--shadow);
  transition-property:opacity;
  transition-duration:150ms;
  transition-timing-function:ease-out
}
.toast.show{
  opacity:1;
}
@media (prefers-reduced-motion:no-preference){
  .toast{transition-property:opacity,transform}
  .toast.show{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){
  .toast,.toast.show{transform:translate(-50%,0)}
}
@media(max-width:850px){
  .app-shell{
    padding:0 24px
  }
  .hero{
    gap:25px;
    padding:54px 0
  }
  .steps{
    margin:0 -24px;
    padding-left:24px;
    padding-right:24px
  }
  .deck-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .topbar{
    gap:16px
  }
  .main-nav{
    gap:16px
  }
  .save-indicator{
    display:none
  }
  .stats-grid{
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:620px){
  .app-shell{
    padding:0 18px
  }
  .topbar{
    height:auto;
    min-height:70px;
    flex-wrap:wrap;
    padding:12px 0 0;
    gap:6px
  }
  .brand{
    font-size:21px
  }
  .top-actions{
    margin-left:auto
  }
  .profile-button{
    padding-right:8px
  }
  .profile-button #profileButtonName{
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .main-nav{
    order:3;
    width:100%;
    height:44px;
    justify-content:space-between;
    gap:8px
  }
  .nav-link{
    font-size:11px;
    flex:1
  }
  .hero{
    grid-template-columns:1fr;
    padding:45px 0 55px;
    gap:15px
  }
  .hero h1{
    font-size:53px
  }
  .hero-art{
    min-height:285px;
    grid-row:1
  }
  .art-card{
    height:185px
  }
  .art-card.back-one{
    height:175px
  }
  .art-card.back-two{
    height:180px
  }
  .art-sticker{
    right:5%;
    top:0;
    width:72px;
    height:72px;
    font-size:12px
  }
  .scribble{
    top:calc(50% + 116px)
  }
  .hero-copy{
    margin:17px 0 20px
  }
  .steps{
    margin:0 -18px;
    padding:34px 18px
  }
  .steps h2{
    font-size:30px
  }
  .step-grid{
    grid-template-columns:1fr;
    gap:9px
  }
  .step-card{
    min-height:0;
    display:grid;
    grid-template-columns:38px 1fr;
    column-gap:10px;
    padding:12px
  }
  .step-number{
    grid-row:span 2
  }
  .step-card h3{
    margin:0 0 2px
  }
  .step-card p{
    max-width:none
  }
  .content-section{
    padding:42px 0 50px
  }
  .section-heading h2{
    font-size:27px
  }
  .deck-grid{
    grid-template-columns:1fr
  }
  .deck-card{
    min-height:185px
  }
  .page-wrap{
    padding:38px 0 55px
  }
  .page-heading{
    display:block;
    margin-bottom:24px
  }
  .page-heading h1{
    font-size:44px
  }
  .page-heading>.button-primary{
    margin-top:17px
  }
  .library-toolbar{
    flex-wrap:wrap
  }
  .search-box{
    max-width:none;
    flex-basis:100%
  }
  .library-actions{
    margin-left:0
  }
  .filter-select{
    flex:1
  }
  .stats-grid{
    gap:8px
  }
  .stat-card{
    padding:13px
  }
  .stat-value{
    font-size:30px
  }
  .progress-layout{
    grid-template-columns:1fr
  }
  .subject-progress-grid{
    grid-template-columns:1fr
  }
  .overall-progress-panel{
    gap:12px;
    padding:19px
  }
  .overall-progress-number{
    min-width:72px;
    font-size:48px
  }
  .panel{
    padding:18px
  }
  .study-wrap{
    padding:25px 0 50px
  }
  .study-title{
    font-size:18px
  }
  .flashcard{
    min-height:330px;
    padding:25px 20px
  }
  .study-controls{
    gap:8px
  }
  .study-controls .button-primary,.study-controls .button-secondary{
    min-width:0;
    flex:1;
    padding:13px 9px;
    font-size:11px
  }
  .answer-options{
    grid-template-columns:1fr
  }
  .answer-input-row{
    flex-direction:column
  }
  .site-footer{
    padding:15px 0;
    gap:10px;
    align-items:flex-start;
    flex-direction:column
  }
  .modal{
    padding:20px
  }
  .form-grid{
    grid-template-columns:1fr
  }
  .editor-card{
    grid-template-columns:1fr 1fr 30px
  }
  .complete-stats{
    gap:17px
  }
}

/* Adaptation complémentaire : petits téléphones, tablettes et grands écrans. */
html,
body{
  width:100%;
  min-width:320px;
  overflow-x:hidden
}
body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
.app-shell,
#app,
.page-wrap,
.content-section,
.study-wrap{
  min-width:0
}
.hero-copy,
.page-heading p,
.deck-card h3,
.deck-card .deck-desc,
.study-title,
.flashcard .card-main-text,
.panel,
.modal,
.step-card p{
  overflow-wrap:anywhere
}
img,
svg,
video,
canvas{
  max-width:100%;
  height:auto
}
input,
textarea,
select,
button{
  max-width:100%
}
.hero > *,
.progress-layout > *,
.overall-progress-panel > *,
.section-heading > *,
.page-heading > *{
  min-width:0
}

@media(min-width:1441px){
  .steps{
    margin-left:calc((1440px - 100vw) / 2 - 5.2vw);
    margin-right:calc((1440px - 100vw) / 2 - 5.2vw);
    padding-left:calc((100vw - 1440px) / 2 + 5.2vw);
    padding-right:calc((100vw - 1440px) / 2 + 5.2vw)
  }
}

@media(max-width:900px){
  .app-shell{padding-inline:clamp(20px,4vw,32px)}
  .hero{gap:clamp(18px,4vw,36px)}
  .steps{margin-inline:calc(-1 * clamp(20px,4vw,32px));padding-inline:clamp(20px,4vw,32px)}
  .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progress-layout{grid-template-columns:1fr 1fr}
  .study-wrap{max-width:720px}
}

@media(max-width:700px){
  .app-shell{padding-inline:20px}
  .topbar{min-height:0;gap:8px 12px;padding-top:12px}
  .main-nav{order:3;flex:0 0 100%;height:46px;gap:clamp(4px,2vw,12px)}
  .nav-link{min-width:0;padding-inline:5px;font-size:clamp(11px,2.8vw,13px)}
  .top-actions{gap:8px}
  .hero{grid-template-columns:minmax(0,1fr);padding-block:36px 45px;gap:8px}
  .hero-art{grid-row:1;min-height:clamp(235px,66vw,310px);margin-bottom:24px}
  .hero h1{font-size:clamp(42px,11vw,58px);letter-spacing:-1.6px}
  .hero-copy{max-width:58ch}
  .button-row{gap:10px}
  .button-primary,.button-secondary{min-height:44px}
  .steps{margin-inline:-20px;padding:34px 20px}
  .steps h2{font-size:clamp(27px,7vw,34px)}
  .step-grid{grid-template-columns:1fr}
  .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .deck-card{padding:15px;min-height:205px}
  .deck-card h3{font-size:clamp(20px,5.5vw,24px)}
  .deck-meta{align-items:flex-start;gap:9px;flex-wrap:wrap}
  .deck-actions{flex-wrap:wrap}
  .mini-btn{min-height:38px}
  .page-heading{align-items:flex-start}
  .library-toolbar{flex-wrap:wrap}
  .search-box{flex:1 1 100%;max-width:none;min-height:44px}
  .filter-select{min-height:44px;min-width:0;flex:1}
  .library-actions{margin-left:0;flex-wrap:wrap}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progress-layout{grid-template-columns:1fr}
  .overall-progress-panel{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px}
  .overall-progress-number{min-width:0;font-size:clamp(42px,12vw,58px)}
  .subject-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-wrap{padding:22px 0 42px}
  .study-top{gap:12px;align-items:flex-start}
  .study-title{font-size:clamp(18px,5vw,22px)}
  .study-counter{white-space:nowrap}
  .flashcard{min-height:clamp(280px,72vw,380px);padding:clamp(20px,5vw,30px)}
  .flashcard .card-main-text{font-size:clamp(27px,7vw,40px)}
  .answer-options{grid-template-columns:1fr}
  .answer-option{min-height:58px}
  .answer-input-row input{min-width:0;min-height:46px}
  .site-footer{gap:12px;flex-wrap:wrap}
  .modal-backdrop{padding:12px;align-items:end}
  .modal{width:100%;max-height:min(88dvh,760px);padding:20px;border-radius:14px 14px 8px 8px}
  .modal.modal-wide{width:100%}
  .modal-header h2{font-size:clamp(25px,7vw,31px)}
  .form-grid{grid-template-columns:1fr}
  .editor-card-fields{grid-template-columns:1fr}
  .icon-button{width:40px;height:40px}
  .study-mode-tabs{justify-content:flex-start;margin-inline:-20px;padding-inline:20px}
  .question-panel{padding:20px}
  .modal-actions{align-items:stretch;flex-wrap:wrap}
  .modal-actions .right-actions{flex-wrap:wrap;justify-content:flex-end}
  .complete-stats{gap:clamp(12px,5vw,28px);flex-wrap:wrap}
}

@media(max-width:440px){
  .app-shell{padding-inline:16px}
  .brand{font-size:20px}
  .brand-mark{transform:scale(.92);transform-origin:left center}
  .top-actions{gap:5px}
  .profile-button{gap:6px;padding:4px 7px 4px 4px;font-size:11px}
  .profile-button #profileButtonName{max-width:76px}
  .avatar{width:28px;height:28px}
  .main-nav{height:44px}
  .nav-link{font-size:10px}
  .hero-art{min-height:235px}
  .art-card{width:min(290px,77%);height:168px;padding:18px}
  .art-card.back-one{height:158px}
  .art-card.back-two{height:164px}
  .art-question{font-size:clamp(23px,7vw,28px)}
  .art-sticker{width:62px;height:62px;font-size:11px}
  .scribble{top:calc(50% + 106px)}
  .button-row{align-items:stretch}
  .button-row > a,.button-row > button{flex:1 1 auto}
  .section-heading{align-items:flex-start;flex-wrap:wrap}
  .section-heading h2{font-size:25px}
  .section-heading > .button-primary{width:100%}
  .deck-grid{grid-template-columns:1fr}
  .deck-card{min-height:180px}
  .deck-card h3{font-size:24px}
  .page-wrap{padding-top:30px}
  .page-heading h1{font-size:clamp(36px,11vw,45px)}
  .page-heading>.button-primary{width:100%}
  .library-actions{width:100%}
  .library-actions > *{flex:1}
  .stats-grid{gap:8px}
  .stat-card{padding:12px}
  .stat-value{font-size:clamp(26px,8vw,32px)}
  .subject-progress-grid{grid-template-columns:1fr}
  .overall-progress-panel{grid-template-columns:minmax(0,1fr) auto;padding:17px}
  .overall-progress-number{font-size:42px}
  .study-top{flex-wrap:wrap}
  .study-top > div{text-align:right}
  .study-mode-tabs{flex-wrap:nowrap}
  .mode-tab{min-height:40px;padding-inline:10px}
  .study-controls{flex-wrap:wrap}
  .study-controls > button{min-height:46px}
  .answer-options{grid-template-columns:1fr}
  .complete-card{padding:34px 18px}
  .complete-card h2{font-size:32px}
  .site-footer>div{gap:14px;flex-wrap:wrap}
  .modal-backdrop{padding:0}
  .modal,.modal.modal-wide{max-height:92dvh;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
  .modal-actions .right-actions{width:100%}
  .modal-actions .right-actions > button{flex:1}
  .editor-card{grid-template-columns:minmax(0,1fr) 36px;gap:8px}
  .editor-card textarea:nth-of-type(2){grid-column:1}
  .editor-card .remove-card{grid-column:2;grid-row:1}
  .toast{width:max-content;max-width:calc(100vw - 32px);text-align:center;bottom:calc(16px + env(safe-area-inset-bottom));white-space:normal}
}

@media(max-width:350px){
  .app-shell{padding-inline:13px}
  .profile-button #profileButtonName{max-width:62px}
  .steps{margin-inline:-13px;padding-inline:13px}
  .stat-card{padding:10px}
  .stat-label{font-size:9px}
  .overall-progress-copy h2{font-size:23px}
  .overall-progress-number{font-size:36px}
  .flashcard{min-height:260px;padding:18px}
  .study-controls .button-primary,.study-controls .button-secondary{font-size:10px}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:900px){
  .hero{grid-template-columns:1fr 1fr;padding-block:24px;min-height:0}
  .hero-art{grid-row:auto;min-height:230px}
  .study-wrap{padding-top:12px}
  .flashcard{min-height:230px}
  .modal{max-height:94dvh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Texte enrichi des cartes */
.tc-rouge{color:#b3261e}
.tc-orange{color:#a85400}
.tc-vert{color:#2e6b34}
.tc-sapin{color:#0f6b5c}
.tc-bleu{color:#2849b8}
.tc-violet{color:#6b35b0}
.tc-rose{color:#b0245e}
.tc-gris{color:#5b6170}
mark{
  background:rgba(245,214,92,.6);
  color:inherit;
  border-radius:2px;
  padding:0 .08em
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

/* Apparence propre à chaque fiche : couleur, police et taille */
.deck-themed .card-main-text,
.deck-themed .question-text,
.deck-themed .answer-option > span:last-child,
.deck-themed .proposed-answer > div,
.deck-themed .expected-answer{
  font-family:var(--card-font)
}
.deck-themed .flashcard{
  box-shadow:7px 8px 0 var(--deck)
}
.deck-themed .question-panel{
  border-top:4px solid var(--deck)
}
.deck-themed .flashcard .card-main-text{
  font-size:calc(clamp(28px,5vw,43px) * var(--card-scale,1))
}
.deck-themed .question-text{
  font-size:calc(clamp(24px,4vw,30px) * var(--card-scale,1))
}
.deck-themed .answer-option{
  font-size:calc(13px * var(--card-scale,1))
}
.deck-card[style*="--deck"]{
  border-top:3px solid var(--deck)
}
.deck-progress span{
  background:var(--deck,var(--coral))
}

/* Éditeur : zones de texte enrichi et barre de mise en forme */
.rich-input{
  min-height:44px;
  border-bottom:1.5px solid var(--line);
  padding:6px 2px;
  font-size:13px;
  line-height:1.45;
  color:var(--ink);
  overflow-wrap:anywhere;
  cursor:text
}
.rich-input:focus{
  outline:none;
  border-bottom-color:var(--ink)
}
.rich-input:empty::before{
  content:attr(data-placeholder);
  color:var(--muted)
}
.format-toolbar{
  position:sticky;
  top:-1px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin:0 0 10px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper)
}
.format-button{
  min-width:36px;
  height:36px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:7px;
  background:none;
  color:var(--ink);
  font-size:13px;
  cursor:pointer
}
.format-clear{
  font-size:11px;
  color:var(--ink-soft)
}
@media (hover:hover){
  .format-button:hover{border-color:var(--line);background:var(--white)}
}
.format-separator{
  width:1px;
  height:22px;
  margin:0 4px;
  background:var(--line)
}
.format-colors{
  display:flex;
  gap:4px
}
.color-swatch{
  width:24px;
  height:24px;
  border:2px solid var(--white);
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px var(--line);
  cursor:pointer
}
.appearance{
  margin:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start
}
.appearance legend{
  padding:0 6px;
  font:10px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.appearance-grid{
  display:grid;
  gap:14px
}
.appearance-row{
  display:grid;
  gap:6px
}
.appearance .appearance-label{
  font:10px var(--mono);
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ink-soft)
}
.deck-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.deck-swatch{
  position:relative;
  cursor:pointer
}
.deck-swatch input{
  position:absolute;
  opacity:0
}
.deck-swatch span[aria-hidden]{
  display:block;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--swatch);
  border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--line)
}
.deck-swatch input:checked + span{
  box-shadow:0 0 0 2px var(--ink)
}
.deck-swatch input:focus-visible + span{
  outline:2px solid var(--blue);
  outline-offset:3px
}
.segmented{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  background:var(--white);
  width:max-content
}
.segmented label{
  position:relative;
  cursor:pointer
}
.segmented input{
  position:absolute;
  opacity:0
}
.segmented span{
  display:block;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  color:var(--ink-soft)
}
.segmented input:checked + span{
  background:var(--ink);
  color:var(--paper)
}
.segmented input:focus-visible + span{
  outline:2px solid var(--blue);
  outline-offset:1px
}
.appearance-preview{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:150px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  box-shadow:5px 6px 0 var(--deck)
}
.appearance-preview .card-side-label{
  font:9px var(--mono);
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.appearance-preview .card-main-text{
  font-size:calc(22px * var(--card-scale,1));
  line-height:1.2;
  margin:auto 0;
  text-align:center
}
@media(max-width:700px){
  .appearance{grid-template-columns:1fr}
  .format-toolbar{gap:2px}
  .format-button{min-width:40px;height:40px}
  .color-swatch{width:28px;height:28px}
}

/* Images des cartes */
.field-image{
  margin-top:8px
}
.image-add{
  min-height:32px;
  padding:0 10px;
  border:1px dashed var(--line);
  border-radius:7px;
  background:none;
  color:var(--ink-soft);
  font-size:11px;
  cursor:pointer
}
@media (hover:hover){
  .image-add:hover{border-color:var(--ink);color:var(--ink)}
}
.editor-image-wrap{
  position:relative;
  display:inline-block
}
.editor-image{
  display:block;
  max-width:100%;
  max-height:120px;
  border:1px solid var(--line);
  border-radius:8px;
  object-fit:contain;
  background:var(--paper)
}
.image-remove{
  position:absolute;
  top:-10px;
  right:-10px;
  width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:#9a4b32;
  font-size:14px;
  cursor:pointer
}
.card-image{
  display:block;
  max-width:100%;
  max-height:min(240px,36vh);
  margin:0 auto;
  border-radius:8px;
  object-fit:contain
}
.flashcard{
  gap:16px
}
.flashcard .card-image{
  margin-top:auto
}
.flashcard .card-image + .card-main-text{
  margin-top:16px
}
.question-panel > .card-image{
  margin-top:22px
}
.question-panel > .card-image + .question-text{
  margin-top:16px
}
.option-image{
  display:block;
  max-width:100%;
  max-height:96px;
  margin-bottom:6px;
  border-radius:6px;
  object-fit:contain
}
.expected-answer .option-image,.proposed-answer .option-image{
  margin:0 auto 6px
}
img[data-image-ref]:not([src]){
  min-width:120px;
  min-height:80px;
  background:var(--paper-deep);
  border-radius:8px
}
img.image-missing{
  display:none
}

/* Diagrammes : schéma et repères */
.diagram{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto
}
.diagram-image{
  display:block;
  max-width:100%;
  max-height:min(420px,52vh);
  border-radius:8px;
  user-select:none
}
.diagram-pin{
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid var(--white);
  border-radius:50%;
  background:var(--ink-soft);
  box-shadow:0 0 0 1px rgba(32,41,68,.35);
  transform:translate(-50%,-50%);
  opacity:.55
}
.diagram-pin.active{
  width:22px;
  height:22px;
  border-width:3px;
  background:var(--deck,var(--coral));
  box-shadow:0 0 0 4px rgba(232,117,84,.28);
  opacity:1
}
.diagram-pin.editable{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  background:var(--ink);
  color:var(--white);
  font:11px var(--mono);
  opacity:1;
  cursor:grab;
  touch-action:none
}
.diagram.editing{
  cursor:crosshair
}
.diagram.placing{
  cursor:crosshair;
  outline:2px dashed var(--line);
  outline-offset:4px;
  border-radius:8px
}
.diagram-guess{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:3px solid currentColor
}
.diagram-guess.good{color:#39704b}
.diagram-guess.bad{color:#a34b32}
/* Après une erreur de placement, le bon repère est entouré en vert. */
.diagram .diagram-pin.active:has(~ .diagram-guess.bad){
  box-shadow:0 0 0 10px rgba(57,112,75,.25)
}
.flashcard .diagram{
  margin-top:auto
}
.flashcard .diagram + .card-main-text{
  margin-top:16px
}
.question-panel > .diagram{
  margin-top:22px
}
.question-panel > .diagram + .question-text{
  margin-top:16px
}
.placement-area{
  margin:18px 0 6px
}
.diagram-editor{
  margin-top:28px
}
.pin-list{
  display:grid;
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none
}
.pin-list li{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 32px;
  align-items:center;
  gap:10px
}
.pin-number{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  font:11px var(--mono)
}
.pin-label{
  width:100%;
  min-width:0;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  padding:8px 10px;
  font-size:13px;
  color:var(--ink)
}
.diagram-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}
@media(max-width:700px){
  .diagram-pin.editable{width:32px;height:32px}
  .pin-list li{grid-template-columns:32px minmax(0,1fr) 40px}
}

/* Bruitages : bouton son pendant la révision et préférences */
.study-top-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto
}
.sound-toggle{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--ink-soft);
  cursor:pointer
}
.sound-toggle[aria-pressed="false"]{
  color:var(--muted);
  background:transparent
}
@media (hover:hover){
  .sound-toggle:hover{border-color:var(--ink);color:var(--ink)}
}
.preferences-form{
  display:grid;
  gap:4px;
  margin-top:12px
}
.switch-row,.range-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  cursor:pointer
}
.switch-row span,.range-row span{
  display:grid;
  gap:3px;
  font-size:13px
}
.switch-row small{
  font-size:11px;
  color:var(--muted)
}
.switch-row input{
  width:20px;
  height:20px;
  accent-color:var(--ink)
}
.range-row input{
  width:min(220px,50%);
  accent-color:var(--ink)
}
@media(max-width:700px){
  .sound-toggle{width:40px;height:40px}
}

/* Examens */
.exam-form{
  display:grid;
  gap:18px;
  margin-top:16px
}
.exam-form fieldset{
  margin:0;
  padding:0;
  border:0
}
.exam-form legend{
  margin-bottom:8px;
  font:10px var(--mono);
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ink-soft)
}
.check-list{
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto
}
.check-list-inline{
  display:flex;
  flex-wrap:wrap;
  max-height:none
}
.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  font-size:13px;
  cursor:pointer
}
.check-row input{
  width:18px;
  height:18px;
  accent-color:var(--ink)
}
.check-row small{
  margin-left:auto;
  font:10px var(--mono);
  color:var(--muted)
}
.exam-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.exam-wrap{
  max-width:820px;
  margin:0 auto;
  padding:30px 0 60px
}
.exam-top{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
  padding:12px 0;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.exam-status{
  display:flex;
  align-items:center;
  gap:10px;
  font:11px var(--mono);
  color:var(--ink-soft)
}
.exam-clock{
  min-width:64px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font:11px var(--mono);
  text-align:center;
  color:var(--ink)
}
.exam-clock.limited{
  border-color:var(--coral)
}
.exam-questions{
  display:grid;
  gap:16px
}
.exam-question{
  padding:22px 24px;
  border:1px solid var(--line);
  border-left:4px solid var(--deck,var(--ink));
  border-radius:10px;
  background:var(--white)
}
.exam-question-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  font:10px var(--mono);
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--muted)
}
.exam-number{
  color:var(--ink)
}
.exam-prompt{
  margin:6px 0 16px;
  font:calc(22px * var(--card-scale,1))/1.25 var(--card-font,var(--serif))
}
.exam-question > .card-image,.exam-question > .diagram{
  margin:0 0 14px
}
.exam-text{
  width:100%;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  padding:10px 12px;
  font-size:14px;
  color:var(--ink)
}
.exam-options{
  display:grid;
  gap:8px
}
.exam-options-inline{
  grid-template-columns:1fr 1fr;
  margin-top:12px
}
.exam-option{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
  line-height:1.4;
  cursor:pointer
}
.exam-option input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  accent-color:var(--ink)
}
.exam-option:has(input:checked){
  border-color:var(--ink);
  background:var(--paper)
}
.exam-instruction{
  margin:0 0 12px;
  font-size:13px;
  color:var(--ink-soft)
}
.match-rows{
  display:grid;
  gap:10px
}
.match-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:12px
}
.match-question{
  font-size:14px;
  line-height:1.4
}
.match-row select{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  padding:0 10px;
  font-size:13px;
  color:var(--ink)
}
.diagram-guess.neutral{
  color:var(--ink)
}
.exam-submit{
  margin-top:24px;
  text-align:center
}
.exam-confirm{
  padding:18px;
  border:1px solid var(--coral);
  border-radius:10px;
  background:var(--white)
}
.exam-confirm p{
  margin:0 0 12px;
  font-size:13px
}
.exam-confirm .button-row{
  justify-content:center
}
.exam-score{
  font:clamp(56px,10vw,80px)/1 var(--serif);
  margin:6px 0 10px
}
.exam-score span{
  font-size:.4em;
  color:var(--muted)
}
.corrections-title{
  margin:34px 0 12px;
  font:24px var(--serif)
}
.corrections{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.correction{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white)
}
.correction-mark{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:13px
}
.correction.good .correction-mark{background:#eef6ee;color:#39704b}
.correction.bad .correction-mark{background:#fff1ec;color:#a34b32}
.correction-question{
  margin:0 0 6px;
  font:16px/1.35 var(--serif)
}
.correction-answer{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin:2px 0;
  font-size:13px;
  line-height:1.45
}
.correction-answer span{
  min-width:72px;
  font:9px/2 var(--mono);
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted)
}
.exam-history{
  margin:24px 0
}
.exam-history h2{
  margin:0 0 12px;
  font:21px var(--serif)
}
.exam-history-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.exam-history-list li{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  font-size:13px
}
.exam-history-title{
  display:grid;
  gap:2px
}
.exam-history-title small{
  font:10px var(--mono);
  color:var(--muted)
}
.exam-history-bar{
  height:6px;
  border-radius:999px;
  background:#e7e1d4;
  overflow:hidden
}
.exam-history-bar span{
  display:block;
  height:100%;
  background:var(--ink)
}

/* Jeu « Associer » */
.match-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}
.match-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:120px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  font:calc(15px * var(--card-scale,1))/1.3 var(--card-font,var(--serif));
  color:var(--ink);
  text-align:center;
  cursor:pointer;
  overflow-wrap:anywhere
}
.match-tile.selected{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--ink)
}
.match-tile.wrong{
  border-color:#d9775c;
  background:#fff1ec
}
.match-tile.matched{
  visibility:hidden
}
@media (prefers-reduced-motion:no-preference){
  .match-tile{transition:background-color 150ms ease-out,box-shadow 150ms ease-out}
  .match-tile.wrong{animation:match-shake 300ms ease-out}
  @keyframes match-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
}
@media(max-width:700px){
  .exam-top{flex-wrap:wrap}
  .exam-status{margin-left:auto}
  .exam-question{padding:18px}
  .exam-form-row{grid-template-columns:1fr}
  .match-row{grid-template-columns:1fr;gap:6px}
  .exam-history-list li{grid-template-columns:minmax(0,1fr) auto}
  .exam-history-bar{display:none}
  .match-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .match-tile{min-height:96px;padding:8px}
}
@media(max-width:440px){
  .match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =============================================================================
   Direction A — Cahier
   Papier crème, encre bleu nuit, fiches bristol réglées comme un cahier Seyès.
   Grille de 8 px ; bordures d’encre de 1,5 px ; ombres « papier » décalées, sans flou.
   Cette couche vient en dernier et reprend les composants de base.
   ============================================================================= */
:root{
  --paper:#F4EFE3;
  --paper-deep:#ECE5D6;
  --white:#FFFDF7;
  --ink:#202944;
  --ink-soft:#3A425C;
  --muted:#555D75;
  --line:#D8D0BF;
  --rule:#CBD1E8;
  --margin-red:#D0473C;
  --yellow:#F5D65C;
  --mint:#BFD7C1;
  --coral:#E87554;
  --track:#E6E1D3;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Kalam','Segoe Print',cursive;
  --border:1.5px solid var(--ink);
  --radius:6px;
  --shadow-card:4px 4px 0 var(--ink);
  --shadow-lift:6px 6px 0 var(--ink);
  --margin-x:64px
}
/* Papier Seyès des cartes : réglure tous les 32 px et marge rouge à --margin-x du bord.
   Le dégradé est écrit sur chaque carte pour suivre sa propre position de marge. */
.art-card:not(.back-one):not(.back-two),.flashcard,.flashcard.flipped,.question-panel{
  background-color:var(--white);
  background-image:
    linear-gradient(to right, transparent calc(var(--margin-x) - 1px), var(--margin-red) calc(var(--margin-x) - 1px), var(--margin-red) calc(var(--margin-x) + .5px), transparent calc(var(--margin-x) + .5px)),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(203,209,232,.55) 31px 32px)
}
body{
  font-size:16px;
  line-height:1.5
}
.app-shell{
  padding:0 clamp(24px, 8.33vw, 120px)
}

/* En-tête */
.topbar{
  height:72px;
  gap:24px
}
.brand{
  font:500 26px var(--serif);
  letter-spacing:-.4px
}
.brand-mark{display:none}
.brand-dot{color:var(--ink)}
.main-nav{
  gap:8px;
  margin-right:auto;
  height:auto
}
.nav-link{
  height:40px;
  padding:0 14px;
  border-radius:4px;
  font:500 15px var(--sans);
  color:var(--ink-soft)
}
.nav-link.active{
  background:var(--yellow);
  color:var(--ink)
}
.nav-link.active:after{display:none}
.top-actions{gap:24px}
.save-indicator{
  font-size:14px;
  color:var(--muted);
  gap:6px
}
.save-dot{
  width:auto;
  height:auto;
  background:none;
  border-radius:0
}
.save-dot::before{content:"✓"}
.profile-button{
  min-height:44px;
  padding:4px 16px 4px 4px;
  border:var(--border);
  background:transparent;
  font:500 14px var(--sans);
  gap:10px
}
.avatar{
  width:32px;
  height:32px;
  background:var(--mint);
  font:600 13px var(--sans)
}
.focus-quit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 0 0 24px;
  border:0;
  border-left:1px solid var(--line);
  background:none;
  font:500 16px var(--sans);
  color:var(--ink);
  cursor:pointer
}
.focus-quit[hidden]{display:none}
.focus-mode .main-nav,.focus-mode .profile-button,.focus-mode .back-button,.focus-mode .site-footer{display:none}
.focus-mode .topbar{justify-content:flex-start}
.focus-mode .top-actions{margin-left:auto}

/* Boutons */
.button-primary,.button-secondary,.button-quiet,.button-danger{
  min-height:48px;
  padding:0 20px;
  border-radius:var(--radius);
  font:600 15px var(--sans);
  gap:10px
}
.button-primary{
  background:var(--ink);
  color:var(--paper)
}
@media (hover:hover){
  .button-primary:hover{background:#2E3A5E}
  .button-secondary:hover{background:rgba(32,41,68,.05)}
}
@media (prefers-reduced-motion:no-preference){
  .button-primary:hover{transform:none}
}
.button-secondary{
  background:transparent;
  border:var(--border);
  color:var(--ink)
}
.button-quiet{
  min-height:44px;
  padding:0 12px;
  font-weight:500
}
.button-danger{
  background:transparent;
  border:1.5px solid #B3261E;
  color:#B3261E
}
.link-button,.text-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  font:500 15px var(--sans);
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  cursor:pointer
}
.text-button{
  min-height:36px;
  font-size:14px;
  color:var(--ink-soft)
}
.mini-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font:500 14px var(--sans);
  color:var(--ink)
}
.mini-btn-strong{border:var(--border)}
@media (hover:hover){
  .mini-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
}
.icon{flex:0 0 auto}

/* Accueil : en-tête éditorial */
.hero{
  grid-template-columns:minmax(0,588fr) minmax(0,486fr);
  column-gap:clamp(32px, 7vw, 102px);
  padding:96px 0;
  min-height:0
}
.eyebrow{
  font:italic 400 20px/28px var(--serif);
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
  margin:0 0 16px
}
.hero h1,.page-heading h1{
  font:400 clamp(40px, 5vw, 72px)/1.06 var(--serif);
  letter-spacing:-1.5px
}
.hero h1 em,.page-heading h1 em{
  font-style:normal;
  color:inherit
}
.hero-copy{
  font-size:18px;
  line-height:30px;
  color:var(--ink-soft);
  max-width:480px;
  margin:24px 0 32px
}
.button-row{gap:24px}
.microcopy{
  display:flex;
  flex-wrap:wrap;
  row-gap:4px;
  margin:24px 0 0;
  font:400 14px/20px var(--sans);
  color:var(--muted)
}
.microcopy span + span::before{
  content:"";
  display:inline-block;
  width:1px;
  height:14px;
  margin:0 12px;
  background:var(--line);
  vertical-align:-2px
}

/* Accueil : illustration */
.hero-art{min-height:400px}
.art-card{
  width:min(400px, 86%);
  height:224px;
  padding:16px 24px 16px 56px;
  border:var(--border);
  border-radius:var(--radius);
  --margin-x:40px;
  box-shadow:var(--shadow-lift);
  transform:none;
  justify-content:flex-start;
  gap:16px
}
.art-card.back-one{
  width:min(400px, 86%);
  height:224px;
  background:var(--yellow);
  box-shadow:none;
  transform:rotate(3deg) translate(24px,-24px)
}
.art-card.back-two{
  width:min(400px, 86%);
  height:224px;
  background:var(--mint);
  box-shadow:none;
  transform:rotate(-4deg) translate(-16px,32px)
}
.art-head{
  display:flex;
  align-items:center;
  gap:8px
}
.card-tag{
  border:0;
  border-radius:3px;
  padding:2px 6px;
  background:var(--yellow);
  font:500 12px var(--sans);
  text-transform:none;
  letter-spacing:0
}
.art-subject{
  font:400 12px var(--sans);
  color:var(--muted)
}
.art-question{
  font:400 28px/34px var(--serif);
  letter-spacing:-.2px;
  max-width:290px
}
.art-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  font:400 13px var(--sans);
  color:var(--muted);
  align-self:flex-start
}
.art-sticker{
  width:96px;
  height:96px;
  right:2%;
  top:8px;
  border:var(--border);
  color:var(--ink);
  font:600 13px/1.2 var(--sans);
  transform:rotate(-12deg);
  box-shadow:none
}
.scribble{
  top:calc(50% + 136px);
  left:auto;
  right:22%;
  font:400 20px var(--hand);
  transform:rotate(-4deg)
}
.scribble:after{font:400 20px/1 var(--hand)}

/* Accueil : invitation à créer un compte */
.account-nudge{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px 20px;
  margin:0 0 96px;
  padding:20px 24px;
  border:1.5px dashed var(--ink);
  border-left-width:1.5px;
  border-radius:var(--radius);
  background:var(--white)
}
.nudge-icon{display:grid;color:var(--ink)}
.account-nudge p{
  display:grid;
  gap:2px;
  margin:0
}
.account-nudge strong{font:600 15px/22px var(--sans)}
.account-nudge p span{font-size:14px;line-height:20px;color:var(--muted)}
.account-nudge-actions{gap:24px}
.account-nudge .link-button{min-height:44px}

/* Accueil : trois gestes */
.steps{
  background:none;
  color:var(--ink);
  margin:0;
  padding:0 0 96px
}
.steps-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 16px
}
.steps h2,.section-heading h2{
  font:400 44px/52px var(--serif);
  letter-spacing:-.6px;
  margin:0
}
.steps-intro{
  margin:0;
  font:italic 400 18px var(--serif);
  color:var(--muted)
}
.step-grid{
  gap:24px;
  margin-top:40px
}
.step-card{
  border:0;
  border-top:var(--border);
  border-radius:0;
  padding:24px 0 0;
  min-height:0
}
.step-number,.step-card:nth-child(2) .step-number,.step-card:nth-child(3) .step-number{
  font:italic 400 32px/1 var(--serif);
  color:var(--ink)
}
.step-card h3{
  font:600 17px/24px var(--sans);
  margin:16px 0 8px
}
.step-card p{
  font-size:15px;
  line-height:24px;
  color:var(--muted);
  max-width:320px
}

/* Accueil : « Ton carnet, aujourd’hui » et cartes de fiche */
.content-section{padding:0 0 96px}
.section-heading{
  align-items:flex-end;
  margin-bottom:32px
}
.section-heading p{
  margin:8px 0 0;
  font-size:16px;
  color:var(--muted)
}
.section-actions{gap:12px}
.deck-grid{gap:24px}
.deck-card,.deck-card[style*="--deck"]{
  padding:24px;
  min-height:0;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  box-shadow:var(--shadow-card)
}
.deck-top{align-items:center}
.subject-chip,.status-chip{
  border:0;
  border-radius:3px;
  padding:2px 8px;
  background:var(--chip,var(--paper-deep));
  font:500 12px/20px var(--sans);
  text-transform:none;
  letter-spacing:0;
  color:var(--ink)
}
.deck-count{
  font-size:13px;
  color:var(--muted)
}
.deck-card h3{
  font:400 24px/32px var(--serif);
  letter-spacing:-.2px;
  margin:16px 0 8px
}
.deck-card .deck-desc{
  font-size:14px;
  line-height:22px;
  color:var(--muted)
}
.deck-retention{
  display:flex;
  justify-content:space-between;
  margin-top:auto;
  padding-top:24px;
  font-size:13px;
  color:var(--muted)
}
.deck-retention span:last-child{color:var(--ink)}
.deck-progress{
  height:4px;
  margin-top:8px;
  border-radius:2px;
  background:var(--track)
}
.deck-progress span{
  border-radius:2px;
  background:var(--deck,var(--ink))
}
.deck-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px
}
.deck-actions-right{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px
}
.deck-actions .link-button{
  min-height:36px;
  text-decoration:none;
  font-size:15px
}
.mini-btn.error-chip{
  border-color:#E8B7A6;
  background:#FBEAE7;
  color:#8F2F22
}
.count-badge{
  background:var(--coral);
  color:var(--ink);
  font:600 11px var(--sans)
}
.empty-state{
  border:1.5px dashed var(--ink);
  border-radius:var(--radius);
  background:var(--white);
  padding:40px 24px;
  font-size:16px
}

/* Pages « Mes fiches » et « Ma progression » */
.page-wrap{padding:72px 0 96px}
.page-heading{margin-bottom:40px}
.page-heading p{
  font-size:18px;
  line-height:30px;
  color:var(--ink-soft)
}
.search-box,.filter-select{
  min-height:48px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white)
}
.search-box:focus-within,.filter-select:focus{border-color:var(--ink)}
.panel,.stat-card,.subject-progress-card{
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  box-shadow:none
}
.panel h2,.exam-history h2{font:400 26px/32px var(--serif)}
.stat-label,.overall-kicker{
  font:500 13px var(--sans);
  text-transform:none;
  letter-spacing:0;
  color:var(--muted)
}
.stat-value,.overall-progress-number,.subject-percent{font-family:var(--serif)}
.overall-progress-panel,.note-panel{
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card)
}
.overall-kicker{color:var(--yellow)}
.note-panel .button-secondary{
  border-color:var(--paper);
  color:var(--paper)
}
.subject-track span,.subject-card-track span,.bar-fill,.overall-progress-track span{border-radius:2px}

/* Révision : mode focus, colonne de 792 px */
.study-wrap{
  max-width:792px;
  padding:48px 0 64px
}
.study-top{
  align-items:flex-end;
  gap:24px;
  margin-bottom:24px
}
.study-heading{min-width:0}
.study-title{
  font:400 44px/52px var(--serif);
  letter-spacing:-.6px;
  text-align:left;
  margin:0
}
.study-subtitle{
  margin:4px 0 0;
  font-size:15px;
  color:var(--muted)
}
.study-counter{
  font:400 16px var(--sans);
  color:var(--muted);
  white-space:nowrap
}
.study-counter strong{
  font:400 36px/1 var(--serif);
  color:var(--ink);
  margin-right:2px
}
.study-progress{
  height:6px;
  margin-bottom:24px;
  border-radius:3px;
  background:var(--track)
}
.study-progress span{
  border-radius:3px;
  background:var(--ink)
}
.study-mode-tabs{
  display:flex;
  width:max-content;
  max-width:100%;
  gap:4px;
  margin:0 0 32px;
  padding:4px;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  justify-content:flex-start
}
.mode-tab{
  min-height:40px;
  padding:0 16px;
  border-radius:4px;
  font:500 15px var(--sans);
  color:var(--ink)
}
.mode-tab.selected{
  background:var(--ink);
  color:var(--paper)
}

/* Révision : carte bristol réglée */
.flashcard,.question-panel{
  min-height:380px;
  padding:32px 48px 40px 96px;
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  text-align:left;
  justify-content:flex-start;
  gap:0
}
.deck-themed .flashcard,.deck-themed .question-panel{
  border-top:var(--border);
  box-shadow:6px 6px 0 var(--deck)
}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){.flashcard:hover{transform:translateY(-2px)}}
}
.card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  font:400 14px var(--sans);
  color:var(--muted)
}
.card-count{margin-left:auto;white-space:nowrap}
.card-deck{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-side{display:block}
.flashcard .card-side-label,.question-panel .card-side-label,.card-side-label{
  display:block;
  margin:0 0 8px;
  font:400 14px var(--sans);
  text-transform:none;
  letter-spacing:0;
  color:var(--muted)
}
.flashcard .card-main-text,.deck-themed .flashcard .card-main-text{
  display:block;
  max-width:none;
  margin:0;
  text-align:left;
  font-family:var(--card-font,var(--serif));
  font-size:calc(36px * var(--card-scale,1));
  line-height:1.22;
  letter-spacing:-.3px
}
.card-fold{
  display:block;
  margin:24px 0;
  border-top:1.5px dashed var(--rule)
}
.card-answer-text{
  display:block;
  font-family:var(--answer-font,var(--sans));
  font-size:calc(22px * var(--card-scale,1));
  line-height:1.45
}
.flashcard .card-image,.flashcard .diagram{margin:0 0 16px}
.flashcard .card-image + .card-main-text,.flashcard .diagram + .card-main-text{margin-top:0}
.card-hint{
  margin:24px 0 0;
  text-align:center;
  font:italic 400 18px var(--serif);
  color:var(--muted)
}
.study-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:24px 0 0
}
.study-controls > :only-child{grid-column:1 / -1}
.answer-result .study-controls{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap
}
.study-button{
  min-height:56px;
  font-size:17px;
  gap:12px
}
.study-button-wide{grid-column:1 / -1}
.study-button kbd{
  min-width:22px;
  padding:0 6px;
  border:1px solid currentColor;
  border-radius:4px;
  font:500 12px/20px var(--sans);
  opacity:.75
}
.shortcut-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 24px;
  margin:24px 0 0;
  font-size:14px;
  color:var(--muted)
}
.shortcut-legend span{display:inline-flex;align-items:center;gap:8px}
.shortcut-legend kbd,.shortcut-hint kbd,.editor-hint kbd{
  min-width:24px;
  padding:1px 7px;
  border:1px solid var(--ink-soft);
  border-radius:4px;
  background:var(--white);
  font:600 12px/20px var(--sans);
  color:var(--ink);
  text-align:center
}
.shortcut-hint{font:400 13px var(--sans)}

/* Révision : questions QCM, vrai ou faux, écrites et placement */
.question-text,.deck-themed .question-text{
  max-width:none;
  margin:0 0 24px;
  text-align:left;
  font-family:var(--card-font,var(--serif));
  font-size:calc(30px * var(--card-scale,1));
  line-height:1.25
}
.question-panel > .card-image,.question-panel > .diagram{margin:0 0 16px}
.answer-options{gap:12px;margin:8px 0 0}
.answer-option{
  min-height:56px;
  padding:12px 16px;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  font-size:16px
}
.deck-themed .answer-option{font-size:calc(16px * var(--card-scale,1))}
.deck-themed .answer-option > span:last-child{font-family:var(--answer-font,var(--sans))}
.option-key{
  width:26px;
  height:26px;
  border:1px solid var(--ink-soft);
  border-radius:4px;
  font:600 12px var(--sans);
  color:var(--ink)
}
.answer-option.correct{border-color:#2E6B34;background:#EAF3EA}
.answer-option.incorrect{border-color:#B3261E;background:#FBEAE7}
.proposed-answer{
  margin:0 0 8px;
  max-width:none;
  padding:16px;
  border:1.5px dashed var(--rule);
  border-radius:var(--radius);
  background:var(--white);
  text-align:left;
  font-size:17px
}
.answer-input-row{gap:12px;margin:8px 0 12px}
.answer-input-row input{
  min-height:56px;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  padding:0 16px;
  font-size:16px
}
.study-hint{
  font-size:14px;
  text-align:left;
  color:var(--muted)
}
.feedback{
  margin:16px 0 8px;
  text-align:left;
  font:600 16px var(--sans)
}
.feedback.good{color:#2E6B34}
.feedback.bad{color:#B3261E}
.expected-answer{
  max-width:none;
  margin:0;
  text-align:left;
  font-size:17px
}
.expected-answer span{
  font:400 14px var(--sans);
  text-transform:none;
  letter-spacing:0
}
.study-notice{
  max-width:none;
  margin:0 0 24px;
  border-radius:var(--radius);
  text-align:left;
  font-size:14px
}

/* Fins de session, examens et jeu */
.complete-card{
  padding:48px 40px;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  box-shadow:var(--shadow-lift)
}
.complete-card h2{font:400 44px/52px var(--serif)}
.complete-card p{font-size:16px;color:var(--ink-soft)}
.complete-stats strong{font-family:var(--serif)}
.complete-stats span{
  font:400 13px var(--sans);
  text-transform:none;
  letter-spacing:0
}
.exam-wrap{max-width:792px}
.exam-top{background:var(--paper)}
.exam-question,.exam-question[style]{
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white)
}
.exam-question-head,.exam-form legend,.correction-answer span{
  font:500 13px var(--sans);
  text-transform:none;
  letter-spacing:0
}
.exam-prompt{font-family:var(--card-font,var(--serif))}
.exam-option,.check-row,.exam-text,.match-row select,.pin-label{
  border-radius:var(--radius)
}
.exam-option:has(input:checked){border-color:var(--ink);background:var(--paper)}
.exam-clock{font:500 13px var(--sans);border-radius:999px}
.correction{border-radius:var(--radius);background:var(--white)}
.correction-question{font-family:var(--serif)}
.match-tile{
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white)
}
.match-tile.selected{box-shadow:var(--shadow-card)}

/* Fenêtres, formulaires et éditeur */
.modal{
  border:var(--border);
  border-radius:8px;
  background:var(--paper);
  box-shadow:var(--shadow-lift)
}
.modal-header h2{font:400 32px/40px var(--serif)}
.field label,.appearance .appearance-label,.appearance legend,.editor-field > span{
  font:500 13px var(--sans);
  text-transform:none;
  letter-spacing:0;
  color:var(--ink-soft)
}
.field input,.field textarea,.field select,.account-form input{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white)
}
.field input:focus,.field textarea:focus,.field select:focus,.account-form input:focus{
  outline:none;
  border-color:var(--ink)
}
.card-editor-head h3{font:400 26px/32px var(--serif)}
.editor-card,.format-toolbar,.appearance,.appearance-preview,.add-card-button{border-radius:var(--radius)}
.editor-card{border-color:var(--line);background:var(--white)}
.oauth-button{
  min-height:48px;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--white);
  font:500 15px var(--sans)
}
.toast{border-radius:var(--radius);font-family:var(--sans)}
.site-footer span{font-family:var(--serif)}

h1,h2,.study-title,.complete-card h2{text-wrap:balance}
.nav-link{white-space:nowrap}

/* Tablette */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;row-gap:48px}
  .hero-art{max-width:520px;width:100%;justify-self:center}
  .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Téléphone (375 px) : marges de 24 px */
@media(max-width:700px){
  .app-shell{padding-inline:24px}
  .topbar{height:auto;min-height:64px;gap:0 12px;padding-top:12px}
  .brand{font-size:24px}
  .main-nav{order:3;flex:0 0 100%;justify-content:flex-start;gap:24px;margin:8px 0 0;height:44px}
  .nav-link{flex:0 0 auto;min-width:0;height:44px;padding:0;border-radius:0;font-size:15px}
  .nav-link.active{background:none}
  .nav-link.active:after{display:block;height:2px;background:var(--ink)}
  .save-indicator{display:none}
  .profile-button{padding:0;border:0;min-height:44px}
  #profileButtonName{display:none}
  .avatar{width:36px;height:36px;border:var(--border)}
  .focus-mode .brand{display:none}
  .focus-mode .topbar{padding-bottom:12px}
  .focus-quit{padding:0;border-left:0;font-size:16px}
  .focus-quit span{font-size:0}
  .focus-quit span::after{content:"Quitter";font-size:16px}

  .hero{padding:40px 0 64px;row-gap:48px}
  .hero-art{grid-row:auto;min-height:300px;margin-bottom:0}
  .hero h1,.page-heading h1{font-size:40px;line-height:44px;letter-spacing:-.8px}
  .eyebrow{font-size:18px}
  .hero-copy{font-size:17px;line-height:28px;margin:20px 0 24px}
  .hero .button-row{flex-direction:column;align-items:stretch;gap:8px}
  .hero .button-row .link-button{justify-content:center}
  .microcopy{flex-direction:column;align-items:center;gap:2px;text-align:center}
  .microcopy span + span::before{display:none}
  .nudge-icon{align-self:start;padding-top:2px}
  .art-card,.art-card.back-one,.art-card.back-two{height:176px}
  .art-card{padding:12px 16px 12px 44px;--margin-x:32px;gap:10px}
  .art-question{font-size:22px;line-height:28px}
  .art-sticker{width:76px;height:76px;font-size:11px}
  .scribble{top:calc(50% + 112px);right:16%;font-size:17px}

  .account-nudge{grid-template-columns:auto minmax(0,1fr);margin-bottom:64px;padding:20px}
  .account-nudge-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 24px}
  .steps{padding-bottom:64px}
  .steps h2,.section-heading h2{font-size:32px;line-height:40px}
  .step-grid{grid-template-columns:1fr;gap:0;margin-top:24px}
  .step-card{display:grid;grid-template-columns:40px minmax(0,1fr);padding:24px 0}
  .step-card h3{margin-top:0}
  .content-section{padding-bottom:64px}
  .section-heading{flex-wrap:wrap;align-items:flex-start}
  .section-actions{width:100%}
  .deck-grid{grid-template-columns:1fr;gap:20px}
  .page-wrap{padding:40px 0 64px}

  .study-wrap{padding:24px 0 48px}
  .study-title{font-size:32px;line-height:40px}
  .study-counter strong{font-size:28px}
  .study-mode-tabs{width:auto;margin:0 0 24px;overflow-x:auto}
  .mode-tab{flex:0 0 auto;padding:0 12px;font-size:14px}
  .flashcard,.question-panel{
    min-height:320px;
    padding:20px 20px 28px 52px;
    --margin-x:32px;
    box-shadow:4px 4px 0 var(--ink)
  }
  .deck-themed .flashcard,.deck-themed .question-panel{box-shadow:4px 4px 0 var(--deck)}
  .card-head{margin-bottom:20px;gap:8px}
  .card-deck{display:none}
  .flashcard .card-main-text,.deck-themed .flashcard .card-main-text{font-size:calc(26px * var(--card-scale,1))}
  .card-answer-text{font-size:calc(18px * var(--card-scale,1))}
  .question-text,.deck-themed .question-text{font-size:calc(24px * var(--card-scale,1))}
  .card-hint{font-size:16px}
  .study-controls{gap:12px}
  .study-button{font-size:16px;padding:0 12px}
  .complete-card{padding:32px 20px}
  .complete-card h2{font-size:32px;line-height:40px}
  .modal-header h2{font-size:28px;line-height:36px}
  .modal{border-radius:8px 8px 0 0}
}
/* Les réponses (proposées, attendues) suivent la police des réponses, comme sur la carte. */
.deck-themed .proposed-answer > div,.deck-themed .expected-answer{font-family:var(--answer-font,var(--sans))}