/* Sections de gamme — onglets et contenu SEO.
   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. */

.mc-onglets,
.mc-seo {
	--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. Onglets de gamme
   ------------------------------------------------------------------ */

.mc-onglets__barre {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--mc-border);
}

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

.mc-onglets__bouton {
	flex: 0 0 auto;
	padding: 12px 20px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--mc-dark);
	cursor: pointer;
	transition: color var(--mc-ease), border-color var(--mc-ease);
}

.mc-onglets__bouton:hover {
	color: var(--mc-gold);
}

.mc-onglets__bouton[aria-selected="true"] {
	color: var(--mc-gold);
	border-bottom-color: var(--mc-gold);
}

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

.mc-onglets__panneau {
	padding-top: 24px;
}

.mc-onglets__panneau[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
   1 bis. Les tableaux rédigés à la main
   ------------------------------------------------------------------

   LE DÉFILEMENT APPARTIENT AU CONTENEUR, JAMAIS AU TABLEAU.

   La règle précédente posait display:block sur le <table> lui-même
   pour le faire défiler. Un tableau en display:block n'est plus un
   tableau : les colonnes cessent d'être calculées ensemble, les
   intitulés se tassent et le texte se casse n'importe où. Relevé en
   capture le 30/09 sur l'onglet Caractéristiques de la gamme CERRO.

   C'est la troisième fois aujourd'hui que changer le display d'un
   élément de tableau le casse — après la cellule du tableau des
   références et sa ligne. La règle vaut donc d'être écrite une fois
   pour toutes : on ne touche pas au display d'un <table>, <tr>, <th>
   ou <td> ; le défilement, la mise en page et les marges se posent sur
   une boîte AUTOUR.

   Ces tableaux viennent d'un champ wysiwyg : leur balisage n'est pas
   maîtrisé, souvent sans <thead>, parfois avec des attributs width
   hérités d'un ancien éditeur. L'habillage porte donc sur les
   éléments eux-mêmes, sans supposer de structure. */

.mc-onglets__panneau {
	overflow-x: auto;
}

.mc-onglets__panneau table {
	width: 100%;
	min-width: 640px;
	margin: 8px 0 20px;
	border-collapse: collapse;
	font-size: 0.875rem;
	/* Un width="600" hérité de l'éditeur ne doit pas primer. */
	table-layout: auto;
}

.mc-onglets__panneau th,
.mc-onglets__panneau td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--mc-filet, rgba(77, 77, 77, 0.16));
	/* Les valeurs courtes — « 8,67 », « NC » — ne doivent pas se
	   casser sur deux lignes dans une colonne étroite. */
	overflow-wrap: break-word;
}

.mc-onglets__panneau th,
.mc-onglets__panneau tr:first-child td strong,
.mc-onglets__panneau thead td {
	font-weight: 700;
	background: var(--mc-fond-doux, #FAFAFA);
}

.mc-onglets__panneau tbody tr:nth-child(even) td {
	background: rgba(0, 0, 0, 0.015);
}

.mc-onglets__panneau table p {
	margin: 0;
}

/* Le premier colonne porte les codes référence : ils gardent l'or,
   comme dans le tableau généré juste au-dessus. */
.mc-onglets__panneau td:first-child {
	white-space: nowrap;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   2. Contenu SEO
   ------------------------------------------------------------------ */

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

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

/* ==================================================================
   LA FRISE DES DATES CLÉS
   ==================================================================
   Un rail vertical, les entrées de part et d'autre, une pastille sur le
   rail à chaque date, et les entrées qui se révèlent à la lecture.

   CE QU'ELLE EMPRUNTE AU SITE PLUTÔT QU'À UNE MODE. L'année est posée
   dans la MÊME pastille que la sous-navigation d'ancres — filet d'un
   pixel, rayon de 100 px — et le fait dans le MÊME cadre que les cartes
   — filet, rayon de 12 px. Rien n'est dessiné pour l'occasion : une
   frise qui invente ses formes fait une page de plus dans le site, pas
   une section de plus dans la page.

   SANS OMBRE, VOLONTAIREMENT. Le cadre d'une carte porte une ombre
   parce qu'une carte se clique et se soulève. Un fait daté ne mène
   nulle part ; il garde le filet et laisse l'ombre — c'est la leçon des
   fausses cartes de Formations, relevée le matin même.

   EN <ol>, PAS EN <div>. Une frise est une suite ordonnée : un lecteur
   d'écran doit l'annoncer comme telle et dire « 3 sur 12 ». Les puces
   et les compteurs sont retirés des deux façons possibles — list-style
   et ::marker — parce que selon le thème c'est l'un ou l'autre qui les
   fait apparaître. Le sens reste, le numéro part.

   LE RAIL EST UN ::before DU <ol>, ET NON UNE BORDURE D'ITEM. Une
   bordure par item laisse un cheveu blanc entre deux entrées là où les
   marges se rejoignent ; un trait unique ne peut pas se briser. */

.mc-frise {
	position: relative;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.mc-frise > li::marker,
.mc-frise > li::before {
	content: none;
}

.mc-frise::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--mc-bord, #ECECEC);
}

.mc-frise__item {
	position: relative;
	box-sizing: border-box;
	width: 50%;
	padding: 0 0 26px;
}

.mc-frise__item--gauche {
	padding-right: 44px;
	text-align: right;
}

.mc-frise__item--droite {
	margin-left: 50%;
	padding-left: 44px;
}

/* La pastille du rail est posée au bord de l'item : à droite pour une
   entrée de gauche, à gauche pour une entrée de droite. Le halo blanc
   découpe le trait proprement derrière elle. */
.mc-frise__point {
	position: absolute;
	top: 10px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--mc-or, #D5AE05);
	box-shadow: 0 0 0 4px #FFFFFF;
}

.mc-frise__item--gauche .mc-frise__point {
	right: -5.5px;
}

.mc-frise__item--droite .mc-frise__point {
	left: -5.5px;
}

.mc-frise__bloc {
	padding: 16px 20px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
}

/* L'année en pastille — celle de la sous-navigation, au mot près. */
.mc-frise__annee {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 14px;
	border: 1px solid var(--mc-gris-clair, #9BA1A6);
	border-radius: 100px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mc-or, #D5AE05);
}

.mc-frise__fait {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--mc-gris, #6E757C);
}

/* ------------------------------------------------------------------
   L'ARRIVÉE À LA LECTURE
   ------------------------------------------------------------------
   L'état masqué n'est posé QUE par le script, en style direct. Sans
   JavaScript, sans observateur, ou si le script échoue, les blocs
   s'affichent entiers : une animation qui cache le contenu quand elle
   ne se déclenche pas est pire que pas d'animation du tout.

   POURQUOI UN VOLET, ET NI UN FONDU NI UN GLISSEMENT.
   Les deux réflexes — opacity et transform — ne marchent pas sur ce
   site. Mesuré le 05/10 sur /presentation/ : une règle « opacity:0
   !important » laisse l'opacité calculée à 1, et une translation de
   16 px ressort en matrice identité. Divi Pixel, dont le système
   d'animation est actif (classe dipi-anim-preload sur le <body>),
   remet ces deux propriétés à zéro depuis un @layer — et une
   déclaration importante dans un layer l'emporte sur une déclaration
   importante hors layer.

   clip-path, lui, passe : vérifié dans le même temps. La frise se
   découvre donc par un volet qui s'ouvre vers le bas — le dessin qui
   restait disponible, et qui va bien à une frise : le temps se déroule.

   LA MÊME APPARITION SERT TOUS LES BLOCS DU SITE — cartes, repères,
   chiffres, visages, entrées de frise. La classe mc-apparition est
   posée par le script sur ce qu'il arme, et la durée vit ici, une fois.

   LE MASQUE EST POSÉ ET RETIRÉ PAR LE SCRIPT, EN STYLE DIRECT, ET LA
   FEUILLE NE GARDE QUE LA DURÉE. Écrit en CSS, le masque s'appliquait
   bien, mais la règle qui le retire — un sélecteur pourtant plus
   précis — restait sans effet : la frise serait restée invisible, ce
   qui est exactement l'accident qu'une animation d'agrément ne doit
   jamais provoquer. Une main qui pose un masque doit pouvoir le
   retirer ; les deux gestes sont donc au même endroit, dans
   sections-vides.js. */

.mc-apparition {
	transition: clip-path 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {

	.mc-apparition {
		transition: none;
	}
}

/* Sous 900 px, deux colonnes de 50 % donnent des blocs de deux mots de
   large. La frise passe en une colonne, rail à gauche, et le texte
   reprend son alignement normal. */
@media (max-width: 900px) {

	.mc-frise::before {
		left: 5px;
		margin-left: 0;
	}

	.mc-frise__item,
	.mc-frise__item--gauche,
	.mc-frise__item--droite {
		width: 100%;
		margin-left: 0;
		padding: 0 0 20px 28px;
		text-align: left;
	}

	.mc-frise__item--gauche .mc-frise__point,
	.mc-frise__item--droite .mc-frise__point {
		right: auto;
		left: 0;
	}
}

.mc-sec-sombre .mc-frise::before {
	background: rgba(255, 255, 255, 0.14);
}

.mc-sec-sombre .mc-frise__point {
	box-shadow: 0 0 0 4px #262420;
}

.mc-sec-sombre .mc-frise__bloc {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.045);
}

.mc-sec-sombre .mc-frise__fait {
	color: #B9B4A6;
}