/*
 * assets/css/trajets.css
 * Collecte publique des trajets Mob'Sport ([epd_mes_trajets]) -
 * identité puis calendrier jour par jour. Charte MOB, mobile first.
 */

.epd-mes-trajets {
	--mob-vert: #17AF97;
	--mob-vert-deep: #0E7D6B;
	--mob-jaune: #FFE054;
	--mob-jaune3: #F8DC09;
	--mob-vert3: #78C7C9;
	--mob-texte: #1D1D1B;
	--mob-creme: #F8F6F2;
	font-family: "Rethink Sans", sans-serif;
	max-width: 760px;
	margin: 0 auto;
}

.epd-mes-trajets h3 {
	font-family: "Loos Extended", sans-serif;
	color: #FBFD03;
	margin: 0 0 12px 0;
}

.epd-mes-trajets section.trj-etape {
	padding: 0;
}

.epd-mes-trajets .trj-intro {
	color: #ffffff;
	font-size: 1.6rem;
}

.epd-mes-trajets div#trj-identite-message { color: #ffffff;}

/* ---- Champs (écran identité + mini-formulaires) ---- */
.epd-mes-trajets .form-group {
	margin-bottom: 1.2rem;
}

.epd-mes-trajets .form-group label {
	display: block;
	margin-bottom: 0.6rem;
	color: #ffffff;
	font-weight: 600;
	font-size: 1.6rem;
}

.epd-mes-trajets .form-group input,
.epd-mes-trajets .form-group select {
	width: 100%;
	padding: 1.1rem 1.4rem;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	font-size: 1.6rem;
	font-family: "Rethink Sans", sans-serif;
	font-weight: 600;
	background-color: #ffffff;
	color: var(--mob-texte);
}

.epd-mes-trajets .form-group .description {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.3rem;
	margin-top: 0.4rem;
}

.epd-mes-trajets .btn-navigation {
	display: flex;
	justify-content: center;
	margin: 1.6rem 0 2.4rem;
}

.epd-mes-trajets .btn-submit {
	font-family: "Rethink Sans", sans-serif;
	font-size: 17px;
	font-weight: 600;
	border: 2px solid var(--mob-jaune);
	border-radius: 30px;
	padding: 0 2em;
	min-height: 54px;
	background: var(--mob-jaune);
	color: var(--mob-texte);
	cursor: pointer;
	transition: all 0.3s ease;
}

.epd-mes-trajets .btn-submit:hover {
	background: var(--mob-jaune3);
	border-color: var(--mob-jaune3);
}

/* ---- Bandeau identité (écran 2) ---- */
.epd-mes-trajets .trj-bandeau {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	padding: 1rem 1.4rem;
	margin-bottom: 1.2rem;
}

.epd-mes-trajets .trj-bandeau .qui {
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: 600;
	margin-right: auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.epd-mes-trajets .trj-modifier-identite {
	background: none;
	border: none;
	color: var(--mob-jaune);
	text-decoration: underline;
	font-size: 1.4rem;
	cursor: pointer;
	font-family: "Rethink Sans", sans-serif;
}

/* ---- Total économisé ---- */
.epd-mes-trajets .trj-total {
	background: var(--mob-jaune);
	color: var(--mob-texte);
	border-radius: 14px;
	padding: 1.2rem 1.6rem;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1.6rem;
}

/* ---- Calendrier ---- */
.epd-mes-trajets .trj-calendrier {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.epd-mes-trajets .trj-jour {
	background: #ffffff;
	border-radius: 16px;
	padding: 1.2rem 1.6rem;
}

.epd-mes-trajets .trj-jour.aujourdhui {
	outline: 3px solid var(--mob-jaune);
}

.epd-mes-trajets .trj-jour-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.epd-mes-trajets .trj-jour-head .d b {
	color: var(--mob-texte);
	font-size: 1.6rem;
	text-transform: capitalize;
}

.epd-mes-trajets .trj-jour-head .d em {
	color: var(--mob-vert);
	font-style: normal;
	font-weight: 700;
	font-size: 1.3rem;
	margin-left: 0.6rem;
}

.epd-mes-trajets .trj-ajouter {
	background: transparent;
	border: 2px solid var(--mob-vert);
	color: var(--mob-vert);
	border-radius: 30px;
	padding: 0.7rem 1.4rem;
	font-family: "Rethink Sans", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.25s ease;
}

.epd-mes-trajets .trj-ajouter:hover {
	background: var(--mob-vert);
	color: #ffffff;
}

/* Trajets déjà déclarés du jour */
.epd-mes-trajets .trj-ligne {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 1px solid #efefec;
	padding: 0.8rem 0 0.2rem;
	margin-top: 0.8rem;
	font-size: 1.4rem;
}

.epd-mes-trajets .trj-ligne .motif {
	background: var(--mob-creme);
	color: var(--mob-texte);
	border-radius: 20px;
	padding: 0.2rem 1rem;
	font-weight: 700;
}

.epd-mes-trajets .trj-ligne .mode {
	color: var(--mob-texte);
	margin-right: auto;
}

.epd-mes-trajets .trj-ligne .km {
	color: #6b6b68;
}

.epd-mes-trajets .trj-ligne .eco {
	color: var(--mob-vert-deep);
	font-weight: 700;
}

.epd-mes-trajets .trj-ligne .co2 {
	color: #6b6b68;
	font-weight: 600;
}

/* ---- Mini-formulaire d'un jour ---- */
.epd-mes-trajets .trj-jour-form {
	border-top: 2px dashed var(--mob-vert3);
	margin-top: 1rem;
	padding-top: 1.2rem;
}

.epd-mes-trajets .trj-jour-form .form-group label {
	color: var(--mob-texte);
	font-size: 1.4rem;
	margin-bottom: 0.4rem;
}

.epd-mes-trajets .trj-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 1.2rem;
}

.epd-mes-trajets .trj-modifie .q {
	display: block;
	color: var(--mob-texte);
	font-weight: 700;
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
}

.epd-mes-trajets .trj-ouinon {
	display: flex;
	gap: 1rem;
}

.epd-mes-trajets .trj-ouinon label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--mob-creme);
	border-radius: 20px;
	padding: 0.5rem 1.4rem;
	color: var(--mob-texte);
	font-weight: 600;
	font-size: 1.4rem;
	cursor: pointer;
	margin: 0;
	white-space: nowrap;
	width: max-content;
}

.epd-mes-trajets .trj-ouinon label:has(input:checked) {
	background: var(--mob-jaune);
}

.epd-mes-trajets .trj-ouinon input {
	margin: 0;
	accent-color: var(--mob-vert);
}

.epd-mes-trajets .trj-avant {
	background: var(--mob-creme);
	border-radius: 12px;
	padding: 1rem 1.2rem;
	margin-bottom: 1rem;
}

.epd-mes-trajets .trj-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	align-items: center;
}

.epd-mes-trajets .trj-form-actions .btn-submit {
	min-height: 44px;
	font-size: 14px;
	color: var(--mob-texte);
}

.epd-mes-trajets .trj-annuler {
	background: none;
	border: none;
	color: #6b6b68;
	text-decoration: underline;
	cursor: pointer;
	font-family: "Rethink Sans", sans-serif;
	font-size: 1.4rem;
}

/* ---- Fermé ---- */
.epd-mes-trajets .alert {
	background: var(--mob-creme);
	color: var(--mob-texte);
	border-radius: 14px;
	padding: 1.6rem 2rem;
	font-size: 1.6rem;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
	.epd-mes-trajets .trj-jour-head {
		flex-direction: column;
		align-items: stretch;
	}

	.epd-mes-trajets .trj-ajouter {
		width: 100%;
	}
}

/* ---- Bandeau d'appel + modale ([epd_mes_trajets affichage="modal"]) ---- */

.trj-cta-bandeau {
	font-family: "Rethink Sans", sans-serif;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 1.8rem 2.2rem;
	border-radius: 22px;
	background: linear-gradient(340deg, #0E7D6B 0%, #0E2451 100%);
	color: #ffffff;
	box-shadow: 0 10px 26px rgba(14, 36, 81, 0.10);
}

body.logged-in .trj-cta-bandeau.epd-programme-mobsport{
	margin: 60px 0;
}

/* Variante fixée en bas du viewport ([epd_mes_trajets ... fixe="bas"]) :
   glisse hors de l'écran quand on remonte la page (classe trj-cache
   posée par trajets.js), réapparaît quand on redescend. */
.trj-cta-bandeau.trj-cta-fixe {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 24px;
	z-index: 9990;
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.4rem 2rem;
	box-shadow: 0 18px 44px rgba(14, 36, 81, 0.35);
	transition: transform 0.35s ease;
}

@media (max-width: 1370px) {
	.trj-cta-bandeau.trj-cta-fixe{
		left: 24px!important;
		right: 92px!important;
		bottom: 24px!important;
	}
}

.trj-cta-bandeau.trj-cta-fixe.trj-cache {
	transform: translateY(calc(100% + 24px));
}

/* Bouton réduire/agrandir du bandeau fixé - mobile uniquement : replié,
   le bandeau ne garde que son titre sur une ligne ; un tap sur le « + »
   (ou n'importe où sur le bandeau replié) le rouvre. */
.trj-cta-bandeau .trj-reduire {
	display: none;
}

@media (max-width: 767px) {
	.trj-cta-bandeau.trj-cta-fixe .trj-reduire {
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
		width: 30px;
		height: 30px;
		border: 1.5px solid rgba(255, 224, 84, 0.6);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.12);
		cursor: pointer;
		text-decoration: none;
		padding: 0;
	}

	/* Le −/+ est dessiné en CSS (le glyphe texte rendait comme un « _ ») */
	.trj-cta-bandeau.trj-cta-fixe .trj-reduire span {
		display: none;
	}

	.trj-cta-bandeau.trj-cta-fixe .trj-reduire::before,
	.trj-cta-bandeau.trj-cta-fixe .trj-reduire::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #FFE054;
		border-radius: 2px;
	}

	.trj-cta-bandeau.trj-cta-fixe .trj-reduire::before {
		width: 12px;
		height: 2.5px;
	}

	.trj-cta-bandeau.trj-cta-fixe .trj-reduire::after {
		width: 2.5px;
		height: 12px;
		opacity: 0;
	}

	.trj-cta-bandeau.trj-cta-fixe.trj-reduit .trj-reduire::after {
		opacity: 1;
	}

	.trj-cta-bandeau.trj-cta-fixe {
		padding-top: 1.6rem;
	}

	/* Le titre centré laisse la place du bouton de chaque côté */
	.trj-cta-bandeau.trj-cta-fixe .trj-cta-texte b {
		padding: 0 36px;
	}

	/* État replié : titre seul, aligné à gauche, hauteur minimale */
	.trj-cta-bandeau.trj-cta-fixe.trj-reduit {
		padding: 10px 48px 10px 16px;
		gap: 0;
		cursor: pointer;
	}

	.trj-cta-bandeau.trj-cta-fixe.trj-reduit .trj-cta-texte span,
	.trj-cta-bandeau.trj-cta-fixe.trj-reduit .trj-ouvrir-modal,
	.trj-cta-bandeau.trj-cta-fixe.trj-reduit .trj-partage {
		display: none;
	}

	.trj-cta-bandeau.trj-cta-fixe.trj-reduit .trj-cta-texte b {
		font-size: 15px;
		text-align: left;
		padding: 0;
	}

	.trj-cta-bandeau.trj-cta-fixe.trj-reduit .trj-reduire {
		top: 50%;
		transform: translateY(-50%);
	}
}

/* Titre agrandi et centré en haut du bandeau fixé ; la description et le
   bouton se répartissent en dessous. display:contents fait remonter le
   titre comme item flex direct du bandeau. */
.trj-cta-bandeau.trj-cta-fixe .trj-cta-texte {
	display: contents;
}

.trj-cta-bandeau.trj-cta-fixe .trj-cta-texte b {
	flex: 1 1 100%;
	order: -1;
	text-align: center;
	font-size: 21px;
	line-height: 1.2;
}

.trj-cta-bandeau.trj-cta-fixe .trj-cta-texte span {
	flex: 1 1 320px;
}

@media (max-width: 600px) {
	.trj-cta-bandeau.trj-cta-fixe {
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 1.2rem 1.6rem;
	}

	.trj-cta-bandeau.trj-cta-fixe .trj-cta-texte b {
		font-size: 17px;
	}
}

/* Lien à partager aux membres (référent connecté) : le club sera
   pré-sélectionné et la modale s'ouvrira via ?trajets_club=<id>. */
.trj-cta-bandeau .trj-partage {
	flex: 1 1 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.trj-cta-bandeau .trj-partage label {
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	font-weight: 600;
}

.trj-cta-bandeau .trj-partage-ligne {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.trj-cta-bandeau .trj-partage input {
	flex: 1 1 auto;
	min-width: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	color: #ffffff;
	font-family: "Rethink Sans", sans-serif;
	font-size: 13px;
	padding: 9px 16px;
	text-overflow: ellipsis;
	cursor: text;
}

.trj-cta-bandeau .trj-partage input:focus {
	outline: 2px solid #FFE054;
	outline-offset: 1px;
}

.trj-cta-bandeau .trj-copier {
	flex: 0 0 auto;
	border: 1.5px solid #FFE054;
	background: transparent;
	color: #FFE054;
	font-family: "Loos Extended", sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 30px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.trj-cta-bandeau .trj-copier:hover {
	background: #FFE054;
	color: #0E2451;
}

/* Variante « fermé » ([epd_mes_trajets affichage="modal" si_ferme="message"]) :
   même bandeau navy, plus discret, sans bouton. */
.trj-cta-bandeau.trj-ferme-bandeau {
	background: #F8F6F2;
	color: #1D1D1B;
}

.trj-cta-bandeau.trj-ferme-bandeau .trj-cta-texte b {
	color: #0E2451;
}

.trj-cta-bandeau .trj-cta-texte {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 320px;
}

.trj-cta-bandeau .trj-cta-texte b {
	font-family: "Loos Extended", sans-serif;
	font-size: 16px;
	color: #FFE054;
}

.trj-cta-bandeau .trj-cta-texte span {
	font-size: 14px;
	line-height: 1.5;
}

.trj-cta-bandeau .trj-ouvrir-modal {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	border: none;
	cursor: pointer;
	background: #FFE054;
	color: #0E2451;
	font-family: "Loos Extended", sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 40px;
	transition: transform 0.15s ease, background 0.15s ease;
}

.trj-cta-bandeau .trj-ouvrir-modal:hover {
	background: #F8DC09;
	transform: translateY(-1px);
}

/* Mobile : le bouton prend toute la largeur du bandeau - il ne peut plus
   déborder, et la zone tactile est confortable. */
@media (max-width: 600px) {
	.trj-cta-bandeau .trj-ouvrir-modal {
		width: 100%;
	}
}

/* Modale */

.trj-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(14, 36, 81, 0.6);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 2.4rem 1.2rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.trj-modal-overlay[hidden] {
	display: none;
}

.trj-modal {
	position: relative;
	width: 100%;
	max-width: 820px;
	margin: auto 0;
	/* background-color opaque en secours : le lazy-load d'Elementor supprime
	   les background-image (donc le dégradé) sur mobile - sans ce fallback
	   la modale devient transparente. */
	background-color: #0E2451;
	background-image: linear-gradient(160deg, #0E7D6B 0%, #0E2451 100%);
	border-radius: 20px;
	padding: 2.4rem 1.6rem 2.8rem;
	box-shadow: 0 24px 60px rgba(14, 36, 81, 0.4);
}

.trj-modal .trj-modal-fermer {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	font-size: 2.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.trj-modal .trj-modal-fermer:hover {
	background: rgba(255, 255, 255, 0.32);
}

body.trj-modal-ouverte {
	overflow: hidden;
}

@media (min-width: 700px) {
	.trj-modal {
		padding: 3.2rem 3.6rem 3.6rem;
	}
}