/*
Theme Name:   Lik
Theme URI:    https://liiiik.com
Description:  Thème enfant d'Astra pour la boutique Lik. Contient les jetons de design de la marque, les personnalisations WooCommerce et les réglages de performance. Aucune modification visuelle n'est appliquée par défaut.
Author:       Lik
Author URI:   https://liiiik.com
Template:     astra
Version:      1.0.0
Text Domain:  lik
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. JETONS DE DESIGN
   --------------------------------------------------------------------------
   Source unique de vérité pour les couleurs et la typographie de la marque.
   Ces variables ne s'appliquent à rien tant qu'on ne les utilise pas
   explicitement : les activer ne change donc pas l'apparence du site.

   Palette ancrée dans le drapeau marocain, volontairement pas dans un
   nuancier générique. Le rouge et le vert sont les valeurs officielles.
   ========================================================================== */

:root {
	/* Couleurs de marque */
	--lik-rouge:        #C1272D; /* rouge du drapeau */
	--lik-rouge-fonce:  #8E1B20; /* survol, états pressés */
	--lik-vert:         #006233; /* vert de l'étoile */
	--lik-vert-clair:   #0A8A4A; /* confirmations, disponibilité */

	/* Neutres — teinte légèrement verte, pas un beige générique */
	--lik-nuit:         #14100F; /* texte principal, fonds sombres */
	--lik-ardoise:      #4A4744; /* texte secondaire */
	--lik-chaux:        #F4F5F2; /* fond de section */
	--lik-blanc:        #FFFFFF;

	/* Accent — laiton, référence aux plateaux et à l'étoile */
	--lik-laiton:       #C8A24A;

	/* Typographie — familles proposées, à confirmer avant activation.
	   Les polices ne sont PAS chargées par défaut (voir inc/perf.php). */
	--lik-font-titre:  'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
	--lik-font-corps:  'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

	/* Échelle typographique */
	--lik-txt-xs:   0.75rem;
	--lik-txt-sm:   0.875rem;
	--lik-txt-base: 1rem;
	--lik-txt-lg:   1.25rem;
	--lik-txt-xl:   1.75rem;
	--lik-txt-2xl:  2.5rem;
	--lik-txt-3xl:  clamp(2.5rem, 6vw, 4.5rem);

	/* Rythme d'espacement */
	--lik-esp-xs:  0.5rem;
	--lik-esp-sm:  1rem;
	--lik-esp-md:  1.75rem;
	--lik-esp-lg:  3rem;
	--lik-esp-xl:  5rem;

	/* Divers */
	--lik-rayon:      4px;
	--lik-bordure:    1px solid rgba(20, 16, 15, 0.12);
	--lik-transition: 180ms ease;
}

/* ==========================================================================
   2. UTILITAIRES
   --------------------------------------------------------------------------
   Classes disponibles mais appliquées à aucun élément par défaut.
   ========================================================================== */

/* Séparateur à l'étoile — reprend le pentagramme du drapeau comme marqueur
   structurel plutôt que comme décoration. Usage : <div class="lik-etoile"></div> */
.lik-etoile {
	display: flex;
	align-items: center;
	gap: var(--lik-esp-sm);
	margin: var(--lik-esp-lg) 0;
}

.lik-etoile::before,
.lik-etoile::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(20, 16, 15, 0.15);
}

.lik-etoile::before {
	background: linear-gradient(to right, transparent, rgba(20, 16, 15, 0.15));
}

.lik-etoile::after {
	background: linear-gradient(to left, transparent, rgba(20, 16, 15, 0.15));
}

/* Bandeau de réassurance — activé depuis inc/woocommerce.php */
.lik-reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lik-esp-sm) var(--lik-esp-md);
	margin: var(--lik-esp-md) 0;
	padding: var(--lik-esp-sm) 0;
	border-top: var(--lik-bordure);
	border-bottom: var(--lik-bordure);
	list-style: none;
}

.lik-reassurance li {
	display: flex;
	align-items: center;
	gap: var(--lik-esp-xs);
	margin: 0;
	font-size: var(--lik-txt-sm);
	color: var(--lik-ardoise);
	line-height: 1.4;
}

.lik-reassurance svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--lik-vert);
}

@media (max-width: 600px) {
	.lik-reassurance {
		flex-direction: column;
		gap: var(--lik-esp-xs);
	}
}

/* ==========================================================================
   3. PLANCHER DE QUALITÉ
   --------------------------------------------------------------------------
   Accessibilité de base. Ces règles corrigent des manques réels et
   s'appliquent immédiatement, sans changer la mise en page.
   ========================================================================== */

/* Focus clavier visible — souvent supprimé par les thèmes, indispensable
   pour naviguer au clavier et pour la conformité. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--lik-rouge);
	outline-offset: 2px;
}

/* Respect de la préférence système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   4. PERSONNALISATIONS
   --------------------------------------------------------------------------
   Écrire ici les surcharges spécifiques au site. Laissé vide volontairement.
   ========================================================================== */