/* =====================================================================
   VERRE ATHAR · verre-athar.css · v2 (11/10/2026)

   La matière « verre lumineux » des motion designs ATHAR (modèle K03,
   verre strié champagne V4) portée sur le web : boutons, pastilles,
   panneaux, cartes, étiquettes. HTML + CSS + petit JS vanilla, sans build.

   Règle Safari / WebView iOS : aucune déclaration backdrop-filter ne
   contient url(). WebKit ignorerait la déclaration EN ENTIER, flou compris.
   Toute la matière repose donc sur des couches CSS : teinte, dégradés,
   masques, ombres internes, pseudo-éléments. Le JS (verre-athar.js) ne
   fait que déplacer la lumière, en transform et opacity.

   Couches d'une surface .va (du fond vers le texte) :
     1. plan réel flouté, assombri (backdrop-filter)        K03 : softShot × .39
     2. teinte fumée + voile clair en haut                  K03 : mix(…, .61) + .035
     3. ombres internes : liseré sombre en bas, biseau doré
     4. .va-optique (JS, z -2) : lampes dans le biseau, lueur, ligne
        d'épaisseur, éclat qui glisse sur l'arête
     5. ::before (z -1) : stries de verre cannelé (.va-strie)
     6. ::after  (z -1) : arête vive, reflet net en haut à gauche
     7. texte
   ===================================================================== */

:root{
  --va-noir:#0A0807;
  --va-or:#C8A24B;
  --va-or-clair:#EFD98F;
  --va-creme:#F2EDE3;

  /* Canaux RVB, utilisés en rgb(var(--x) / alpha) */
  --va-teinte:11 10 9;        /* verre fumé, presque neutre (K03 : 9 8 17, violet) */
  --va-halo:242 180 74;       /* lampe L0, or lumineux     (K03 : lavande .43 .30 .87) */
  --va-coeur:255 236 198;     /* lampe L2, champagne clair (K03 : .69 .53 .97) */
  --va-contre:128 172 206;    /* lampe L1, pointe froide   (K03 : cyan .22 .65 .85) */
  --va-eclat:255 250 238;     /* éclat d'arête             (K03 : .74 .82 1) */
  --va-arete-rgb:255 244 226; /* teinte de l'arête au repos */

  /* COURBE_ATHAR : départ doux, longue décélération */
  --va-courbe:cubic-bezier(.375,.05,.375,.975);
  --va-gonfle:cubic-bezier(.3,1.5,.5,1);
  --va-police:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
}

/* ---------------------------------------------------------------------
   Base commune
   --------------------------------------------------------------------- */
.va{
  --va-r:999px;               /* rayon */
  --va-opacite:.62;           /* part de fumée (K03 : .61) */
  --va-flou:16px;             /* flou du plan (K03 : anneau de 6 à 13 px) */
  --va-biseau:16px;           /* largeur du biseau réfractant (K03 : 64 px sur 600 × 438) */
  --va-arete:1px;             /* épaisseur de l'arête vive */
  --va-transmis:.07;          /* lumière des lampes qui traverse le cœur */
  --va-a-halo:1;              /* intensités (K03 : L0 .69, L1 .42, L2 .42) */
  --va-a-contre:.5;
  --va-a-lueur:.2;
  --va-a-lueur-vive:.62;
  --va-a-eclat:1;
  --va-a-biseau:.07;          /* lueur uniforme du biseau */
  --va-epaisseur:inset 0 0 2px 3px rgb(0 0 0/.16);
  --va-ombre:0 1px 1px rgb(0 0 0/.35),0 12px 26px -14px rgb(0 0 0/.85);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--va-r);
  color:var(--va-creme);
  background:
    radial-gradient(var(--va-caustique-taille,22% 46%) at var(--va-tache-pos,15% 0%),rgb(255 250 240/.1),rgb(255 250 240/0) 70%),
    linear-gradient(180deg,rgb(255 248 236/.04),rgb(255 248 236/0) 62%),
    var(--va-statique,linear-gradient(transparent,transparent)),
    var(--va-ambiance,linear-gradient(transparent,transparent)),
    rgb(var(--va-teinte)/var(--va-opacite));
  -webkit-backdrop-filter:blur(var(--va-flou)) saturate(1.15) brightness(.74);
  backdrop-filter:blur(var(--va-flou)) saturate(1.15) brightness(.74);
  box-shadow:
    inset 0 1px 0 rgb(255 250 240/.06),
    inset 0 -1px 0 rgb(0 0 0/.62),
    inset 0 0 0 1px rgb(var(--va-arete-rgb)/.045),
    var(--va-epaisseur),
    inset 0 0 var(--va-biseau) 0 rgb(var(--va-halo)/var(--va-a-biseau)),
    var(--va-ombre);
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* Arête vive : anneau de 1 px. Reflet net en haut à gauche, presque
   éteinte ailleurs, à peine dorée en bas à droite. L'éclat mobile (JS)
   l'allume là où passe la lumière.
   K03 : rim = exp(-((d+1.3)/1.05)²) × (lampes + .095 .1 .17 + éclat) */
.va::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  padding:var(--va-arete);
  background:
    radial-gradient(var(--va-tache-taille,26% 120%) at var(--va-tache-pos,15% 0%),
      rgb(var(--va-eclat)/1),rgb(var(--va-eclat)/.55) 28%,rgb(var(--va-eclat)/.12) 55%,rgb(var(--va-eclat)/0) 74%),
    linear-gradient(var(--va-arete-angle,160deg),
      rgb(var(--va-arete-rgb)/.42) 0%,
      rgb(var(--va-arete-rgb)/.13) 18%,
      rgb(var(--va-arete-rgb)/.05) 36%,
      rgb(var(--va-arete-rgb)/.03) 64%,
      rgb(var(--va-halo)/.07) 86%,
      rgb(var(--va-halo)/.13) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* Sans JS : la lumière tient en place, pose de repos de K03
   (halo dans le biseau en bas à droite, contre-lumière en haut à gauche). */
.va:not(.va-pret){
  --va-statique:
    radial-gradient(34% 70% at 76% 104%,rgb(var(--va-halo)/.5),rgb(var(--va-halo)/.12) 50%,rgb(var(--va-halo)/0) 76%),
    radial-gradient(34% 80% at 14% -12%,rgb(var(--va-contre)/.22),rgb(var(--va-contre)/0) 70%);
}

/* ---------------------------------------------------------------------
   Couches optiques ajoutées par verre-athar.js
   --------------------------------------------------------------------- */
.va-pret{--va-epaisseur:inset 0 0 0 0 transparent}
.va-optique,.va-optique *{position:absolute;pointer-events:none;display:block}
.va-optique{inset:0;z-index:-2;border-radius:inherit;overflow:hidden;isolation:isolate}

/* Biseau : la lumière extérieure est ramenée vers l'intérieur près du bord.
   Profil K03 : .67 × b^1.55, b = 1 sur l'arête, 0 à la profondeur du biseau.
   Le premier calque laisse passer un peu de lumière au cœur. */
.va-biseau{
  inset:0;
  border-radius:inherit;
  --va-b:var(--va-biseau);
  -webkit-mask:
    linear-gradient(rgb(0 0 0/var(--va-transmis)) 0 0),
    linear-gradient(90deg,#000,rgb(0 0 0/.71) calc(var(--va-b)*.2),rgb(0 0 0/.45) calc(var(--va-b)*.4),rgb(0 0 0/.24) calc(var(--va-b)*.6),rgb(0 0 0/.08) calc(var(--va-b)*.8),rgb(0 0 0/0) var(--va-b)),
    linear-gradient(270deg,#000,rgb(0 0 0/.71) calc(var(--va-b)*.2),rgb(0 0 0/.45) calc(var(--va-b)*.4),rgb(0 0 0/.24) calc(var(--va-b)*.6),rgb(0 0 0/.08) calc(var(--va-b)*.8),rgb(0 0 0/0) var(--va-b)),
    linear-gradient(180deg,#000,rgb(0 0 0/.71) calc(var(--va-b)*.2),rgb(0 0 0/.45) calc(var(--va-b)*.4),rgb(0 0 0/.24) calc(var(--va-b)*.6),rgb(0 0 0/.08) calc(var(--va-b)*.8),rgb(0 0 0/0) var(--va-b)),
    linear-gradient(0deg,#000,rgb(0 0 0/.71) calc(var(--va-b)*.2),rgb(0 0 0/.45) calc(var(--va-b)*.4),rgb(0 0 0/.24) calc(var(--va-b)*.6),rgb(0 0 0/.08) calc(var(--va-b)*.8),rgb(0 0 0/0) var(--va-b));
}

/* Lampes : somme de 3 gaussiennes (exp(-r²×.9)×.75 + exp(-r²×3.2)×.55 +
   exp(-r²×9)×.25), découpée à 1,8 rayon. Taille et position posées par le JS. */
.va-lampe,.va-eclat{left:0;top:0;border-radius:50%}
.va-l-halo{                  /* L0 halo + L2 cœur, liés au point mobile */
  background:
    radial-gradient(closest-side,rgb(var(--va-coeur)/.92),rgb(var(--va-coeur)/.42) 15%,rgb(var(--va-coeur)/0) 32%),
    radial-gradient(closest-side,rgb(var(--va-halo)/1) 0%,rgb(var(--va-halo)/.9) 11%,rgb(var(--va-halo)/.7) 22%,rgb(var(--va-halo)/.5) 33%,rgb(var(--va-halo)/.34) 44%,rgb(var(--va-halo)/.21) 56%,rgb(var(--va-halo)/.1) 72%,rgb(var(--va-halo)/.035) 89%,rgb(var(--va-halo)/0) 100%);
  opacity:var(--va-a-halo);
}
.va-l-contre{                /* L1 contre-lumière, à l'opposé du point */
  background:radial-gradient(closest-side,rgb(var(--va-contre)/1) 0%,rgb(var(--va-contre)/.75) 18%,rgb(var(--va-contre)/.56) 28%,rgb(var(--va-contre)/.35) 42%,rgb(var(--va-contre)/.21) 56%,rgb(var(--va-contre)/.085) 80%,rgb(var(--va-contre)/0) 100%);
  opacity:var(--va-a-contre);
}
.va-l-lueur{                 /* lueur mobile qui éclaire le verre à son passage, suit le pointeur */
  background:radial-gradient(closest-side,rgb(var(--va-coeur)/.78),rgb(var(--va-coeur)/.36) 32%,rgb(var(--va-coeur)/.1) 64%,rgb(var(--va-coeur)/0) 100%);
  opacity:var(--va-a-lueur);
  transition:opacity .7s var(--va-courbe);
}

/* Ligne sombre d'épaisseur à ~4 px du bord (K03 : d + 4.8, ×(1 − .38)) */
.va-epais{
  inset:4px;
  border-radius:calc(var(--va-r) - 4px);
  box-shadow:0 0 1.5px .5px rgb(0 0 0/.3),inset 0 0 1.5px .5px rgb(0 0 0/.3);
}
.va-pastille .va-epais{border-radius:50%}

/* Éclat mobile sur l'arête : anneau masqué, tache qui glisse le long du bord */
.va-arete{
  inset:0;
  border-radius:inherit;
  padding:var(--va-arete);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.va-eclat{
  background:radial-gradient(closest-side,rgb(var(--va-eclat)/1) 0%,rgb(var(--va-eclat)/.9) 10%,rgb(var(--va-coeur)/.55) 22%,rgb(var(--va-halo)/.26) 38%,rgb(var(--va-halo)/.07) 62%,rgb(var(--va-halo)/0) 100%);
  opacity:var(--va-a-eclat);
}
.va-eclat-froid{
  background:radial-gradient(closest-side,rgb(var(--va-contre)/.9) 0%,rgb(var(--va-contre)/.3) 36%,rgb(var(--va-contre)/0) 72%);
  opacity:calc(var(--va-a-contre)*.8);
}
.va-vivant .va-lampe,.va-vivant .va-eclat{will-change:transform}

/* Liseré sombre en bas, posé au-dessus de l'éclat : la lumière qui passe
   en bas se loge juste au-dessus, dans le biseau, et l'arête basse reste sombre. */
.va-optique::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 -1px 0 rgb(0 0 0/.58),inset 0 -2px 2px -1px rgb(0 0 0/.3);
}

/* ---------------------------------------------------------------------
   Stries de verre cannelé (option .va-strie)
   Profil d'une cannelure K03 : filet clair à 12 % de la période (σ 6 %),
   ombre douce à 86 % (σ 13 %, −10 %). Force sur les côtés :
   .27 + .73 × (|x| / demi-largeur)², la bande centrale reste presque lisse.
   --------------------------------------------------------------------- */
.va-strie{--va-strie:12px}
.va-strie::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgb(0 0 0/.045) 0px,
    rgb(0 0 0/0) calc(var(--va-strie)*.04),
    rgb(246 242 234/0) calc(var(--va-strie)*.065),
    rgb(246 242 234/.2) calc(var(--va-strie)*.12),
    rgb(246 242 234/0) calc(var(--va-strie)*.18),
    rgb(0 0 0/0) calc(var(--va-strie)*.66),
    rgb(0 0 0/.085) calc(var(--va-strie)*.86),
    rgb(0 0 0/.045) var(--va-strie));
  -webkit-mask-image:linear-gradient(90deg,#000,rgb(0 0 0/.74) 10%,rgb(0 0 0/.53) 20%,rgb(0 0 0/.39) 30%,rgb(0 0 0/.3) 40%,rgb(0 0 0/.27) 50%,rgb(0 0 0/.3) 60%,rgb(0 0 0/.39) 70%,rgb(0 0 0/.53) 80%,rgb(0 0 0/.74) 90%,#000);
  mask-image:linear-gradient(90deg,#000,rgb(0 0 0/.74) 10%,rgb(0 0 0/.53) 20%,rgb(0 0 0/.39) 30%,rgb(0 0 0/.3) 40%,rgb(0 0 0/.27) 50%,rgb(0 0 0/.3) 60%,rgb(0 0 0/.39) 70%,rgb(0 0 0/.53) 80%,rgb(0 0 0/.74) 90%,#000);
}
/* Profil du verre strié champagne V4 : bande étroite à gauche, large à droite,
   centre presque lisse (champ .40 × e^-((x−38)/45)² + .32 × e^-((x−390)/94)²) */
.va-strie-champagne{--va-strie:15px}
.va-strie-champagne::before{
  -webkit-mask-image:linear-gradient(90deg,rgb(0 0 0/.5) 0%,#000 7.6%,rgb(0 0 0/.42) 16%,rgb(0 0 0/.1) 25%,rgb(0 0 0/.1) 45%,rgb(0 0 0/.4) 62%,rgb(0 0 0/.82) 78%,rgb(0 0 0/.53) 90%,rgb(0 0 0/.22) 100%);
  mask-image:linear-gradient(90deg,rgb(0 0 0/.5) 0%,#000 7.6%,rgb(0 0 0/.42) 16%,rgb(0 0 0/.1) 25%,rgb(0 0 0/.1) 45%,rgb(0 0 0/.4) 62%,rgb(0 0 0/.82) 78%,rgb(0 0 0/.53) 90%,rgb(0 0 0/.22) 100%);
}

/* Trait central lumineux (K03 gradientLine : 0 / .48 à 26 % / .84 à 82 % / .25) */
.va-trait{
  display:block;
  height:1px;
  border:0;
  margin:14px 0;
  background:linear-gradient(90deg,rgb(var(--va-coeur)/0),rgb(var(--va-coeur)/.4) 26%,rgb(255 248 230/.76) 82%,rgb(var(--va-coeur)/.2));
}

/* ---------------------------------------------------------------------
   a) Bouton principal : verre sombre, lumière dorée intérieure
   --------------------------------------------------------------------- */
.va-bouton{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:54px;
  padding:0 30px;
  font:600 17px/1 var(--va-police);
  letter-spacing:-.018em;
  white-space:nowrap;
  text-decoration:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .65s var(--va-courbe);
}
.va-bouton svg{width:19px;height:19px;flex:none}

.va-or{
  --va-opacite:.68;
  --va-biseau:17px;
  --va-a-biseau:.06;
  --va-a-lueur:.3;
  --va-transmis:.13;
  --va-a-contre:.34;
  --va-contre:186 196 214;
  --va-arete-rgb:247 222 160;
  --va-ombre:0 1px 1px rgb(0 0 0/.4),0 14px 28px -14px rgb(0 0 0/.9),0 8px 22px -14px rgb(var(--va-halo)/.5);
  color:#F8EACB;
  text-shadow:0 1px 1px rgb(0 0 0/.4);
}

/* b) Bouton secondaire : verre neutre, lumière plus discrète */
.va-clair{
  --va-opacite:.56;
  --va-a-halo:.55;
  --va-a-contre:.4;
  --va-a-lueur:.16;
  --va-a-eclat:.8;
  --va-a-biseau:.04;
  --va-halo:238 212 160;
  color:var(--va-creme);
}

/* Variante or brossé champagne (option pour l'achat) : métal, pas de verre */
.va-champagne{
  --va-a-halo:0;
  --va-a-contre:0;
  --va-a-lueur:.5;
  --va-a-lueur-vive:.85;
  --va-coeur:255 252 240;
  --va-halo:255 246 222;
  --va-eclat:255 255 250;
  --va-ombre:0 1px 1px rgb(0 0 0/.45),0 14px 28px -14px rgb(0 0 0/.9),0 0 22px -10px rgb(239 217 143/.45);
  color:#24190A;
  text-shadow:0 1px 0 rgb(255 248 226/.5);
  background:
    linear-gradient(180deg,rgb(255 253 245/.42) 0%,rgb(255 253 245/.1) 46%,rgb(255 253 245/0) 54%,rgb(70 46 10/0) 70%,rgb(70 46 10/.16) 100%),
    repeating-linear-gradient(180deg,rgb(255 255 250/.09) 0 1px,rgb(255 255 250/0) 1px 3px),
    repeating-linear-gradient(180deg,rgb(80 56 14/.07) 0 1px,rgb(80 56 14/0) 1px 5px),
    linear-gradient(90deg,#B8964D 0%,#E6D199 20%,#CFB06A 42%,#F1E2B4 62%,#C7A65B 84%,#AD8B44 100%);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:
    inset 0 1px 0 rgb(255 252 240/.9),
    inset 0 -1px 0 rgb(92 64 18/.6),
    inset 0 0 0 1px rgb(122 90 32/.4),
    inset 0 -7px 11px -7px rgb(90 60 15/.45),
    var(--va-ombre);
}
.va-champagne::after{
  background:
    radial-gradient(38% 150% at 17% 0%,rgb(255 255 250/1),rgb(255 255 250/0) 70%),
    linear-gradient(158deg,rgb(255 253 244/.85),rgb(255 248 225/.25) 30%,rgb(120 88 30/.2) 60%,rgb(255 240 200/.5) 100%);
}
.va-champagne .va-l-lueur{
  background:radial-gradient(closest-side,rgb(255 255 250/.75),rgb(255 252 238/.3) 40%,rgb(255 252 238/0) 100%);
}
.va-champagne .va-epais{display:none}

/* c) Pastille ronde (icône) */
.va-pastille{
  --va-r:50%;
  --va-biseau:14px;
  --va-opacite:.56;
  --va-a-halo:.7;
  --va-a-lueur:.18;
  --va-halo:238 196 120;
  --va-tache-taille:58% 58%;
  --va-tache-pos:22% 16%;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  width:52px;
  height:52px;
  display:inline-grid;
  place-items:center;
  flex:none;
  color:var(--va-creme);
  transition:transform .65s var(--va-courbe);
}
.va-pastille svg{width:21px;height:21px}
.va-pastille.va-or{--va-a-halo:1;--va-halo:242 180 74;color:var(--va-or-clair)}

/* d) Panneau / carte en verre strié */
.va-panneau{
  --va-r:24px;
  --va-biseau:44px;
  --va-opacite:.6;
  --va-flou:18px;
  --va-arete:1.15px;
  --va-transmis:.1;
  --va-a-halo:.9;
  --va-a-contre:.5;
  --va-a-lueur:.16;
  --va-a-lueur-vive:.42;
  --va-a-biseau:.05;
  --va-tache-taille:40% 60%;
  --va-tache-pos:11% 0%;
  --va-ombre:0 2px 4px -1px rgb(0 0 0/.45),0 26px 50px -22px rgb(0 0 0/.92);
  display:block;
  padding:24px 26px;
  transition:transform .8s var(--va-courbe);
}

/* Carte Fondateur, format carte bancaire (85,6 × 54 mm) */
.va-carte{
  --va-r:22px;
  --va-biseau:40px;
  aspect-ratio:1.586;
  width:min(100%,400px);
  padding:22px 24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* e) Étiquette : statique, sans JS */
.va-badge{
  --va-r:999px;
  --va-flou:10px;
  --va-opacite:.56;
  --va-biseau:9px;
  --va-tache-taille:46% 160%;
  --va-tache-pos:20% 0%;
  --va-arete-rgb:247 222 160;
  --va-ombre:0 1px 1px rgb(0 0 0/.3),0 6px 14px -8px rgb(0 0 0/.75);
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:27px;
  padding:0 12px 0 11px;
  font:600 11.5px/1 var(--va-police);
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--va-or-clair);
}
.va-badge:not(.va-pret){
  --va-statique:radial-gradient(50% 120% at 82% 118%,rgb(var(--va-halo)/.34),rgb(var(--va-halo)/0) 72%);
}
.va-point{
  width:6px;
  height:6px;
  border-radius:50%;
  flex:none;
  background:radial-gradient(circle at 35% 35%,#FFF6D8,#E8C468 55%,#9C7426);
  box-shadow:0 0 5px rgb(239 217 143/.6);
}

/* Palette des vidéos (K03 exact) : lavande, cyan, blanc lumineux */
.va-k03{
  --va-teinte:9 8 17;
  --va-halo:110 77 222;
  --va-coeur:226 200 255;     /* L0 + L2 additionnés et surexposés dans K03 */
  --va-contre:56 166 217;
  --va-eclat:189 209 255;
  --va-arete-rgb:200 210 255;
  --va-transmis:.16;
  --va-a-halo:1;
  --va-a-contre:.62;
}

/* Verre posé sur du verre : pas de second flou (coût GPU, rendu identique) */
.va .va{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Tailles */
.va-bouton.va-m{height:46px;padding:0 22px;font-size:16px}
.va-bouton.va-s{height:36px;padding:0 15px;font-size:14px;gap:7px;--va-biseau:12px}
.va-pastille.va-m{width:44px;height:44px;--va-biseau:12px}
.va-pastille.va-s{width:36px;height:36px;--va-biseau:10px}
.va-pastille.va-s svg{width:16px;height:16px}

/* ---------------------------------------------------------------------
   États
   --------------------------------------------------------------------- */
/* Survol et focus : la lueur se rassemble (le JS la place sous le pointeur) */
.va-survol .va-l-lueur,.va-focus .va-l-lueur{opacity:var(--va-a-lueur-vive)}
@media (hover:hover){
  .va:not(.va-pret).va-bouton:hover,.va:not(.va-pret).va-pastille:hover{
    --va-statique:
      radial-gradient(46% 90% at 50% 104%,rgb(var(--va-halo)/.55),rgb(var(--va-halo)/.14) 50%,rgb(var(--va-halo)/0) 76%),
      radial-gradient(34% 80% at 14% -12%,rgb(var(--va-contre)/.22),rgb(var(--va-contre)/0) 70%);
  }
}

/* Appui : le verre gonfle légèrement, la lumière s'intensifie */
.va-bouton:active,.va-pastille:active,.va-bouton.va-appui,.va-pastille.va-appui{
  transform:scale(1.045);
  transition:transform .28s var(--va-gonfle);
}
.va-panneau.va-appui{transform:scale(1.012);transition:transform .3s var(--va-gonfle)}
.va-appui .va-l-lueur{opacity:1;transition-duration:.18s}

/* Focus clavier visible, net, hors du verre */
.va:focus:not(:focus-visible){outline:none}
.va:focus-visible,.va.va-focus-force{outline:2px solid var(--va-or-clair);outline-offset:3px}

/* Désactivé */
.va[disabled],.va[aria-disabled="true"]{opacity:.42;cursor:default;transform:none}

/* Mouvement réduit : aucune animation, le verre ne gonfle pas, la lumière
   change d'intensité seulement. Le JS ne déplace plus la lumière. */
@media (prefers-reduced-motion:reduce){
  .va,.va *{transition-duration:.01ms!important;animation:none!important}
  .va-bouton:active,.va-pastille:active,.va-appui{transform:none!important}
}
.va-mouvement-reduit .va,.va-mouvement-reduit .va *{transition-duration:.01ms!important;animation:none!important}
.va-mouvement-reduit .va-appui{transform:none!important}

/* Contraste renforcé : verre opaque, bord franc, aucune lumière décorative */
@media (prefers-contrast:more){
  .va{
    background:#15100B!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:inset 0 0 0 1.5px rgb(242 237 227/.92)!important;
    color:#FFFFFF!important;
    text-shadow:none!important;
  }
  .va::before,.va::after,.va-optique{display:none!important}
  .va-or,.va-champagne{box-shadow:inset 0 0 0 2px var(--va-or-clair)!important;color:var(--va-or-clair)!important}
  .va-badge{color:var(--va-or-clair)!important}
}
.va-contraste .va{
  background:#15100B!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:inset 0 0 0 1.5px rgb(242 237 227/.92)!important;
  color:#FFFFFF!important;
  text-shadow:none!important;
}
.va-contraste .va::before,.va-contraste .va::after,.va-contraste .va-optique{display:none!important}
.va-contraste .va-or,.va-contraste .va-champagne{box-shadow:inset 0 0 0 2px var(--va-or-clair)!important;color:var(--va-or-clair)!important}
.va-contraste .va-badge{color:var(--va-or-clair)!important}

/* Couleurs forcées (Windows) : bord système visible */
@media (forced-colors:active){
  .va{border:1px solid ButtonText;forced-color-adjust:auto}
  .va::before,.va::after,.va-optique{display:none}
}

/* Navigateur sans backdrop-filter : verre plus dense pour garder la lisibilité */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .va{--va-opacite:.86}
}

/* ---------------------------------------------------------------------
   Réglages du site ATHAR (12/10/2026) : le bouton principal se distingue
   du secondaire par un verre légèrement ambré et une lumière plus dense.
   --------------------------------------------------------------------- */
.va-bouton.va-or{--va-teinte:26 19 10;--va-opacite:.72;--va-a-biseau:.1;--va-a-lueur:.36;--va-transmis:.16}
.va-bouton.va-clair{--va-a-halo:.42;--va-halo:226 210 182}

/* Téléphone (13/10, « mon téléphone chauffe ») : pas de flou d'arrière-plan sur les boutons.
   Un bouton posé sur une vidéo refloutait l'image à chaque frame ; le verre reste dessiné, en plus dense. */
@media (hover:none) and (pointer:coarse){
  .va{-webkit-backdrop-filter:none;backdrop-filter:none;--va-opacite:.84}
  .va-bouton.va-or{--va-opacite:.86}
}