/*
 * 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.
 *      Exception depuis ST-TRA-057 (05/10/2026) : les 3 encadrés « Quel est votre projet » de l'accueil
 *      deviennent cliquables → section 4 ci-dessous.
 *   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;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Encadrés cliquables — « Quel est votre projet » (accueil), ST-TRA-057, 05/10/2026
 *
 * Chaque encadré (photo + titre + texte) mène à sa typologie sur la page Appartements. Le lien
 * est posé sur le TITRE (`a.rh-carte__lien`, par bin/rh-57-encadres-accueil.php) : un seul
 * lien par carte, dont le nom lu au lecteur d'écran est le titre. Son `::after` s'étend à toute
 * la carte (la colonne Greenshift est déjà en `position: relative`) : l'encadré ENTIER est
 * cliquable, sans imbriquer la photo et le texte dans un lien.
 *
 * Retour de survol : la photo s'avance légèrement (dans son cadre, qui rogne), le titre passe à
 * l'orange de la charte. Focus clavier : contour sur la carte entière, pas sur le seul titre.
 * Zéro CLS : transform / color / outline seulement.
 * ------------------------------------------------------------------------ */

.rh-carte__lien {
  color: inherit;
  text-decoration: none;
  transition: color var(--rh-hover-dur) var(--rh-hover-ease);
}

.rh-carte__lien::after {
  content: "";
  position: absolute;
  /*
   * Calé sur la CARTE (photo + bloc blanc), pas sur la colonne : la colonne Greenshift a une
   * marge intérieure (règle générique `div[id^=gspb_col-id]` : `15px min(3vw, 20px)`, haut
   * remis à 0 sur ces colonnes). En `inset: 0`, les 40 px entre deux cartes et les 15 px dessous
   * étaient cliquables, sans zone neutre entre deux typologies (relecture du 05/10).
   */
  inset: 0 min(3vw, 20px) 15px;
  z-index: 1;
}

/*
 * Le bloc texte de la carte (conteneur Greenshift) est en `position: relative` (posé par id de
 * bloc, d'où `!important`) : le pseudo-élément ne couvrait alors QUE le texte, et un clic sur la
 * photo ne menait nulle part (vérifié le 05/10). Aucun décor ni enfant positionné n'en dépend.
 */
[class*="gspb_row__col"]:has(.rh-carte__lien) .gspb_container {
  position: static !important;
}

/*
 * Pendant l'apparition au scroll (rh-reveal, ~1,5 s), photo et texte sont en fondu + glissement :
 * ils passent alors AU-DESSUS du pseudo-élément, et un clic sur la photo ne menait nulle part
 * (mesuré le 05/10 à 375 px). Tout le contenu de la carte laisse passer les clics, sauf le lien :
 * le clic arrive au lien quel que soit l'état de l'animation.
 */
[class*="gspb_row__col"]:has(.rh-carte__lien) * {
  pointer-events: none;
}

[class*="gspb_row__col"] .rh-carte__lien {
  pointer-events: auto;
}

/*
 * … et le TITRE apparaît en fondu seul, sans glissement (comme `rh-reveal--fade`). Un
 * `transform` sur le titre, même pendant 1 s, en fait le bloc de référence du pseudo-élément :
 * la zone cliquable se réduisait alors au titre jusqu'à la fin de l'animation. Photo et texte
 * gardent leur glissement.
 */
html.rh-js [class*="gspb_row__col"]:has(.rh-carte__lien) .rh-reveal-item:has(> .rh-carte__lien) {
  transform: none !important;
}

.rh-carte__lien:focus-visible {
  outline: none;
}

[class*="gspb_row__col"]:has(.rh-carte__lien) .rh-card-img {
  overflow: hidden;
}

[class*="gspb_row__col"]:has(.rh-carte__lien) .rh-card-img img {
  transition: transform 0.6s var(--rh-hover-ease);
}

[class*="gspb_row__col"]:has(.rh-carte__lien:hover) .rh-card-img img,
[class*="gspb_row__col"]:has(.rh-carte__lien:focus-visible) .rh-card-img img {
  transform: scale(1.04);
}

[class*="gspb_row__col"]:has(.rh-carte__lien:hover) .rh-carte__lien,
.rh-carte__lien:focus-visible {
  color: var(--rh-hover-cta-base);
}

/*
 * Contour de focus porté par la zone cliquable elle-même, donc collé à la carte. En ENCRE et non
 * en orange : sous la 3ᵉ carte, le fond est le triangle orange de la charte, et un contour orange
 * y disparaissait (relecture du 05/10). Seul le contour de focus change, pas les couleurs de texte.
 */
.rh-carte__lien:focus-visible::after {
  outline: 2px solid var(--theme-palette-color-4, #011412);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [class*="gspb_row__col"]:has(.rh-carte__lien) .rh-card-img img {
    transition: none;
  }

  [class*="gspb_row__col"]:has(.rh-carte__lien:hover) .rh-card-img img,
  [class*="gspb_row__col"]:has(.rh-carte__lien:focus-visible) .rh-card-img img {
    transform: none;
  }
}