/* Moteur de personnalisation — feuille de style commune aux 4 écrans.
   Mobile-first : tout est dimensionné pour un smartphone, le tablette/desktop
   est une amélioration via @media (min-width: 720px). */

:root {
	--apa-bleu:          #1b3a6b;
	--apa-bleu-clair:    #2f5fa3;
	--apa-corail:        #ef5a4c;
	--apa-corail-fonce:  #d8412f;
	--apa-vert:          #1e9e6a;
	--apa-jaune:         #f6c453;
	--apa-papier:        #f4f1ea;
	--apa-carte:         #ffffff;
	--apa-texte:         #14202d;
	--apa-texte-doux:    #5b6675;
	--apa-borure-douce:  rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.apa-moteur {
	margin: 0;
	background: var(--apa-papier);
	color: var(--apa-texte);
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	min-height: 100vh;
}

a { color: var(--apa-bleu-clair); }

h1, h2, h3 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	margin: 0 0 .6em;
	line-height: 1.2;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

/* ---- Barre du haut --------------------------------------------------- */

.apa-moteur-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: var(--apa-carte);
	border-bottom: 1px solid var(--apa-borure-douce);
}
.apa-moteur-logo {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-weight: 700;
	color: var(--apa-bleu);
	text-decoration: none;
	font-size: 1rem;
}
.apa-moteur-projet-ref {
	font-size: .85rem;
	color: var(--apa-texte-doux);
}
.apa-moteur-phone {
	margin-left: auto;
	margin-right: 12px;
	color: var(--apa-bleu);
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(27,58,107,.08);
}
.apa-moteur-phone:hover { background: rgba(27,58,107,.15); }
@media (max-width: 480px) {
	.apa-moteur-phone span { display: none; }
	.apa-moteur-phone { padding: 4px 8px; }
}

/* ---- Trail unifié (badge public + origine + 4 étapes) --------------
   Une seule barre au-dessus du moteur. En desktop, tout sur une ligne.
   En mobile, l'origine intermédiaire et les labels d'étapes se
   masquent ; le badge + l'indicateur d'étape courante restent. */

.apa-trail {
	background: var(--apa-carte);
	border-bottom: 1px solid var(--apa-borure-douce);
}
.apa-trail-in {
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Badge public — réutilise les tonalités de /projets/ (tile-bleu, etc.) */
.apa-trail-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	background: rgba(0,0,0,.06);
	color: var(--apa-texte);
}
.apa-trail-badge.tile-bleu   { background: rgba(47,95,163,.14);  color: var(--apa-bleu); }
.apa-trail-badge.tile-corail { background: rgba(239,90,76,.15);  color: var(--apa-corail-fonce); }
.apa-trail-badge.tile-vert   { background: rgba(30,158,106,.16); color: var(--apa-vert); }
.apa-trail-badge.tile-papier { background: var(--apa-papier);    color: var(--apa-bleu); }
a.apa-trail-badge:hover { filter: brightness(.97); }
.apa-trail-badge-icon { font-size: 1rem; line-height: 1; }

/* Cheminement texte — Situations › Concert (ou Catégorie › Produit) */
.apa-trail-origine {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	font-size: .82rem;
	color: var(--apa-texte-doux);
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apa-trail-orig-step {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.apa-trail-orig-step > a,
.apa-trail-orig-step > span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 18ch;
}
.apa-trail-orig-step a {
	color: var(--apa-bleu);
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
.apa-trail-orig-step a:hover { text-decoration: underline; }
.apa-trail-orig-step.is-current span {
	color: var(--apa-texte);
	font-weight: 600;
	max-width: 24ch;
}
.apa-trail-sep {
	margin: 0 4px;
	color: var(--apa-texte-doux);
	opacity: .55;
}

/* Séparateur vertical entre origine et étapes */
.apa-trail-divider {
	width: 1px;
	height: 22px;
	background: var(--apa-borure-douce);
	flex-shrink: 0;
}

/* Les 4 étapes */
.apa-trail-steps {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}
.apa-trail-step {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .8rem;
	background: rgba(0,0,0,.04);
	color: var(--apa-texte-doux);
	white-space: nowrap;
}
.apa-trail-step.is-done {
	background: rgba(30,158,106,.12);
	color: var(--apa-vert);
}
.apa-trail-step.is-current {
	background: var(--apa-bleu);
	color: var(--apa-carte);
}
.apa-trail-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(0,0,0,.08);
	font-weight: 700;
	font-size: .72rem;
	flex-shrink: 0;
}
.apa-trail-step.is-current .apa-trail-step-num {
	background: rgba(255,255,255,.25);
	color: var(--apa-carte);
}
.apa-trail-step.is-done .apa-trail-step-num {
	background: var(--apa-vert);
	color: var(--apa-carte);
}

/* Indicateur compact « 2/4 · Génération » — masqué desktop, visible mobile */
.apa-trail-progress {
	display: none;
	font-size: .82rem;
	color: var(--apa-texte);
	margin-left: auto;
	white-space: nowrap;
}
.apa-trail-progress b {
	color: var(--apa-bleu);
	font-weight: 700;
}

/* ---- Repli responsive ---------------------------------------------- */

/* Tablette : les segments intermédiaires d'origine se cachent — on
   garde la racine (Situations / Boutique) + le segment courant. */
@media (max-width: 860px) {
	.apa-trail-orig-step:not(:first-child):not(:last-child) {
		display: none;
	}
	.apa-trail-orig-step:first-child + .apa-trail-orig-step::before {
		content: "›";
		margin: 0 6px 0 0;
		color: var(--apa-texte-doux);
		opacity: .55;
	}
	.apa-trail-step-label {
		font-size: .78rem;
	}
}

/* Mobile : on bascule sur badge + indicateur compact, l'origine et
   les pastilles d'étapes se masquent. L'étape courante reste indiquée
   via le « 2/4 · Génération ». Pas de débordement horizontal. */
@media (max-width: 600px) {
	.apa-trail-in {
		gap: 10px;
		padding: 8px 14px;
	}
	.apa-trail-origine,
	.apa-trail-steps,
	.apa-trail-divider {
		display: none;
	}
	.apa-trail-progress {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}
}

/* Très petit écran : raccourcit le badge en icône seule. */
@media (max-width: 380px) {
	.apa-trail-badge-label {
		display: none;
	}
	.apa-trail-badge {
		padding: 6px 8px;
	}
}

/* ---- Contenu principal ---------------------------------------------- */

.apa-moteur-main {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px 64px;
}

.apa-card {
	background: var(--apa-carte);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.apa-card + .apa-card { margin-top: 16px; }

.apa-placeholder {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px dashed rgba(0,0,0,.18);
	border-radius: 12px;
	color: var(--apa-texte-doux);
	font-style: italic;
	font-size: .95rem;
}

/* ---- Formulaire ----------------------------------------------------- */

.apa-lede {
	color: var(--apa-texte-doux);
	margin: -.4em 0 1.2em;
	font-size: .95rem;
}

.apa-q { margin: 0 0 16px; }
.apa-q:last-child { margin-bottom: 0; }

.apa-q > label,
.apa-q .apa-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: .95rem;
}

.apa-hint {
	color: var(--apa-texte-doux);
	font-weight: 400;
	font-size: .85rem;
}

.apa-upload-hint {
	margin: 8px 0 0;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--apa-texte-doux);
}

.apa-q input[type="text"],
.apa-q input[type="date"],
.apa-q textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 10px;
	background: #fcfbf8;
	font-family: inherit;
	font-size: 1rem;
	color: var(--apa-texte);
	-webkit-appearance: none;
	appearance: none;
}
.apa-q input:focus,
.apa-q textarea:focus {
	outline: 0;
	border-color: var(--apa-bleu-clair);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(47,95,163,.18);
}
.apa-q textarea { resize: vertical; min-height: 90px; }

.apa-q input[aria-invalid="true"],
.apa-q textarea[aria-invalid="true"] {
	border-color: var(--apa-corail-fonce);
	background: #fff5f3;
}

.apa-field-error {
	color: var(--apa-corail-fonce);
	font-size: .88rem;
	margin: 6px 0 0;
}

.apa-alert {
	padding: 10px 14px;
	margin: 0 0 16px;
	border-radius: 10px;
	background: #fff5f3;
	color: var(--apa-corail-fonce);
	border: 1px solid rgba(216,65,47,.25);
	font-size: .92rem;
}

.apa-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.apa-hidden { display: none !important; }

/* ---- Chips (palette + style) --------------------------------------- */

.apa-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.apa-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fcfbf8;
	cursor: pointer;
	font-size: .92rem;
	user-select: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.apa-chip input { position: absolute; opacity: 0; pointer-events: none; }
.apa-chip:hover { border-color: var(--apa-bleu-clair); }
.apa-chip.is-selected,
.apa-chip:has(input:checked) {
	background: var(--apa-bleu);
	border-color: var(--apa-bleu);
	color: var(--apa-carte);
}
.apa-chip-dot {
	display: inline-block;
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
}

/* ---- Upload --------------------------------------------------------- */

.apa-upload {
	display: block;
	margin-top: 6px;
	padding: 18px;
	border: 2px dashed rgba(0,0,0,.18);
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	color: var(--apa-texte-doux);
	background: #fcfbf8;
	transition: border-color .12s, color .12s, background .12s;
}
.apa-upload input[type=file] { position: absolute; left: -9999px; opacity: 0; }
.apa-upload:hover { border-color: var(--apa-bleu-clair); color: var(--apa-bleu); }
.apa-upload.has {
	border-style: solid;
	border-color: var(--apa-vert);
	color: var(--apa-vert);
	background: #eafaf2;
}

/* Prévisualisation côté client après sélection d'un fichier (logo ou
   photos), AVANT que le formulaire soit envoyé. Permet au client de
   voir ce qu'il vient de choisir, pas juste un ✓ et un nom. */
.apa-upload-preview {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.apa-upload-preview:empty { display: none; }

.apa-upload-preview-thumb {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 92px;
	padding: 6px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
}
.apa-upload-preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	color: var(--apa-corail-fonce, #d8412f);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform .12s ease, background .12s ease;
}
.apa-upload-preview-remove:hover,
.apa-upload-preview-remove:focus-visible {
	background: var(--apa-corail-fonce, #d8412f);
	color: #fff;
	transform: scale(1.08);
	outline: none;
}
.apa-upload-preview-thumb img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	background: var(--apa-vignette-bg, #eef0f4);
	border-radius: 6px;
}
.apa-upload-preview-name {
	width: 100%;
	font-size: .72rem;
	color: var(--apa-texte-doux);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}
/* Quand on prévisualise des photos (multiple) — passe en grille
   responsive 2-3 colonnes selon la largeur. */
.apa-upload-preview.is-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 10px;
}
.apa-upload-preview.is-grid .apa-upload-preview-thumb {
	width: 100%;
}

.apa-existing-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	margin-bottom: 8px;
	background: #fcfbf8;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
}
.apa-existing-logo img {
	width: 56px; height: 56px;
	object-fit: contain;
	background: #fff;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,.06);
}

.apa-delete-toggle {
	font-size: .88rem;
	color: var(--apa-texte-doux);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.apa-delete-toggle:has(input:checked) {
	color: var(--apa-corail-fonce);
}

/* Icône poubelle — pour vignettes server-rendered (logo + photos déjà
   uploadés). Tap target accessible (38×38), input caché, état coché
   surlignage corail. */
.apa-existing-trash {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(0,0,0,.08);
	color: #555;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.apa-existing-trash input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	margin: 0;
}
.apa-existing-trash:hover,
.apa-existing-trash:focus-within {
	background: #fff;
	border-color: var(--apa-corail-fonce, #d8412f);
	color: var(--apa-corail-fonce, #d8412f);
}
.apa-existing-trash:has(input:checked) {
	background: var(--apa-corail-fonce, #d8412f);
	border-color: var(--apa-corail-fonce, #d8412f);
	color: #fff;
}
.apa-existing-trash-icon { pointer-events: none; }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sur la carte logo existant : poubelle dans le coin haut-droit. */
.apa-existing-logo { position: relative; }
.apa-existing-logo .apa-existing-trash {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	font-size: 16px;
}

/* Sur la carte photo : poubelle dans le coin haut-droit de la vignette,
   et on cache le label texte "Supprimer" devenu inutile. */
.apa-photo { position: relative; }
.apa-photo .apa-existing-trash {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	font-size: 16px;
	z-index: 2;
}

/* ---- Photos grid --------------------------------------------------- */

.apa-photos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	margin-bottom: 10px;
}
.apa-photo {
	background: #fcfbf8;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.apa-photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	background: #f0ece4;
}
.apa-photo-principale,
.apa-photo-delete {
	font-size: .82rem;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--apa-texte-doux);
}
.apa-photo:has(.apa-photo-principale input:checked) {
	border-color: var(--apa-bleu);
	box-shadow: 0 0 0 1px var(--apa-bleu);
}
.apa-photo:has(.apa-photo-delete input:checked) {
	opacity: .5;
	border-color: var(--apa-corail-fonce);
}

/* ---- Actions ------------------------------------------------------- */

.apa-actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
}
/* Brief : empile primary à droite, secondaire (Sauvegarder) à côté,
   note en pleine largeur sous les deux. */
.apa-actions .apa-btn-save {
	order: -1;
	margin-right: auto;
}
.apa-actions-note {
	flex: 1 0 100%;
	text-align: right;
	color: var(--apa-texte-doux);
	margin: 0;
}
/* Peaufinage : la bande Sauvegarder est sur sa propre ligne, sous
   « Régénérer / Valider », pour ne pas concurrencer le CTA principal. */
.apa-actions-save {
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 14px;
	margin-top: 8px;
	border-top: 1px dashed var(--apa-borure-douce);
}
.apa-actions-save .apa-actions-note {
	flex: 1 1 auto;
	text-align: left;
}
@media (max-width: 520px) {
	.apa-actions-save { flex-direction: column; align-items: stretch; }
	.apa-actions-save .apa-actions-note { text-align: center; }
}
.apa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border-radius: 12px;
	border: 0;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	font-family: inherit;
	min-height: 48px; /* zone tactile */
}
.apa-btn-primary {
	background: var(--apa-corail);
	color: #fff;
	box-shadow: 0 2px 6px rgba(239,90,76,.3);
}
.apa-btn-primary:hover { background: var(--apa-corail-fonce); }
.apa-btn-primary:focus { outline: 2px solid var(--apa-bleu-clair); outline-offset: 2px; }

/* ---- Tablette/desktop : row sur 2 colonnes ------------------------- */
@media (min-width: 560px) {
	.apa-row { grid-template-columns: 1fr 1fr; }
}

/* ---- Génération : spinner ------------------------------------------ */

.apa-gen-loading {
	text-align: center;
	padding: 40px 20px;
}
.apa-loading-title {
	margin-top: 20px;
	font-size: 1.25rem;
}
.apa-spinner {
	width: 56px;
	height: 56px;
	margin: 8px auto 0;
	border-radius: 50%;
	border: 4px solid rgba(0,0,0,.08);
	border-top-color: var(--apa-corail);
	animation: apaSpin .9s linear infinite;
}
@keyframes apaSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.apa-spinner { animation-duration: 2.5s; }
}

.apa-gen-error .apa-alert { white-space: pre-wrap; }

/* ---- Génération : parcours itératif (V1 → V2 → V3) ----------------- */

.apa-gen-iter { max-width: 820px; margin: 0 auto; }
.apa-gen-iter-head { text-align: center; margin-bottom: 14px; }
.apa-gen-iter-step {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 14px;
	background: rgba(47,95,163,.12);
	color: var(--apa-bleu);
	border-radius: 999px;
	font-family: var(--apa-font-menu, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
}
.apa-gen-iter-head h1 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.7rem;
	margin: 0 0 8px;
}
@media (min-width: 720px) {
	.apa-gen-iter-head h1 { font-size: 2rem; }
}

/* Rappel de la dernière correction demandée */
.apa-gen-iter-fb-recall {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--apa-papier, #f4f1ea);
	border-left: 3px solid var(--apa-corail, #ef5a4c);
	border-radius: 0 10px 10px 0;
	font-size: .9rem;
}
.apa-gen-iter-fb-recall .apa-gen-iter-fb-label {
	display: block;
	font-weight: 700;
	color: var(--apa-bleu);
	font-size: .8rem;
	margin-bottom: 4px;
}
.apa-gen-iter-fb-recall q {
	font-style: italic;
	color: var(--apa-texte);
}

/* Grande vignette — vraiment grande */
.apa-gen-iter-preview {
	margin: 0 0 22px;
	background: linear-gradient(135deg, #f4f1ea 0%, #e8e0cd 100%);
	border-radius: 18px;
	padding: 18px;
	display: flex;
	justify-content: center;
	box-shadow: 0 6px 24px rgba(27,58,107,.08);
}
.apa-gen-iter-zoom {
	display: block;
	max-width: 100%;
	border-radius: 10px;
	overflow: hidden;
	cursor: zoom-in;
	box-shadow: 0 8px 28px rgba(0,0,0,.18);
	transition: transform .18s, box-shadow .18s;
}
.apa-gen-iter-zoom:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.22); }
.apa-gen-iter-zoom img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	object-fit: contain;
	background: #fff;
}
@media (min-width: 720px) {
	.apa-gen-iter-zoom img { max-width: 720px; }
}

/* Vignettes des versions reçues : cliquables pour basculer la grande
   image. État actif = bordure bleue épaisse + badge mis en avant. */
.apa-gen-iter-thumbs {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 22px;
}
.apa-gen-iter-thumb {
	position: relative;
	border: 2px solid var(--apa-borure-douce, rgba(0,0,0,.08));
	background: #fff;
	border-radius: 12px;
	padding: 4px;
	cursor: pointer;
	transition: border-color .15s, transform .15s, box-shadow .15s;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 110px;
}
.apa-gen-iter-thumb img {
	display: block;
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--apa-vignette-bg, #eef0f4);
}
.apa-gen-iter-thumb-label {
	font-family: var(--apa-font-menu, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
}
.apa-gen-iter-thumb:hover {
	border-color: var(--apa-bleu-clair, #2f5fa3);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(27,58,107,.10);
}
.apa-gen-iter-thumb.is-active {
	border-color: var(--apa-bleu, #1b3a6b);
	box-shadow: 0 8px 22px rgba(27,58,107,.18);
}
.apa-gen-iter-thumb.is-active .apa-gen-iter-thumb-label {
	background: var(--apa-bleu, #1b3a6b);
	color: #fff;
	padding: 2px 10px;
	border-radius: 999px;
}
@media (min-width: 720px) {
	.apa-gen-iter-thumb { width: 140px; }
	.apa-gen-iter-thumb img { height: 130px; }
}

/* Actions Valider / Demander une correction */
.apa-gen-iter-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
@media (min-width: 560px) {
	.apa-gen-iter-actions {
		flex-direction: row;
		justify-content: center;
		gap: 18px;
	}
}
.apa-gen-iter-actions .apa-btn {
	min-width: 240px;
	min-height: 52px;
	font-size: 1rem;
}
.apa-btn-validate {
	background: var(--apa-vert, #1e9e6a);
	border-color: var(--apa-vert, #1e9e6a);
	color: #fff;
	box-shadow: 0 3px 12px rgba(30,158,106,.30);
}
.apa-btn-validate:hover {
	background: #178a59;
	border-color: #178a59;
	color: #fff;
	transform: translateY(-1px);
}
.apa-gen-iter-counter {
	text-align: center;
	margin: 16px 0 0;
	color: var(--apa-texte-doux);
}

/* ===== Grille V1/V2/V3 côte à côte ===== */
.apa-gen-iter-form { margin: 0; }
.apa-gen-iter-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 18px 0;
}
@media (min-width: 640px) {
	.apa-gen-iter-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}
.apa-gen-iter-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--apa-carte, #fff);
	border: 2px solid rgba(0,0,0,.08);
	border-radius: 14px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
	min-width: 0;
}
.apa-gen-iter-card:hover {
	border-color: rgba(216,65,47,.5);
	transform: translateY(-2px);
}
.apa-gen-iter-card-form {
	margin: auto 0 0; /* colle le bouton en bas de la card */
}
.apa-gen-iter-card-form .apa-btn {
	display: block;
	width: 100%;
	min-height: 44px;
	font-size: .92rem;
}
.apa-gen-iter-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--apa-bleu, #1b3a6b);
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .82rem;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.apa-gen-iter-card.is-selected .apa-gen-iter-card-badge {
	background: var(--apa-corail-fonce, #d8412f);
}
/* Wrapper qui devient l'item de la grille — accueille le label
   (cliquable pour sélectionner) ET le lien zoom (sans interférer). */
.apa-gen-iter-card-wrap { position: relative; min-width: 0; }
.apa-gen-iter-card-wrap > .apa-gen-iter-card { width: 100%; height: 100%; }

.apa-gen-iter-card-image {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #f0ece4;
	aspect-ratio: 1 / 1.3;
	/* Angles droits — affiches à imprimer. */
	border-radius: 0;
}
.apa-gen-iter-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	border-radius: 0;
}

/* Lien zoom — flotte par dessus la card, ne capture pas le clic
   de sélection (en dehors du label englobant). */
.apa-gen-iter-card-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.94);
	color: var(--apa-bleu, #1b3a6b);
	text-decoration: none;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,.22);
	font-size: 16px;
	line-height: 1;
	z-index: 3;
	transition: transform .12s ease, background .12s ease;
}
.apa-gen-iter-card-zoom:hover,
.apa-gen-iter-card-zoom:focus-visible {
	background: var(--apa-corail-fonce, #d8412f);
	color: #fff;
	transform: scale(1.08);
	outline: none;
	text-decoration: none;
}
.apa-gen-iter-card-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1.3;
	background: #f0ece4;
	border-radius: 10px;
	font-size: 2rem;
	color: rgba(0,0,0,.18);
}
.apa-gen-iter-card-fb {
	margin: 0;
	font-size: .82rem;
	color: var(--apa-texte-doux);
	font-style: italic;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Card "en attente" : spinner centré, pas de hover, pas de pointer */
.apa-gen-iter-card.is-pending {
	cursor: default;
	border-style: dashed;
	border-color: rgba(0,0,0,.18);
	background: repeating-linear-gradient(
		135deg,
		rgba(0,0,0,.018),
		rgba(0,0,0,.018) 10px,
		rgba(0,0,0,.04) 10px,
		rgba(0,0,0,.04) 20px
	);
}
.apa-gen-iter-card.is-pending:hover {
	transform: none;
	border-color: rgba(0,0,0,.18);
}
.apa-gen-iter-card-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1.3;
}
.apa-gen-iter-card-wait {
	text-align: center;
	color: var(--apa-bleu, #1b3a6b);
	font-weight: 600;
	margin: 0;
}

/* Modal de correction (texte libre) — overlay manuel pour rester
   prédictible cross-browser (Safari/iOS, Firefox, anciens Edge). */
.apa-correct-dialog {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.apa-correct-dialog[hidden] { display: none !important; }
.apa-correct-dialog-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15,30,47,.62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.apa-correct-dialog-panel {
	position: relative;
	z-index: 1;
	border-radius: 18px;
	max-width: 540px;
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow: auto;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
	background: var(--apa-carte, #fff);
}
html.apa-modal-open,
html.apa-modal-open body { overflow: hidden; }
.apa-correct-form {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.apa-correct-form header h2 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.2rem;
	margin: 0 0 6px;
}
.apa-correct-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--apa-borure-douce, rgba(0,0,0,.12));
	border-radius: 12px;
	background: #fcfbf8;
	font-family: inherit;
	font-size: 1rem;
	color: var(--apa-texte);
	min-height: 110px;
	resize: vertical;
}
.apa-correct-form textarea:focus {
	outline: none;
	border-color: var(--apa-bleu-clair, #2f5fa3);
	background: #fff;
}
.apa-correct-form footer {
	margin: 6px 0 0;
}

.apa-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ===== Détourage éventail — silhouette + paire recto/verso ===== */

/*
 * Paire recto + verso côte à côte dans une card de génération.
 * Chaque éventail (252 × 167 mm ratio 3:2 ≈ 1.508) est affiché
 * à la même largeur pour qu'ils soient identiques.
 */
.apa-fan-pair {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: center;
	align-items: flex-end;
	margin: 8px 0;
}

.apa-fan-figure {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/*
 * Conteneur image avec clip-path SVG = seule la silhouette éventail reste visible.
 * aspect-ratio 712.93/472.5 (viewBox du gabarit réel) ≈ 1.509.
 * L'image (SVG ou bitmap) remplit entièrement le conteneur.
 */
.apa-fan-silhouette {
	display: block;
	width: 100%;
	/* aspect-ratio : piloté par le SVG composite lui-même */
	overflow: hidden;
	/* clip-path : intégré dans le SVG généré, pas besoin de règle CSS externe */
	background: transparent;
}

.apa-fan-silhouette img {
	display: block;
	width: 100%;
	height: auto;
}

.apa-fan-label {
	font-size: .75rem;
	font-weight: 600;
	color: var(--apa-bleu, #1b3a6b);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Carte contenant la paire — largeur un peu plus généreuse */
.apa-gen-iter-card.has-faces {
	padding-bottom: 8px;
}

/* Badge sorti du flux absolu → inline en tête de carte pour les paires
   afin de ne pas masquer l'éventail. */
.apa-gen-iter-card.has-faces .apa-gen-iter-card-badge {
	position: static;
	display: inline-block;
	margin: 0 0 6px;
	align-self: flex-start;
}

/* Curseur zoom sur les silhouettes cliquables */
.apa-fan-silhouette[data-apa-zoom] {
	cursor: zoom-in;
}

/* ===== Lightbox zoom éventail ===== */
.apa-fan-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .82);
	padding: 20px;
	animation: apa-lb-in .15s ease;
}
.apa-fan-lightbox[hidden] {
	display: none;
}
@keyframes apa-lb-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.apa-fan-lightbox-inner {
	position: relative;
	max-width: min(92vw, 800px);
	width: 100%;
}
/* Image affichée sans clip-path pour voir tout le contenu */
.apa-fan-lightbox-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.apa-fan-lightbox-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: none;
	font-size: 1.2rem;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
	color: #333;
	padding: 0;
}
.apa-fan-lightbox-close:hover {
	background: var(--apa-corail, #ef5a4c);
	color: #fff;
}
.apa-fan-lightbox-caption {
	text-align: center;
	margin-top: 10px;
	color: rgba(255,255,255,.85);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Sur mobile, les deux éventails restent côte à côte (ratio suffit) */
@media (max-width: 380px) {
	.apa-fan-pair {
		gap: 6px;
	}
}

/* Sur grands écrans : max-width pour ne pas déformer les éventails */
@media (min-width: 900px) {
	.apa-fan-pair {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---- Génération : grille des 3 pistes (legacy, gardé pour le simulateur multi-versions) -- */

.apa-pistes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 18px 0 20px;
}
@media (min-width: 640px) {
	.apa-pistes-grid { grid-template-columns: repeat(3, 1fr); }
}

.apa-piste {
	position: relative;
	display: block;
	background: #fcfbf8;
	border: 2px solid rgba(0,0,0,.08);
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.apa-piste:hover { border-color: var(--apa-bleu-clair); }
.apa-piste input[type=radio] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.apa-piste:has(input:checked) {
	border-color: var(--apa-bleu);
	box-shadow: 0 0 0 2px var(--apa-bleu) inset;
}

.apa-piste-preview {
	background: #f0ece4;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}
.apa-piste-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.apa-piste-foot {
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.apa-piste-num { font-weight: 700; color: var(--apa-bleu); }
.apa-piste-meta {
	color: var(--apa-texte-doux);
	font-size: .88rem;
}
.apa-piste-pick {
	margin-left: auto;
	font-size: .85rem;
	color: var(--apa-vert);
	opacity: 0;
	transition: opacity .15s;
}
.apa-piste:has(input:checked) .apa-piste-pick { opacity: 1; }

.apa-mini {
	color: var(--apa-texte-doux);
	font-size: .85rem;
	text-align: center;
	margin: 10px 0 0;
}

/* ---- Actions split (régénérer + valider) --------------------------- */

.apa-actions-split {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.apa-actions-split .apa-btn { flex: 1 1 auto; }

/* Bloc régénération avec compteur / avertissement */
.apa-regen-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	flex: 1 1 auto;
}
.apa-regen-wrap .apa-btn { width: 100%; }
.apa-regen-counter {
	margin: 0;
	text-align: center;
	font-size: 0.72rem;
	color: var(--apa-texte-doux, #5b6675);
}
.apa-regen-last-warning {
	margin: 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--apa-corail, #ef5a4c);
}
.apa-regen-limit-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	padding: 10px 14px;
	background: #f4f1ea;
	border: 1px solid #d0c8b8;
	border-radius: 10px;
	font-size: 0.82rem;
	color: var(--apa-bleu, #1b3a6b);
}
.apa-regen-limit-icon { font-size: 1.1rem; flex-shrink: 0; }

.apa-btn-ghost {
	background: transparent;
	color: var(--apa-bleu);
	border: 1px solid rgba(27,58,107,.18);
}
.apa-btn-ghost:hover {
	background: rgba(27,58,107,.05);
}

/* « Sauvegarder ma création » — vert plein, sécurité/confiance.
   Distinct du primary corail (action principale) : le client comprend
   tout de suite que c'est un autre type d'action. */
.apa-btn-save {
	background: var(--apa-vert);
	color: #fff;
	border: 1px solid var(--apa-vert);
	box-shadow: 0 3px 10px rgba(30,158,106,.25);
}
.apa-btn-save:hover {
	background: #178a59;
	border-color: #178a59;
	color: #fff;
	transform: translateY(-1px);
}
.apa-btn-save:focus-visible {
	outline-color: var(--apa-vert);
}

/* ---- Peaufinage : layout 2 colonnes ------------------------------- */

.apa-peaufinage-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 900px) {
	.apa-peaufinage-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
	.apa-peaufinage-preview { position: sticky; top: 16px; }
}

.apa-peaufinage-form > .apa-card + .apa-card { margin-top: 16px; }

/* ---- Peaufinage : aperçus ----------------------------------------- */

.apa-preview-card { padding-bottom: 18px; }
.apa-preview-main {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 800 / 1131;
	margin: 0 auto 14px;
	background: #f0ece4;
	/* Angles droits : affiche à imprimer, on respecte le rendu réel. */
	border-radius: 0;
	overflow: hidden;
}
.apa-preview-main svg { display: block; width: 100%; height: 100%; }

.apa-preview-note { margin: 14px 0 8px; text-align: center; }

.apa-preview-socials {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: end;
}
.apa-preview-social { text-align: center; }
.apa-preview-social-canvas {
	background: #f0ece4;
	/* Angles droits : déclinaison RS exportée telle quelle. */
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin-bottom: 6px;
}
.apa-preview-social-canvas.apa-preview-story { aspect-ratio: 9 / 16; }
.apa-preview-social-canvas svg { display: block; width: 100%; height: 100%; }
.apa-preview-social-label {
	font-size: .82rem;
	color: var(--apa-texte-doux);
}

/* Image n8n pré-rendue dans l'aperçu — couvre la zone sans déformer.
   Angles droits : affiches à imprimer, on respecte le rendu réel. */
.apa-preview-main--image { position: relative; background: #fff; border-radius: 0; }
.apa-preview-main--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	border-radius: 0;
}
.apa-preview-social-canvas--image { position: relative; background: #fff; border-radius: 0; }
.apa-preview-social-canvas--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.apa-preview-soon {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 4px 6px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-align: center;
	color: #1b3a6b;
	background: rgba(246, 196, 83, .92); /* jaune APA */
	border-top: 1px solid rgba(27, 58, 107, .25);
	text-transform: uppercase;
}

/* ---- Peaufinage : grille de sélection photo principale ------------ */

.apa-photos-pick {
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.apa-photos-pick .apa-photo {
	cursor: pointer;
	padding: 4px;
}
.apa-photos-pick .apa-photo input { position: absolute; opacity: 0; pointer-events: none; }
.apa-photos-pick .apa-photo:has(input:checked) {
	border-color: var(--apa-bleu);
	box-shadow: 0 0 0 2px var(--apa-bleu) inset;
}
.apa-photo-none-thumb {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f1ea;
	border-radius: 8px;
	color: var(--apa-texte-doux);
	font-size: 1.4rem;
}
.apa-photo-none span {
	display: block;
	margin-top: 4px;
	text-align: center;
	font-size: .8rem;
	color: var(--apa-texte-doux);
}

/* ---- Récap : vitrine illustrée du projet --------------------------- */

.apa-recap-stage {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 16px;
}

/* En-tête centré « Votre projet est prêt » */
.apa-recap-hero {
	text-align: center;
	padding: 8px 4px 0;
}
.apa-recap-eyebrow {
	display: inline-block;
	font-family: var(--apa-font-menu, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apa-vert);
	background: rgba(30,158,106,.12);
	padding: 5px 14px;
	border-radius: 999px;
	margin: 0 0 16px;
	font-weight: 700;
}
.apa-recap-hero-title {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.7rem;
	line-height: 1.15;
	margin: 0 0 10px;
}
.apa-recap-hero-meta {
	color: var(--apa-texte-doux);
	font-size: 1rem;
	margin: 0 0 14px;
}
.apa-recap-hero-dot { margin: 0 8px; opacity: .55; }
.apa-recap-hero-lede {
	color: var(--apa-texte);
	max-width: 560px;
	margin: 0 auto;
	font-size: .98rem;
	line-height: 1.55;
}
@media (min-width: 720px) {
	.apa-recap-hero-title { font-size: 2.2rem; }
}

/* Vitrine : grille de tiles produits pleine largeur. 1 col mobile,
   2 cols desktop (assez large pour le sélecteur formats+qty+sous-total). */
.apa-recap-vitrine { min-width: 0; }
.apa-recap-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}
@media (min-width: 880px) {
	.apa-recap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* Tile produit verticale : image en haut, body en dessous. */
.apa-recap-tile {
	display: flex;
	flex-direction: column;
	background: var(--apa-carte);
	border: 1px solid var(--apa-borure-douce);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .18s, box-shadow .18s, border-color .18s;
	min-width: 0;
}
.apa-recap-tile:hover {
	transform: translateY(-3px);
	border-color: rgba(47,95,163,.35);
	box-shadow: 0 10px 26px rgba(27,58,107,.12);
}

.apa-recap-tile-image {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, #f4f1ea 0%, #eae5d8 100%);
	overflow: hidden;
	cursor: zoom-in;
	/* Angles droits : ce sont des aperçus d'affiches à imprimer,
	   un coin arrondi tromperait sur le rendu réel. */
	border-radius: 0;
}
.apa-recap-tile-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	transition: transform .25s;
	border-radius: 0;
}
.apa-recap-tile-image:hover img { transform: scale(1.03); }
.apa-recap-tile-image-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--apa-bleu);
	font-size: 2.5rem;
}
.apa-recap-tile-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(27,58,107,.88);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.apa-recap-tile-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px 20px;
	min-width: 0;
}
.apa-recap-tile-name {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.2rem;
	line-height: 1.25;
	margin: 0;
}
.apa-recap-tile-price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	padding-top: 12px;
	border-top: 1px dashed var(--apa-borure-douce);
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
}
.apa-recap-tile-price-label {
	color: var(--apa-texte-doux);
	font-size: .92rem;
}
.apa-recap-tile-price-value {
	color: var(--apa-corail-fonce);
	font-weight: 700;
	font-size: 1.2rem;
}
.apa-recap-tile-price-value .woocommerce-Price-amount { color: inherit !important; }

/* Sélecteur formats : carte fieldset avec rows [chip | qty | sous-total]. */
.apa-recap-formats {
	border: 1px solid var(--apa-borure-douce);
	border-radius: 12px;
	/* Padding-right généreux pour que le prix de la dernière colonne
	   respire et ne touche jamais la bordure du fieldset. */
	padding: 14px 18px 14px 16px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--apa-papier, #fbfaf6);
	min-width: 0;
	/* Pas d'overflow: hidden ici — sinon un sous-total qui déborde
	   sa cellule serait silencieusement tronqué (cas "€10.0" au lieu
	   de "€10,00"). La grille .apa-format-row réserve une colonne
	   suffisante pour le prix. */
}
.apa-recap-formats legend {
	color: var(--apa-bleu);
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 0 8px;
}
.apa-format-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1.5px solid rgba(27,58,107,.18);
	background: #fff;
	color: var(--apa-bleu);
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
	min-height: 40px;
	box-sizing: border-box;
	min-width: 52px;
	justify-content: center;
	margin: 0;
}
.apa-format-chip input { accent-color: var(--apa-corail-fonce, #d8412f); margin: 0; }
.apa-format-chip:has(input:checked) {
	background: var(--apa-corail-fonce, #d8412f);
	border-color: var(--apa-corail-fonce, #d8412f);
	color: #fff;
}
.apa-format-chip:hover { border-color: var(--apa-corail-fonce, #d8412f); }
.apa-format-chip--mono { cursor: default; }
.apa-format-chip--mono:hover { border-color: rgba(27,58,107,.18); }

/* Ligne row : grid 3 colonnes [chip | qty | sous-total].
   - chip : auto (largeur du contenu, "A4" / "A3" / "A2" etc.)
   - qty  : auto (stepper compact ~120 px)
   - sous-total : minmax(92px, max-content), aligné à droite, jamais
     écrasé en dessous de 92 px (assez pour "1 234,56 €"). */
.apa-format-row {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(124px, auto) minmax(72px, max-content);
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	justify-content: space-between;
}
@media (max-width: 480px) {
	.apa-format-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"chip qty"
			"sub  sub";
		gap: 8px 12px;
	}
	.apa-format-row > .apa-format-chip { grid-area: chip; }
	.apa-format-row > .apa-format-qty-wrap { grid-area: qty; }
	.apa-format-row > .apa-format-row-subtotal {
		grid-area: sub;
		text-align: right;
		padding-top: 4px;
		border-top: 1px dashed var(--apa-borure-douce);
		min-width: 0; /* en mode 2 lignes le sous-total a toute la
		                 largeur, plus besoin du min-width 92 px */
	}
}

.apa-format-row-subtotal {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-weight: 700;
	color: var(--apa-corail-fonce);
	text-align: right;
	font-size: .98rem;
	white-space: nowrap;
	overflow: visible;
	min-width: 92px;
	justify-self: end;
}
.apa-format-row-subtotal .woocommerce-Price-amount { color: inherit !important; white-space: nowrap; }
.apa-format-row-subtotal .woocommerce-Price-amount { color: inherit !important; }
.apa-format-row.is-off .apa-format-row-subtotal {
	color: var(--apa-texte-doux);
	opacity: .55;
}

/* Stepper qty : [ − ][ input ][ + ], plus visible et plus tactile. */
.apa-format-qty-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid rgba(27,58,107,.22);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 124px; /* − (36) + input (48) + + (36) + 2×border */
}
.apa-qty-step {
	width: 36px;
	min-height: 40px;
	border: 0;
	background: transparent;
	color: var(--apa-bleu);
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .12s ease, color .12s ease;
}
.apa-qty-step:hover {
	background: rgba(27,58,107,.06);
}
.apa-qty-step:active {
	background: var(--apa-corail-fonce, #d8412f);
	color: #fff;
}
.apa-format-qty {
	width: 48px;
	box-sizing: border-box;
	padding: 0 6px;
	min-height: 40px;
	border: 0;
	border-left: 1.5px solid rgba(27,58,107,.14);
	border-right: 1.5px solid rgba(27,58,107,.14);
	background: #fff;
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-weight: 700;
	font-size: .98rem;
	color: var(--apa-bleu);
	text-align: center;
	line-height: 1;
	-moz-appearance: textfield;
}
.apa-format-qty:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(216,65,47,.35);
}
.apa-format-qty::-webkit-outer-spin-button,
.apa-format-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.apa-format-row.is-off .apa-format-qty-wrap {
	opacity: .35;
	pointer-events: none;
}
.apa-format-row--mono { justify-content: space-between; }

/* Kit réseaux sociaux visible directement sur la page récap. */
.apa-recap-rs {
	background: var(--apa-carte, #fff);
	border: 1px solid var(--apa-borure-douce);
	border-radius: 16px;
	padding: 20px 22px 22px;
	box-shadow: 0 4px 18px rgba(27,58,107,.05);
}
.apa-recap-rs-head { margin-bottom: 16px; }
.apa-recap-rs-title {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.2rem;
	margin: 0 0 4px;
}
.apa-recap-rs-lede {
	margin: 0;
	color: var(--apa-texte-doux);
}
.apa-recap-rs-soon {
	margin: 6px 0 0;
	padding: 10px 14px;
	background: rgba(246, 196, 83, .18);
	border-left: 3px solid #f6c453;
	border-radius: 6px;
	color: var(--apa-bleu);
	font-size: .9rem;
	line-height: 1.4;
}
.apa-recap-rs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@media (min-width: 720px) {
	.apa-recap-rs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.apa-recap-rs-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.apa-recap-rs-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	background: var(--apa-papier, #fbfaf6);
	border-radius: 10px;
	text-align: center;
	font-size: .82rem;
}
.apa-recap-rs-thumb {
	position: relative;
	display: block;
	width: 100%;
	background: #fff;
	overflow: hidden;
	margin-bottom: 4px;
	/* Angles droits : ce sont des supports imprimés/cadrés
	   exactement à ces dimensions, on n'arrondit pas. */
	border-radius: 0;
}
.apa-recap-rs-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.apa-recap-rs-thumb.is-placeholder img {
	opacity: .82;
	filter: saturate(.92);
}
.apa-recap-rs-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 6px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--apa-bleu);
	background: #f6c453;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.apa-recap-rs-label {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-weight: 700;
	font-size: .9rem;
}
.apa-recap-rs-size {
	font-size: .72rem;
	color: var(--apa-texte-doux);
	font-family: ui-monospace, Menlo, monospace;
}

/* Bandeau "Inclus" pleine largeur, 3 colonnes desktop. */
.apa-recap-includes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 18px 22px;
	background: rgba(30,158,106,.08);
	border-radius: 14px;
	border: 1px solid rgba(30,158,106,.18);
}
@media (min-width: 720px) {
	.apa-recap-includes { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.apa-recap-includes-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .95rem;
	color: var(--apa-texte);
}
.apa-recap-includes-item b {
	color: var(--apa-vert);
	font-weight: 700;
}
.apa-recap-includes-ico {
	font-size: 1.2rem;
	flex-shrink: 0;
}

/* Bandeau "Total + actions" pleine largeur. */
.apa-recap-actions {
	background: var(--apa-carte);
	border-radius: 18px;
	border: 1px solid var(--apa-borure-douce);
	padding: 24px 24px 26px;
	box-shadow: 0 4px 18px rgba(27,58,107,.06);
}
.apa-recap-actions-in {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: center;
}
@media (min-width: 720px) {
	.apa-recap-actions-in {
		grid-template-columns: auto 1fr;
		gap: 32px;
	}
}

.apa-recap-total {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}
.apa-recap-total-label {
	font-size: .82rem;
	color: var(--apa-texte-doux);
	font-family: var(--apa-font-menu, 'Poppins', 'Inter', system-ui, sans-serif);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
}
.apa-recap-total-value {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 800;
}
.apa-recap-total-value .woocommerce-Price-amount { color: inherit !important; }
.apa-recap-total-note {
	color: var(--apa-texte-doux);
	margin: 4px 0 0;
}

.apa-recap-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}
@media (min-width: 720px) {
	.apa-recap-cta { align-items: flex-end; }
}
.apa-recap-cta-main {
	min-width: 240px;
	font-size: 1rem;
	padding: 14px 22px;
}
.apa-recap-cta-save {
	min-width: 240px;
	font-size: .95rem;
	padding: 11px 18px;
}
.apa-recap-cta-secondary {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 4px;
}
@media (min-width: 720px) {
	.apa-recap-cta-secondary { justify-content: flex-end; }
}
.apa-recap-cta-link {
	color: var(--apa-bleu);
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	padding: 6px 10px;
	border-radius: 8px;
}
.apa-recap-cta-link:hover {
	background: rgba(27,58,107,.06);
	color: var(--apa-bleu-clair);
}
.apa-recap-already-note {
	margin: 10px 0 0;
	text-align: center;
	color: var(--apa-texte-doux);
}

/* Détails maquette repliable */
.apa-recap-details {
	background: var(--apa-carte);
	border: 1px solid var(--apa-borure-douce);
	border-radius: 14px;
	padding: 14px 20px;
}
.apa-recap-details summary {
	cursor: pointer;
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-weight: 600;
	list-style: none;
}
.apa-recap-details summary::-webkit-details-marker { display: none; }
.apa-recap-details summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 6px;
	transition: transform .15s;
}
.apa-recap-details[open] summary { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--apa-borure-douce); }
.apa-recap-details[open] summary::before { transform: rotate(90deg); }

.apa-recap-list {
	margin: 0;
	display: grid;
	gap: 8px;
}
.apa-recap-row {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed rgba(0,0,0,.06);
}
.apa-recap-row:last-child { border-bottom: 0; }
.apa-recap-row dt { font-size: .85rem; color: var(--apa-texte-doux); margin: 0; }
.apa-recap-row dd { margin: 0; font-weight: 500; }
@media (max-width: 460px) {
	.apa-recap-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Lightbox unique : maquette + déclinaisons RS ---- */

.apa-recap-zoom {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.apa-recap-zoom:target { display: flex; }
.apa-recap-zoom-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15,30,47,.86);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.apa-recap-zoom-frame {
	position: relative;
	z-index: 1;
	background: var(--apa-carte);
	border-radius: 18px;
	padding: 22px;
	max-width: min(820px, 100%);
	max-height: 92vh;
	overflow: auto;
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.apa-recap-zoom-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--apa-corail);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 800;
	font-size: 1.05rem;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
	z-index: 2;
}
.apa-recap-zoom-close:hover { background: var(--apa-corail-fonce); }

.apa-recap-zoom-main {
	background: linear-gradient(135deg, #f4f1ea 0%, #e8e0cd 100%);
	/* Angles droits — l'image d'une affiche imprimée n'a jamais de
	   coins arrondis. La fenêtre modale (.apa-recap-zoom-frame)
	   garde, elle, ses coins arrondis pour le confort visuel. */
	border-radius: 0 !important;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 6px 0 18px;
}
.apa-recap-zoom-main img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Angles droits : on respecte le rendu de l'affiche imprimée.
	   !important pour battre les règles génériques du thème parent
	   (Twenty Twenty-Five) qui appliquent un border-radius hérité
	   aux blocs image. */
	border-radius: 0 !important;
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.apa-recap-zoom-decl-title {
	margin: 8px 0 4px;
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1rem;
}
.apa-recap-zoom-decl-lede {
	margin: 0 0 12px;
	color: var(--apa-texte-doux);
}
.apa-recap-zoom-decl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
@media (min-width: 560px) {
	.apa-recap-zoom-decl-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
	.apa-recap-zoom-decl-list { grid-template-columns: repeat(5, 1fr); }
}
.apa-recap-zoom-decl-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	background: var(--apa-papier);
	border-radius: 10px;
	font-size: .76rem;
	text-align: center;
}
.apa-recap-zoom-decl-thumb {
	position: relative;
	display: block;
	width: 100%;
	background: var(--apa-carte);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 4px;
}
.apa-recap-zoom-decl-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.apa-recap-zoom-decl-thumb.is-placeholder img {
	opacity: .82;
	filter: saturate(.92);
}
.apa-recap-zoom-decl-soon-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 6px;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1b3a6b;
	background: #f6c453; /* jaune APA */
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.apa-recap-zoom-decl-soon {
	margin: -2px 0 14px;
	padding: 8px 12px;
	background: rgba(246, 196, 83, .22);
	border-left: 3px solid #f6c453;
	border-radius: 6px;
	color: #1b3a6b;
	font-size: .82rem;
	line-height: 1.4;
}
.apa-recap-zoom-decl-label {
	font-weight: 700;
	color: var(--apa-bleu);
	font-size: .82rem;
}
.apa-recap-zoom-decl-size {
	font-size: .72rem;
	color: var(--apa-texte-doux);
	font-family: ui-monospace, Menlo, monospace;
}

.apa-recap-zoom-print {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px dashed var(--apa-borure-douce);
	color: var(--apa-texte-doux);
	text-align: center;
}

/* ---- Page /projets/ (entrée Projet) -------------------------------- */

.apa-projets-page .apa-moteur-topbar a.apa-mini { text-decoration: none; }
.apa-projets-main { max-width: 1080px; }

.apa-projets-hero {
	text-align: center;
	margin: 8px 0 24px;
}
.apa-projets-hero h1 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.8rem;
	margin: 0 0 8px;
}
.apa-projets-hero .apa-lede {
	max-width: 640px;
	margin: 0 auto;
}

/* ---- Sélecteur de profil sur /projets/ -------------------------- */

.apa-profil-selector {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	padding: 8px 0 0;
}
.apa-profil-eyebrow {
	display: inline-block;
	color: var(--apa-corail);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	margin: 0 0 14px;
}
.apa-profil-title {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.9rem;
	line-height: 1.15;
	margin: 0 0 14px;
	letter-spacing: -.3px;
}
.apa-profil-lede {
	color: var(--apa-texte-doux);
	max-width: 560px;
	margin: 0 auto 32px;
	font-size: 1rem;
	line-height: 1.55;
}

.apa-profil-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

.apa-profil-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	background: var(--apa-carte);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 18px;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	padding: 20px;
	text-decoration: none;
	color: var(--apa-texte);
	min-height: 112px;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.apa-profil-card.has-mosaic {
	gap: 22px;
	padding: 22px;
	min-height: 132px;
}
.apa-profil-card:hover,
.apa-profil-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0,0,0,.10);
	border-color: rgba(27,58,107,.18);
}

.apa-profil-tile {
	width: 96px;
	height: 96px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}
.apa-profil-card.has-mosaic .apa-profil-tile {
	width: 108px;
	height: 108px;
}
/* 3 variations par profil — fond doux, icône lisible (fallback emoji) */
.apa-profil-tile.tile-bleu   { background: rgba(47,95,163,.12);  color: var(--apa-bleu); }
.apa-profil-tile.tile-corail { background: rgba(239,90,76,.13);  color: var(--apa-corail); }
.apa-profil-tile.tile-vert   { background: rgba(30,158,106,.15); color: var(--apa-vert); }

/* Photo Pexels en cover dans la tuile, avec un voile bas pour
   poser l'emoji repère par-dessus sans saturer la photo. */
.apa-profil-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.apa-profil-card.has-photo .apa-profil-tile {
	background: transparent;
}
.apa-profil-tile-emoji-overlay {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Mosaïque 2×2 dans la tuile (4 photos pour montrer la diversité
   des projets traitables par ce profil). */
.apa-profil-tile-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 2px;
	width: 100%;
	height: 100%;
	background: var(--apa-vignette-bg, #eef0f4);
}
.apa-profil-tile-mosaic-cell {
	display: block;
	overflow: hidden;
	background: var(--apa-vignette-bg, #eef0f4);
}
.apa-profil-tile-mosaic-cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.apa-profil-card.has-mosaic .apa-profil-tile {
	background: transparent;
}

@media (min-width: 720px) {
	.apa-profil-tile { width: 108px; height: 108px; }
	.apa-profil-card.has-mosaic .apa-profil-tile { width: 132px; height: 132px; }
	.apa-profil-card.has-mosaic { min-height: 156px; }
}
@media (max-width: 480px) {
	.apa-profil-card { padding: 16px; gap: 14px; }
	.apa-profil-card.has-mosaic { padding: 16px; gap: 14px; min-height: 112px; }
	.apa-profil-tile { width: 84px; height: 84px; border-radius: 14px; }
	.apa-profil-card.has-mosaic .apa-profil-tile { width: 92px; height: 92px; }
	.apa-profil-tile-emoji-overlay { width: 24px; height: 24px; font-size: .9rem; right: 4px; bottom: 4px; }
}

.apa-profil-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.apa-profil-card-title {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: 1.15rem;
	color: var(--apa-bleu);
	font-weight: 700;
}
.apa-profil-card-sub {
	color: var(--apa-texte-doux);
	font-size: .92rem;
	line-height: 1.4;
}

.apa-profil-chevron {
	color: var(--apa-corail);
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	padding-right: 4px;
}

/* ---- Vue filtrée par profil (étape 2) ------------------------- */

.apa-projets-hero-filtered {
	text-align: left;
	margin-bottom: 20px;
}
.apa-projets-back-wrap {
	margin: 0 0 14px;
}
.apa-projets-back {
	display: inline-block;
	color: var(--apa-texte-doux);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0,0,0,.05);
	transition: background .15s, color .15s;
}
.apa-projets-back:hover,
.apa-projets-back:focus-visible {
	background: var(--apa-bleu);
	color: #fff;
}
.apa-projets-current-profil {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(27,58,107,.05);
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	margin: 0 0 16px;
	color: var(--apa-bleu);
	font-weight: 600;
}
.apa-profil-tile-small {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	font-size: 1rem;
}

/* ---- Responsive ---- */

@media (min-width: 640px) {
	.apa-profil-title { font-size: 2.4rem; }
	.apa-profil-card { padding: 22px; gap: 20px; min-height: 110px; }
	.apa-profil-tile { width: 72px; height: 72px; font-size: 2rem; }
	.apa-profil-card-title { font-size: 1.25rem; }
	.apa-profil-chevron { font-size: 2.6rem; }
}

@media (max-width: 380px) {
	.apa-profil-title { font-size: 1.65rem; }
	.apa-profil-tile { width: 56px; height: 56px; font-size: 1.55rem; border-radius: 12px; }
	.apa-profil-card { padding: 16px; gap: 14px; min-height: 88px; }
	.apa-profil-chevron { font-size: 1.9rem; }
}

.apa-packs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 720px) {
	.apa-packs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.apa-packs-grid { grid-template-columns: repeat(3, 1fr); }
}

.apa-pack-card {
	display: flex;
	flex-direction: column;
	background: var(--apa-carte);
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
	overflow: hidden;
	border-top: 4px solid var(--apa-corail);
	transition: box-shadow .18s ease, transform .18s ease;
}
.apa-pack-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	transform: translateY(-3px);
}
.apa-pack-card:nth-child(2) { border-top-color: var(--apa-bleu); }
.apa-pack-card:nth-child(3) { border-top-color: var(--apa-vert); }
.apa-pack-card:nth-child(4) { border-top-color: var(--apa-jaune); }

.apa-pack-head {
	padding: 18px 20px 14px;
}
.apa-pack-icon { font-size: 1.8rem; display: block; }
.apa-pack-name {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	margin: 6px 0 4px;
	font-size: 1.1rem;
}
.apa-pack-desc {
	color: var(--apa-texte-doux);
	font-size: .92rem;
	margin: 0;
}
.apa-pack-items {
	list-style: none;
	margin: 0;
	padding: 14px 20px;
	flex: 1 1 auto;
	border-top: 1px dashed rgba(0,0,0,.08);
	border-bottom: 1px dashed rgba(0,0,0,.08);
}
.apa-pack-items li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: .92rem;
}
.apa-pack-item-price { color: var(--apa-bleu); font-weight: 600; }
.apa-pack-foot {
	padding: 14px 20px 18px;
	background: #faf8f3;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.apa-pack-incluses {
	margin: 0;
	font-size: .85rem;
	color: var(--apa-vert);
	font-weight: 500;
}
.apa-pack-ajustable {
	margin: 4px 0 0;
	font-size: .78rem;
	color: var(--apa-bleu);
	text-align: center;
	font-weight: 600;
}

/* ---- Bandeau de correction sur le peaufinage ---------------------- */

.apa-correction-banner {
	background: #fff5f3;
	border: 1px solid rgba(216,65,47,.25);
	border-left: 4px solid var(--apa-corail);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.apa-correction-banner h2 {
	margin: 0 0 6px;
	font-size: 1.1rem;
	color: var(--apa-corail-fonce);
}
.apa-correction-banner .apa-correction-msg {
	background: rgba(255,255,255,.7);
	padding: 10px 12px;
	border-radius: 8px;
	font-style: italic;
	margin: 0 0 8px;
}

/* ---- Outils de dev (admins / WP_DEBUG) ----------------------------- */

.apa-dev-fill {
	margin: 14px 0 0;
	padding: 10px 14px;
	background: repeating-linear-gradient(
		135deg,
		rgba(246,196,83,.10) 0 10px,
		rgba(246,196,83,.18) 10px 20px
	);
	border: 1px dashed rgba(216,65,47,.45);
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.apa-dev-fill-btn {
	border: 1px solid var(--apa-corail);
	background: var(--apa-carte);
	color: var(--apa-corail-fonce);
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: .88rem;
	transition: transform .15s, background .15s;
}
.apa-dev-fill-btn:hover {
	transform: translateY(-1px);
	background: rgba(239,90,76,.06);
}
.apa-dev-fill-btn.is-done {
	border-color: var(--apa-vert);
	color: var(--apa-vert);
	background: rgba(30,158,106,.08);
}
.apa-dev-fill-note {
	font-size: .78rem;
	color: var(--apa-texte-doux);
	font-style: italic;
}

/* ---- Debug admin ---------------------------------------------------- */

.apa-debug {
	margin-top: 24px;
	padding: 10px 14px;
	background: rgba(0,0,0,.04);
	border-radius: 10px;
	font-size: .85rem;
}
.apa-debug summary { cursor: pointer; color: var(--apa-texte-doux); }
.apa-debug pre {
	margin: 8px 0 0;
	white-space: pre-wrap;
	font-family: ui-monospace, Menlo, monospace;
}

/* ---- Améliorations tablette / desktop ------------------------------- */

@media (min-width: 720px) {
	body.apa-moteur { font-size: 17px; }
	.apa-moteur-topbar { padding: 16px 32px; }
	.apa-breadcrumb { padding: 16px 32px; }
	.apa-moteur-main { padding: 32px 24px 80px; }
	.apa-card { padding: 28px 32px; }
	h1 { font-size: 1.9rem; }
}

/* ---- Fiche projet (/projets/{slug}/) -----------------------------
   Reprend l'esprit de l'étape « Vos supports » : cartes cochables,
   compteur live, CTA sticky en bas. Mobile-first. */

.apa-fiche-page .apa-moteur-topbar a.apa-mini { text-decoration: none; }
.apa-fiche-main { max-width: 920px; padding-bottom: 120px; }

.apa-fiche-trail {
	background: var(--apa-carte);
	border-bottom: 1px solid var(--apa-borure-douce);
}
.apa-fiche-trail-in {
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .82rem;
	color: var(--apa-texte-doux);
	flex-wrap: wrap;
}
.apa-fiche-back {
	color: var(--apa-bleu);
	text-decoration: none;
	font-weight: 600;
}
.apa-fiche-back:hover { text-decoration: underline; }
.apa-fiche-trail-current {
	color: var(--apa-texte);
	font-weight: 600;
}

.apa-fiche-hero {
	text-align: center;
	margin: 12px 0 22px;
}
.apa-fiche-hero-icon {
	display: inline-block;
	font-size: 2.2rem;
	margin-bottom: 4px;
}
.apa-fiche-hero h1 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.7rem;
	margin: 0 0 6px;
}
.apa-fiche-hero-desc {
	color: var(--apa-texte-doux);
	max-width: 580px;
	margin: 0 auto;
	font-size: .95rem;
}
.apa-fiche-hero-action {
	display: inline-block;
	margin: 14px auto 0;
	padding: 8px 14px;
	background: rgba(246,196,83,.18);
	color: var(--apa-bleu);
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	max-width: 560px;
}

.apa-fiche-section-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	background: rgba(30,158,106,.14);
	color: var(--apa-vert);
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	vertical-align: middle;
}

.apa-fiche-section-head {
	margin: 0 0 14px;
}
.apa-fiche-section-head h2 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.2rem;
	margin: 0 0 4px;
}
.apa-fiche-section-lede {
	color: var(--apa-texte-doux);
	font-size: .9rem;
	margin: 0;
}

.apa-fiche-prods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 640px) {
	.apa-fiche-prods { grid-template-columns: 1fr 1fr; }
}

.apa-fiche-prod {
	display: grid;
	grid-template-columns: 32px 64px 1fr;
	grid-template-areas:
		"check thumb body"
		"state state state";
	align-items: center;
	gap: 8px 12px;
	padding: 12px;
	border: 1.5px dashed rgba(27,58,107,.22);
	border-radius: 14px;
	background: var(--apa-carte);
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
	position: relative;
}
.apa-fiche-prod input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.apa-fiche-prod:hover {
	border-color: var(--apa-bleu-clair);
	background: rgba(47,95,163,.03);
}
.apa-fiche-prod.is-checked {
	border-style: solid;
	border-color: var(--apa-bleu);
	background: rgba(47,95,163,.04);
	box-shadow: 0 1px 4px rgba(27,58,107,.08);
}
.apa-fiche-prod input:focus-visible + .apa-fiche-prod-check {
	outline: 2px solid var(--apa-bleu-clair);
	outline-offset: 2px;
}

.apa-fiche-prod-check {
	grid-area: check;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(27,58,107,.08);
	color: var(--apa-bleu);
	font-weight: 800;
	font-size: 1.05rem;
	flex-shrink: 0;
	border: 1.5px dashed rgba(27,58,107,.3);
}
.apa-fiche-prod-check-on  { display: none; }
.apa-fiche-prod-check-off { display: inline; }
.apa-fiche-prod.is-checked .apa-fiche-prod-check {
	background: var(--apa-bleu);
	color: #fff;
}
.apa-fiche-prod.is-checked .apa-fiche-prod-check-on  { display: inline; }
.apa-fiche-prod.is-checked .apa-fiche-prod-check-off { display: none; }

/* Bandeau d'état en pied de card — verbal, pas seulement icônique */
.apa-fiche-prod-state {
	grid-area: state;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: 999px;
	text-align: center;
	background: rgba(27,58,107,.06);
	color: var(--apa-bleu);
	border: 1px dashed rgba(27,58,107,.25);
}
.apa-fiche-prod-state-on  { display: none; }
.apa-fiche-prod-state-off { display: inline; }
.apa-fiche-prod.is-checked .apa-fiche-prod-state {
	background: rgba(30,158,106,.12);
	color: var(--apa-vert);
	border-style: solid;
	border-color: rgba(30,158,106,.35);
}
.apa-fiche-prod.is-checked .apa-fiche-prod-state-on  { display: inline; }
.apa-fiche-prod.is-checked .apa-fiche-prod-state-off { display: none; }

.apa-fiche-prod-thumb {
	display: block;
	width: 64px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--apa-papier);
	display: flex;
	align-items: center;
	justify-content: center;
}
.apa-fiche-prod-thumb svg,
.apa-fiche-prod-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.apa-fiche-prod-thumb-placeholder {
	color: var(--apa-bleu);
	font-size: 1.2rem;
}

.apa-fiche-prod-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.apa-fiche-prod-name {
	font-weight: 600;
	color: var(--apa-texte);
	font-size: .95rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apa-fiche-prod-desc {
	font-size: .8rem;
	color: var(--apa-texte-doux);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.apa-fiche-prod-price {
	font-size: .82rem;
	color: var(--apa-bleu);
	font-weight: 700;
}

.apa-fiche-included {
	margin: 16px 0 0;
	padding: 10px 14px;
	background: var(--apa-papier);
	border-radius: 10px;
	color: var(--apa-bleu);
	font-size: .88rem;
	text-align: center;
}

/* ---- Bloc « Ajouter d'autres supports » ---- */

.apa-fiche-add {
	margin-top: 16px;
}
.apa-fiche-add-summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 6px;
	list-style: none;
}
.apa-fiche-add-summary::-webkit-details-marker { display: none; }
.apa-fiche-add-title {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: 1.05rem;
	font-weight: 700;
}
.apa-fiche-add-hint {
	color: var(--apa-texte-doux);
	font-size: .8rem;
}
.apa-fiche-add[open] .apa-fiche-add-summary {
	border-bottom: 1px dashed var(--apa-borure-douce);
	margin-bottom: 12px;
}
.apa-fiche-add-cat {
	margin: 16px 0 0;
}
.apa-fiche-add-cat-name {
	font-family: var(--apa-font-menu, 'Poppins', 'Inter', system-ui, sans-serif);
	color: var(--apa-bleu);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.apa-fiche-empty {
	color: var(--apa-texte-doux);
	font-style: italic;
}

/* ---- CTA sticky en bas ---- */

.apa-fiche-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid var(--apa-borure-douce);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	z-index: 30;
	box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.apa-fiche-counter {
	color: var(--apa-texte-doux);
	font-size: .9rem;
	white-space: nowrap;
}
.apa-fiche-counter b {
	color: var(--apa-bleu);
	font-weight: 700;
	font-size: 1.1rem;
	display: inline-block;
	min-width: 1.2em;
	text-align: center;
}
.apa-fiche-submit {
	min-width: 200px;
	background: var(--apa-orange, #f7864a);
	border-color: var(--apa-orange, #f7864a);
	box-shadow: 0 3px 10px rgba(247,134,74,.30);
}
.apa-fiche-submit:hover {
	background: var(--apa-orange-fonce, #e36a2e);
	border-color: var(--apa-orange-fonce, #e36a2e);
}
.apa-fiche-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

@media (min-width: 720px) {
	.apa-fiche-hero h1 { font-size: 2rem; }
	.apa-fiche-sticky-cta { padding: 14px 24px; }
	.apa-fiche-counter { font-size: 1rem; }
}