/* ═══════════════════════════════════════════════════════════
   CTA « Tester ma maturité IA » — porte d'entrée de l'autodiagnostic
   ═══════════════════════════════════════════════════════════

   Fichier distinct de css/autodiagnostic.css À DESSEIN : ce dernier est le
   paquet livré par Claude Design et sera remplacé par sa version corrigée.
   Ces règles-ci ne doivent pas partir avec.

   Bouton posé sur fond clair — le texte reste navy, jamais du doré sur crème.
   Contrastes mesurés du navy sur les deux bornes du dégradé :
     #0b1929 sur #ddb963 (haut) = 9,44:1
     #0b1929 sur #c9a54e (bas)  = 7,57:1
   Sous-ligne à 80 % d'opacité : 6,26:1 en haut, 5,33:1 en bas.
   Le plancher conforme est 75 % (4,79:1 en bas) ; 70 % échoue à 4,28:1.
   Ne pas descendre sous 75 %. */

.cta-autodiag {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy, #0b1929);
  background: linear-gradient(180deg, var(--gold-light, #ddb963), var(--gold, #c9a54e));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 10px 30px rgba(201, 165, 78, .35);
  transition:
    transform .35s cubic-bezier(.23, 1, .32, 1),
    box-shadow .35s cubic-bezier(.23, 1, .32, 1);
}

/* ── Scintillement continu ──
   Un reflet spéculaire balaie la surface dorée sans interruption.
   Il est posé en z-index 0 et les deux lignes de texte en z-index 1 : le reflet
   passe donc SOUS le texte. Ce n'est pas un détail d'empilement — un balayage
   blanc à 65 % par-dessus du navy détruirait les contrastes mesurés. Sous le
   texte, il éclaircit le fond et ne peut que les améliorer.
   Le balayage anime background-position et non un enfant translaté : le
   pseudo-élément clippe lui-même son dégradé, ce qui évite un overflow: hidden
   sur le bouton — lequel aurait rogné le halo d'entrée, posé en débord. */
.cta-autodiag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, .40) 47%,
    rgba(255, 255, 255, .62) 50%,
    rgba(255, 255, 255, .40) 53%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
  animation: cta-autodiag-scintille 3.2s linear infinite;
}

@keyframes cta-autodiag-scintille {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

.cta-autodiag__label,
.cta-autodiag__hint {
  position: relative;
  z-index: 1;
}

.cta-autodiag__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* La flèche avance au survol — signal le plus économique qu'il se passe
   quelque chose après le clic. */
.cta-autodiag__arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}

/* Indice de contenu : ce que le visiteur engage en cliquant. */
.cta-autodiag__hint {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(11, 25, 41, .8);
}

/* ── Réponse physique ── */

.cta-autodiag:hover,
.cta-autodiag:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 18px 44px rgba(201, 165, 78, .5);
}

.cta-autodiag:hover .cta-autodiag__arrow,
.cta-autodiag:focus-visible .cta-autodiag__arrow {
  transform: translateX(4px);
}

.cta-autodiag:active {
  transform: translateY(-1px);
}

/* Focus clavier visible sans survol. Contour navy sur fond clair. */
.cta-autodiag:focus-visible {
  outline: 3px solid var(--navy, #0b1929);
  outline-offset: 3px;
}

/* ── Halo : une seule respiration à l'entrée dans le champ visible ──
   z-index négatif sur un parent qui n'ouvre pas de contexte d'empilement :
   le halo se peint DERRIÈRE le fond du bouton, donc seul le débord est
   visible. C'est ce qui en fait un halo et non un voile. */
.cta-autodiag::after {
  content: "";
  position: absolute;
  inset: -40% -25%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(201, 165, 78, .55), transparent 70%);
}

.cta-autodiag.is-seen::after {
  animation: cta-autodiag-halo 2.2s cubic-bezier(.23, 1, .32, 1) forwards;
}

/* ── Le halo ne doit pas étendre la boîte du document ──
   inset: -40% -25% fait déborder le halo de 25 % de la largeur du bouton de
   chaque côté, soit une boîte de 1,5×. Sans conséquence sur desktop ; sur un
   écran de 390px avec un bouton de 368px, cela ajoute 81px au scrollWidth et
   la page se laisse déplacer latéralement. Mesuré exactement : (552−390)/2 = 81.

   Deux garde-fous indépendants, parce qu'un seul qui échoue ramène le défaut.
   Le premier clippe au conteneur du bouton et préserve le halo à toute largeur ;
   il repose sur :has(), donc sans effet sur un navigateur qui l'ignore.
   Le second retire le débord horizontal sous 700px — le halo reste vertical. */
div:has(> .cta-autodiag) {
  overflow-x: clip;
}

@media (max-width: 700px) {
  .cta-autodiag::after {
    inset: -40% 0;
  }
}

@keyframes cta-autodiag-halo {
  0%   { opacity: 0; }
  45%  { opacity: .35; }
  100% { opacity: 0; }
}

/* ── Mouvement neutralisé sur demande du système ── */
@media (prefers-reduced-motion: reduce) {
  .cta-autodiag,
  .cta-autodiag__arrow {
    transition: none;
  }
  .cta-autodiag:hover,
  .cta-autodiag:focus-visible,
  .cta-autodiag:active,
  .cta-autodiag:hover .cta-autodiag__arrow,
  .cta-autodiag:focus-visible .cta-autodiag__arrow {
    transform: none;
  }
  .cta-autodiag.is-seen::after {
    animation: none;
    opacity: 0;
  }
  /* Le scintillement s'arrête net, et le reflet disparaît plutôt que de se
     figer au milieu du bouton. */
  .cta-autodiag::before {
    animation: none;
    background-image: none;
  }
  /* Le focus clavier reste visible : ce n'est pas du mouvement. */
}