/* ============================================================================
   Chickengo — skin « façade premium »
   Gris anthracite DOMINANT (fond, surfaces, header/footer), vert émeraude en
   profondeur (héros carrelé, halos discrets), jaune enseigne en filets et
   actions. Esthétique chic : hairlines, lettrage espacé, halos doux — aucun
   effet criard, pas de bandeau défilant.
   Wordmark : SVG monoline sur-mesure (templates_blank/_wordmark.html).
   Chargé APRÈS base/layout/components : ne fait que surcharger.
   ========================================================================== */

/* ---------- Fond : anthracite dominant, tirant émeraude en profondeur ----- */
body {
  background-color: var(--cg-bg);
  background-image:
    radial-gradient(1100px 520px at 50% -12%, rgba(18, 58, 46, 0.28), transparent 70%),
    radial-gradient(900px 460px at 50% 112%, rgba(14, 33, 27, 0.35), transparent 72%);
  background-attachment: fixed;
}

/* Utilitaire accessibilité (texte du H1 masqué visuellement) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Wordmark vectoriel + badge ------------------------------------ */
.cg-mark {
  display: block;
  color: var(--primary);
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cg-badge {
  height: 32px;
  width: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(var(--cg-yellow-rgb), 0.22));
}

.cg-mark--header {
  height: 17px;
  width: auto;
  filter: drop-shadow(0 0 7px rgba(var(--cg-yellow-rgb), 0.25));
}

.cg-hero-title {
  margin: 0 0 34px;
  line-height: 0;
}

.cg-mark--hero {
  width: clamp(230px, min(58vw, 82vw - 36px), 640px);
  height: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 0 16px rgba(var(--cg-yellow-rgb), 0.30))
    drop-shadow(0 0 48px rgba(var(--cg-yellow-rgb), 0.14))
    drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}

/* ----- Héros : CHICKENGO (0,5 s) puis « COMMANDER MAINTENANT ! » ----------
   Les deux wordmarks sont empilés (grid) ; à 0,5 s les lettres de l'enseigne
   s'éteignent une à une pendant que celles du message s'allument, dans la
   même typographie. Cascade pilotée par --i (posé sur chaque lettre). */
.cg-swap {
  display: grid;
  justify-items: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-lg);
  padding: 10px 18px;
}

.cg-swap > span {
  grid-area: 1 / 1;
  line-height: 0;
  transition: transform 0.25s ease;
}

/* Le wordmark EST le bouton : éclat crème + légère élévation au survol. */
.cg-swap:hover .cg-mark {
  color: var(--cg-cream);
  filter:
    drop-shadow(0 0 18px rgba(var(--cg-yellow-rgb), 0.42))
    drop-shadow(0 0 56px rgba(var(--cg-yellow-rgb), 0.20))
    drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}

.cg-swap:hover > span {
  transform: translateY(-2px);
}

.cg-swap:active > span {
  transform: translateY(0) scale(0.99);
}

.cg-swap:focus-visible {
  outline: 2px solid rgba(var(--cg-yellow-rgb), 0.8);
  outline-offset: 6px;
}

.cg-mark {
  transition: color 0.25s ease, filter 0.25s ease;
}

.cg-mark--cta {
  width: clamp(250px, min(64vw, 86vw - 36px), 700px);
  height: auto;
  color: var(--primary);
  filter:
    drop-shadow(0 0 14px rgba(var(--cg-yellow-rgb), 0.28))
    drop-shadow(0 0 40px rgba(var(--cg-yellow-rgb), 0.12))
    drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}

.cg-swap__logo .wl {
  animation: cgLetterOut 0.30s ease both;
  animation-delay: calc(1s + var(--i, 0) * 55ms);
}

.cg-swap__cta .wl {
  opacity: 0;
  animation: cgLetterIn 0.34s ease forwards;
  animation-delay: calc(1.18s + var(--i, 0) * 55ms);
}

@keyframes cgLetterOut {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes cgLetterIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-swap__logo .wl { animation: none; }
  .cg-swap__cta { display: none; }
}

/* ---- Ajustements smartphone ---- */
@media (max-width: 480px) {
  .cg-swap { padding: 8px 10px; }

  .hero p {
    letter-spacing: 0.13em;
    margin-bottom: 34px;
    padding: 0 14px;
  }

  .cg-badge { height: 27px; width: 27px; }

  .cg-mark--header { height: 14px; }

  .pre-footer { margin: var(--space-10) auto; }
}

/* ---------- Header / footer : bandeau anthracite --------------------------- */
.header {
  background: rgba(36, 40, 43, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}

.footer {
  background: var(--cg-anthracite-3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-drawer {
  background: var(--cg-anthracite-3);
}

.nav-drawer__brand {
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--primary);
}

/* ---------- Héros : plein écran, carrelage émeraude, enseigne -------------- */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  margin-bottom: 0;
}

.hero-bg-img {
  filter: brightness(0.72) saturate(1.02);
}

/* L'émeraude vit dans le héros ; le fondu vers l'anthracite ne concerne que
   le bas de la section (carrelage net au-dessus, léger voile pour le texte). */
.hero::before {
  background:
    linear-gradient(to bottom,
      rgba(14, 33, 27, 0.22) 0%,
      rgba(14, 33, 27, 0.26) 70%,
      rgba(16, 30, 26, 0.60) 88%,
      var(--cg-bg) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(var(--cg-yellow-rgb), 0.08) 0%, transparent 58%);
}

.hero p {
  color: var(--cg-cream);
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  letter-spacing: 0.24em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  margin-bottom: 44px;
}

/* ---------- Actions : dorées, sobres, texte anthracite --------------------- */
.btn-primary,
.btn-primary:hover,
.btn-primary:active {
  color: #17191B;
}

.btn-primary {
  background: linear-gradient(180deg, #F5CB4E 0%, var(--cg-yellow) 62%, #E9B834 100%);
  border: 0;
  padding: 16px 42px;
  font-family: var(--font-family-heading);
  font-weight: 600;
  letter-spacing: 0.18em;
  box-shadow: 0 10px 28px -12px rgba(var(--cg-yellow-rgb), 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  background: linear-gradient(180deg, #F5CB4E 0%, var(--cg-yellow) 62%, #E9B834 100%);
  box-shadow: 0 14px 34px -12px rgba(var(--cg-yellow-rgb), 0.55);
}

.btn-primary:active {
  transform: translateY(0);
}

.category-link:hover,
.category-link.active {
  color: #17191B;
}

/* ---------- Cartes : comptoir anthracite, filets fins ---------------------- */
.card,
.product-card {
  background-color: var(--cg-anthracite);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.card:hover,
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cg-yellow-rgb), 0.32);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.65);
}

.card-price,
.price {
  font-family: var(--font-family-price);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: none;
}

.price { color: var(--primary); }

/* Pastille prix des cartes : dorée, texte anthracite — même langage que .btn-primary
   (le skin mettait le texte en jaune sur la pastille jaune : illisible) */
.card-price {
  background: linear-gradient(180deg, #F5CB4E 0%, var(--cg-yellow) 62%, #E9B834 100%);
  color: #17191B;
  font-style: normal;
  font-weight: 700;
}

/* ---------- Sections : éditorial chic -------------------------------------- */
.section-subtitle {
  color: var(--primary);
  font-family: var(--font-family-heading);
  font-weight: 500;
  letter-spacing: 0.34em;
}

.section-title {
  color: var(--cg-text);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.feature-item {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(var(--cg-yellow-rgb), 0.28);
  border-radius: 0;
  padding-top: var(--space-6);
}

.feature-number {
  color: var(--primary);
  font-family: var(--font-family-heading);
  text-shadow: none;
}

.feature-title {
  color: var(--cg-text);
  letter-spacing: 0.06em;
}

/* ---------- Pre-footer : écrin anthracite, filet doré ---------------------- */
.pre-footer {
  background:
    radial-gradient(640px 220px at 50% 0%, rgba(18, 58, 46, 0.35), transparent 72%),
    var(--cg-anthracite-3);
  border: 1px solid rgba(var(--cg-yellow-rgb), 0.18);
  border-radius: var(--radius-xl);
  margin: var(--space-16) auto;
  max-width: min(920px, calc(100% - 2 * var(--container-padding)));
}

.pre-footer h2 {
  font-family: var(--font-family-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cg-text);
}

/* Icônes monolignes du header (menu, panier) */
.nav-btn .nav-ic {
  width: 21px;
  height: 21px;
  display: block;
}

/* Icônes monolignes partagées (_icons.html) */
.mini-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
}

.mini-ic.ic-lg {
  width: 26px;
  height: 26px;
  vertical-align: -6px;
}

/* ---------- Divers ---------------------------------------------------------- */
.step-fieldset {
  background: rgba(52, 58, 61, 0.5);
}

.step-fieldset legend {
  font-style: normal;
  letter-spacing: 0.16em;
  text-shadow: none;
}

::selection {
  background: rgba(var(--cg-yellow-rgb), 0.85);
  color: #17191B;
}