/* ═════════════════════════════════════════════════════════════════
   Ophtapod : page Notre équipe (template-equipe.php)
   Tailles en rem (voir la convention dans main.css) pour que le module
   d'accessibilité puisse mettre le texte à l'échelle.
   ═════════════════════════════════════════════════════════════════ */

/* Les classes partagées entre modèles — .op-eyebrow, .op-page-hero et ses
   variantes, .op-crosslink — sont définies dans main.css. Ne reste ici que ce
   qui est propre à cette page. */

/* ── Une seule section d'équipe ───────────────────────────────────────
   Cinq groupes titrés sur une même surface blanche, et non trois sections à
   fonds alternés : l'alternance faisait lire trois pages plutôt qu'une
   équipe. Le rythme se joue aux écarts, jamais à des hauteurs fixes ni à des
   marges dépendantes du nombre de cartes. */

.op-equipe {
	background: var(--c-white);
}

.op-equipe .op-container {
	padding: 7.5rem 0 6.875rem;
}

/* Écart entre deux groupes : 5rem, et le bandeau compte comme un groupe. */
.op-equipe__groupes {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.op-equipe-groupe {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.op-equipe-groupe__titre {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.25rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* Introduction de groupe : largeur de lecture confortable. */
.op-equipe-intro {
	max-width: 42rem;
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--c-gray);
}

.op-equipe-groupe__grille {
	display: grid;
	align-items: start;
}

/* Médecins : deux pistes larges, portrait 4:5. */
.op-equipe-groupe--large .op-equipe-groupe__grille {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.75rem 2.5rem;
}

/* Autres groupes (desktop) : titre et introduction à gauche, cartes carrées
   alignées à gauche à droite. Pistes de largeur bornée : une ou trois cartes
   ne s'étirent pas et le vide ne fait pas « trou ». */
@media (min-width: 1024px) {
	.op-equipe-groupe--medium {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 2.5rem;
		align-items: start;
	}
	.op-equipe-groupe--medium .op-equipe-groupe__grille {
		grid-template-columns: repeat(auto-fill, minmax(12rem, 15rem));
		gap: 2.5rem 1.875rem;
	}
}

@media (max-width: 1023px) {
	.op-equipe-groupe--medium .op-equipe-groupe__grille {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 15rem));
		gap: 2.5rem 1.875rem;
	}
}

/* ── Bandeau visuel d'équipe ──────────────────────────────────────────
   Emplacement conservé même sans photographie : la structure approuvée ne
   dépend pas du contenu fourni. */

.op-equipe-photo {
	margin: 0;
}

.op-equipe-photo__media {
	height: 26rem;
	border-radius: var(--r-panel);
	overflow: hidden;
}

.op-equipe-photo__media img,
.op-equipe-photo__media .op-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.op-equipe-photo__legende {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-gray);
}

/* ── Carte membre ─────────────────────────────────────────────────────
   Photo, nom, fonction et spécialités toujours visibles. Le survol ne fait
   qu'avancer légèrement le portrait. */

.op-membre {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* État vide : surface unie, sans cercle, symbole, hachure ni dégradé. Cet
   état est propre à la carte membre — le placeholder illustré du thème reste
   inchangé partout ailleurs. */
.op-membre__media {
	background: var(--c-blue-pale);
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-membre__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le portrait s'avance doucement dans son cadre au survol, à la demande du
   client (octobre 2026). Purement décoratif : aucune information n'en
   dépend. */
.op-membre:hover .op-membre__media img {
	transform: scale(1.05);
}

.op-membre__nom {
	margin: 0 0 0.1875rem;
	font-family: var(--font-title);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-membre__fonction {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-gray);
}

/* Spécialités : petite liste toujours visible, filet doré discret. */
.op-membre__specialites {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.op-membre__specialites li {
	position: relative;
	margin: 0 0 0.25rem;
	padding-left: 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-gray);
}

.op-membre__specialites li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.5rem;
	height: 0.125rem;
	background: var(--c-gold);
}

/* Médecins : portrait 4:5, échelle dominante. */
.op-membre--large .op-membre__media {
	aspect-ratio: 4 / 5;
}

.op-membre--large .op-membre__info {
	padding: 1.5rem 0 0;
}

.op-membre--large .op-membre__nom {
	font-size: 1.375rem;
}

/* Personnel paramédical et accueil et soins : même carré, même traitement. */
.op-membre--medium .op-membre__media {
	aspect-ratio: 1 / 1;
}

.op-membre--medium .op-membre__info {
	padding: 1.25rem 0 0;
}

.op-membre--medium .op-membre__nom {
	font-size: 1.125rem;
}

/* La bande finale (CrossLink) est déclarée dans main.css : elle est
   partagée avec Le Centre. */

/* ═════════════════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
	:root {
		--sp-section: 6.875rem;
	}
	.op-equipe .op-container {
		padding: 5.625rem 0;
	}
	.op-equipe-photo__media {
		height: 20rem;
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────
   Les groupes restent affichés directement, aucune révélation
   progressive de la liste. Médecins sur une colonne, personnel sur deux. */

@media (max-width: 767px) {
	.op-equipe .op-container {
		padding: 4.375rem 0 5rem;
	}
	.op-equipe__groupes {
		gap: 3.125rem;
	}
		.op-equipe-groupe__titre {
		font-size: 1.75rem;
	}
	.op-equipe-groupe--large .op-equipe-groupe__grille {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.op-equipe-groupe--medium .op-equipe-groupe__grille {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.25rem;
	}
	.op-equipe-photo__media {
		height: 14rem;
	}
	.op-membre--large .op-membre__info,
	.op-membre--medium .op-membre__info {
		padding: 1rem 0 0;
	}
	.op-membre--large .op-membre__nom,
	.op-membre--medium .op-membre__nom {
		font-size: 1.0625rem;
	}
	.op-membre__fonction {
		font-size: 0.9375rem;
	}
	.op-membre__specialites li {
		font-size: 0.875rem;
	}
}

/* ── Mouvement réduit ─────────────────────────────────────────────────
   Le zoom du portrait au survol est neutralisé. */

@media (prefers-reduced-motion: reduce) {
	.op-membre__media img {
		transition: none;
	}
	.op-membre:hover .op-membre__media img {
		transform: none;
	}
}

html.op-a11y-reduire-anim .op-membre__media img {
	transition: none;
}

html.op-a11y-reduire-anim .op-membre:hover .op-membre__media img {
	transform: none;
}