/* ==========================================================================
   Plasticomm — Design system & styles personnalisés
   Complète Tailwind (CDN). Poppins est la seule police utilisée.
   Palette : rouge #8C0202 dominant, blanc #FFFFFF dominant, accents chauds.
   ========================================================================== */

:root {
  --pc-primary: #8C0202;
  --pc-secondary: #B71C1C;
  --pc-accent: #EF9A9A;
  --pc-bg: #FAFAFA;
  --pc-ink: #1A0505;
  --pc-muted: #5C3030;
  --pc-card: #FFFFFF;
  --pc-line: rgba(140, 2, 2, 0.12);
  --pc-ring: rgba(183, 28, 28, 0.38);
  --pc-shadow: 0 18px 40px -24px rgba(140, 2, 2, 0.32);
}

.dark {
  --pc-bg: #120505;
  --pc-ink: #F5E8E8;
  --pc-muted: #C49090;
  --pc-card: #1E0808;
  --pc-line: rgba(239, 154, 154, 0.14);
  --pc-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: var(--pc-bg);
  color: var(--pc-ink);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

/* ---- Surfaces ------------------------------------------------------------ */
.pc-card {
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  border-radius: 20px;
  box-shadow: var(--pc-shadow);
}

.pc-soft {
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  border-radius: 20px;
}

.pc-muted { color: var(--pc-muted); }

.pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pc-primary);
}
.dark .pc-eyebrow { color: var(--pc-accent); }

/* ---- Gradient text & boutons --------------------------------------------- */
.pc-gradient-text {
  background: linear-gradient(120deg, var(--pc-primary), var(--pc-secondary) 55%, #E57373);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .85rem 1.6rem;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  will-change: transform;
}
.pc-btn:focus-visible { outline: 3px solid var(--pc-ring); outline-offset: 3px; }

.pc-btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--pc-primary), var(--pc-secondary));
  box-shadow: 0 14px 30px -14px rgba(140, 2, 2, 0.65);
}
.pc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(140, 2, 2, 0.85); }

.pc-btn-ghost {
  color: var(--pc-primary);
  background: transparent;
  border: 1.5px solid var(--pc-line);
}
.dark .pc-btn-ghost { color: var(--pc-accent); }
.pc-btn-ghost:hover { transform: translateY(-2px); border-color: var(--pc-secondary); }

/* ---- Séparateur organique ----------------------------------------------- */
.pc-wave { display: block; width: 100%; height: auto; line-height: 0; }

.pc-rule {
  height: 3px; width: 64px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pc-primary), var(--pc-accent));
}

/* ---- Hover lift ---------------------------------------------------------- */
.pc-lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pc-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -28px rgba(140, 2, 2, 0.45);
  border-color: var(--pc-accent);
}

/* ---- Navbar ------------------------------------------------------------- */
.pc-nav {
  background: color-mix(in srgb, var(--pc-bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.pc-nav.is-scrolled {
  border-bottom-color: var(--pc-line);
  box-shadow: 0 10px 30px -22px rgba(140, 2, 2, 0.4);
}

.pc-navlink {
  position: relative;
  color: var(--pc-muted);
  font-weight: 500;
  transition: color .2s ease;
}
.pc-navlink::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--pc-primary), var(--pc-accent));
  transition: width .25s ease;
}
.pc-navlink:hover, .pc-navlink[aria-current="page"] { color: var(--pc-ink); }
.pc-navlink:hover::after, .pc-navlink[aria-current="page"]::after { width: 100%; }

/* ---- Menu mobile -------------------------------------------------------- */
.pc-mobile-menu {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.pc-mobile-menu.open { max-height: 560px; }

/* ---- Accordéon FAQ ------------------------------------------------------ */
.pc-faq-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.pc-faq-item.open .pc-faq-panel { max-height: 400px; }
.pc-faq-item.open .pc-faq-chevron { transform: rotate(180deg); }
.pc-faq-chevron { transition: transform .3s ease; }

/* ---- Retour en haut ------------------------------------------------------ */
#backToTop {
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- Formulaires --------------------------------------------------------- */
.pc-input {
  width: 100%;
  border-radius: 14px;
  border: 1.5px solid var(--pc-line);
  background: var(--pc-card);
  color: var(--pc-ink);
  padding: .85rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pc-input::placeholder { color: var(--pc-muted); opacity: .8; }
.pc-input:focus {
  outline: none;
  border-color: var(--pc-secondary);
  box-shadow: 0 0 0 4px var(--pc-ring);
}

/* ---- Arrière-plan aurora hero ------------------------------------------- */
.pc-aurora {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.pc-aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35;
}
.pc-aurora span:nth-child(1) { width: 460px; height: 460px; top: -120px; right: -80px; background: var(--pc-accent); }
.pc-aurora span:nth-child(2) { width: 380px; height: 380px; bottom: -140px; left: -60px; background: var(--pc-secondary); opacity: .22; }
.dark .pc-aurora span { opacity: .18; }

/* ---- Compteurs ----------------------------------------------------------- */
.pc-stat-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Accessibilité & préférences de mouvement
   ========================================================================== */
:focus-visible { outline: 3px solid var(--pc-ring); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--pc-primary); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}