/* -------------------------------------------------------------------------
   Page Sur mesure

   Deux etats pour une meme section : les six cartes de l'etape 1, ou le
   formulaire de l'etape 2. Le fil au-dessus dit ou l'on en est et laisse
   revenir en arriere.
   ------------------------------------------------------------------------- */

/*
 * Le chapeau du hero.
 *
 * Cette page n'a pas de carte a droite : elle n'utilise donc pas
 * « .exo2-hhero-grid », et c'est la que le titre disparaissait. Cette classe ne
 * porte pas que la grille : elle porte aussi le « position: relative » et le
 * « z-index: 2 » qui font passer le contenu AU-DESSUS des deux voiles du hero,
 * absolument positionnes. Sans elle, le h1 etait bien dans le HTML, mais
 * derriere le voile. Elle porte enfin le rembourrage haut qui degage le
 * contenu de l'en-tete transparent.
 */
.exo2-sm-tete {
	position: relative; z-index: 2; width: 100%;
	padding-top: 150px; padding-bottom: 56px;
}
/* Le chapeau ne borne pas sa largeur : c'est « .exo2-wrap » qui la tient, et
   la borner ici recentrerait tout le bloc. Seul le sous-titre s'elargit un peu,
   l'intro etant plus longue que sur les autres pages. */
.exo2-sm-tete .exo2-hhero-sub { max-width: 640px; }

/* ---------- le fil des deux etapes ---------- */
.exo2-sm-fil {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 22px; flex-wrap: wrap;
}
.exo2-sm-pas {
	display: grid; place-items: center; width: 30px; height: 30px;
	border-radius: 50%; border: 1px solid var(--exo2-ligne);
	font: italic 700 13px var(--exo2-police-titre); color: var(--exo2-meta);
	text-decoration: none; flex: none;
}
.exo2 a.exo2-sm-pas:hover { border-color: #fff; color: #fff; }
.exo2-sm-pas--on { background-image: var(--exo2-degrade); border-color: transparent; color: #fff; }
.exo2-sm-pas--fait { border-color: var(--exo2-corail); color: var(--exo2-corail); }
.exo2-sm-trait { width: 34px; height: 1px; background: var(--exo2-ligne); flex: none; }

/* La categorie retenue : elle se lit, et surtout elle se change. */
.exo2-sm-choisie {
	display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin-left: 6px; font-size: 13.5px; color: var(--exo2-meta);
}
.exo2-sm-choisie b { color: #fff; font-weight: 600; }
.exo2 .exo2-sm-choisie a {
	color: var(--exo2-corail); font-size: 12.5px; text-decoration: underline;
	text-underline-offset: 3px;
}

.exo2-sm-question { margin: 0 0 24px; }

/* ---------- les six cartes de l'etape 1 ---------- */
/*
 * Trois colonnes au-dessus de 960 px : six cartes se rangent alors en deux
 * rangees pleines, sans orpheline.
 */
.exo2-sm-cartes {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.exo2 .exo2-sm-carte {
	display: flex; align-items: center; gap: 16px;
	padding: 20px 22px; color: inherit; text-decoration: none;
	transition: box-shadow .15s, transform .15s;
}
.exo2 .exo2-sm-carte:hover {
	box-shadow: var(--exo2-liseret), var(--exo2-ombre-survol);
	transform: translateY(-3px);
	color: inherit;
}
.exo2-sm-initiale {
	display: grid; place-items: center; width: 42px; height: 42px; flex: none;
	border-radius: 50%; background-image: var(--exo2-degrade); color: #fff;
	font: italic 700 17px var(--exo2-police-titre);
}
.exo2-sm-nom {
	font: italic 700 15px var(--exo2-police-titre); letter-spacing: .06em;
	text-transform: uppercase; color: #fff;
}

/* ---------- l'etape 2 ---------- */
.exo2-sm-formulaire { padding: 30px 32px 28px; max-width: 760px; }
.exo2-sm-reassurance {
	margin: 14px 0 0; text-align: center;
	font-size: 12.5px; color: var(--exo2-meta);
}
.exo2-sm-repli { margin: 0; color: var(--exo2-meta); }
.exo2-sm-repli a { color: var(--exo2-corail); }

/* ---------- comment ca se passe ---------- */
.exo2-sm-pas-liste {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
	margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.exo2-sm-pas-liste li { display: grid; gap: 8px; align-content: start; }
.exo2-sm-pas-num {
	display: grid; place-items: center; width: 34px; height: 34px;
	border-radius: 50%; border: 1px solid var(--exo2-corail);
	font: italic 700 14px var(--exo2-police-titre); color: var(--exo2-corail);
}
.exo2-sm-pas-liste b {
	font: italic 700 16px var(--exo2-police-titre); letter-spacing: .04em;
	text-transform: uppercase; color: #fff;
}
.exo2-sm-pas-liste span:not(.exo2-sm-pas-num) { color: var(--exo2-meta); font-size: 15px; line-height: 1.6; }

.exo2-sm-faq-wrap { max-width: 860px; }

/* -------------------------------------------------------------------------
   Le formulaire de Convert Forms, repeint.

   Meme grille Bootstrap et memes trois pieges que sur les pages Bon cadeau,
   Coaching en ligne et Paiement : gouttiere negative, rembourrages de
   compensation, etiquettes coincees en colonne.
   ------------------------------------------------------------------------- */

.exo2-sm .cf-form, .exo2-sm .convertforms { margin-left: 0; margin-right: 0; }
.exo2-sm .cf-form .cf-row { margin-left: 0; margin-right: 0; }

.exo2-sm .cf-label {
	display: block; margin-bottom: 6px;
	font: 600 11.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase;
	color: var(--exo2-meta);
}
.exo2-sm .cf-required-indicator, .exo2-sm .cf-required { color: var(--exo2-corail); }

/*
 * Les couleurs des champs ne sont PAS ici : elles vivent dans les réglages de
 * présentation de chaque formulaire (inputbg, inputcolor, inputbordercolor),
 * que Convert Forms émet en variables CSS attachées à l'identifiant du
 * formulaire - ce qui bat n'importe quel sélecteur de classe. Voir
 * migration-surmesure-champs.php. Les repeindre d'ici demanderait une
 * surenchère de spécificité sans fin, et laisserait l'aperçu de
 * l'administration en blanc.
 */

.exo2-sm input[type="text"],
.exo2-sm input[type="email"],
.exo2-sm input[type="tel"],
.exo2-sm input[type="number"],
.exo2-sm select,
.exo2-sm textarea {
	width: 100%; height: 44px; padding: 0 14px;
	background: var(--exo2-fond-profond); color: #fff;
	border: 1px solid var(--exo2-ligne); border-radius: 0;
	font: 15px var(--exo2-police);
}
.exo2-sm textarea { height: auto; min-height: 120px; padding: 12px 14px; }
.exo2-sm input:focus, .exo2-sm select:focus, .exo2-sm textarea:focus {
	outline: 0; border-color: var(--exo2-corail);
}
.exo2-sm ::placeholder { color: rgba(255, 255, 255, .38); }

/* Deux champs par ligne au-dessus de 640 px : prenom et e-mail, personnes et
   dates. En dessous, tout s'empile. */
.exo2-sm .cf-one-half { width: 100%; }

@media (min-width: 640px) {
	.exo2-sm .cf-form { display: flex; flex-wrap: wrap; gap: 0 18px; }
	.exo2-sm .cf-form > * { width: 100%; }
	.exo2-sm .cf-one-half { width: calc(50% - 9px); }
}

/* La case newsletter : jamais pre-cochee, et son libelle se lit. */
.exo2-sm .cf-checkbox-wrap label,
.exo2-sm label.cf-checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	font: 13.5px/1.5 var(--exo2-police); letter-spacing: 0; text-transform: none;
	color: var(--exo2-meta); cursor: pointer;
}
.exo2-sm input[type="checkbox"] { accent-color: var(--exo2-corail); margin-top: 3px; flex: none; }

.exo2-sm .cf-submit, .exo2-sm button[type="submit"], .exo2-sm input[type="submit"] {
	display: block; width: 100%; height: 48px; padding: 0 24px 2px;
	border: 0; border-radius: 0;
	background-image: var(--exo2-degrade); color: #fff;
	font: italic 700 13px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	cursor: pointer; box-shadow: var(--exo2-ombre);
}
.exo2-sm .cf-submit:hover, .exo2-sm button[type="submit"]:hover { background-image: var(--exo2-degrade-survol); }

.exo2-sm .cf-error, .exo2-sm .cf-response-error {
	color: var(--exo2-corail); font-size: 13.5px; margin-top: 12px;
}

/* =========================================================================
   Tablette et telephone
   ========================================================================= */

@media (max-width: 960px) {
	/* Le hero perd sa hauteur minimale sur mobile : le chapeau suit, sinon il
	   garde ses 150 px de rembourrage dans une section devenue courte. */
	.exo2-sm-tete { padding-top: 96px; padding-bottom: 36px; }
}

@media (max-width: 959px) {
	.exo2-sm-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-sm-pas-liste { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.exo2-sm-formulaire { padding: 24px 20px 22px; }
}

@media (max-width: 639px) {
	.exo2-sm-cartes { grid-template-columns: minmax(0, 1fr); }
	.exo2-sm-choisie { margin-left: 0; width: 100%; }
}

/*
 * La case d'abonnement n'est pas une étiquette de champ.
 *
 * Convert Forms donne la même classe .cf-label à l'étiquette d'un champ
 * (« Prénom », deux mots) et au texte d'une case à cocher, qui est ici une
 * phrase entière. La règle générale les met en petites capitales espacées :
 * juste pour « Prénom », illisible pour « Je m'abonne à l'Exo'news (une
 * édition par mois, désabonnement en un clic) ».
 *
 * On rend donc sa casse et sa taille au texte des cases, sans toucher aux
 * étiquettes de champ.
 */
.exo2-sm .cf-checkbox-group .cf-label,
.exo2-sm .cf-radio-group .cf-label {
	display: inline; margin: 0;
	font: 400 13.5px/1.5 var(--exo2-police);
	letter-spacing: 0; text-transform: none;
	color: var(--exo2-texte);
}

.exo2-sm .cf-checkbox-group,
.exo2-sm .cf-radio-group {
	display: flex; align-items: flex-start; gap: 9px;
}

.exo2-sm .cf-checkbox-group input[type="checkbox"],
.exo2-sm .cf-radio-group input[type="radio"] {
	width: auto; flex: none; margin-top: 3px; accent-color: var(--exo2-corail);
}