/**
 * Page Cours de pilotage - ce qui n'appartient qu'à elle.
 *
 * Le design system (socle.css) et ce que les pages de rubrique partagent
 * (pages.css) sont chargés avant : les repères, les vignettes d'événement, la
 * galerie, la F.A.Q., la bande photo et les avis viennent de là. On trouve ici
 * la carte du prochain cours, les phrases du « pour qui », le programme, la
 * journée type et les niveaux.
 */

/* ---------- hero : le prochain cours à droite ---------- */
/* Le titre tient sur quatre lignes : sans un peu plus d'air en haut, le
   surtitre viendrait se glisser sous le menu. */
.exo2-pilo .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: end; padding-top: 180px; }
.exo2-pilo-arguments { display: grid; gap: 9px; margin-top: 22px; }
.exo2-pilo-arguments li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.exo2 .exo2-pilo-arguments .exo2-coche { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exo2-corail); }
.exo2-pilo .exo2-hhero-actions { margin-top: 24px; }

.exo2-pilo-prochain { padding: 26px 28px 28px; }
.exo2-pilo-prochain .exo2-h4 { margin: 6px 0 4px; }
.exo2-pilo-prochain-date { font-size: 15px; color: var(--exo2-texte); }
.exo2-pilo-prochain-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.exo2-pilo-prochain-meta span {
	font: 600 11px/1 var(--exo2-police); letter-spacing: .8px; text-transform: uppercase;
	color: var(--exo2-meta); padding: 6px 9px; box-shadow: var(--exo2-liseret);
}
.exo2-pilo-prix { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--exo2-ligne); }
.exo2-pilo-prix b { display: block; font: italic 700 42px/1 var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
.exo2-pilo-prix span { display: block; margin-top: 6px; font-size: 13px; color: var(--exo2-meta); }
.exo2-pilo-etat { margin-top: 12px; font: 600 12px var(--exo2-police); letter-spacing: .6px; text-transform: uppercase; color: var(--exo2-meta); }
.exo2 .exo2-pilo-etat.exo2-ev-ok { color: var(--exo2-corail); }
.exo2 .exo2-pilo-prochain .exo2-btn { width: 100%; margin-top: 14px; }
.exo2-pilo-prochain-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--exo2-meta); }

/*
 * « Pour qui ».
 *
 * La phrase que l'élève se dit à lui-même, puis ce qu'il en ressort. La
 * citation est en gris et en italique, le résultat en blanc : l'œil suit le
 * chemin de gauche à droite, du problème au résultat.
 */
.exo2-pilo-situations { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.exo2 .exo2-pilo-situations li {
	display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
	align-items: center; gap: 0 12px;
	padding: 20px 0; border-top: 1px solid var(--exo2-ligne);
}
.exo2 .exo2-pilo-situations li:last-child { border-bottom: 1px solid var(--exo2-ligne); }
.exo2-pilo-situations q {
	font: italic 300 17px/1.5 var(--exo2-police); color: var(--exo2-meta); quotes: '«\00a0' '\00a0»';
}
.exo2-pilo-situations b { font: 600 16.5px/1.5 var(--exo2-police); color: #fff; }
.exo2-pilo-vers { display: flex; justify-content: center; color: var(--exo2-corail); }
.exo2 .exo2-pilo-vers .exo2-fleche { width: 22px; height: 22px; }
.exo2-pilo-honnete { margin-top: 24px; max-width: 780px; }

/* ---------- le programme ---------- */
.exo2-pilo-programme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.exo2-pilo-famille { padding: 24px 24px 26px; position: relative; }
.exo2-pilo-famille-num {
	display: block; font: italic 700 15px var(--exo2-police-titre); color: var(--exo2-corail);
	letter-spacing: 1px; margin-bottom: 8px;
}
.exo2-pilo-famille .exo2-h4 { margin: 0 0 16px; }
.exo2 .exo2-pilo-famille .exo2-list { display: grid; gap: 10px; }
.exo2 .exo2-pilo-famille .exo2-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--exo2-meta); }
.exo2 .exo2-pilo-famille .exo2-coche { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--exo2-corail); }

/* ---------- la journée type ---------- */
.exo2-pilo-journee { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.exo2 .exo2-pilo-journee li {
	display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 30px;
	padding: 22px 0; border-top: 1px solid var(--exo2-ligne);
}
.exo2 .exo2-pilo-journee li:last-child { border-bottom: 1px solid var(--exo2-ligne); }
.exo2-pilo-heure { font: italic 700 19px var(--exo2-police-titre); color: var(--exo2-corail); letter-spacing: .6px; padding-top: 2px; }
.exo2-pilo-journee h3 { margin: 0; }
.exo2-pilo-journee p { margin: 8px 0 0; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; max-width: 760px; }

/* ---------- les niveaux ---------- */
.exo2-pilo-niveaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.exo2-pilo-niveau { padding: 24px 26px 26px; display: flex; flex-direction: column; }
.exo2-pilo-niveau .exo2-badge { align-self: flex-start; margin-bottom: 14px; }
.exo2-pilo-niveau .exo2-h4 { margin: 0 0 10px; }
.exo2-pilo-niveau p { color: var(--exo2-meta); font-size: 15px; line-height: 1.6; margin: 0; }
.exo2-pilo-niveau-pied {
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--exo2-ligne);
	font: 600 13px var(--exo2-police); color: var(--exo2-texte); letter-spacing: .2px;
}
/* Le privé se distingue : ce n'est pas un troisième niveau, c'est une autre
   façon de prendre le cours. */
.exo2-pilo-niveau-prive { box-shadow: inset 0 0 0 1px var(--exo2-corail); }

/* ---------- le moniteur ---------- */
.exo2-pilo-moniteur { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 42px; align-items: center; }
.exo2-pilo-moniteur figure { margin: 0; }
.exo2-pilo-moniteur img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.exo2-pilo-moniteur p { color: var(--exo2-meta); font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.exo2-pilo-galerie { margin-top: 40px; }

.exo2-pilo-tarif { margin: 14px 0 16px; font: italic 700 20px var(--exo2-police-titre); color: #fff; letter-spacing: .6px; }

/* =======================================================================
   Le formulaire de privatisation, habillé au design system
   =======================================================================
   Son balisage appartient au composant - conteneur .convertforms, champs
   .cf-input : on remplace son apparence, pas sa structure. Repris de
   entreprises.css, qui a résolu le même problème avant. */
.exo2-pilo-tiroir .convertforms { margin: 0; }
.exo2-pilo-tiroir .convertforms .cf-label,
.exo2-pilo-tiroir .convertforms .cf-control-label {
	font: 600 11px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
	color: var(--exo2-meta); margin-bottom: 7px; display: block;
}
.exo2-pilo-tiroir .convertforms .cf-required-label { color: var(--exo2-corail); }
.exo2-pilo-tiroir .convertforms .cf-control-group { margin-bottom: 16px; }
.exo2-pilo-tiroir .convertforms .cf-input,
.exo2-pilo-tiroir .convertforms input[type="text"],
.exo2-pilo-tiroir .convertforms input[type="email"],
.exo2-pilo-tiroir .convertforms input[type="tel"],
.exo2-pilo-tiroir .convertforms select,
.exo2-pilo-tiroir .convertforms textarea {
	width: 100%; height: 44px; padding: 0 14px; border-radius: 0; box-shadow: none;
	background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	font: 15px var(--exo2-police);
}
.exo2-pilo-tiroir .convertforms textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; }
.exo2-pilo-tiroir .convertforms select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f56d52' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.exo2-pilo-tiroir .convertforms .cf-input::placeholder,
.exo2-pilo-tiroir .convertforms textarea::placeholder { color: rgba(255, 255, 255, .35); }
.exo2-pilo-tiroir .convertforms .cf-input:focus,
.exo2-pilo-tiroir .convertforms .cf-input:focus-visible {
	outline: 2px solid var(--exo2-corail); outline-offset: 2px;
	border-color: rgba(255, 255, 255, .35); background: #0d0d0d; color: #fff;
}
.exo2-pilo-tiroir .convertforms button[type="submit"],
.exo2-pilo-tiroir .convertforms input[type="submit"],
.exo2-pilo-tiroir .convertforms .cf-submit {
	background: var(--exo2-accent) var(--exo2-degrade); color: #fff;
	border: 0; border-radius: 0; box-shadow: var(--exo2-ombre);
	font: italic 700 13px/44px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	padding: 0 34px 2px; cursor: pointer; width: 100%; height: auto;
}
.exo2-pilo-tiroir .convertforms button[type="submit"]:hover,
.exo2-pilo-tiroir .convertforms input[type="submit"]:hover { background-image: var(--exo2-degrade-survol); }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1200px) {
	.exo2-pilo .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; }
	.exo2-pilo-programme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-pilo-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-pilo-moniteur { grid-template-columns: 220px minmax(0, 1fr); gap: 30px; }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-pilo .exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
	.exo2-pilo-prochain { margin-top: 28px; padding: 22px 20px 24px; }
	.exo2-pilo-prix b { font-size: 36px; }
	.exo2-pilo-programme { grid-template-columns: minmax(0, 1fr); }
	.exo2-pilo-niveaux { grid-template-columns: minmax(0, 1fr); }
	.exo2-pilo-moniteur { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.exo2-pilo-moniteur figure { max-width: 240px; }
	/* L'heure passe au-dessus de son moment. */
	.exo2 .exo2-pilo-journee li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
	/* La phrase et son résultat s'empilent, la flèche pointe vers le bas. */
	.exo2 .exo2-pilo-situations li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
	.exo2-pilo-vers { justify-content: flex-start; transform: rotate(90deg); transform-origin: left center; margin-left: 10px; }
}