/* Hallmark · design-system: design.md · theme: Hum
 * CSS des pages marketing (/, /en/, /tricot/, /crochet/). Lié APRÈS tokens.css +
 * base.css. Le socle (barre, pied, boutons, typo) vit dans base.css. */

/* ── Héros décentré (jamais la pile centrée) — home & en ───────── */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-2xl);
  align-items:center;padding:var(--space-2xl) 0 var(--space-lg)}
.hero-copy h1{font-size:var(--text-display);max-width:20ch}
.hero-copy .sub{font-size:var(--text-lead);color:var(--ink-2);margin:var(--space-md) 0 var(--space-lg);max-width:44ch}
.cta{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.note{font-size:13.5px;color:var(--ink-3);margin-top:var(--space-md)}

/* ── Héros simple (tricot / crochet : pas de démo, aligné à gauche) ── */
.hero-lede{padding:var(--space-2xl) 0 var(--space-xl);max-width:56ch}
.hero-lede h1{font-size:var(--text-display);max-width:18ch}
.hero-lede .sub{font-size:var(--text-lead);color:var(--ink-2);margin:var(--space-md) 0 var(--space-lg);max-width:54ch}

/* ── La démo interactive (home & en) ──────────────────────────── */
.demo{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-card);
  padding:var(--space-md);box-shadow:var(--shadow)}
.demo-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-sm)}
.demo-h b{font-size:15px;font-weight:600}
.demo-h span{font-size:13px;color:var(--ink-3)}
.sizes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-sm)}
.sz{position:relative;padding:7px 14px;border:1px solid var(--rule);border-radius:var(--radius-pill);
  background:var(--paper);cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-2);
  transition:border-color 140ms,color 140ms,background-color 140ms,transform 140ms var(--ease-spring)}
.sz:hover{border-color:var(--pear-deep);color:var(--ink);transform:translateY(-1px)}
.sz.on{background:var(--coral);border-color:var(--coral);color:#fff;font-weight:600}
@media(pointer:coarse){.sz{padding:0 15px}}
#demo-canvas{display:block;width:100%;height:190px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--radius-input)}
.demo-f{display:flex;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-sm);
  font-size:13px;flex-wrap:wrap}
.demo-f i{font-style:normal;color:var(--ink-3);display:block}
.demo-f b{color:var(--coral);font-weight:600;font-variant-numeric:tabular-nums}

/* ── Bandeau de preuves (color-shift, tick-up) ────────────────── */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);
  padding-bottom:var(--space-2xl)}
.pcard{border-radius:var(--radius-card);padding:var(--space-md);border:1px solid var(--rule);
  transition:transform 220ms var(--ease-spring),box-shadow 220ms,background-color 220ms}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.pcard .big{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,1.5rem + 2.4vw,3.1rem);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pcard p{color:var(--ink-2);font-size:14px;margin-top:.4rem}
.pcard.pear{background:oklch(86% 0.18 95 / .10)} .pcard.pear:hover{background:oklch(86% 0.18 95 / .18)} .pcard.pear .big{color:oklch(64% 0.14 95)}
.pcard.cyan{background:oklch(60% 0.13 235 / .09)} .pcard.cyan:hover{background:oklch(60% 0.13 235 / .16)} .pcard.cyan .big{color:var(--cyan)}
.pcard.coral{background:var(--coral-soft)} .pcard.coral:hover{background:oklch(66% 0.20 22 / .17)} .pcard.coral .big{color:var(--coral)}

/* ── Bento des différenciateurs (F1, spans irréguliers, color-shift) ── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-md)}
.tile{grid-column:span 2;border-radius:var(--radius-card);padding:var(--space-lg);
  background:var(--paper);border:1px solid var(--rule);
  transition:transform 220ms var(--ease-spring),box-shadow 220ms,background-color 220ms}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.tile.wide{grid-column:span 3}
.tile .mark{width:30px;height:30px;margin-bottom:var(--space-sm);color:var(--m)}
.tile h3{font-size:16.5px;font-weight:600;margin-bottom:.4rem}
.tile p{color:var(--ink-2);font-size:14.5px}
.tile.a1{--m:var(--coral);background:oklch(66% 0.20 22 / .05)} .tile.a1:hover{background:oklch(66% 0.20 22 / .10)}
.tile.a2{--m:var(--cyan); background:oklch(60% 0.13 235 / .05)} .tile.a2:hover{background:oklch(60% 0.13 235 / .11)}
.tile.a3{--m:oklch(64% 0.14 95);background:oklch(86% 0.18 95 / .10)} .tile.a3:hover{background:oklch(86% 0.18 95 / .18)}
.tile.a4{--m:var(--mint); background:oklch(72% 0.13 155 / .06)} .tile.a4:hover{background:oklch(72% 0.13 155 / .13)}
.tile.a5{--m:var(--coral);background:oklch(66% 0.20 22 / .05)} .tile.a5:hover{background:oklch(66% 0.20 22 / .10)}
.tile.a6{--m:var(--cyan); background:oklch(60% 0.13 235 / .05)} .tile.a6:hover{background:oklch(60% 0.13 235 / .11)}

/* ── Bloc CTA « voyez-le bouger » (tricot / crochet) ──────────── */
.cta-band{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-card);
  padding:var(--space-xl);box-shadow:var(--shadow);max-width:60ch}
.cta-band h2{font-size:var(--text-h2);margin-bottom:var(--space-xs)}
.cta-band p{color:var(--ink-2);margin-bottom:var(--space-md)}

/* ── Sélecteur de métier (choose your craft) — entrée directe ── */
.crafts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);padding-bottom:var(--space-2xl)}
.craft{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);
  border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--paper);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform 200ms var(--ease-spring),box-shadow 200ms}
.craft:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.craft .mark{width:34px;height:34px;flex:none;color:var(--coral)}
.craft.k .mark{color:var(--cyan)}
.craft .t b{font-family:var(--font-display);font-size:17px;font-weight:600;display:block}
.craft .t span{color:var(--ink-2);font-size:13.5px}
.craft .go{margin-left:auto;color:var(--coral);font-weight:700;font-size:20px;transition:transform 140ms var(--ease-out)}
.craft:hover .go{transform:translateX(3px)}

/* ── FAQ (accordéon natif, accessible ; pas de schema FAQPage — retiré des SERP) ── */
.faq{max-width:720px}
.faq details{border:1px solid var(--rule);border-radius:var(--radius-input);margin-bottom:var(--space-sm);
  background:var(--paper);overflow:hidden}
.faq summary{cursor:pointer;padding:var(--space-md);font-family:var(--font-display);font-weight:600;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);font-weight:400;font-size:24px;line-height:1;
  transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p{padding:0 var(--space-md) var(--space-md);color:var(--ink-2);font-size:15px;margin:0}
.faq details>p a{color:var(--cyan)}
@media(max-width:640px){.crafts{grid-template-columns:1fr}}

/* ── Comparatif (F3 tabular : la rigueur vit ici) ─────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);
  border-radius:var(--radius-card);background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
thead th{font-family:var(--font-label);font-weight:500;font-size:11.5px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em}
tbody td:first-child{color:var(--ink-2)}
tbody td:first-child b{color:var(--ink);font-weight:600}
.col-maille{background:oklch(86% 0.18 95 / .12)}
th.col-maille{color:var(--ink);font-weight:700}
.yes{color:var(--green);font-weight:600}
.no{color:var(--ink-3)}

/* ── Prix ─────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg);max-width:680px}
.plan{border:1px solid var(--rule);border-radius:var(--radius-card);padding:var(--space-lg);
  background:var(--paper);box-shadow:var(--shadow)}
.plan h3{font-size:18px;font-weight:600}
.plan.best{border:2px solid var(--coral);position:relative}
.plan.best::after{content:attr(data-badge);position:absolute;top:-12px;left:24px;background:var(--coral);color:#fff;
  font-family:var(--font-label);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--radius-pill)}
.price{font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-.03em;
  margin:.5rem 0 .2rem;font-variant-numeric:tabular-nums}
.price #price-per{font-size:15px;font-weight:400;color:var(--ink-3)}
.plan ul{list-style:none;margin:var(--space-md) 0}
.plan li{padding:5px 0;font-size:14.5px;color:var(--ink-2);padding-left:1.6em;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:6px;
  border-left:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(-45deg)}
.plan .btn{width:100%}
.rythme{display:flex;gap:0;border:1px solid var(--rule);border-radius:var(--radius-pill);overflow:hidden;margin:.6rem 0 .8rem}
.rythme-opt{flex:1;border:0;background:var(--paper-2);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 6px;cursor:pointer;transition:background-color 140ms,color 140ms}
.rythme-opt.on{background:var(--coral);color:#fff}
.rythme-opt em{font-style:normal;font-weight:700;opacity:.9;font-size:11.5px}
.keep{margin-top:var(--space-lg);max-width:60ch;color:var(--ink-2);font-size:14px}

/* ── Responsive marketing ─────────────────────────────────────── */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--space-lg)}
  .tile{grid-column:span 3}
  .tile.wide{grid-column:span 6}
}
@media(max-width:640px){
  .proof{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr;gap:var(--space-sm)}
  .tile,.tile.wide{grid-column:auto}
}