/**
 * Page Exo'base - 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, la galerie, la F.A.Q., la
 * bande photo et les tuiles viennent de là. On trouve ici la carte de
 * réservation du hero, les chambres, la grille tarifaire et le 360°.
 */

/* ---------- hero : la réservation à droite ---------- */
.exo2-base .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 420px; align-items: center; padding-top: 170px; }
.exo2-base-arguments { display: grid; gap: 9px; margin-top: 22px; }
.exo2-base-arguments li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.exo2 .exo2-base-arguments .exo2-coche { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exo2-corail); }

.exo2-base-carte { padding: 26px 28px 28px; }
.exo2-base-carte .exo2-h4 { margin: 6px 0 18px; }
.exo2-base-carte-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--exo2-meta); }

/* ---------- pourquoi ici ---------- */
.exo2-base-arguments-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.exo2-base-argument p { margin: 10px 0 0; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; }

/* ---------- les chambres ---------- */
.exo2-base-chambres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* La carte porte son propre rembourrage quand elle n'a pas de vignette ;
   la vignette, si elle arrive un jour, le reprend à zéro. */
.exo2-base-chambre { padding: 24px 26px 26px; display: flex; flex-direction: column; overflow: hidden; }
.exo2-base-chambre:has(> figure) { padding: 0; }
.exo2-base-chambre > figure { margin: 0; aspect-ratio: 16 / 11; overflow: hidden; background: #1a1a1a; }
.exo2-base-chambre > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exo2-base-chambre-corps { display: flex; flex-direction: column; flex: 1; }
.exo2-base-chambre:has(> figure) .exo2-base-chambre-corps { padding: 20px 22px 22px; }
.exo2-base-chambre-corps p { color: var(--exo2-meta); font-size: 14.5px; line-height: 1.55; margin: 9px 0 0; }
.exo2-base-chambre-prix {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--exo2-ligne);
}
.exo2-base-chambre-prix b { font: italic 700 20px var(--exo2-police-titre); color: #fff; letter-spacing: .6px; }
.exo2-base-chambre-prix span { font-size: 12.5px; color: var(--exo2-meta); }

/*
 * La grille tarifaire.
 *
 * Trois lignes et leur somme. Le total est en corail et un cran plus gros :
 * c'est le chiffre qu'un client retient, et celui qui se compare à une
 * demi-pension en station.
 */
.exo2-base-grille {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	margin-top: 32px; box-shadow: var(--exo2-liseret);
}
.exo2-base-grille > div { padding: 22px 24px 24px; }
.exo2-base-grille > div + div { box-shadow: inset 1px 0 0 var(--exo2-ligne); }
.exo2-base-grille b { display: block; margin: 10px 0 4px; font: italic 700 30px/1 var(--exo2-police-titre); color: #fff; letter-spacing: .8px; }
.exo2-base-grille span { font-size: 13px; line-height: 1.45; color: var(--exo2-meta); }
.exo2-base-grille-total { background: rgba(255, 255, 255, .04); }
.exo2 .exo2-base-grille-total b { color: var(--exo2-corail); font-size: 34px; }

/* « Rien n'est imposé », en bandeau sous la grille. */
.exo2-base-libre {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin-top: 24px; padding: 22px 26px; background: rgba(255, 255, 255, .04); box-shadow: var(--exo2-liseret);
}
.exo2-base-libre b { display: block; color: #fff; font: 700 17px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .3px; }
.exo2-base-libre p { margin: 6px 0 0; color: var(--exo2-meta); font-size: 15px; line-height: 1.55; max-width: 700px; }

/* ---------- les équipements ---------- */
.exo2-base-equipements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.exo2 .exo2-base-equipements li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.exo2 .exo2-base-equipements .exo2-coche { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--exo2-corail); }

/* ---------- le 360° ---------- */
.exo2-base-combis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.exo2-base-combi { padding: 24px 26px 26px; display: flex; flex-direction: column; }
.exo2-base-combi p { color: var(--exo2-meta); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.exo2-base-combi-prix {
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--exo2-ligne);
	font: italic 700 20px var(--exo2-police-titre); color: #fff; letter-spacing: .6px;
}

/* ---------- venir et rester ---------- */
.exo2-base-venir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; }
.exo2-base-venir h3 { margin: 0 0 10px; }
.exo2-base-venir p { color: var(--exo2-meta); font-size: 15px; line-height: 1.65; margin: 0; }

/* =======================================================================
   Le formulaire de réservation, habillé au design system
   =======================================================================
   Son balisage appartient à ConvertForms : on remplace son apparence, pas sa
   structure. Repris de entreprises.css, qui a résolu le même problème. */
/*
 * ConvertForms peint ses champs à partir de variables, et son sélecteur de
 * date pose par-dessus un « background-color: var(--input-background-color)
 * !important » : peindre le champ ne sert à rien, il faut reprendre la
 * variable. Or le formulaire écrit la sienne dans la page sous la forme
 * « #cf_3 { --input-background-color: #ffffff } », un sélecteur
 * d'identifiant qu'aucune classe ne bat. D'où le seul !important de cette
 * feuille : une déclaration, sur la variable, plutôt qu'un sur chaque champ.
 */
.exo2-base-carte .convertforms {
	margin: 0;
	--input-background-color: #0d0d0d !important;
	--input-color: #fff;
	--input-border-color: rgba(255, 255, 255, .22);
	--input-border-radius: 0;
	--input-placeholder-color: rgba(255, 255, 255, .35);
	--label-color: var(--exo2-meta);
}
.exo2-base-carte .convertforms .cf-label,
.exo2-base-carte .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-base-carte .convertforms .cf-required-label { color: var(--exo2-corail); }
.exo2-base-carte .convertforms .cf-control-group { margin-bottom: 14px; }
.exo2-base-carte .convertforms .cf-input,
.exo2-base-carte .convertforms input[type="text"],
.exo2-base-carte .convertforms input[type="email"],
.exo2-base-carte .convertforms input[type="tel"],
.exo2-base-carte .convertforms input[type="date"],
.exo2-base-carte .convertforms input[type="datetime-local"],
.exo2-base-carte .convertforms select,
.exo2-base-carte .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-base-carte .convertforms textarea { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.5; }
.exo2-base-carte .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-base-carte .convertforms .cf-input::placeholder,
.exo2-base-carte .convertforms textarea::placeholder { color: rgba(255, 255, 255, .35); }
.exo2-base-carte .convertforms .cf-input:focus,
.exo2-base-carte .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-base-carte .convertforms input[type="checkbox"],
.exo2-base-carte .convertforms input[type="radio"] { width: auto; height: auto; accent-color: var(--exo2-accent); margin-right: 8px; }
.exo2 .exo2-base-carte .convertforms a { color: var(--exo2-corail); }
.exo2-base-carte .convertforms button[type="submit"],
.exo2-base-carte .convertforms input[type="submit"],
.exo2-base-carte .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/46px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	padding: 0 30px 2px; cursor: pointer; width: 100%; height: auto;
}
.exo2-base-carte .convertforms button[type="submit"]:hover,
.exo2-base-carte .convertforms input[type="submit"]:hover { background-image: var(--exo2-degrade-survol); }
/* Les mentions légales et le reCAPTCHA restent discrets dans une carte. */
.exo2-base-carte .convertforms .cf-terms-text,
.exo2-base-carte .convertforms .cf-terms-text p,
.exo2-base-carte .convertforms .cf-recaptcha-branding { font-size: 11.5px; line-height: 1.5; color: var(--exo2-meta); }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1200px) {
	.exo2-base .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; }
	.exo2-base-arguments-grille { grid-template-columns: minmax(0, 1fr); }
	.exo2-base-chambres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-base-combis { grid-template-columns: minmax(0, 1fr); }
	.exo2-base-venir { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.exo2-base-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-base-grille > div + div { box-shadow: inset 1px 0 0 var(--exo2-ligne), inset 0 1px 0 var(--exo2-ligne); }
	.exo2-base-equipements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-base .exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
	.exo2-base-carte { margin-top: 28px; padding: 22px 18px 24px; }
	.exo2-base-chambres { grid-template-columns: minmax(0, 1fr); }
	.exo2-base-grille { grid-template-columns: minmax(0, 1fr); }
	.exo2-base-grille > div + div { box-shadow: inset 0 1px 0 var(--exo2-ligne); }
	.exo2-base-grille b { font-size: 26px; }
	.exo2 .exo2-base-grille-total b { font-size: 30px; }
	.exo2-base-equipements { grid-template-columns: minmax(0, 1fr); }
	.exo2-base-libre { display: block; }
	.exo2-base-libre .exo2-btn { margin-top: 16px; width: 100%; }
}