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

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


/* 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: .72rem;
	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 (#coraline, #cibles)
	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 une séance ») 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 / place disponible) :
		≥1400px  1094 / 1320  → inchangé
		≥1200px  1046 / 1140  → marges des items à 1.75rem
		≥992px    876 /  960  → 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;
	}
}