/*
 * Configurateur DTF RecupSports.
 *
 * MOBILE D'ABORD, et strictement préfixé. Chaque sélecteur commence par
 * « .rsdtf », et toutes les variables sont portées par le conteneur racine
 * plutôt que par « :root » : le thème du site ne peut donc rien recevoir de ce
 * fichier, et ce fichier ne dépend d'aucun style du thème.
 *
 * Les tailles de police et les hauteurs de cible respectent la lecture au
 * pouce sur téléphone : 16 px minimum pour les champs, faute de quoi iOS
 * zoome tout seul à la première saisie.
 */

.rsdtf {
	--rsdtf-rouge: #c8102e;
	--rsdtf-encre: #1d1d1b;
	--rsdtf-gris: #6b6b6b;
	--rsdtf-trait: #dcdcdc;
	--rsdtf-fond: #ffffff;
	--rsdtf-fond-doux: #f6f6f6;
	--rsdtf-vert: #1e7b4b;
	--rsdtf-orange: #b26a00;
	--rsdtf-rayon: 10px;

	box-sizing: border-box;
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
	color: var(--rsdtf-encre);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.rsdtf *,
.rsdtf *::before,
.rsdtf *::after {
	box-sizing: inherit;
}

/*
 * L'ATTRIBUT « hidden » DOIT ÊTRE DÉFENDU. Corrigé en 0.4.2, après la recette
 * du 29/08/2026 sur WPTiger.
 *
 * Le configurateur masque l'étape 2, le résumé et l'indicateur de chargement
 * par l'attribut HTML `hidden`, dont l'effet ne vient QUE de la feuille de
 * style de l'agent utilisateur (`[hidden] { display: none }`). Or n'importe
 * quelle règle d'auteur qui pose un `display` sur ces éléments l'emporte sur
 * la feuille de l'agent utilisateur, quelle que soit sa spécificité. Deux
 * sources l'ont fait ici : notre propre `.rsdtf-chargement { display: flex }`,
 * et le thème du site sur les balises `section`.
 *
 * Résultat observé : l'indicateur « Chargement… » tournait en permanence, y
 * compris avant tout appel, et l'étape 2 comme le résumé s'affichaient vides.
 * Le JavaScript était pourtant juste, et arrêtait bien l'indicateur.
 *
 * Le `!important` est délibéré, et c'est le seul de cette feuille : il est ce
 * qui rend la promesse d'isolement du configurateur vraie face à un thème
 * inconnu. Sans lui, tout élément masqué dépend du bon vouloir de Divi.
 */
.rsdtf [hidden],
.rsdtf[hidden] {
	display: none !important;
}

.rsdtf p {
	margin: 0 0 12px;
}

/* --- Étapes ------------------------------------------------------------ */

.rsdtf-etape,
.rsdtf-resume {
	margin: 0 0 28px;
	padding: 18px;
	background: var(--rsdtf-fond);
	border: 1px solid var(--rsdtf-trait);
	border-radius: var(--rsdtf-rayon);
}

.rsdtf-etape__titre,
.rsdtf-resume__titre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.rsdtf-etape__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	background: var(--rsdtf-rouge);
	color: #fff;
	border-radius: 50%;
	font-size: 15px;
}

.rsdtf-etape__aide {
	color: var(--rsdtf-gris);
	font-size: 15px;
}

.rsdtf-suite {
	text-align: center;
	color: var(--rsdtf-gris);
	font-size: 14px;
}

/* --- Boutons ----------------------------------------------------------- */

.rsdtf-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--rsdtf-rayon);
	background: var(--rsdtf-fond-doux);
	color: var(--rsdtf-encre);
	font: inherit;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.rsdtf-bouton:focus-visible {
	outline: 3px solid var(--rsdtf-rouge);
	outline-offset: 2px;
}

.rsdtf-bouton--principal {
	width: 100%;
	background: var(--rsdtf-rouge);
	color: #fff;
	font-size: 17px;
}

.rsdtf-bouton--discret {
	border-color: var(--rsdtf-trait);
	background: #fff;
	font-weight: 500;
}

.rsdtf-bouton--danger {
	border-color: var(--rsdtf-trait);
	background: #fff;
	color: var(--rsdtf-rouge);
	font-weight: 500;
}

.rsdtf-bouton[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* --- Dépôt ------------------------------------------------------------- */

.rsdtf-depot {
	padding: 16px;
	background: var(--rsdtf-fond-doux);
	border: 2px dashed var(--rsdtf-trait);
	border-radius: var(--rsdtf-rayon);
	text-align: center;
}

.rsdtf-depot--survol {
	border-color: var(--rsdtf-rouge);
	background: #fff6f7;
}

.rsdtf-depot__note {
	margin: 10px 0 0;
	color: var(--rsdtf-gris);
	font-size: 14px;
}

/* Le champ reste focalisable au clavier : on le masque sans le retirer. */
.rsdtf-fichier {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Visuels ----------------------------------------------------------- */

.rsdtf-visuels,
.rsdtf-lignes,
.rsdtf-legende {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.rsdtf-visuel {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
	border-top: 1px solid var(--rsdtf-trait);
}

.rsdtf-visuel__apercu {
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	object-fit: contain;
	border: 1px solid var(--rsdtf-trait);
	border-radius: 8px;
	/* Damier : sans lui, un fond blanc et un fond transparent sont identiques. */
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #eee 25%, transparent 25%),
		linear-gradient(-45deg, #eee 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #eee 75%),
		linear-gradient(-45deg, transparent 75%, #eee 75%);
	background-size: 12px 12px;
	background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.rsdtf-visuel__infos {
	flex: 1 1 200px;
	min-width: 0;
}

.rsdtf-visuel__nom {
	margin: 0 0 4px;
	font-weight: 600;
}

.rsdtf-visuel__px {
	margin: 0 0 6px;
	color: var(--rsdtf-gris);
	font-size: 14px;
}

.rsdtf-visuel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 100%;
}

/*
 * Sur téléphone, un bouton au libellé long tient toute la largeur plutôt que
 * de se casser en trois lignes dans une colonne étroite.
 */
.rsdtf-visuel__actions .rsdtf-bouton,
.rsdtf-ligne__actions .rsdtf-bouton {
	width: 100%;
}

.rsdtf-badge {
	display: inline-block;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

.rsdtf-badge--ok {
	background: #e6f4ec;
	color: var(--rsdtf-vert);
}

.rsdtf-badge--attention {
	background: #fdf0dd;
	color: var(--rsdtf-orange);
}

/* --- Lignes ------------------------------------------------------------ */

.rsdtf-ligne {
	padding: 14px 0;
	border-top: 1px solid var(--rsdtf-trait);
}

/*
 * HIÉRARCHIE VERTICALE SUR TÉLÉPHONE, et c'est la disposition de BASE.
 *
 * Une grille d'une seule colonne donne exactement l'ordre voulu : la dimension,
 * puis la quantité, puis le changement de mode. Chaque champ occupe toute la
 * largeur, donc reste confortable au pouce même sur 320 pixels. La disposition
 * côte à côte est ajoutée plus bas, à partir de la tablette, et non l'inverse.
 */
.rsdtf-ligne__champs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: end;
}

.rsdtf-ligne__champs .rsdtf-bouton {
	width: 100%;
}

.rsdtf-champ {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.rsdtf-champ__libelle {
	color: var(--rsdtf-gris);
	font-size: 14px;
}

.rsdtf-champ__saisie {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--rsdtf-trait);
	border-radius: var(--rsdtf-rayon);
	background: #fff;
	color: var(--rsdtf-encre);
	/* 16 px minimum : en dessous, iOS zoome à la première saisie. */
	font-size: 16px;
}

.rsdtf-champ__saisie:focus-visible {
	outline: 3px solid var(--rsdtf-rouge);
	outline-offset: 1px;
}

.rsdtf-champ__saisie--erreur {
	border-color: var(--rsdtf-rouge);
	background: #fff8f8;
}

.rsdtf-ligne__calcule {
	margin: 8px 0 0;
	color: var(--rsdtf-gris);
	font-size: 14px;
}

.rsdtf-ligne__erreur {
	margin: 8px 0 0;
	color: var(--rsdtf-rouge);
	font-size: 14px;
	font-weight: 600;
}

/* --- Groupe d'un fichier ------------------------------------------------ */

/*
 * UN GROUPE PAR FICHIER, ses deux messages en tête, puis ses tailles.
 * Décision du 31/08/2026 : répétés à chaque taille, ces messages cessaient
 * d'être lus.
 */
.rsdtf-groupe {
	padding: 14px 0;
	border-top: 1px solid var(--rsdtf-trait);
}

/*
 * UN NOM TROP LONG SE COUPE, il ne pousse rien hors de l'écran. Le nom entier
 * reste dans l'attribut « title » et dans l'étiquette accessible.
 */
.rsdtf-groupe__nom,
.rsdtf-visuel__nom {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rsdtf-groupe__nom {
	margin: 0 0 8px;
	font-weight: 700;
}

.rsdtf-groupe__badge {
	margin: 0 0 8px;
}

.rsdtf-groupe__atelier {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #eef3f7;
	color: #33475b;
	font-size: 14px;
}

.rsdtf-tailles {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * DEUX GROUPES D'ACTIONS, ET L'ÉCART ENTRE EUX EST DU CODE, pas du décor.
 *
 * Au pouce, sur un téléphone, la marge d'erreur se compte en millimètres. Le
 * bouton qui ajoute une taille et celui qui en retire une ne doivent donc
 * jamais se toucher : ils vivent dans deux conteneurs séparés, avec une marge
 * franche entre eux, et le retrait reste visuellement secondaire.
 */
.rsdtf-ligne__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.rsdtf-ligne__retrait,
.rsdtf-visuel__retrait {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px dashed var(--rsdtf-trait);
}

/*
 * Le retrait est une action secondaire : il en a l'allure. Pas de cadre plein,
 * pas de couleur d'appel, mais une cible tactile de plein format quand même —
 * discret ne veut pas dire difficile à atteindre.
 */
.rsdtf-bouton--retrait {
	width: 100%;
	border-color: transparent;
	background: transparent;
	color: var(--rsdtf-gris);
	font-weight: 500;
	text-decoration: underline;
}

.rsdtf-bouton--retrait:hover,
.rsdtf-bouton--retrait:focus-visible {
	color: var(--rsdtf-rouge);
}

/* --- Schéma de cotes d'une taille -------------------------------------- */

/*
 * Les définitions partagées ne doivent rien occuper : elles ne contiennent
 * qu'une pointe de flèche, référencée par les schémas de chaque ligne.
 */
.rsdtf .rsdtf-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.rsdtf-cotes {
	margin: 10px 0 0;
	color: var(--rsdtf-gris);
}

/*
 * HAUTEUR FIXE, ET C'EST LE POINT. La page ne doit pas grandir avec la
 * quantité commandée : dix logos ou cinq mille donnent le même écran.
 */
/*
 * LARGEUR PLEINE, HAUTEUR DÉDUITE. Une hauteur fixe avec une largeur variable
 * étirerait le dessin, donc les cotes et le logo avec. En laissant la hauteur
 * se déduire du « viewBox », l'échelle reste uniforme à toutes les largeurs, et
 * le schéma ne peut jamais dépasser la place disponible.
 */
.rsdtf-cotes__dessin {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	aspect-ratio: 220 / 160;
}

.rsdtf-cotes__note {
	max-width: 240px;
	margin: 2px 0 0;
	font-size: 12px;
	font-style: italic;
	text-align: center;
	color: var(--rsdtf-gris);
}

/* --- Résumé ------------------------------------------------------------ */

.rsdtf-compte,
.rsdtf-moyenne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
	padding: 10px 16px;
	font-size: 15px;
}

.rsdtf-compte__libelle,
.rsdtf-moyenne__libelle {
	color: var(--rsdtf-gris);
}

.rsdtf-compte__valeur,
.rsdtf-moyenne__valeur {
	margin-left: auto;
	font-weight: 700;
	text-align: right;
}

.rsdtf-moyenne__intitule {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rsdtf-moyenne__precision {
	color: var(--rsdtf-gris);
	font-size: 12px;
	line-height: 1.3;
}

.rsdtf-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
	padding: 14px 16px;
	background: var(--rsdtf-fond-doux);
	border-radius: var(--rsdtf-rayon);
}

.rsdtf-total__libelle {
	color: var(--rsdtf-gris);
	font-size: 15px;
}

.rsdtf-total__valeur {
	margin-left: auto;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--rsdtf-rouge);
}

.rsdtf-capacite {
	padding: 10px 12px;
	border-radius: 8px;
	background: #e6f4ec;
	color: var(--rsdtf-vert);
	font-size: 14px;
	font-weight: 600;
}

.rsdtf-planche-cadre {
	margin: 14px 0;
	overflow-x: auto;
}

.rsdtf-planche {
	display: block;
	width: 100%;
	height: auto;
	max-width: 620px;
	margin: 0 auto;
}

.rsdtf-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 10px;
	font-size: 14px;
}

.rsdtf-legende__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rsdtf-legende__pastille {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

.rsdtf-legende__nb {
	color: var(--rsdtf-gris);
}

.rsdtf-details {
	margin-top: 10px;
	border-top: 1px solid var(--rsdtf-trait);
	padding-top: 10px;
}

/*
 * Un résumé se déplie au pouce : la ligne de titre est une cible tactile de
 * plein format, pas un mot de quatorze pixels de haut.
 */
.rsdtf-details__titre {
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	color: var(--rsdtf-gris);
	font-size: 15px;
}

.rsdtf-details__liste {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 14px;
	margin: 12px 0 0;
	font-size: 14px;
}

.rsdtf-details__liste dt {
	color: var(--rsdtf-gris);
}

.rsdtf-details__liste dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
}

.rsdtf-details__note {
	margin: 12px 0 0;
	color: var(--rsdtf-gris);
	font-size: 13px;
}

/* --- Messages et attente ------------------------------------------------ */

.rsdtf-alerte {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 15px;
}

.rsdtf-alerte--erreur {
	background: #fdecec;
	color: var(--rsdtf-rouge);
	font-weight: 600;
}

.rsdtf-alerte--info {
	background: var(--rsdtf-fond-doux);
	color: var(--rsdtf-encre);
}

.rsdtf-alerte--succes {
	background: #eaf7ee;
	color: #1c6b33;
	font-weight: 600;
}

/* --- Validation au panier, étape 8 -------------------------------------- */

/*
 * MOBILE D'ABORD, comme tout le reste de cette feuille : le bouton occupe la
 * pleine largeur au pouce, et c'est la version de bureau qui le resserre.
 * Hauteur minimale à 48 px, taille de police à 16 px : mêmes règles que les
 * autres cibles, pour les mêmes raisons.
 */
.rsdtf-validation {
	margin: 20px 0 0;
	padding: 16px;
	border: 1px solid var(--rsdtf-trait);
	border-radius: 10px;
	background: var(--rsdtf-fond-doux);
}

.rsdtf-validation__note {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--rsdtf-encre);
}

.rsdtf-valider {
	display: block;
	width: 100%;
	min-height: 48px;
	font-size: 16px;
}

.rsdtf-validation__aide {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--rsdtf-gris);
}

.rsdtf-lien-modifier {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
}

@media (min-width: 620px) {
	.rsdtf-valider {
		width: auto;
		min-width: 260px;
	}
}

.rsdtf-indispo {
	padding: 16px;
	border: 1px solid var(--rsdtf-trait);
	border-radius: var(--rsdtf-rayon);
	background: var(--rsdtf-fond-doux);
}

.rsdtf-chargement {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	color: var(--rsdtf-gris);
	font-size: 15px;
}

.rsdtf-chargement__rond {
	width: 18px;
	height: 18px;
	border: 3px solid var(--rsdtf-trait);
	border-top-color: var(--rsdtf-rouge);
	border-radius: 50%;
	animation: rsdtf-tourne 0.8s linear infinite;
}

@keyframes rsdtf-tourne {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsdtf-chargement__rond {
		animation: none;
	}
}

/* --- À partir de la tablette -------------------------------------------- */

@media (min-width: 620px) {
	.rsdtf-etape,
	.rsdtf-resume {
		padding: 24px;
	}

	.rsdtf-bouton--principal {
		width: auto;
		min-width: 260px;
	}

	.rsdtf-visuel__actions {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.rsdtf-total__valeur {
		font-size: 36px;
	}

	/*
	 * LA DISPOSITION CÔTE À CÔTE EST UN AJOUT, PAS UN POINT DE DÉPART.
	 * Sur un écran large, les deux champs et la bascule tiennent sur une
	 * ligne, et les boutons reprennent leur largeur naturelle. Rien de tout
	 * cela n'est nécessaire au téléphone, et rien de tout cela ne lui est
	 * imposé.
	 */
	.rsdtf-ligne__champs {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.rsdtf-ligne__champs .rsdtf-bouton,
	.rsdtf-visuel__actions .rsdtf-bouton,
	.rsdtf-ligne__actions .rsdtf-bouton,
	.rsdtf-bouton--retrait {
		width: auto;
	}

	.rsdtf-ligne__retrait,
	.rsdtf-visuel__retrait {
		border-top: 0;
		padding-top: 0;
		margin-top: 12px;
	}
}

/* --- Très petits téléphones --------------------------------------------- */

/*
 * 320 pixels de large, moins la marge du thème : chaque pixel compte. On
 * resserre les cadres et l'on desserre rien d'autre — surtout pas la taille
 * des champs, qui doit rester à 16 px sous peine de voir iOS zoomer tout seul
 * à la première saisie.
 */
@media (max-width: 380px) {
	.rsdtf-etape,
	.rsdtf-resume {
		padding: 14px;
	}

	.rsdtf-visuel {
		gap: 10px;
	}

	.rsdtf-visuel__apercu {
		width: 56px;
		height: 56px;
		flex: 0 0 56px;
	}

	.rsdtf-etape__titre,
	.rsdtf-resume__titre {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------------ */
/* LE VOILE D'ATTENTE DU PASSAGE AU PANIER, 15/09/2026                        */
/*                                                                            */
/* « position: fixed » est la SEULE qui tienne ici : au clic, la page est      */
/* souvent défilée tout en bas, et un voile en « absolute » resterait en haut  */
/* du document, donc hors de l'écran. C'est exactement le défaut constaté.     */
/*                                                                            */
/* Il ne touche PAS au défilement de la page : aucun « overflow: hidden » sur  */
/* le corps, qui ferait sauter la position de lecture au moment où le voile    */
/* disparaît.                                                                  */
/* ------------------------------------------------------------------------ */

.rsdtf-voile {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.88 );
}

.rsdtf-voile[hidden] {
	display: none !important;
}

.rsdtf-voile__boite {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 420px;
	padding: 18px 22px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 28px rgba( 0, 0, 0, 0.18 );
	text-align: left;
}

.rsdtf-voile__rond {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 3px solid #d6dde3;
	border-top-color: #1f6feb;
	border-radius: 50%;
	animation: rsdtf-tourne 0.9s linear infinite;
}

.rsdtf-voile__texte {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: #1d2327;
}

/* ------------------------------------------------------------------------ */
/* LE REPÈRE PDF, REMIS EN PLACE LE 18/09/2026                                */
/*                                                                            */
/* Un PDF n'a pas d'aperçu, et ce plugin ne l'ouvrira pas pour en fabriquer    */
/* un. Le repère doit donc dire ce qu'il est ET ce qu'il n'est pas.            */
/*                                                                            */
/* CE QUI A CHANGÉ, ET POURQUOI. En 0.7.1, le sigle et les deux phrases        */
/* vivaient dans UNE SEULE boîte, qui portait la classe de la colonne de       */
/* miniature : 72 pixels, 56 sur petit téléphone, moins la bordure et le       */
/* remplissage. Le texte se découpait mot par mot et débordait. Les deux       */
/* rôles sont désormais SÉPARÉS, chacun là où la largeur le permet :           */
/*                                                                            */
/*   — « rsdtf-pdf-sigle » occupe la colonne de la miniature, et ne porte      */
/*     qu'un mot de trois lettres. « overflow: hidden » interdit désormais     */
/*     tout débordement, quelle que soit la suite : c'est la garantie que le   */
/*     chevauchement de la zone de dépôt ne peut plus revenir ;                */
/*   — « rsdtf-pdf-note » vit dans la colonne large, celle du nom et des       */
/*     pixels, et ne s'impose AUCUNE largeur : elle suit celle de sa colonne.  */
/* ------------------------------------------------------------------------ */

/*
 * LE DAMIER EST RETIRÉ ICI, ET C'EST VOLONTAIRE. Il sert à distinguer un fond
 * blanc d'un fond transparent ; or le fond d'un PDF n'est PAS analysé, et la
 * note le dit. L'afficher derrière un sigle laisserait croire à une analyse.
 */
.rsdtf-pdf-sigle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	overflow: hidden;
	background-image: none;
	background-color: #f4f6f8;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	color: #33383d;
	text-align: center;
}

.rsdtf-pdf-note {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--rsdtf-gris);
}

.rsdtf-pdf-note strong {
	display: block;
	color: #1d2327;
}

@media (prefers-reduced-motion: reduce) {
	.rsdtf-voile__rond {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   ÉTAPE 12 : LE CHOIX DU PARCOURS ET LA PLANCHE DÉJÀ PRÊTE. 0.8.0.

   ⚠️ AUCUNE LARGEUR FIXE EN PIXELS ICI, et ce n'est pas un style : un contrôle
   nommé refuse toute `width` ou `min-width` en pixels au-delà de 320, conditions
   de média retirées, parce que l'écran le plus étroit visé fait 320 pixels. Les
   deux cartes de parcours se partagent donc la place en `flex`, sans base fixe.

   ⚠️ TOUT SÉLECTEUR COMMENCE PAR « .rsdtf », un contrôle le vérifie aussi.
   -------------------------------------------------------------------------- */

.rsdtf-parcours__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.rsdtf-parcours__option {
	flex: 1 1 240px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--rsdtf-trait);
	border-radius: 8px;
	background: #fff;
}

.rsdtf-parcours__choix {
	width: 100%;
	text-align: center;
}

.rsdtf-parcours__aide {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--rsdtf-gris);
}

.rsdtf-parcours__actuel {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.rsdtf-parcours__etiquette {
	font-size: 14px;
	color: var(--rsdtf-gris);
}

/*
 * ⭐ LE NOM DU SERVICE EN COURS SE LIT DE LOIN.
 *
 * Constat de Medi : une fois le parcours choisi, l'écran ne disait plus lequel.
 * Le nom prend donc la couleur du texte, et non le gris des mentions.
 */
.rsdtf-parcours__nom {
	font-size: 16px;
	font-weight: 700;
	color: var(--rsdtf-encre);
}

/* --------------------------------------------------------------------------
   ⭐⭐ LES DEUX SERVICES, EN CARTES ENTIÈRES. 0.8.2.

   CONSTAT DE MEDI À L'ÉCRAN DE WPTIGER : la page posait « Que voulez-vous
   commander ? » et n'offrait plus qu'un petit lien. Le client ne pouvait pas
   savoir qu'un second service existait.

   Chaque carte porte un titre lisible, une explication et un bouton d'action.
   La grille passe à DEUX colonnes quand la place le permet, et retombe à UNE
   colonne sur un téléphone, sans largeur en pixels qui pourrait déborder.

   ⚠️ CE QUE LE BANC NE PEUT PAS DIRE : que le résultat soit beau, contrasté et
   sans chevauchement se constate SUR WPTIGER. Une règle CSS n'est pas un écran.
   -------------------------------------------------------------------------- */

.rsdtf-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

@media (min-width: 620px) {
	.rsdtf-services {
		grid-template-columns: 1fr 1fr;
	}
}

.rsdtf-service {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 18px;
	border: 2px solid var(--rsdtf-trait);
	border-radius: 10px;
	background: #fff;
}

.rsdtf-service__titre {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	color: var(--rsdtf-encre);
}

.rsdtf-service__texte {
	margin: 0;
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.5;
	/* Le texte explicatif reste lisible : l'encre, jamais le gris pâle. */
	color: var(--rsdtf-encre);
}

/*
 * ⚠️ CE BOUTON A L'ALLURE DU BOUTON PRINCIPAL, MAIS PAS SA CLASSE, ET C'EST
 * DÉLIBÉRÉ.
 *
 * Le script capture le bouton principal par le PREMIER « .rsdtf-bouton--
 * principal » du conteneur et lui réécrit son libellé à chaque rendu. Un
 * bouton de service portant cette classe, placé avant l'étape 1, serait
 * capturé à sa place et se renommerait tout seul en « Ajouter mon logo ».
 *
 * ⭐ LE CONTRÔLE NOMMÉ « L'écran de choix du parcours ne capture pas le bouton
 * principal » A ATTRAPÉ EXACTEMENT CETTE FAUTE le 19/09/2026, dans la première
 * écriture de ces cartes. Le style est donc recopié ici, et la classe reste où
 * elle doit être.
 */
.rsdtf-service__action {
	width: 100%;
	text-align: center;
	background: var(--rsdtf-rouge);
	color: #fff;
	font-size: 17px;
}

@media (max-width: 380px) {
	.rsdtf-service {
		padding: 14px;
	}

	.rsdtf-service__titre {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   0.8.7 : LA CARTE ACTIVE SE VOIT, ET LES DEUX RESTENT LISIBLES.

   Demande de Medi du 20/09/2026. Les deux cartes ne se masquent plus : celle
   qui est active porte une bordure marquée et sa mention, l'autre reste un
   bouton de changement.

   ⚠️ La bordure NE CHANGE PAS D'ÉPAISSEUR entre les deux états : « .rsdtf-
   service » porte déjà 2 px, et seule la COULEUR change. Une épaisseur
   variable décalerait la carte de deux pixels au changement de service, et
   ferait sauter la grille sous les yeux du client.

   ⚠️ CE QUE LE BANC NE PEUT PAS DIRE : que le contraste et l'empilement soient
   justes se constate SUR WPTIGER. Une règle CSS n'est pas un écran.
   -------------------------------------------------------------------------- */

.rsdtf-service--actif {
	border-color: var(--rsdtf-rouge);
	background: var(--rsdtf-fond-doux, #fff7f7);
}

.rsdtf-service__actif {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rsdtf-rouge);
}

.rsdtf-planche__mesures {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
}

.rsdtf-planche__mesures dt {
	flex: 1 1 100%;
	font-size: 13px;
	color: var(--rsdtf-gris);
}

.rsdtf-planche__mesures dd {
	flex: 1 1 100%;
	margin: 0 0 8px;
	font-weight: 700;
}

.rsdtf-planche__quantite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.rsdtf-champ--quantite {
	max-width: 120px;
}

/*
 * ⛔ LA RÈGLE DE L AVERTISSEMENT DE LONGUEUR A ÉTÉ RETIRÉE EN 0.8.3.
 *
 * Le bloc « Cette commande représente 7,20 m de film à imprimer d un seul
 * tenant » a disparu du mode expert, sur décision de Medi du 19/09/2026, et il
 * n est remplacé par rien. Une règle de style sans élément à styler est une
 * invitation à le faire revenir.
 */

.rsdtf-planche__prete {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

/* ------------------------------------------------------------------------ */
/* L AMÉLIORATION D UN LOGO PAR L ATELIER, 0.9.0                             */
/*                                                                            */
/* La case est FACULTATIVE et DÉCOCHÉE : rien dans ce style ne doit la faire  */
/* ressembler à une option déjà retenue ni à une étape obligatoire. Encadré   */
/* discret, couleur de service, pas de couleur d alerte.                      */
/*                                                                            */
/* ⚠️ Les blocs masqués le sont par l attribut « hidden », déjà défendu plus  */
/* haut par « .rsdtf [hidden] { display: none !important } ». Aucune règle    */
/* d affichage ci-dessous ne doit le contredire : c est exactement le défaut  */
/* corrigé en 0.4.2, où un « display » de thème rendait visible un bloc que   */
/* le script croyait caché.                                                   */
/* ------------------------------------------------------------------------ */

.rsdtf-amelioration {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid #d7dce2;
	border-radius: 6px;
	background: #f7f9fb;
}

.rsdtf-amelioration__choix {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.4;
}

/* La case garde sa taille native : la grossir la ferait passer pour l action
   principale de la carte, alors que l action principale reste la taille. */
.rsdtf-amelioration__choix input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.rsdtf-amelioration__titre {
	font-size: 14px;
}

.rsdtf-amelioration__aide,
.rsdtf-amelioration__inclus,
.rsdtf-amelioration__conditions,
.rsdtf-amelioration__indisponible {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #4a5560;
}

.rsdtf-amelioration__inclus {
	color: #5b6672;
	font-style: italic;
}

.rsdtf-amelioration__conditions {
	padding-top: 8px;
	border-top: 1px dashed #c9d2db;
	color: #2f3a45;
}

/* ⭐ INDISPONIBLE SE GRISE ET S EXPLIQUE, NE DISPARAÎT PAS. Leçon de la
   0.8.5 : un refus juste qui efface l élément laisse le client sans rien à
   faire ni rien à comprendre. */
.rsdtf-amelioration--inactive {
	opacity: 0.62;
}

.rsdtf-amelioration--inactive .rsdtf-amelioration__choix {
	cursor: not-allowed;
}

.rsdtf-amelioration__indisponible {
	font-weight: 600;
	color: #8a6100;
}

/* Les deux lignes de détail du total n existent que s il y a une amélioration.
   Elles reprennent la mise en page de « .rsdtf-total » en plus discret, pour
   que le TOTAL reste la ligne que l œil trouve en premier. */
.rsdtf-total--impression .rsdtf-total__valeur,
.rsdtf-total--amelioration .rsdtf-total__valeur,
.rsdtf-total--impression .rsdtf-total__libelle,
.rsdtf-total--amelioration .rsdtf-total__libelle {
	font-size: 14px;
	font-weight: 500;
	color: #4a5560;
}

/* Sur téléphone, le libellé de l amélioration peut être long : il se replie
   au lieu de pousser le montant hors de l écran. */
@media ( max-width: 480px ) {
	.rsdtf-total--amelioration {
		flex-wrap: wrap;
	}

	.rsdtf-total--amelioration .rsdtf-total__libelle {
		flex: 1 1 100%;
	}
}