/**
 * SIIRA Santé — Socle typographique et conteneurs.
 *
 * Spécificité volontairement faible : ces règles sont des valeurs par défaut.
 * Tout réglage fait dans Elementor les emporte, car
 * Elementor génère des sélecteurs plus spécifiques.
 *
 * @package SIIRA_Sante
 */

/* --- Typographie de base --------------------------------------------- */

body.siira {
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-body);
	font-weight: var(--siira-fw-regular);
	line-height: var(--siira-lh-body);
	color: var(--siira-text);
	background-color: var(--siira-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.siira h1,
.siira h2,
.siira h3 {
	font-family: var(--siira-font-display);
	font-weight: var(--siira-fw-semibold);
	line-height: var(--siira-lh-heading);
	color: var(--siira-heading);
	margin: 0 0 0.5em;
}

.siira h4,
.siira h5,
.siira h6 {
	font-family: var(--siira-font-body);
	font-weight: var(--siira-fw-semibold);
	line-height: var(--siira-lh-heading);
	color: var(--siira-heading);
	margin: 0 0 0.5em;
}

.siira h1 {
	font-size: var(--siira-fs-h1);
	line-height: var(--siira-lh-tight);
}

.siira h2 {
	font-size: var(--siira-fs-h2);
}

.siira h3 {
	font-size: var(--siira-fs-h3);
}

.siira p {
	margin: 0 0 1em;
}

.siira a {
	color: var(--siira-navy);
	text-decoration: none;
	transition: color var(--siira-transition);
}

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

.siira :focus-visible {
	outline: 2px solid var(--siira-gold);
	outline-offset: 2px;
}

.siira img {
	max-width: 100%;
	height: auto;
}

/* --- Conteneurs -------------------------------------------------------- */

.siira .woocommerce,
.siira-container {
	max-width: var(--siira-container);
	margin-inline: auto;
	padding-inline: var(--siira-gutter);
	box-sizing: border-box;
}

/* --- Largeur des pages WooCommerce ------------------------------------
   Les pages boutique, produit, panier, commande et compte sont rendues par
   le thème, pas par Elementor. Beaucoup de thèmes les enferment dans une
   colonne étroite (celle des articles de blog), ce qui écrase la mise en
   page en deux colonnes de la maquette — au point de rendre les titres à la
   verticale.

   On neutralise donc la contrainte sur ces pages uniquement. Les blocs du
   plugin posent ensuite eux-mêmes leur largeur de 1200 px centrée, si bien
   que le résultat est identique quel que soit le thème actif. */

.siira.woocommerce-page #primary,
.siira.woocommerce-page #main,
.siira.woocommerce-page #content,
.siira.woocommerce-page #container,
.siira.woocommerce-page .site-main,
.siira.woocommerce-page .site-content,
.siira.woocommerce-page .content-area,
.siira.woocommerce-page .entry-content,
.siira.woocommerce-page .page-content,
.siira.woocommerce-page main,
.siira.woocommerce-page article {
	width: 100%;
	max-width: none;
	float: none;
}

/* Filet de sécurité : même dans un conteneur resté étroit, une colonne ne
   peut plus se réduire au point de couper les mots. */
.siira.single-product div.product .summary,
.siira.woocommerce-cart .cart-collaterals,
.siira.woocommerce-checkout .woocommerce-checkout-review-order {
	min-width: 0;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Les pages WooCommerce ne passent pas par Elementor : on leur applique
   le rythme vertical de la maquette. */
.siira.woocommerce-page .site-main,
.siira.woocommerce-cart .site-main,
.siira.woocommerce-checkout .site-main,
.siira.woocommerce-account .site-main,
.siira.woocommerce-page main,
.siira.woocommerce-page .entry-content {
	padding-block: var(--siira-section-y);
}

/* --- Champs de formulaire --------------------------------------------- */

.siira input[type='text'],
.siira input[type='email'],
.siira input[type='tel'],
.siira input[type='url'],
.siira input[type='password'],
.siira input[type='search'],
.siira input[type='number'],
.siira select,
.siira textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-small);
	color: var(--siira-heading);
	background-color: var(--siira-white);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-input);
	box-shadow: none;
	transition: border-color var(--siira-transition), box-shadow var(--siira-transition);
	box-sizing: border-box;
}

.siira input:focus,
.siira select:focus,
.siira textarea:focus {
	border-color: var(--siira-navy);
	box-shadow: 0 0 0 3px rgba(23, 40, 74, 0.08);
	outline: none;
}

.siira label {
	font-size: var(--siira-fs-small);
	font-weight: var(--siira-fw-medium);
	color: var(--siira-heading);
}

/* --- Accessibilité ----------------------------------------------------- */

.siira .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Mode « SIIRA complet » --------------------------------------------
   Squelette rendu par le plugin quand aucun constructeur de header/footer
   ne prend le thème en charge. */

.siira-layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.siira-layout__content {
	flex: 1 0 auto;
	padding-block: var(--siira-section-y);
}

/* Les pages Elementor gèrent elles-mêmes leur rythme vertical. */
.siira-layout.page .siira-layout__content {
	padding-block: 0;
}

.siira-layout__header,
.siira-layout__footer {
	flex: 0 0 auto;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--siira-navy);
	color: var(--siira-white);
	border-radius: var(--siira-radius-btn);
}

/* Archives rendues par le squelette : blog, catégories, recherche. */
.siira-archive,
.siira-message {
	max-width: var(--siira-container);
	margin-inline: auto;
	padding-inline: var(--siira-gutter);
}

.siira-archive__title {
	font-size: var(--siira-fs-h1);
	margin-bottom: 32px;
}

.siira-archive__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--siira-gutter);
}

.siira-archive__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background-color: var(--siira-white);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-card);
}

.siira-archive__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--siira-radius-btn);
}

.siira-archive__item-title {
	font-size: var(--siira-fs-h3);
	margin: 0;
}

.siira-archive__excerpt {
	font-size: var(--siira-fs-small);
	margin: 0;
}

.siira-entry-title {
	max-width: var(--siira-container);
	margin: 0 auto 24px;
	padding-inline: var(--siira-gutter);
	font-size: var(--siira-fs-h1);
}

.siira-message {
	text-align: center;
	padding-block: var(--siira-section-y);
}