/*
 * Page « Élections professionnelles » — chargé uniquement sur ce template (elections.php).
 * CSS autonome, hors chaîne SCSS : couleurs lues sur les variables Bootstrap du thème.
 * --elections-offset : hauteur de l'en-tête sticky, tenue à jour par elections.js.
 */

.spelc-elections {
	--elections-offset: 80px;
	--elections-gap: 1.5rem;
	--elections-brique: #a8440f;
	--elections-bleu-pale: #c9dff3;
	--elections-bleu-fond: #f1f5fc;
}

/* Bannière ------------------------------------------------------------------ */

.elections-page {
	padding-left: 0;
	padding-right: 0;
}

/*
 * Image = PNG transparent (texte + enveloppe), plafonnée à sa largeur de maquette
 * (1600 px dans un cadre de 1920). Le fond est le dégradé du cadre Figma :
 * - sur l'<img> elle-même, il suit donc les recadrages mobiles. Arrêts recalculés sur
 *   la largeur de l'image : 20 % et 68 % de 1920 px, moins la marge de 160 px, donnent
 *   224 et 1146 px sur 1600, soit 14 % et 71.6 % ;
 * - au-delà de 1600 px, les côtés en aplat prolongent les deux extrémités du dégradé.
 * Sur téléphone (< 576 px), voir le découpage plus bas.
 */
.elections-hero {
	--elections-hero-gauche: #c4dff1; /* « extralight blue » Figma */
	--elections-hero-droite: #014995;
	--elections-coupe: .5656;         /* 905 / 1600 : fin du texte, avant l'enveloppe */
	--elections-hauteur-visuel: .85;  /* hauteur gardée sous l'enveloppe (le bas est rogné) */
	background: linear-gradient(90deg, var(--elections-hero-gauche) 50%, var(--elections-hero-droite) 50%);
}

.elections-hero__cadre {
	max-width: 1600px;
	margin: 0 auto;
}

.elections-hero__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	background: linear-gradient(90deg, var(--elections-hero-gauche) 14%, var(--elections-hero-droite) 71.6%);
}

.elections-hero__part--visuel {
	display: none;
}

/*
 * Téléphone : la même image, deux fois, dans deux fenêtres empilées.
 * - texte : la part gauche (--elections-coupe) remplit la largeur ;
 * - enveloppe : la part droite, calée à droite et en haut, bas rogné.
 * --elections-hero-ratio (largeur / hauteur de l'image) est posé par le PHP.
 */
@media (max-width: 575.98px) {
	/*
	 * Le dégradé horizontal, coupé en deux et empilé, laissait une démarcation nette (bas
	 * du texte en bleu moyen à droite, haut de l'enveloppe déjà foncé). Ici, UN dégradé
	 * oblique couvre les deux morceaux, sans raccord : clair sous le texte (jusqu'à ~45 %
	 * sur la diagonale, fin de « S'ENGAGE » comprise), foncé sous l'enveloppe.
	 */
	.elections-hero__cadre {
		background: linear-gradient(165deg, var(--elections-hero-gauche) 30%, var(--elections-hero-droite) 75%);
	}

	.elections-hero__img {
		background: none;
	}

	.elections-hero__part {
		position: relative;
		overflow: hidden;
	}

	.elections-hero__part--texte {
		aspect-ratio: calc(var(--elections-hero-ratio) * var(--elections-coupe));
	}

	.elections-hero__part--texte .elections-hero__img {
		width: calc(100% / var(--elections-coupe));
	}

	.elections-hero__part--visuel {
		display: block;
		aspect-ratio: calc(var(--elections-hero-ratio) * (1 - var(--elections-coupe)) / var(--elections-hauteur-visuel));
	}

	.elections-hero__part--visuel .elections-hero__img {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100% / (1 - var(--elections-coupe)));
	}
}

/* Mise en page -------------------------------------------------------------- */

.elections-layout {
	display: grid;
	/* minmax(0, …) : sinon la colonne s'élargit au contenu insécable (adresse e-mail) */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--elections-gap);
	max-width: 1172px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
}

@media (min-width: 992px) {
	.elections-layout {
		grid-template-columns: 270px minmax(0, 1fr);
		column-gap: clamp(2rem, 6vw, 6.5rem);
	}

	.elections-aside {
		position: sticky;
		top: calc(var(--elections-offset) + var(--elections-gap));
		align-self: start;
		/* Sommaire plus haut que l'écran : il défile plutôt que d'être tronqué */
		max-height: calc(100vh - var(--elections-offset) - 2 * var(--elections-gap));
		overflow-y: auto;
	}
}

/* Sommaire ------------------------------------------------------------------ */

.elections-sommaire {
	background: var(--bs-white);
	border: 1px solid var(--bs-gray-300);
	border-radius: var(--bs-border-radius-sm);
	padding: 1.25rem 1.25rem 1.5rem;
}

.elections-sommaire__titre {
	margin: 0 0 1rem;
	color: var(--bs-primary);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.elections-sommaire__liste {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
	color: var(--bs-primary);
}

.elections-sommaire__liste li {
	padding: .3rem 0;
}

.elections-sommaire__liste li::marker {
	color: var(--bs-primary);
}

.elections-sommaire__liste a {
	color: var(--bs-primary);
	text-decoration: none;
	transition: color .2s;
}

.elections-sommaire__liste a:hover,
.elections-sommaire__liste a:focus-visible {
	color: var(--bs-secondary);
	text-decoration: underline;
}

.elections-sommaire__liste a.is-active {
	color: var(--bs-secondary);
	font-weight: 600;
}

/*
 * Boutons pleine largeur, empilés. Le thème traite tout bloc Boutons non vertical comme
 * un groupe soudé (`.wp-block-buttons:not(.is-vertical)` : `gap: 0 !important`, coins
 * intérieurs à angle droit) : d'où les !important, limités au sommaire. theme.css étant
 * chargé après ce fichier, le sélecteur doit aussi être PLUS spécifique que le sien.
 */
.elections-aside .elections-sommaire .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: .625rem !important;
	margin: 0;
}

.elections-sommaire .wp-block-button {
	width: 100%;
	margin: 0;
}

.elections-sommaire .wp-block-button__link {
	display: block;
	width: 100%;
	padding: .625rem 1rem;
	border-radius: var(--bs-border-radius-sm) !important;
	font-size: .875rem;
	line-height: 1.3;
	text-align: center;
}

/* Cartes de section --------------------------------------------------------- */

.elections-article {
	display: flex;
	flex-direction: column;
	gap: var(--elections-gap);
}

.elections-section {
	scroll-margin-top: calc(var(--elections-offset) + var(--elections-gap));
	background: var(--bs-white);
	border: 1px solid var(--bs-gray-300);
	border-top: 3px solid var(--bs-secondary);
	border-radius: var(--bs-border-radius-sm);
	padding: 1.25rem 1.5rem 1.75rem;
	margin: 0 !important;
	overflow-wrap: break-word;
}

.elections-section > :first-child,
.elections-section > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

.elections-section > :last-child,
.elections-section > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* Titre automatique, ou H1 saisi en tête de l'introduction */
.elections-intro .entry-title,
.elections-intro h1 {
	margin: .75rem 0 1rem;
	color: var(--bs-secondary);
	font-family: "Oswald", var(--bs-body-font-family);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance; /* évite le « ! » orphelin en fin de titre */
}

.elections-section h2 {
	color: var(--bs-primary);
	font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
	font-weight: 600;
	margin-bottom: 1.25rem;
}

.elections-section h3 {
	color: var(--elections-brique);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 700;
	text-transform: none; /* le thème met les h3 en capitales */
	margin: 1.5rem 0 .75rem;
}

.elections-section ul li::marker {
	color: var(--bs-primary);
}

/* Icônes de section (Font Awesome 6 Pro light, déjà chargé par le thème) */
[class*="elections-icone-"] h2::before {
	display: inline-block;
	margin-right: .5rem;
	color: var(--bs-secondary);
	font-family: "Font Awesome 6 Pro";
	font-size: 1.1em;
	font-style: normal;
	font-weight: 300;
	vertical-align: .1em;
}

.elections-icone-liste h2::before { content: "\f03a"; }
.elections-icone-coeur h2::before { content: "\f004"; }
.elections-icone-personnes h2::before { content: "\f500"; }
.elections-icone-enveloppe h2::before { content: "\f0e0"; }

/* Listes dépliables (bloc Détails) ------------------------------------------ */

.elections-section .wp-block-details {
	margin: 0 0 1rem;
	border: 1px solid var(--bs-primary);
	border-radius: var(--bs-border-radius-sm);
	background: var(--elections-bleu-fond);
}

.elections-section .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1rem;
	background: var(--bs-primary);
	color: var(--bs-white);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.elections-section .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.elections-section .wp-block-details > summary::after {
	content: "\f329"; /* square-chevron-down */
	font-family: "Font Awesome 6 Pro";
	font-weight: 300;
	transition: transform .2s;
}

.elections-section .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

.elections-section .wp-block-details > :not(summary) {
	margin: 0;
	padding: .75rem 1rem 1rem;
}

.elections-section .wp-block-details .wp-block-table {
	overflow-x: auto;
}

.elections-section .wp-block-details table {
	width: 100%;
	border: 0;
	font-size: .9rem;
}

.elections-section .wp-block-details :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--elections-bleu-pale);
	padding: .3rem .5rem .3rem 0;
	text-align: left;
}

.elections-section .wp-block-details thead th {
	border-bottom: 0;
	color: var(--bs-primary);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Bloc Média & texte « mot de la tête de liste » */
.elections-section .wp-block-media-text.has-background {
	padding: 1.25rem;
	color: var(--bs-primary);
	font-style: italic;
}

/* Lien de modification ------------------------------------------------------ */

.elections-edit {
	margin-top: 1rem;
	font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
	.elections-sommaire__liste a,
	.elections-section .wp-block-details > summary::after {
		transition: none;
	}
}