/*
Theme Name: Plein Phare Digital
Theme URI: https://www.plein-phare-digital.fr
Description: Theme enfant Kadence pour le site commercial Plein Phare Digital
Author: Fast Growth Advisors
Author URI: https://fast-growth.fr
Template: kadence
Version: 1.1.0
Text Domain: ppd
*/

/* ─── Design System ─── */
:root {
  /* Couleurs principales */
  --ppd-bg-primary: #020617;       /* slate-950 */
  --ppd-bg-secondary: #0c1a30;    /* slate-900 custom */
  --ppd-bg-card: rgba(255, 255, 255, 0.03);
  --ppd-border: rgba(255, 255, 255, 0.06);
  --ppd-border-hover: rgba(255, 255, 255, 0.10);

  /* Accent jaune */
  --ppd-yellow: #facc15;
  --ppd-yellow-dark: #f5bc42;
  --ppd-yellow-glow: rgba(250, 204, 21, 0.20);

  /* Texte */
  --ppd-text-primary: #ffffff;
  --ppd-text-secondary: #9ca3af;   /* gray-400 */
  --ppd-text-muted: #6b7280;      /* gray-500 */

  /* Signaux */
  --ppd-green: #22c55e;
  --ppd-red: #f87171;
  --ppd-blue: #3b82f6;

  /* Typographie */
  --ppd-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ppd-font-heading: 'Playfair Display', Georgia, serif;

  /* Espacements */
  --ppd-section-py: clamp(4rem, 8vw, 7rem);
  --ppd-section-px: clamp(1.5rem, 4vw, 3rem);
  --ppd-container-max: 1200px;

  /* Transitions */
  --ppd-transition: 200ms ease;
}

/* ─── Reset Kadence — overrides agressifs ─── */
body.ppd-page,
body.ppd-page .site {
  background-color: var(--ppd-bg-primary) !important;
  color: var(--ppd-text-primary) !important;
  font-family: var(--ppd-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Forcer la couleur blanche sur TOUS les headings dans le wrapper PPD */
.ppd-page-wrapper h1,
.ppd-page-wrapper h2,
.ppd-page-wrapper h3,
.ppd-page-wrapper h4,
.ppd-page-wrapper h5,
.ppd-page-wrapper h6 {
  color: var(--ppd-text-primary) !important;
}

/* Forcer les paragraphes */
.ppd-page-wrapper p {
  color: var(--ppd-text-secondary);
}

/* L'accent jaune doit gagner sur le blanc */
.ppd-page-wrapper .ppd-text-accent {
  color: var(--ppd-yellow) !important;
}

/* Masquer le header/footer Kadence */
body.ppd-page .site-header,
body.ppd-page .site-footer,
body.ppd-page .site-header-wrap,
body.ppd-page #masthead,
body.ppd-page .site-footer-wrap,
body.ppd-page #colophon {
  display: none !important;
}

/* Masquer aussi la barre de recherche et icone Kadence */
body.ppd-page .kadence-search-icon-wrap,
body.ppd-page .search-toggle-icon {
  display: none !important;
}

/* Le contenu prend toute la largeur */
body.ppd-page .site-container,
body.ppd-page .site,
body.ppd-page .content-wrap,
body.ppd-page .site-main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Admin bar offset */
body.admin-bar .ppd-nav {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .ppd-nav {
    top: 46px;
  }
}

/* ─── Container ─── */
.ppd-container {
  max-width: var(--ppd-container-max);
  margin: 0 auto;
  padding-left: var(--ppd-section-px);
  padding-right: var(--ppd-section-px);
}

/* ─── Sections ─── */
.ppd-section {
  padding-top: var(--ppd-section-py);
  padding-bottom: var(--ppd-section-py);
}

/* ─── Typography ─── */
.ppd-heading {
  font-family: var(--ppd-font-heading) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ppd-text-primary) !important;
}

.ppd-heading-xl {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.ppd-heading-lg {
  font-size: clamp(2rem, 4vw, 3rem);
}

.ppd-heading-md {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.ppd-body {
  font-family: var(--ppd-font-body) !important;
  font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
  line-height: 1.7 !important;
  color: var(--ppd-text-secondary) !important;
}

.ppd-text-accent {
  color: var(--ppd-yellow);
}

/* ─── Boutons ─── */
.ppd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  font-family: var(--ppd-font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--ppd-transition);
  cursor: pointer;
  border: none;
}

.ppd-btn-primary,
.ppd-btn-primary:link,
.ppd-btn-primary:visited {
  background-color: var(--ppd-yellow) !important;
  color: var(--ppd-bg-primary) !important;
}

.ppd-btn-primary:hover {
  background-color: var(--ppd-yellow-dark) !important;
  color: var(--ppd-bg-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--ppd-yellow-glow);
}

.ppd-btn-outline,
.ppd-btn-outline:link,
.ppd-btn-outline:visited {
  background: transparent !important;
  color: var(--ppd-text-primary) !important;
  border: 1px solid var(--ppd-border) !important;
}

.ppd-btn-outline:hover {
  border-color: var(--ppd-border-hover) !important;
  background: var(--ppd-bg-card) !important;
  color: var(--ppd-text-primary) !important;
}

/* ─── Cards ─── */
.ppd-card {
  background: var(--ppd-bg-card);
  border: 1px solid var(--ppd-border);
  border-radius: 1rem;
  padding: 2rem;
  transition: border-color var(--ppd-transition);
}

.ppd-card:hover {
  border-color: var(--ppd-border-hover);
}

/* Titres dans les cards */
.ppd-card h3 {
  color: var(--ppd-text-primary) !important;
  font-family: var(--ppd-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
}

.ppd-card-highlight {
  border-color: var(--ppd-yellow);
  position: relative;
}

/* ─── Grille ─── */
.ppd-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.ppd-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ppd-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ppd-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Navbar ─── */
.ppd-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(2, 6, 23, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ppd-border);
  padding: 0 var(--ppd-section-px);
}

.ppd-nav-inner {
  max-width: var(--ppd-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.ppd-nav-logo,
.ppd-nav-logo:link,
.ppd-nav-logo:visited,
.ppd-nav-logo:hover {
  font-family: var(--ppd-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: var(--ppd-text-primary) !important;
  text-decoration: none !important;
}

.ppd-nav-links {
  display: none;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.ppd-nav-links li {
  list-style: none !important;
}

.ppd-nav-links a,
.ppd-nav-links a:link,
.ppd-nav-links a:visited {
  color: var(--ppd-text-secondary) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color var(--ppd-transition);
}

.ppd-nav-links a:hover {
  color: var(--ppd-text-primary) !important;
}

/* Le CTA dans le nav garde son style bouton */
.ppd-nav-links .ppd-btn-primary,
.ppd-nav-links .ppd-btn-primary:link,
.ppd-nav-links .ppd-btn-primary:visited {
  color: var(--ppd-bg-primary) !important;
  background-color: var(--ppd-yellow) !important;
}

@media (min-width: 768px) {
  .ppd-nav-links {
    display: flex !important;
    align-items: center;
  }
  .ppd-nav-mobile-toggle {
    display: none !important;
  }
}

/* Menu mobile */
.ppd-nav-mobile-toggle {
  background: none;
  border: none;
  color: var(--ppd-text-secondary);
  cursor: pointer;
  padding: 0.5rem;
}

.ppd-nav-mobile {
  display: none;
  position: fixed;
  top: 4rem;
  left: 0;
  right: 0;
  background: rgba(2, 6, 23, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ppd-border);
  padding: 1rem var(--ppd-section-px);
}

.ppd-nav-mobile.active {
  display: block;
}

.ppd-nav-mobile a {
  display: block;
  color: var(--ppd-text-secondary);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ppd-border);
}

/* ─── FAQ Accordion ─── */
.ppd-faq-item {
  border-bottom: 1px solid var(--ppd-border);
}

.ppd-faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--ppd-text-primary);
  font-family: var(--ppd-font-body);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  padding: 1.5rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ppd-faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--ppd-yellow);
  transition: transform var(--ppd-transition);
}

.ppd-faq-item.open .ppd-faq-question::after {
  content: '−';
}

.ppd-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

.ppd-faq-item.open .ppd-faq-answer {
  max-height: 500px;
}

.ppd-faq-answer p {
  padding-bottom: 1.5rem;
  color: var(--ppd-text-secondary);
  line-height: 1.7;
}

/* ─── Footer ─── */
.ppd-footer {
  background: var(--ppd-bg-primary);
  border-top: 1px solid var(--ppd-border);
  padding: 4rem var(--ppd-section-px) 2rem;
}

.ppd-footer-inner {
  max-width: var(--ppd-container-max);
  margin: 0 auto;
}

.ppd-footer a,
.ppd-footer a:link,
.ppd-footer a:visited {
  color: var(--ppd-text-secondary) !important;
  text-decoration: none !important;
  transition: color var(--ppd-transition);
}

.ppd-footer a:hover {
  color: var(--ppd-text-primary) !important;
}

/* ─── Badge ─── */
.ppd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: var(--ppd-yellow);
  background: rgba(250, 204, 21, 0.08);
}

/* Point qui pulse dans le badge */
.ppd-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ppd-yellow);
  display: inline-block;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* ─── Section label (surtitre) ─── */
.ppd-section-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--ppd-yellow) !important;
  margin-bottom: 1rem !important;
  font-family: var(--ppd-font-body) !important;
}

/* ─── Pricing highlight ─── */
.ppd-pricing-popular {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ppd-yellow);
  color: var(--ppd-bg-primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Stats ─── */
.ppd-stat-number {
  font-family: var(--ppd-font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--ppd-yellow);
  line-height: 1;
}

/* ─── Utilitaires ─── */
.ppd-text-center { text-align: center; }
.ppd-mx-auto { margin-left: auto; margin-right: auto; }
.ppd-mb-2 { margin-bottom: 0.5rem; }
.ppd-mb-4 { margin-bottom: 1rem; }
.ppd-mb-6 { margin-bottom: 1.5rem; }
.ppd-mb-8 { margin-bottom: 2rem; }
.ppd-mb-12 { margin-bottom: 3rem; }
.ppd-mb-16 { margin-bottom: 4rem; }
.ppd-mt-4 { margin-top: 1rem; }
.ppd-mt-8 { margin-top: 2rem; }
.ppd-max-w-2xl { max-width: 42rem; }
.ppd-max-w-3xl { max-width: 48rem; }

/* ─── Hero beam (phare) ─── */
.ppd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--ppd-bg-primary), #0c1a30, var(--ppd-bg-primary));
}

/* Copie exacte du template : div 600x600, positionne en haut centre,
   gradient vertical jaune->transparent, pivot en bas, rotation +-15deg */
.ppd-hero-beam {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  opacity: 0.2;
  pointer-events: none;
  transform-origin: bottom;
  animation: beamSweep 6s ease-in-out infinite;
}

.ppd-hero-beam-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(250, 204, 21, 0.30), rgba(250, 204, 21, 0.05), transparent);
  clip-path: polygon(45% 0%, 55% 0%, 80% 100%, 20% 100%);
}

@keyframes beamSweep {
  0%   { opacity: 0.3; transform: rotate(-15deg); }
  50%  { opacity: 0.6; transform: rotate(15deg); }
  100% { opacity: 0.3; transform: rotate(-15deg); }
}

/* Glow doux sous le texte hero */
.ppd-hero-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(250, 204, 21, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Le contenu hero au-dessus du beam */
.ppd-hero-content {
  position: relative;
  z-index: 2;
}

/* ─── Animations ─── */
@media (prefers-reduced-motion: no-preference) {
  .ppd-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .ppd-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppd-hero-beam {
    animation: none;
    opacity: 0.2;
  }
}