/**
 * css/checkout.css
 *
 * Page /sessions/ : refonte structure + lisibilité du tunnel de sélection
 * et de l'aside (panier). Visuel moderne en cohérence avec docto-theme.
 *
 * Scope : tout est préfixé par .content_sessions, #form-sessions, ou #cart
 * pour ne pas interférer avec les autres pages.
 */

:root {
	--ck-bg: #fafbfc;
	--ck-surface: #ffffff;
	--ck-border: #e5e7eb;
	--ck-border-soft: #f0f0ee;
	--ck-text: #1a1a2e;
	--ck-text-muted: #6b7280;
	--ck-text-soft: #9ca3af;
	--ck-primary: #F64522;
	--ck-primary-light: #FFF2EE;
	--ck-primary-dark: #d93a1a;
	--ck-radius: 12px;
	--ck-radius-sm: 8px;
	--ck-shadow: 0 1px 3px rgba(0,0,0,.04);
	--ck-shadow-hover: 0 4px 16px rgba(0,0,0,.08);
	--ck-transition: 180ms ease;
}

/* ══════════════════════════════════════════════════════════════════════
   Layout général : main + aside en 2 colonnes desktop
   ══════════════════════════════════════════════════════════════════════ */

#page-sessions .heading {
	padding: 40px clamp(20px, 5vw, 64px) 0;
}
#page-sessions .heading h1 {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	color: var(--ck-text);
	margin: 0 0 12px;
}

#select-profil {
	font-size: 14px;
	color: var(--ck-text-muted);
	line-height: 1.6;
	padding: 12px 16px;
	background: var(--ck-primary-light);
	border-left: 3px solid var(--ck-primary);
	border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
	margin-bottom: 0;
	max-width: 780px;
}
#select-profil a {
	color: var(--ck-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#select-profil a:hover {
	color: var(--ck-primary-dark);
}

.content_sessions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 32px;
	align-items: start;
	padding: 0 clamp(20px, 5vw, 64px) 64px;
}

#page-sessions main#sessions {
	padding: 24px 0 0;
	min-width: 0;
}

/* Notifications (erreurs, messages) */
#notifications {
	margin-bottom: 20px;
}
#notifications:empty {
	display: none;
}
#notifications > div {
	padding: 12px 16px;
	border-radius: var(--ck-radius-sm);
	font-size: 14px;
	margin-bottom: 8px;
	background: #fff4e5;
	border-left: 3px solid #f59e0b;
	color: #78350f;
}
#notifications > div.error {
	background: #fef2f2;
	border-left-color: #dc2626;
	color: #991b1b;
}
#notifications > div.success {
	background: #f0fdf4;
	border-left-color: #16a34a;
	color: #166534;
}

/* ══════════════════════════════════════════════════════════════════════
   Formulaire principal : liste des formations avec sessions à venir
   ══════════════════════════════════════════════════════════════════════ */

#form-sessions h2,
#form-sessions h3 {
	margin: 0;
}

form#select-sessions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#select-sessions .block {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 24px 28px;
	margin: 0;
	box-shadow: var(--ck-shadow);
	transition: box-shadow var(--ck-transition), border-color var(--ck-transition);
	scroll-margin-top: 100px; /* pour les anchors #formation-* */
}
#select-sessions .block:hover {
	box-shadow: var(--ck-shadow-hover);
}

/* Bloc ciblé par l'URL hash : highlight accent */
#select-sessions .block:target {
	border: 2px solid var(--ck-primary) !important;
	box-shadow: 0 0 0 4px var(--ck-primary-light), var(--ck-shadow-hover);
	order: -1;
}

#select-sessions .block h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ck-text);
	line-height: 1.3;
	margin: 0;
}

/* ── Header card formation : thumbnail + titre + formateurs ───────── */
.training-block-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}
.training-block-header__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.training-thumb {
	flex-shrink: 0;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: var(--ck-radius-sm);
	overflow: hidden;
	background: var(--ck-bg);
	line-height: 0;
}
.training-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--ck-transition);
}
.training-thumb:hover img {
	transform: scale(1.05);
}

/* Liste des formateurs (pills avec avatar) */
.training-speakers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.training-speaker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 3px;
	background: var(--ck-bg);
	border: 1px solid var(--ck-border);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ck-text);
	line-height: 1.2;
	transition: border-color var(--ck-transition), background var(--ck-transition);
}
.training-speaker:hover {
	border-color: var(--ck-primary);
	background: var(--ck-primary-light);
}
.training-speaker__avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--ck-primary-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.training-speaker__avatar--placeholder {
	color: var(--ck-primary);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .02em;
}
.training-speaker__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

/* Header description : durée + lien découvrir + tarif */
#select-sessions .description_session {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	font-size: 14px;
	color: var(--ck-text-muted);
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ck-border-soft);
}
#select-sessions .description_session .desc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: var(--ck-primary-light);
	color: var(--ck-primary);
	font-weight: 600;
	border-radius: 999px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
#select-sessions .description_session a {
	color: var(--ck-text);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ck-transition), color var(--ck-transition);
}
#select-sessions .description_session a:hover {
	color: var(--ck-primary);
	border-bottom-color: var(--ck-primary);
}
#select-sessions .description_session .tarif {
	margin-left: auto;
	font-weight: 700;
	color: var(--ck-text);
	font-size: 15px;
}

/* ── Liste des sessions à venir : cards radio ───────────────────── */
#select-sessions ul.next-sessions {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}
#select-sessions ul.next-sessions li {
	background: var(--ck-surface);
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 0;
	margin: 0;
	transition: border-color var(--ck-transition), background var(--ck-transition), box-shadow var(--ck-transition);
}
#select-sessions ul.next-sessions li:hover:not(.full) {
	border-color: var(--ck-primary);
	box-shadow: 0 2px 8px rgba(246,69,34,.08);
}

/* Label occupe toute la card (cliquable partout) */
#select-sessions ul.next-sessions li label {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	color: var(--ck-text);
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Checkbox native stylée */
#select-sessions ul.next-sessions li input[type="checkbox"] {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--ck-primary);
	cursor: pointer;
}

/* Container des infos (date + durée / complet) */
#select-sessions ul.next-sessions li label > span,
#select-sessions ul.next-sessions li label .date,
#select-sessions ul.next-sessions li label .duration,
#select-sessions ul.next-sessions li label .full-session {
	display: block;
	line-height: 1.4;
}

#select-sessions ul.next-sessions li .date {
	font-weight: 700;
	font-size: 16px;
	color: var(--ck-text);
	letter-spacing: -.01em;
	margin-bottom: 4px;
}
#select-sessions ul.next-sessions li .duration {
	font-size: 13px;
	color: var(--ck-text-muted);
	font-weight: 400;
}

/* Quand une card est cochée : bordure accent + fond léger */
#select-sessions ul.next-sessions li:has(input[type="checkbox"]:checked) {
	border-color: var(--ck-primary);
	background: var(--ck-primary-light);
	box-shadow: 0 0 0 2px rgba(246,69,34,.08);
}

/* Session pleine : disabled + barré */
#select-sessions ul.next-sessions li.full {
	opacity: .6;
	cursor: not-allowed;
	background: #f9fafb;
}
#select-sessions ul.next-sessions li.full label {
	cursor: not-allowed;
}
#select-sessions ul.next-sessions li.full .date {
	text-decoration: line-through;
	color: var(--ck-text-soft);
}
#select-sessions ul.next-sessions li.full .full-session {
	margin-top: 4px;
	font-size: 13px;
	color: #dc2626;
	font-weight: 500;
}
#select-sessions ul.next-sessions li.full .full-session a {
	color: var(--ck-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	pointer-events: auto;
}

/* Bouton Ajouter (pas affiché en JS-mode mais on le garde propre) */
#select-sessions .actions_btn {
	margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   Aside : panier (cart)
   ══════════════════════════════════════════════════════════════════════ */

#page-sessions #after-main,
div#cart {
	position: sticky;
	top: 24px;
	width: 100%;
	max-width: none;
}

div#cart {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 24px;
	box-shadow: var(--ck-shadow);
}

div#cart .title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ck-text-soft);
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 2px solid var(--ck-border-soft);
}

/* ── Formation dans le panier ───────────────────────── */
.selected-training {
	background: var(--ck-bg);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 16px;
	margin-bottom: 12px;
}
.selected-training:last-child {
	margin-bottom: 0;
}

.selected-training .training-title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--ck-text);
	margin-bottom: 14px;
	min-height: 0;
	display: block;
	-webkit-line-clamp: none;
	-webkit-box-orient: initial;
	overflow: visible;
}

.selected-training .subtitle {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ck-text-soft);
	margin-bottom: 8px;
	padding: 0;
	border: none;
}

/* Liste des sessions sélectionnées pour cette formation */
.selected-training ul {
	padding: 0;
	margin: 0 0 14px;
	list-style: none;
	border: none;
}
.selected-training ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: 6px;
	margin-bottom: 6px;
	transition: border-color var(--ck-transition);
}
.selected-training ul li:last-child {
	margin-bottom: 0;
}
.selected-training ul li:hover {
	border-color: var(--ck-text-soft);
}
.selected-training ul li .date {
	font-size: 13px;
	color: var(--ck-text);
	font-weight: 500;
	line-height: 1.3;
}

/* Bouton supprimer : rond discret qui devient rouge au hover */
a.delete {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #f3f4f6;
	color: var(--ck-text-muted);
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	transition: background var(--ck-transition), color var(--ck-transition), transform var(--ck-transition);
}
a.delete:hover {
	background: #fee2e2;
	color: #dc2626;
	transform: scale(1.1);
}

/* Prix de la ligne (profil + prix) */
.selected-training .item-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px dashed var(--ck-border);
	margin-top: 2px;
}

.user-profil {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ck-text-soft);
}

.profil-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--ck-text);
}

/* ── Total général du panier ─────────────────────────────── */
#cart .total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	font-size: 18px;
	margin: 18px 0 16px;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--ck-text) 0%, #000 100%);
	color: #fff;
	border-radius: var(--ck-radius-sm);
	box-shadow: 0 2px 8px rgba(26,26,46,.15);
}

#cart .total > div:first-child {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 12px;
	opacity: .9;
}

#cart .total > div:last-child {
	font-size: 22px;
	letter-spacing: -.02em;
}

#cart .total .ttc {
	font-weight: 500;
	font-size: 10px;
	opacity: .6;
	margin-left: 4px;
	letter-spacing: .05em;
}

/* Bouton Suivant (continuer vers infos) */
#cart > .btn,
#cart a.btn.primary.fill {
	display: flex !important;
	width: 100%;
	justify-content: center;
	margin-top: 4px;
	padding: 16px 24px;
}

/* Cart vide : message */
#cart > div:not(.selected-training):not(.total):not(.title) {
	padding: 20px;
	text-align: center;
	color: var(--ck-text-muted);
	font-size: 14px;
	font-style: italic;
	background: var(--ck-bg);
	border-radius: var(--ck-radius-sm);
	border: 1px dashed var(--ck-border);
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */

/* Tablette : aside plus étroite */
@media (max-width: 1200px) {
	.content_sessions {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 24px;
	}
}

/* Mobile : colonne unique, aside en dessous du main */
@media (max-width: 960px) {
	.content_sessions {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	#page-sessions #after-main,
	div#cart {
		position: relative;
		top: auto;
		order: -1; /* panier affiché EN HAUT sur mobile pour visibilité */
	}
	#select-sessions .block {
		padding: 20px;
	}
	#select-sessions .block h2 {
		font-size: 19px;
	}
	#select-sessions .description_session .tarif {
		margin-left: 0;
		width: 100%;
	}
	.training-thumb {
		width: 64px;
		height: 64px;
	}
	.training-speaker__name {
		max-width: 140px;
	}
}

@media (max-width: 560px) {
	#page-sessions .heading {
		padding: 24px 16px 0;
	}
	.content_sessions {
		padding: 0 16px 40px;
	}
	#select-sessions .block {
		padding: 16px;
	}
	#cart {
		padding: 18px;
	}
	#cart .total {
		padding: 14px 16px;
		font-size: 16px;
	}
	#cart .total > div:last-child {
		font-size: 19px;
	}
}