/* =====================================================================
   c-button-orb-ellipse.css  (WS)
   =====================================================================

   Composant : bouton halo elliptique
   -----------------------------------------------------
   Objectif :
   - halo radial elliptique
   - aucune bordure visible
   - aucune ombre
   - aucune zone blanche parasite
   - contrôle fin de la géométrie du gradient via variables CSS

   Gutenberg :
   - Bloc Bouton natif
   - Classe : ws-btn-orb

   Exemples :
   ws-btn-orb ws-btn-orb--warm
   ws-btn-orb ws-btn-orb--cool

   Philosophie :
   - c1 = coeur pigmenté
   - c2 = même teinte plus transparente
   - c3 = transparent pur
   - la forme se pilote par ellipse + position + stops

   ===================================================================== */


/* =====================================================================
   1) BLOC RACINE
   ===================================================================== */

.wp-block-button.ws-btn-orb{
  --ws-btn-text: #043a57;

  /* Couleurs */
  --ws-btn-c1: rgba(224, 118, 61, 0.95);
  --ws-btn-c2: rgba(224, 118, 61, 0.22);
  --ws-btn-c3: rgba(224, 118, 61, 0);

  /* Géométrie du bouton */
  --ws-btn-radius: 999px;
  --ws-btn-padding-y: 0.9em;
  --ws-btn-padding-x: 0.5em;
  --ws-btn-min-w: 160px;

  /* Typographie */
  --ws-btn-font-size: clamp(1.2rem, 2vw, 2rem);
  --ws-btn-font-weight: 400;
  --ws-btn-letter-spacing: 0.02em;
  --ws-btn-line-height: 1.1;
  --ws-btn-text-transform: none; /*uppercase*/

  /* -----------------------------------------------------
     GÉOMÉTRIE DU GRADIENT
     -----------------------------------------------------

     rx = rayon horizontal de l’ellipse
     ry = rayon vertical de l’ellipse
     x / y = position du centre du gradient
     bg-w / bg-h = taille du fond du gradient
  */

  --ws-btn-grad-rx: 50%;
  --ws-btn-grad-ry: 50%;
  --ws-btn-grad-x: 50%;
  --ws-btn-grad-y: 50%;

  /* Stops */
  --ws-btn-stop-c1: 0%;
  --ws-btn-stop-c2: 50%;
  --ws-btn-stop-c3: 70%;

  /* Taille du fond */
  --ws-btn-bg-w: 140%;
  --ws-btn-bg-h: 120%;

  /* Hover */
  --ws-btn-hover-scale: 1.03;
  --ws-btn-hover-shift-y: -1px;
  --ws-btn-hover-bg-w: 148%;
  --ws-btn-hover-bg-h: 124%;
  --ws-btn-hover-grad-y: 48%;

  /* Transition */
  --ws-btn-transition:
    transform 220ms ease,
    background-size 220ms ease,
    background-position 220ms ease;
}


/* =====================================================================
   2) LIEN INTERNE
   ===================================================================== */

.wp-block-button.ws-btn-orb > .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--ws-btn-min-w);
  padding: var(--ws-btn-padding-y) var(--ws-btn-padding-x);

  color: var(--ws-btn-text);
  text-decoration: none;
  text-align: center;
  line-height: var(--ws-btn-line-height);
  font-size: var(--ws-btn-font-size);
  font-weight: var(--ws-btn-font-weight);
  letter-spacing: var(--ws-btn-letter-spacing);
  text-transform: var(--ws-btn-text-transform);

  border: none;
  outline: none;
  box-shadow: none;
  border-radius: var(--ws-btn-radius);
  background-color: transparent;

  background-image:
    radial-gradient(
      ellipse var(--ws-btn-grad-rx) var(--ws-btn-grad-ry)
      at var(--ws-btn-grad-x) var(--ws-btn-grad-y),
      var(--ws-btn-c1) var(--ws-btn-stop-c1),
      var(--ws-btn-c2) var(--ws-btn-stop-c2),
      var(--ws-btn-c3) var(--ws-btn-stop-c3)
    );

  background-repeat: no-repeat;
  background-size: var(--ws-btn-bg-w) var(--ws-btn-bg-h);
  background-position: 50% 50%;

  transition: var(--ws-btn-transition);

  -webkit-appearance: none;
  appearance: none;
}


/* =====================================================================
   3) HOVER / FOCUS
   ===================================================================== */

.wp-block-button.ws-btn-orb > .wp-block-button__link:hover,
.wp-block-button.ws-btn-orb > .wp-block-button__link:focus-visible{
  transform:
    translateY(var(--ws-btn-hover-shift-y))
    scale(var(--ws-btn-hover-scale));

  background-size: var(--ws-btn-hover-bg-w) var(--ws-btn-hover-bg-h);

  background-image:
    radial-gradient(
      ellipse var(--ws-btn-grad-rx) var(--ws-btn-grad-ry)
      at var(--ws-btn-grad-x) var(--ws-btn-hover-grad-y),
      var(--ws-btn-c1) var(--ws-btn-stop-c1),
      var(--ws-btn-c2) var(--ws-btn-stop-c2),
      var(--ws-btn-c3) var(--ws-btn-stop-c3)
    );

  border: none;
  outline: none;
  box-shadow: none;
}

.wp-block-button.ws-btn-orb > .wp-block-button__link:active{
  transform: scale(0.985);
}


/* =====================================================================
   4) FOCUS CLAVIER
   ===================================================================== */

.wp-block-button.ws-btn-orb > .wp-block-button__link:focus-visible{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 3px;
}


/* =====================================================================
   5) VARIANTES COULEUR
   ===================================================================== */

.wp-block-button.ws-btn-orb.ws-btn-orb--warm{
  --ws-btn-c1: rgba(224, 118, 61, 0.95);
  --ws-btn-c2: rgba(224, 118, 61, 0.22);
  --ws-btn-c3: rgba(224, 118, 61, 0);
}

.wp-block-button.ws-btn-orb.ws-btn-orb--cool{
  --ws-btn-c1: rgba(90, 140, 165, 0.95);
  --ws-btn-c2: rgba(90, 140, 165, 0.22);
  --ws-btn-c3: rgba(90, 140, 165, 0);
}


/* =====================================================================
   6) PRESETS GÉOMÉTRIQUES
   ===================================================================== */

/* Halo plutôt rond */
.wp-block-button.ws-btn-orb.ws-btn-orb--round{
  --ws-btn-grad-rx: 38%;
  --ws-btn-grad-ry: 38%;
  --ws-btn-bg-w: 128%;
  --ws-btn-bg-h: 128%;
}

/* Halo ovale horizontal */
.wp-block-button.ws-btn-orb.ws-btn-orb--ellipse{
  --ws-btn-grad-rx: 52%;
  --ws-btn-grad-ry: 28%;
  --ws-btn-bg-w: 150%;
  --ws-btn-bg-h: 112%;
}

/* Halo plus compact */
.wp-block-button.ws-btn-orb.ws-btn-orb--tight{
  --ws-btn-stop-c2: 34%;
  --ws-btn-stop-c3: 52%;
}

/* Halo plus diffus */
.wp-block-button.ws-btn-orb.ws-btn-orb--diffuse{
  --ws-btn-stop-c2: 46%;
  --ws-btn-stop-c3: 74%;
}

/* Centre légèrement remonté */
.wp-block-button.ws-btn-orb.ws-btn-orb--lifted{
  --ws-btn-grad-y: 44%;
  --ws-btn-hover-grad-y: 42%;
}

/* Centre légèrement décalé à gauche */
.wp-block-button.ws-btn-orb.ws-btn-orb--left{
  --ws-btn-grad-x: 44%;
}

/* Centre légèrement décalé à droite */
.wp-block-button.ws-btn-orb.ws-btn-orb--right{
  --ws-btn-grad-x: 56%;
}


/* =====================================================================
   7) TAILLES
   ===================================================================== */

.wp-block-button.ws-btn-orb.ws-btn-orb--sm{
  --ws-btn-font-size: 1rem;
  --ws-btn-padding-y: 0.72em;
  --ws-btn-padding-x: 1.4em;
  --ws-btn-min-w: 130px;
}

.wp-block-button.ws-btn-orb.ws-btn-orb--lg{
  --ws-btn-font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  --ws-btn-padding-y: 1em;
  --ws-btn-padding-x: 2.4em;
  --ws-btn-min-w: 210px;
}


/* =====================================================================
   8) SÉCURISATION GUTENBERG
   ===================================================================== */

.wp-block-button.ws-btn-orb.is-style-outline > .wp-block-button__link{
  border: none;
  padding: var(--ws-btn-padding-y) var(--ws-btn-padding-x);
}

.wp-block-button.ws-btn-orb > .wp-block-button__link.has-background{
  background-color: transparent !important;
}


/* =====================================================================
   9) RESPONSIVE
   ===================================================================== */

@media (max-width: 1200px){
  .wp-block-button.ws-btn-orb{
    --ws-btn-font-size: clamp(1.05rem, 5vw, 1.5rem);
    --ws-btn-padding-y: 0.7em;
    --ws-btn-padding-x: 1.1em;
    --ws-btn-min-w: 140px;
  }
}


/* =====================================================================
   10) RÉDUCTION DES ANIMATIONS
   ===================================================================== */

@media (prefers-reduced-motion: reduce){
  .wp-block-button.ws-btn-orb > .wp-block-button__link{
    transition: none;
  }

  .wp-block-button.ws-btn-orb > .wp-block-button__link:hover,
  .wp-block-button.ws-btn-orb > .wp-block-button__link:focus-visible,
  .wp-block-button.ws-btn-orb > .wp-block-button__link:active{
    transform: none;
  }
}