/* ═══════════════════════════════════════════════════════
   MIRADOR · Composants de sections
   ═══════════════════════════════════════════════════════ */

/* ── SECTION HERO ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(5rem + var(--urgence-bar-height)); /* nav + bandeau urgence */
}

/* Fond dégradé du héro */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(18,165,165,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(30,111,184,0.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  z-index: 0;
}

/* Grille décorative */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, transparent);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
}

.hero__text { max-width: 600px; }
.hero__label { margin-bottom: var(--space-6); }

.hero__title {
  margin-bottom: var(--space-6);
}
.hero__title em {
  font-style: normal;
  color: var(--color-action);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 50ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-subtle);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.02em;
}
.hero__stat-label {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}
.hero__stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}

/* Visuel droite du héro (console mockup, screenshot…) */
.hero__visual {
  position: relative;
}
.hero__visual-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: rgba(255,255,255,0.04);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  /* Remplacer par un screenshot de la console */
}

@media (max-width: 900px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .hero { min-height: 90svh; }
}

/* ── SECTION "PROBLÈMES" (3 défis) ── */
.challenges {
  background: var(--color-primary);
}
.challenges__intro {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}
.challenge-card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: var(--border-subtle);
  transition: all var(--transition-base);
}
.challenge-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(30,111,184,0.3);
  transform: translateY(-3px);
}
.challenge-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(30,111,184,0.12);
  border: 1px solid rgba(30,111,184,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--space-5);
}
.challenge-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}
.challenge-card__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.7;
}

/* ── SECTION "COMMENT ÇA MARCHE" ── */
.how-it-works { background: var(--color-primary-dark); }
.how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
/* Ligne de connexion entre les étapes */
.how-it-works__steps::before {
  content: '';
  position: absolute;
  top: 3rem;
  left: calc(16.66% + 1.5rem);
  right: calc(16.66% + 1.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-action), transparent);
}
.step {
  padding: var(--space-8);
  text-align: center;
}
.step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-action-dim);
  border: 1px solid var(--color-action-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-action);
  margin: 0 auto var(--space-5);
}
.step__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  color: var(--color-action);
}
.step__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .how-it-works__steps { grid-template-columns: 1fr; }
  .how-it-works__steps::before { display: none; }
}

/* ── SECTION OFFRES (aperçu homepage) ── */
.offers-preview { background: var(--color-primary); }
.offer-preview-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: var(--border-subtle);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all var(--transition-base);
}
.offer-preview-card--recommended {
  border-color: var(--color-action);
  background: rgba(18,165,165,0.06);
  position: relative;
}
.offer-preview-card--recommended::before {
  content: attr(data-label); /* traduit via JS i18n (data-label="Recommandée" / "Recommended") */
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-action);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.offer-preview-card:hover:not(.offer-preview-card--recommended) {
  border-color: rgba(18,165,165,0.25);
  transform: translateY(-3px);
}
.offer-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}
.offer-card__target {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.offer-card__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-action);
  letter-spacing: -0.03em;
}
.offer-card__price-unit {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  font-family: var(--font-mono);
}
.offer-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.offer-card__feature {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.offer-card__feature::before {
  content: '✓';
  color: var(--color-action);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── SECTION PREUVE SOCIALE ── */
.social-proof { background: var(--color-primary-dark); }
.logos-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding: var(--space-8) 0;
  border-block: var(--border-subtle);
  margin-bottom: var(--space-12);
}
.logos-strip__item {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Remplacer par des <img> de logos */
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-12);
}
.stat-item__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-action);
  letter-spacing: -0.03em;
}
.stat-item__label {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  margin-top: var(--space-2);
}
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.testimonial-card {
  padding: var(--space-6);
  background: rgba(255,255,255,0.04);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
}
.testimonial-card__quote {
  font-size: var(--text-base);
  color: var(--color-gray-200);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  font-style: italic;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  border: var(--border-default);
  /* Remplacer par <img> */
}
.testimonial-card__name { font-size: var(--text-sm); font-weight: 600; }
.testimonial-card__role { font-size: var(--text-xs); color: var(--color-gray-400); }

@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ── BANDEAU CTA FINAL ── */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, rgba(18,165,165,0.1) 100%);
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
  text-align: center;
  padding: var(--space-20) var(--container-pad);
}
.cta-banner__title { margin-bottom: var(--space-4); }
.cta-banner__sub {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
  max-width: 50ch;
  margin-inline: auto;
}
.cta-banner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ── FORMULAIRE CONTACT / DÉMO ── */
.form-group { margin-bottom: var(--space-5); }
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-200);
  margin-bottom: var(--space-2);
}
.form-label span { color: var(--color-alert); }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-input::placeholder { color: var(--color-gray-600); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-action);
  background: rgba(18,165,165,0.05);
}
.form-select option { background: var(--color-primary); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ── PAGE HEADER (pages internes) ── */
.page-header {
  padding-top: calc(8rem + var(--urgence-bar-height));
  padding-bottom: var(--space-16);
  background: linear-gradient(180deg, var(--color-primary-dark), var(--color-primary));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(18,165,165,0.08), transparent);
}
.page-header__content { position: relative; z-index: 1; }
.page-header__label { margin-bottom: var(--space-4); }
.page-header__title { margin-bottom: var(--space-4); }
.page-header__sub {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  max-width: 55ch;
  margin-inline: auto;
}

/* ── PLACEHOLDER IMAGE ARTICLE ── */
.card__img-placeholder {
  height: 160px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
}

/* ── RESPONSIVE — SECTION RESSOURCES ── */
.resources-header {
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── RESPONSIVE — HERO STATS (très petits écrans) ── */
@media (max-width: 480px) {
  .hero__social-proof {
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .hero__stat-value { font-size: var(--text-xl); }
  .hero__stat-divider { display: none; }
}

/* ── RESPONSIVE — BOUTONS HERO ── */
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── RESPONSIVE — CTA BANNER ── */
@media (max-width: 600px) {
  .cta-banner { padding-inline: var(--space-6); }
  .cta-banner__actions { flex-direction: column; align-items: stretch; }
  .cta-banner__actions .btn { justify-content: center; }
}

/* ── RESPONSIVE — BARRE URGENCE ── */
@media (max-width: 480px) {
  .urgence-bar { font-size: var(--text-xs); flex-wrap: wrap; }
}