/* ==========================================================================
   PRISME — Atypie Friendly (carte de présentation)
   Charte commune : rayon des cartes, échelle d'espacement 4·8·16·24·32·48·64,
   texte ≥ 14 px, aligné à gauche, couleurs de la charte via variables.
   ========================================================================== */

.prisme-af {
	position: relative;
	overflow: hidden;
	max-width: 960px;
	margin: 0 auto;
	padding: 48px 32px 32px;
	font-family: var(--prisme-font);
	text-align: left;
}
/* Filet dégradé de la charte (même que l'en-tête du site). */
.prisme-af::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--prisme-vert, #2ECC71), var(--prisme-bleu, #2F8FE0), var(--prisme-violet, #7B5CF0), var(--prisme-magenta, #E14FA0), var(--prisme-corail, #F0653C));
}

.prisme-af-badge {
	display: inline-block;
	margin: 0 0 16px;
	padding: 4px 12px;
	font-size: var(--prisme-t-xs, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--prisme-texte-att, #A9A9B4);
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius-pill, 999px);
}
.prisme-af-titre {
	margin: 0 0 16px;
	font-size: var(--prisme-t-xl, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--prisme-texte, #FFFFFF);
}
.prisme-af-intro {
	margin: 0 0 32px;
	max-width: 640px;
	font-size: var(--prisme-t-s, 1rem);
	line-height: 1.6;
	color: var(--prisme-texte-att, #A9A9B4);
}

.prisme-af-reperes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
	margin-bottom: 32px;
}
.prisme-af-repere {
	padding: 24px;
	background: var(--prisme-fond, #17171A);
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius-s, 14px);
	border-top: 3px solid var(--prisme-bleu, #2F8FE0);
}
.prisme-af-repere--vert   { border-top-color: var(--prisme-vert, #2ECC71); }
.prisme-af-repere--bleu   { border-top-color: var(--prisme-bleu, #2F8FE0); }
.prisme-af-repere--violet { border-top-color: var(--prisme-violet, #7B5CF0); }
.prisme-af-repere h3 {
	margin: 0 0 8px;
	font-size: var(--prisme-t-m, 1.125rem);
	font-weight: 600;
	color: var(--prisme-texte, #FFFFFF);
}
.prisme-af-repere p {
	margin: 0;
	font-size: var(--prisme-t-xs, 0.875rem);
	line-height: 1.6;
	color: var(--prisme-texte-att, #A9A9B4);
}

.prisme-af-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}
.prisme-af-lien {
	font-size: var(--prisme-t-s, 1rem);
	font-weight: 600;
	color: var(--prisme-lien, var(--prisme-bleu, #2F8FE0));
	text-decoration: none;
}
.prisme-af-lien:hover { text-decoration: underline; }

@media (max-width: 560px) {
	.prisme-af { padding: 32px 16px 24px; }
	.prisme-af-actions .prisme-btn-pill { width: 100%; }
}

/* Calendrier Atypie Friendly : les cartes viennent du plugin Événements ;
   on ne style ici que le titre, la zone « passées » et le lien d'aide. */
.prisme-af-cal-titre {
	margin: 0 0 24px;
	font-size: var(--prisme-t-l, 1.375rem);
	font-weight: 600;
	color: var(--prisme-texte, #FFFFFF);
}
.prisme-af-cal-passes { margin-top: 48px; }
.prisme-af-cal-passes summary {
	margin-bottom: 24px;
	font-size: var(--prisme-t-s, 1rem);
	font-weight: 600;
	color: var(--prisme-texte-att, #A9A9B4);
	cursor: pointer;
}
.prisme-af-cal-aide { margin: 48px 0 0; }

/* Page complète : blocs empilés, même rythme que l'accueil (96 px entre blocs, 64 sur téléphone). */
.prisme-af-page { max-width: 960px; margin: 0 auto; font-family: var(--prisme-font); text-align: left; }
.prisme-af-page > .prisme-af { margin-bottom: 96px; }
.prisme-af-section { margin: 0 0 96px; scroll-margin-top: 96px; }
.prisme-af-section:last-child { margin-bottom: 0; }
.prisme-af-section-titre {
	margin: 0 0 24px;
	font-size: var(--prisme-t-xs, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--prisme-texte-att, #A9A9B4);
}
.prisme-af-section-lien { margin: 24px 0 0; }
.prisme-af-vide { margin: 0; color: var(--prisme-texte-att, #A9A9B4); }

.prisme-af-ateliers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
}
.prisme-af-atelier { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.prisme-af-atelier h3 { margin: 0; font-size: var(--prisme-t-m, 1.125rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-atelier p { margin: 0; font-size: var(--prisme-t-xs, 0.875rem); line-height: 1.6; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-atelier .prisme-af-lien { margin-top: auto; }
.prisme-af-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.prisme-af-atelier .prisme-af-etiquettes { color: var(--prisme-texte, #FFFFFF); }
.prisme-af-etiquette {
	padding: 4px 12px;
	font-size: var(--prisme-t-xs, 0.875rem);
	font-weight: 600;
	color: var(--prisme-texte, #FFFFFF);
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius-pill, 999px);
}

.prisme-af-btn-contour {
	background: transparent;
	color: var(--prisme-texte, #FFFFFF);
	border: 1px solid var(--prisme-bordure, #34333B);
}
.prisme-af-btn-contour:hover, .prisme-af-btn-contour:focus-visible { color: var(--prisme-texte, #FFFFFF); }

@media (max-width: 560px) {
	.prisme-af-page > .prisme-af, .prisme-af-section { margin-bottom: 64px; }
}

/* Cloisonnement : phrase de rappel dans la carte, et bloc « Qui fait quoi ? » (deux cartes distinctes). */
.prisme-af-note {
	margin: -8px 0 32px;
	padding: 12px 16px;
	max-width: 640px;
	font-size: var(--prisme-t-xs, 0.875rem);
	line-height: 1.6;
	color: var(--prisme-texte, #FFFFFF);
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius-s, 14px);
}
.prisme-af-deux {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
}
.prisme-af-qui { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.prisme-af-qui h3 { margin: 0; font-size: var(--prisme-t-l, 1.375rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-qui p { margin: 0; font-size: var(--prisme-t-xs, 0.875rem); line-height: 1.6; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-qui .prisme-af-etiquettes { color: var(--prisme-texte, #FFFFFF); }

/* Séances (type dédié) : grille de cartes, même rayon et même filet que toutes les cartes du site. */
.prisme-af-seances {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	font-family: var(--prisme-font);
}
.prisme-af-seance { display: flex; flex-direction: column; gap: 12px; padding: 24px; text-align: left; border-top: 3px solid var(--prisme-vert, #2ECC71); }
.prisme-af-seance-lien { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: inherit; text-decoration: none; }
.prisme-af-seance-date { font-size: var(--prisme-t-xs, 0.875rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-seance-titre { margin: 0; font-size: var(--prisme-t-m, 1.125rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-seance-lieu { font-size: var(--prisme-t-s, 1rem); color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-seance:hover, .prisme-af-seance:focus-within { border-color: var(--prisme-vert, #2ECC71); }
.prisme-af-cal-passes .prisme-af-seances { margin-top: 24px; }

/* Page individuelle d'une séance ou d'une question. */
.prisme-af-detail { max-width: 640px; margin: 24px auto 48px; padding: 32px; font-family: var(--prisme-font); text-align: left; }
.prisme-af-detail h1 { margin: 0 0 16px; font-size: var(--prisme-t-xl, 1.75rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-detail-quand { margin: 0 0 8px; font-size: var(--prisme-t-m, 1.125rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-detail-lieu { margin: 0 0 24px; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-detail-texte { margin: 0 0 24px; font-size: var(--prisme-t-s, 1rem); line-height: 1.7; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-detail-texte p:first-child { margin-top: 0; }
.prisme-af-detail .prisme-btn-pill { margin-bottom: 24px; }
.prisme-af-detail .prisme-af-note { margin: 0 0 24px; }
.prisme-af-detail-liees { margin: 0 0 24px; padding-top: 24px; border-top: 1px solid var(--prisme-bordure, #34333B); }
@media (max-width: 560px) { .prisme-af-detail { padding: 24px 16px; } }

/* Fiche d'une des deux parties de l'organisation (permanences / habiletés sociales). */
.prisme-af-fiche { margin: 0 0 24px; padding: 24px; text-align: left; }
.prisme-af-fiche-liste { display: grid; gap: 16px; margin: 0; }
.prisme-af-fiche-ligne { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 24px; }
.prisme-af-fiche-ligne dt { margin: 0; font-size: var(--prisme-t-xs, 0.875rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-fiche-ligne dd { margin: 0; font-size: var(--prisme-t-s, 1rem); line-height: 1.6; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-fiche-sous-titre { margin: 0 0 16px; font-size: var(--prisme-t-m, 1.125rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
@media (max-width: 640px) {
	.prisme-af-fiche { padding: 24px 16px; }
	.prisme-af-fiche-ligne { grid-template-columns: minmax(0, 1fr); }
}

/* « Pas de permanence » et « Non précisé par Monsieur Vandromme » : trait en pointillé et titre barré léger — le TEXTE de l'étiquette porte l'information, jamais la seule apparence. */
.prisme-af-seance--non { border-top-style: dashed; border-top-color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-seance--non .prisme-af-seance-titre { color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-seance--non .prisme-af-etiquette { border-style: dashed; }

.prisme-af-seance--inconnu { border-top-style: dotted; }

/* ==========================================================================
   Pastilles d'état, lignes de planning, tuiles « En ce moment »
   Couleurs de la charte via variables ; l'état est toujours ÉCRIT (et la forme du point diffère) :
   « Permanence » = point plein vert ; « Pas de permanence » = carré gris, trait en pointillés ;
   « Non précisé… » = cercle creux or, trait pointillé fin.
   ========================================================================== */
.prisme-af-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	font-family: var(--prisme-font);
	font-size: var(--prisme-t-xs, 0.875rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--prisme-texte, #FFFFFF);
	background: transparent;
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius-pill, 999px);
}
.prisme-af-pastille::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.prisme-af-pastille--oui { background: color-mix(in srgb, var(--prisme-vert, #2ECC71) 18%, transparent); border-color: var(--prisme-vert, #2ECC71); }
.prisme-af-pastille--oui::before { background: var(--prisme-vert, #2ECC71); }
.prisme-af-pastille--non { color: var(--prisme-texte-att, #A9A9B4); border-style: dashed; }
.prisme-af-pastille--non::before { background: var(--prisme-texte-att, #A9A9B4); border-radius: 2px; }
.prisme-af-pastille--inconnu { border-style: dotted; border-color: var(--prisme-or, #F5A623); }
.prisme-af-pastille--inconnu::before { background: transparent; border: 2px solid var(--prisme-or, #F5A623); }
.prisme-af-pastille--lieu::before { content: "📍"; width: auto; height: auto; background: none; border: 0; border-radius: 0; }

/* Planning des permanences : une ligne par jeudi */
.prisme-af-planning-public { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prisme-af-ligne { padding: 0; }
.prisme-af-ligne-lien {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 17rem); /* colonnes fixes : l'horaire reste aligné d'une ligne à l'autre */
	align-items: center;
	gap: 8px 24px;
	min-height: 56px;
	padding: 12px 24px;
	color: inherit;
	text-decoration: none;
}
.prisme-af-ligne-jour { font-size: var(--prisme-t-s, 1rem); font-weight: 600; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-ligne-heure { font-size: var(--prisme-t-xs, 0.875rem); color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-ligne-lien .prisme-af-pastille { justify-self: end; }
.prisme-af-ligne:hover, .prisme-af-ligne:focus-within { border-color: var(--prisme-af-accent, var(--prisme-vert, #2ECC71)); }
@media (max-width: 640px) {
	.prisme-af-ligne-lien { grid-template-columns: minmax(0, 1fr); padding: 16px; }
	.prisme-af-ligne-lien .prisme-af-pastille { justify-self: start; }
}

/* « En ce moment » : deux grandes tuiles, l'information utile en premier */
.prisme-af-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; color: inherit; text-decoration: none; text-align: left; border-top: 3px solid var(--prisme-af-accent, var(--prisme-vert, #2ECC71)); }
.prisme-af-tuile:hover, .prisme-af-tuile:focus-visible { border-color: var(--prisme-af-accent, var(--prisme-vert, #2ECC71)); }
.prisme-af-tuile-titre { font-size: var(--prisme-t-xs, 0.875rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-af-tuile-date { font-size: var(--prisme-t-l, 1.375rem); font-weight: 600; line-height: 1.25; color: var(--prisme-texte, #FFFFFF); }
.prisme-af-tuile-aide { font-size: var(--prisme-t-xs, 0.875rem); line-height: 1.5; color: var(--prisme-texte-att, #A9A9B4); }
@media (max-width: 640px) { .prisme-af-tuile { padding: 24px 16px; } }

/* Titres de section : un filet d'accent pour guider l'œil le long de la page */
.prisme-af-section-titre { display: flex; align-items: center; gap: 16px; }
.prisme-af-section-titre::after { content: ""; flex: 1; height: 1px; background: var(--prisme-bordure, #34333B); }