/*
 * Habillage du customisateur et de la page de suivi.
 *
 * Ce fichier suit DESIGN SYSTEM 1.1, qui abroge explicitement la charte de
 * prototype precedente : plus de neo-brutalisme, plus de bord navy epais autour
 * de chaque carte, plus d'ombre dure decalee. Les surfaces plates sont le
 * langage par defaut ; une surface blanche elevee est un accent, pas le
 * conteneur automatique de chaque idee.
 *
 * Trois regles tiennent la mise en page :
 *
 * 1. Le plugin ne dessine pas de cadre. Le theme possede la page ; ce composant
 *    livre le contenu compris entre le header et le footer.
 * 2. Une seule gouttiere horizontale, et elle appartient au theme. Aucun padding
 *    lateral n'est ajoute ici : l'aeration se fait au `gap` et a la marge, qui
 *    espacent sans retrecir. Sur un ecran de 375 px, les paddings imbriques de
 *    la version precedente coutaient 140 px de largeur utile.
 * 3. Les jetons d'elevation et de rayon viennent du site, avec un repli local
 *    pour que le composant reste autonome si sa feuille globale est absente.
 *
 * Aucune ressource externe n'est chargee : ni police distante, ni image, ni
 * feuille de style tierce. Le composant n'emet donc aucune requete vers un tiers
 * et ne transmet aucune adresse IP de visiteur.
 */
.spo-customizer,
.spo-suivi,
.spo-impression {
	--spo-creme: #fff5e6;
	--spo-blanc: #fff;
	--spo-encre: #1a1a3e;
	--spo-encre-doux: #2c2c50;
	--spo-encre-muet: #656174;
	--spo-corail: #ff6b8a;
	--spo-menthe: #3dffa2;
	--spo-miel: #ffd93d;
	--spo-lilas: #b388ff;
	--spo-focus: #6535b5;
	/*
	 * Teinte de trait, distincte du jeton `--spo-ombre` du site : celui-ci porte
	 * une ombre complete, celle-ci une couleur. Les confondre sous le meme nom
	 * rendait invalide toute regle du site utilisant `box-shadow: var(--spo-ombre)`
	 * a l'interieur de ce sous-arbre.
	 */
	--spo-ombre-teinte: rgb(26 26 62 / 9%);
	--spo-filet: rgb(26 26 62 / 12%);
	/*
	 * Equivalents imprimables des quatre couleurs de la charte.
	 *
	 * L'impression du partenaire est en CMJN. Electric Mint #3DFFA2 et Coral Pink
	 * #FF6B8A sont hors gamut : elles sortiraient nettement plus ternes que ce que
	 * le client valide a l'ecran. Montrer une couleur non reproductible sur un
	 * apercu de sachet est une promesse que l'impression ne tient pas.
	 *
	 * Les variables ci-dessus restent celles de la charte et servent a l'interface
	 * (boutons, badges, focus), qui n'est jamais imprimee. Celles-ci servent
	 * uniquement aux faces de sachet.
	 */
	--spo-corail-imprimable: #e8536f;
	--spo-menthe-imprimable: #2fbd84;
	--spo-miel-imprimable: #e8c33c;
	--spo-lilas-imprimable: #9b7ad6;
	/*
	 * Les familles de la charte sont citees en premier : elles s'appliquent si le
	 * theme les fournit. La suite est une pile systeme, afin de ne jamais dependre
	 * d'un appel a un fournisseur de polices distant.
	 */
	--spo-titre: Unbounded, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--spo-texte: Outfit, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	max-width: 1080px;
	margin-inline: auto;
	color: var(--spo-encre-doux);
	font: 17px/1.7 var(--spo-texte);
}

/*
 * Rythme vertical seul. Le design system prevoit 52 px entre sections en
 * desktop et 42 px sous 820 px ; la version precedente figeait 42 px des le
 * desktop et n'appliquait jamais la reduction.
 */
.spo-customizer,
.spo-suivi {
	padding-block: 52px;
}

.spo-customizer h2,
.spo-customizer h3,
.spo-customizer button,
.spo-suivi h2,
.spo-suivi__cta,
.spo-impression h3 {
	color: var(--spo-encre);
	font-family: var(--spo-titre);
}

.spo-customizer__intro {
	max-width: 70ch;
}

.spo-customizer__intro h2 {
	margin: 8px 0 12px;
	font-size: clamp(1.5rem, 2.9vw, 2.15rem);
	line-height: 1.05;
}

.spo-customizer__intro p,
.spo-suivi p {
	max-width: 70ch;
}

.spo-customizer__surtitre {
	color: var(--spo-encre-muet);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Fil du parcours ---------------------------------------------------------- */

/*
 * Quatre etapes, dont deux se passent dans une boite mail. Une bande de reperes,
 * pas quatre cartes : le design system reserve les surfaces elevees aux accents.
 * Le rang vient d'un compteur CSS, donc l'ordre reste juste meme si une etape est
 * ajoutee, et l'etat ne repose jamais sur la seule couleur — la graisse et
 * `aria-current` le portent aussi.
 */
.spo-parcours {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 26px;
	padding: 0;
	counter-reset: spo-etape;
	list-style: none;
	color: var(--spo-encre-muet);
	font-size: .85rem;
}

.spo-parcours__etape {
	display: flex;
	gap: 7px;
	align-items: center;
	counter-increment: spo-etape;
}

.spo-parcours__etape::before {
	display: grid;
	box-sizing: border-box;
	width: 21px;
	height: 21px;
	border: 1px solid var(--spo-filet);
	border-radius: 50%;
	background: var(--spo-blanc);
	color: var(--spo-encre-muet);
	content: counter(spo-etape);
	font-size: .72rem;
	font-weight: 700;
	place-items: center;
}

.spo-parcours__etape--faite::before {
	border-color: transparent;
	background: var(--spo-menthe);
	color: var(--spo-encre);
}

.spo-parcours__etape--ici {
	color: var(--spo-encre);
	font-weight: 700;
}

.spo-parcours__etape--ici::before {
	border-color: transparent;
	background: var(--spo-miel);
	color: var(--spo-encre);
}

/* Prix et appel a l'action ------------------------------------------------- */

/*
 * Bande plate, sans bord ni ombre : c'est une information, pas une surface
 * elevee. Le filet superieur suffit a la detacher du texte qui precede.
 */
.spo-customizer__offre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--spo-filet);
}

.spo-customizer__prix {
	flex: 0 0 auto;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--spo-blanc);
	color: var(--spo-encre);
	font-family: var(--spo-titre);
	font-size: 1.05rem;
	font-weight: 700;
	white-space: nowrap;
}

.spo-customizer__offre-texte {
	flex: 1 1 24ch;
	margin: 0;
	font-size: .95rem;
}

/*
 * Le miel est reserve par le design system a l'action dominante. La version
 * precedente le donnait au badge de prix, qui ne se clique pas, et laissait le
 * bouton en menthe.
 */
.spo-customizer__cta,
.spo-suivi__cta {
	display: inline-block;
	flex: 0 0 auto;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--spo-miel);
	color: var(--spo-encre);
	font-family: var(--spo-titre);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--spo-ombre-basse, 0 8px 18px -10px rgb(26 26 62 / 40%));
	transition: box-shadow .2s ease, transform .2s ease;
}

.spo-customizer__cta:hover,
.spo-customizer__cta:focus-visible,
.spo-suivi__cta:hover,
.spo-suivi__cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--spo-ombre, 0 14px 30px -14px rgb(26 26 62 / 42%));
}

/* Le lien tarifaire est secondaire : il ne porte pas la couleur d'action. */
.spo-customizer__offre .spo-customizer__cta {
	background: var(--spo-blanc);
	font-size: .95rem;
}

/* Messages d'etat ---------------------------------------------------------- */

.spo-customizer__message,
.spo-suivi__avis {
	margin: 24px 0 0;
	padding: 14px 16px;
	border-left: 4px solid var(--spo-lilas);
	border-radius: 0 var(--spo-arrondi, 12px) var(--spo-arrondi, 12px) 0;
	background: var(--spo-blanc);
	font-size: .95rem;
}

.spo-customizer__message--succes,
.spo-suivi__avis--succes {
	border-left-color: var(--spo-menthe);
}

.spo-customizer__message--erreur {
	border-left-color: var(--spo-corail);
}

/* Brief -------------------------------------------------------------------- */

/*
 * Plus de bord, plus d'ombre, plus de padding : le formulaire n'est pas une
 * carte posee sur la page, c'est la page. Le `gap` porte seul l'aeration.
 */
.spo-customizer__brief {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
	margin: 32px 0;
}

.spo-customizer__champ,
.spo-customizer__logo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.spo-customizer__champ--large,
.spo-customizer__identite,
.spo-customizer__logo,
.spo-customizer__palettes,
.spo-customizer__references,
.spo-customizer__envoi,
.spo-customizer__confidentialite {
	grid-column: 1 / -1;
}

.spo-customizer label,
.spo-customizer legend {
	color: var(--spo-encre);
	font-weight: 700;
}

.spo-customizer small {
	color: var(--spo-encre-muet);
	font-size: .85rem;
	line-height: 1.5;
}

/* Mot d'allegement : le champ est optionnel, et cela doit se voir sans lire. */
.spo-customizer__facultatif {
	margin-left: 6px;
	color: var(--spo-encre-muet);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.spo-customizer input[type="text"],
.spo-customizer input[type="email"],
.spo-customizer textarea,
.spo-customizer input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--spo-encre-muet);
	border-radius: 8px;
	background: var(--spo-blanc);
	color: var(--spo-encre);
	font: inherit;
}

.spo-customizer input[type="text"]:focus,
.spo-customizer input[type="email"]:focus,
.spo-customizer textarea:focus {
	border-color: var(--spo-encre);
}

/*
 * Les trois fieldset du formulaire. Sans ce reset, le theme Kadence leur
 * applique `padding: .625em 1.425em; border: 1px solid var(--global-gray-500)`,
 * soit 24 px de padding lateral et un trait gris que personne n'a demandes.
 */
.spo-customizer__identite,
.spo-customizer__palettes,
.spo-customizer__references {
	margin: 0;
	padding: 0;
	border: 0;
}

.spo-customizer__identite {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.spo-customizer__identite legend,
.spo-customizer__palettes legend {
	width: 100%;
	margin-bottom: 10px;
	padding: 0;
}

.spo-customizer__identite label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

/* Palettes de couleurs ----------------------------------------------------- */

/*
 * Nommer les ambiances plutot que demander un code hexadecimal. La pastille
 * montre la teinte ; le nom porte le sens. Chaque choix est une cible tactile
 * pleine, pas un bouton radio de 13 px.
 */
.spo-customizer__palettes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.spo-customizer__palettes small {
	flex: 1 0 100%;
	margin-top: 2px;
}

.spo-customizer__palette {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px 9px 11px;
	border: 1px solid var(--spo-filet);
	border-radius: 999px;
	background: var(--spo-blanc);
	font-weight: 500;
	cursor: pointer;
}

.spo-customizer__palette:has(input:checked) {
	border-color: var(--spo-encre);
	background: var(--spo-miel);
	font-weight: 700;
}

.spo-customizer__palette-nom {
	font-size: .95rem;
	white-space: nowrap;
}

.spo-customizer__pastille {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--spo-ombre-teinte);
}

/*
 * Choix libre : deux selecteurs natifs, ramenes a la taille d'une pastille pour
 * qu'ils se lisent comme les autres options et non comme deux champs de plus.
 */
.spo-customizer__palette--libre input[type="color"] {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--spo-filet);
	border-radius: 7px;
	background: none;
	cursor: pointer;
}

.spo-customizer__palette--libre input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.spo-customizer__palette--libre input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: 5px;
}

.spo-customizer__palette--libre input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: 5px;
}

/* Consentement, envoi et reassurance --------------------------------------- */

/*
 * La case et son texte forment une seule cible : sur mobile, viser une case de
 * 13 px de cote est la premiere cause d'abandon d'un formulaire.
 */
.spo-customizer__consentement,
.spo-customizer__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 4px;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.spo-customizer__consentement input[type="checkbox"],
.spo-customizer__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.spo-customizer__envoi {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	padding-top: 24px;
	border-top: 1px solid var(--spo-filet);
}

.spo-customizer__envoi .spo-customizer__champ {
	width: 100%;
	max-width: 34ch;
}

.spo-customizer__cta--envoi {
	font-size: 1.05rem;
}

.spo-customizer__rassurance {
	margin: 0;
	color: var(--spo-encre-muet);
	font-size: .9rem;
}

.spo-customizer__confidentialite {
	margin: 0;
	padding: 14px 16px;
	border-left: 4px solid var(--spo-menthe);
	border-radius: 0 var(--spo-arrondi, 12px) var(--spo-arrondi, 12px) 0;
	background: var(--spo-blanc);
	font-size: .9rem;
}

.spo-customizer__confidentialite strong {
	color: var(--spo-encre);
}

/* Outils ------------------------------------------------------------------- */

.spo-customizer__outils {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.spo-customizer__face,
.spo-customizer__technique {
	padding: 9px 18px;
	border: 1px solid var(--spo-filet);
	border-radius: 999px;
	background: var(--spo-blanc);
	font-size: .95rem;
	cursor: pointer;
}

.spo-customizer__technique {
	margin-left: auto;
}

.spo-customizer__face[aria-pressed="true"],
.spo-customizer__technique[aria-pressed="true"] {
	border-color: var(--spo-encre);
	background: var(--spo-miel);
	font-weight: 700;
}

.spo-customizer :focus-visible,
.spo-suivi :focus-visible {
	outline: 3px solid var(--spo-focus);
	outline-offset: 3px;
}

/* Apercus ------------------------------------------------------------------ */

.spo-customizer__directions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.spo-customizer__direction h3 {
	margin: 0 0 8px;
	font-size: 1rem;
}

.spo-customizer__direction p {
	margin: 0;
	color: var(--spo-encre-muet);
	font-size: .9rem;
}

/*
 * Face du sachet : fond cream, texte navy. Chaque direction se distingue par sa
 * composition, pas seulement par sa couleur, afin que quatre propositions se
 * lisent comme quatre idees et non comme un coloris decline.
 *
 * Le sachet garde son trait : c'est un objet montre, pas un conteneur
 * d'interface. Le contour y est la silhouette du produit.
 */
.spo-customizer__sachet {
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
	aspect-ratio: 8 / 13;
	border: 1px solid var(--spo-encre);
	border-radius: var(--spo-arrondi, 12px) var(--spo-arrondi, 12px) var(--spo-arrondi-doux, 22px) var(--spo-arrondi-doux, 22px);
	background: var(--spo-creme);
}

.spo-customizer__sachet::before {
	position: absolute;
	content: "";
}

/* Direction 1 : bandeau horizontal. */
.spo-customizer__sachet--1::before {
	inset: 42% -6% auto;
	height: 16%;
	background: var(--spo-corail-imprimable);
}

/* Direction 2 : arche haute. */
.spo-customizer__sachet--2::before {
	inset: -22% -12% auto;
	aspect-ratio: 1;
	border-radius: 0 0 50% 50%;
	background: var(--spo-menthe-imprimable);
}

/* Direction 3 : diagonale basse. */
.spo-customizer__sachet--3::before {
	inset: auto -20% -18%;
	height: 42%;
	background: var(--spo-miel-imprimable);
	transform: rotate(-9deg);
}

/* Direction 4 : cadre. */
.spo-customizer__sachet--4::before {
	inset: 7%;
	border: 10px solid var(--spo-lilas-imprimable);
	border-radius: 8px;
}

.spo-customizer__face-visuelle {
	position: relative;
	z-index: 1;
	display: flex;
	box-sizing: border-box;
	height: 100%;
	padding: 22% 12% 15%;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
}

.spo-customizer__face-visuelle img {
	width: 70%;
	max-height: 28%;
	margin: 0 auto;
	object-fit: contain;
}

.spo-customizer__face-visuelle strong {
	color: var(--spo-encre);
	font-family: var(--spo-titre);
	font-size: 1.05rem;
	line-height: 1.15;
	/* break-word coupe entre les mots ; anywhere cassait les mots en plein milieu. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.spo-customizer__face-visuelle span {
	padding: 6px 8px;
	background: rgb(255 255 255 / 85%);
	color: var(--spo-encre-doux);
	font-size: .85rem;
}

/* Etat et panneau technique ------------------------------------------------ */

.spo-customizer__etat {
	margin-top: 26px;
	padding: 12px 16px;
	border-left: 4px solid var(--spo-lilas);
	border-radius: 0 var(--spo-arrondi, 12px) var(--spo-arrondi, 12px) 0;
	background: var(--spo-blanc);
	font-size: .95rem;
}

.spo-customizer__technique-panel {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--spo-filet);
}

.spo-customizer__technique-panel canvas {
	display: block;
	width: min(100%, 420px);
	height: auto;
	margin: 20px auto;
	border: 1px solid var(--spo-filet);
	background: var(--spo-blanc);
}

/* Passage a l'impression --------------------------------------------------- */

.spo-impression__checklist {
	margin-top: 26px;
	padding: 22px 24px;
	border-radius: var(--spo-arrondi-doux, 22px);
	background: var(--spo-blanc);
	box-shadow: var(--spo-ombre, 0 14px 30px -14px rgb(26 26 62 / 42%));
}

.spo-impression__checklist h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.spo-impression__checklist ul {
	margin: 14px 0 0;
	padding-left: 20px;
}

.spo-impression__checklist li {
	margin-bottom: 8px;
}

.spo-impression__checklist strong {
	color: var(--spo-encre);
}

.spo-impression code {
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--spo-miel);
	color: var(--spo-encre);
	font-weight: 700;
}

/* Page de suivi ------------------------------------------------------------ */

/*
 * Cette page n'avait aucun style : ni ici, ni dans la feuille globale du site.
 * Elle porte pourtant l'attente, le paiement et le telechargement — les trois
 * moments ou un client hesite le plus.
 */
.spo-suivi h2 {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 2.9vw, 2.15rem);
	line-height: 1.05;
}

.spo-suivi p {
	margin: 0 0 14px;
}

/*
 * L'attribut width="400" du markup deborde tout ecran plus etroit. Sans cette
 * regle la page de suivi defile horizontalement sur mobile.
 */
.spo-suivi__apercu {
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto;
	margin: 20px 0 24px;
	border-radius: var(--spo-arrondi, 12px);
	background: var(--spo-blanc);
	box-shadow: var(--spo-ombre, 0 14px 30px -14px rgb(26 26 62 / 42%));
}

.spo-suivi__prix {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	margin: 0 0 18px;
	color: var(--spo-encre-muet);
	font-size: .95rem;
}

.spo-suivi__prix strong {
	color: var(--spo-encre);
	font-family: var(--spo-titre);
	font-size: 1.35rem;
}

.spo-suivi__achat {
	margin: 0 0 16px;
}

.spo-suivi__discret {
	color: var(--spo-encre-muet);
	font-size: .875rem;
}

/* Etats internes ----------------------------------------------------------- */

[data-spo-side][hidden],
[data-spo-logo-field][hidden],
[data-spo-logo-preview][hidden],
[data-spo-brand-preview][hidden],
.spo-customizer__references[hidden] {
	display: none;
}

/* Adaptations -------------------------------------------------------------- */

@media (max-width: 820px) {
	.spo-customizer,
	.spo-suivi {
		padding-block: 42px;
	}

	.spo-customizer__directions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Point de rupture bas aligne sur le design system : 420 px, et non 520 px.
 * L'ecart precedent faisait basculer en mode compact une taille d'ecran trop
 * tot par rapport au reste du site.
 */
@media (max-width: 420px) {
	.spo-customizer__brief {
		grid-template-columns: 1fr;
	}

	.spo-customizer__outils {
		flex-wrap: wrap;
	}

	.spo-customizer__technique {
		width: 100%;
		margin-left: 0;
	}

	.spo-customizer__cta,
	.spo-suivi__cta,
	.spo-suivi__achat {
		width: 100%;
	}

	/*
	 * Bande defilante plutot que grille. Empiles, quatre sachets au ratio 8:13
	 * imposaient plusieurs ecrans de defilement ; a deux colonnes ils tombaient a
	 * 162 px de large, dont 120 px de texte utile. Une bande a defilement lateral
	 * rend a chaque face une largeur lisible et raccourcit fortement la page.
	 */
	.spo-customizer__directions {
		display: flex;
		gap: 14px;
		margin-inline: -18px;
		padding-inline: 18px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		overscroll-behavior-x: contain;
	}

	.spo-customizer__direction {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spo-customizer *,
	.spo-customizer *::before,
	.spo-suivi * {
		scroll-behavior: auto;
		transition: none;
	}

	.spo-customizer__cta:hover,
	.spo-customizer__cta:focus-visible,
	.spo-suivi__cta:hover,
	.spo-suivi__cta:focus-visible {
		transform: none;
	}
}

/*
 * Les propositions du choix multi-moteurs. Deux vignettes cote a cote, sans
 * JavaScript : un formulaire par proposition. La page de suivi n'avait aucun
 * style le 02.08 faute de feuille enqueue ; ne pas laisser cette liste sortir
 * en puces nues pour la meme raison.
 */
.spo-suivi__propositions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 18px 0;
	padding: 0;
	list-style: none;
}

.spo-suivi__proposition {
	flex: 1 1 200px;
	max-width: 240px;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	text-align: center;
}

.spo-suivi__proposition img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* La proposition retenue se voit sans avoir a lire : c'est elle qui sera facturee. */
.spo-suivi__proposition.est-retenue {
	border-color: var(--spo-encre);
	border-width: 2px;
}

.spo-suivi__proposition button {
	margin-top: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--spo-encre);
	border-radius: 8px;
	background: transparent;
	color: var(--spo-encre);
	cursor: pointer;
	font: inherit;
}