/* ==========================================================================
   SECTIONS — hero, projets, méthode, avis, à propos, contact.
   ========================================================================== */

/* ---- Hero ----
   Ancrage émotionnel : plein écran d'encre sombre, particules lumineuses,
   typographie géante. Le contraste avec le reste du site (ivoire) rend
   l'arrivée mémorable — puis la lecture redevient calme. */
.hero {
  position: relative;
  /* 100svh plein (le header passe en transparent par-dessus) */
  min-height: 100svh;
  margin-top: -4rem; /* le hero remonte sous le header sticky transparent */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: radial-gradient(120% 110% at 50% 38%, #201812 0%, var(--night) 52%, var(--night-deep) 100%);
  color: var(--paper);
}

/* Voile sombre en bas du hero : le texte reste lisible quelle que soit
   la densité de l'encre derrière (fluence cognitive avant spectacle) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 9, 6, 0.72) 0%, rgba(11, 9, 6, 0.28) 34%, transparent 58%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: var(--space-7);
  padding-bottom: clamp(5rem, 12vh, 8rem);
  pointer-events: none; /* laisse le curseur jouer avec l'encre… */
}

.hero__inner a,
.hero__inner button {
  pointer-events: auto; /* …sauf sur les vrais éléments interactifs */
}

.hero__title {
  font-size: var(--text-hero);
  margin-bottom: var(--space-4);
  /* Apparition au chargement : le seul moment "orchestré" du site */
  animation: hero-rise 600ms var(--ease-out) both;
}

/* « template » barré au vermillon : le message est visuel avant d'être lu */
.hero__em {
  font-style: italic;
  color: color-mix(in srgb, var(--paper) 82%, var(--night));
  text-decoration: line-through;
  text-decoration-color: var(--accent-bright);
  text-decoration-thickness: 0.055em;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: color-mix(in srgb, var(--paper) 74%, var(--night));
  max-width: 44ch;
  margin-bottom: var(--space-5);
  animation: hero-rise 600ms var(--ease-out) 120ms both;
}

.hero__actions {
  animation: hero-rise 600ms var(--ease-out) 240ms both;
}

.hero__reassure {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--paper) 68%, var(--night));
}

/* Sur fond sombre, le CTA passe au vermillon vif (contraste vérifié) */
.hero .btn--primary {
  background: var(--accent-bright);
}

.hero .btn--primary:hover {
  background: var(--accent);
}

.eyebrow--hero {
  color: var(--accent-soft);
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Canvas de l'encre générative : toute la surface du hero */
.hero__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Grain de film : texture animée très légère par-dessus l'encre */
.hero__grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: grain-shift 0.9s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* Invitation à interagir : uniquement sur les appareils à curseur */
.hero__play-hint {
  display: none;
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-4);
  z-index: 2;
  font-size: var(--text-xs);
  font-style: italic;
  font-family: var(--font-display);
  color: color-mix(in srgb, var(--paper) 55%, var(--night));
  pointer-events: none;
}

@media (pointer: fine) {
  .hero__play-hint {
    display: block;
  }
}

/* Bouton pause de l'animation (WCAG 2.2.2) */
.hero__pause {
  position: absolute;
  left: var(--container-pad);
  bottom: var(--space-4);
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: color-mix(in srgb, var(--paper) 70%, var(--night));
  background: rgba(20, 16, 12, 0.5);
  border: 1px solid color-mix(in srgb, var(--paper) 24%, var(--night));
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.hero__pause:hover {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 55%, var(--night));
}

.hero__pause-icon--play {
  display: none;
}

.hero__pause[aria-pressed="true"] .hero__pause-icon--play {
  display: block;
}

.hero__pause[aria-pressed="true"] .hero__pause-icon--pause {
  display: none;
}

/* Indice de scroll : minuscule invitation à continuer, pas un deuxième CTA */
.hero__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--paper) 70%, var(--night));
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--paper) 24%, var(--night));
  border-radius: 50%;
  animation: hint-bob 2.4s ease-in-out infinite;
}

@keyframes hint-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-hint,
  .hero__grain {
    animation: none;
  }

  .hero__title,
  .hero__subtitle,
  .hero__actions {
    animation: none;
  }

  /* Sans animation : canvas et bouton pause masqués, le dégradé du fond
     et le « template » barré portent seuls l'identité visuelle */
  .hero__ink,
  .hero__pause,
  .hero__play-hint {
    display: none;
  }
}

/* ---- Sections alternées : ivoire / ivoire profond.
   Fluence cognitive : le changement de fond suffit à dire "nouvelle idée",
   sans traits ni décorations supplémentaires. ---- */
.section--methode,
.section--avis {
  background: var(--paper-deep);
}

/* ---- À propos ---- */
.apropos {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.apropos__media img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.apropos__body h2 {
  margin-bottom: var(--space-4);
}

.apropos__body p + p {
  margin-top: var(--space-3);
}

.apropos__points {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.apropos__points li {
  padding-left: var(--space-4);
  position: relative;
}

/* Puce vermillon : rappel de l'accent, cohérence du système */
.apropos__points li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-bright);
}

@media (min-width: 48rem) {
  .apropos {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-6);
  }
}

/* ---- Contact ----
   Inversion ivoire → encre : contraste maximal réservé à la fin du parcours.
   Effet Von Restorff appliqué à l'échelle de la page : la section conversion
   est la plus singulière visuellement. ---- */
.section--contact {
  background: var(--ink);
  color: var(--paper);
}

/* Un seul canal, une seule colonne : le bouton WhatsApp est la destination
   finale du parcours — rien ne le concurrence */
.contact {
  max-width: 44rem;
}

.contact__lede {
  font-size: var(--text-lg);
  color: color-mix(in srgb, var(--paper) 78%, var(--ink));
  max-width: 40ch;
  margin-top: var(--space-3);
}

.contact__whatsapp {
  margin-top: var(--space-5);
}

/* Bouton final plus généreux : cible facile, poids visuel de conclusion */
.btn--large {
  padding: 1.125rem 2.5rem;
  font-size: var(--text-lg);
}

.contact__direct {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--paper) 78%, var(--ink));
}

.contact__note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, var(--ink));
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--paper) 68%, var(--ink));
  max-width: 52ch;
}

.contact__direct a,
.contact__note a {
  color: color-mix(in srgb, var(--paper) 88%, var(--ink));
  text-decoration-color: var(--accent-bright);
}

/* Sur fond sombre, le vermillon vif reste bien contrasté pour le bouton */
.section--contact .btn--primary {
  background: var(--accent-bright);
}

.section--contact .btn--primary:hover {
  background: var(--accent);
}