/* ==========================================================================
   PRISME — Portraits. Repose sur les tokens définis dans prisme-core.css.
   ========================================================================== */

.prisme-portraits-wrap { font-family: var(--prisme-font); }

.prisme-portraits-empty { font-family: var(--prisme-font); color: var(--prisme-texte-att, #A9A9B4); text-align: left; }

/* Liste à défilement horizontal borné : piste en flex, largeur de carte fixe pour que le
   JS puisse calculer les décalages de défilement de façon fiable. */
.prisme-portraits-carousel {
	display: flex;
	align-items: center;
	gap: 12px;
}

.prisme-portraits-carousel-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto; /* le défilement "smooth" est géré au cas par cas en JS */
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1;
	cursor: grab;
	user-select: none;
}
.prisme-portraits-carousel-viewport::-webkit-scrollbar { display: none; }
.prisme-portraits-carousel-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.prisme-portraits-carousel-track {
	display: flex;
	gap: 16px;
	width: max-content;
}

.prisme-portraits-carousel-nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--prisme-bordure, #34333B);
	background: var(--prisme-fond-carte, #201F24);
	color: var(--prisme-texte, #FFFFFF);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.prisme-portraits-carousel-nav:hover { background: var(--prisme-bordure, #34333B); }
.prisme-portraits-carousel-nav:focus-visible { outline: 2px solid var(--prisme-bleu, #2F8FE0); outline-offset: 2px; }

.prisme-portraits-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 16px;
}

.prisme-portrait-card {
	padding: 24px;
	text-align: left;
}
.prisme-portraits-carousel-track .prisme-portrait-card {
	flex: 0 0 190px;
	width: 190px;
}

.prisme-portrait-photo {
	width: 92px;
	height: 92px;
	margin: 0 0 12px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--prisme-bordure, #34333B);
}
.prisme-portrait-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prisme-portrait-photo-placeholder { width: 100%; height: 100%; background: var(--prisme-bordure, #34333B); }

.prisme-portrait-nom { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--prisme-texte, #FFFFFF); }

.prisme-portrait-badge {
	display: inline-block;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--prisme-bleu, #2F8FE0);
	margin-bottom: 8px;
}

.prisme-portrait-bio { font-size: 14px; line-height: 1.6; color: var(--prisme-texte-att, #A9A9B4); }

.prisme-portrait-photo { display: block; }
.prisme-portrait-nom a { color: inherit; text-decoration: none; }
.prisme-portrait-nom a:hover { text-decoration: underline; }

.prisme-portrait-detail {
	max-width: 560px;
	margin: 24px auto 48px;
	padding: 32px 32px;
	text-align: left;
}
.prisme-portrait-detail-photo {
	width: 140px;
	height: 140px;
	margin: 0 0 16px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--prisme-bordure, #34333B);
}
.prisme-portrait-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prisme-portrait-detail h1 { font-size: 26px; font-weight: 600; margin: 0 0 12px; color: var(--prisme-texte, #FFFFFF); }
.prisme-portrait-detail-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.prisme-portrait-detail-roles .prisme-portrait-badge {
	border: 1px solid var(--prisme-bleu, #2F8FE0);
	border-radius: var(--prisme-radius-pill, 999px);
	padding: 4px 12px;
	margin: 0;
}
.prisme-portrait-detail-bio { text-align: left; font-size: 15px; line-height: 1.7; color: var(--prisme-texte-att, #A9A9B4); margin-bottom: 24px; }
.prisme-portrait-linkedin {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--prisme-bleu, #2F8FE0);
	text-decoration: none;
}
.prisme-portrait-linkedin:hover { text-decoration: underline; }

.prisme-portrait-linkedin-detail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
}

.prisme-portrait-retour {
	display: inline-block;
	font-size: 14px;
	color: var(--prisme-texte-att, #A9A9B4);
	text-decoration: none;
	border-top: 1px solid var(--prisme-bordure, #34333B);
	padding-top: 16px;
	width: 100%;
}
.prisme-portrait-retour:hover { color: var(--prisme-texte, #FFFFFF); }

/* Responsive — jeu de seuils unique du projet : 480 / 640 / 768 / 1024 (mobile d'abord, 320 px minimum).
   Ajouté en fin de feuille : il complète les règles ci-dessus sans les réécrire. */
@media (max-width: 768px) { .prisme-portrait-detail { padding: 24px; } }
@media (max-width: 640px) { .prisme-portrait-detail { padding: 24px 16px; } }
.prisme-portrait-retour { display: inline-flex; align-items: center; min-height: 44px; }
.prisme-portrait-linkedin { display: inline-flex; align-items: center; min-height: 44px; }
.prisme-portraits-carousel-nav { width: 44px; height: 44px; }
.prisme-portraits-carousel-track .prisme-portrait-card { flex-basis: min(190px, 80vw); width: min(190px, 80vw); }

/* ---- Cartes « profondeur douce » (1.14.0) ---- */
.prisme-portrait-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.prisme-portrait-card:hover, .prisme-portrait-card:focus-within { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--prisme-ombre-survol, none); }
.prisme-portraits-carousel-nav { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .prisme-portrait-card { transition: none; } .prisme-portrait-card:hover { transform: none; } }

/* Grand écran (ordinateur, iPad en paysage) : la page profite de la largeur disponible */
@media (min-width: 1024px) {
	.prisme-portrait-detail { max-width: 760px; }
}

/* Bento (voir bento.js du thème) */
/* Dès 768 px, le carrousel devient une grille bento (grande carte + cartes simples) : plus de défilement horizontal sur iPad et ordinateur.
   Sur téléphone, il reste un carrousel à faire glisser. */
@media (min-width: 768px) {
	.prisme-portraits-carousel { display: block; }
	.prisme-portraits-carousel-nav { display: none; }
	.prisme-portraits-carousel-viewport { overflow: visible; cursor: default; user-select: auto; }
	.prisme-portraits-carousel-track { display: grid; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; }
	.prisme-portraits-carousel-track .prisme-portrait-card { flex: none; width: auto; min-width: 0; box-sizing: border-box; }
}
@media (min-width: 1024px) { .prisme-portraits-carousel-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prisme-portrait-compte { color: var(--prisme-texte-att, #A9A9B4); font-size: 14px; margin: 0 0 16px; }

.prisme-portraits-note,.prisme-portrait-photo-note{margin:16px 0 0;font-size:.875rem;color:var(--prisme-texte-att,#A9A9B4)}

/* Fiche d'un portrait dans une fenêtre sur la page (1.47.0) */
.prisme-portrait-plus{display:inline-block;margin:8px 0 0;font-weight:600;min-height:44px;line-height:44px}
.prisme-portrait-card .prisme-portrait-photo,.prisme-portrait-card .prisme-portrait-nom a,.prisme-portrait-card .prisme-portrait-linkedin{cursor:pointer}
.prisme-portrait-fenetre{position:fixed;inset:0;z-index:2147482500;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,14,.82);overflow:auto}
.prisme-portrait-fenetre[hidden]{display:none}
.prisme-portrait-fenetre-carte{position:relative;width:100%;max-width:720px;max-height:calc(100dvh - 32px);overflow:auto;padding:32px 24px 24px;text-align:left;background:var(--prisme-fond-carte,#201F24);animation:prismePortraitOuvre .25s ease both}
@keyframes prismePortraitOuvre{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.prisme-portrait-fenetre-fermer{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--prisme-bordure,#34333B);background:transparent;color:inherit;font-size:20px;cursor:pointer}
.prisme-portrait-fenetre-fermer:hover,.prisme-portrait-fenetre-fermer:focus-visible{background:rgba(255,255,255,.1)}
.prisme-portrait-fenetre-corps .prisme-portrait-fiche-photo{width:160px;height:160px;border-radius:50%;overflow:hidden;margin:0 0 16px}
.prisme-portrait-fenetre-corps .prisme-portrait-fiche-photo img{width:100%;height:100%;object-fit:cover;display:block}
.prisme-portrait-fenetre-corps h2{margin:12px 0 8px}
.prisme-portrait-fenetre-corps .prisme-portrait-fiche-bio{margin:0 0 24px;line-height:1.6}
.prisme-portrait-fenetre-corps .prisme-btn-pill,.prisme-portrait-fenetre-corps .prisme-btn-outline{min-height:48px;margin:0 16px 16px 0;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
body.prisme-portrait-fenetre-ouverte{overflow:hidden}
@media (prefers-reduced-motion:reduce){.prisme-portrait-fenetre-carte{animation:none}}

.prisme-portrait-fenetre-corps .prisme-portrait-badge{margin:0 8px 8px 0}
.prisme-portrait-fenetre-corps .prisme-portrait-photo-note{margin:24px 0 0}
.prisme-portrait-fenetre-carte{padding:48px 32px 32px}
@media (max-width:640px){.prisme-portrait-fenetre-carte{padding:56px 16px 24px}.prisme-portrait-fenetre-corps .prisme-btn-pill,.prisme-portrait-fenetre-corps .prisme-btn-outline{width:100%;justify-content:center;margin:0 0 16px}}