/* ============================================================
   LA PIERRE — appel à l'action du Cercle
   ------------------------------------------------------------
   Cabochon poli serti d'un filet d'or, grain de matière, lumière
   au quart supérieur gauche. Ton : Grenat de salon #2D1118,
   palette secondaire du Brand Book (décision Bacha, 14/09/2026).

   Ce qui a été retiré du bouton précédent : l'or en aplat, que
   le Brand Book interdit ; le rayon de pilule ; le halo de 44 px ;
   et le balayage de lumière, qui était mot pour mot le
   « shimmer-button » des bibliothèques d'effets.

   Aucun ton n'est écrit en dur hors du grenat de base : les
   clairs et les sombres sont calculés en color-mix() depuis lui
   et depuis l'ivoire de la maison — « écrire un hexadécimal,
   c'est réinventer une couleur » (Brand Book, §IV).

   Le sertissage est à pleine force et doublé d'un cerne sombre
   d'un pixel : mesurée sur la photographie de la porte, la pierre
   seule ne s'en détachait qu'à 1,65:1. Sur un bijou, ce n'est pas
   la pierre qui découpe le fond, c'est le métal qui la tient.

   Les survols ne sont pas enfermés dans @media (hover:hover) :
   sur un appareil tactile :hover se déclenche au toucher, et
   l'ancienne règle dorée reprendrait alors la main.
   ============================================================ */

:root{
  --pierre:#2D1118;          /* Grenat de salon */
  --pierre-or:#C9A84C;
  --pierre-ivoire:#F2EDE3;
}

[data-stage3d] .cta,
[data-lbc-lux] .cta{
  /* Ces cinq-là en !important : la feuille du runtime est injectée
     après les feuilles de page et gagne à spécificité égale. Sans
     cela le bouton retombe en display:inline-block avec 5 px de
     rembourrage vertical, et les lettres se collent en haut de la
     pierre. Les feuilles ne sont pas énumérables depuis la page :
     inutile de chercher la règle fautive, on l'écrase. */
  position:relative; overflow:visible;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  min-height:54px !important; padding:17px 38px !important;
  border:0; border-radius:12px;
  color:var(--pierre-ivoire);
  font-family:var(--font-body, Inter, system-ui, sans-serif);
  font-weight:600; font-size:14px; line-height:1; letter-spacing:.035em;
  /* explicite, et pas par défaut : lux.js:74 tague « lux-eyebrow »
     tout élément en capitales sous 15 px, et la typographie de
     sur-titre écrase ensuite jusqu'au display du bouton. */
  text-transform:none; text-indent:0;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
  background:
    radial-gradient(70% 120% at 24% 4%, color-mix(in srgb, var(--pierre) 46%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 80%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 40%, transparent),
    inset 0 -3px 6px color-mix(in srgb, #000 46%, transparent),
    0 0 0 1px color-mix(in srgb, #000 62%, transparent),
    0 10px 20px -10px rgba(0,0,0,.8);
  transition:
    background .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s cubic-bezier(.22,.61,.36,1),
    transform .2s cubic-bezier(.22,.61,.36,1);
}
/* le grain : alpha cuite dans le SVG, jamais posée en opacity —
   une couche d'opacité crée un groupe de composition qui paraît
   à pleine force pendant une image au chargement. */
[data-stage3d] .cta::after,
[data-lbc-lux] .cta::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
/* le balayage de l'ancien bouton est éteint */
[data-stage3d] .cta::before,
[data-lbc-lux] .cta::before{ content:none; }

[data-stage3d] .cta:hover,
[data-lbc-lux] .cta:hover{
  transform:translateY(-1px);
  background:
    radial-gradient(70% 120% at 70% 4%, color-mix(in srgb, var(--pierre) 36%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 74%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%);
  box-shadow:
    inset 0 0 0 2px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 52%, transparent),
    inset 0 -3px 7px color-mix(in srgb, #000 50%, transparent),
    0 14px 26px -10px rgba(0,0,0,.8);
}
[data-stage3d] .cta:active,
[data-lbc-lux] .cta:active{ transform:translateY(1px); }
[data-stage3d] .cta:focus-visible,
[data-lbc-lux] .cta:focus-visible{ outline:2px solid var(--pierre-or); outline-offset:3px; }

/* Le hero portait une plaque d'or massif et un éclat traversant.
   On éteint les deux : la pierre passe par la règle ci-dessus. */
html.is-3d [data-stage3d] .act--hero .cta,
html.no-3d [data-stage3d] .act--hero .cta{
  background:
    radial-gradient(70% 120% at 24% 4%, color-mix(in srgb, var(--pierre) 46%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 80%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%);
  color:var(--pierre-ivoire);
  border:0;
  box-shadow:
    inset 0 0 0 1.5px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 40%, transparent),
    inset 0 -3px 6px color-mix(in srgb, #000 46%, transparent),
    0 0 0 1px color-mix(in srgb, #000 62%, transparent),
    0 10px 20px -10px rgba(0,0,0,.8);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
html.is-3d [data-stage3d] .act--hero .cta::before,
html.no-3d [data-stage3d] .act--hero .cta::before{ content:none; }

@media (prefers-reduced-motion:reduce){
  [data-stage3d] .cta,
  [data-lbc-lux] .cta{ transition:box-shadow .2s; }
  [data-stage3d] .cta:hover,
  [data-lbc-lux] .cta:hover{ transform:none; }
}

/* ------------------------------------------------------------
   LA BARRE — l'appel à l'action posé en style inline par le
   composant partagé. Un style inline gagne sur toute feuille :
   d'où le !important, et le composant n'est pas touché.
   ------------------------------------------------------------ */
[data-lbcnav] a[href="Integrer.html"],
[data-lbcnav] a[href="Integrer_en.html"]{
  position:relative !important;
  border:0 !important; border-radius:12px !important;
  min-height:46px !important; padding:13px 20px !important;
  color:var(--pierre-ivoire) !important;
  font-family:var(--font-body,Inter),system-ui,sans-serif !important;
  font-weight:600 !important; font-size:13px !important; letter-spacing:.035em !important;
  text-shadow:0 1px 0 rgba(0,0,0,.55) !important;
  background:
    radial-gradient(70% 120% at 24% 4%, color-mix(in srgb, var(--pierre) 46%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 80%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 40%, transparent),
    inset 0 -3px 6px color-mix(in srgb, #000 46%, transparent),
    0 0 0 1px color-mix(in srgb, #000 62%, transparent),
    0 0 0 1px color-mix(in srgb, #000 62%, transparent),
    0 8px 16px -9px rgba(0,0,0,.8) !important;
  transition:background .45s cubic-bezier(.22,.61,.36,1), box-shadow .4s, transform .2s !important;
}
[data-lbcnav] a[href="Integrer.html"]:hover,
[data-lbcnav] a[href="Integrer_en.html"]:hover{
  transform:translateY(-1px) !important;
  background:
    radial-gradient(70% 120% at 70% 4%, color-mix(in srgb, var(--pierre) 36%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 74%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%) !important;
  box-shadow:
    inset 0 0 0 2px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 52%, transparent),
    inset 0 -3px 7px color-mix(in srgb, #000 50%, transparent),
    0 12px 22px -9px rgba(0,0,0,.8) !important;
}
/* La porte des membres se range derrière la pierre : même
   géométrie, aucune prétention. Elle ne rivalise pas. */
[data-lbcnav] a[href="membres/"]{
  border-radius:12px !important;
  border-color:rgba(157,181,168,.32) !important;
  font-size:12.5px !important; letter-spacing:.05em !important;
  transition:border-color .4s, color .4s !important;
}
[data-lbcnav] a[href="membres/"]:hover{
  border-color:color-mix(in srgb, var(--pierre-or) 60%, transparent) !important;
  color:var(--pierre-ivoire) !important;
}

/* ------------------------------------------------------------
   LE CONSEIL — la seule page dont le monde EST le grenat.
   Une pierre grenat sur un fond grenat ne se détache plus. Le
   ton reste le même ; c'est la pierre qui est remontée d'un cran
   vers l'ivoire, toujours par color-mix, jamais par un hex neuf.
   ------------------------------------------------------------ */
[data-monde="conseil"]{ --pierre:color-mix(in srgb, #2D1118 62%, #F2EDE3); }

/* ------------------------------------------------------------
   LA CLASSE .pierre — les 59 appels à l'action écrits en style
   inline sur 51 pages.
   ------------------------------------------------------------
   Le site n'a jamais eu de classe unique pour son appel à
   l'action : chaque bouton porte son style dans l'attribut
   style, avec background:var(--accent) et un rayon de pilule.
   C'est pourquoi une feuille seule ne pouvait pas les changer.
   La classe est posée sur chacun, et les trois déclarations
   d'apparence sont retirées de leur style inline.

   Spécificité : html body en tête, parce que content-shared.css
   et content-lite.css sont injectées par le runtime APRÈS les
   feuilles de page et gagnent autrement à égalité.
   ------------------------------------------------------------ */
html body .pierre,
html body a.pierre,
html body button.pierre{
  position:relative;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:.5em;
  min-height:52px; padding:16px 34px;
  border:0 !important; border-radius:12px !important;
  color:var(--pierre-ivoire) !important;
  font-family:var(--font-body, Inter, system-ui, sans-serif);
  font-weight:600; letter-spacing:.035em;
  text-transform:none !important; text-indent:0; text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
  background:
    radial-gradient(70% 120% at 24% 4%, color-mix(in srgb, var(--pierre) 46%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 80%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 40%, transparent),
    inset 0 -3px 6px color-mix(in srgb, #000 46%, transparent),
    0 0 0 1px color-mix(in srgb, #000 62%, transparent),
    0 10px 20px -10px rgba(0,0,0,.8) !important;
  transition:background .45s cubic-bezier(.22,.61,.36,1), box-shadow .4s, transform .2s !important;
}
html body .pierre::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
html body .pierre:hover{
  transform:translateY(-1px);
  background:
    radial-gradient(70% 120% at 70% 4%, color-mix(in srgb, var(--pierre) 36%, var(--pierre-ivoire)) 0%, transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pierre) 74%, var(--pierre-ivoire)) 0%,
      var(--pierre) 46%,
      color-mix(in srgb, var(--pierre) 84%, #000) 100%) !important;
  box-shadow:
    inset 0 0 0 2px var(--pierre-or),
    inset 0 1px 0 color-mix(in srgb, var(--pierre-ivoire) 52%, transparent),
    inset 0 -3px 7px color-mix(in srgb, #000 50%, transparent),
    0 0 0 1px color-mix(in srgb, #000 62%, transparent),
    0 14px 26px -10px rgba(0,0,0,.8) !important;
}
html body .pierre:active{ transform:translateY(1px); }
html body .pierre:focus-visible{ outline:2px solid var(--pierre-or); outline-offset:3px; }
/* dans la barre, la pierre est plus courte */
html body [data-lbcnav] .pierre{ min-height:46px; padding:13px 20px; font-size:13px; }
@media (prefers-reduced-motion:reduce){
  html body .pierre{ transition:box-shadow .2s !important; }
  html body .pierre:hover{ transform:none; }
}