/**
 * PNC France — Composants des pages statiques (modèles de page hors Divi)
 *
 * Briques partagées par les modèles de page-templates/. Les styles propres à
 * un seul modèle vivent dans assets/css/pages/pnc-{modele}.css.
 *
 * @package PNC_France
 */

/* Les modèles ne doivent pas dépendre du reset de Divi. */
.pnc-site-main,
.pnc-site-main *,
.pnc-site-main *::before,
.pnc-site-main *::after {
	box-sizing: border-box;
}

.pnc-site-main img {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Deux colonnes texte / visuel
   ------------------------------------------------------------------------- */

.pnc-split {
	display: grid;
	gap: var(--pnc-space-8);
	align-items: center;
	margin: var(--pnc-space-8) 0;
}

.pnc-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pnc-radius-lg);
}

@media (min-width: 768px) {
	.pnc-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pnc-split--media-first .pnc-split__media {
		order: -1;
	}
}

/* -------------------------------------------------------------------------
   Encadrés
   ------------------------------------------------------------------------- */

.pnc-callout {
	margin: 0 0 var(--pnc-space-6);
	padding: var(--pnc-space-5) var(--pnc-space-6);
	background: var(--pnc-color-bg-subtle);
	border: 1px solid var(--pnc-color-border-light);
	border-radius: var(--pnc-radius-md);
}

.pnc-callout > :last-child {
	margin-bottom: 0;
}

.pnc-callout__title {
	margin: 0 0 var(--pnc-space-3);
	font-size: var(--pnc-font-size-md);
	font-weight: var(--pnc-font-weight-bold);
	color: var(--pnc-color-primary);
}

.pnc-callout address {
	font-style: normal;
}

/* Bandeau d'appel à l'action (adhésion, infolettre…). */
.pnc-cta-band {
	display: grid;
	gap: var(--pnc-space-6);
	align-items: center;
	margin: var(--pnc-space-12) 0 0;
	padding: var(--pnc-space-8);
	color: var(--pnc-color-text-inverse);
	background: linear-gradient(135deg, var(--pnc-color-primary) 0%, var(--pnc-color-primary-dark) 100%);
	border-radius: var(--pnc-radius-lg);
}

.pnc-cta-band__title {
	margin: 0 0 var(--pnc-space-3);
	font-size: var(--pnc-font-size-xl);
	font-weight: var(--pnc-font-weight-bold);
	line-height: var(--pnc-line-height-tight);
	color: inherit;
}

.pnc-cta-band p {
	margin: 0;
	color: inherit;
}

@media (min-width: 768px) {
	.pnc-cta-band {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* -------------------------------------------------------------------------
   Navigation d'ancres (sommaire en haut de page)
   ------------------------------------------------------------------------- */

.pnc-anchor-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pnc-space-3);
	margin: 0 0 var(--pnc-space-8);
	padding: 0;
	list-style: none;
}

.pnc-anchor-nav a {
	display: inline-block;
	padding: var(--pnc-space-2) var(--pnc-space-4);
	font-size: var(--pnc-font-size-sm);
	font-weight: var(--pnc-font-weight-medium);
	text-decoration: none;
	color: var(--pnc-color-primary);
	background: var(--pnc-color-bg-subtle);
	border: 1px solid var(--pnc-color-border-light);
	border-radius: var(--pnc-radius-full);
	transition: background var(--pnc-transition), color var(--pnc-transition);
}

.pnc-anchor-nav a:hover,
.pnc-anchor-nav a:focus {
	color: var(--pnc-color-text-inverse);
	background: var(--pnc-color-primary);
}

[id].pnc-section {
	scroll-margin-top: calc(var(--pnc-header-offset) + var(--pnc-space-6));
}

/* -------------------------------------------------------------------------
   Listes de personnes (nom + rôle)
   ------------------------------------------------------------------------- */

.pnc-people {
	display: grid;
	gap: var(--pnc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.pnc-people__item {
	margin: 0;
	padding: var(--pnc-space-4);
	background: var(--pnc-color-white);
	border: 1px solid var(--pnc-color-border-light);
	border-left: 3px solid var(--pnc-color-secondary);
	border-radius: var(--pnc-radius-sm);
}

.pnc-people__nom {
	display: block;
	font-weight: var(--pnc-font-weight-bold);
	color: var(--pnc-color-primary);
}

.pnc-people__role {
	display: block;
	margin-top: var(--pnc-space-1);
	font-size: var(--pnc-font-size-sm);
	color: var(--pnc-color-text-muted);
}

/* -------------------------------------------------------------------------
   Grille de liens externes
   ------------------------------------------------------------------------- */

.pnc-link-grid {
	display: grid;
	gap: var(--pnc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.pnc-link-grid a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pnc-space-3);
	height: 100%;
	padding: var(--pnc-space-5);
	font-weight: var(--pnc-font-weight-bold);
	text-decoration: none;
	color: var(--pnc-color-primary);
	background: var(--pnc-color-white);
	border: 1px solid var(--pnc-color-border);
	border-radius: var(--pnc-radius-md);
	box-shadow: var(--pnc-shadow-sm);
	transition: border-color var(--pnc-transition), box-shadow var(--pnc-transition), transform var(--pnc-transition);
}

.pnc-link-grid a::after {
	content: "↗";
	color: var(--pnc-color-secondary);
}

.pnc-link-grid a:hover,
.pnc-link-grid a:focus {
	border-color: var(--pnc-color-secondary);
	box-shadow: var(--pnc-shadow-md);
	transform: translateY(-2px);
}

.pnc-link-grid__desc {
	display: block;
	margin-top: var(--pnc-space-1);
	font-size: var(--pnc-font-size-sm);
	font-weight: var(--pnc-font-weight-normal);
	color: var(--pnc-color-text-muted);
}

/* -------------------------------------------------------------------------
   Grille de vidéos
   ------------------------------------------------------------------------- */

.pnc-video-grid {
	display: grid;
	gap: var(--pnc-space-8) var(--pnc-space-6);
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.pnc-video-grid .pnc-player {
	margin-bottom: var(--pnc-space-3);
}

.pnc-video-grid__titre {
	margin: 0;
	font-size: var(--pnc-font-size-base);
	font-weight: var(--pnc-font-weight-medium);
	line-height: var(--pnc-line-height-tight);
	color: var(--pnc-color-primary);
}

/* -------------------------------------------------------------------------
   Notes de bas de page
   ------------------------------------------------------------------------- */

.pnc-footnotes {
	margin-top: var(--pnc-space-10);
	padding-top: var(--pnc-space-5);
	font-size: var(--pnc-font-size-sm);
	color: var(--pnc-color-text-muted);
	border-top: 1px solid var(--pnc-color-border);
}

.pnc-footnotes ol {
	margin: 0;
	padding-left: 1.4em;
}

.pnc-footnotes li {
	margin-bottom: var(--pnc-space-2);
}

.pnc-table-wrap {
	margin: 0 0 var(--pnc-space-3);
	overflow-x: auto;
}

.pnc-table-wrap .pnc-table {
	margin-bottom: 0;
}

.pnc-table caption {
	caption-side: bottom;
	padding-top: var(--pnc-space-3);
	font-size: var(--pnc-font-size-sm);
	font-style: italic;
	text-align: left;
	color: var(--pnc-color-text-muted);
}

/* -------------------------------------------------------------------------
   Formulaires (contact, infolettre)
   ------------------------------------------------------------------------- */

.pnc-form {
	margin: 0;
}

.pnc-form__grid {
	display: grid;
	gap: var(--pnc-space-4) var(--pnc-space-5);
}

@media (min-width: 600px) {
	.pnc-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pnc-form__field--full {
		grid-column: 1 / -1;
	}
}

.pnc-form__field {
	margin: 0;
	padding: 0;
}

.pnc-form__field label {
	display: block;
	margin-bottom: var(--pnc-space-2);
	font-size: var(--pnc-font-size-sm);
	font-weight: var(--pnc-font-weight-medium);
	color: var(--pnc-color-primary);
}

.pnc-form input[type="text"],
.pnc-form input[type="email"],
.pnc-form select,
.pnc-form textarea {
	width: 100%;
	padding: var(--pnc-space-3) var(--pnc-space-4);
	font-family: var(--pnc-font-family);
	font-size: var(--pnc-font-size-base);
	color: var(--pnc-color-text);
	background: var(--pnc-color-white);
	border: 1px solid var(--pnc-color-border);
	border-radius: var(--pnc-radius-sm);
	transition: border-color var(--pnc-transition), box-shadow var(--pnc-transition);
}

.pnc-form input:focus,
.pnc-form select:focus,
.pnc-form textarea:focus {
	outline: none;
	border-color: var(--pnc-color-primary);
	box-shadow: 0 0 0 3px rgba(44, 71, 134, 0.15);
}

.pnc-form select {
	min-height: 2.9em;
	padding-right: var(--pnc-space-10);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232c4786' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--pnc-space-4) center;
	cursor: pointer;
}

.pnc-form__facultatif {
	font-weight: normal;
	color: var(--pnc-color-text-muted, #6b7280);
}

.pnc-form__actions {
	margin: var(--pnc-space-5) 0 0;
}

.pnc-form__piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pnc-form__notice {
	margin: 0 0 var(--pnc-space-5);
	padding: var(--pnc-space-4) var(--pnc-space-5);
	font-weight: var(--pnc-font-weight-medium);
	border-radius: var(--pnc-radius-sm);
}

.pnc-form__notice--ok {
	color: var(--pnc-color-secondary-dark);
	background: rgba(122, 173, 46, 0.1);
	border: 1px solid rgba(122, 173, 46, 0.35);
}

.pnc-form__notice--invalide,
.pnc-form__notice--erreur {
	color: #9b2c2c;
	background: #fff5f5;
	border: 1px solid #feb2b2;
}

/* Sur fond sombre (bandeaux). */
.pnc-cta-band .pnc-form__field label {
	color: var(--pnc-color-text-inverse);
}