/* Sections de la page Référence produit — Metaconcept Core.
   Charte metaconcept : OR #D5AE05, GRIS FONCÉ #4D4D4D. Les tokens du site
   (--c-link, --c-base) priment ; les valeurs de charte sont le repli.
   Aucune règle ne cible un sélecteur Divi : ce fichier survit au passage
   en Divi 5. */

.mc-subnav,
.mc-app-grid {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-border: rgba(77, 77, 77, 0.16);
	--mc-ease: 0.18s ease;
}

/* ------------------------------------------------------------------
   1. Sous-navigation ancrée
   ------------------------------------------------------------------ */

.mc-subnav {
	position: sticky;
	top: var(--mc-subnav-offset, 180px);
	z-index: 20;
	background: #fff;
	border-top: 1px solid var(--mc-border);
	border-bottom: 1px solid var(--mc-border);
}

.mc-subnav__inner {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mc-subnav__inner::-webkit-scrollbar {
	display: none;
}

.mc-subnav__link {
	flex: 0 0 auto;
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mc-dark);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color var(--mc-ease), border-color var(--mc-ease);
}

.mc-subnav__link:hover,
.mc-subnav__link:focus-visible,
.mc-subnav__link[aria-current="true"] {
	color: var(--mc-gold);
	border-bottom-color: var(--mc-gold);
}

.mc-subnav__link:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: -2px;
}

/* LE DÉGAGEMENT DES ANCRES A DÉMÉNAGÉ — 05/10.
   La règle vivait ici, sur « .mc-subnav ~ * [id] », avec 180 px écrits
   au jugé. Deux défauts : le sélecteur exigeait que la cible soit sœur
   ou nièce de la sous-navigation, ce que la structure de Divi ne garantit
   pas — mesuré sur la page Formations, scroll-margin-top valait 0 sur
   toutes les ancres ; et la hauteur à dégager n'est pas une constante,
   elle dépend de la barre d'administration et de l'écran.
   Elle est désormais mesurée par sections-vides.js et consommée dans
   composants.css, qui part sur toutes les pages — y compris celles qui
   ont des ancres sans sous-navigation. Rien à remettre ici. */

/* ------------------------------------------------------------------
   2. Cartes d'applications
   ------------------------------------------------------------------ */

.mc-app-grid {
	display: grid;
	/* Trois colonnes fixes et non un auto-fill : la maquette pose une
	   grille de trois, et l'auto-fill en mettait six sur un grand écran,
	   ce qui réduisait chaque carte à une étiquette. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.mc-app-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--mc-border);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color var(--mc-ease), transform var(--mc-ease), box-shadow var(--mc-ease);
}

.mc-app-card:hover,
.mc-app-card:focus-visible {
	border-color: var(--mc-gold);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(77, 77, 77, 0.10);
}

.mc-app-card:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

.mc-app-card__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mc-dark);
}

.mc-app-card:hover .mc-app-card__title,
.mc-app-card:focus-visible .mc-app-card__title {
	color: var(--mc-gold);
}

.mc-app-card__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--mc-dark);
	opacity: 0.75;
}

/* ------------------------------------------------------------------
   Confort de lecture sur petit écran
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.mc-subnav__link {
		padding: 12px 14px;
		font-size: 13px;
	}

	.mc-app-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-subnav__link,
	.mc-app-card {
		transition: none;
	}

	.mc-app-card:hover,
	.mc-app-card:focus-visible {
		transform: none;
	}
}

/* ==================================================================
   TABLEAU DE CARACTÉRISTIQUES — [mc_caracs]
   ==================================================================
   Une liste de définitions plutôt qu'un <table> : ce sont des paires
   libellé/valeur, pas des données à deux dimensions. Un lecteur d'écran
   annonce le libellé avant la valeur sans qu'on ait à décrire de
   colonnes, et la grille se replie toute seule sur un téléphone.
   ================================================================== */

.mc-caracs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	/* La maquette en fait une carte encadrée, pas une liste posée sur le
	   fond de page : c'est ce qui la détache du texte autour et la rend
	   lisible d'un coup d'œil. Largeur bornée — un tableau de sept lignes
	   étiré sur 1 600 px sépare le libellé de sa valeur d'un demi-écran. */
	max-width: 720px;
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 12px;
	overflow: hidden;
}

.mc-caracs__ligne {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid #ECECEC;
	align-items: baseline;
}

.mc-caracs__ligne:last-child {
	border-bottom: 0;
}

.mc-caracs__ligne:nth-child(even) {
	background: #FAFAFA;
}

.mc-caracs__cle {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #4D4D4D;
}

.mc-caracs__valeur {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: #333333;
	text-align: right;
	overflow-wrap: anywhere;
}

.mc-caracs__valeur p { margin: 0 0 6px; }
.mc-caracs__valeur p:last-child { margin-bottom: 0; }

.mc-caracs__titre {
	margin: 0 0 18px;
	font-size: 26px;
	font-weight: 700;
	color: #4D4D4D;
	letter-spacing: -0.01em;
}

@media (max-width: 640px) {
	/* Sous 640 px, deux colonnes laissent une quinzaine de caractères à
	   la valeur : on empile. */
	.mc-caracs__ligne {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}


/* ==================================================================
   6. Densité verticale des sections de fiche
   ==================================================================

   Mesuré le 30/09 sur FE051726 : entre deux blocs de contenu, Divi
   empile 72 px de section en bas, 36 px de ligne en bas, 36 px de ligne
   en haut et 72 px de section en haut — 216 px de blanc pour séparer un
   tableau d'une grille de cartes. La maquette en pose 80.

   On garde l'air de la SECTION, on retire celui de la LIGNE, qui fait
   double emploi. La règle est ancrée sur .mc-ancre — notre propre
   composant — et ne peut donc pas atteindre une section qui ne vient pas
   du plugin, quel que soit le gabarit.
   ================================================================== */

#main-content .et_pb_section:has(.mc-ancre) {
	padding-top: 48px;
	padding-bottom: 48px;
}

#main-content .et_pb_section:has(.mc-ancre) .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

/* La barre d'ancres se colle sous l'en-tête : elle n'a pas besoin de
   respirer autant qu'une section de contenu. */
#main-content .et_pb_section:has(.mc-subnav) {
	padding-top: 0;
	padding-bottom: 0;
}

#main-content .et_pb_section:has(.mc-subnav) .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 980px) {

	.mc-app-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {

	.mc-app-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mc-caracs__ligne {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.mc-caracs__valeur {
		text-align: left;
	}
}

/* ------------------------------------------------------------------
   Description technique — texte à gauche, specs à droite
   ------------------------------------------------------------------
   .mc-desc vit dans le socle (la grille) ; ici seulement la typographie
   de la colonne de texte. Le tableau garde sa largeur maximale : au-delà
   de 380 px, l'écart entre la clé et la valeur devient un couloir. */

.mc-desc__sous-titre {
	margin: 0 0 6px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--c-base, #4D4D4D);
}

.mc-desc__sous-titre + .mc-desc__p {
	margin-top: 0;
}

.mc-desc__p {
	margin: 0 0 22px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-base, #4D4D4D);
}

.mc-desc__p:last-child {
	margin-bottom: 0;
}

.mc-desc__specs .mc-caracs {
	max-width: none;
}

/* Le contenu rédigé de la fiche, à droite du tableau. */
.mc-desc__texte .mc-contenu {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-base, #4D4D4D);
}

.mc-desc__texte .mc-contenu > :first-child {
	margin-top: 0;
}

.mc-desc__texte .mc-contenu > :last-child {
	margin-bottom: 0;
}

.mc-desc__texte .mc-contenu h2,
.mc-desc__texte .mc-contenu h3 {
	margin: 26px 0 8px;
	font-size: 1.0625rem;
	font-weight: 700;
}

/* ==================================================================
   [mc_devis_reference] — LA VOIE DIRECTE VERS LE DEVIS — 19/10
   ==================================================================

   Posée entre Applications et Documentation. Elle ne remplace pas le
   panier : elle ouvre une seconde porte pour qui ne veut demander un
   prix que sur CETTE référence.

   AUCUNE MISE EN PAGE N'EST ÉCRITE ICI — révision du 19/10. La première
   version dessinait sa propre section sur une colonne. Elle délègue
   désormais à [mc_bloc_devis], qui sait déjà poser l'équipe à gauche et
   le formulaire à droite : tout le style vient de bloc-devis.css, et il
   n'y a qu'un seul endroit à corriger le jour où cette allure change.

   Ne reste ici que l'avertissement destiné aux administrateurs, qui
   n'appartient à aucune des deux feuilles. */

.mc-devis-ref__absent {
	padding: 14px 16px;
	border: 1px dashed var(--mc-filet, rgba(77, 77, 77, 0.16));
	border-radius: var(--mc-rayon-carte, 12px);
	font-size: 0.875rem;
}