/* CCUI – Micro-framework maison (additif, non destructif)
   S'appuie sur les variables de style.css (ex: --accent, --text, --panel, --panel-strong, --muted, --shadow). */

/* 1) Aides typographiques */
.text-muted { color: var(--muted) !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-sm { font-size: .95rem !important; }
.text-lg { font-size: 1.125rem !important; }

/* 2) Espacements (échelle 8px) */
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-8{margin-top:8px!important}.mb-8{margin-bottom:8px!important}
.mt-12{margin-top:12px!important}.mb-12{margin-bottom:12px!important}
.mt-16{margin-top:16px!important}.mb-16{margin-bottom:16px!important}
.mt-24{margin-top:24px!important}.mb-24{margin-bottom:24px!important}
.mt-32{margin-top:32px!important}.mb-32{margin-bottom:32px!important}
.mt-48{margin-top:48px!important}.mb-48{margin-bottom:48px!important}
.pt-8{padding-top:8px!important}.pb-8{padding-bottom:8px!important}
.pt-16{padding-top:16px!important}.pb-16{padding-bottom:16px!important}
.pt-24{padding-top:24px!important}.pb-24{padding-bottom:24px!important}
.py-16{padding-top:16px!important;padding-bottom:16px!important}
.py-24{padding-top:24px!important;padding-bottom:24px!important}
.py-32{padding-top:32px!important;padding-bottom:32px!important}

/* 3) Layout utils */
.d-flex{display:flex!important}
.flex-wrap{flex-wrap:wrap!important}
.items-center{align-items:center!important}
.justify-between{justify-content:space-between!important}
.justify-center{justify-content:center!important}
.gap-8{gap:8px!important}.gap-12{gap:12px!important}.gap-16{gap:16px!important}.gap-24{gap:24px!important}

.grid{display:grid!important;gap:16px}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.auto-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}

/* Contrainte largeur */
.container-narrow{max-width:900px;margin:0 auto;padding:0 20px}

/* 4) Sections */
.section{padding:60px 0}
.section--alt{
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section-title{color:var(--accent);font-size:clamp(26px,3vw,38px);margin:0 0 18px}

/* 5) Boutons additionnels (en plus de .btn, .btn.primary existants) */
.btn-secondary{
  background:var(--panel);color:var(--text);
  border:1px solid rgba(255,255,255,.18);
}
.btn-secondary:hover{background:var(--panel-strong);text-decoration:none}
.btn-ghost{
  background:transparent;color:var(--muted);
  border:1px solid rgba(255,255,255,.24);
}
.btn-ghost:hover{background:var(--panel);color:var(--text);text-decoration:none}

/* 6) Cartes / listes de cartes */
.card-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card--soft{background:var(--panel);border:1px solid rgba(255,255,255,.08)}
.card--click{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.card--click:hover{transform:translateY(-6px);background:var(--panel-strong);box-shadow:0 14px 36px rgba(0,0,0,.45)}

/* Aligner les boutons des cartes au bas (alignement vertical uniforme) */
.card-list .card{display:flex;flex-direction:column}
/* Conserver la largeur naturelle des boutons (ne pas les étirer en full width) */
.card-list .card a.btn{align-self:flex-start}
.card-list .card a.btn:last-child{margin-top:auto!important}
/* Les badges (étiquettes) ne doivent pas s'étirer sur toute la largeur */
.card-list .card .badge,
.cards .card .badge{
  display:inline-block!important;
  align-self:flex-start!important;
  width:-moz-fit-content; /* Firefox */
  width:fit-content;
}

/* Page Vente PC – petits ajustements UX */
.page-vente-pc .steps .step{cursor:default}
.page-vente-pc .steps .step:hover{transform:none;background:var(--panel);box-shadow:var(--shadow)}

/* 7) Rayons / ombres */
.rounded{border-radius:12px!important}
.rounded-lg{border-radius:16px!important}
.rounded-full{border-radius:999px!important}
.shadow-sm{box-shadow:0 4px 12px rgba(0,0,0,.2)!important}
.shadow-md{box-shadow:var(--shadow)!important}
.shadow-lg{box-shadow:0 16px 48px rgba(0,0,0,.4)!important}

/* 8) Nav active: compatible header injecté */
.menu a.active,
.menu a[aria-current="page"]{
  color:var(--text)!important;
  text-decoration:none!important;
}

/* Forcer la lisibilité du CTA du header (texte foncé en permanence) */
.menu .cta,
.menu .cta:visited,
.menu .cta:hover{
  color:#111 !important;
  text-decoration:none !important;
}

/* 9) Aides diverses */
.w-full{width:100%!important}
.max-w-760{max-width:760px!important}
.max-w-900{max-width:900px!important}
.center{margin-left:auto!important;margin-right:auto!important}
.only-mobile{display:none}@media(max-width:640px){.only-mobile{display:block}}
.only-desktop{display:block}@media(max-width:640px){.only-desktop{display:none}}