/* ===========================================================
   Cartable — thème « cahier d'école primaire »
   Cahier Seyès, crayons de couleur, ardoise, stickers.
   =========================================================== */
:root{
  --paper:#fbf9f2;      /* papier cahier crème */
  --card:#ffffff;
  --ink:#33312c;
  --ink-soft:#6b675e;
  --ink-faint:#9a958a;
  --line:#e8e3d5;
  --line-strong:#d8d2c0;

  --seyes:#c3d7f0;      /* lignes bleues du cahier */
  --seyes-margin:#eaa9a9;/* marge rouge */

  --board:#3a7a5e;      /* vert ardoise / craie */
  --board-deep:#2c5c46;

  /* crayons de couleur */
  --rouge:#e4572e;
  --bleu:#2f77c9;
  --jaune:#efb200;
  --vert:#3a9d5d;
  --violet:#8a5cc7;
  --orange:#f28c28;

  --accent:var(--vert);
  --accent-soft:#e5f2ea;

  --ok:#2f9e5b; --warn:#d98a1f; --bad:#d8503c;
  --shadow:0 2px 0 rgba(0,0,0,.04), 0 10px 24px rgba(60,55,40,.10);
  --shadow-sm:0 1px 0 rgba(0,0,0,.04), 0 4px 12px rgba(60,55,40,.08);
  --radius:18px;
  --font:"Nunito","Baloo 2","Trebuchet MS","Segoe UI Rounded",ui-rounded,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  color:var(--ink);
  background-color:var(--paper);
  /* Cahier Seyès : lignes horizontales + marge rouge */
  background-image:
    linear-gradient(90deg, transparent 46px, var(--seyes-margin) 46px, var(--seyes-margin) 48px, transparent 48px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--seyes) 31px 32px);
  background-attachment:fixed;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:22px clamp(14px,4vw,28px) 80px;}

a{color:var(--bleu);}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;}

/* ---------- En-tête / logo ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:6px 0 18px;}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.logo svg{width:52px;height:52px;flex:0 0 auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.08));}
.logo .word{font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--board-deep);}
.logo .word .b{color:var(--rouge);}
.logo .tag{display:block;font-size:12px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em;margin-top:-3px;}
.topbar .spacer{flex:1;}
.pill-home{font-size:12.5px;font-weight:800;color:var(--board-deep);background:#fff;border:2px solid var(--line-strong);
  border-radius:999px;padding:6px 12px;text-decoration:none;box-shadow:var(--shadow-sm);}

/* ---------- Fil des étapes (crayons) ---------- */
.steps{display:flex;gap:6px;align-items:stretch;margin:6px 0 26px;flex-wrap:wrap;}
.steps .crayon{flex:1;min-width:120px;display:flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--line-strong);
  border-radius:14px;padding:9px 12px;box-shadow:var(--shadow-sm);position:relative;opacity:.62;}
.steps .crayon .no{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;flex:0 0 auto;background:var(--ink-faint);}
.steps .crayon .lbl{font-weight:800;font-size:13px;color:var(--ink-soft);line-height:1.1;}
.steps .crayon.done{opacity:1;} .steps .crayon.done .no{background:var(--vert);}
.steps .crayon.active{opacity:1;border-color:var(--c,var(--vert));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--vert)) 22%,transparent),var(--shadow-sm);}
.steps .crayon.active .no{background:var(--c,var(--vert));}
.steps .crayon.active .lbl{color:var(--ink);}
.steps .c0{--c:var(--violet)} .steps .c1{--c:var(--bleu)} .steps .c2{--c:var(--orange)} .steps .c3{--c:var(--rouge)} .steps .c4{--c:var(--vert)}

/* ---------- Cartes / stickers ---------- */
.card{background:var(--card);border:2px solid var(--line-strong);border-radius:var(--radius);
  padding:clamp(18px,3vw,26px);box-shadow:var(--shadow);margin-bottom:18px;}
.card.tape{position:relative;}
.card.tape::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:120px;height:22px;background:rgba(240,220,120,.5);border:1px dashed rgba(180,150,60,.5);border-radius:3px;}

.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--vert));margin:0 0 6px;}
h1.title{font-size:clamp(24px,4.5vw,34px);font-weight:800;margin:0 0 6px;color:var(--board-deep);}
h2.sec{font-size:clamp(19px,3vw,24px);font-weight:800;margin:0 0 4px;color:var(--board-deep);}
.lead{color:var(--ink-soft);margin:0 0 18px;font-weight:600;}
.muted{color:var(--ink-faint);font-size:13px;}

/* ---------- Boutons (craie / ardoise) ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  border:none;border-radius:999px;padding:12px 22px;text-decoration:none;transition:transform .08s ease, box-shadow .08s ease;}
.btn.primary{background:var(--board);color:#fff;box-shadow:0 4px 0 var(--board-deep);}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--board-deep);}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--board-deep);}
.btn.ghost{background:#fff;color:var(--board-deep);border:2px solid var(--line-strong);box-shadow:var(--shadow-sm);}
.btn.big{font-size:16px;padding:14px 26px;}
.btn .arrow{font-size:18px;}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px;}

/* ---------- Formulaire étape 0 ---------- */
.drop{border:3px dashed var(--seyes);border-radius:16px;background:#fbfdff;padding:26px;text-align:center;color:var(--ink-soft);font-weight:700;}
.drop .ico{font-size:40px;display:block;margin-bottom:6px;}
.field{margin:16px 0;}
.field label{display:block;font-weight:800;color:var(--board-deep);margin-bottom:6px;font-size:14.5px;}
.field input[type=text]{font-family:inherit;font-size:16px;font-weight:700;padding:11px 14px;border:2px solid var(--line-strong);
  border-radius:12px;width:180px;background:#fff;color:var(--ink);}
.field input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px #d5e6fb;}
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip-radio input{position:absolute;opacity:0;}
.chip-radio span{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--line-strong);border-radius:999px;
  padding:9px 15px;font-weight:800;font-size:14px;cursor:pointer;background:#fff;color:var(--ink-soft);}
.chip-radio input:checked + span{border-color:var(--vert);background:var(--accent-soft);color:var(--board-deep);box-shadow:0 0 0 2px #cde7d8;}

/* ---------- Liste nette (checklist cahier) ---------- */
.list-group{margin-top:8px;}
.list-group h3{font-size:15px;color:var(--board-deep);margin:14px 0 6px;display:flex;align-items:center;gap:8px;}
.list-group h3 .dot{width:12px;height:12px;border-radius:50%;background:var(--c,var(--bleu));}
.item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;}
.item:hover{background:#faf8ef;}
.item input[type=checkbox]{width:20px;height:20px;accent-color:var(--vert);}
.item .n{font-weight:700;}
.item .q{margin-left:auto;font-weight:800;color:var(--ink-faint);font-size:13px;background:#f2efe4;border-radius:8px;padding:1px 8px;}
.item.owned{opacity:.5;} .item.owned .n{text-decoration:line-through;}
.item .tagmini{font-size:11px;font-weight:800;color:#fff;background:var(--ink-faint);border-radius:7px;padding:1px 7px;}

/* ---------- Tables comparatif ---------- */
.tablewrap{overflow-x:auto;border:2px solid var(--line-strong);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;}
thead th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:800;padding:12px 14px;border-bottom:2px solid var(--line-strong);white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody .num,.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
tr.win{background:var(--accent-soft);}
.store{font-weight:800;color:var(--board-deep);}

.badge{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;white-space:nowrap;}
.badge.drive{background:#fdeede;color:#b96a12;border:1px solid #f2c98e;}
.badge.central{background:#e2edfb;color:#2560a8;border:1px solid #b9d3f2;}
.badge.verif{background:#e2f5e8;color:#1f8a4c;border:1px solid #a9dcbc;}
.badge.est{background:#f3f0e6;color:#8a8676;border:1px solid #ddd6c4;}
.price{font-weight:800;font-variant-numeric:tabular-nums;}
.price.lo{color:var(--ok);} .price.mid{color:var(--warn);} .price.hi{color:var(--bad);}
.ineli{opacity:.5;}

/* ---------- Remplissage (barre + lignes) ---------- */
.progresswrap{background:#fff;border:2px solid var(--line-strong);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);}
.bar{height:16px;border-radius:999px;background:#eee6d3;overflow:hidden;}
.bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jaune),var(--vert));transition:width .25s ease;}
.pfeed{list-style:none;margin:14px 0 0;padding:0;max-height:280px;overflow:auto;}
.pfeed li{display:flex;align-items:center;gap:10px;padding:6px 4px;font-weight:700;border-bottom:1px dashed var(--line);}
.pfeed li .ok{color:var(--ok);font-weight:900;}
.pfeed li .pr{margin-left:auto;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.counter{font-weight:900;color:var(--board-deep);font-size:15px;}

/* ---------- Vérif conformité ---------- */
.confrow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px dashed var(--line);font-weight:700;}
.confrow .mk{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px;flex:0 0 auto;}
.confrow .mk.ok{background:var(--ok);} .confrow .mk.warn{background:var(--warn);}
.confrow .pr{margin-left:auto;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.note{border-radius:12px;padding:14px 16px;font-weight:600;border:2px solid;}
.note.warn{background:#fff7ea;border-color:#f0d29a;color:#8a6417;}
.note.hand{background:#eef6f1;border-color:#bfe0cc;color:#245c40;}
.note h4{margin:0 0 6px;font-size:15px;}

.foot{margin-top:26px;color:var(--ink-faint);font-size:12.5px;text-align:center;}
.demo-flag{display:inline-block;background:#fff3cd;color:#8a6417;border:1px dashed #e5c46a;border-radius:8px;
  font-size:12px;font-weight:800;padding:3px 10px;margin-bottom:14px;}