/**
 * SIIRA Santé — Classes utilitaires pour le header et le footer.
 *
 * Le header et le footer sont construits à la main dans Royal Addons.
 * Ces classes se collent dans « Avancé → Classes CSS » de n'importe quel
 * widget pour retomber exactement sur la maquette, sans réglage manuel.
 *
 * Voir docs/HEADER-FOOTER-ROYAL.md pour le mode d'emploi widget par widget.
 * Les sélecteurs restent volontairement génériques (pas de dépendance à une
 * classe Royal précise) : ils survivent aux mises à jour de l'extension.
 *
 * @package SIIRA_Sante
 */

/* =========================================================================
   Structure header / footer
   ====================================================================== */

.siira-header {
	background-color: var(--siira-white);
	border-bottom: 1px solid var(--siira-border);
}

.siira-header--sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: var(--siira-shadow-soft);
}

/* Filet doré fin sous le header, comme sur la maquette. */
.siira-header--rule {
	border-bottom: 1px solid var(--siira-gold);
}

.siira-footer {
	background-color: var(--siira-navy);
	color: rgba(255, 255, 255, 0.78);
}

.siira-footer h1,
.siira-footer h2,
.siira-footer h3,
.siira-footer h4,
.siira-footer h5,
.siira-footer h6 {
	color: var(--siira-white);
}

.siira-footer a {
	color: rgba(255, 255, 255, 0.78);
}

.siira-footer a:hover,
.siira-footer a:focus {
	color: var(--siira-gold);
}

/* Titre de colonne de footer. */
.siira-footer-title {
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-xsmall);
	font-weight: var(--siira-fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--siira-white);
	margin-bottom: 14px;
}

/* Barre légale du bas de footer. */
.siira-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 18px;
	font-size: var(--siira-fs-xsmall);
	color: rgba(255, 255, 255, 0.6);
}

.siira-legal a {
	color: rgba(255, 255, 255, 0.6);
}

/* =========================================================================
   Navigation
   ====================================================================== */

.siira-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.siira-nav a {
	position: relative;
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-small);
	font-weight: var(--siira-fw-medium);
	color: var(--siira-heading);
	padding: 8px 0;
	transition: color var(--siira-transition);
}

.siira-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--siira-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--siira-transition);
}

.siira-nav a:hover,
.siira-nav .current-menu-item > a,
.siira-nav .current_page_item > a {
	color: var(--siira-navy);
}

.siira-nav a:hover::after,
.siira-nav .current-menu-item > a::after,
.siira-nav .current_page_item > a::after {
	transform: scaleX(1);
}

/* Navigation inversée (si placée sur le fond navy). */
.siira-nav--light a {
	color: rgba(255, 255, 255, 0.86);
}

.siira-nav--light a:hover {
	color: var(--siira-white);
}

/* =========================================================================
   Icônes d'en-tête et compteur de panier
   ====================================================================== */

.siira-header-icons {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--siira-navy);
}

.siira-cart-badge {
	position: relative;
	display: inline-flex;
}

/* Pastille du compteur : Royal insère son propre compteur, on le repositionne
   et on le repeint aux couleurs de la charte quelle que soit sa balise. */
.siira-cart-badge sup,
.siira-cart-badge .wpr-menu-cart-count,
.siira-cart-badge [class*='count'] {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	font-family: var(--siira-font-body);
	font-size: 10px;
	font-weight: var(--siira-fw-semibold);
	line-height: 1;
	color: var(--siira-white);
	background-color: var(--siira-gold);
	border-radius: var(--siira-radius-pill);
}

/* =========================================================================
   Logo et baseline
   ====================================================================== */

.siira-logo-text {
	font-family: var(--siira-font-display);
	font-size: 1.5rem;
	font-weight: var(--siira-fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--siira-navy);
	line-height: 1.1;
}

.siira-baseline {
	font-family: var(--siira-font-body);
	font-size: 10px;
	font-weight: var(--siira-fw-regular);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--siira-gold);
}

/* =========================================================================
   Réseaux sociaux
   ====================================================================== */

.siira-social a,
.siira-social .elementor-social-icon {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--siira-white);
	transition: background-color var(--siira-transition);
}

.siira-social a:hover,
.siira-social .elementor-social-icon:hover {
	background-color: var(--siira-gold);
	color: var(--siira-navy);
}

/* =========================================================================
   Aides de mise en page réutilisables
   ====================================================================== */

.siira-bg-cream {
	background-color: var(--siira-cream);
}

.siira-bg-navy {
	background-color: var(--siira-navy);
	color: rgba(255, 255, 255, 0.8);
}

.siira-rule-gold {
	border-top: 2px solid var(--siira-gold);
}

.siira-card-surface {
	background-color: var(--siira-white);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-card);
	box-shadow: var(--siira-shadow-soft);
}

.siira-eyebrow {
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-xsmall);
	font-weight: var(--siira-fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--siira-gold);
}