/**
 * Styles du contenu SDS sur le site public.
 *
 * Le plugin ne touche ni aux couleurs, ni aux polices, ni aux tailles : tout
 * cela reste au thème. Il n'ajoute ici que ce que le HTML seul ne peut pas
 * dire : l'espace voulu par l'auteur après un bloc.
 *
 * L'espace n'est pas une marge. Une marge est une propriété que tous les
 * thèmes revendiquent : selon le site, la règle du thème gagnerait et l'espace
 * disparaîtrait. Ici l'espace est une hauteur fabriquée après le contenu du
 * bloc, sur un sélecteur que personne d'autre n'écrit. Aucun conflit possible,
 * donc aucun « !important », et le même résultat sur n'importe quel thème.
 *
 * Les trois hauteurs viennent des réglages du plugin. La valeur écrite après
 * la virgule est le repli : la page reste correcte même si les réglages ne
 * sont pas encore enregistrés.
 */

/* L'espace est une ligne à part entière, décorative : rien à lire, rien à
   sélectionner, seulement de la hauteur. */
.sds-spacer {
	height: var(--sds-space-m, 2rem);
}

.sds-spacer--s { height: var(--sds-space-s, 1rem); }
.sds-spacer--m { height: var(--sds-space-m, 2rem); }
.sds-spacer--l { height: var(--sds-space-l, 3.5rem); }

/* Articles écrits avant, où l'espace était porté par le bloc précédent. Ils se
   convertissent en lignes à leur première ouverture dans l'éditeur, mais ils
   doivent s'afficher correctement en attendant. */
.sds-space::after,
.sds-space-s::after,
.sds-space-m::after,
.sds-space-l::after {
	content: "";
	display: block;
	width: 100%;
	height: var(--sds-space-m, 2rem);
}

.sds-space-s::after { height: var(--sds-space-s, 1rem); }
.sds-space-l::after { height: var(--sds-space-l, 3.5rem); }

/**
 * Boutons d'appel à l'action.
 *
 * Le plugin ne dessine pas le bouton : à l'affichage, le lien reçoit la classe
 * du système en place (« elementor-button », « wp-element-button »…) et c'est
 * le site qui l'habille, pour que le bouton d'un article ressemble à tous les
 * autres boutons du site sans rien avoir à régler.
 *
 * Ici, seulement deux choses : la position du bouton dans la page, et un
 * dessin de secours qui ne s'applique que si aucune classe du site n'a pris le
 * relais. Écrit ainsi, il ne peut jamais écraser l'apparence du site.
 */
.sds-cta {
	display: flex;
}

.sds-cta.sds-align-left { justify-content: flex-start; }
.sds-cta.sds-align-center { justify-content: center; }
.sds-cta.sds-align-right { justify-content: flex-end; }

.sds-button {
	display: inline-block;
	text-decoration: none;
}

.sds-button:not([class*="elementor-button"]):not([class*="wp-element-button"]) {
	padding: 0.7em 1.6em;
	border: 2px solid currentColor;
	border-radius: 0.4em;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

/**
 * Tableaux.
 *
 * Le strict nécessaire pour qu'un tableau soit lisible partout : des traits de
 * séparation, de l'air dans les cellules, un en-tête distinct, et le
 * défilement horizontal quand il ne tient pas à l'écran. Les traits reprennent
 * la couleur du texte très atténuée, donc le tableau s'accorde au thème sans
 * qu'aucune couleur ne soit imposée.
 */
.sds-table {
	max-width: 100%;
	overflow-x: auto;
}

.sds-table > table {
	width: 100%;
	border-collapse: collapse;
}

.sds-table th,
.sds-table td {
	padding: 0.6em 0.9em;
	text-align: left;
	vertical-align: top;
	border: 1px solid currentColor;
	/* Le trait suit la couleur du texte, en très atténué. */
	border-color: color-mix(in srgb, currentColor 18%, transparent);
}

.sds-table th {
	font-weight: 700;
	background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Navigateurs sans color-mix : un gris neutre, visible sur fond clair. */
@supports not (color: color-mix(in srgb, currentColor 18%, transparent)) {
	.sds-table th,
	.sds-table td {
		border-color: rgba(128, 128, 128, 0.35);
	}
}

/**
 * Images.
 *
 * Largeur en paliers, par rapport à la colonne. Jamais de valeur écrite dans
 * l'article : c'est une classe, donc un changement de thème ne la fige pas.
 */
.sds-figure {
	margin: 0 0 1.2em;
}

.sds-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.sds-w-100 { width: 100%; }
.sds-w-75 { width: 75%; }
.sds-w-66 { width: 66%; }
.sds-w-50 { width: 50%; }
.sds-w-33 { width: 33%; }

.sds-figure.sds-align-center { margin-inline: auto; }
.sds-figure.sds-align-left { margin-right: auto; }
.sds-figure.sds-align-right { margin-left: auto; }

/* Hauteur maximale : l'image est recadrée au centre, jamais déformée. */
.sds-h-60 img,
.sds-h-40 img {
	object-fit: cover;
	object-position: center;
}

.sds-h-60 img { max-height: 60vh; }
.sds-h-40 img { max-height: 40vh; }

.sds-figure figcaption {
	margin-top: 0.4em;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Sur un téléphone, une image étroite ne sert à rien. */
@media (max-width: 600px) {
	.sds-figure {
		width: 100%;
	}
}

/**
 * FAQ.
 *
 * Un accordéon natif : « details » et « summary », aucun JavaScript, ouverture
 * et fermeture gérées par le navigateur, accessible au clavier. Le plugin
 * n'habille que le cadre ; la typographie, les couleurs et le style des titres
 * viennent du thème.
 *
 * Bordure, arrondi, couleurs, marge, taille et animation se règlent dans
 * l'administration et arrivent ici en variables. La valeur écrite après la
 * virgule est le repli : la page reste correcte si les réglages n'ont jamais
 * été ouverts.
 */
.sds-faq {
	/* Toute la largeur du bloc qui l'accueille, quel qu'il soit. */
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 2em 0;
	--sds-faq-trait: var(--sds-faq-couleur, rgba(128, 128, 128, 0.35));
	/* Jamais moins d'une cadratin de chaque côté : un texte collé au bord
	   est illisible, quels que soient les réglages. */
	--sds-faq-cote: max(1em, var(--sds-faq-marge, 1em));
	/* Posée directement dans un conteneur flex, sans widget autour. */
	align-self: stretch;
}

/**
 * Pleine largeur dans un conteneur flex.
 *
 * Pourquoi c'est nécessaire. Dans les anciennes sections d'Elementor, une
 * règle donnait sa largeur à tout widget :
 *
 *     .elementor-widget-wrap > .elementor-element { width: 100%; }
 *
 * Les conteneurs, eux, n'ont pas cette règle. Un widget y est un simple
 * élément flex, sans largeur : la sienne vient de « align-items » (axe
 * transversal) ou de « flex-grow » (axe principal), et les valeurs héritées du
 * conteneur sont « --flex-grow: 0 » et « --flex-basis: auto ». Le widget peut
 * donc se réduire à la largeur de son contenu, et notre « width: 100% » vaut
 * alors 100 % de ce widget rétréci, pas du conteneur. Elementor rencontre le
 * même problème avec ses propres widgets : il leur écrit un « width: 100% » en
 * dur, un par un (vidéo, carte, diaporama…).
 *
 * Ici, deux propriétés qui ne peuvent rien casser :
 * - « align-self: stretch » étire le widget quand le conteneur est vertical,
 *   même si ses éléments sont alignés au début, au centre ou à la fin ;
 * - « flex-grow: 1 » lui fait prendre la place disponible quand le conteneur
 *   est horizontal, sans rien retirer aux widgets voisins.
 *
 * Aucune largeur n'est imposée : une mise en page voulue reste intacte, et la
 * règle ne vise que le widget qui contient notre FAQ. Ailleurs que dans un
 * conteneur flex, ces deux propriétés sont ignorées par le navigateur.
 */
.elementor-widget:has(.sds-faq) {
	align-self: stretch;
	flex-grow: 1;
}

.sds-faq__titre {
	margin-bottom: var(--sds-faq-titre-espace, 1em);
}

/* La règle dépend d'un attribut que le rendu ne pose que lorsqu'une couleur
   est enregistrée. Sans réglage, le titre garde celle du thème. */
.sds-faq[data-titre] .sds-faq__titre {
	color: var(--sds-faq-titre-couleur, inherit);
}

.sds-faq__item,
.sds-faq__question,
.sds-faq__reponse {
	box-sizing: border-box;
	width: 100%;
}

.sds-faq__item {
	border: var(--sds-faq-bordure, 1px) solid var(--sds-faq-trait);
	border-radius: var(--sds-faq-arrondi, 0px);
	margin-bottom: var(--sds-faq-espace, 0.5em);
	overflow: hidden;
}

.sds-faq__item:last-of-type {
	margin-bottom: 0;
}

/* Bordure à zéro : aucun trait, pas même en bas. L'arrondi reste, il sert
   aux fonds de la question et de la réponse. */
.sds-faq[data-bordure="0"] .sds-faq__item {
	border-width: 0;
}

.sds-faq__question {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	padding: 0.9em var(--sds-faq-cote);
	background: var(--sds-faq-fond-q, transparent);
	cursor: pointer;
	list-style: none;
}

/**
 * Couleur du texte, seulement si elle a été choisie.
 *
 * La règle dépend d'un attribut que le rendu ne pose que lorsqu'une couleur
 * est enregistrée. Sans réglage, rien ici ne s'applique et la couleur des
 * questions reste celle que le thème donne à ses titres, ce qui est le
 * comportement voulu par défaut.
 *
 * La couleur est posée sur la question et sur son intitulé : l'intitulé est un
 * vrai titre, et un thème qui colore ses titres gagnerait sur un simple
 * héritage.
 */
.sds-faq[data-texte-q] .sds-faq__question,
.sds-faq[data-texte-q] .sds-faq__intitule {
	color: var(--sds-faq-texte-q, inherit);
}

/* Les liens d'une réponse gardent la couleur des liens du site : un lien qui
   ne se distingue plus du texte n'est plus un lien. */
.sds-faq[data-texte-r] .sds-faq__reponse,
.sds-faq[data-texte-r] .sds-faq__reponse :not(a) {
	color: var(--sds-faq-texte-r, inherit);
}

/* Le marqueur par défaut des navigateurs est remplacé par le nôtre. */
.sds-faq__question::-webkit-details-marker {
	display: none;
}

.sds-faq__question::before {
	content: "+";
	flex: 0 0 auto;
	font-weight: 700;
	line-height: 1;
	transition: transform var(--sds-faq-duree, 350ms) ease;
}

.sds-faq__item[open] > .sds-faq__question::before {
	content: "\2212";
}

/* Chevron, triangle et flèche pivotent plutôt que de changer de signe. */
.sds-faq[data-icone="chevron"] .sds-faq__question::before { content: "\203A"; }
.sds-faq[data-icone="triangle"] .sds-faq__question::before { content: "\25B8"; }
.sds-faq[data-icone="fleche"] .sds-faq__question::before { content: "\2192"; }

.sds-faq[data-icone="chevron"] .sds-faq__item[open] > .sds-faq__question::before { content: "\203A"; transform: rotate(90deg); }
.sds-faq[data-icone="triangle"] .sds-faq__item[open] > .sds-faq__question::before { content: "\25B8"; transform: rotate(90deg); }
.sds-faq[data-icone="fleche"] .sds-faq__item[open] > .sds-faq__question::before { content: "\2192"; transform: rotate(90deg); }

.sds-faq[data-icone="aucune"] .sds-faq__question::before {
	display: none;
}

/* Par défaut aucune taille n'est imposée : la question est une vraie balise
   et c'est le thème qui lui donne sa taille. Certains thèmes n'habillent que
   les titres de leurs propres blocs, et un H3 y ressemble alors à un H4 :
   une taille peut donc être imposée depuis les réglages. */
.sds-faq__intitule {
	margin: 0;
	line-height: 1.35;
}

.sds-faq[data-taille="libre"] .sds-faq__intitule {
	font-size: var(--sds-faq-taille, 1.15rem);
}

/* L'espace du haut est réglable : c'est l'air entre la question et le texte
   de la réponse, qui dépend beaucoup de la hauteur de ligne du thème. */
.sds-faq__reponse {
	padding: var(--sds-faq-reponse-espace, 0.75em) var(--sds-faq-cote) 1.2em;
	background: var(--sds-faq-fond-r, transparent);
}

.sds-faq__reponse > :first-child {
	margin-top: 0;
}

/**
 * Ouverture animée.
 *
 * Les navigateurs qui savent animer la hauteur d'un « details » le font
 * vraiment : le bloc se déplie. Les autres reçoivent le fondu ou le
 * glissement du contenu seul, ce qui reste agréable sans JavaScript. Toute
 * personne ayant demandé moins d'animations n'en voit aucune.
 */
@media (prefers-reduced-motion: no-preference) {
	.sds-faq[data-animation="fondu"] .sds-faq__item[open] > .sds-faq__reponse {
		animation: sds-faq-fondu var(--sds-faq-duree, 350ms) ease both;
	}

	.sds-faq[data-animation="glissement"] .sds-faq__item[open] > .sds-faq__reponse {
		animation: sds-faq-glissement var(--sds-faq-duree, 350ms) ease both;
	}

	@supports (interpolate-size: allow-keywords) {
		:root {
			interpolate-size: allow-keywords;
		}

		.sds-faq:not([data-animation="aucune"]) .sds-faq__item::details-content {
			height: 0;
			overflow: hidden;
			transition:
				height var(--sds-faq-duree, 350ms) ease,
				content-visibility var(--sds-faq-duree, 350ms) allow-discrete;
		}

		.sds-faq:not([data-animation="aucune"]) .sds-faq__item[open]::details-content {
			height: auto;
		}

		/* La hauteur se déplie déjà : le contenu n'a plus à glisser. */
		.sds-faq:not([data-animation="aucune"]) .sds-faq__item[open] > .sds-faq__reponse {
			animation-name: sds-faq-fondu;
		}
	}
}

@keyframes sds-faq-fondu {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sds-faq-glissement {
	from { opacity: 0; transform: translateY(-0.4em); }
	to { opacity: 1; transform: translateY(0); }
}