/**
 * Rendu public (§6.1, §6.2). Conception mobile d'abord (§6.1).
 *
 * §6.3 demande de reprendre les couleurs, la typographie et les largeurs de
 * conteneur du thème enfant existant. Le thème n'exposant aucune variable
 * CSS propre (pas de :root, pas de --et-global-color-*), les valeurs
 * ci-dessous sont transmises directement (décision « DESIGN ») plutôt que
 * lues dynamiquement :
 *   - couleurs d'accent (primaire + secondaire, cette dernière réservée aux
 *     accents ponctuels : compteurs, liens secondaires — jamais en couleur
 *     dominante), bordures, texte discret.
 *   - largeur de contenu élargie par rapport à la valeur initiale du thème
 *     (1080px) après test sur préproduction : trop étroite sur grand écran,
 *     et responsable de coupures d'e-mails au milieu d'un mot faute de place
 *     (décision « LARGEUR »).
 *   - Alatsi (titres) et Helvetica (texte courant) sont déclarées
 *     explicitement : Divi applique sa typographie via ses propres classes,
 *     notre contenu n'en hérite pas. Alatsi n'est chargée depuis Google
 *     Fonts que si le thème ne la charge pas déjà (Sneps_Public_Section::
 *     enqueue_alatsi_if_needed()) ; Helvetica est une police système, rien à
 *     charger.
 */

:root {
	--sneps-content-width: 1600px;
	--sneps-accent-color: #114f9f;
	--sneps-accent-secondaire: #12b39e;
	--sneps-border-color: #dddddd;
	--sneps-muted-color: #666666;
	--sneps-font-titres: 'Alatsi', sans-serif;
	--sneps-font-texte: Helvetica, Arial, sans-serif;
}

.sneps-public {
	max-width: var( --sneps-content-width );
	margin: 0 auto;
	padding: 40px 5%;
	box-sizing: border-box;
	font-family: var( --sneps-font-texte );
	background: #ffffff;
}

.sneps-public * {
	box-sizing: border-box;
}

.sneps-public h1,
.sneps-public h2,
.sneps-public h3,
.sneps-public h4,
.sneps-groupe-accordeon summary {
	font-family: var( --sneps-font-titres );
}

/* En-tête de section */

.sneps-section-header {
	text-align: center;
	margin-bottom: 2em;
}

.sneps-section-logo {
	max-width: 180px;
	height: auto;
	margin: 0 auto 1em;
	display: block;
}

.sneps-section-nom {
	margin: 0 0 0.5em;
}

.sneps-section-description {
	max-width: 640px;
	margin: 1em auto;
}

.sneps-section-meta {
	color: var( --sneps-muted-color );
}

.sneps-section-meta a {
	color: var( --sneps-accent-secondaire );
}

/* Groupes */

.sneps-groupes {
	margin-top: 2em;
}

.sneps-groupe-accordeon {
	border-top: 1px solid var( --sneps-border-color );
	padding: 1.25em 0;
}

.sneps-groupe-accordeon summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	font-size: 1.15em;
	font-weight: 600;
}

.sneps-groupe-accordeon summary::-webkit-details-marker {
	display: none;
}

.sneps-groupe-accordeon summary::after {
	content: '+';
	font-weight: 400;
	font-size: 1.3em;
	line-height: 1;
	flex-shrink: 0;
}

.sneps-groupe-accordeon[open] summary::after {
	content: '−';
}

h2.sneps-groupe-titre {
	margin: 0 0 1em;
}

/* Cartes représentants */

/*
 * Nombre de colonnes fixe par palier plutôt qu'auto-fill/minmax (décision
 * « LARGEUR ») : avec une largeur minimale, la grille aligne davantage de
 * cartes étroites au lieu d'élargir les existantes, et une adresse e-mail
 * longue repasse sur deux lignes. Des colonnes fixes en 1fr donnent au
 * contraire une largeur de carte cohérente, qui occupe tout l'espace
 * disponible, y compris quand un groupe compte moins de cartes que de
 * colonnes (elles restent alors alignées à gauche, à la même largeur que
 * dans les groupes complets, plutôt que de s'étirer).
 */
.sneps-representants-grille {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.5em 1em;
	margin-top: 1.5em;
}

/*
 * Traitement commun des cartes (représentants et actualités, décision
 * « STYLE DES CARTES ») : fond blanc, angles arrondis, ombre douce.
 */
.sneps-carte-representant {
	text-align: center;
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba( 0, 0, 0, 0.12 );
	padding: 1.5em;
}

.sneps-carte-photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 0.75em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sneps-carte-photo.sneps-avatar-placeholder {
	background: var( --sneps-accent-color );
	color: #ffffff;
	font-size: 2.2em;
	font-weight: 600;
}

.sneps-carte-nom {
	font-weight: 600;
	margin: 0 0 0.2em;
}

.sneps-carte-fonction-bandeau {
	display: inline-block;
	background: var( --sneps-accent-secondaire );
	color: #ffffff;
	font-size: 0.8em;
	font-weight: 600;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	margin: 0 0 1em;
}

.sneps-carte-actions {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	flex-wrap: wrap;
}

.sneps-carte-bouton {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	border: 1px solid var( --sneps-accent-color );
}

.sneps-bouton-appeler {
	background: var( --sneps-accent-color );
	color: #ffffff;
}

.sneps-bouton-ecrire {
	background: transparent;
	color: var( --sneps-accent-color );
}

/*
 * Coordonnées : boutons sur mobile, numéro/e-mail en clair et cliquables sur
 * ordinateur (décision « AFFICHAGE DES COORDONNÉES »). Bascule uniquement en
 * CSS — les deux blocs sont toujours dans le HTML, voir la media query plus
 * bas qui les intervertit.
 */

.sneps-carte-coordonnees {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	font-size: 0.9em;
}

.sneps-lien-coordonnee {
	color: var( --sneps-accent-color );
	text-decoration: none;
	/*
	 * Coupure de secours seulement (décision « LARGEUR ») : les e-mails
	 * portent des <wbr> après chaque « @ »/« . » (sneps_email_avec_cesures())
	 * pour couper aux séparateurs naturels ; overflow-wrap ne prend le relais
	 * que si un segment isolé reste malgré tout plus large que la carte.
	 */
	overflow-wrap: break-word;
}

.sneps-lien-coordonnee:hover {
	text-decoration: underline;
}

.sneps-coordonnees-desktop {
	display: none;
}

/* Actualités */

.sneps-actus-section {
	margin-top: 3em;
	padding-top: 2em;
	border-top: 1px solid var( --sneps-border-color );
}

.sneps-actus-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	margin-top: 1.5em;
}

.sneps-actu-carte {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba( 0, 0, 0, 0.12 );
	overflow: hidden;
}

/*
 * Vignettes uniformisées (décision « FORMAT DES VIGNETTES ») : hauteur fixée
 * par un rapport constant plutôt que par la hauteur naturelle de chaque
 * image, recadrage centré sans déformation. Rapport 16/9, cohérent avec la
 * largeur de carte à 4 colonnes sur grand écran (voir la media query plus bas).
 */
.sneps-actu-image-lien {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sneps-actu-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sneps-actu-corps {
	padding: 1.25em 1.5em 1.5em;
}

.sneps-actu-date {
	color: var( --sneps-muted-color );
	font-size: 0.85em;
	margin: 0 0 0.25em;
}

.sneps-actu-titre {
	margin: 0 0 0.75em;
	font-size: 1.15em;
}

.sneps-actu-titre a {
	color: inherit;
	text-decoration: none;
}

.sneps-actu-documents {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.sneps-bouton-lire {
	background: var( --sneps-accent-color );
	color: #ffffff;
}

.sneps-actus-voir-plus-wrap {
	text-align: center;
	margin-top: 2em;
}

.sneps-btn-voir-plus-actus {
	cursor: pointer;
	background: transparent;
	border-color: var( --sneps-accent-secondaire );
	color: var( --sneps-accent-secondaire );
}

.sneps-btn-voir-plus-actus:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Page d'actualité (§6.2) */

.sneps-actu-page article {
	max-width: 720px;
	margin: 0 auto;
}

.sneps-actu-retour {
	margin-bottom: 1em;
}

.sneps-actu-retour a {
	color: var( --sneps-accent-secondaire );
	text-decoration: none;
}

.sneps-actu-image-pleine {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 1em 0;
}

.sneps-actu-contenu {
	line-height: 1.7;
}

.sneps-actu-page .sneps-actu-titre {
	font-size: 1.6em;
}

/* Écrans plus larges */

@media ( min-width: 600px ) {
	.sneps-representants-grille {
		grid-template-columns: repeat( 3, 1fr );
	}

	.sneps-actus-liste {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 900px ) {
	.sneps-actus-liste {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1200px ) {
	.sneps-representants-grille {
		grid-template-columns: repeat( 5, 1fr );
	}

	.sneps-actus-liste {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* Coordonnées : bascule boutons (mobile) ↔ texte cliquable (ordinateur). */
@media ( min-width: 782px ) {
	.sneps-coordonnees-mobile {
		display: none;
	}

	.sneps-coordonnees-desktop {
		display: flex;
	}
}

@media ( min-width: 960px ) {
	.sneps-public {
		padding: 60px 5%;
	}
}