/*
Theme Name:   ANI WORKOUT
Theme URI:    https://ani-workout.com
Description:  Thème enfant sur mesure pour ANI WORKOUT — fitness, discipline et vente d'e-books. Basé sur Twenty Twenty-Five, 100 % blocs Gutenberg, polices auto-hébergées, aucun JavaScript externe.
Author:       Anicet HONVO / MCR Polydigital
Author URI:   https://ani-workout.com
Template:     twentytwentyfive
Version:      1.4.4
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ani-workout
Tags:         blog, e-commerce, one-column, block-patterns, full-site-editing, accessibility-ready
*/

/* =========================================================
   ANI WORKOUT — feuille de style enfant
   Tout le système de design (couleurs, polices, tailles) est
   défini dans theme.json et modifiable depuis
   Apparence → Éditeur → Styles, sans toucher au code.
   Ce fichier ne contient que ce que theme.json ne sait pas faire.
   ========================================================= */

/* ---------- 1. Accessibilité : focus visible ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Lien d'évitement pour la navigation au clavier */
.skip-link:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--oswald);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ---------- 2. Titres : rendu « cinématographique » ---------- */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
	text-wrap: balance;
}

/* Filet doré sous les titres de section */
.ani-titre-filet::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: .6em;
	background: var(--wp--preset--color--accent);
}

/* Mot mis en valeur en doré — utiliser <span class="ani-or"> */
.ani-or { color: var(--wp--preset--color--accent); }

/* ---------- 3. Boutons ---------- */
.wp-block-button__link {
	transition: transform .15s ease, background-color .15s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}
/* Bouton secondaire : contour doré sur fond sombre */
.wp-block-button__link {
	padding: 0.8em 1.6em;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: transparent;
	/* on retranche la bordure pour que les deux boutons aient exactement la meme taille */
	padding: calc(0.8em - 2px) calc(1.6em - 2px);
}
.wp-block-buttons.is-layout-flex {
	align-items: stretch;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ---------- 4. Bouton d'achat fixe sur mobile (page /ebook) ---------- */
/* S'active en ajoutant la classe CSS « ani-cta-mobile » à un bloc Bouton */
.ani-cta-mobile { display: none; }

@media (max-width: 781px) {
	.ani-cta-mobile {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		margin: 0;
		padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
		background: rgba(10, 10, 10, .94);
		backdrop-filter: blur(8px);
		border-top: 1px solid rgba(201, 162, 39, .35);
	}
	.ani-cta-mobile .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 52px; /* cible tactile confortable */
		line-height: 1.6;
	}
	/* Évite que le bouton fixe masque la fin du contenu */
	body.ani-page-vente .wp-site-blocks { padding-bottom: 96px; }
}

/* ---------- 5. Images ---------- */
img, video { max-width: 100%; height: auto; }
.wp-block-post-featured-image img { border-radius: 4px; }

/* ---------- 6. WooCommerce : lisibilité sur fond sombre ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--contrast);
}
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--large);
}
.woocommerce .quantity input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 4px;
	padding: .7rem .8rem;
	font-size: 16px; /* empêche le zoom automatique sur iOS */
}
.woocommerce form .form-row label { font-weight: 500; }

/* ---------- 7. Temps de lecture ---------- */
.ani-temps-lecture {
	font-family: var(--wp--preset--font-family--oswald);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris);
}

/* ---------- 8. Respect de prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.wp-block-button__link:hover { transform: none; }
}

/* ---------- 9. Impression ---------- */
@media print {
	.ani-cta-mobile, .wp-block-navigation, footer { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ---------- 10. Confort de lecture ---------- */
/* Évite les mots isolés en fin de paragraphe (veuves typographiques) */
.entry-content p,
.wp-block-column p {
	text-wrap: pretty;
}

/* ---------- 11. Image de récit (page Mon histoire) ---------- */
/* Une image verticale ne doit pas occuper tout l'écran sur ordinateur.
   On limite la hauteur sans jamais recadrer : les proportions sont conservées,
   rien n'est coupé — ni le visage, ni le sac, ni le rond-point. */
.ani-image-recit {
	margin-block: clamp(2rem, 5vw, 3.5rem);
}
.ani-image-recit img {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: 4px;
}
@media (min-width: 600px) {
	.ani-image-recit img {
		width: auto;
		max-width: 100%;
		max-height: min(72vh, 560px);
	}
}

/* ---------- 12. Colonnes : respiration sur petits écrans ---------- */
@media (max-width: 781px) {
	.wp-block-columns {
		row-gap: 2.5rem;
	}
}

/* ---------- 13. Boutons sur petits écrans ---------- */
/* Empilement propre, pleine largeur, cible tactile confortable */
@media (max-width: 600px) {
	.wp-block-buttons.is-layout-flex {
		flex-direction: column;
		align-items: stretch;
	}
	.wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.wp-block-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 48px;
		line-height: 1.6;
	}
}

/* ---------- 14. Typographie sur petits écrans ---------- */
/* Corps de texte jamais en dessous de 16 px, interligne confortable.
   Les tailles définies bloc par bloc (citations, accroches) ne sont pas touchées. */
@media (max-width: 480px) {
	.entry-content p:not([class*="font-size"]):not([style*="font-size"]),
	.wp-block-column p:not([class*="font-size"]):not([style*="font-size"]) {
		font-size: 17px;
		line-height: 1.6;
	}
	.entry-content .has-small-font-size {
		font-size: 15px !important;
		line-height: 1.6;
	}
	.entry-content li {
		font-size: 17px;
		line-height: 1.6;
	}
}

/* ---------- 15. Menu : bascule en menu déroulant jusqu'à 999 px ---------- */
/* WordPress bascule à 600 px par défaut, ce qui laisse un menu complet trop
   serré sur les tablettes. On repousse le seuil à 1000 px. */
@media (max-width: 999px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	/* cible tactile confortable pour le bouton d'ouverture */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-block: 0.35em;
	}
}

/* ---------- 16. Pied de page sur petits écrans ---------- */
@media (max-width: 480px) {
	footer .has-small-font-size {
		font-size: 15px !important;
		line-height: 1.75;
	}
	/* les liens juridiques se répartissent sur plusieurs lignes, avec de l'air */
	footer p a {
		display: inline-block;
		padding-block: 5px;
	}
	footer .wp-block-group > * + * {
		margin-top: 1.35em;
	}
	footer .wp-block-social-links {
		gap: 1.25rem;
	}
}

/* ---------- 17. Panneau du menu déroulant ---------- */
/* WordPress affiche un panneau plein écran. On le transforme en tiroir latéral
   de 340 px maximum, avec un voile sombre sur la page derrière.
   La classe est doublée pour passer devant les styles du cœur de WordPress. */
@media (max-width: 999px) {

	/* le conteneur devient le voile */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		padding: 0;
		/* la classe de préréglage de WordPress force la couleur : on repasse devant */
		background-color: rgba(6, 6, 6, .72) !important;
		backdrop-filter: blur(3px);
		align-items: stretch;
		justify-content: flex-end;
		animation: ani-voile .18s ease-out both;
	}

	/* le tiroir */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
		width: min(85vw, 340px);
		max-width: none;
		margin: 0 0 0 auto;
		height: 100%;
		box-sizing: border-box;
		padding: 1.5rem 2rem 2.5rem;
		background-color: var(--wp--preset--color--base) !important;
		border-left: 1px solid rgba(201, 162, 39, .4);
		box-shadow: -20px 0 45px rgba(0, 0, 0, .55);
		overflow-y: auto;
		animation: ani-tiroir .24s cubic-bezier(.22, .61, .36, 1) both;
	}

	/* bouton de fermeture : encadré doré, cible de 44 px */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 0 1.5rem auto;
		border: 1px solid rgba(201, 162, 39, .55);
		border-radius: 4px;
		color: var(--wp--preset--color--accent);
		transition: background-color .15s ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close:hover {
		background-color: rgba(201, 162, 39, .14);
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
	}

	/* liens alignés à gauche, cible tactile confortable */
	/* le menu du site est justifié à droite : dans le tiroir on repasse à gauche */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
		gap: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item {
		align-items: flex-start;
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 52px;
		padding-block: .4rem;
		text-align: left;
		border-bottom: 1px solid rgba(245, 245, 247, .08);
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
		border-bottom: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--accent);
	}
}

@keyframes ani-voile {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ani-tiroir {
	from { transform: translateX(28px); opacity: .35; }
	to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
		animation: none;
	}
}

/* ---------- 18. Image de récit : version paysage sur ordinateur ---------- */
/* À partir de 782 px, l'élément <picture> charge le recadrage paysage.
   La figure sort du bloc de texte (640 px) pour occuper 900 px, centrée sur
   l'écran. En dessous, la version verticale reste dans le flux normal. */
@media (min-width: 782px) {
	.ani-image-recit {
		width: min(900px, 92vw);
		max-width: none;
		margin-inline: auto;
	}
	.ani-image-recit img {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 620px;
		object-fit: contain;
	}
}