/* La Clique — gros titres néon (contour cyan, bas des lettres en magenta)
 * À utiliser seulement pour les GROS titres (24 px et plus).
 *
 * <h2 class="neon" data-text="Une base gratuite, puis le métier que tu veux">
 *   Une base gratuite, puis le métier que tu veux
 * </h2>
 *
 * Le texte dans data-text doit être identique à celui de la balise.
 * Taille: ajoute style="font-size:34px" (ou une classe à toi).
 */
.neon{
  --neon-cyan:#19e6ff;
  --neon-magenta:#ff4fd8;
  position:relative;
  margin:0;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,9vw,3.4rem);
  line-height:1.08;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1.3px var(--neon-cyan);
  filter:drop-shadow(0 0 3px rgba(25,230,255,.8)) drop-shadow(0 0 12px rgba(25,230,255,.35));
}
.neon::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1.3px var(--neon-magenta);
  -webkit-mask-image:linear-gradient(to bottom,transparent 58%,#000 68%);
  mask-image:linear-gradient(to bottom,transparent 58%,#000 68%);
  -webkit-mask-size:100% 1.08em;
  mask-size:100% 1.08em;
  -webkit-mask-repeat:repeat-y;
  mask-repeat:repeat-y;
  pointer-events:none;
}
/* Petit format (noms de métiers, boutons): contour plus fin */
.neon--s{font-size:1.5rem;line-height:1.1;-webkit-text-stroke-width:1.1px}
.neon--s::after{-webkit-text-stroke-width:1.1px;-webkit-mask-size:100% 1.1em;mask-size:100% 1.1em}

/* (27 oct. 2026) Décision de Gabriel : TOUS les gros titres du site (24 px et plus) ont ce look néon,
   comme « Content de te revoir, Gabriel! » et « Mission réussie ».
   js/neon-auto.js ajoute la classe .neon-auto aux h1/h2 assez gros (et au titre « Mission réussie »).
   Différence avec .neon : on garde la grosseur prévue pour chaque titre. */
.neon-auto{
  --neon-cyan:#19e6ff;
  --neon-magenta:#ff4fd8;
  position:relative;
  font-family:'Outfit',system-ui,sans-serif !important;
  font-weight:700;
  line-height:1.08 !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  background:none !important;
  text-shadow:none !important;
  -webkit-text-stroke:1.3px var(--neon-cyan);
  filter:drop-shadow(0 0 3px rgba(25,230,255,.8)) drop-shadow(0 0 12px rgba(25,230,255,.35));
  overflow-wrap:anywhere;
}
.neon-auto *{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  background:none !important;
  text-shadow:none !important;
  -webkit-text-stroke:inherit !important;
  filter:none !important;
}
/* Le reflet magenta est une copie exacte du titre (posée par js/neon-auto.js), pour que les lignes
   tombent pile au même endroit même quand le titre a des morceaux colorés ou des retours de ligne. */
.neon-auto > .neon-reflet{
  position:absolute;
  inset:0;
  padding:inherit;
  box-sizing:border-box;
  text-align:inherit;
  -webkit-text-stroke:1.3px var(--neon-magenta) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 58%,#000 68%);
  mask-image:linear-gradient(to bottom,transparent 58%,#000 68%);
  -webkit-mask-size:100% 1.08em;
  mask-size:100% 1.08em;
  -webkit-mask-repeat:repeat-y;
  mask-repeat:repeat-y;
  pointer-events:none;
  filter:none;
}
/* « Mission réussie » : l'animation d'entrée sans brouiller la lueur néon à la fin */
.mp-title.neon-auto{animation-name:mp-title-neon}
@keyframes mp-title-neon{from{opacity:0;transform:scale(1.35,1.05)}to{opacity:1;transform:none}}

/* (27 oct. 2026) Choix de Gabriel (style 3) : les gros titres ne sont plus en contour néon (trop flou),
   mais en lettres pleines avec un dégradé cyan → violet → magenta, sans lueur.
   Une ombre foncée fine sous les lettres garde le titre lisible même sur un fond pâle (aurores, éclair).
   Les règles plus haut (contour, reflet magenta) sont remplacées par celles-ci. */
.neon,.neon-auto{
  background:linear-gradient(90deg,#19e6ff,#8f7bff 55%,#ff4fd8) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:0 !important;
  filter:drop-shadow(0 1px 1px rgba(2,5,12,.85)) drop-shadow(0 0 8px rgba(2,5,12,.55)) !important;
}
.neon,.neon-auto{
  background-size:var(--neon-w,100%) 100% !important;
  background-position:var(--neon-x,0px) 0 !important;
  background-repeat:no-repeat !important;
}
.neon-auto *{-webkit-text-stroke:0 !important;-webkit-text-fill-color:transparent !important}
.neon::after,.neon-auto > .neon-reflet{display:none !important}