/* -------------------------------------------------------------------------
   Page B2B

   Ce qui lui est propre. Le reste - sections, cartes, boutons, F.A.Q.,
   galerie, bandes, statistiques - vient de socle.css et pages.css.

   Une seule idée de mise en page : cette page se lit comme un dossier, pas
   comme une page de vente. Les blocs sont plus denses qu'ailleurs, les
   nombres plus gros, et rien ne clignote.
   ------------------------------------------------------------------------- */

/* Le point de séparation des mentions du hero. */
.exo2-b2b-sep { opacity: .4; margin: 0 4px; }

/* La bande de faits : six entrées, donc plus serrée que la version à quatre
   des autres pages. */
.exo2-b2b-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.exo2-b2b-facts > li > b { white-space: nowrap; }

@media (max-width: 1199px) { .exo2-b2b-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .exo2-b2b-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Le chapeau d'une section : un paragraphe sous le titre, plus large que le
   corps mais pas pleine largeur, pour rester lisible. */
.exo2-b2b-chapeau {
	max-width: 62ch;
	margin: 14px auto 0;
	color: var(--exo2-meta);
	font-size: 17px;
	line-height: 1.66;
}

/* ---------- à qui l'on s'adresse ---------- */
.exo2-b2b-publics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exo2-b2b-publics > article { display: flex; flex-direction: column; }
.exo2-b2b-publics h3 { margin: 0 0 12px; }
.exo2-b2b-publics p { margin: 0; }

/* L'étiquette du bas de carte : ce que le format permet, en une ligne. */
.exo2-b2b-tag {
	margin-top: auto;
	padding-top: 16px;
	color: var(--exo2-corail);
	font-family: var(--exo2-police);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
}

@media (max-width: 959px) { .exo2-b2b-publics { grid-template-columns: minmax(0, 1fr); } }

/* ---------- les piliers ---------- */
.exo2-b2b-piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 959px) { .exo2-b2b-piliers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- les prestations ---------- */
.exo2-b2b-prestations {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-top: 40px;
}

.exo2-b2b-presta { position: relative; padding: 30px 30px 28px; }
.exo2-b2b-presta > .exo2-step-num { margin-bottom: 14px; }
.exo2-b2b-presta h3 { margin: 0 0 10px; }
.exo2-b2b-presta > p { margin: 0 0 18px; color: var(--exo2-meta); }
.exo2-b2b-presta .exo2-list { margin: 0; }

@media (max-width: 959px) { .exo2-b2b-prestations { grid-template-columns: minmax(0, 1fr); } }

/* ---------- les capacités en chiffres ---------- */
.exo2-b2b-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.exo2-b2b-stats > li > b { white-space: nowrap; }

@media (max-width: 1199px) { .exo2-b2b-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .exo2-b2b-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La ligne des destinations opérables en marque blanche. */
.exo2-b2b-pays {
	max-width: 62ch;
	margin: 30px auto 0;
	text-align: center;
	color: var(--exo2-meta);
	font-size: 15.5px;
}
.exo2-b2b-pays a { color: var(--exo2-corail); text-decoration: none; }
.exo2-b2b-pays a:hover { text-decoration: underline; }

/* ---------- les étapes ---------- */
.exo2-b2b-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .exo2-b2b-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .exo2-b2b-etapes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- le terrain ---------- */
/*
 * Cette galerie voulait « une grande à gauche, quatre en damier à droite ».
 * C'est mot pour mot la mosaïque partagée : elle porte donc la grille
 * commune (exo/pages.css, .exo2-gallery-mosaique) et non plus la sienne, qui
 * disait la même chose en quatre colonnes au lieu de trois.
 *
 * Ne rien redéclarer ici : les deux sélecteurs pèsent une classe chacun, et
 * la dernière feuille chargée gagnerait - ce qui rendrait la mise en page
 * dépendante de l'ordre des feuilles plutôt que d'une décision.
 */

.exo2-b2b-supports {
	max-width: 62ch;
	margin: 26px auto 0;
	text-align: center;
	color: var(--exo2-meta);
	font-size: 15.5px;
}

/* ---------- la demande de devis ---------- */
/* Le formulaire à gauche, l'interlocuteur à droite : on décide d'écrire à
   quelqu'un, pas à un formulaire. */
.exo2-b2b-devis {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 26px;
	margin-top: 40px;
	align-items: start;
}

.exo2-b2b-formulaire { padding: 32px 34px 30px; }

@media (max-width: 1199px) { .exo2-b2b-devis { grid-template-columns: minmax(0, 1fr); } }

/*
 * Le formulaire, tel que ConvertForms le rend.
 *
 * On le repeint plutôt que de le remplacer, comme sur les pages Bon cadeau et
 * Sorties d'entreprise. Bonne surprise ici : la mise en deux colonnes est
 * native (« cf-one-half », posé sur les champs par la migration), il n'y a
 * donc pas de grille à refaire - seulement les couleurs, qui arrivent en
 * clair du composant et jurent sur fond sombre.
 */
.exo2-b2b .convertforms { margin: 0; }
.exo2-b2b .convertforms .cf-control-group { margin-bottom: 18px; }

.exo2-b2b .convertforms .cf-label {
	font-family: var(--exo2-police);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--exo2-meta);
}
.exo2-b2b .convertforms .cf-required-label { color: var(--exo2-corail); }

.exo2-b2b .convertforms .cf-input,
.exo2-b2b .convertforms .cf-select,
.exo2-b2b .convertforms textarea {
	background: var(--exo2-fond-profond);
	color: #fff;
	border: 1px solid var(--exo2-ligne);
	border-radius: 0;
	font-family: var(--exo2-police);
}
.exo2-b2b .convertforms .cf-input:focus,
.exo2-b2b .convertforms .cf-select:focus,
.exo2-b2b .convertforms textarea:focus {
	outline: 0;
	border-color: var(--exo2-corail);
	box-shadow: none;
}

/* Les six prestations : en deux colonnes, sinon six lignes pour six mots. */
.exo2-b2b .convertforms .cf-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 18px;
}
.exo2-b2b .convertforms .cf-checkbox-group label { color: var(--exo2-texte); }
.exo2-b2b .convertforms input[type="checkbox"] { accent-color: var(--exo2-corail); }

@media (max-width: 639px) {
	.exo2-b2b .convertforms .cf-list { grid-template-columns: minmax(0, 1fr); }
}

/* L'intertitre « vos coordonnées » sépare le projet des personnes. */
.exo2-b2b .convertforms .cf-heading {
	margin-top: 14px;
	padding-top: 22px;
	border-top: 1px solid var(--exo2-ligne);
	font-family: var(--exo2-police-titre);
	font-style: italic;
	font-weight: 700;
	letter-spacing: .5px;
	color: #fff;
}

.exo2-b2b .convertforms .cf-btn {
	background-image: var(--exo2-degrade);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-family: var(--exo2-police-titre);
	font-style: italic;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	box-shadow: var(--exo2-ombre);
}
.exo2-b2b .convertforms .cf-btn:hover { background-image: var(--exo2-degrade-survol); }

.exo2-b2b .convertforms .cf-response { background: transparent; color: var(--exo2-texte); }

.exo2-b2b-repli { margin: 0; color: var(--exo2-meta); }
.exo2-b2b-repli a { color: var(--exo2-corail); }

/* ---------- l'interlocuteur ---------- */
.exo2-b2b-interlocuteur { padding: 28px 28px 26px; }
.exo2-b2b-interlocuteur > .exo2-label { display: block; margin-bottom: 16px; }

.exo2-b2b-contact { margin: 20px 0 0; }
.exo2-b2b-contact a { color: var(--exo2-corail); text-decoration: none; }
.exo2-b2b-contact a:hover { text-decoration: underline; }

/* Ce qu'il faut pour chiffrer : détaché par un filet, parce que c'est la
   liste qu'on relit avant d'écrire. */
.exo2-b2b-chiffrer {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--exo2-ligne);
}
.exo2-b2b-chiffrer b {
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-family: var(--exo2-police-titre);
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .5px;
}
.exo2-b2b-chiffrer p { margin: 0; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; }

.exo2-b2b-ailleurs {
	margin: 20px 0 0;
	color: var(--exo2-meta);
	font-size: 14.5px;
}
.exo2-b2b-ailleurs a { color: var(--exo2-corail); }