/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/* Police secondaire du thème (sur-titres, <em>…)
	Le thème prévoit « Playfair Display » (--cnvs-secondary-font) mais ne
	la chargeait pas : les sur-titres s'affichaient dans la police serif
	par défaut du navigateur (Times). Hébergée ici, sans appel à un
	service tiers. Licence SIL OFL : css/fonts/playfair-display/OFL.txt
-----------------------------------------------------------------*/
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/playfair-display/playfair-display-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/playfair-display/playfair-display-latin-400-italic.woff2") format("woff2");
}


/* Photos rondes des témoignages
	Emplacement 48px prêt à recevoir les portraits.
	object-position: center top → garde le visage si la photo est
	plus haute que large.
-----------------------------------------------------------------*/
.avatar-photo {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
	background-color: var(--cnvs-contrast-200);
}


/* Liste "Impact RSE" sur fond clair
	Séparateurs discrets entre les points.
-----------------------------------------------------------------*/
.impact-list li {
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.impact-list li:last-child {
	border-bottom: 0;
}


/* Timeline des épisodes de la série
-----------------------------------------------------------------*/
.episode-item {
	border-bottom: 1px solid var(--cnvs-contrast-200);
}

.episode-item:last-child {
	border-bottom: 0;
}


/* Badges "récompenses & sélections"
-----------------------------------------------------------------*/
.award-badge {
	display: inline-block;
	margin: 0 4px 5px 0;
	padding: 4px 10px;
	font-size: .84rem;
	font-weight: 400;
	color: var(--cnvs-contrast-700);
	background-color: var(--cnvs-contrast-100);
	border: 1px solid var(--cnvs-contrast-200);
	border-radius: 2px;
}

/* Emoji couleur (badges palmarès + titres du format)
	Police emoji du système forcée : sans ça, la police du thème
	chargée via Typekit peut les rendre en monochrome.
-----------------------------------------------------------------*/
.award-icon,
.fi-icon {
	display: inline-block;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-style: normal;
	line-height: 1;
}

.award-icon {
	margin-right: .4em;
	font-size: 1.05em;
}

.fi-icon {
	margin-right: .5em;
	font-size: 1.15em;
}


/* Liste "à retenir" avec flèche
-----------------------------------------------------------------*/
.arrow-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arrow-list li {
	display: flex;
	gap: 8px;
	padding: .25rem 0;
}

.arrow-list li::before {
	content: "\2192";
	flex-shrink: 0;
	color: var(--cnvs-themecolor);
}


/* CTA posé sur une section sombre
	Le survol par défaut du thème (gris 900) disparaîtrait sur fond foncé :
	on inverse en blanc + texte accent.
-----------------------------------------------------------------*/
.button-on-dark {
	--cnvs-btn-color-dark: #FFF;
}

.button-on-dark:hover {
	color: var(--cnvs-themecolor);
}


.hero-photo {
	height: 380px;
	object-fit: cover;
	object-position: center center;
	border-radius: 2rem;
}

@media (max-width: 575.98px) {
	.hero-photo {
		height: 300px;
	}
}


.coraline-photo {
	height: 380px;
	object-fit: cover;
	object-position: center 40%;
	border-radius: 2rem;
}

@media (max-width: 575.98px) {
	.coraline-photo {
		height: 340px;
	}
}


/* Fond des sections grises (#concept, #preuves, #coraline)
	Un ton plus foncé que le gris par défaut du thème :
	#f8f9fa (contrast-100) → #e9ecef (contrast-200).
	Les sections en bg-white / bg-dark ne sont pas affectées.
-----------------------------------------------------------------*/
:root,
.not-dark {
	--cnvs-section-bg: var(--cnvs-contrast-200);
}


/* Header : barre de menu épinglée en haut en permanence
	Le thème laisse #header-wrap en `position: fixed` sans valeur `top`
	et ne le cale à `top: 0` qu'une fois la classe .sticky-header ajoutée
	au défilement. Entre-temps l'élément retombe sur sa « position
	statique », que Safari recalcule pendant le scroll : la barre se
	déplace au milieu de la page. On la cale dans tous les états.
	La hauteur reste réservée par .header-wrap-clone (inséré par le thème),
	donc le contenu ne passe pas dessous.
-----------------------------------------------------------------*/
#header-wrap {
	top: 0;
	left: 0;
}


/* Header : compactage progressif du menu de navigation
	.header-row est en `flex-wrap: wrap` et .header-misc (le bouton
	« Organiser un ciné-débat ») passe en `order: 6` dès que le menu est
	déployé : quand logo + menu + bouton dépassent la largeur du
	.container, la ligne casse et le bouton retombe sous le logo.
	On récupère la place en resserrant l'espacement des rubriques
	(2.25rem de chaque côté dans speaker.css) et en réduisant un peu le
	logo, par paliers calés sur les largeurs de .container Bootstrap.
	Largeurs mesurées (logo + menu + bouton / largeur utile du .container),
	avec les rubriques et le bouton « Organiser un ciné-débat » de 2026 :
		≥1400px  1069 / 1296  → inchangé
		≥1200px  1021 / 1116  → marges des items à 1.75rem
		≥992px    851 /  936  → marges à 0.5rem + logo à 28px
	Sous 992px le thème bascule sur le menu hamburger, rien à corriger.
-----------------------------------------------------------------*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.is-expanded-menu .menu-container > .menu-item {
		margin-left: 1.75rem;
		margin-right: 1.75rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.is-expanded-menu .menu-container > .menu-item {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}

	#logo a {
		font-size: 28px;
	}
}


/* ================================================================
	Mise à jour 2026 — brief « optimiser le site des ciné-débats »
	Composants ajoutés pour le nouvel ordre de la page.
================================================================ */


/* Héro : public visé, sous la phrase explicative
-----------------------------------------------------------------*/
.hero-audience {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	color: var(--cnvs-contrast-600);
}


/* Ancrage territorial : étapes Avant / Pendant / Après
-----------------------------------------------------------------*/
.steps > li {
	position: relative;
}

.step-card {
	background-color: #FFF;
	border: 0;
	border-radius: 1rem;
}

.step-label {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .86rem;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cnvs-contrast-700);
}

.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	font-size: .9rem;
	letter-spacing: 0;
	color: #FFF;
	background-color: var(--cnvs-themecolor);
}

/* Flèche entre deux étapes, posée dans la gouttière (≥ 768px) */
@media (min-width: 768px) {
	.steps > li:not(:last-child)::after {
		content: "\2192";
		position: absolute;
		z-index: 2;
		top: 50%;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.9rem;
		height: 1.9rem;
		border-radius: 50%;
		font-size: .95rem;
		line-height: 1;
		color: var(--cnvs-themecolor);
		background-color: var(--cnvs-section-bg);
		transform: translate(50%, -50%);
	}
}


/* Déroulé : repères de durée + photo d'événement
-----------------------------------------------------------------*/
.key-figure {
	height: 100%;
	padding-top: .75rem;
	border-top: 2px solid var(--cnvs-themecolor);
}

.key-figure-value {
	display: block;
	font-family: var(--cnvs-primary-font);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--cnvs-heading-color, #222);
	white-space: nowrap;
}

.key-figure-value small {
	margin-left: .2em;
	font-size: .45em;
	font-weight: 400;
	color: var(--cnvs-themecolor);
}

.key-figure-label {
	display: block;
	margin-top: .35rem;
	font-size: .9rem;
	color: var(--cnvs-contrast-600);
}

.event-photo {
	height: 420px;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 2rem;
}

@media (max-width: 575.98px) {
	.event-photo {
		height: 260px;
		border-radius: 1.5rem;
	}
}

.episode-title {
	font-size: .9rem;
}


/* Preuves : chiffres, distinctions, parrainage
-----------------------------------------------------------------*/
.proof-stat {
	height: 100%;
	padding-top: 1rem;
	border-top: 1px solid rgba(0, 0, 0, .15);
}

.proof-stat-value {
	display: block;
	font-family: var(--cnvs-primary-font);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--cnvs-heading-color, #222);
	white-space: nowrap;
}

.proof-stat-label {
	display: block;
	margin-top: .4rem;
	font-size: .95rem;
	color: var(--cnvs-contrast-600);
}

.award-groups {
	margin: 0;
}

.award-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.award-group:last-child {
	border-bottom: 0;
}

.award-group dt {
	flex: 0 0 9.5rem;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

.award-group dd {
	flex: 1 1 16rem;
	margin: 0;
}

.award-group .award-badge {
	background-color: #FFF;
}

.proof-card {
	border: 0;
	border-radius: 1rem;
}


/* Témoignages : extrait court + « Lire la suite »
	Sans JavaScript, le texte complet reste affiché (et le bouton caché).
-----------------------------------------------------------------*/
.testimonial {
	border: 0;
	border-radius: 1rem;
}

/* Le thème donne aux <blockquote> une grande taille et une bordure :
	dans les cartes, la citation garde la taille du texte courant. */
.testimonial blockquote {
	padding: 0;
	border: 0;
	font-size: inherit;
}

.quote-toggle,
html:not(.js) .quote-excerpt,
.js .quote-full {
	display: none;
}

.js .quote-toggle {
	display: inline-block;
	margin: 0 0 .75rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: .9rem;
	font-weight: 500;
	color: var(--cnvs-themecolor);
	cursor: pointer;
}

.js .quote-toggle:hover,
.js .quote-toggle:focus-visible {
	text-decoration: underline;
}

.js .testimonial.is-open .quote-full {
	display: block;
}

.js .testimonial.is-open .quote-excerpt {
	display: none;
}


/* Impact RSE : bénéfices + public visé
-----------------------------------------------------------------*/
.benefit-list li {
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.benefit-list li:first-child {
	padding-top: 0;
}

.benefit-list li:last-child {
	border-bottom: 0;
}

.benefit-list .bi-check-lg {
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 1.4;
}

.audience-card {
	border-color: var(--cnvs-contrast-200);
	border-radius: 1rem;
	background-color: var(--cnvs-contrast-100);
}

.audience-title {
	font-size: .9rem;
}


/* Coraline : la cause, en ouverture de l'histoire d'Avec Eux
-----------------------------------------------------------------*/
.cause-callout {
	font-size: 1.3rem;
	line-height: 1.45;
	margin-bottom: 1.75rem;
}


/* Formulaire de contact (section sombre)
	.not-dark (thème) remet les couleurs claires dans la carte blanche.
-----------------------------------------------------------------*/
.contact-form {
	position: relative;
	padding: 2rem;
	border-radius: 1.25rem;
	background-color: #FFF;
	color: #222;
}

@media (max-width: 575.98px) {
	.contact-form {
		padding: 1.5rem 1.25rem;
	}
}

.contact-form .form-label {
	margin-bottom: .35rem;
	font-size: .95rem;
	font-weight: 500;
	color: #222;
}

.contact-form .form-control {
	padding: .7rem .9rem;
	border: 1px solid var(--cnvs-contrast-300);
	border-radius: .5rem;
	background-color: #FFF;
	color: #222;
}

.contact-form .form-control:focus {
	border-color: var(--cnvs-themecolor);
	box-shadow: 0 0 0 .2rem rgba(var(--cnvs-themecolor-rgb), .2);
}

.contact-form textarea.form-control {
	min-height: 8rem;
	resize: vertical;
}

.contact-form .button[disabled] {
	opacity: .65;
	cursor: progress;
}

.contact-form .form-note {
	margin-top: 1rem;
	font-size: .9rem;
	color: var(--cnvs-contrast-600);
}

.contact-form .form-note a {
	color: var(--cnvs-themecolor);
}

.form-status {
	margin-top: 1rem;
	padding: .85rem 1rem;
	border-radius: .5rem;
	font-size: .9rem;
	line-height: 1.5;
}

.form-status:empty {
	display: none;
}

.form-status.is-pending {
	background-color: var(--cnvs-contrast-100);
	color: #444;
}

.form-status.is-success {
	background-color: #E7F6EC;
	color: #1D6B3A;
}

.form-status.is-error {
	background-color: #FDECF1;
	color: #A3163F;
}

.form-status a {
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
}

.contact-direct li + li {
	margin-top: .6rem;
}


/* Pages légales
-----------------------------------------------------------------*/
.legal-content {
	max-width: 46rem;
}

.legal-content h2 {
	margin: 2.5rem 0 .75rem;
	font-size: 1.25rem;
	font-weight: 500;
}

.legal-content p,
.legal-content li {
	font-weight: 300;
	color: var(--cnvs-contrast-700);
}

.legal-content ul {
	margin-bottom: 1rem;
	padding-left: 1.25rem;
}

.legal-content a {
	color: var(--cnvs-themecolor);
}


/* Sur-titre du héro : même rendu que l'ancien <h3>, sans fausser la
	hiérarchie des titres (le <h1> reste l'accroche).
-----------------------------------------------------------------*/
.hero-kicker {
	font-family: var(--cnvs-primary-font);
	font-weight: 600;
}


/* Témoignage posé sur une section blanche (#rse) : fond gris clair
	pour que la carte reste visible.
-----------------------------------------------------------------*/
.section.bg-white .testimonial {
	background-color: var(--cnvs-contrast-100);
}


/* Lisibilité : textes plus grands
	Taille de base portée à 18 px (au lieu de 16) et petits textes
	(.text-smaller, étiquettes) moins réduits.
-----------------------------------------------------------------*/
html {
	font-size: 17px;
}

:root {
	--bs-body-font-size: 1.0625rem;
}

body {
	font-size: 1.0625rem;
}

.text-smaller {
	font-size: 92% !important;
}

.fw-light {
	font-weight: 400 !important;
}

@media (max-width: 575.98px) {
	html {
		font-size: 16.5px;
	}
}

/* Logo du parrainage : garde ses proportions sur mobile */
.parrainage-logo {
	height: auto;
	max-width: 440px;
}

/* Bouton « Copier ma demande » (si aucune messagerie ne s'ouvre) */
.form-copy {
	display: inline;
	padding: .15rem .6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.form-copy:hover {
	background-color: rgba(29, 107, 58, .1);
}