/**
 * Fiche produit — onglets en tiroir latéral (template-parts/product/tabs.php, assets/js/product-tabs.js),
 * titres de section partagés, tableau de caractéristiques, bloc Montage en images / Notice.
 *
 * Onglets : liste de boutons ; le panneau s'ouvre en tiroir fixe collé au bord droit, pleine hauteur
 * d'écran, par-dessus un voile sombre, à toutes les largeurs (≈ 28rem de large, plein écran sous 40em).
 * Les anciens replis (accordéon sous le bouton actif en mobile, panneau dans le flux entre 1024 et
 * 1279px) ont été retirés : plus aucune règle ni variable --tab-order n'est utilisée.
 * Sans JS (.annad-tabs sans .is-enhanced) : panneau et contenus visibles sous les boutons, dans le flux.
 */

/* ---------- Réglages du tiroir ----------
   Valeurs par défaut (maquette). Surchargeables dans Personnaliser > Réglages Annad > Apparence :
   inc/appearance.php n'injecte une variable que si le réglage diffère de ce défaut. */
:root {
	--annad-drawer-text-size: 18px;
	--annad-drawer-title-size: 34px;
	--annad-drawer-title-weight: 600;
	--annad-drawer-h3-size: 23px;
	--annad-drawer-h3-weight: 600;
	--annad-drawer-padding-x: 3.5rem; /* ≥ 40em ; 0.75rem de moins en dessous */
	--annad-drawer-width: 37.5rem; /* 600px, ≥ 64em ; plafonné à 28rem entre 40 et 64em */
	--annad-drawer-line-height: 1.7; /* interligne du corps */
	--annad-drawer-h3-line-height: 1.45; /* interligne des sous-titres (h3) */
}

/* ---------- Onglets ---------- */

.annad-tabs__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.annad-tabs__grid {
	display: flex;
	flex-direction: column;
	max-width: 60rem;
	margin-inline: auto;
	padding-block: 2rem 3rem;
	border-top: 1px solid var(--color-border);
}

.annad-tabs__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1rem 0;
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	opacity: 0.85;
	transition: opacity var(--transition), color var(--transition);
}

.annad-tabs__button:hover {
	opacity: 1;
}

.annad-tabs__button[aria-expanded="true"] {
	color: var(--color-brand-green);
	opacity: 1;
}

.annad-tabs__button:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

/* Chevron toujours vers la droite : le tiroir s'ouvre de ce côté */
.annad-tabs__chevron {
	flex: 0 0 auto;
	transition: transform var(--transition);
}

.annad-tabs__button[aria-expanded="true"] .annad-tabs__chevron {
	transform: translateX(0.25rem);
}

@media (min-width: 64em) {
	.annad-tabs__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4rem;
		padding-block: 3rem 4rem;
	}

	.annad-tabs__button {
		border-bottom: 0;
	}
}

/* ---------- Voile (créé par product-tabs.js) ---------- */

.annad-tabs__overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-mobile-menu) - 1);
	background-color: var(--color-overlay); /* token du thème : noir à 50 % */
	opacity: 0;
	transition: opacity var(--transition);
}

body.annad-tabs-is-open .annad-tabs__overlay {
	opacity: 1;
}

.annad-tabs__overlay[hidden] {
	display: none;
}

/* Défilement de la page verrouillé pendant l'ouverture (compensation de la barre : padding
   right posé en ligne par le script). */
body.annad-tabs-is-open {
	overflow: hidden;
}

/* ---------- Tiroir ---------- */

.annad-tabs.is-enhanced .annad-tabs__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-mobile-menu);
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
	box-shadow: var(--shadow);
	transform: translateX(100%);
	transition: transform 0.3s ease-out;
}

@media (min-width: 40em) {
	.annad-tabs.is-enhanced .annad-tabs__panel {
		width: min(28rem, var(--annad-drawer-width), 100%);
	}
}

@media (min-width: 64em) {
	.annad-tabs.is-enhanced .annad-tabs__panel {
		width: min(var(--annad-drawer-width), 100%);
	}
}

.annad-tabs.is-open.is-enhanced .annad-tabs__panel {
	transform: translateX(0);
}

.annad-tabs.is-enhanced .annad-tabs__panel[hidden] {
	display: none;
}

/* Panneau dans le flux (sans JS) */
.annad-tabs__panel {
	position: relative;
	margin-block: 0.5rem 1rem;
	padding: 2rem var(--gutter);
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	border-radius: var(--radius-large);
}

/* Contenu défilant sous la croix fixe */
.annad-tabs.is-enhanced .annad-tabs__pane {
	flex: 1 1 auto;
	padding: 4.5rem calc(var(--annad-drawer-padding-x) - 0.75rem) 3rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (min-width: 40em) {
	.annad-tabs.is-enhanced .annad-tabs__pane {
		padding: 4.5rem var(--annad-drawer-padding-x) 3rem;
	}
}

.annad-tabs__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: inherit;
	background-color: var(--color-surface-light);
	border: 0;
	border-radius: 50%;
}

.annad-tabs__close:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: -2px;
}

/* Sans JS : tous les contenus les uns sous les autres */
.annad-tabs:not(.is-enhanced) .annad-tabs__pane + .annad-tabs__pane {
	margin-top: 2.5rem;
}

/* Typographie du panneau (valeurs relevées sur le modèle). Aucune famille déclarée ici :
   Montserrat est héritée du body (redéclaration de font-family supprimée sur le titre). */
.annad-tabs__title {
	margin-bottom: 1.5rem;
	font-size: var(--annad-drawer-title-size);
	font-weight: var(--annad-drawer-title-weight);
	line-height: 1.15;
}

.annad-tabs__title:focus {
	outline: none; /* cible de focus programmatique à l'ouverture */
}

.annad-tabs__body {
	font-size: var(--annad-drawer-text-size);
	line-height: var(--annad-drawer-line-height);
}

/* Espacement entre blocs, à n'importe quelle profondeur : les descriptions importées de l'ancien
   éditeur enveloppent tout dans un seul <div class="ewa-rteLine"> et empilent des <div> au lieu de
   <p>. Limité à « > * + * », l'espacement ne s'appliquait qu'à ce wrapper unique : les lignes
   internes se touchaient. :where() garde une spécificité nulle (surchargeable plus bas). */
.annad-tabs__body :where(p, div, h2, h3, h4, h5, ul, ol, blockquote, figure, table, pre)
	+ :where(p, div, h2, h3, h4, h5, ul, ol, blockquote, figure, table, pre) {
	margin-top: 1.25em;
}

.annad-tabs__body > * + * {
	margin-top: 1.25em;
}

/* Sous-titres : respiration au-dessus, plus marquée que l'espace entre deux paragraphes */
.annad-tabs__body :where(* + h2, * + h3, * + h4) {
	margin-top: 1.75em;
}

.annad-tabs__body h2,
.annad-tabs__body h4 {
	font-weight: 700;
	line-height: 1.25;
}

.annad-tabs__body h3 {
	font-size: var(--annad-drawer-h3-size);
	font-weight: var(--annad-drawer-h3-weight);
	line-height: var(--annad-drawer-h3-line-height);
}

/* Lignes laissées vides dans l'éditeur : le reset (style.css) met les marges de <p> à zéro et la
   règle « > * + * » ne donne aucune hauteur à un paragraphe vide, qui disparaissait donc. */
.annad-tabs__body p:empty,
.annad-tabs__body p:has(> br:only-child) {
	min-height: 1em;
}

.annad-tabs__body a:not(.annad-btn) {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.annad-tabs__button,
	.annad-tabs__chevron,
	.annad-tabs__overlay,
	.annad-tabs.is-enhanced .annad-tabs__panel {
		transition: none;
	}
}

/* ---------- Titres de section (Avantages, FAQ) ---------- */

.annad-section__title {
	margin-bottom: 1.25rem;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	line-height: 1.2;
}

/* ---------- Tableau de caractéristiques (template WooCommerce product-attributes.php) ---------- */

.annad-specs table.shop_attributes {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 0;
}

.annad-specs table.shop_attributes th,
.annad-specs table.shop_attributes td {
	padding: 0.75rem 1rem 0.75rem 0.75rem;
	font-style: normal;
	text-align: left;
	vertical-align: top;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border);
}

.annad-specs table.shop_attributes th {
	width: 40%;
	font-weight: 600;
}

.annad-specs table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* Légende sous le tableau (meta _annad_caracteristiques_legende) : petite, en gris. */
.annad-specs__legend {
	margin-top: 1rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	opacity: 0.7;
}

.annad-specs__legend p {
	margin: 0 0 0.35rem;
}

.annad-specs__legend p:last-child {
	margin-bottom: 0;
}

/* ---------- Montage en images / Notice (maquette fiche_produit_principal.png) ----------
   Deux colonnes côte à côte (≥ 64em), contenu centré : titre avec puce verte (à gauche pour le
   montage, à droite pour la notice), texte, bouton gris en relief (buttons.css). */

.annad-downloads {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	padding-block: 3rem 4rem;
}

@media (min-width: 64em) {
	.annad-downloads {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
}

.annad-downloads__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.annad-downloads__title {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
}

.annad-downloads__title::before,
.annad-downloads__title::after {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

.annad-downloads__item--video .annad-downloads__title::before,
.annad-downloads__item--notice .annad-downloads__title::after {
	content: "";
}

.annad-downloads__text {
	max-width: 32rem;
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.6;
	font-weight: 500;
}

.annad-downloads__btn {
	width: 100%;
	max-width: 22.5rem;
	font-size: 1.0625rem;
}

/* ---------- Rappel du CTA configurateur (sous la FAQ, fiche principale) ---------- */
/* Bandeau vert pleine largeur : le style est celui de la page Technologie (.annad-techno__band,
   assets/css/bandeau.css), rien n'est redéfini ici. Seul propre à la fiche : le titre est suivi du
   bouton sans paragraphe d'accroche entre les deux, d'où un écart un peu plus grand sous le titre.
   Rendu seulement si un configurateur est associé au produit (fiche-principale.php). */
.annad-config-recall .annad-techno__band-title {
	margin-bottom: 1.5rem;
}