/* Effets de l'accueil (bandeau de chiffres, cartes d'expertise) et frise des étapes (accueil, Méthode, prestations, outils).
   Chargé par scripts/templates.mjs (fx) avec assets/js/home-fx.js. Sans JS : tout reste visible (état final).
   Mouvements réduits (système ou .a11y-rm) : aucune animation, état final affiché. */

/* ── 1. Bandeau de chiffres ─────────────────────────────────────────── */
.proof { position: relative; isolation: isolate;
  background: radial-gradient(60% 120% at 50% 0%, rgba(224, 153, 92, .08), transparent 70%), radial-gradient(50% 90% at 0% 100%, rgba(95, 176, 98, .06), transparent 60%), var(--ink); }
.proof ul { position: relative; border-top-color: rgba(201, 198, 244, .08); }
/* Filet supérieur cuivre/vert qui se trace à l'apparition */
.proof ul::before { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(224, 153, 92, .75) 18%, rgba(111, 210, 122, .5) 62%, transparent);
  transform-origin: left; transition: transform 1.6s var(--ease); }
[dir="rtl"] .proof ul::before { transform-origin: right; background: linear-gradient(270deg, transparent, rgba(224, 153, 92, .75) 18%, rgba(111, 210, 122, .5) 62%, transparent); }
.proof li { position: relative; border-inline-end: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 130ms); }
/* Séparateurs : filet dégradé + repère (borne) à la jonction avec le filet supérieur */
.proof li::after { content: ""; position: absolute; inset-inline-end: 0; top: 1.4rem; bottom: .2rem; width: 1px; pointer-events: none;
  background: linear-gradient(rgba(201, 198, 244, .32), rgba(201, 198, 244, .1) 70%, transparent); }
.proof li::before { content: ""; position: absolute; inset-inline-end: -4px; top: -4px; width: 7px; height: 7px; transform: rotate(45deg); pointer-events: none;
  background: var(--ink); border: 1px solid rgba(224, 153, 92, .8); box-shadow: 0 0 8px rgba(224, 153, 92, .45); }
.proof li:last-child::after, .proof li:last-child::before { display: none; }
.proof .pf-ic { width: 30px; height: 30px; margin-bottom: .9rem; color: rgba(201, 198, 244, .78); overflow: visible; }
.proof .pf-ic .acc { color: var(--copper-l); }
.proof .pf-ic * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease); transition-delay: calc(var(--i, 0) * 130ms + .2s); }
.proof .pf-ic .acc { transition-delay: calc(var(--i, 0) * 130ms + .9s); }
.proof b { text-shadow: 0 0 28px rgba(224, 153, 92, .22); }
/* État avant apparition (seulement avec JS : .no-js retiré dès l'en-tête) */
html:not(.no-js) .proof:not(.in) ul::before { transform: scaleX(0); }
html:not(.no-js) .proof:not(.in) li { opacity: 0; transform: translateY(16px); }
html:not(.no-js) .proof:not(.in) .pf-ic * { stroke-dashoffset: 1; }
@media (max-width: 800px) {
  .proof li { border: 0 !important; }
  .proof li::after, .proof li::before { display: none; }
}

/* ── 2. Frise des étapes (.steps.fx posé par home-fx.js) ────────────── */
.method { background: radial-gradient(70% 60% at 88% 0%, rgba(224, 153, 92, .10), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(95, 176, 98, .08), transparent 60%), var(--ink); }
.steps.fx::before, .steps.fx::after { content: ""; position: absolute; inset: auto; left: var(--fx-l, 0); top: var(--fx-t, 0); width: var(--fx-w, 0); height: var(--fx-h, 0); border-radius: 2px; pointer-events: none; z-index: 0; display: block; }
.steps.fx::after { background: rgba(201, 198, 244, .16); }
.steps.fx::before { background: linear-gradient(90deg, var(--green-l), var(--copper-l)); box-shadow: 0 0 10px rgba(224, 153, 92, .5);
  transform: scaleX(var(--fx-p, 0)); transform-origin: left; transition: transform .3s linear; }
[dir="rtl"] .steps.fx.fx-h::before { transform-origin: right; background: linear-gradient(270deg, var(--green-l), var(--copper-l)); }
.steps.fx.fx-v::before { transform: scaleY(var(--fx-p, 0)); transform-origin: top; background: linear-gradient(180deg, var(--green-l), var(--copper-l)); }
.steps.fx.fx-g::before, .steps.fx.fx-g::after { display: none; }
.steps.fx li { z-index: 1; }
.steps.fx li::before { transition: background .5s, color .5s, border-color .5s, box-shadow .6s, transform .5s var(--ease); }
.steps.fx li::after { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--copper-l); opacity: 0; pointer-events: none; }
.steps.fx li.on::before { background: var(--copper-l); border-color: #f2c79d; color: #1b1206; font-weight: 700;
  box-shadow: 0 0 0 5px rgba(224, 153, 92, .16), 0 0 26px 2px rgba(224, 153, 92, .5); transform: scale(1.08); }
.steps.fx li.on::after { animation: fx-ping 1.2s var(--ease) 1; }
.steps.fx li h3 { transition: color .5s; }
.steps.fx li:not(.on) h3 { color: rgba(255, 255, 255, .8); }
@keyframes fx-ping { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* ── 3. Cartes d'expertise ──────────────────────────────────────────── */
.grid-x .x { isolation: isolate; overflow: hidden; }
.x::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(280px circle at var(--mx, 30%) var(--my, 20%), rgba(224, 153, 92, .13), transparent 70%); }
.x::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--green-l), var(--copper-l)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
[dir="rtl"] .x::after { transform-origin: right; background: linear-gradient(270deg, var(--green-l), var(--copper-l)); }
.x .ic { transition: transform .5s var(--ease), filter .5s; }
.x .num { display: inline-flex; align-items: center; transition: color .4s; }
.x .num::before { content: ""; width: 0; height: 1px; margin-inline-end: 0; background: currentColor; transition: width .45s var(--ease), margin .45s var(--ease); }
.x:hover::before, .x:focus-visible::before { opacity: 1; }
.x:hover::after, .x:focus-visible::after { transform: scaleX(1); }
.x:hover .ic, .x:focus-visible .ic { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 6px 10px rgba(224, 153, 92, .25)); }
.x:focus-visible .ic * { animation: redraw 1.2s var(--ease); }
.x:hover .ic .acc, .x:focus-visible .ic .acc { animation: redraw 1s var(--ease) .35s both; }
.x:hover .num, .x:focus-visible .num { color: var(--copper-ink); font-weight: 700; }
.x:hover .num::before, .x:focus-visible .num::before { width: 18px; margin-inline-end: .45rem; }
/* Écrans tactiles : l'icône se dessine à l'apparition de la carte */
@media (hover: none) {
  .x.in .ic * { animation: redraw 1.4s var(--ease) calc(var(--i, 0) * 120ms + .25s) both; }
  .x.in .ic .acc { animation-delay: calc(var(--i, 0) * 120ms + .8s); }
  .x.in .num { color: var(--copper-ink); }
}

/* ── Mouvements réduits : aucune animation, état final ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .proof ul::before, .proof li, .proof .pf-ic * { transition: none !important; }
  html:not(.no-js) .proof:not(.in) ul::before { transform: none; }
  html:not(.no-js) .proof:not(.in) li { opacity: 1; transform: none; }
  html:not(.no-js) .proof:not(.in) .pf-ic * { stroke-dashoffset: 0; }
  .steps.fx li::after { display: none; }
  .x .ic, .x:hover .ic, .x:focus-visible .ic { transform: none; }
  .x .ic *, .x:hover .ic *, .x.in .ic * { animation: none !important; }
}
.a11y-rm .proof ul::before, html.a11y-rm .proof:not(.in) ul::before { transform: none; }
.a11y-rm .proof li, html.a11y-rm .proof:not(.in) li { opacity: 1; transform: none; }
.a11y-rm .proof .pf-ic *, html.a11y-rm .proof:not(.in) .pf-ic * { stroke-dashoffset: 0; }
.a11y-rm .steps.fx li::after { display: none; }
.a11y-rm .x .ic, .a11y-rm .x:hover .ic, .a11y-rm .x:focus-visible .ic { transform: none; }

/* Écran étroit et texte agrandi : la frise verticale ne déborde jamais (le texte passe à la ligne) */
.steps li { min-width: 0; }
@media (max-width: 980px) {
  .steps, .steps.many { grid-template-columns: minmax(0, 1fr); }
  .steps li { padding-inline-start: calc(45px + 1.1rem); }
}