/* -------------------------------------------------------------------------
   Modale « Les niveaux, en clair »

   Elle porte son propre style plutot que de compter sur celui de la page :
   elle parait sur l'agenda, sur les fiches et partout ou une jauge se clique,
   y compris sur des pages qui ne chargent pas socle.css. Les variables sont
   donc toutes ecrites avec une valeur de repli.

   Boite centree au-dessus de 760 px, feuille remontee du bas en dessous : sur
   un telephone, une boite centree oblige a viser une croix minuscule au milieu
   de l'ecran, quand une feuille se pousse du pouce.
   ------------------------------------------------------------------------- */

.exo2-niv[hidden] { display: none; }
.exo2-niv {
	position: fixed; inset: 0; z-index: 1200;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.exo2-niv-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }

.exo2-niv-boite {
	position: relative;
	width: min(760px, 100%); max-height: calc(100vh - 48px);
	overflow-y: auto; overscroll-behavior: contain;
	padding: 30px 32px 26px;
	background: var(--exo2-carte, #1f1f1f);
	color: var(--exo2-texte, rgba(255, 255, 255, .86));
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
	border-radius: 10px;
}

.exo2-niv-croix {
	position: absolute; top: 12px; right: 14px;
	width: 34px; height: 34px; padding: 0;
	background: none; border: 0; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--exo2-meta, #9a9a9a);
}
.exo2-niv-croix:hover { color: #fff; }

.exo2-niv-titre {
	margin: 0 0 20px;
	font: italic 700 24px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: .04em; text-transform: uppercase; color: #fff;
}

/* ---------- les deux onglets ---------- */
.exo2-niv-onglets {
	display: flex; gap: 0; margin-bottom: 22px;
	border-bottom: 1px solid var(--exo2-ligne, rgba(255, 255, 255, .12));
}
.exo2-niv-onglet {
	padding: 10px 20px 12px; margin-bottom: -1px;
	background: none; border: 0; border-bottom: 2px solid transparent;
	font: italic 700 13px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--exo2-meta, #9a9a9a); cursor: pointer;
}
.exo2-niv-onglet:hover { color: #fff; }
.exo2-niv-onglet.exo2-niv-on { color: #fff; border-bottom-color: var(--exo2-corail, #f56d52); }

/* ---------- la jauge devenue selecteur ---------- */
/*
 * Ce sont les rectangles des cartes, en plus grand et cliquables. Le
 * remplissage suit le meme principe : une variable par rectangle, pleine ou
 * vide. On ne redessine pas une jauge, on rend celle-ci utilisable.
 */
.exo2-niv-choix { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.exo2-niv-palier {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	background: none; cursor: pointer;
	border: 1px solid var(--exo2-ligne, rgba(255, 255, 255, .12));
	border-radius: 4px;
	color: var(--exo2-meta, #9a9a9a);
}
.exo2-niv-palier:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.exo2-niv-palier.exo2-niv-on {
	border-color: var(--exo2-corail, #f56d52);
	background: rgba(245, 109, 82, .1);
	color: #fff;
}
.exo2-niv-num {
	font: italic 700 15px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
}
.exo2-niv-palier .exo2-jauge-barres { display: inline-flex; gap: 3px; }
.exo2-niv-palier .exo2-jauge-barres i {
	display: block; width: 16px; height: 7px; border-radius: 1.5px;
	background: linear-gradient(to right,
		var(--exo2-corail, #f56d52) calc(var(--p, 0) * 100%),
		#3a3a3a calc(var(--p, 0) * 100%));
}

/* ---------- le contenu d'un palier ---------- */
.exo2-niv-media {
	margin: 0 0 18px; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 6px; background: #141414;
}
.exo2-niv-media img, .exo2-niv-media video {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

.exo2-niv-palier-titre {
	margin: 0 0 8px;
	font: italic 700 19px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.exo2-niv-texte { margin: 0 0 18px; font-size: 15.5px; line-height: 1.62; }

.exo2-niv-reperes {
	padding: 16px 18px; border-radius: 6px;
	background: var(--exo2-fond-profond, #141414);
	border-left: 3px solid var(--exo2-corail, #f56d52);
}
.exo2-niv-reperes .exo2-label { margin-bottom: 8px; }
.exo2-niv-reperes ul { margin: 0; padding-left: 18px; }
.exo2-niv-reperes li { margin: 4px 0; font-size: 14.5px; line-height: 1.5; }

/* L'encart E-bike : bleu, pour se distinguer du corail de la maison. */
.exo2-niv-ebike {
	margin: 16px 0 0; padding: 12px 16px; border-radius: 6px;
	background: rgba(74, 144, 217, .12);
	border-left: 3px solid #4a90d9;
	font-size: 14px; line-height: 1.5;
}

/* ---------- le pied ---------- */
.exo2-niv-pied {
	margin-top: 24px; padding-top: 18px;
	border-top: 1px solid var(--exo2-ligne, rgba(255, 255, 255, .12));
}
.exo2-niv-pied p { margin: 0 0 14px; font-size: 14px; color: var(--exo2-meta, #9a9a9a); }
.exo2-niv-pied small {
	display: block; margin-top: 8px;
	font-size: 12.5px; color: var(--exo2-meta, #9a9a9a);
}

/* ---------- la jauge des cartes, rendue cliquable ---------- */
/*
 * Une jauge qui ouvre la modale doit se voir cliquable : le curseur change et
 * elle s'eclaire au survol. Celles qui ne le sont pas - il n'y en a plus, mais
 * le jour ou - gardent l'apparence d'avant.
 */
.exo2 button.exo2-jauge {
	background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
	text-align: left;
}
.exo2 button.exo2-jauge:hover .exo2-jauge-nom { color: #fff; }
.exo2 button.exo2-jauge:focus-visible {
	outline: 2px solid var(--exo2-corail, #f56d52); outline-offset: 3px;
}

/* =========================================================================
   Telephone : la boite devient une feuille remontee du bas
   ========================================================================= */

@media (max-width: 759px) {
	.exo2-niv { padding: 0; align-items: flex-end; }
	.exo2-niv-boite {
		width: 100%; max-height: 88vh;
		padding: 26px 20px 22px;
		border-radius: 14px 14px 0 0;
	}
	.exo2-niv-titre { font-size: 20px; padding-right: 40px; }
	.exo2-niv-onglet { flex: 1; padding-left: 8px; padding-right: 8px; }
	.exo2-niv-choix { gap: 8px; }
	.exo2-niv-palier { padding: 8px 10px; gap: 8px; }
	.exo2-niv-palier .exo2-jauge-barres i { width: 12px; }
}

/* Moins d'animation demandee : la video ne tourne pas, sa couverture suffit. */
@media (prefers-reduced-motion: reduce) {
	.exo2-niv-media video { display: none; }
	.exo2-niv-media { background-size: cover; background-position: center; }
}

/* Un lien de texte qui ouvre la modale : il doit se lire comme un lien, pas
   comme un bouton egare au milieu d'un paragraphe. */
.exo2 button.exo2-lien-niveaux {
	padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
	color: var(--exo2-corail, #f56d52);
	text-decoration: underline; text-underline-offset: 3px;
}
.exo2 button.exo2-lien-niveaux:hover { color: #fff; }

/* -------------------------------------------------------------------------
   La page fixe des niveaux

   Meme contenu que la modale - le partial est partage - dans un autre
   habillage : tout est visible, chaque palier porte son ancre, et on parcourt
   la page du regard au lieu de cliquer un selecteur.
   ------------------------------------------------------------------------- */

/* Le chapeau porte sa position et son rembourrage : cette page n'a pas de
   carte a droite, donc pas de .exo2-hhero-grid, donc pas de z-index. */
.exo2-nivp-tete {
	position: relative; z-index: 2; width: 100%;
	padding-top: 150px; padding-bottom: 56px;
}
.exo2-nivp-tete .exo2-hhero-sub { max-width: 640px; }
.exo2-nivp-wrap { max-width: 900px; }

/* Les quatre paliers a la suite, chacun visible. */
.exo2-nivp-serie { display: grid; gap: 34px; }
.exo2-nivp .exo2-niv-contenu[hidden] { display: block; }

/*
 * L'ancre doit s'arreter SOUS l'en-tete collant, pas dessous.
 *
 * Un lien recu par e-mail qui pointe #technique-3 doit poser le palier 3 en
 * haut de l'ecran ; sans cette marge, l'en-tete transparent le recouvre.
 */
.exo2-nivp .exo2-niv-contenu { scroll-margin-top: 110px; }

/* Le rang du palier, en pastille devant son titre : sur une page ou les huit
   se suivent, il faut savoir lequel on lit. */
.exo2-nivp .exo2-niv-palier-titre {
	display: flex; align-items: center; gap: 12px; font-size: 21px;
}
.exo2-niv-palier-rang {
	display: grid; place-items: center; width: 32px; height: 32px; flex: none;
	border-radius: 50%; background-image: var(--exo2-degrade, linear-gradient(135deg, #f56d52, #d02144));
	font: italic 700 15px var(--exo2-police-titre, 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif);
	color: #fff;
}
/* Dans la modale, un seul palier est visible a la fois : la pastille y ferait
   doublon avec le selecteur juste au-dessus. */
.exo2-niv .exo2-niv-palier-rang { display: none; }

.exo2-nivp .exo2-niv-media { aspect-ratio: 16 / 9; margin-bottom: 20px; }

.exo2-nivp-final {
	display: flex; align-items: center; justify-content: space-between;
	gap: 30px; flex-wrap: wrap;
}
.exo2-nivp-final h2 { margin: 0 0 10px; }
.exo2-nivp-final p { margin: 0; max-width: 60ch; }
.exo2-nivp-note { margin-top: 10px !important; color: var(--exo2-meta, #9a9a9a); font-size: 14px; }
.exo2-nivp-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Le lien discret vers la page, dans le pied de la modale. */
.exo2-niv-page { display: block; margin-top: 12px; font-size: 13px; }
.exo2 .exo2-niv-page { color: var(--exo2-corail, #f56d52); }

@media (max-width: 960px) {
	.exo2-nivp-tete { padding-top: 96px; padding-bottom: 36px; }
	.exo2-nivp .exo2-niv-contenu { scroll-margin-top: 80px; }
}

@media (max-width: 639px) {
	.exo2-nivp-final { display: grid; }
	.exo2-nivp-actions .exo2-btn { width: 100%; }
}

/* La note du demi-niveau : une précision, pas un avertissement. */
.exo2-niv-demi {
	margin: 0 0 14px;
	font-size: 13px; line-height: 1.5; color: var(--exo2-meta);
	border-left: 2px solid var(--exo2-corail); padding-left: 11px;
}

.exo2-niv-demi[hidden] { display: none; }