/* =========================================================================
   styles-alt1.css — Couche d'enrichissement "moderne & affirmé"
   Chargée APRÈS styles.css, uniquement par index-alt1.php (body.alt1).
   N'écrase jamais styles.css : elle ajoute mouvement, couleur et relief.
   Tout est désactivé si l'utilisateur demande "moins d'animations"
   (prefers-reduced-motion), conformément à l'accessibilité.
   ========================================================================= */

/* --------- 1. HERO : cascade "La logique de la méthode" du haut vers le bas ---
   Révélation en rideau (clip-path) au chargement de la page. --------------- */
.alt1 .a1-casc {
  animation: a1-wipe 1.1s cubic-bezier(.4, 0, .2, 1) .15s both;
}
@keyframes a1-wipe {
  from { clip-path: inset(0 0 100% 0); opacity: .2; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1;  }
}
/* Le "cœur" (première brique de la chaîne) reçoit une pulsation d'accent. */
.alt1 .a1-casc .c-start {
  animation: a1-pulse 3.2s ease-in-out 1.3s infinite;
}
@keyframes a1-pulse {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 6px rgba(224, 145, 58, .55)); }
}

/* --------- 2. "LE POINT DE DÉPART" : apparition des points par la droite -----
   La liste .risk-list reçoit .a1-stagger ; le script pose --i sur chaque <li>
   et ajoute .a1-in quand la section entre dans le champ de vision. ---------- */
.alt1 .a1-stagger > * {
  opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.alt1 .a1-stagger.a1-in > * { opacity: 1; transform: none; }
.alt1 .risk-list.a1-stagger > li  { transform: translateX(28px); position: relative; }
.alt1 .stats.a1-stagger > .stat   { transform: translateY(22px); }
/* Filet d'accent orange qui se déploie sous chaque point révélé. */
.alt1 .risk-list li::after {
  content: "";
  position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--signal), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s ease;
  transition-delay: calc(var(--i, 0) * 100ms + .2s);
}
.alt1 .a1-stagger.a1-in li::after { transform: scaleX(1); }
.alt1 .risk-list .mark {
  transition: transform .3s ease, color .3s ease;
}
.alt1 .risk-list li:hover .mark { transform: translateX(3px); color: var(--accent-bright); }

/* --------- 3. "LA MÉTHODE" (section ink) : du relief -------------------------
   Fond animé discret (lueur + trame) + cartes de stats vivantes. ----------- */
.alt1 .a1-method { position: relative; overflow: hidden; }
.alt1 .a1-method::before {          /* lueur d'accent qui respire */
  content: "";
  position: absolute; inset: -20% -10% auto auto; width: 60%; height: 140%;
  background:
    radial-gradient(closest-side, rgba(54, 166, 230, .16), transparent 70%),
    radial-gradient(closest-side, rgba(224, 145, 58, .10), transparent 70%);
  background-position: 20% 20%, 80% 60%;
  background-repeat: no-repeat;
  background-size: 55% 55%, 45% 45%;
  animation: a1-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes a1-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 4%, 0) scale(1.08); }
}
.alt1 .a1-method > .wrap { position: relative; z-index: 1; }

/* Grille de fond (motif "mesure"), très discrète, injectée en SVG décoratif */
.alt1 .a1-mesh {           /* image externe : images-alt1/mesh.svg (animée en interne) */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; pointer-events: none; z-index: 0;
}

/* Cartes de stats : barre d'accent qui se trace + soulèvement au survol */
.alt1 .a1-method .stat {
  padding: 22px 20px 20px; border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-dark);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
}
.alt1 .a1-method .stat::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent-bright), var(--signal));
  transform: scaleX(0); transform-origin: left; transition: transform .6s ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}
.alt1 .a1-method .a1-stagger.a1-in .stat::before,
.alt1 .a1-method.a1-in .stat::before { transform: scaleX(1); }
.alt1 .a1-method .stat:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7);
}
.alt1 .a1-method .stat b {
  background: linear-gradient(90deg, #fff, var(--accent-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------- 4. MICRO-INTERACTIONS (classes existantes, sans toucher au HTML) - */
/* Piliers : soulèvement + numéro qui s'affirme + liseré d'accent */
.alt1 .pillar { transition: background .2s ease, transform .25s ease, box-shadow .25s ease; }
.alt1 .pillar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--accent), var(--accent-bright));
  opacity: 0; transition: opacity .25s ease;
}
.alt1 .pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(12, 28, 46, .55);
  z-index: 1;
}
.alt1 .pillar:hover::before { opacity: 1; }
.alt1 .pillar:hover .pillar__no { color: var(--signal); }

/* Cartes secteurs : soulèvement + icône qui s'anime */
.alt1 .sector { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.alt1 .sector:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(12, 28, 46, .45);
  border-color: var(--accent);
}
.alt1 .sector:hover .sector__icon { transform: rotate(45deg) scale(1.12); color: var(--signal); }
.alt1 .sector__icon { transition: transform .35s ease, color .35s ease; display: inline-block; }

/* Étapes de la démarche : puce numérotée qui s'illumine au survol */
.alt1 .step { transition: transform .2s ease; }
.alt1 .step:hover { transform: translateX(4px); }
.alt1 .step:hover .step__no { color: var(--accent); }
.alt1 .step__no { transition: color .25s ease; }

/* Boutons : dégradé subtil + lueur + flèche qui avance */
.alt1 .btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--ink-3));
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.alt1 .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(26, 111, 189, .7);
  filter: saturate(1.1);
}
.alt1 .btn .arr { transition: transform .2s ease; display: inline-block; }
.alt1 .btn:hover .arr { transform: translateX(4px); }

/* Bandeau CTA : fond dégradé affirmé + lueur d'accent */
.alt1 .cta-band {
  background: linear-gradient(120deg, var(--ink), var(--ink-3));
  position: relative; overflow: hidden;
}
.alt1 .cta-band::after {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 50%; height: 160%;
  background: radial-gradient(closest-side, rgba(224, 145, 58, .18), transparent 70%);
  animation: a1-drift 14s ease-in-out infinite alternate; pointer-events: none;
}

/* Bandeau eyebrow : le tiret initial prend l'accent */
.alt1 .eyebrow { transition: color .3s ease; }

/* Titres de section : petit soulignement d'accent animé au survol du bloc */
.alt1 .sec-head h2 { position: relative; display: inline-block; }
.alt1 .sec-head h2::after {
  content: ""; position: absolute; left: 0; bottom: -.12em; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--signal), var(--accent-bright));
  transition: width .5s ease; border-radius: 3px;
}
.alt1 .sec-head:hover h2::after { width: 2.4em; }

/* --------- 5. RESPECT DE prefers-reduced-motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .alt1 .a1-casc { animation: none; clip-path: none; }
  .alt1 .a1-casc .c-start,
  .alt1 .a1-method::before, .alt1 .cta-band::after { animation: none; }
  .alt1 .a1-stagger > * { opacity: 1; transform: none; transition: none; }
  .alt1 .risk-list li::after,
  .alt1 .a1-method .stat::before { transform: scaleX(1); transition: none; }
  .alt1 .pillar, .alt1 .sector, .alt1 .step, .alt1 .btn--primary, .alt1 .stat { transition: none; }
}