/* Planning CLC — styles front + éditeur, charte CLC :
   coins asymétriques (0 18px 18px 18px), ombre dure noire, police du thème
   via --clc-font, accent par secteur via --clc-plan-accent (défini en JSON).
   Layout fluide : container queries → s'adapte à une colonne, une sidebar
   ou une pleine page sans média queries d'écran. */

.clc-planning {
	--clc-plan-accent: #e91e8c; /* rose CLC par défaut */
	--clc-plan-fs: 15px;         /* corps du texte, réglable par bloc */
	--clc-plan-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.85); /* ombre des cartes */
	font-family: var(--clc-font, Arial, sans-serif);
	font-size: var(--clc-plan-fs);
	container-type: inline-size;
}

.clc-plan-secteur {
	margin: 0 0 34px;
	scroll-margin-top: 90px; /* dégagement sous un en-tête fixe lors d'un saut d'ancre */
}

/* Titre de secteur : cartouche couleur, coins signature CLC. */
.clc-plan-titre {
	display: inline-block;
	margin: 0 0 14px;
	padding: 8px 22px;
	background: var(--clc-plan-accent);
	color: #fff;
	font-size: 1.33em;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 0 16px 0 16px;
	box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.85);
}

.clc-plan-note-secteur {
	margin: 0 0 14px;
	font-size: 0.93em;
	font-style: italic;
	color: var(--clc-text-soft, #444);
	line-height: 1.5;
}

/* --- Cartes de cours ----------------------------------------------------- */

/* Colonnes CSS plutôt qu'une grille : une carte à un seul créneau garde sa
   hauteur naturelle et la carte suivante remonte juste en dessous, au lieu
   de s'étirer sur toute la hauteur de la ligne. */
.clc-plan-liste {
	columns: 1;
	column-gap: 16px;
}

/* Nombre de colonnes selon la largeur du conteneur (pleine page, colonne,
   sidebar) : 1 en étroit, 2 dès 720px, 3 au-delà de 1100px. */
@container (min-width: 720px) {
	.clc-plan-liste {
		columns: 2;
	}
}

/* Trois colonnes seulement quand le secteur a de quoi les remplir
   (classe posée par PHP à partir de 5 activités) : sinon une colonne
   resterait vide dès qu'une carte est bien plus haute que les autres. */
@container (min-width: 1100px) {
	.clc-plan-liste--dense {
		columns: 3;
	}
}

/* Une seule activité : une seule colonne, pas de colonne fantôme à côté. */
.clc-plan-liste--solo {
	columns: 1;
}

/* --- Largeur de la liste : « bloc parent » ou « contenu » ---------------- */

/* Mode « contenu » : les colonnes se calent sur l'activité la plus large
   au lieu de se partager toute la largeur du bloc. La liste peut donc être
   plus étroite que son parent — jamais plus large (max-width). */
[data-clc-largeur='contenu'] .clc-plan-liste {
	width: fit-content;
	max-width: 100%;
}

/* Sans plafond, la largeur « au contenu » serait dictée par la plus longue
   phrase de note, écrite sur une seule ligne. */
[data-clc-largeur='contenu'] .clc-plan-note-cours {
	max-width: 34em;
}

/* Le mode « bloc » est le comportement par défaut : rien à déclarer. */

.clc-plan-cours {
	background: var(--clc-bg, #fff);
	border-radius: 0 18px 18px 18px;
	box-shadow: var(--clc-plan-shadow);
	padding: 16px 18px 14px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	/* En colonnes CSS, l'écart vertical se règle sur la carte (pas de row-gap)
	   et une carte ne doit jamais être coupée entre deux colonnes. */
	margin: 0 0 16px;
	break-inside: avoid;
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	/* Le fond doit être opaque : les cartes se chevauchent visuellement au
	   survol (translateY) dans un flux en colonnes. */
	position: relative;
}

.clc-plan-liste > .clc-plan-cours:last-child {
	margin-bottom: 0;
}

.clc-plan-cours:hover {
	transform: translateY(-4px);
}

.clc-plan-cours-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: 8px;
}

.clc-plan-nom {
	font-size: 1.13em;
	font-weight: 800;
	color: var(--clc-text, #111);
	border-bottom: 3px solid var(--clc-plan-accent);
	padding-bottom: 2px;
}

.clc-plan-prof {
	font-size: 0.87em;
	color: var(--clc-text-soft, #666);
}

.clc-plan-tarif-cours {
	margin-left: auto;
	text-align: right;
}

/* --- Créneaux ------------------------------------------------------------ */

.clc-plan-creneaux {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clc-plan-creneau {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	padding: 6px 0;
	font-size: 0.93em;
	line-height: 1.45;
	border-bottom: 1px dashed #e5e5e5;
}

.clc-plan-creneau:last-child {
	border-bottom: none;
}

.clc-plan-jour {
	font-weight: 700;
	color: var(--clc-text, #111);
	min-width: 5.2em;
}

.clc-plan-heure {
	color: var(--clc-text, #111);
	white-space: nowrap;
}

.clc-plan-public {
	color: var(--clc-text-soft, #666);
}

.clc-plan-tarif {
	margin-left: auto;
	font-weight: 700;
	color: var(--clc-plan-accent);
	font-variant-numeric: tabular-nums;
	font-size: 0.93em;
}

.clc-plan-freq {
	display: inline-block;
	background: rgba(0, 0, 0, 0.06);
	color: var(--clc-text-soft, #555);
	border-radius: 999px;
	padding: 0 8px;
	font-size: 0.8em;
	white-space: nowrap;
}

.clc-plan-fournitures {
	display: block;
	font-weight: 400;
	font-size: 0.8em;
	color: var(--clc-text-soft, #666);
}

.clc-plan-note-cours {
	margin: 8px 0 0;
	font-size: 0.87em;
	font-style: italic;
	color: var(--clc-text-soft, #666);
	line-height: 1.4;
}

.clc-plan-legende {
	margin: 12px 2px 0;
	font-size: 0.83em;
	font-style: italic;
	color: var(--clc-text-soft, #777);
	line-height: 1.5;
}

/* --- Colonne très étroite (sidebar) -------------------------------------- */

@container (max-width: 340px) {
	.clc-plan-titre {
		font-size: 16px;
		padding: 6px 14px;
	}
	.clc-plan-cours {
		padding: 12px 14px 10px;
	}
	.clc-plan-creneau {
		flex-direction: column;
		gap: 1px;
	}
	.clc-plan-jour {
		min-width: 0;
	}
	.clc-plan-tarif {
		margin-left: 0;
	}
	.clc-plan-tarif-cours {
		margin-left: 0;
		text-align: left;
	}
}

/* --- Navigation (mode liste) -------------------------------------------- */

.clc-plan-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.clc-plan-nav-link {
	display: inline-block;
	padding: 6px 14px;
	border: 2px solid var(--clc-plan-accent);
	border-radius: 999px;
	color: var(--clc-plan-accent);
	background: #fff;
	font-weight: 700;
	font-size: 0.88em;
	text-decoration: none;
	line-height: 1.3;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.clc-plan-nav-link:hover,
.clc-plan-nav-link:focus {
	background: var(--clc-plan-accent);
	color: #fff;
	transform: translateY(-2px);
}

/* --- Accordéon (balises <details>) -------------------------------------- */

/* Barre du raccourci « tout déplier », discrète et alignée à droite. */
.clc-plan-accordeon-barre {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 10px;
}

.clc-plan-toutdeplier {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--clc-text-soft, #666);
	font-family: inherit;
	font-size: 0.82em;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 0 8px 0 8px;
	transition: color 0.2s ease, background 0.2s ease;
}

.clc-plan-toutdeplier:hover,
.clc-plan-toutdeplier:focus {
	color: #fff;
	background: var(--clc-plan-accent);
}

.clc-plan-toutdeplier-icone {
	font-weight: 800;
}

.clc-plan-accordeon .clc-plan-panneau {
	margin: 0 0 12px;
	border: 2px solid var(--clc-plan-accent);
	/* Coins asymétriques signature CLC. */
	border-radius: 0 16px 16px 16px;
	overflow: hidden;
	scroll-margin-top: 90px;
}

/* Barre de titre pleine largeur, colorée. */
.clc-plan-accordeon-titre {
	display: block;
	margin: 0;
	padding: 13px 44px 13px 18px;
	background: var(--clc-plan-accent);
	color: #fff;
	font-size: 1.15em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	list-style: none;
	position: relative;
	box-shadow: none;
	border-radius: 0;
}

.clc-plan-accordeon-titre::-webkit-details-marker {
	display: none;
}

/* Chevron ouvert/fermé */
.clc-plan-accordeon-titre::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.clc-plan-panneau[open] .clc-plan-accordeon-titre::after {
	transform: translateY(-30%) rotate(225deg);
}

/* Corps : fond dans la couleur du secteur, éclaircie. */
.clc-plan-accordeon-corps {
	padding: 18px;
	background: #fbfbfb;
	background: color-mix( in srgb, var(--clc-plan-accent) 8%, #fff );
}

/* Ouverture / fermeture animée.
   La hauteur d'un <details> n'est pas interpolable : on anime donc une piste
   de grille (0fr → 1fr) sur ::details-content, technique supportée partout.
   content-visibility est une propriété discrète — sans allow-discrete, le
   contenu disparaîtrait d'un coup à la fermeture, sans laisser l'animation
   se jouer. Les navigateurs sans ::details-content ignorent ces règles et
   retrouvent l'ouverture instantanée d'origine. */
.clc-plan-accordeon .clc-plan-panneau::details-content {
	display: grid;
	/* minmax( 0, … ) et pas « 0fr » seul : le minimum automatique d'une piste
	   vaut la taille min-content de son contenu, padding compris — la
	   fermeture se serait arrêtée sur les 36px de padding du corps. */
	grid-template-rows: minmax( 0, 0fr );
	overflow: hidden;
	content-visibility: hidden;
	transition:
		grid-template-rows 0.26s ease,
		content-visibility 0.26s allow-discrete;
}

.clc-plan-accordeon .clc-plan-panneau[open]::details-content {
	grid-template-rows: minmax( 0, 1fr );
	content-visibility: visible;
}

/* Une piste 0fr ne comprime son contenu que si celui-ci accepte de passer
   sous sa hauteur minimale automatique. */
.clc-plan-accordeon .clc-plan-accordeon-corps {
	min-height: 0;
	opacity: 0;
	transform: translateY(-5px);
	transition: opacity 0.22s ease, transform 0.26s ease;
}

.clc-plan-accordeon .clc-plan-panneau[open] .clc-plan-accordeon-corps {
	opacity: 1;
	transform: none;
}

/* Réglage système « réduire les animations » : on coupe tout. */
@media (prefers-reduced-motion: reduce) {
	.clc-plan-accordeon .clc-plan-panneau::details-content,
	.clc-plan-accordeon .clc-plan-accordeon-corps,
	.clc-plan-accordeon-titre::after {
		transition: none;
	}
	.clc-plan-accordeon .clc-plan-accordeon-corps {
		opacity: 1;
		transform: none;
	}
}

/* --- Onglets ------------------------------------------------------------ */

.clc-plan-onglets-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 -2px;
}

.clc-plan-onglet {
	appearance: none;
	border: 2px solid var(--clc-plan-accent);
	background: #fff;
	color: var(--clc-plan-accent);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.92em;
	padding: 9px 18px;
	/* Coins asymétriques signature CLC (haut). */
	border-radius: 0 14px 0 0;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.clc-plan-onglet:hover {
	transform: translateY(-2px);
}

/* Onglet actif : fond coloré, texte blanc (comme l'accordéon). */
.clc-plan-onglet.clc-actif {
	background: var(--clc-plan-accent);
	color: #fff;
}

.clc-plan-onglets-corps {
	margin-top: -2px;
}

/* Panneau : fond dans la couleur du secteur, éclaircie ; coins asymétriques. */
.clc-plan-onglet-panneau {
	margin: 0;
	padding: 22px 20px;
	border: 2px solid var(--clc-plan-accent);
	border-radius: 0 16px 16px 16px;
	background: #fbfbfb;
	background: color-mix( in srgb, var(--clc-plan-accent) 8%, #fff );
}

/* Le panneau « Tous » est sans cadre : chaque secteur porte sa propre teinte. */
.clc-plan-panneau-tous {
	padding: 0;
	border: none;
	background: none;
}

.clc-plan-panneau-tous .clc-plan-secteur {
	padding: 16px;
	margin: 0 0 20px;
	border-radius: 0 14px 14px 14px;
	background: color-mix( in srgb, var(--clc-plan-accent) 8%, #fff );
}

.clc-plan-panneau-tous .clc-plan-secteur:last-child {
	margin-bottom: 0;
}

/* Sans JavaScript, tous les panneaux restent affichés (dégradation propre).
   Le script ajoute la classe « clc-onglets-js » au bloc pour n'afficher que
   le panneau actif. */
.clc-onglets-js .clc-plan-onglet-panneau {
	display: none;
}

.clc-onglets-js .clc-plan-onglet-panneau.clc-actif {
	display: block;
}

/* --- Éditeur ------------------------------------------------------------- */

.editor-styles-wrapper .clc-planning {
	max-width: 100%;
}