/**
 * Popin de détail d'un Appel à Projets
 *
 * Structure :
 *  .aap-popin               : overlay full screen
 *    .aap-popin__backdrop   : fond cliquable pour fermer
 *    .aap-popin__dialog     : conteneur blanc du contenu
 *      .aap-popin__close    : bouton fermer
 *      .aap-popin__toolbar  : actions (favori, partage, pouce…)
 *      .aap-popin__content  : rendu serveur (header + meta + description)
 *      .aap-popin__extras   : notes privées
 *      .aap-popin__sub      : sous-modale (partage email / feedback)
 */

/* =======================================================================
   OVERLAY + DIALOG
======================================================================= */

.aap-popin {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9999;
	align-items: flex-start;
	justify-content: center;
	padding: 32px 16px;
	overflow-y: auto;
}

.aap-popin.is-open {
	display: flex;
}

body.aap-popin-open {
	overflow: hidden;
}

.aap-popin__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(18, 18, 23, 0.55);
	backdrop-filter: blur(2px);
	cursor: pointer;
}

.aap-popin__dialog {
	position: relative;
	background: var(--color-base);
	border-radius: 14px;
	max-width: 760px;
	width: 100%;
	padding: 32px;
	box-shadow: 0 24px 64px rgba(18, 18, 23, 0.24);
	margin: auto;
	z-index: 1;
	animation: aap-popin-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes aap-popin-enter {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.aap-popin__close {
	position: absolute;
	top: 0;
	left: calc(100% + 8px);
	width: 30px;
	height: 30px;
	background-color: var(--color-base);
	border: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 150ms ease, opacity 150ms ease;
	z-index: 2;
	border-radius: 50%;
	opacity: 0.7;
}

.aap-popin__close:hover,
.aap-popin__close:focus-visible {
	background-color: var(--color-base) !important;
	transform: scale(1.1);
	outline: none;
}

.aap-popin__close .aap-popin__icon {
	width: 24px;
	height: 24px;
}

/* =======================================================================
   HEADER (thématique + popularité + titre)
======================================================================= */

.aap-popin__header {
	margin-bottom: 20px;
}

.aap-popin__header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.aap-popin__title {
	margin: 0 0 12px 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-contrast);
	text-wrap: pretty;
}

.aap-popin__header-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

/* Thématique : utilise .project-thematique du thème (featured.css) pour avoir
   le même style que les cards AAP. Dans .project-thematiques, on retire
   juste le padding interne (hérité du bloc card). */
.aap-popin__header-top .project-thematiques {
	padding: 0;
	flex: 1;
	flex-wrap: wrap;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.aap-popin__popularity {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	cursor: default;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
}

.aap-popin__popularity .aap-popin__icon {
	width: 13px;
	height: 13px;
	fill: var(--color-danger);
}

/* =======================================================================
   SCORE PERTINENCE (mini-jauge à droite du header)
======================================================================= */

.aap-popin__score {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: default;
	flex-shrink: 0;
}

.aap-popin__score-label {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
}

.aap-popin__score-bar {
	width: 55px;
	height: 8px;
	background: #e2e5eb;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

.aap-popin__score-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 500ms ease;
}

.aap-popin__score-fill--high   { background: #3aa876; }
.aap-popin__score-fill--good   { background: var(--color-secondary); }
.aap-popin__score-fill--medium { background: var(--color-primary); }
.aap-popin__score-fill--low    { background: var(--color-danger); }

/* =======================================================================
   TAGS (type_projet, régions, pays)
======================================================================= */

.aap-popin__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 20px;
}

.aap-popin__tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	background: #f0f1f4;
	color: #6b7280;
	border: none;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
}

.aap-popin__tag--geo {
	background: #f0f1f4;
	color: #6b7280;
}

.aap-popin__tag .aap-popin__icon {
	width: 10px;
	height: 10px;
	opacity: 0.6;
}

/* =======================================================================
   COLONNES (description à gauche, meta à droite)
======================================================================= */

.aap-popin__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 28px;
	margin-bottom: 8px;
}

/* Sidebar absente (aucune meta à afficher) → la colonne principale prend toute la largeur. */
.aap-popin__columns--no-side {
	grid-template-columns: minmax(0, 1fr);
}

.aap-popin__col--main {
	min-width: 0;
}

.aap-popin__col--side {
	margin: 0;
}

/* =======================================================================
   META (dates, budget, bénéficiaires, zone, source, URL) — colonne droite
======================================================================= */

.aap-popin__meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 16px;
	background: #fafbfc;
	border: 1px solid #eceef3;
	border-radius: 10px;
}

.aap-popin__meta-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--font-primary);
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-gris);
}

.aap-popin__meta-row > .aap-popin__icon {
	width: 14px;
	height: 14px;
	fill: var(--color-gris);
	flex-shrink: 0;
	margin-top: 2px;
}

.aap-popin__meta-text {
	min-width: 0;
	word-break: break-word;
	color: #2a2f3a;
}

.aap-popin__meta-label {
	font-size: 13px;
	font-weight: var(--font-weight-medium, 500);
}

.aap-popin__meta-value {
	font-size: 13px;
	font-weight: 400;
}

.aap-popin__meta-value a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.aap-popin__meta-value a:hover,
.aap-popin__meta-value a:focus-visible {
	text-decoration: underline;
}

/* =======================================================================
   SECTION DESCRIPTION
======================================================================= */

.aap-popin__section {
	margin-bottom: 24px;
}

.aap-popin__section-title {
	margin: 0 0 8px 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-contrast);
}

.aap-popin__description {
	font-size: 14px;
	line-height: 1.71;
	color: #333;
}

/* Date limite mise en avant au-dessus de la description (texte brut) */
.aap-popin__deadline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	color: #222;
}

.aap-popin__deadline .aap-popin__icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	flex-shrink: 0;
}

.aap-popin__deadline.is-expired {
	color: var(--color-danger);
}

/* CTA "Voir l'appel à projet" — réutilise .button du thème (buttons.css) */
.aap-popin__cta {
	margin-top: 8px;
	gap: 8px;
}

.aap-popin__cta svg {
	flex-shrink: 0;
}

/* Ligne "Site : domaine.com" affichée juste sous le CTA */
.aap-popin__cta-site {
	margin: 8px 0 0 0;
	font-family: var(--font-primary);
	font-size: 13px;
	line-height: 1.4;
	color: #2a2f3a;
}

.aap-popin__cta-site-label {
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-gris);
}

.aap-popin__cta-site a {
	color: inherit;
	text-decoration: none;
}

.aap-popin__cta-site a:hover,
.aap-popin__cta-site a:focus-visible {
	text-decoration: underline;
}

/* =======================================================================
   TOOLBAR (actions : favoris, partage, pouces)
======================================================================= */

.aap-popin__toolbar {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #eceef3;
}

.aap-popin__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.aap-popin__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: var(--color-base);
	color: var(--color-contrast);
	border: 1px solid #d9dde4;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Override du :hover global de buttons.css (qui force le fond contrast en !important) */
.aap-popin__action:hover {
	background: var(--color-grisclair) !important;
	border-color: #bfc6d1;
	color: var(--color-contrast) !important;
}

.aap-popin__action:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.aap-popin__action.is-done {
	background: #e4f5ec;
	border-color: #8ed4ae;
	color: #1f7a4d;
}

/* Bouton favori : utilise .nisios-favorite-btn (assets/css/favorites.css)
   pour un style identique aux cards. Rien à redéclarer ici. */

.aap-popin__action--thumb {
	padding: 6px;
	width: auto;
	justify-content: center;
}

.aap-popin__action--thumb.is-active[data-action="thumb-up"] {
	background: #e4f5ec;
	border-color: #8ed4ae;
}

.aap-popin__action--thumb.is-active[data-action="thumb-down"] {
	background: #fde7e7;
	border-color: #e89c9c;
}

/* Teinte l'icône via filter quand le bouton est actif (approximation suffisante). */
.aap-popin__action--thumb.is-active[data-action="thumb-up"] .aap-popin__icon {
	filter: brightness(0) saturate(100%) invert(35%) sepia(40%) saturate(700%) hue-rotate(95deg);
}

.aap-popin__action--thumb.is-active[data-action="thumb-down"] .aap-popin__icon {
	filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(3000%) hue-rotate(355deg);
}

.aap-popin__feedback {
	display: inline-flex;
	gap: 4px;
	margin-left: auto;
}

.aap-popin__icon--toolbar {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* =======================================================================
   NOTES PRIVÉES
======================================================================= */

.aap-popin__extras {
	margin-top: 24px;
}

.aap-popin__notes {
	padding: 18px;
	background: #f3f5f8;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
}

.aap-popin__notes-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 12px;
	flex-wrap: wrap;
}

.aap-popin__notes-header h3 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.aap-popin__notes-header h3 .aap-popin__icon {
	width: 16px;
	height: 16px;
}

.aap-popin__notes-hint {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #6b7280;
}

.aap-popin__notes-hint .aap-popin__icon {
	width: 12px;
	height: 12px;
	opacity: 0.7;
}

.aap-popin__notes-editor {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
	margin-top: 14px;
}

.aap-popin__notes-editor [data-note-save] {
	align-self: flex-end;
}

.aap-popin__notes-editor textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d9dde4;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	min-height: 44px;
	background: var(--color-base);
}

.aap-popin__notes-editor textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(245, 183, 0, 0.2);
}

.aap-popin__notes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aap-popin__notes-empty {
	font-size: 13px;
	color: #9ba3af;
	font-style: italic;
	padding: 12px;
	text-align: center;
	background: var(--color-base);
	border: 1px dashed #eceef3;
	border-radius: 8px;
}

.aap-popin__note {
	padding: 12px 14px;
	background: var(--color-base);
	border: 1px solid #eceef3;
	border-radius: 8px;
}

.aap-popin__note-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
	font-size: 11px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 500;
}

.aap-popin__note-delete {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	opacity: 0.5;
	transition: opacity 150ms ease;
}

.aap-popin__note-delete:hover,
.aap-popin__note-delete:focus-visible {
	opacity: 1;
	outline: none;
}

.aap-popin__note-delete .aap-popin__icon {
	width: 14px;
	height: 14px;
}

.aap-popin__note-content {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #2a2f3a;
}

/* =======================================================================
   SOUS-MODALE (partage email / feedback)
======================================================================= */

.aap-popin__sub {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.aap-popin__sub-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(18, 18, 23, 0.4);
}

.aap-popin__sub-dialog {
	position: relative;
	background: var(--color-base);
	border-radius: 12px;
	max-width: 500px;
	width: 100%;
	padding: 28px;
	box-shadow: 0 24px 64px rgba(18, 18, 23, 0.28);
	z-index: 1;
}

.aap-popin__sub-dialog--compact {
	max-width: 400px;
	padding: 20px;
	border-radius: 8px;
}

.aap-popin__sub-dialog--compact .aap-popin__btn {
	padding: 8px 14px;
	font-size: 13px;
	border-radius: 6px;
}

.aap-popin__sub-dialog--compact .aap-popin__feedback-form select,
.aap-popin__sub-dialog--compact .aap-popin__feedback-form textarea {
	padding: 7px 10px;
	font-size: 13px;
}

.aap-popin__sub-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	background: var(--color-grisclair) !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 150ms ease, transform 150ms ease;
}

.aap-popin__sub-close:hover,
.aap-popin__sub-close:focus-visible {
	background: #e1e4ea !important;
	color: var(--color-contrast) !important;
	transform: scale(1.06);
	outline: none;
}

.aap-popin__sub-close .aap-popin__icon {
	width: 16px;
	height: 16px;
	fill: var(--color-contrast);
}

.aap-popin__sub-content h3 {
	margin: 0 0 12px 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 18px;
	font-weight: 600;
	padding-right: 32px;
}

.aap-popin__sub-dialog--compact .aap-popin__sub-content h3 {
	margin: 0 0 6px 0;
	font-size: 16px;
}

.aap-popin__hint {
	margin: 0 0 16px 0;
	color: #6b7280;
	font-size: 13px;
}

.aap-popin__sub-dialog--compact .aap-popin__hint {
	margin: 0 0 10px 0;
	font-size: 12px;
	line-height: 1.4;
}

.aap-popin__share-subtitle {
	margin: 0 0 10px 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 0.8em;
}

.aap-popin__share-divider {
	height: 20px;
}

.aap-popin__share-socials {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.aap-popin__share-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f3f5f8;
	color: #2a2f3a;
	text-decoration: none;
	transition: background 150ms ease, transform 150ms ease, color 150ms ease;
}

.aap-popin__share-social:hover {
	transform: scale(1.05);
	color: var(--color-base);
	background: var(--color-secondary);
}

.aap-popin__share-social .aap-popin__icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.aap-popin__share-form,
.aap-popin__feedback-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aap-popin__share-form label,
.aap-popin__feedback-form label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	color: #2a2f3a;
}

.aap-popin__share-form input,
.aap-popin__share-form textarea,
.aap-popin__share-form select,
.aap-popin__feedback-form input,
.aap-popin__feedback-form textarea,
.aap-popin__feedback-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	background: #fff !important;
	border: 1px solid #b0b6c0 !important;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-contrast);
	box-shadow: none;
}

.aap-popin__share-form input::placeholder,
.aap-popin__share-form textarea::placeholder,
.aap-popin__feedback-form input::placeholder,
.aap-popin__feedback-form textarea::placeholder {
	color: #9ba3af;
}

/* États d'erreur sur champs (validation inline) */
.aap-popin__share-form .has-error,
.aap-popin__feedback-form .has-error {
	border-color: var(--color-danger) !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.aap-popin__field-error {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-danger);
}

.aap-popin__share-form input:focus,
.aap-popin__share-form textarea:focus,
.aap-popin__share-form select:focus,
.aap-popin__feedback-form input:focus,
.aap-popin__feedback-form textarea:focus,
.aap-popin__feedback-form select:focus {
	outline: none;
	border-color: var(--color-secondary) !important;
	box-shadow: 0 0 0 3px rgba(145, 183, 143, 0.25);
}

.aap-popin__share-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.aap-popin__btn {
	padding: 10px 18px;
	border-radius: 8px;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 150ms ease;
}

.aap-popin__btn--primary {
	background: var(--color-primary);
	color: var(--color-contrast);
}

.aap-popin__btn--primary:hover {
	background: #e0a800;
}

.aap-popin__btn--primary:disabled {
	background: #d9dde4;
	color: #9ba3af;
	cursor: not-allowed;
}

.aap-popin__btn--ghost {
	background: transparent;
	border: 1px solid #d9dde4;
	color: var(--color-contrast);
}

.aap-popin__btn--ghost:hover {
	background: var(--color-grisclair);
}

/* =======================================================================
   TOAST (confirmation éphémère)
======================================================================= */

/* La tooltip est gérée par assets/css/tooltip.css + assets/js/tooltip.js
   (enregistrés globalement dans nisios-sites.php). */

.aap-popin-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	background: var(--color-contrast);
	color: var(--color-base);
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(18, 18, 23, 0.24);
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 10001;
	pointer-events: none;
}

.aap-popin-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =======================================================================
   SKELETON LOADER
======================================================================= */

.aap-popin__skeleton {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aap-popin__skeleton .skel {
	background: linear-gradient(90deg, #eceef3 0%, #f6f7f9 50%, #eceef3 100%);
	background-size: 200% 100%;
	animation: skel-shimmer 1.4s ease-in-out infinite;
	border-radius: 6px;
}

.aap-popin__skeleton .skel--chip  { width: 110px; height: 22px; border-radius: 999px; }
.aap-popin__skeleton .skel--title { width: 70%;   height: 30px; margin-top: 4px; }
.aap-popin__skeleton .skel--bar   { width: 100%;  height: 40px; margin-top: 8px; }
.aap-popin__skeleton .skel--line  { width: 100%;  height: 14px; }
.aap-popin__skeleton .skel--short { width: 40%; }
.aap-popin__skeleton .skel--block { width: 100%;  height: 120px; margin-top: 12px; }

@keyframes skel-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* =======================================================================
   ERROR
======================================================================= */

.aap-popin__error {
	color: var(--color-danger);
	background: #fdecec;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid #f5c6c6;
	margin: 0;
}

/* =======================================================================
   MOBILE
======================================================================= */

@media (max-width: 640px) {
	.aap-popin {
		padding: 16px 8px;
	}

	.aap-popin__dialog {
		padding: 24px 20px;
	}

	/* Sur mobile, on ne peut pas sortir le bouton à droite — on le ramène en haut à droite dans la popin */
	.aap-popin__close {
		top: 12px;
		left: auto;
		right: 8px;
		width: 30px;
		height: 30px;
	}

	.aap-popin__close .aap-popin__icon {
		width: 20px;
		height: 20px;
	}

	.aap-popin__header {
		padding-right: 44px;
	}

	.aap-popin__title {
		font-size: 22px;
	}

	.aap-popin__columns {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Sur mobile, la colonne meta passe au-dessus de la description */
	.aap-popin__col--side {
		order: -1;
	}

	.aap-popin__actions {
		gap: 6px;
	}

	.aap-popin__action {
		padding: 8px 10px;
		font-size: 12px;
	}

	.aap-popin__action span {
		display: none;
	}

	.aap-popin__action--fav span,
	.aap-popin__btn {
		display: inline-block;
	}

	.aap-popin__feedback {
		margin-left: 0;
	}

	.aap-popin__score {
		flex-wrap: wrap;
	}

	.aap-popin__score-bar {
		order: 3;
		flex: 1 1 100%;
	}
}