/* -------------------------------------------------------------------------
 * Michelin Sites — gabarit de la fiche site
 * Tokens Figma : Rouge #ED0A30 / Jaune #FAD90B / Noir #212529 / Blanc #FFF
 * ---------------------------------------------------------------------- */

.msite {
	--msite-rouge: #ed0a30;
	--msite-jaune: #fad90b;
	--msite-noir: #212529;
	--msite-blanc: #fff;

	--msite-font-titre: "Boldonse", "Mona Sans", "Helvetica Neue", Arial, sans-serif;
	--msite-font-corps: "Mona Sans", "Helvetica Neue", Arial, sans-serif;

	--msite-max: 1580px;
	--msite-marge: 50px;
	--msite-hero-rayon: 17px;

	/* Largeur minimale d'un représentant : photo + gouttière + cartouche.
	   En dessous, la grille repasse sur une colonne au lieu de déborder. */
	--msite-photo-largeur: 36%;
	--msite-rep-min: 290px;
	--msite-rep-photo: 96px;
}


/* Volontairement limité aux éléments du plugin : un « .msite * » global
   retomberait sur le conteneur du thème et fausserait sa largeur calculée. */
.msite,
[class^="msite-"],
[class*=" msite-"],
[class^="msite-"]::before,
[class^="msite-"]::after,
[class*=" msite-"]::before,
[class*=" msite-"]::after {
	box-sizing: border-box;
}

/* ============================== Bandeau rouge =========================== */

.msite-hero {
	background: var(--msite-rouge);
	border-radius: var(--msite-hero-rayon);
	margin: 0 var(--msite-marge);
	padding: 60px 30px;
	overflow: hidden;
	position: relative;
}

/* Motif décoratif optionnel : déposez l'export du calque « pattern » et
   décommentez, il se place en haut à droite comme dans la maquette.
.msite-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 519px;
	height: 229px;
	background: url( "../img/hero-pattern.svg" ) no-repeat top right / contain;
	pointer-events: none;
}
*/

.msite-hero__inner {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 15px !important;
	width: 100%;
	max-width: var(--msite-max);
	margin: 0 auto;
}

.msite-hero__eyebrow {
	margin: 0 !important;
	padding: 0 !important;
}

.msite-hero__eyebrow span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px;
	border-radius: 5px;
	background: var(--msite-blanc);
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-titre) !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: normal !important;
	text-transform: uppercase;
	letter-spacing: 0 !important;
}

/* Souligné biseauté : image fournie, aux dimensions de la maquette.
   La marge basse est remise à zéro car Salient en pose une d'office sur
   toutes les images. */
.msite-hero__rule,
.msite-elus__rule {
	display: block;
	width: 90px;
	height: auto;
	max-width: 90px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	transform: none !important;
	vertical-align: top;
}

.msite-hero__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-blanc) !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 900 !important;
	font-size: 25px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-align: center;
	text-transform: none !important;
}

/* Réseaux sociaux : les icônes du pied de page, sous le titre. */
.msite-reseaux {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
	margin: 5px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.msite-reseaux__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.msite-reseaux__item::before {
	content: none !important;
}

.msite-reseau {
	display: inline-flex !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	/* Fond blanc sous les découpes transparentes des icônes (le « f », etc.).
	   Légèrement en retrait du bord pour ne pas laisser de liseré blanc
	   autour du rond noir. */
	background: radial-gradient( circle closest-side, var(--msite-blanc) 95%, transparent 96% ) !important;
	line-height: 0 !important;
	text-decoration: none !important;
	transition: transform 0.2s ease;
}

.msite-reseau:hover,
.msite-reseau:focus-visible {
	transform: translateY( -2px );
}

.msite-reseau:focus-visible {
	outline: 2px solid var(--msite-blanc);
	outline-offset: 2px;
}

/* Marge et ombre remises à zéro : Salient en pose d'office sur les images. */
.msite-reseau__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ============================ Bloc représentants ======================== */

.msite-elus {
	margin: 75px 0;
}

.msite-elus__inner {
	width: 100%;
	max-width: var(--msite-max);
	margin: 0 auto;
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: center;
	gap: 50px;
	margin: 0 !important;
	padding: 75px !important;
	border: 1px solid var(--msite-jaune);
	border-radius: 20px;
	background: var(--msite-blanc);
}

.msite-elus__photo {
	flex: 0 0 var(--msite-photo-largeur);
	width: var(--msite-photo-largeur);
	max-width: var(--msite-photo-largeur);
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: var(--msite-photo-ratio);
}

.msite-elus__photo img,
.msite-elus__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msite-elus__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: 70px !important;
	margin: 0 !important;
	padding: 15px 0 !important;
	align-self: stretch;
}

.msite-elus__heading {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	align-items: flex-start;
	margin: 0 !important;
	padding: 0 !important;
}

.msite-elus__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-titre) !important;
	font-weight: 400 !important;
	font-size: 20px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
}

.msite-elus__subtitle {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
}

/* Celui du bloc représentants est plus court. */
.msite-elus__rule {
	width: 67px;
	max-width: 67px;
}

/* ============================== Représentants =========================== */

.msite-reps {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, var(--msite-rep-min) ), 1fr ) ) !important;
	gap: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.msite-rep {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 15px !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.msite-rep::before,
.msite-rep::after,
.msite-reps::before,
.msite-reps::after {
	content: none !important;
	display: none !important;
}

.msite-rep__photo {
	display: block !important;
	flex: 0 0 var(--msite-rep-photo) !important;
	width: var(--msite-rep-photo) !important;
	height: var(--msite-rep-photo) !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	overflow: hidden;
	background: rgba( 33, 37, 41, 0.06 );
}

.msite-rep__photo img,
.msite-rep__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.msite-rep__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
	align-items: flex-start !important;
	flex: 1 1 auto;
	min-width: 0;
}

.msite-rep__name {
	display: block;
	margin: 0 !important;
	color: #000 !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	word-break: break-word;
}

/* Un représentant avec e-mail prend toute la largeur : une adresse longue
   ne tient pas dans une demi-colonne et se casserait en escalier. */
.msite-rep:has( .msite-cartouche--mail ) {
	grid-column: 1 / -1;
}

/* ------------------------- Cartouches tél. / e-mail ---------------------- */
/* Composants Figma 287:2430 (tél) et 287:2436 (e-mail).
   La cartouche s'ajuste à son contenu : elle ne s'étire pas sur la largeur. */

.msite-rep__contacts {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0;
}

.msite-cartouche {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center;
	gap: var( --msite-cartouche-gap, 10px ) !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: var( --msite-cartouche-padding, 10px ) !important;
	border: 1px solid var(--msite-jaune) !important;
	border-radius: 5px !important;
	background: var(--msite-blanc) !important;
	color: #000 !important;
	text-decoration: none !important;
	transition: gap 0.2s ease, padding 0.2s ease;
}

/* Survol : « Variante2 » des composants 287:2430 et 287:2436.
   La gouttière passe de 10 à 6 px et le padding horizontal de 10 à 12 :
   30 px de chrome dans les deux cas, donc aucun changement de largeur. */
.msite-cartouche:hover,
.msite-cartouche:focus-visible {
	--msite-cartouche-gap: 6px;
	--msite-cartouche-padding: 10px 12px;
	background: var(--msite-blanc) !important;
	border-color: var(--msite-jaune) !important;
	color: #000 !important;
	text-decoration: none !important;
}

.msite-cartouche__icon {
	display: inline-flex !important;
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	line-height: 0;
}

.msite-cartouche__label {
	font-family: var(--msite-font-corps) !important;
	letter-spacing: 0 !important;
	min-width: 0;
}

/* Téléphone : Mona Sans SemiBold 20 px, jamais coupé. */
.msite-cartouche--tel .msite-cartouche__label {
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: normal !important;
	white-space: nowrap;
}

/* E-mail : Mona Sans Medium 16 px. Les adresses longues peuvent passer
   à la ligne plutôt que déborder de la carte. */
.msite-cartouche--mail .msite-cartouche__label {
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.msite-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ================================ Contenu =============================== */

.msite-contenu {
	max-width: var(--msite-max);
	margin: 0 auto 75px;
}

.msite-contenu__inner {
	max-width: 800px;
	margin: 0 auto;
	font-family: var(--msite-font-corps);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--msite-noir);
}

/* =============================== Responsive ============================= */
/* Le point de bascule dépend de la place réelle, pas d'une largeur d'écran :
   photo 574 + gouttière 125 + colonne représentants ~700 = 1400 minimum.
   En dessous, la photo passe au-dessus du texte. */

@media only screen and (max-width: 1500px) {


	.msite-elus__inner {
		gap: 70px;
		padding: 60px !important;
	}

	.msite-elus__content {
		gap: 50px !important;
	}
}

@media only screen and (max-width: 1200px) {
	.msite {
		--msite-photo-largeur: 100%;
		--msite-marge: 30px;
	}

	.msite-elus__inner {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 40px;
		padding: 50px !important;
	}

	.msite-elus__photo {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none !important;
	}

	.msite-elus__content {
		gap: 40px !important;
		padding: 0 !important;
		align-self: auto;
	}
}

@media only screen and (max-width: 782px) {
	.msite {
		--msite-marge: 20px;
		--msite-rep-photo: 96px;
		--msite-rep-min: 280px;
	}

	.msite-elus {
		margin: 40px 0;
	}

	.msite-elus__inner {
		padding: 30px !important;
		border-radius: 14px;
	}

	.msite-reps {
		gap: 30px !important;
	}

	.msite-hero {
		padding: 40px 20px;
		--msite-hero-rayon: 12px;
	}

	.msite-hero__eyebrow span {
		font-size: 18px !important;
		padding: 10px;
		text-align: center;
	}

	.msite-hero__title {
		font-size: 22px !important;
	}
}

/* Très petits écrans : la cartouche passe sous la photo plutôt que de
   comprimer le nom sur trois lignes. */
@media only screen and (max-width: 480px) {
	.msite {
		--msite-rep-photo: 80px;
	}

	.msite-elus__inner {
		padding: 20px !important;
	}

	.msite-rep__body {
		flex: 1 1 100%;
	}

	.msite-cartouche--tel .msite-cartouche__label {
		font-size: 18px !important;
	}

	.msite-cartouche--mail .msite-cartouche__label {
		font-size: 15px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msite-cartouche {
		transition: none;
	}
}

/* ==================== Section « Les publications en lien » ============== */
/* Les cartes elles-mêmes sont stylées par le module CGT Publications ;
   cette section n'apporte que son titre, sa grille et son bouton. */

.msite-pubs {
	margin: 0 0 75px;
}

.msite-pubs__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: var(--msite-max);
	margin: 0 auto;
}

.msite-pubs__titre {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px;
	width: 100%;
	text-align: center;
}

.msite-pubs__h2 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-titre) !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-align: center;
}

.msite-pubs__sous-titre {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: center;
}

.msite-pubs__corps {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 50px;
	width: 100%;
}

/* Gouttière de 60 px, propre à cette section : la grille de publications
   en utilise 40 ailleurs. Le nombre de colonnes est imposé ici et ne suit
   plus la variable du module, qui remonte à 2 dès 1100 px.

   Sous quatre publications, la grille se resserre au nombre réel et se
   centre, plutôt que d'étirer les cartes ou de laisser un vide en bout de
   ligne. La largeur d'une carte est plafonnée pour la même raison. */
.msite-pubs__grille {
	--cgt-p-gap: 60px;
	--msite-carte-max: 350px;

	width: 100%;
	justify-content: center;
}

.msite-pubs__grille--4 { grid-template-columns: repeat( 4, minmax( 0, var(--msite-carte-max) ) ) !important; }
.msite-pubs__grille--3 { grid-template-columns: repeat( 3, minmax( 0, var(--msite-carte-max) ) ) !important; }
.msite-pubs__grille--2 { grid-template-columns: repeat( 2, minmax( 0, var(--msite-carte-max) ) ) !important; }
.msite-pubs__grille--1 { grid-template-columns: minmax( 0, var(--msite-carte-max) ) !important; }

.msite-pubs__bouton {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px 20px !important;
	border-radius: 8px;
	background: var(--msite-noir) !important;
	color: #fff !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

/* Survol : passage au rouge clair, comme les onglets du composant Sites. */
.msite-pubs__bouton:hover,
.msite-pubs__bouton:focus-visible {
	background: #ff1a4b !important;
	color: #fff !important;
	text-decoration: none !important;
}

@media only screen and (max-width: 1300px) {
	.msite-pubs__inner {
		gap: 40px;
	}


	/* Plafond à 3 colonnes. */
	.msite-pubs__grille {
		--cgt-p-gap: 40px;
	}

	.msite-pubs__grille--4 {
		grid-template-columns: repeat( 3, minmax( 0, var(--msite-carte-max) ) ) !important;
	}

	/* 4 cartes sur 3 colonnes : la dernière est orpheline, on la centre. */
	.msite-pubs__grille--4 .cgt-pub:last-child:nth-child( 3n + 1 ) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: var(--msite-carte-max);
	}
}

@media only screen and (max-width: 999px) {
	/* Plafond à 2 colonnes. */
	.msite-pubs__grille {
		--cgt-p-gap: 30px;
	}

	.msite-pubs__grille--4,
	.msite-pubs__grille--3 {
		grid-template-columns: repeat( 2, minmax( 0, var(--msite-carte-max) ) ) !important;
	}

	/* Sur deux colonnes, quatre cartes forment deux lignes pleines : la
	   règle d'orphelin du palier précédent ne s'applique plus. */
	.msite-pubs__grille--4 .cgt-pub:last-child:nth-child( 3n + 1 ) {
		grid-column: auto;
		justify-self: stretch;
		max-width: none;
	}

	.msite-pubs__grille--3 .cgt-pub:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: var(--msite-carte-max);
	}
}

@media only screen and (max-width: 690px) {
	.msite-pubs__grille {
		--cgt-p-gap: 25px;
	}

	.msite-pubs__grille--4,
	.msite-pubs__grille--3,
	.msite-pubs__grille--2,
	.msite-pubs__grille--1 {
		grid-template-columns: minmax( 0, var(--msite-carte-max) ) !important;
	}
}

@media only screen and (max-width: 782px) {
	.msite-pubs {
		margin-bottom: 50px;
	}

	.msite-pubs__inner {
		gap: 35px;
	}

	.msite-pubs__corps {
		gap: 35px;
	}

	.msite-pubs__h2 {
		font-size: 18px !important;
	}
}

/* ====================== Section « Les accords en lien » ================= */
/* Figma 294:2423 : coquille beige, deux cartes sur 902 px, bouton jaune. */

.msite-accords {
	--msite-acc-coquille: #fcf9f0;
	--msite-acc-largeur: 902px;

	margin: 0 0 50px;
}

.msite-accords__coquille {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: var(--msite-max);
	margin: 0 auto;
	padding: 75px 30px !important;
	border-radius: 20px;
	background: var(--msite-acc-coquille);
}

.msite-accords__titre {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px;
	width: 100%;
	text-align: center;
}

.msite-accords__h2 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-titre) !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-align: center;
}

.msite-accords__sous-titre {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: center;
}

.msite-accords__corps {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: var(--msite-acc-largeur);
}

/* Deux cartes, gouttière 60. Un seul accord occupe une colonne centrée. */
.msite-accords__grille {
	--cgt-p-gap: 60px;
	--msite-carte-max: 420px;

	width: 100%;
	justify-content: center;
}

.msite-accords__grille--2 { grid-template-columns: repeat( 2, minmax( 0, var(--msite-carte-max) ) ) !important; }
.msite-accords__grille--1 { grid-template-columns: minmax( 0, var(--msite-carte-max) ) !important; }

/* ------------------------------ Bouton jaune ---------------------------- */

.msite-accords__bouton {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px 20px !important;
	border-radius: 8px;
	background: var(--msite-jaune) !important;
	color: var(--msite-noir) !important;
	font-family: var(--msite-font-corps) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.msite-accords__bouton:hover,
.msite-accords__bouton:focus-visible {
	background: var(--msite-noir) !important;
	color: #fff !important;
	text-decoration: none !important;
}

@media only screen and (max-width: 999px) {
	.msite-accords__coquille {
		gap: 40px;
		padding: 50px 25px !important;
	}

	.msite-accords__corps {
		gap: 40px;
	}

	.msite-accords__grille {
		--cgt-p-gap: 30px;
	}
}

@media only screen and (max-width: 690px) {
	.msite-accords {
		margin-bottom: 35px;
	}

	.msite-accords__coquille {
		gap: 30px;
		padding: 35px 20px !important;
		border-radius: 14px;
	}

	.msite-accords__h2 {
		font-size: 18px !important;
	}

	.msite-accords__grille {
		--cgt-p-gap: 25px;
	}

	.msite-accords__grille--2,
	.msite-accords__grille--1 {
		grid-template-columns: minmax( 0, var(--msite-carte-max) ) !important;
	}

	.msite-accords__bouton {
		white-space: normal;
		text-align: center;
	}
}