/**
 * Styles de bouton — Time Out Factory.
 *
 * Quatre variantes autour d'un fond commun (bleu TOF + forme identique).
 * Les flèches sont servies depuis la médiathèque (pas de duplication).
 *
 * Sélecteurs racines :
 *   .wp-block-button.is-style-tof-arrow-right
 *   .wp-block-button.is-style-tof-arrow-left
 *   .wp-block-button.is-style-tof-arrow-inside
 *   .wp-block-button.is-style-tof-arrow-large
 */

/* --- Base commune ----------------------------------------------------
   Appliquée aux quatre variantes via sélecteur groupé.
   - couleur : custom-ble (bleu TOF)
   - forme : rectangle aux coins arrondis (peut être affinée en "ticket"
             biseauté via clip-path si besoin — à caler avec la DA)
-------------------------------------------------------------------- */

.wp-block-button.is-style-tof-arrow-right,
.wp-block-button.is-style-tof-arrow-left,
.wp-block-button.is-style-tof-arrow-inside,
.wp-block-button.is-style-tof-arrow-large {
	--tof-btn-bg: var( --wp--preset--color--custom-ble, #2b2c7c );
	--tof-btn-fg: var( --wp--preset--color--custom-blanc, #fff );
	--tof-btn-padding-y: 1.1em;
	--tof-btn-padding-x: 1.6em;
	--tof-btn-gap: 0.75em;
	--tof-btn-arrow-w: 2.4em;
	--tof-btn-arrow-h: 1.05em; /* ratio du SVG ≈ 82.84/36.16 → 2.29:1 */
	--tof-btn-transition: 250ms cubic-bezier( 0.22, 1, 0.36, 1 );
	/* Forme : rectangle dont le bord droit est écarté verticalement —
	   le coin haut-droit remonte, le coin bas-droit descend.
	   Les 8 % d’écart de chaque côté sont compensés par le padding-y. */
	--tof-btn-shape: polygon(
		0 8%,
		100% 0,
		100% 100%,
		0 92%
	);
	position: relative;
}

.wp-block-button.is-style-tof-arrow-right .wp-block-button__link,
.wp-block-button.is-style-tof-arrow-left .wp-block-button__link,
.wp-block-button.is-style-tof-arrow-inside .wp-block-button__link,
.wp-block-button.is-style-tof-arrow-large .wp-block-button__link {
	background-color: var( --tof-btn-bg );
	color: var( --tof-btn-fg );
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	padding: var( --tof-btn-padding-y ) var( --tof-btn-padding-x );
	border: 0;
	border-radius: 0;
	clip-path: var( --tof-btn-shape );
	display: inline-flex;
	align-items: center;
	gap: var( --tof-btn-gap );
	text-decoration: none;
	transition: background-color var( --tof-btn-transition ), transform var( --tof-btn-transition );
}

/* Pas de changement de couleur au survol — le mouvement de la flèche
   suffit comme feedback visuel. */

/* Focus clavier : comme clip-path rogne l’outline natif, on utilise un
   box-shadow sur un pseudo-élément parent pour garder un contour net. */
.wp-block-button.is-style-tof-arrow-right .wp-block-button__link:focus-visible,
.wp-block-button.is-style-tof-arrow-left .wp-block-button__link:focus-visible,
.wp-block-button.is-style-tof-arrow-inside .wp-block-button__link:focus-visible,
.wp-block-button.is-style-tof-arrow-large .wp-block-button__link:focus-visible {
	outline: 3px solid var( --tof-btn-bg );
	outline-offset: 3px;
	/* L’outline est rognée par clip-path mais visible hors du rectangle
	   englobant — le fallback box-shadow double la lisibilité. */
	box-shadow: 0 0 0 3px var( --wp--preset--color--custom-jaune, #ffed00 ) inset;
}

/* --- Bounce partagé pour le hover ------------------------------------ */

@keyframes tof-btn-arrow-bounce-h {
	0%, 100% { transform: translateX( 0 ); }
	50%      { transform: translateX( 6px ); }
}

@keyframes tof-btn-arrow-bounce-h-reverse {
	0%, 100% { transform: translateX( 0 ) scaleX( -1 ); }
	50%      { transform: translateX( -6px ) scaleX( -1 ); }
}

/* ==========================================================
   1) Flèche droite — queue dans le rectangle bleu, pointe dehors
   ========================================================== */

/* La flèche est portée par le wrapper (pas rogné par clip-path),
   positionnée en absolu pour chevaucher le bord droit du bouton. */
.wp-block-button.is-style-tof-arrow-right {
	/* Place disponible pour la queue de la flèche à l’intérieur du rectangle */
	--tof-btn-arrow-overlap: 2.2em;  /* largeur de queue dans le bleu */
	--tof-btn-arrow-overflow: 2.8em; /* largeur de pointe qui dépasse */
}

.wp-block-button.is-style-tof-arrow-right .wp-block-button__link {
	/* Réserve l’espace pour la queue de la flèche à droite du texte */
	padding-right: calc( var( --tof-btn-padding-x ) + var( --tof-btn-arrow-overlap ) );
}

.wp-block-button.is-style-tof-arrow-right::after {
	content: '';
	position: absolute;
	top: 50%;
	right: calc( -1 * var( --tof-btn-arrow-overflow ) );
	width: calc( var( --tof-btn-arrow-overlap ) + var( --tof-btn-arrow-overflow ) );
	height: 1.4em;
	background: url( '/wp-content/uploads/2026/04/fleche-droite-time-out-factory.svg' ) center / contain no-repeat;
	transform: translateY( -50% );
	pointer-events: none;
	z-index: 2;
}

/* Bounce horizontal au survol — aucun changement de couleur */
@keyframes tof-btn-arrow-right-slide {
	0%, 100% { transform: translate( 0, -50% ); }
	50%      { transform: translate( 8px, -50% ); }
}

.wp-block-button.is-style-tof-arrow-right:hover::after,
.wp-block-button.is-style-tof-arrow-right:focus-within::after {
	animation: tof-btn-arrow-right-slide 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) infinite;
}

/* ==========================================================
   2) Flèche gauche — flèche à gauche du bouton, orientée vers la droite.
      Queue dehors à gauche, pointe dans le rectangle bleu.
   ========================================================== */

.wp-block-button.is-style-tof-arrow-left {
	--tof-btn-arrow-overlap: 3em;    /* pointe dans le bleu */
	--tof-btn-arrow-overflow: 2em;   /* queue qui dépasse à gauche */
}

.wp-block-button.is-style-tof-arrow-left .wp-block-button__link {
	/* Réserve l’espace pour la pointe à gauche du texte */
	padding-left: calc( var( --tof-btn-padding-x ) + var( --tof-btn-arrow-overlap ) );
}

.wp-block-button.is-style-tof-arrow-left::before {
	content: '';
	position: absolute;
	top: 50%;
	left: calc( -1 * var( --tof-btn-arrow-overflow ) );
	width: calc( var( --tof-btn-arrow-overlap ) + var( --tof-btn-arrow-overflow ) );
	height: 1.4em;
	background: url( '/wp-content/uploads/2026/04/fleche-droite-time-out-factory.svg' ) center / contain no-repeat;
	transform: translateY( -50% );
	pointer-events: none;
	z-index: 2;
}

/* Hover : mouvement horizontal vers la droite (la flèche file vers le texte) */
@keyframes tof-btn-arrow-left-slide {
	0%, 100% { transform: translate( 0, -50% ); }
	50%      { transform: translate( 8px, -50% ); }
}

.wp-block-button.is-style-tof-arrow-left:hover::before,
.wp-block-button.is-style-tof-arrow-left:focus-within::before {
	animation: tof-btn-arrow-left-slide 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) infinite;
}

/* ==========================================================
   3) Flèche intérieure — flèche entièrement dans le rectangle bleu,
      à gauche du texte, orientée vers la droite.
   ========================================================== */

/* Flèche en élément inline flex du lien : bénéficie du `gap` commun
   et reste contenue dans le clip-path du bouton. */
.wp-block-button.is-style-tof-arrow-inside {
	/* Variables surchargées pour agrandir la flèche sur ce style uniquement */
	--tof-btn-arrow-inside-w: 3.6em;
	--tof-btn-arrow-inside-h: 1.6em;
}

.wp-block-button.is-style-tof-arrow-inside .wp-block-button__link::before {
	content: '';
	flex: 0 0 auto;
	width: var( --tof-btn-arrow-inside-w );
	height: var( --tof-btn-arrow-inside-h );
	background: url( '/wp-content/uploads/2026/04/fleche-droite-time-out-factory.svg' ) center / contain no-repeat;
}

/* Hover : glissement horizontal de la flèche, aucun changement de couleur */
@keyframes tof-btn-arrow-inside-slide {
	0%, 100% { transform: translateX( 0 ); }
	50%      { transform: translateX( 8px ); }
}

.wp-block-button.is-style-tof-arrow-inside .wp-block-button__link:hover::before,
.wp-block-button.is-style-tof-arrow-inside .wp-block-button__link:focus-visible::before {
	animation: tof-btn-arrow-inside-slide 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) infinite;
}

/* ==========================================================
   4) Grande flèche — grosse flèche artistique à gauche du bouton,
      queue dehors vers le haut, pointe dans le rectangle bleu.
   ========================================================== */

.wp-block-button.is-style-tof-arrow-large {
	/* Dimensions et débordement ajustables via ces variables */
	--tof-btn-large-size: 5.5em;       /* taille du SVG (ratio 1:1) */
	--tof-btn-large-left: -2.6em;      /* décalage horizontal (négatif = déborde à gauche) */
	--tof-btn-large-top: -2.8em;       /* décalage vertical (négatif = déborde en haut) */
	--tof-btn-large-tip-reserve: 2.4em;/* place réservée au texte pour que la pointe ne le chevauche pas */
}

.wp-block-button.is-style-tof-arrow-large .wp-block-button__link {
	padding-left: calc( var( --tof-btn-padding-x ) + var( --tof-btn-large-tip-reserve ) );
}

.wp-block-button.is-style-tof-arrow-large::before {
	content: '';
	position: absolute;
	top: var( --tof-btn-large-top );
	left: var( --tof-btn-large-left );
	width: var( --tof-btn-large-size );
	height: var( --tof-btn-large-size );
	background: url( '/wp-content/uploads/2026/04/grande-fleche-tof.svg' ) center / contain no-repeat;
	pointer-events: none;
	z-index: 2;
}

/* Hover : la flèche « avance » en diagonale dans le sens de sa pointe
   (bas-droite), sans changement de couleur. */
@keyframes tof-btn-arrow-large-slide {
	0%, 100% { transform: translate( 0, 0 ); }
	50%      { transform: translate( 6px, 4px ); }
}

.wp-block-button.is-style-tof-arrow-large:hover::before,
.wp-block-button.is-style-tof-arrow-large:focus-within::before {
	animation: tof-btn-arrow-large-slide 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) infinite;
}

/* ==========================================================
   5) WPForms — bouton « Envoyer » habillé en Flèche droite.

   La structure DOM rendue par le plugin WPForms est :
     <div class="wpforms-container wpforms-container-full" id="wpforms-XXX">
       <form class="wpforms-form wpforms-validate" ...>
         ...
         <div class="wpforms-submit-container">
           <button class="wpforms-submit" type="submit">Envoyer</button>
           <img class="wpforms-submit-spinner" ...>  (optionnel)
         </div>
       </form>
     </div>

   On mappe :
   - .wpforms-submit-container → wrapper (équivalent de .wp-block-button) :
     porte position:relative + le ::after qui contient la flèche SVG.
     `display:inline-block` pour que la largeur du wrapper colle à celle
     du bouton (sinon le ::after se positionnerait par rapport au bord du
     formulaire, pas du bouton).
   - .wpforms-submit → rectangle bleu (équivalent de .wp-block-button__link) :
     reçoit le clip-path, les couleurs, le padding et le reset des styles
     UA propres à <button>.

   IMPÉRATIF — spécificité : WPForms cible son bouton avec le sélecteur
   `div.wpforms-container-full .wpforms-form button[type=submit]`
   (spécificité 0,3,2). Les sélecteurs ci-dessous remontent à 0,4,1 ou
   plus pour battre `background-color`, `padding`, `border`, etc. fournis
   par défaut par le plugin. Ne pas baisser cette spécificité.
   ========================================================== */

/* WPForms impose par défaut sa propre `font-family` (souvent Helvetica
   via `.wpforms-form` ou `.wpforms-container`), ce qui rompt l'héritage
   depuis le <body>. On la neutralise au niveau de `.wpforms-form` pour
   que la chaîne d'héritage redescende correctement vers le bouton (qui
   a son propre `font-family: inherit`) et reprenne la police globale du
   site définie sur <body> par theme.json. Spécificité 0,2,1 pour battre
   les règles par défaut de WPForms (typiquement à 0,2,0 ou 0,2,1). */
div.wpforms-container .wpforms-form {
	font-family: inherit;
}

.wpforms-container .wpforms-form .wpforms-submit-container:has( .wpforms-submit ) {
	--tof-btn-bg: var( --wp--preset--color--custom-ble, #2b2c7c );
	--tof-btn-fg: var( --wp--preset--color--custom-blanc, #fff );
	--tof-btn-padding-y: 1.1em;
	--tof-btn-padding-x: 1.6em;
	--tof-btn-gap: 0.75em;
	--tof-btn-transition: 250ms cubic-bezier( 0.22, 1, 0.36, 1 );
	--tof-btn-shape: polygon(
		0 8%,
		100% 0,
		100% 100%,
		0 92%
	);
	--tof-btn-arrow-overlap: 2.2em;
	--tof-btn-arrow-overflow: 2.8em;
	display: inline-block;
	position: relative;
}

.wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit[type="submit"] {
	/* `!important` ciblé sur background-color et color : verrouille les
	   couleurs dans tous les états (hover, focus, active, disabled).
	   WPForms livre des règles `:hover`/`:focus` qui assombrissent le
	   bouton, et certaines versions du plugin utilisent `!important`
	   au passage — la spécificité seule (même à 0,6,2) ne suffit pas
	   à les battre systématiquement. Comme on veut explicitement « pas
	   de changement de couleur au hover » (le bounce de la flèche fait
	   le feedback visuel, comme pour core/button), on neutralise tous
	   les états en une seule règle. */
	background-color: var( --tof-btn-bg ) !important;
	color: var( --tof-btn-fg ) !important;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	padding: var( --tof-btn-padding-y ) calc( var( --tof-btn-padding-x ) + var( --tof-btn-arrow-overlap ) ) var( --tof-btn-padding-y ) var( --tof-btn-padding-x );
	border: 0;
	border-radius: 0;
	clip-path: var( --tof-btn-shape );
	display: inline-flex;
	align-items: center;
	gap: var( --tof-btn-gap );
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	transition: transform var( --tof-btn-transition );
}

.wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit[type="submit"]:focus-visible {
	outline: 3px solid var( --tof-btn-bg );
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var( --wp--preset--color--custom-jaune, #ffed00 ) inset;
}

.wpforms-container .wpforms-form .wpforms-submit-container:has( .wpforms-submit )::after {
	content: '';
	position: absolute;
	top: 50%;
	right: calc( -1 * var( --tof-btn-arrow-overflow ) );
	width: calc( var( --tof-btn-arrow-overlap ) + var( --tof-btn-arrow-overflow ) );
	height: 1.4em;
	background: url( '/wp-content/uploads/2026/04/fleche-droite-time-out-factory.svg' ) center / contain no-repeat;
	transform: translateY( -50% );
	pointer-events: none;
	z-index: 2;
}

/* Bounce horizontal au survol/focus du bouton — réutilise la keyframe
   `tof-btn-arrow-right-slide` définie plus haut pour core/button. */
.wpforms-container .wpforms-form .wpforms-submit-container:has( .wpforms-submit:hover )::after,
.wpforms-container .wpforms-form .wpforms-submit-container:has( .wpforms-submit:focus-visible )::after {
	animation: tof-btn-arrow-right-slide 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ) infinite;
}

/* État désactivé pendant la soumission (WPForms ajoute `disabled`
   et change visuellement l'opacité). On suit la convention native. */
.wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit[type="submit"]:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Spinner natif WPForms : sorti du flux pour ne pas élargir le wrapper
   (sinon le ::after se positionnerait au-delà du bord droit du bouton
   pendant la soumission). Reste visible quand WPForms le déclenche. */
.wpforms-container .wpforms-form .wpforms-submit-container .wpforms-submit-spinner {
	position: absolute;
	top: 50%;
	right: 0.6em;
	transform: translateY( -50% );
	z-index: 3;
	pointer-events: none;
}

/* --- Accessibilité : respect de prefers-reduced-motion --------------- */

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-button[class*="is-style-tof-arrow"] *,
	.wp-block-button[class*="is-style-tof-arrow"] *::before,
	.wp-block-button[class*="is-style-tof-arrow"] *::after,
	.wp-block-button[class*="is-style-tof-arrow"]::after,
	.wpforms-container .wpforms-form .wpforms-submit-container::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}