/**
 * Widget de réservation Amelia — habillage Caféothèque.
 *
 * Amelia v2 expose ses couleurs en variables CSS sur la racine du widget
 * (.amelia-v2-booking) : on les redéfinit plutôt que de bricoler ses classes
 * internes, qui changent d'une version à l'autre.
 *
 * Charte : brun #42240c · doré #ffd17c · crème #fcf3e5 · texte #2c3235
 */

/* COULEURS : rien ici, volontairement.
   Elles se règlent dans Amelia → Personnalisation → « Étape par étape ».
   Une version précédente de ce fichier les imposait en !important, ce qui
   rendait l'interface inopérante : tout réglage de couleur restait sans effet.
   Ne pas réintroduire de couleur ici — la main doit rester à l'administrateur. */

/* Police du widget, alignée sur le reste du site. */
.amelia-v2-booking #amelia-container.am-fs__wrapper,
.amelia-v2-booking .am-fs__wrapper{
	font-family: 'Onest', sans-serif;
}

/* LARGEUR : rien ici non plus, volontairement.
   Amelia expose sa largeur maximale en variable (--am-mw-main, réglée par
   « Largeur maximale » dans Personnalisation). Une version précédente la
   forçait à 1140px : le cadre blanc s'étalait bien au-delà du formulaire,
   qui reste centré à ~760px — d'où deux grandes bandes blanches vides de
   part et d'autre. Laisser Amelia dimensionner son cadre. */

/* ------------------------------------------------------------------
   Espace avant le formulaire.
   Amelia impose « margin-top: 100px » en dur dans sa feuille (ce n'est ni
   une variable ni un réglage de Personnalisation : rien ne permet de le
   changer depuis l'interface). Cumulé aux 60px du gabarit de page, ça
   laissait 160px de blanc entre le bandeau et le formulaire.
   ------------------------------------------------------------------ */
.amelia-v2-booking .am-fs__wrapper{ margin-top: 0 !important; }
.amelia-v2-booking{ margin: 0 0 40px; }
body:has(.amelia-v2-booking) .section.page-text{ padding-top: 40px !important; }

/* ------------------------------------------------------------------
   Bandeau « Vous réservez … », collé au sommet du formulaire.
   Le nom de l'atelier est déjà sous le titre de la page, mais il sort de
   l'écran dès qu'on descend remplir le formulaire — or le champ
   « Service » est masqué : plus rien n'indique l'atelier réservé.
   ------------------------------------------------------------------ */
.cafeo-resa-entete{
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 24px;
	box-sizing: border-box;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-family: 'Onest', sans-serif;
	text-align: left;
	background: #fcf3e5;
	border: 1px solid #f0e0c6;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}
.cafeo-resa-entete__label{
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #938655;
}
/* Le sélecteur porte deux classes à dessein : « .text-content p » du thème
   parent impose text-align:justify, et le nom de l'atelier se retrouvait
   étiré sur deux lignes en mobile (« Caféologie   &   Méthodes douces »). */
.cafeo-resa-entete .cafeo-resa-entete__nom{
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: #42240c;
}

@media (max-width: 600px){
	.cafeo-resa-entete{ padding: 14px 18px; gap: 4px; }
	.cafeo-resa-entete .cafeo-resa-entete__nom{ font-size: 18px; }
}

/* Boutons : arrondi pilule, comme partout sur le site. */
.amelia-v2-booking .am-button,
.amelia-v2-booking button[class*="am-button"]{
	border-radius: 30px !important;
	font-family: 'Onest', sans-serif;
	letter-spacing: .5px;
}

/* Première étape du formulaire : ne garder que le choix de l'atelier.
   « Collaborateur » et « Lieu » n'ont aucun sens pour le visiteur — nos
   collaborateurs sont des salles, et le lieu découle de l'atelier choisi.
   Amelia ne permet pas de les masquer depuis Personnalisation ; on s'appuie
   donc sur le fait que « Service » est le seul champ obligatoire de l'étape.
   Les deux autres restent dans la page (Amelia les renseigne tout seul,
   chaque atelier n'ayant qu'un collaborateur et qu'un lieu possibles). */
#amelia-container .am-fs__init form.el-form > .el-form-item:not(.is-required){
	display:none !important;
}

/* ------------------------------------------------------------------
   Fuites du thème parent dans le widget.
   « .text-content p » impose text-align:justify à tout paragraphe de la
   page : les intitulés d'étapes de la barre latérale se retrouvaient
   étirés (« Vous venez avec    quelqu'un ? »). On rend l'alignement à
   son conteneur plutôt que de le forcer, pour ne rien casser ailleurs
   dans le widget.
   ------------------------------------------------------------------ */
body .amelia-v2-booking p,
body .amelia-v2-booking ul,
body .amelia-v2-booking ol{
	text-align: inherit;
}

/* Pastilles des étapes : dans la barre latérale (192px utiles), l'icône et
   la pastille de progression se laissaient comprimer par le texte à côté
   — d'où les ronds ovales. On les fige au carré. */
.amelia-v2-booking .am-fs-sb__step-icon,
.amelia-v2-booking .am-fs-sb__step-checker{
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
}
.amelia-v2-booking .am-fs-sb__step-icon{
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.amelia-v2-booking .am-fs-sb__step-icon > *{
	font-size: 20px !important;
	line-height: 1 !important;
}