/* =====================================================================
   Thème « blocs colorés » appliqué à tout le site (chargé après style.css, avant home.css)
   Contours encre épais, ombres franches, aplats vifs sur fonds pastel. Thème clair conservé.
   ===================================================================== */
:root {
  --ink: #0b1020; --blue: #0f62ec; --coral: #e11d48; --sun: #ffd166; --violet: #7c5cff; --mint: #34d399;
  --bx: 2px solid var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --sh-s: 4px 4px 0 var(--ink);
  --accent: #0f62ec; --accent-hover: #0b50c4; --accent-ink: #0b50c4; --accent-soft: #dfe9ff;
  --muted: #3b4252;
  --border: #cfd5e3;
}
body { background: #fff; background-image: none; }
body:has(main.narrow) { background: #e6eeff; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ---------- Boutons ---------- */
.btn { border: var(--bx); border-radius: 14px; background: var(--blue); color: #fff; font-weight: 750; box-shadow: var(--sh-s); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s; }
.btn:hover { background: var(--blue); border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.secondary { background: #fff; color: var(--ink); border: var(--bx); }
.btn.secondary:hover { background: #fff; }
.btn.danger, .btn.danger-ghost { background: #fff; color: var(--coral); border: var(--bx); }
.btn:disabled { opacity: 0.55; transform: none; box-shadow: var(--sh-s); cursor: not-allowed; }

/* ---------- Champs ---------- */
select, input[type='email'], input[type='password'], input[type='text'], form.stack input[type='text'] {
  border: var(--bx); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
select:focus, input:focus { outline: 3px solid var(--violet); outline-offset: 2px; border-color: var(--ink); }
label.field { color: var(--ink); font-weight: 650; }

/* ---------- Cartes et panneaux ---------- */
.panel { border: var(--bx); border-radius: 26px; background: #fff; box-shadow: var(--sh); }
.card, .tcard, .ccard, .go-card, .feature, .ep, .meth-card, .meth-step, .plan, .plan-line, .keys-list li, .alert-box { border-color: var(--ink); }
.tcard, .ccard, .ep { border: var(--bx); box-shadow: var(--sh-s); }
.tcard:hover, .ccard:hover { transform: translate(-2px, -2px); border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.tcard.top { background: #fff6d6; }
.tcard.sk { box-shadow: none; }

/* ---------- Onglets, plateformes, filtres ---------- */
.tabs { border: var(--bx); border-radius: 16px; background: #fff; }
.tab[aria-pressed='true'] { background: var(--sun); color: var(--ink); border: var(--bx); box-shadow: none; }
.ptab { border: var(--bx); border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--sh-s); }
.ptab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ptab[aria-pressed='true'] { background: var(--sun); border: var(--bx); box-shadow: 6px 6px 0 var(--ink); }
.help-btn { border: var(--bx); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
#tendances .filters { background: #dfe9ff; border: var(--bx); border-radius: 18px; }
.credits { border: var(--bx); background: #fff; border-radius: 16px; }
.credits .cr-bar { border: var(--bx); background: #fff; }
.explain { border: var(--bx); background: #f4f1ff; }
.notice, .empty { border: 2px dashed var(--ink); background: #fff; }
.upsell { border: var(--bx); background: #fff0c2; box-shadow: var(--sh-s); }
.gate { border: var(--bx); box-shadow: var(--sh); }

/* ---------- Pastilles et repères ---------- */
.pill { border: 1.5px solid var(--ink); background: #fff; }
.pill.soft { background: transparent; border-style: dashed; }
.ins { border: 1.5px solid var(--ink); }
.ins.up { background: #bff3d6; color: var(--ink); } .ins.fresh { background: #cfe0ff; color: var(--ink); }
.ins.vol { background: #e1d9ff; color: var(--ink); } .ins.steady { background: #ffe3a3; color: var(--ink); }
.rankno { border: var(--bx); background: #fff; color: var(--ink); }
.tcard[data-rank='1'] .rankno { background: var(--sun); border-color: var(--ink); color: var(--ink); }
.tcard[data-rank='2'] .rankno { background: #d9def0; border-color: var(--ink); color: var(--ink); }
.tcard[data-rank='3'] .rankno { background: #ffc9a8; border-color: var(--ink); color: var(--ink); }
.ring { background: conic-gradient(var(--blue) var(--p), #dde3f0 0); }
.sig u, .bar .fill { background: var(--blue); }
.avatar { border: var(--bx); }
.cta { border: var(--bx); background: var(--sun); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.cta:hover { background: var(--sun); color: var(--ink); transform: translate(-1px, -1px); }
.cname a:hover { color: var(--blue); }
.vcheck svg circle { fill: var(--blue); }

/* ---------- En-têtes de page : pastel, titre massif, formes ---------- */
.page-hero {
  --hbg: #e6eeff; --hA: var(--coral); --hB: var(--sun);
  position: relative; overflow: hidden; background: var(--hbg); border-bottom: var(--bx);
  padding-bottom: 64px;
}
.page-hero[data-hue='violet'] { --hbg: #e9e4ff; --hA: var(--sun); --hB: var(--blue); }
.page-hero[data-hue='mint'] { --hbg: #d9f6e8; --hA: var(--violet); --hB: var(--coral); }
.page-hero[data-hue='sun'] { --hbg: #fff0c2; --hA: var(--blue); --hB: var(--coral); }
.page-hero[data-hue='coral'] { --hbg: #ffe1e7; --hA: var(--blue); --hB: var(--sun); }
.page-hero::before {
  content: ''; position: absolute; inset: auto; right: -50px; top: 40px; width: 170px; height: 170px; border-radius: 50%;
  background: var(--hA); border: var(--bx); -webkit-mask-image: none; mask-image: none; animation: floaty 9s ease-in-out infinite; z-index: 0;
}
.page-hero::after {
  content: ''; position: absolute; left: 4%; bottom: 26px; width: 74px; height: 74px; border-radius: 20px; transform: rotate(14deg);
  background: var(--hB); border: var(--bx); z-index: 0; animation: floaty 9s ease-in-out -4s infinite;
}
.page-hero .eyebrow { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border: var(--bx); border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; box-shadow: 2px 2px 0 var(--ink); }
.page-hero h1 { font-size: clamp(38px, 6.2vw, 72px); font-weight: 850; line-height: 1; letter-spacing: -0.035em; word-spacing: 0.05em; color: var(--ink); margin-bottom: 18px; }
.page-hero .sub { color: #2a3042; font-weight: 500; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---------- Sections, titres, questions ---------- */
.block h2.big, .meth-h { font-weight: 850; letter-spacing: -0.03em; color: var(--ink); }
.section-title, .sect-head .section-title { font-weight: 850; letter-spacing: -0.03em; }
.faq-item { border: var(--bx); border-radius: 20px; background: #fff; box-shadow: var(--sh-s); }
.faq-item[open] { box-shadow: 6px 6px 0 var(--ink); }
.faq-item summary h2, .faq-item summary h3 { color: var(--ink); font-weight: 750; }
.faq-item .plus { border: var(--bx); }
.features .feature-row { border: var(--bx); box-shadow: var(--sh); }
.features .feature-row:hover { box-shadow: 9px 9px 0 var(--ink); border-color: var(--ink); }
.f-visual { border: var(--bx); background: #dfe9ff; }
.mock { border: var(--bx); box-shadow: var(--sh-s); }
.meth-step, .meth-card { border: var(--bx); box-shadow: var(--sh-s); background: #fff; }
.meth-step .n { border: var(--bx); background: var(--sun); color: var(--ink); }
.meth-card:nth-child(2) { background: #f4f1ff; } .meth-card:nth-child(3) { background: #fff6d6; } .meth-card:nth-child(4) { background: #e8fbf1; }
.meth-viz .bar { border: var(--bx); background: #fff; }
.meth-viz .bar u, .recipe-bars u { background: var(--blue); }
.rb > div { border: var(--bx); background: #fff; }
.ex-total b { color: var(--blue); }
.cmp-wrap { border: var(--bx); box-shadow: var(--sh-s); }
.cmp thead th { background: #fff0c2; }
.cta-band { border: var(--bx); background: #e1d9ff; box-shadow: var(--sh); }

/* ---------- Tarifs ---------- */
.billing-toggle { border: var(--bx); box-shadow: var(--sh-s); }
.billing-toggle button.on { background: var(--ink); }
.plans3 .plan { border: var(--bx); box-shadow: var(--sh); border-radius: 26px; }
.plans3 .plan.featured { background: var(--blue); border: var(--bx); box-shadow: 8px 8px 0 var(--ink); }
.plans3 .plan.featured .badge { background: var(--sun); color: var(--ink); border: var(--bx); }
.plans3 .plan.featured .btn { background: var(--sun); color: var(--ink); border: var(--bx); }
.plan .badge { border: var(--bx); }

/* ---------- Développeurs ---------- */
pre.code { border: var(--bx); box-shadow: var(--sh-s); background: var(--ink); }
.ep { background: #fff; }
.docs :not(pre) > code { border: 1.5px solid var(--ink); background: #fff6d6; }

/* ---------- Connexion, compte ---------- */
.auth-aside { border: var(--bx); box-shadow: var(--sh); background: #fff0c2; }
.ap-ico { border: var(--bx); background: #fff; box-shadow: 2px 2px 0 var(--ink); }
.plan-line { border: var(--bx); background: #fff; box-shadow: var(--sh-s); }
.plan-line .tag { border: 1.5px solid var(--ink); background: #fff; }
.plan-line .tag.pro { background: var(--blue); color: #fff; }
.alert-box { border: var(--bx); background: #f4f1ff; }
.keys-list li { border: var(--bx); background: #fff; }
.key-new { border: var(--bx); background: #d9f6e8; }
.key-value code { border: var(--bx); }
.pw-bar { border: var(--bx); }
main.narrow h1, main.auth-wrap h1 { font-weight: 850; letter-spacing: -0.035em; color: var(--ink); }

/* ---------- Pages légales ---------- */
.legal { background: #fff; border: var(--bx); border-radius: 26px; box-shadow: var(--sh); padding: 40px 44px; color: #2a3042; }
.legal h2 { font-weight: 850; letter-spacing: -0.03em; color: var(--ink); }
.legal table { border: var(--bx); border-radius: 14px; overflow: hidden; }
.legal th { background: #fff0c2; color: var(--ink); }

/* ---------- Barre de navigation ---------- */
header.top .wrap { background: #fff; border: var(--bx); box-shadow: var(--sh-s); -webkit-backdrop-filter: none; backdrop-filter: none; }
header.top.scrolled .wrap { background: #fff; box-shadow: var(--sh-s); }
.main-nav a { color: #2a3042; font-weight: 600; }
.main-nav a:hover { background: #fff0c2; color: var(--ink); }
.main-nav a.current { background: var(--sun); color: var(--ink); border: 1.5px solid var(--ink); }
.auth-nav .btn { box-shadow: 3px 3px 0 var(--ink); }
.burger { border: var(--bx); box-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 860px) {
  .main-nav { border: var(--bx); background: #fff; box-shadow: var(--sh); }
  .main-nav a.current { background: var(--sun); }
}

/* ---------- Newsletter et pied de page ---------- */
.nl-strip { background: #fff0c2; border-top: var(--bx); }
.nl-copy p { color: #2a3042; }
.site-footer { background: #fff; border-top: var(--bx); }
.site-footer .foot-cols a { color: #2a3042; }
.foot-bottom { border-top: 1.5px solid var(--ink); }

/* ---------- Adaptations ---------- */
@media (max-width: 900px) {
  .legal { padding: 26px 22px; }
  .page-hero::before { width: 110px; height: 110px; right: -30px; top: 70px; }
  .page-hero::after { display: none; }
}
@media (max-width: 560px) {
  .page-hero { padding-bottom: 44px; }
  .legal { border-radius: 20px; box-shadow: var(--sh-s); }
}
@media (prefers-reduced-motion: reduce) { .page-hero::before, .page-hero::after { animation: none; } }

/* ---------- Exemples (conversation IA, code) hors accueil ---------- */
.chat-demo, .code-demo { border: var(--bx); border-radius: 26px; box-shadow: var(--sh); }
.code-demo { background: var(--ink); }
.chat-demo .msg.user { background: var(--blue); border: var(--bx); }
.chat-demo .msg.bot { background: #f6f7fb; border: var(--bx); }
.chat-demo .tool-chip { border: 2px dashed var(--ink); }

/* ---------- Finitions ---------- */
.plan-line { margin-bottom: 20px; }
.plans3 .plan.featured .price span, .plans3 .plan.featured .plan-tag, .plans3 .plan.featured .plan-note { color: #fff; }
.plan .btn.disabled, .plans3 .plan.featured .btn.disabled { background: #fff; color: #3b4252; border: var(--bx); box-shadow: none; opacity: 1; }
.plans3 .plan-tag { color: #9a3412; }
.plans3 .plan.featured .plan-tag { color: #fff; }
.billing-toggle button span { color: #9a3412; }
.billing-toggle button.on span { color: #ffd166; }

/* Cases à cocher : cible tactile confortable (toute la ligne cliquable, case de 24 px) */
form.stack input[type='checkbox'] { width: 24px; height: 24px; margin: 0; border-radius: 6px; box-shadow: none; }
.check { min-height: 44px; align-items: center; padding: 2px 0; }

/* ---------- Page Tendances : deux blocs bien distincts (sujets / créateurs) ---------- */
.blk-tag { display: inline-block; padding: 4px 12px; border: var(--bx); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.blk-tag.blue { background: #cfe0ff; }
.blk-tag.violet { background: #d9ccff; }
.blk-head { margin: 28px 0 18px; padding-top: 24px; border-top: 2px dashed var(--ink); }
.blk-head h2 { margin: 12px 0 6px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; font-weight: 850; letter-spacing: -0.03em; color: var(--ink); }
.blk-head p { margin: 0; max-width: 640px; color: #2a3042; font-size: 15.5px; line-height: 1.55; }
.filters-note { margin: 10px 2px 16px; font-size: 13.5px; color: #3b4252; line-height: 1.5; }
.jump { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.jump-a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 8px; border: var(--bx); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 650; font-size: 14.5px; text-decoration: none; box-shadow: var(--sh-s); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.jump-a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.creators-sec { padding: 72px 0 80px; background: #e9e4ff; border-block: var(--bx); }
.creators-sec .blk-head { margin-top: 0; padding-top: 0; border-top: 0; }
.creators-sec .ccard { background: #fff; }
@media (max-width: 560px) { .creators-sec { padding: 52px 0 60px; } .jump-a { width: 100%; } }

/* ---------- Lien vers la vidéo YouTube sur chaque carte ---------- */
.vlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vlink { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 5px 14px 5px 8px; border: var(--bx); border-radius: 999px; background: #ffe1e7; color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.vlink:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.vico { display: inline-flex; flex: none; }
.vtxt { white-space: nowrap; }
.vch { font-weight: 500; color: #3b4252; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vch:empty { display: none; }
@media (max-width: 560px) { .vlink { min-height: 44px; } }