/* ==========================================================================
   Style du SITE (pas des carnets).
   Le site a son propre thème, clair ou sombre. Chaque carnet garde le sien,
   choisi séparément dans ses réglages. Les deux ne se mélangent pas.
   ========================================================================== */

:root{
  --bg:#FBF8F4;         /* beige très clair */
  --surface:#FFFFFF;
  --surface-2:#F4EFE8;
  --ink:#2E2A26;
  --muted:#7E756B;
  --faint:#B0A69B;
  --line:#E6DFD6;
  --accent:#B87A9B;     /* le rose de la marque, pour les liens et boutons */
  --accent-ink:#FFFFFF;
  --danger:#A44B60;
  --radius:14px;
  --shadow:0 1px 3px rgba(46,42,38,.07);
}

[data-theme="dark"]{
  --bg:#16141A;
  --surface:#1F1C24;
  --surface-2:#282430;
  --ink:#EDE8F0;
  --muted:#A79EB2;
  --faint:#6F667C;
  --line:#332E3C;
  --accent:#D3A0BC;
  --accent-ink:#241C22;
  --danger:#E08398;
  --shadow:0 1px 3px rgba(0,0,0,.35);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
}

a{color:var(--accent); text-decoration:none}

/* --- Barre de navigation -------------------------------------------------
   Téléphone : un bouton menu ouvre un panneau latéral.
   Tablette et ordinateur : bandeau horizontal en haut.
   -------------------------------------------------------------------- */

.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  background:var(--surface); border-bottom:1px solid var(--line); padding:12px 16px;
}
.burger{
  width:38px; height:38px; border:1px solid var(--line); border-radius:10px;
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.burger span{display:block; width:16px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink);
}
.burger span::before{top:-5px} .burger span::after{top:5px}

.brand{font-family:Lora,Georgia,serif; font-style:italic; font-size:20px; flex:1; min-width:0;
       overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.brand a{color:var(--ink)}

.navlinks{display:none; gap:4px}
.navlinks a{
  padding:8px 13px; border-radius:9px; font-size:14px; color:var(--muted);
}
.navlinks a:hover{background:var(--surface-2)}
.navlinks a.on{background:var(--surface-2); color:var(--ink); font-weight:500}

.themebtn{
  width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:none;
  cursor:pointer; font-size:15px; line-height:1; flex-shrink:0; color:var(--ink); font-family:inherit;
}

/* Panneau latéral, téléphone seulement */
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:250px; z-index:50; background:var(--surface);
  border-right:1px solid var(--line); padding:18px 14px; transform:translateX(-102%);
  transition:transform .24s cubic-bezier(.32,.72,0,1);
}
.drawer.open{transform:translateX(0)}
.drawer .brand{margin-bottom:20px; font-size:22px}
.drawer a{
  display:block; padding:12px 12px; border-radius:10px; color:var(--ink); font-size:15px; margin-bottom:4px;
}
.drawer a.on{background:var(--surface-2); font-weight:500}
.drawer .sep{height:1px; background:var(--line); margin:14px 4px}

.veil{
  position:fixed; inset:0; z-index:40; background:rgba(20,16,24,.4);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.veil.open{opacity:1; pointer-events:auto}

@media (min-width:820px){
  .burger{display:none}
  .drawer{display:none}
  .navlinks{display:flex}
  .brand{flex:0 0 auto; margin-right:18px}
  .topbar{padding:14px 26px}
  .navlinks{flex:1}
}

/* --- Contenu ------------------------------------------------------------ */

.page{max-width:820px; margin:0 auto; padding:22px 16px 60px}
.page h1{font-size:23px; font-weight:500; margin:0 0 4px}
.page .sub{color:var(--muted); font-size:13.5px; margin:0 0 26px}

.section{margin-bottom:30px}
.section > h2{font-size:13px; font-weight:500; color:var(--accent); margin:0 0 10px 2px}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.card + .card{margin-top:10px}

.rowline{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.rowline:first-child{padding-top:0}
.rowline:last-child{border-bottom:none; padding-bottom:0}
.rowline .k{color:var(--muted); font-size:13.5px}
.rowline .v{font-size:14px; text-align:right; overflow-wrap:anywhere}

.empty{
  text-align:center; color:var(--muted); font-size:14px; line-height:1.7; padding:26px 14px;
}
.empty strong{display:block; color:var(--ink); font-weight:500; margin-bottom:5px}

/* --- Boutons ------------------------------------------------------------ */

.btn{
  display:inline-block; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
  padding:11px 18px; border-radius:10px; border:none; background:var(--accent); color:var(--accent-ink);
}
.btn:disabled{opacity:.5; cursor:default}
.btn.ghost{background:none; border:1px solid var(--line); color:var(--ink); font-weight:400}
.btn.danger{background:none; border:1px solid var(--danger); color:var(--danger)}
.btn.full{display:block; width:100%; text-align:center}
.btn.small{padding:8px 13px; font-size:13px}

/* --- Formulaires -------------------------------------------------------- */

label{display:block; font-size:12.5px; color:var(--muted); margin:0 2px 6px}
input, select{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:12px 13px; margin-bottom:14px;
}
input:focus, select:focus{outline:none; border-color:var(--accent)}
.hint{font-size:11.5px; color:var(--muted); margin:-9px 2px 14px}

.msg{border-radius:10px; padding:11px 13px; font-size:13.5px; margin-bottom:16px; display:none}
.msg.err{display:block; background:rgba(164,75,96,.12); color:var(--danger)}
.msg.good{display:block; background:rgba(90,140,100,.14); color:#4B7A55}
[data-theme="dark"] .msg.good{color:#8FCB9B}

/* --- Boutique ----------------------------------------------------------- */

.shopgrid{display:grid; gap:12px}
@media (min-width:640px){ .shopgrid{grid-template-columns:1fr 1fr} }

.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.product .cover{height:132px; background:var(--surface-2); display:flex; align-items:center;
                justify-content:center; color:var(--faint); font-size:12px}
.product .body{padding:15px; flex:1; display:flex; flex-direction:column}
.product h3{font-size:16px; font-weight:500; margin:0 0 5px}
.product p{font-size:13.5px; color:var(--muted); margin:0 0 14px; flex:1}
.product .foot{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-size:15px; font-weight:500}
.tag{font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:11px; padding:3px 9px}

/* --- Choix de couleur d'un carnet --------------------------------------- */

.swatches{display:flex; gap:9px; margin-top:12px}
.swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
}
.swatch.on{border-color:var(--ink)}
.sw-bleu{background:linear-gradient(135deg,#6E88B0 50%,#C68B6A 50%)}
.sw-girly{background:linear-gradient(135deg,#AE98C6 50%,#DBA6C8 50%)}
.sw-chocolat{background:linear-gradient(135deg,#5E3D28 50%,#C4884E 50%)}

/* --- Carte d'un carnet sur le tableau de bord --------------------------- */

.carnetcard{display:flex; align-items:center; gap:14px}
.carnetcard .cover{
  width:62px; height:88px; object-fit:cover; border-radius:7px; flex-shrink:0;
  border:1px solid var(--line); background:var(--surface-2);
}
.carnetcard .meta{flex:1; min-width:0}
.carnetcard .meta b{display:block; font-size:15px; font-weight:500; overflow-wrap:anywhere}
.carnetcard .meta span{font-size:12.5px; color:var(--muted)}

/* --- Logo --------------------------------------------------------------- */

.brand .logo{height:24px; width:auto; display:block}
[data-theme="dark"] .brand .logo{filter:brightness(1.65)}
.drawer .brand .logo{height:30px; margin-bottom:4px}
.logo-big{height:58px; width:auto; display:block; margin:0 auto 4px}
[data-theme="dark"] .logo-big{filter:brightness(1.65)}

/* --- Flashcards --------------------------------------------------------- */

.fcrow{display:flex; align-items:center; gap:10px; background:var(--surface);
       border:1px solid var(--line); border-radius:12px; padding:13px 14px; margin-bottom:8px;
       cursor:pointer; box-shadow:var(--shadow)}
.fcrow .n{flex:1; min-width:0; font-size:14.5px; font-weight:500;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fcrow .m{font-size:12px; color:var(--muted); flex-shrink:0}
.pill{flex-shrink:0; font-size:11px; padding:3px 9px; border-radius:11px;
      background:var(--accent); color:var(--accent-ink); font-weight:500}
.quota{display:flex; align-items:center; justify-content:space-between; gap:10px;
       background:var(--surface-2); border-radius:12px; padding:11px 14px;
       margin-bottom:18px; font-size:12.5px; color:var(--muted)}
.card-item{background:var(--surface); border:1px solid var(--line); border-radius:12px;
           padding:12px 13px; margin-bottom:8px}
.card-item .q{font-size:14px; font-weight:500; margin-bottom:5px; overflow-wrap:anywhere}
.card-item .a{font-size:13px; color:var(--muted); line-height:1.55; overflow-wrap:anywhere; white-space:pre-line}
.card-item .foot{display:flex; align-items:center; justify-content:space-between; margin-top:9px}
.lvl{font-size:11px; color:var(--muted)}
.mini{background:none; border:none; font-family:inherit; font-size:12px;
      color:var(--accent); cursor:pointer; padding:0}

/* Révision */
.study{background:var(--surface); border:1px solid var(--line); border-radius:16px;
       padding:26px 20px; min-height:230px; display:flex; flex-direction:column;
       justify-content:center; text-align:center; box-shadow:var(--shadow); margin-bottom:14px}
.study .q{font-size:18px; line-height:1.5; overflow-wrap:anywhere}
.study .a{font-size:15px; line-height:1.6; color:var(--muted); margin-top:18px;
          padding-top:18px; border-top:1px solid var(--line); white-space:pre-line; overflow-wrap:anywhere}
.study-actions{display:flex; gap:10px}
.study-actions .btn{flex:1}
.progress{font-size:12px; color:var(--muted); text-align:center; margin-bottom:12px}
.model{background:var(--surface-2); border-radius:10px; padding:12px 13px; font-size:12px;
       line-height:1.7; white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
       color:var(--ink); overflow-x:auto; margin-bottom:12px}
textarea.big{width:100%; min-height:180px; font-family:inherit; font-size:15px; line-height:1.5;
             color:var(--ink); background:var(--bg); border:1px solid var(--line);
             border-radius:10px; padding:12px 13px; margin-bottom:12px; resize:vertical}
.sheet2{position:fixed; left:50%; bottom:0; width:100%; max-width:560px; z-index:60;
        background:var(--surface); border-radius:18px 18px 0 0; padding:16px 18px 24px;
        transform:translate(-50%,110%); transition:transform .26s cubic-bezier(.32,.72,0,1);
        box-shadow:0 -2px 16px rgba(40,30,45,.18); max-height:86vh; overflow-y:auto}
.sheet2.open{transform:translate(-50%,0)}
.sheet2 h3{font-size:15px; font-weight:500; margin:0 0 12px}
.grip2{width:34px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 14px}
.carnetcard .meta .mini{display:block; background:none; border:none; padding:0; margin-top:5px;
                        font-family:inherit; font-size:11.5px; color:var(--accent); cursor:pointer}