/* golemtech v3 — Lumière (13/11/2026)
   1. Boutons : lumière qui suit le curseur, reflet qui passe, contour lumineux qui tourne, éclat au toucher.
   2. Cartes : bord et halo éclairés là où se trouve le curseur.
   3. Méthode : « chemin de lumière », une comète allume les 4 étapes l'une après l'autre.
   Uniquement transform / opacity / variables CSS. Retirer ce fichier + lumiere.js = retour à l'état d'avant. */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- 1. Boutons ---------- */
.pilule, .nav .nav-cta, .btn-send, .pub-btn {
  position: relative; isolation: isolate; overflow: hidden;
  translate: var(--tx, 0) var(--ty, 0);
  transition: transform .3s var(--ease), background .2s, box-shadow .35s var(--ease), translate .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pilule.aimant, .nav .nav-cta.aimant, .btn-send.aimant, .pub-btn.aimant { transition: transform .3s var(--ease), background .2s, box-shadow .35s var(--ease), translate .12s linear; }

/* Lumière sous le curseur (couche sous le texte, au-dessus du fond du bouton) */
.pilule::after, .nav .nav-cta::after, .btn-send::after, .pub-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2), transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.pilule.claire::after, .nav .nav-cta::after, .pub-btn::after {
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 124, 255, .38), rgba(169, 184, 255, .12) 45%, transparent 72%);
}
.btn-send::after { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 124, 255, .45), transparent 70%); }

/* Boutons clairs : halo bleu dessous + reflet qui traverse de temps en temps */
.pilule.claire::before, .nav .nav-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(91, 124, 255, .32) 46%, rgba(169, 184, 255, .5) 50%, transparent 64%);
  translate: -110% 0;
}
.pilule.claire:hover, .nav .nav-cta:hover, .pub-btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 34px -8px rgba(91, 124, 255, .75), 0 0 60px -12px rgba(91, 124, 255, .6); }
.btn-send:hover { box-shadow: 0 12px 36px -10px rgba(91, 124, 255, .7); }

/* Boutons contour : un fil de lumière fait le tour du bord */
.pilule.contour { border-color: rgba(255, 255, 255, .22); }
.pilule.contour::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 220deg, rgba(91, 124, 255, .9) 290deg, #fff 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s var(--ease);
}
.pilule.contour:hover { background: rgba(91, 124, 255, .08); box-shadow: 0 0 34px -10px rgba(91, 124, 255, .7); }

@media (hover: hover) and (pointer: fine) {
  .pilule:hover::after, .nav .nav-cta:hover::after, .btn-send:hover::after, .pub-btn:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .pilule.claire::before, .nav .nav-cta::before { animation: reflet 7s var(--ease) 2.5s infinite; }
  .pilule.claire:hover::before, .nav .nav-cta:hover::before { animation: reflet-vite .9s var(--ease) 1 both; }
  .pilule.contour:hover::before { opacity: 1; animation: tour 2.2s linear infinite; }
  /* Téléphone : pas de survol, le fil tourne doucement tant que le bouton est à l'écran */
  @media (hover: none) { .pilule.contour.vu::before { opacity: .75; animation: tour 4.5s linear infinite; } }
}
@keyframes tour { to { --ang: 360deg; } }
@keyframes reflet { 0%, 82% { translate: -110% 0; } 100% { translate: 110% 0; } }
@keyframes reflet-vite { from { translate: -110% 0; } to { translate: 110% 0; } }

/* Éclat au toucher : une onde de lumière part du doigt */
.eclat-o { position: absolute; z-index: -1; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(169, 184, 255, .75), rgba(91, 124, 255, .25) 50%, transparent 70%);
  animation: eclat .65s var(--ease) forwards; }
@keyframes eclat { from { transform: scale(1); opacity: 1; } to { transform: scale(26); opacity: 0; } }

/* ---------- 2. Cartes éclairées par le curseur ---------- */
.lum { position: relative; isolation: isolate; }
.lum::before, .lum::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.lum::before { /* le bord s'allume près du curseur */
  z-index: 1; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(169, 184, 255, .85), rgba(91, 124, 255, .25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lum::after { /* halo doux à l'intérieur */
  z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 124, 255, .1), transparent 60%);
}
@media (hover: hover) and (pointer: fine) { .lum:hover::before, .lum:hover::after { opacity: 1; } }

/* ---------- 3. Méthode : chemin de lumière ---------- */
.meth.chemin { position: relative; gap: 18px; }
.meth.chemin li {
  position: relative; padding: 46px 26px 30px; border-top: 0; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease);
}
.meth.chemin li > span {
  position: absolute; top: -15px; left: 26px; display: grid; place-items: center; width: 30px; height: 30px; margin: 0;
  border-radius: 50%; background: #0b0c10; border: 1px solid rgba(255, 255, 255, .25); color: #8b90a0; font-size: 11px;
  transition: color .4s, border-color .4s, box-shadow .6s var(--ease), background .4s;
}
.meth.chemin li.allume { border-color: rgba(169, 184, 255, .32); background: linear-gradient(180deg, rgba(91, 124, 255, .1), rgba(255, 255, 255, .015)); box-shadow: 0 30px 70px -40px rgba(91, 124, 255, .7); }
.meth.chemin li.allume > span { color: #fff; border-color: #a9b8ff; background: var(--acc); box-shadow: 0 0 0 6px rgba(91, 124, 255, .16), 0 0 26px rgba(91, 124, 255, .9); }
.meth.chemin li.allume h3 { color: #fff; }
.meth-rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .14); pointer-events: none; z-index: 0; }
.meth-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(91, 124, 255, .2), #a9b8ff); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px rgba(91, 124, 255, .9); }
.meth-com { position: absolute; left: 0; top: 0; width: 140px; height: 3px; margin: -1px 0 0 -140px; border-radius: 3px; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(91, 124, 255, .7) 60%, #fff); filter: drop-shadow(0 0 8px #5b7cff) drop-shadow(0 0 18px rgba(91, 124, 255, .8)); }
.meth-com::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(169, 184, 255, .95); }
.meth.chemin li { z-index: 1; }
.meth.chemin.fini .meth-rail i { transform: scaleX(1); }

/* 721-979 px : 2 colonnes, le rail ne relierait que la 1re ligne → on le cache, les étapes s'allument quand même */
@media (min-width: 721px) and (max-width: 979px) { .meth-rail, .meth-com { display: none; } .meth.chemin { row-gap: 40px; } }
/* Téléphone : rail vertical au centre, visible entre les cartes */
@media (max-width: 720px) {
  .meth.chemin { row-gap: 34px; }
  .meth.chemin li { padding: 42px 22px 26px; }
  .meth.chemin li > span { left: 50%; margin-left: -15px; }
  .meth-rail { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .meth-rail i { transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, rgba(91, 124, 255, .2), #a9b8ff); }
  .meth.chemin.fini .meth-rail i { transform: scaleY(1); }
  .meth-com { left: 50%; width: 3px; height: 120px; margin: -120px 0 0 -1px; background: linear-gradient(180deg, transparent, rgba(91, 124, 255, .7) 60%, #fff); }
  .meth-com::after { right: auto; left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .meth-com { display: none; }
}

/* Cartes opaques : le rail passe derrière, visible seulement entre elles ; la comète ne dépasse jamais de l'écran */
.methode { overflow-x: clip; }
.meth.chemin li { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)), #0b0d12; }
.meth.chemin li.allume { background: linear-gradient(180deg, rgba(91, 124, 255, .1), rgba(255, 255, 255, .015)), #0b0d12; }
@media (max-width: 720px) { .meth-rail { z-index: 0; } .meth.chemin li { z-index: 1; } .meth-com { z-index: 0; } .meth.chemin.fini .meth-rail i { transform: scaleY(0); } }