/**
 * Elsa Yoga — réservation.
 *
 * Chargée uniquement sur les pages du module. Les règles qui dépendent d'un
 * état (complet, erreur, champ piège) sont doublées en attribut style dans le
 * HTML : le Used CSS se calcule à partir d'un seul rendu de la page, et
 * supprimerait des règles qui n'y figuraient pas ce jour-là.
 */

.ecy {
	--ecy-bleu: #10069f;
	--ecy-orange: #fe782e;
	--ecy-texte: #22223b;
	--ecy-gris: #6b6b80;
	--ecy-bord: #e6e6ef;
	/* Courbe unique de tout le site : démarrage franc, arrivée amortie. Même
	   valeur que dans menu.css et footer.css. */
	--ecy-ease: cubic-bezier(.22, 1, .36, 1);
	max-width: 720px;
	margin: 0 auto;
	color: var(--ecy-texte);
	/* Sur une page service, la police vient déjà de .ecs ; sur /reserver/, qui
	   n'a pas cette enveloppe, il faut la poser pour que le module ne s'écarte
	   pas du reste du site. */
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

.ecy h2 {
	margin: 1.6em 0 0.4em;
	font-size: 1.35em;
	color: var(--ecy-bleu);
}

.ecy h3 {
	margin: 1.4em 0 0.4em;
	font-size: 1.1em;
}

.ecy p { margin: 0 0 1em; }

.ecy .ecy-intro { font-size: 1.05em; }

.ecy .ecy-note {
	font-size: 0.88em;
	color: var(--ecy-gris);
}

/* Sur les pages du module, un titre de page est posé à gauche de la colonne de
   contenu. Un bloc centré dessous s'en décale de la moitié de l'espace restant,
   et les deux ne se répondent plus. On aligne à gauche : la largeur de lecture,
   elle, ne change pas. */
.ecy-page .ecy,
.ecy-page .ecy-cal-duo {
	margin-left: 0;
	margin-right: 0;
}

.ecy-envoi__suite {
	font-weight: 600;
}

/* Messages ---------------------------------------------------------------- */

.ecy-message {
	padding: 13px 16px;
	border: 1px solid var(--ecy-bord);
	border-radius: 8px;
	background: #f2f2fb;
	color: var(--ecy-encre, #22223b);
}

.ecy-message--erreur {
	border-color: #f4c9a6;
	background: #fff4ec;
	color: #8a4416;
}

/* Boutons ----------------------------------------------------------------- */

/* Forme reprise de la charte du site : pilule, libellé gras, ombre teintée de
   la couleur du fond, léger soulèvement au survol. C'est celle du bouton
   d'appel du footer et de celui des pages piliers, à quelques pixels près.
   Trois niveaux, et un seul par bloc :
     - plein bleu  : l'action de réservation, le geste principal ;
     - orange      : ce qui mène à un achat, la couleur d'appel du site ;
     - contour     : les actions de second rang, liste d'attente et rebonds. */
.ecy .ecy-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	min-height: 46px;
	border: 0;
	border-radius: 999px;
	background: var(--ecy-bleu);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(16, 6, 159, .28);
	transition: transform .25s var(--ecy-ease), box-shadow .25s ease, background-color .25s ease;
}

.ecy .ecy-bouton:hover,
.ecy .ecy-bouton:focus-visible {
	background: #0d0580;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(16, 6, 159, .36);
}

.ecy .ecy-bouton:active { transform: translateY(0); }

/* Orange de la charte. Sur une page service, --ecs-cta est celle du thème : la
   teinte est donc exactement celle des boutons de la grille tarifaire plus bas
   sur la même page. Ailleurs, on retombe sur l'orange du footer et du menu,
   celui que le visiteur voit en haut de chaque page. */
.ecy .ecy-bouton--accent {
	background: var(--ecs-cta, #f2782e);
	box-shadow: 0 8px 22px rgba(242, 120, 46, .34);
}

.ecy .ecy-bouton--accent:hover,
.ecy .ecy-bouton--accent:focus-visible {
	background: var(--ecs-cta-hover, #dd651c);
	box-shadow: 0 12px 28px rgba(242, 120, 46, .44);
}

/* Le contour porte une bordure de 2 px : son remplissage vertical est réduit
   d'autant, pour que les trois variantes tombent à la même hauteur. */
.ecy .ecy-bouton--clair {
	padding: 12px 26px;
	border: 2px solid var(--ecy-bleu);
	background: transparent;
	color: var(--ecy-bleu);
	box-shadow: none;
}

.ecy .ecy-bouton--clair:hover,
.ecy .ecy-bouton--clair:focus-visible {
	background: #f2f2fb;
	color: var(--ecy-bleu);
	box-shadow: none;
}

/* Point 5 des écarts notés dans services.css : le mouvement au survol est
   neutralisé pour qui demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
	.ecy .ecy-bouton {
		transition: none;
	}
	.ecy .ecy-bouton:hover,
	.ecy .ecy-bouton:focus-visible,
	.ecy .ecy-bouton:active {
		transform: none;
	}
}

.ecy .ecy-lien { color: var(--ecy-bleu); }

/* Écran d'attente après l'envoi d'un lien de connexion.

   Il remplace le formulaire, il ne s'ajoute pas au-dessus : une page qui se
   recharge à l'identique avec un bandeau discret en plus ne dit rien à
   personne. Voir ecy_front_connexion(). */
.ecy-envoi {
	margin: 1.2em 0 0;
	padding: 26px 28px;
	border: 1px solid var(--ecy-bord);
	border-radius: 14px;
	background: #f7f7fd;
}

.ecy-envoi__pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: var(--ecy-bleu);
	color: #fff;
	font-size: 22px;
	line-height: 1;
}

.ecy .ecy-envoi__titre {
	margin: 0 0 8px;
	font-size: 1.3em;
	color: var(--ecy-bleu);
}

.ecy .ecy-envoi p { margin: 0 0 10px; }
.ecy .ecy-envoi p:last-child { margin: 0; }

@media (max-width: 480px) {
	.ecy-envoi { padding: 20px 18px; }
}

/* Annulation depuis un email : même panneau que l'envoi du lien, la date en
   évidence, et deux issues côte à côte, le bouton pour annuler, le lien pour
   garder sa place. Voir ecy_front_panneau_annulation(). */
/* Divi pose « p { padding-bottom: 1em } », qui doublerait chaque espacement
   décidé ici. */
.ecy .ecy-annulation p {
	padding-bottom: 0;
}

.ecy .ecy-annulation__quand {
	margin: 0 0 2px;
	font-size: 1.1em;
}

.ecy .ecy-annulation__ou {
	margin: 0 0 14px;
	color: var(--ecy-gris);
}

.ecy-annulation__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 18px;
}

.ecy .ecy-annulation__garder {
	font-weight: 600;
}

/* Formulaires ------------------------------------------------------------- */

.ecy-form { margin: 0 0 1.4em; }

.ecy-form label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.ecy-form input[type="email"],
.ecy-form input[type="text"] {
	width: 100%;
	max-width: 380px;
	min-height: 46px;
	padding: 12px 20px;
	margin: 0 0 14px;
	border: 1px solid var(--ecy-bord);
	/* La forme entièrement arrondie appartient aux boutons, et à eux seuls :
	   c'est elle qui signale qu'un élément se clique. Un champ de saisie garde
	   un angle adouci, pas une pilule. */
	border-radius: 10px;
	font-family: inherit;
	font-size: 16px;
	/* Sans cette valeur, le champ hérite du 1,6 du bloc et dépasse de deux
	   pixels le bouton qui le suit sur la même ligne. */
	line-height: 1.2;
}

.ecy-form-inline { display: inline-block; margin: 0; }

/* Champ piège : doublé en style en ligne, il ne doit jamais devenir visible. */
.ecy-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Séances ----------------------------------------------------------------- */

.ecy-liste-seances {
	list-style: none;
	margin: 0 0 1.6em;
	padding: 0;
}

.ecy-seance {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 0;
	border-top: 1px solid var(--ecy-bord);
}

.ecy-seance:first-child { border-top: 0; }

.ecy-seance__quand {
	font-weight: 700;
	font-size: 1.05em;
	text-transform: none;
}

.ecy-seance__ou,
.ecy-seance .ecy-note {
	font-size: 0.88em;
	color: var(--ecy-gris);
}

.ecy-etat {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 6px;
	background: #edf6ee;
	color: #1c6b2c;
	font-size: 0.85em;
	font-weight: 700;
}

.ecy-etat--complet { background: #fff4ec; color: #8a4416; }
.ecy-etat--prise { background: #f2f2fb; color: var(--ecy-bleu); }
/* Une place gardée attend son règlement : ambre, ni le vert d'une place
   acquise ni le rouge d'un refus. Même palette que l'état complet, le texte
   en moins sombre. */
.ecy-etat--attente { background: #fff4ec; color: #b3540d; }

.ecy-seance .ecy-form-inline,
.ecy-seance .ecy-seance__annuler { margin-top: 8px; }

/* Agenda et itinéraire, sous le cours : une ligne de liens, du même gris que
   la note d'annulation, jamais un bouton de plus à côté d'« Annuler ». */
.ecy-seance__outils {
	font-size: 0.88em;
	color: var(--ecy-gris);
}

.ecy .ecy-seance__outils .ecy-lien {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecy-solde {
	padding: 12px 16px;
	border-radius: 8px;
	background: #f7f7fb;
}

/* Tarifs ------------------------------------------------------------------ */

.ecy-tarifs {
	margin: 2em 0 0;
	padding: 18px 20px;
	border: 1px solid var(--ecy-bord);
	border-radius: 10px;
}

.ecy-tarifs ul {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.ecy-tarifs li {
	padding: 6px 0;
	border-bottom: 1px solid var(--ecy-bord);
}

.ecy-tarifs li:last-child { border-bottom: 0; }

.ecy-liste-seances--passees .ecy-seance__quand {
	font-weight: 400;
	color: var(--ecy-gris);
}

@media (min-width: 640px) {
	.ecy-seance {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px;
	}
	.ecy-seance__quand { min-width: 240px; }
	.ecy-seance .ecy-form-inline,
	.ecy-seance .ecy-seance__annuler { margin-top: 0; margin-left: auto; }
	/* Après le bouton, sur sa propre ligne : la ligne d'action reste à elle. */
	.ecy-seance__outils { flex: 1 0 100%; }
}

/* Mise en avant des cartes ------------------------------------------------- */

/* Sous le détail d'une journée sur la page des cours, et sous le solde sur
   « Mes cours » quand il est à zéro : les deux endroits où l'on est en train de
   payer une séance au prix fort. Les variables du calendrier ne sont pas en
   portée sur « Mes cours », d'où les valeurs de repli. */

.ecy-cal__cartes {
	margin: 34px 0 0;
	padding: 22px 24px 24px;
	border: 1px solid var(--ecy-cal-bord, #d5d1ee);
	border-radius: 12px;
	background: var(--ecy-cal-fond, #eeedfa);
}

/* Divi pose « p { padding-bottom: 1em } » : hors du calendrier, qui le
   neutralise déjà, le titre et le texte du bloc en hériteraient. */
.ecy .ecy-cal__cartes p {
	padding-bottom: 0;
}

/* Deux classes, comme le titre du jour : « .ecs p » impose sinon sa taille. */
.ecy .ecy-cal__cartes-titre {
	margin: 0 0 8px;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.3;
	color: var(--ecy-bleu);
}

.ecy .ecy-cal__cartes-texte {
	margin: 0 0 18px;
	font-size: 0.92em;
	line-height: 1.5;
}

.ecy-cal__cartes-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Ces boutons-là portent leur prix : c'est entre deux montants que l'on choisit
   une carte, le montant est donc l'étiquette, pas une note à côté. */
.ecy-cal__cartes-actions .ecy-bouton {
	flex: 1 1 auto;
}

/* « Une carte s'offre aussi » : une ligne de liens sous les boutons, plus
   petite et grise, le second chemin sans concurrencer le premier. */
.ecy .ecy-cal__cartes-offrir {
	margin: 14px 0 0;
	font-size: 0.88em;
	line-height: 1.5;
	color: var(--ecy-gris);
}

.ecy .ecy-cal__cartes-offrir .ecy-lien {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 480px) {
	.ecy-cal__cartes { padding: 14px 15px; }
	.ecy-cal__cartes-actions .ecy-bouton { flex: 1 1 100%; }
}

/* Inviter une amie ---------------------------------------------------------
   Le même panneau que l'annulation, avec un formulaire de trois champs. Voir
   ecy_front_panneau_invitation(). */
.ecy-invitation .ecy-form {
	margin: 18px 0 0;
}

.ecy-invitation .ecy-form textarea {
	display: block;
	width: 100%;
	max-width: 380px;
	min-height: 84px;
	padding: 12px 20px;
	margin: 0 0 14px;
	border: 1px solid var(--ecy-bord);
	border-radius: 10px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	resize: vertical;
}

.ecy-invitation .ecy-form input[type="email"],
.ecy-invitation .ecy-form input[type="text"] {
	display: block;
}

.ecy .ecy-invitation__facultatif {
	font-weight: 400;
	color: var(--ecy-gris);
}

.ecy .ecy-invitation__partage {
	margin: 24px 0 0;
	font-size: 0.9em;
}

.ecy .ecy-invitation__partage .ecy-lien {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mes achats ---------------------------------------------------------------- */

/* Même liste que les séances : un titre, une ligne grise, une pastille d'état.
   Une carte épuisée ou expirée garde sa ligne, en gris : c'est l'historique
   qu'on vient relire, pas un solde. */
.ecy-achats .ecy-seance__quand { font-size: 1em; }

.ecy-etat--fini {
	background: #f0f0f1;
	color: #50575e;
}

.ecy .ecy-achats .ecy-lien {
	font-size: 0.88em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le solde à zéro appelle les cartes juste dessous : l'encadré colle au solde
   plutôt que de flotter entre deux titres. */
.ecy-mes-cours .ecy-solde + .ecy-cal__cartes {
	margin-top: 14px;
}

/* Mon compte, la page de la boutique ------------------------------------------
   Deux blocs posés dans la page de WooCommerce (voir compte.php) : le lien par
   email au-dessus du formulaire à mot de passe, et le résumé yoga en tête du
   tableau de bord. Le .ecy racine centre une colonne de 720 px : ici il vit
   dans la colonne du compte, qui décide déjà de la largeur. */

.ecy.ecy-compte-lien {
	max-width: none;
	margin: 0 0 30px;
	padding: 24px 26px;
	border: 1px solid var(--ecy-bord);
	border-radius: 14px;
	background: #f7f7fd;
}

.ecy .ecy-compte-lien__titre {
	margin: 0 0 8px;
	font-size: 1.3em;
	color: var(--ecy-bleu);
}

.ecy.ecy-compte-lien p {
	padding-bottom: 0;
}

.ecy-compte-lien .ecy-form {
	margin: 0;
}

.ecy-compte-lien .ecy-form input[type="email"] {
	margin-bottom: 12px;
}

/* Hors du bloc .ecy : la variable n'est pas en portée, d'où la valeur en dur. */
.ecy-compte-intro {
	margin: 0 0 16px;
	color: #6b6b80;
	font-size: 0.95em;
}

.ecy.ecy-compte-yoga {
	max-width: none;
	margin: 0 0 28px;
	padding: 22px 26px 24px;
	border-radius: 14px;
	background: var(--ecy-bleu);
	color: #fff;
	box-shadow: 0 1px 2px rgba(16, 6, 159, .08), 0 14px 34px rgba(16, 6, 159, .18);
}

.ecy .ecy-compte-yoga__titre {
	margin: 0 0 10px;
	font-size: 1.2em;
	color: #fff;
}

.ecy .ecy-compte-yoga__ligne {
	margin: 0 0 4px;
	padding-bottom: 0;
}

.ecy .ecy-compte-yoga__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 16px 0 0;
	padding-bottom: 0;
}

.ecy.ecy-compte-yoga .ecy-bouton {
	background: #fff;
	color: var(--ecy-bleu);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.ecy.ecy-compte-yoga .ecy-bouton:hover,
.ecy.ecy-compte-yoga .ecy-bouton:focus-visible {
	background: #f2f2fb;
	color: var(--ecy-bleu);
}

.ecy.ecy-compte-yoga .ecy-lien {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 480px) {
	.ecy.ecy-compte-lien,
	.ecy.ecy-compte-yoga { padding: 20px 18px; }
}