/*
 * RH-5 — Micro-interactions au survol / focus. Lot 1 « Dynamisation ». Child theme versionné.
 *
 * Intensité MEDIUM (validée Etienne). Pur CSS, zéro JS, Greenshift non modifié.
 * Ciblage PAR SIGNATURE DE CLASSE uniquement (jamais d'ids de blocs FR) → parité FR/EN Polylang.
 *
 * Cibles (constats DOM vérifiés :8080) :
 *   1. CTA  : a.gspb-buttonbox (×3) + bouton téléphone #header .ct-button.
 *   2. Cartes/images : RETIRÉ — rien n'est cliquable (aucun <a>) → règle « effet si cliquable » ⇒ aucun effet.
 *   3. Play vidéo : .gs-video-overlay → .gs-play-icon-custom svg.
 *
 * CTA : au survol, un panneau incliné (angle 8° du hero) BALAIE le fond du bouton (orange →
 * saumon), façon teasing ; flèche qui glisse ; PAS de relèvement (retiré sur retour Etienne).
 * Zéro CLS : transform / box-shadow / filter / color uniquement (aucune propriété de layout).
 * prefers-reduced-motion : balayage coupé (garde un retour de survol statique + le focus).
 * Tokens --rh-hover-* : tuning du ressenti en preview avec Etienne.
 */

:root {
  --rh-hover-dur: 0.28s;                 /* durée générique (flèche, play) */
  --rh-hover-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rh-hover-arrow-shift: 4px;           /* glissement de la flèche */

  /* Balayage CTA : ralenti + forte décélération (la VITESSE s'éteint en fin de course
     = le « fade » sur le mouvement ; panneau saumon plein, pas de fondu de couleur). */
  --rh-hover-sweep-dur: 1s;              /* durée du balayage diagonal (ralenti) */
  --rh-hover-sweep-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out prononcé : atterrissage qui s'éteint en douceur */

  /* Balayage diagonal CTA « façon hero/teasing » : au survol, un panneau incliné (même
     angle 8° que le hero) BALAIE le fond du bouton. On réutilise les DEUX couleurs de
     palette du hero — rouge (palette-color-1, repos) balayé par le saumon (palette-color-2).
     Ciblage par signature + tokens → parité FR/EN + tuning live. */
  --rh-hover-cta-base: var(--wp--preset--color--palette-color-1, #f54e16);  /* fond au repos (orange) */
  --rh-hover-cta-sweep: var(--wp--preset--color--palette-color-2, #ff9ea2); /* diagonale qui balaie (saumon) */
  --rh-hover-cta-fg: #ffffff;            /* texte + flèche (blancs, conservés pendant le balayage) */
  --rh-hover-cta-tilt: 8deg;             /* angle de la diagonale (repris du hero) */

  --rh-hover-play-scale: 1.12;           /* scale du pictogramme play */
  --rh-hover-play-halo: rgba(255, 255, 255, 0.75);

  --rh-focus-color: var(--wp--preset--color--palette-color-1, #f54e16); /* contour focus clavier */
}

/* ============================================================
 * 1. CTA — boutons orange Greenshift (a.gspb-buttonbox)
 * ============================================================ */

/* Base : le bouton devient le conteneur du balayage.
   - position:relative + isolation:isolate → contexte d'empilement propre au bouton ;
   - overflow:hidden → la diagonale est rognée au cadre du bouton (border-radius:0 → net). */
.gspb_button_wrapper > .gspb-buttonbox {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Panneau incliné (le « balayage ») : hors-champ à droite au repos, comme le hero.
   Grand + haut (300%) pour couvrir toute la surface malgré la rotation (pas de coin non couvert).
   `z-index:-1` DANS le contexte isolé → peint au-dessus du fond du bouton mais SOUS TOUT le
   contenu en flux (texte brut ET flèche, qu'elle soit enfant ou frère du textwrap) → robuste
   au markup Greenshift, sans avoir à remonter manuellement chaque descendant (pattern du hero). */
.gspb_button_wrapper > .gspb-buttonbox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 300%;
  background: var(--rh-hover-cta-sweep);
  transform: translate(-50%, -50%) translateX(175%) rotate(var(--rh-hover-cta-tilt));
  transform-origin: center;
  transition: transform var(--rh-hover-sweep-dur) var(--rh-hover-sweep-ease);
  z-index: -1;
  pointer-events: none;
}
.gspb_button_wrapper > .gspb-buttonbox .gspb-buttonbox-icon {
  transition: transform var(--rh-hover-dur) var(--rh-hover-ease);
}

/* Survol/focus : le panneau balaie jusqu'à couvrir le fond.
   Sélecteur `> a.gspb-buttonbox` = spécificité (0,3,1) : bat l'état hover Greenshift par-id
   (0,3,0) SANS !important ni id de bloc → on neutralise le swap de fond natif (orange→saumon)
   pour ne garder QUE le balayage. */
.gspb_button_wrapper > a.gspb-buttonbox:hover,
.gspb_button_wrapper > a.gspb-buttonbox:focus-visible {
  background-color: var(--rh-hover-cta-base);
  color: var(--rh-hover-cta-fg);
}
.gspb_button_wrapper > a.gspb-buttonbox:hover::before,
.gspb_button_wrapper > a.gspb-buttonbox:focus-visible::before {
  transform: translate(-50%, -50%) translateX(-25%) rotate(var(--rh-hover-cta-tilt));
}
/* La flèche glisse ; texte + flèche restent blancs (lisibles pendant/après le balayage). */
.gspb_button_wrapper > a.gspb-buttonbox:hover .gspb-buttonbox-icon,
.gspb_button_wrapper > a.gspb-buttonbox:focus-visible .gspb-buttonbox-icon {
  transform: translateX(var(--rh-hover-arrow-shift));
}
.gspb_button_wrapper > a.gspb-buttonbox:hover .gspb-buttonbox-icon svg,
.gspb_button_wrapper > a.gspb-buttonbox:hover .gspb-buttonbox-icon svg path,
.gspb_button_wrapper > a.gspb-buttonbox:focus-visible .gspb-buttonbox-icon svg,
.gspb_button_wrapper > a.gspb-buttonbox:focus-visible .gspb-buttonbox-icon svg path {
  fill: var(--rh-hover-cta-fg);
}

/* Bouton téléphone (header Blocksy — pas un buttonbox, pas de flèche) : même balayage diagonal.
   Repos = fond clair natif ; au survol la diagonale orange balaie + texte blanc. */
#header .ct-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--rh-hover-dur) var(--rh-hover-ease);
}
#header .ct-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 300%;
  background: var(--rh-hover-cta-base);
  transform: translate(-50%, -50%) translateX(175%) rotate(var(--rh-hover-cta-tilt));
  transform-origin: center;
  transition: transform var(--rh-hover-sweep-dur) var(--rh-hover-sweep-ease);
  z-index: -1;
  pointer-events: none;
}
#header .ct-button:hover,
#header .ct-button:focus-visible {
  color: #ffffff;
}
#header .ct-button:hover::before,
#header .ct-button:focus-visible::before {
  transform: translate(-50%, -50%) translateX(-25%) rotate(var(--rh-hover-cta-tilt));
}

/* Focus clavier net (s'active quand les liens ont un href — parité prod). */
.gspb_button_wrapper > a.gspb-buttonbox:focus-visible,
#header .ct-button:focus-visible,
.gs-video-overlay:focus-visible {
  outline: 2px solid var(--rh-focus-color);
  outline-offset: 3px;
}

/* ============================================================
 * 3. Play vidéo — .gs-video-overlay → .gs-play-icon-custom
 * ============================================================
 * On scale le SVG interne (transform vierge), PAS le conteneur .gs-play-icon-custom
 * (il porte déjà un translate de centrage). Halo = drop-shadow (suit la forme circulaire, zéro CLS).
 */
.gs-play-icon-custom svg {
  transition: transform var(--rh-hover-dur) var(--rh-hover-ease),
              filter var(--rh-hover-dur) var(--rh-hover-ease);
  transform-origin: center;
}
.gs-video-overlay:hover .gs-play-icon-custom svg,
.gs-video-overlay:focus-visible .gs-play-icon-custom svg {
  transform: scale(var(--rh-hover-play-scale));
  filter: drop-shadow(0 0 10px var(--rh-hover-play-halo));
}

/* ============================================================
 * prefers-reduced-motion : moteur coupé, couleur + focus conservés.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Aucune transition (changement instantané). */
  .gspb_button_wrapper > .gspb-buttonbox,
  .gspb_button_wrapper > .gspb-buttonbox .gspb-buttonbox-icon,
  #header .ct-button,
  .gs-play-icon-custom svg {
    transition: none !important;
  }
  /* Pas de balayage animé : on masque le panneau incliné et on garde un retour de survol
     STATIQUE (le fond passe à la couleur de balayage, sans mouvement). */
  .gspb_button_wrapper > .gspb-buttonbox::before,
  #header .ct-button::before {
    display: none !important;
  }
  .gspb_button_wrapper > a.gspb-buttonbox:hover,
  .gspb_button_wrapper > a.gspb-buttonbox:focus-visible {
    background-color: var(--rh-hover-cta-sweep);
  }
  #header .ct-button:hover,
  #header .ct-button:focus-visible {
    background-color: var(--rh-hover-cta-base);
  }
  /* Aucun relèvement / glissement / scale. */
  .gspb_button_wrapper > a.gspb-buttonbox:hover,
  .gspb_button_wrapper > a.gspb-buttonbox:focus-visible,
  .gspb_button_wrapper > a.gspb-buttonbox:hover .gspb-buttonbox-icon,
  .gspb_button_wrapper > a.gspb-buttonbox:focus-visible .gspb-buttonbox-icon,
  #header .ct-button:hover,
  #header .ct-button:focus-visible,
  .gs-video-overlay:hover .gs-play-icon-custom svg,
  .gs-video-overlay:focus-visible .gs-play-icon-custom svg {
    transform: none;
  }
}