/* =====================================================================
   Confirmation de dépôt d'une offre — feuille écrite le 02/09/2026.

   Elle accompagne le code court « mb_submission_success ». La page reprend
   la bande d'en-tête des archives (.mb-archive-header, dont les règles
   restent dans marche-bio.css et ne sont jamais recopiées ici) puis pose
   une carte blanche à la même échelle que celle du formulaire de dépôt :
   mêmes rayons, mêmes ombres, mêmes espacements que form-style.css.

   Le composant de bouton .ctab-ui__btn et le jeu d'icônes .ctab-ui__icone
   sont recopiés depuis ctab-admin-ui/assets/ctab-admin-ui.css, qui n'est
   pas chargée côté public : c'est le précédent posé par form-style.css
   pour .ctab-ui__deroulante. Les données de masque des icônes sont
   reprises telles quelles, aucun dessin n'est refait.

   Aucun nom de classe employé ici pour la largeur ou les marges n'est
   porté par <body> : tout est préfixé par .mb-confirmation-wrapper, sinon
   la mise en page déborderait sur l'en-tête et le pied de page du site.

   Tout est écrit en propriétés logiques : le site existe en arabe et la
   page doit se retourner sans retouche.
   ===================================================================== */

.mb-confirmation-wrapper {
	--co-vert: #6E9F33;
	--co-vert-fonce: #3F6731;
	--co-vert-vif: #54B435;
	--co-texte: #3C434A;
	--co-gris: #6b7280;
	--co-bord: #e5e9e0;
	--co-doux: #F2F6EC;
	--co-ambre: #E4B62C;
	--co-rouge: #a4262c;
	--co-rouge-doux: #fdf2f2;

	box-sizing: border-box;
	color: var(--co-texte);
	line-height: 1.55;
}

.mb-confirmation-wrapper *,
.mb-confirmation-wrapper *::before,
.mb-confirmation-wrapper *::after { box-sizing: border-box; }


/* ---- La carte ---------------------------------------------------------
   Mêmes valeurs que .mb-form-container : la page de dépôt et celle-ci se
   suivent, elles doivent avoir l'air d'un seul écran. */
.mb-confirmation-wrapper .mb-confirmation-carte {
	display: grid;
	justify-items: center;
	gap: clamp(16px, 2.6vw, 26px);
	max-inline-size: 1040px;
	margin-inline: auto;
	padding: clamp(20px, 3.5vw, 40px);
	border: 1px solid rgba(110, 159, 51, .16);
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
	text-align: center;
}


/* ---- Animation --------------------------------------------------------
   Trois bornes : la largeur disponible, la hauteur disponible, et un
   plafond en pixels. La borne en « vh » est celle qui compte sur un
   téléphone tenu en paysage : sans elle, le dessin mange l'écran et le
   texte comme les boutons passent sous la ligne de flottaison. */
.mb-confirmation-wrapper .mb-confirmation__anim {
	inline-size: max(96px, min(240px, 42vw, 28vh));
	aspect-ratio: 1;
	max-inline-size: 100%;
	margin: 0;
}

/* Le repli et l'animation occupent la même case : le premier disparaît
   quand la seconde est réellement chargee, sans saut de mise en page. */
.mb-confirmation-wrapper .mb-confirmation__anim { display: grid; place-items: center; }
.mb-confirmation-wrapper .mb-confirmation__anim > * { grid-area: 1 / 1; }
.mb-confirmation-wrapper .mb-confirmation__lottie { inline-size: 100%; block-size: 100%; }
.mb-confirmation-wrapper .mb-confirmation__anim svg { display: block; }

/* Repli quand le lecteur Lottie n'est pas chargé, ou quand la personne a
   demandé qu'on n'anime pas : la zone ne reste pas un trou blanc. */
.mb-confirmation-wrapper .mb-confirmation__pastille {
	display: grid;
	place-items: center;
	inline-size: max(72px, min(120px, 24vw, 16vh));
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--co-doux);
	color: var(--co-vert-fonce);
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	line-height: 1;
}

.mb-confirmation-wrapper .mb-confirmation-carte--erreur .mb-confirmation__pastille {
	background-color: var(--co-rouge-doux);
	color: var(--co-rouge);
}


/* ---- Textes -----------------------------------------------------------
   « overflow-wrap » partout : « Image de certification » ou « En attente
   de validation » doivent pouvoir se couper à 320 px. */
.mb-confirmation-wrapper .mb-confirmation__texte {
	display: grid;
	gap: 10px;
	max-inline-size: 62ch;
	margin: 0;
}

.mb-confirmation-wrapper .mb-confirmation__titre {
	margin: 0;
	color: var(--co-vert-fonce);
	font-size: clamp(1.2rem, 3.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	overflow-wrap: break-word;
}

.mb-confirmation-wrapper .mb-confirmation-carte--erreur .mb-confirmation__titre { color: var(--co-rouge); }

.mb-confirmation-wrapper .mb-confirmation__resume,
.mb-confirmation-wrapper .mb-confirmation__conseil {
	margin: 0;
	font-size: clamp(.95rem, 1.6vw, 1.02rem);
	overflow-wrap: break-word;
}

.mb-confirmation-wrapper .mb-confirmation__conseil { color: var(--co-gris); }


/* ---- Encadré d'état ---------------------------------------------------- */
.mb-confirmation-wrapper .mb-confirmation__encadre {
	inline-size: 100%;
	max-inline-size: 62ch;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid rgba(110, 159, 51, .28);
	border-radius: 14px;
	background-color: var(--co-doux);
	color: var(--co-vert-fonce);
	font-size: .95rem;
	text-align: start;
	overflow-wrap: break-word;
}

.mb-confirmation-wrapper .mb-confirmation__encadre--alerte {
	border-color: #f1c9cb;
	background-color: var(--co-rouge-doux);
	color: var(--co-rouge);
}

/* Le courriel n'est pas parti mais l'offre existe : ce n'est pas un échec,
   la mention reste discrète et ambrée. */
.mb-confirmation-wrapper .mb-confirmation__encadre--note {
	border-color: rgba(228, 182, 44, .45);
	background-color: #fdf8e8;
	color: #7a5c05;
	font-size: .88rem;
}

.mb-confirmation-wrapper .mb-confirmation__encadre ul {
	margin: 8px 0 0;
	padding-inline-start: 20px;
}

.mb-confirmation-wrapper .mb-confirmation__encadre li { margin-block: 4px; }


/* ---- Détails de la soumission -----------------------------------------
   Même grille que le récapitulatif du formulaire : les colonnes se
   replient seules, aucune ne réclame plus que la place disponible. */
.mb-confirmation-wrapper .mb-confirmation__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 12px;
	inline-size: 100%;
	margin: 0;
	text-align: start;
}

.mb-confirmation-wrapper .mb-confirmation__ligne {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
	padding: 12px 14px;
	border: 1px solid var(--co-bord);
	border-radius: 12px;
	background-color: #fbfcf9;
}

.mb-confirmation-wrapper .mb-confirmation__details dt {
	color: var(--co-gris);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.mb-confirmation-wrapper .mb-confirmation__details dd {
	margin: 0;
	color: var(--co-texte);
	font-size: .95rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}


/* ---- Rangée d'actions -------------------------------------------------- */
.mb-confirmation-wrapper .mb-confirmation__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	inline-size: 100%;
}


/* =====================================================================
   Composant de bouton et jeu d'icônes — copie de ctab-admin-ui.css
   (extension ctab-admin-ui), qui n'est pas mise en file côté public.
   Repris à l'identique, à deux réglages près, tous deux commentés.
   ===================================================================== */

.mb-confirmation-wrapper .ctab-ui__btn,
.mb-confirmation-wrapper .ctab-ui__btn-ghost {
	--ctab-vert: #6E9F33;
	--ctab-vert-fonce: #3F6731;
	--ctab-vert-vif: #54B435;
	--ctab-fond-doux: #F2F6EC;
	/* « overflow » et « position » servent au balayage lumineux ci-dessous. */
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	/* Deux écarts avec l'original, propres au public. Dans l'administration
	   les libellés tiennent sur une ligne et le bouton ne cède jamais;
	ici
	   « Publier une autre offre de vente » doit pouvoir se replier à 320 px
	   et quand la personne agrandit le texte du site. Et 44 px de haut au
	   minimum : ces boutons se touchent au doigt. */
	flex: 0 1 auto;
	white-space: normal;
	max-inline-size: 100%;
}









/* Balayage lumineux au survol, du début vers la fin de la ligne. La bande
   est un pseudo-élément : elle n'ajoute aucun nœud au balisage et
   n'intercepte pas le clic.

   Seule vraie retouche par rapport à l'original : « left » devient
   « inset-inline-start ». En arabe, une bande posée à gauche du bouton
   sortait de la zone de lecture et gonflait sa largeur de défilement de
   260 à 390 px — invisible, la bande étant rognée, mais toute mesure de
   troncature devenait fausse. 02/09/2026 */
.mb-confirmation-wrapper .ctab-ui__btn::after,
.mb-confirmation-wrapper .ctab-ui__btn-ghost::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -150%;
	inline-size: 60%;
	pointer-events: none;
}



/* Sur fond clair, un éclat blanc ne se verrait pas : on balaie en vert. */


.mb-confirmation-wrapper .ctab-ui__btn:hover::after,
.mb-confirmation-wrapper .ctab-ui__btn-ghost:hover::after,
.mb-confirmation-wrapper .ctab-ui__btn:focus-visible::after,


/* Nom propre à cette feuille : une animation « ctab-ui-brillance » existe
   déjà dans ctab-admin-ui.css, en propriétés p7ysiques. Deux animations de
   même nom se remplacent, et c'est la dernière chargée qui gagne. */

.mb-confirmation-wrapper .ctab-ui__btn:focus-visible,
.mb-confirmation-wrapper .ctab-ui__btn-ghost:focus-visible {
	outline: 3px solid var(--ctab-vert-vif);
	outline-offset: 2px;
}

/* WordPress colore tout lien en bleu au survol : sans redire la couleur
   ici, le bleu du cœur reprend le dessus dès qu'on passe la souris. */
.mb-confirmation-wrapper .ctab-ui__btn:hover,
.mb-confirmation-wrapper .ctab-ui__btn:focus,


.mb-confirmation-wrapper .ctab-ui__btn-ghost:hover,
.mb-confirmation-wrapper .ctab-ui__btn-ghost:focus,


/* Le dessin est posé en masque : la pastille prend « currentColor » et
   suit donc la couleur de son bouton. Aucune requête, aucune police
   d'icônes. Les données sont reprises telles quelles de ctab-admin-ui.css. */
.mb-confirmation-wrapper .ctab-ui__icone {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -.15em;
	background-color: currentColor;
	-webkit-mask: var(--ctab-icone) no-repeat center / contain;
	        mask: var(--ctab-icone) no-repeat center / contain;
}
.mb-confirmation-wrapper .ctab-ui__icone--profil     { --ctab-icone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2C0C114.62%2C0%2C0%2C114.61%2C0%2C256s114.61%2C256%2C256%2C256%2C256-114.61%2C256-256S397.38%2C0%2C256%2C0ZM256%2C75.04c44.77%2C0%2C81.06%2C36.29%2C81.06%2C81.06s-36.29%2C81.06-81.06%2C81.06-81.06-36.29-81.06-81.06%2C36.29-81.06%2C81.06-81.06ZM357.22%2C425.74c-67.06%2C14.96-135.38%2C14.96-202.44%2C0-31.81-8.03-52.99-46.89-40.28-73%2C23.73-49.33%2C78.32-92.66%2C141.5-93.08t0%2C0c63.19.42%2C117.78%2C43.74%2C141.5%2C93.08%2C12.7%2C26.11-8.47%2C64.97-40.28%2C73Z%22%2F%3E%3C%2Fsvg%3E"); }
.mb-confirmation-wrapper .ctab-ui__icone--retour { --ctab-icone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2048%2048%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23010101%22%20d%3D%22M24%2C0.5C11.02%2C0.5%2C0.5%2C11.02%2C0.5%2C24S11.02%2C47.5%2C24%2C47.5S47.5%2C36.98%2C47.5%2C24C47.5%2C11.02%2C36.98%2C0.5%2C24%2C0.5z%20M39.42%2C26H15.4l7.92%2C7.92l-2.83%2C2.83L7.75%2C24L20.5%2C11.25l2.83%2C2.83L15.4%2C22h24.02V26z%22%2F%3E%3C%2Fsvg%3E"); }
.mb-confirmation-wrapper .ctab-ui__icone--ajouter { --ctab-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2A10 10 0 1 1 2 12Zm11 1h4a1 1 0 1 0 0-2h-4V7a1 1 0 1 0-2 0v4H7a1 1 0 1 0 0 2h4v4a1 1 0 1 0 2 0v-4Z' clip-rule='evenodd'/%3E%3C/svg%3E"); }

.mb-confirmation-wrapper .ctab-ui__icone--annuler { --ctab-icone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2%2012C2%2010.1871%202.44444%208.51462%203.33333%206.98246C4.23392%205.45029%205.45029%204.23977%206.98246%203.35088C8.52632%202.45029%2010.1988%202%2012%202C13.8129%202%2015.4854%202.45029%2017.0175%203.35088C18.5497%204.23977%2019.7602%205.45614%2020.6491%207C21.5497%208.53216%2022%2010.1988%2022%2012C22%2013.8012%2021.5497%2015.4737%2020.6491%2017.0175C19.7602%2018.5497%2018.5439%2019.7661%2017%2020.6667C15.4678%2021.5556%2013.8012%2022%2012%2022C10.1988%2022%208.52632%2021.5556%206.98246%2020.6667C5.45029%2019.7661%204.23392%2018.5497%203.33333%2017.0175C2.44444%2015.4737%202%2013.8012%202%2012ZM8%2015C8%2015.269%208.09942%2015.5029%208.29825%2015.7018C8.49708%2015.9006%208.73099%2016%209%2016C9.2924%2016%209.52632%2015.9006%209.70175%2015.7018L12%2013.4211L14.2982%2015.7018C14.4737%2015.9006%2014.7076%2016%2015%2016C15.2807%2016%2015.5146%2015.9006%2015.7018%2015.7018C15.9006%2015.5029%2016%2015.269%2016%2015C16%2014.7076%2015.9006%2014.4737%2015.7018%2014.2982L13.4211%2012L15.7018%209.70175C15.9006%209.52632%2016%209.2924%2016%209C16%208.7193%2015.9006%208.48538%2015.7018%208.29825C15.5146%208.09941%2015.2807%208%2015%208C14.7193%208%2014.4854%208.09941%2014.2982%208.29825L12%2010.5789L9.70175%208.29825C9.52632%208.09941%209.2924%208%209%208C8.73099%208%208.49708%208.09941%208.29825%208.29825C8.09942%208.48538%208%208.7193%208%209C8%209.2807%208.09942%209.51462%208.29825%209.70175L10.5789%2012L8.29825%2014.2982C8.09942%2014.4737%208%2014.7076%208%2015Z%22%2F%3E%3C%2Fsvg%3E"); }
.mb-confirmation-wrapper .ctab-ui__icone--garder    { --ctab-icone: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2025%2025'%3E%3Cpath%20d%3D'M12.5%2C0.5c-6.62%2C0-12%2C5.38-12%2C12s5.38%2C12%2C12%2C12s12-5.38%2C12-12S19.12%2C0.5%2C12.5%2C0.5z%20M17.35%2C10.91l-5.3%2C5.3c-0.29%2C0.29-0.68%2C0.44-1.06%2C0.44s-0.77-0.15-1.06-0.44l-2.48-2.48c-0.59-0.59-0.59-1.54%2C0-2.12s1.54-0.59%2C2.12%2C0l1.42%2C1.42l4.24-4.24c0.59-0.59%2C1.54-0.59%2C2.12%2C0S17.94%2C10.32%2C17.35%2C10.91z'%2F%3E%3C%2Fsvg%3E"); }



/* ---- Petits écrans ------------------------------------------------------
   Sous 480 px les boutons prennent toute la largeur : côte à côte, deux
   libellés de cette longueur se retrouveraient sur trois lignes chacun. */
@media (max-width: 480px) {
	.mb-confirmation-wrapper .ctab-ui__btn,
	.mb-confirmation-wrapper .ctab-ui__btn-ghost {
	inline-size: 100%;
}
}


/* ---- Mouvement réduit ---------------------------------------------------
   Le script arrête déjà l'animation sur sa première image quand la
   préférence est posée ; il reste à calmer le balayage lumineux et le
   soulèvement des boutons. */
@media (prefers-reduced-motion: reduce) {
	.mb-confirmation-wrapper .ctab-ui__btn,




	.mb-confirmation-wrapper .ctab-ui__btn:hover::after,
	.mb-confirmation-wrapper .ctab-ui__btn-ghost:hover::after,
	.mb-confirmation-wrapper .ctab-ui__btn:focus-visible::after,
	.mb-confirmation-wrapper .ctab-ui__btn-ghost:focus-visible::after {
	animation: none;
}
}