/* ===========================================
   AUDIENCE — "Particuliers ou professionnels"
   Section avec titre bicolore + 2 cards (Particuliers/Pro).
   Desktop : cards côte-à-côte. Tablet/mobile : stacked.
   Cards : brutalist shadow + bordure + image + textes + CTA.
   Couleurs différentes par card (accent orange vs mint).
   =========================================== */

.audience {
  position: relative;
  padding: 60px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

/* --- Wrapper card + soleil ---
   Pattern "card + decor sibling" : le sun et la card sont frères
   dans un parent positionné. Le sun est en z-index 0, la card en
   z-index 1 → la card recouvre le sun là où ils se chevauchent,
   mais la partie qui dépasse la card est visible. Ce pattern est
   plus fiable que z-index: -1 (qui a des edge cases). */
.audience-card-wrap {
  position: relative;
  width: 476px;
}

/* Le SVG est inline dans le HTML avec fill="currentColor" → contrôle
   total de la couleur via la propriété CSS color du parent.
   Plus de mask, plus de double-opacité, fonctionne dans tous les
   browsers sans dépendance sur les caprices du mask-mode. */
.audience-card__sun {
  position: absolute;
  width: 408px;
  height: 408px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Particulier : sun orange, centré à 1/3 du haut du wrapper,
   décalé à gauche (la moitié du sun déborde à gauche du bord). */
.audience-card-wrap--particulier .audience-card__sun {
  top: 33%;
  left: 0;
  transform: translate(-50%, -50%);
  color: var(--color-accent);
}

/* Pro : sun mint, centré à 1/3 du bas du wrapper,
   décalé à droite (la moitié du sun déborde à droite du bord). */
.audience-card-wrap--professionnel .audience-card__sun {
  bottom: 33%;
  right: 0;
  transform: translate(50%, 50%);
  color: var(--color-mint);
}

/* --- Titre principal ---
   Reproduit Figma Frame 21 : padding 10 0 sur desktop/tablet,
   10 20 sur mobile (le titre a un padding horizontal en plus). */
.audience__heading {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  padding: 10px 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  text-align: center;
  color: var(--color-text);
  margin: 0;
}

.audience__heading-accent {
  color: var(--color-accent);
}

/* --- Container des 2 cards ---
   Reproduit Figma Frame 23 : padding 10 0 sur tous les breakpoints. */
.audience__cards {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 100px;
  padding: 10px 0;
  width: 100%;
  max-width: 1400px;
}

/* --- Card --- */
.audience-card {
  position: relative; /* contexte pour l'overlay ::after du CTA */
  z-index: 1; /* au-dessus du sun frère dans le wrapper */
  cursor: pointer; /* signal : toute la card est cliquable */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%; /* prend la largeur du wrapper */
  height: 100%; /* prend la hauteur du wrapper → les 2 cards toujours même hauteur */
  padding: 10px 10px 30px 10px;
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  /* Brutalist shadow statique — couleur surchargée par variant via --card-shadow-color */
  box-shadow: 8px 8px 0 0 var(--card-shadow-color, var(--color-accent));
}

/* Désactive l'ombre propre du bouton à l'intérieur des cards :
   la card gère tous les effets visuels. Évite la double-shadow. */
.audience-card .btn--ghost,
.audience-card .btn--ghost:hover,
.audience-card .btn--ghost:active {
  box-shadow: none;
  transition: none;
}

.audience-card--professionnel {
  --card-shadow-color: var(--color-mint-dark);
}

.audience-card--professionnel .btn--ghost {
  --btn-ghost-color: var(--color-mint-dark);
}

/* --- Image de la card --- */
.audience-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 456 / 340;
  object-fit: cover;
}

/* --- Titre de la card (PARTICULIERS / PROFESSIONNELS) --- */
.audience-card__title {
  margin: 0;
  padding: 10px;
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 36px;
  text-align: center;
  color: var(--color-text);
}

/* --- Tagline --- */
.audience-card__tagline {
  margin: 0;
  padding: 10px;
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-text);
}

/* --- Description --- */
.audience-card__description {
  margin: 0;
  padding: 10px;
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-text);
}

/* --- Liste des cibles --- */
.audience-card__targets {
  list-style: none;
  margin: 0;
  padding: 10px;
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-text);
}

/* --- CTA wrapper ---
   margin-top: auto → pousse le wrapper en bas de la card, même quand
   la card est étirée (en row layout via align-items: stretch du parent).
   Les CTA des 2 cards restent ainsi alignés en bas. */
.audience-card__cta-wrapper {
  margin-top: auto;
  padding: 20px 10px 0 10px;
}

/* --- CTA "bouton" (devient un span purement visuel) ---
   Pattern "stretched link" : le clic réel est sur un <a> absolu qui
   recouvre toute la card. Le bouton ici est juste visuel + accueille
   l'effet swipe-fill. */
.audience-card__cta {
  position: relative;
  width: 100%;
  font-size: 20px;
  line-height: 30px;
  gap: 5px;
}

/* Couche de swipe-fill : un span absolu avec une copie du texte+flèche
   dans les couleurs cibles. Background ET texte sont sur la MÊME couche,
   donc se révèlent en parfait sync via clip-path gauche→droite. */
.audience-card__cta-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--btn-ghost-color, var(--color-accent));
  color: var(--cta-fill-text-color, var(--color-white));
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--transition-base);
  pointer-events: none; /* le lien stretched gère les clics */
}

/* Hover anywhere sur la card → swipe-fill se déroule */
.audience-card:hover .audience-card__cta-fill {
  clip-path: inset(0 0 0 0);
}

/* Pro card : fill au hover = mint-dark (= couleur de l'ombre + bordure/texte
   au repos), texte révélé en blanc pour contraste sur fond foncé. Uniforme
   avec la carte Pro de la page devis. */
.audience-card--professionnel {
  --cta-fill-text-color: var(--color-white);
}

.audience-card--professionnel .audience-card__cta-fill {
  background: var(--color-mint-dark);
}

/* Au hover, la bordure du CTA reste en mint-dark (= même couleur que le fill
   et que la bordure au repos) — pas de transition de couleur nécessaire. */
.audience-card--professionnel .audience-card__cta {
  transition: border-color var(--transition-base);
}

.audience-card--professionnel:hover .audience-card__cta {
  border-color: var(--color-mint-dark);
}

/* --- Stretched link ---
   Lien invisible mais absolu qui couvre la card entière → toute la
   card est cliquable, sans JS, et le <a> reste un vrai lien HTML
   (SEO + a11y OK). aria-label porte le texte du lien. */
.audience-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Flèche de la CTA */
.audience-card__cta-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ============================
   TABLET (768-1199px)
   Cards stacked, titre 36px.
   ============================ */
@media (max-width: 1199px) {
  .audience {
    padding: 100px 85px;
  }

  .audience__heading {
    font-size: 36px;
    line-height: 54px;
  }

  .audience__cards {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
}

/* ============================
   MOBILE (< 768px)
   Cards full-width, textes plus petits.
   Padding spécial sur le titre (Frame 21 mobile = 10 20).
   ============================ */
@media (max-width: 767px) {
  .audience {
    padding: 60px 20px;
  }

  .audience__heading {
    font-size: 32px;
    line-height: 48px;
    text-align: left;
    padding: 10px 20px;
  }

  .audience-card-wrap {
    width: 100%;
    max-width: 353px;
  }

  .audience-card__tagline,
  .audience-card__description,
  .audience-card__targets {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Reveal au scroll : titre puis les 2 cartes en cascade (slide-up).
   Déclenché par .is-visible ajouté par js/reveal.js. */
@keyframes audience-reveal {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scoped sous .js : si JS désactivé/cassé, contenu visible par défaut. */
.js .audience[data-reveal] .audience__heading,
.js .audience[data-reveal] .audience-card-wrap {
  opacity: 0;
}

.audience.is-visible .audience__heading,
.audience.is-visible .audience-card-wrap {
  animation: audience-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.audience.is-visible .audience__heading                  { animation-delay:   0ms; }
.audience.is-visible .audience-card-wrap--particulier    { animation-delay: 400ms; }
.audience.is-visible .audience-card-wrap--professionnel  { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .audience[data-reveal] .audience__heading,
  .audience[data-reveal] .audience-card-wrap,
  .audience.is-visible .audience__heading,
  .audience.is-visible .audience-card-wrap {
    opacity: 1;
    animation: none;
  }
}

/* Rotation des soleils liée au scroll. Chaque soleil a son propre
   keyframe avec le translate baked-in pour que la rotation se compose
   APRÈS le translate (sinon le translate s'applique dans le repère
   rotaté → le soleil pivote en arc au lieu de tourner sur place). */
@keyframes sun-spin-particulier {
  to { transform: translate(-50%, -50%) rotate(270deg); }
}

@keyframes sun-spin-professionnel {
  to { transform: translate(50%, 50%) rotate(270deg); }
}

.audience {
  view-timeline-name: --audience-view;
}

.audience-card-wrap--particulier .audience-card__sun {
  animation: sun-spin-particulier linear;
  animation-timeline: --audience-view;
}

.audience-card-wrap--professionnel .audience-card__sun {
  animation: sun-spin-professionnel linear;
  animation-timeline: --audience-view;
}

@media (prefers-reduced-motion: reduce) {
  .audience-card__sun {
    animation: none;
  }
}