/**
 * Page Coaching en ligne - 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 étapes, la F.A.Q., la
 * bande photo et les tuiles viennent de là. On trouve ici la carte de prix du
 * hero, les règles de tournage, les deux colonnes des limites, et le
 * formulaire d'envoi.
 */

/* ---------- hero : le prix à droite ---------- */
.exo2-online .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: center; padding-top: 176px; }
.exo2-online-arguments { display: grid; gap: 9px; margin-top: 22px; }
.exo2-online-arguments li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.exo2 .exo2-online-arguments .exo2-coche { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exo2-corail); }
.exo2-online .exo2-hhero-actions { margin-top: 28px; }

.exo2-online-prix-carte { padding: 26px 28px 28px; }
.exo2-online-prix { margin: 10px 0 20px; }
.exo2-online-prix i {
	display: block; margin-bottom: 2px; font: 600 12px var(--exo2-police);
	font-style: normal; text-transform: uppercase; letter-spacing: 1.2px; color: var(--exo2-meta);
}
.exo2-online-prix b { display: block; font: italic 700 46px/1 var(--exo2-police-titre); color: #fff; letter-spacing: 1px; }
.exo2-online-prix span { display: block; margin-top: 6px; font-size: 13px; color: var(--exo2-meta); }
.exo2 .exo2-online-prix-carte .exo2-list { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--exo2-ligne); }
.exo2 .exo2-online-prix-carte .exo2-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.exo2 .exo2-online-prix-carte .exo2-coche { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--exo2-corail); }
.exo2 .exo2-online-prix-carte .exo2-btn { width: 100%; margin-top: 20px; }
.exo2-online-prix-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--exo2-meta); }

/* ---------- pour qui ---------- */
.exo2-online-situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.exo2-online-situation p { margin: 10px 0 0; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; }

/* Quatre étapes, quatre colonnes : la grille partagée en compte trois. */
.exo2-online .exo2-online-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/*
 * Comment filmer.
 *
 * Une liste numérotée plutôt que des cartes : ce sont des consignes qu'on
 * suit dans l'ordre, une fois, le téléphone à la main.
 */
.exo2-online-regles { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.exo2 .exo2-online-regles li {
	display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 22px;
	padding: 20px 0; border-top: 1px solid var(--exo2-ligne); align-items: start;
}
.exo2 .exo2-online-regles li:last-child { border-bottom: 1px solid var(--exo2-ligne); }
.exo2-online-regle-num {
	font: italic 700 22px/1 var(--exo2-police-titre); color: var(--exo2-corail);
	letter-spacing: .6px; padding-top: 4px;
}
.exo2-online-regles h3 { margin: 0; }
.exo2-online-regles p { margin: 8px 0 0; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; max-width: 780px; }

/*
 * Les formules.
 *
 * Trois cartes de même hauteur, celle du milieu détachée : c'est le compromis,
 * et le badge dit qu'on le sait. Les listes se calent en bas de carte pour que
 * les trois boutons s'alignent, quelle que soit la longueur des lignes.
 */
.exo2-online-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.exo2-online-pack {
	position: relative; display: flex; flex-direction: column;
	padding: 28px 26px 26px;
}
.exo2-online-pack .exo2-h4 { margin: 0; }
.exo2-online-pack-accroche { margin: 6px 0 0; color: var(--exo2-meta); font-size: 14px; line-height: 1.5; }

/* La carte mise en avant : un filet corail, pas un fond criard. */
.exo2-online-pack-vedette { border-color: var(--exo2-corail); }
.exo2-online-pack-badge {
	position: absolute; top: 0; right: 22px; transform: translateY(-50%);
	padding: 5px 12px; background: var(--exo2-corail); color: #fff;
	font: 600 10.5px var(--exo2-police); text-transform: uppercase; letter-spacing: 1.1px;
}

.exo2-online-pack-prix { margin: 18px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--exo2-ligne); }
.exo2-online-pack-prix b { display: block; font: italic 700 38px/1 var(--exo2-police-titre); color: #fff; letter-spacing: .8px; }
.exo2-online-pack-prix span { display: block; margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--exo2-meta); }

.exo2 .exo2-online-pack .exo2-list { display: grid; gap: 11px; margin: 0 0 22px; }
.exo2 .exo2-online-pack .exo2-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.exo2 .exo2-online-pack .exo2-coche { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--exo2-corail); }
/* Le bouton tombe en bas : les trois s'alignent quoi qu'il arrive. */
.exo2 .exo2-online-pack .exo2-btn { margin-top: auto; width: 100%; }

.exo2 .exo2-online-packs-note { margin: 26px 0 0; font-size: 13px; line-height: 1.55; color: var(--exo2-meta); }

/* ---------- ce que c'est, ce que ce n'est pas ---------- */
.exo2-online-limites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.exo2-online-limites > div { padding: 26px 28px 28px; }
.exo2-online-limites .exo2-h4 { margin: 0 0 18px; }
.exo2 .exo2-online-limites .exo2-list { display: grid; gap: 12px; }
.exo2 .exo2-online-limites .exo2-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.exo2 .exo2-online-limites .exo2-coche,
.exo2 .exo2-online-limites .exo2-croix { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.exo2 .exo2-online-limites .exo2-coche { color: var(--exo2-corail); }
/* Les limites se disent sans dramatiser : gris, pas rouge. */
.exo2 .exo2-online-limites .exo2-croix { color: var(--exo2-meta); }
.exo2-online-nest-pas li span { color: var(--exo2-meta); }

/* ---------- l'envoi ---------- */
.exo2-online-envoi-grille { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: start; }
.exo2-online-envoi-grille > div > p { margin: 14px 0 26px; color: var(--exo2-meta); font-size: 16px; line-height: 1.65; max-width: 560px; }

.exo2-online-qui { padding: 22px 24px 24px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; max-width: 560px; }
.exo2-online-qui figure { margin: 0; }
.exo2-online-qui img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; display: block; }
.exo2-online-qui b { display: block; margin: 6px 0; color: #fff; font: italic 700 19px var(--exo2-police-titre); letter-spacing: .5px; }
.exo2-online-qui p { margin: 0; color: var(--exo2-meta); font-size: 13.5px; line-height: 1.55; }

.exo2-online-form { padding: 26px 28px 28px; }

/*
 * Le module porte sa propre introduction (.pf-message), juste au-dessus de ses
 * champs. Elle redit ce que la page vient d'annoncer, mais c'est le texte du
 * client et il est modifiable depuis l'administration : on ne le masque pas -
 * on le remet à la taille d'une consigne, sous un filet, plutôt qu'à celle
 * d'un second chapeau. Le « justify » est en style en ligne dans le module,
 * d'où le !important : justifié sur trois lignes étroites, ça troue le texte.
 */
.exo2-online-form .pf-message { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--exo2-ligne); }
.exo2-online-form .pf-message p {
	margin: 0 0 8px; font-size: 13.5px; line-height: 1.55;
	color: var(--exo2-meta); text-align: left !important;
}
.exo2-online-form .pf-message p:last-child { margin-bottom: 0; }
.exo2-online-form h1, .exo2-online-form h2, .exo2-online-form h3 {
	margin: 0 0 10px; font: 700 15px var(--exo2-police-titre);
	text-transform: uppercase; letter-spacing: .6px; color: var(--exo2-texte);
}

/* La colonne de gauche suit le défilement : le formulaire fait deux fois sa
   hauteur, et le portrait de celui qui répond a intérêt à rester en vue. */
.exo2-online-envoi-grille > div:first-child { position: sticky; top: 110px; }

/* =======================================================================
   Le formulaire de paiement et d'envoi, habillé au design system
   =======================================================================
   Balisage de PayForm : une grille Bootstrap, l'étiquette à gauche et le
   champ à droite. On la redresse comme sur le bon cadeau - étiquettes
   au-dessus - parce que la carte est trop étroite pour deux colonnes. */
.exo2-online-form .pf-container { display: block; margin-left: 0; margin-right: 0; }
.exo2-online-form #os_form { padding: 0; }
.exo2-online-form .form-group,
.exo2-online-form .form-row { display: block; margin: 0 0 16px; }
.exo2-online-form [class*="col-md-"],
.exo2-online-form [class*="col-sm-"] { flex: none; max-width: none; width: auto; padding-left: 0; padding-right: 0; }
.exo2-online-form .form-control-label,
.exo2-online-form .form-control-label label {
	display: block; font: 600 11px/1.4 var(--exo2-police); letter-spacing: .9px;
	text-transform: uppercase; color: var(--exo2-meta); margin: 0 0 6px;
}
.exo2 .exo2-online-form .required { color: var(--exo2-corail); }
.exo2-online-form .form-control,
.exo2-online-form .form-select,
.exo2-online-form input[type="text"],
.exo2-online-form input[type="email"],
.exo2-online-form select,
.exo2-online-form 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-online-form textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; }
.exo2-online-form select,
.exo2-online-form .form-select {
	appearance: none; padding-right: 34px;
	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-online-form .w-auto { width: auto; display: inline-block; }
.exo2-online-form input:focus-visible,
.exo2-online-form select:focus-visible,
.exo2-online-form textarea:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }

/* La zone de dépôt du fichier : c'est le geste central de la page, elle se
   voit comme telle plutôt que comme un champ de plus. */
.exo2-online-form .pmform-dropzone,
.exo2-online-form .dropzone {
	background: rgba(245, 109, 82, .06); border: 1px dashed rgba(245, 109, 82, .45);
	border-radius: 0; min-height: 120px; padding: 22px; color: var(--exo2-texte);
	transition: background-color .2s, border-color .2s;
}
.exo2-online-form .pmform-dropzone:hover,
.exo2-online-form .dropzone:hover { background: rgba(245, 109, 82, .12); border-color: var(--exo2-corail); }
.exo2-online-form .dz-message { color: var(--exo2-texte); font-size: 14.5px; }

/* Le récapitulatif en ticket, comme sur le bon cadeau. */
.exo2-online-form .form-group:has(input[readonly]) {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	margin: 0; padding: 4px 0;
}
.exo2-online-form .form-group:has(input[readonly]) .form-control-label { margin: 0; }
.exo2-online-form .input-group { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.exo2-online-form input[readonly] {
	flex: none; width: 5.2em; min-width: 0; height: auto; text-align: right;
	background: transparent; border-color: transparent; padding: 0;
	font: italic 700 16px var(--exo2-police-titre); color: #fff; letter-spacing: .5px;
}
.exo2-online-form .input-group-text {
	font: 600 10.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase;
	color: var(--exo2-meta); background: transparent; border: 0; padding: 0; min-width: 28px;
}
.exo2-online-form .form-group:has(#total_amount) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--exo2-ligne); }
.exo2-online-form .form-group:has(#gross_amount) { margin-bottom: 16px; padding-top: 10px; border-top: 1px solid var(--exo2-ligne); }
.exo2 .exo2-online-form #gross_amount { color: var(--exo2-corail); font-size: 21px; }

.exo2 .exo2-online-form label.d-block { display: block; font: 15px var(--exo2-police); text-transform: none; letter-spacing: 0; color: var(--exo2-texte); margin-bottom: 8px; }
.exo2-online-form input[type="radio"],
.exo2-online-form input[type="checkbox"] { width: auto; height: auto; accent-color: var(--exo2-accent); margin-right: 8px; vertical-align: middle; }
.exo2-online-form #field-accept-term { font-size: 14px; line-height: 1.5; }
.exo2 .exo2-online-form a { color: var(--exo2-corail); }
.exo2-online-form .invalid { display: block; margin-top: 5px; font-size: 12.5px; color: var(--exo2-corail); }

.exo2-online-form input[type="submit"],
.exo2-online-form button[type="submit"],
.exo2-online-form .btn-primary {
	background: var(--exo2-accent) var(--exo2-degrade); color: #fff;
	border: 0; border-radius: 0; box-shadow: var(--exo2-ombre);
	font: italic 700 14px/50px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	padding: 0 30px 2px; cursor: pointer; width: 100%; height: auto; margin-top: 8px;
}

/*
 * Le choix du pack, dans le formulaire.
 *
 * PayForm rend un fieldset de radios en lignes Bootstrap. On les remet en
 * boutons-cases : c'est le premier champ du formulaire, et c'est lui qui fixe
 * le montant, donc il doit se voir.
 */
.exo2-online-form #pack { border: 0; margin: 0; padding: 0; }
.exo2-online-form #pack > .row { display: block; margin: 0; }
.exo2-online-form #pack .col-md-12 { padding: 0; }
.exo2-online-form #pack label.radio {
	display: flex; gap: 10px; align-items: center; margin: 0 0 8px; padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, .22); background: #0d0d0d;
	font-size: 14.5px; color: #fff; cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.exo2-online-form #pack label.radio:hover { border-color: rgba(245, 109, 82, .55); }
.exo2-online-form #pack label.radio:has(input:checked) {
	border-color: var(--exo2-corail); background: rgba(245, 109, 82, .1);
}
.exo2-online-form #pack input[type="radio"] { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--exo2-corail); }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1200px) {
	.exo2-online .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; }
	.exo2-online-situations { grid-template-columns: minmax(0, 1fr); }
	.exo2-online .exo2-online-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-online-envoi-grille { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.exo2-online-form { max-width: 620px; }
}

@media (max-width: 1024px) {
	.exo2-online-limites { grid-template-columns: minmax(0, 1fr); }
	.exo2-online-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-online .exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
	.exo2-online-prix-carte { margin-top: 28px; padding: 22px 20px 24px; }
	.exo2-online-prix b { font-size: 38px; }
	.exo2-online .exo2-online-steps { grid-template-columns: minmax(0, 1fr); }
	.exo2-online-limites > div { padding: 22px 20px 24px; }
	.exo2-online-packs { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.exo2-online-pack { padding: 24px 20px 22px; }
	.exo2-online-pack-prix b { font-size: 34px; }
	.exo2-online-form { padding: 22px 18px 24px; }
	.exo2-online-envoi-grille > div:first-child { position: static; }
	/* Le numéro passe au-dessus de sa consigne. */
	.exo2 .exo2-online-regles li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
	.exo2-online-qui { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.exo2-online-qui img { width: 64px; height: 64px; }
}