/*
 * Page « Réserver un espace ».
 * Couleurs et polices du thème du centre.
 */

.charmilles-resa {
	--cr-jaune: #F8D03F;
	--cr-orange: #EE7623;
	--cr-bleu: #3A8DDE;
	--cr-noir: #141414;
	--cr-gris: #5C5C5C;
	--cr-gris-clair: #E6E6E6;
	--cr-fond: #F7F7F7;
	--cr-rayon: 18px;
	font-family: 'Poppins', Arial, sans-serif;
	color: var(--cr-noir);
}

.charmilles-resa *,
.charmilles-resa *::before,
.charmilles-resa *::after { box-sizing: border-box; }

.cr-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.charmilles-resa section { padding: 64px 0; }
/*
 * Les titres sont forcés en Poppins, comme la maquette validée.
 * Le thème impose « DIN » à h1, h2 et h3, et cette famille est déclarée deux
 * fois pour la même graisse : la seconde déclaration, DIN-BlackAlternate,
 * l'emporte et sa table de caractères est fautive : « ç » s'affiche « Á » et
 * le tiret cadratin « ó ». Tant que le thème n'est pas corrigé, on s'en tient
 * à l'écart.
 */
.charmilles-resa h1,
.charmilles-resa h2,
.charmilles-resa h3,
.charmilles-resa legend,
.charmilles-resa .cr-fiche-titre { font-family: 'Poppins', Arial, sans-serif; }

.charmilles-resa h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.cr-sous-titre { color: var(--cr-gris); margin: 0 0 32px; max-width: 620px; }

/* Bandeau d'accroche */
.cr-hero { background: var(--cr-jaune); }
.cr-hero .cr-wrap { max-width: 900px; padding-top: 8px; padding-bottom: 8px; }
.cr-surtitre { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; }
.cr-hero h1 { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.cr-intro { font-size: clamp(16px, 2vw, 19px); max-width: 660px; margin: 0 0 26px; }
.cr-reperes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cr-reperes li { background: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 14px; }

/* Onglets de niveau */
.cr-niveaux { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.cr-niveau {
	border: 2px solid var(--cr-noir); background: #fff; border-radius: 999px;
	padding: 11px 22px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
	color: var(--cr-noir); transition: background .15s, color .15s;
}
.cr-niveau[aria-selected="true"] { background: var(--cr-noir); color: #fff; }
.cr-niveau:focus-visible { outline: 3px solid var(--cr-bleu); outline-offset: 2px; }

/* Plan et fiches */
.cr-grille { display: grid; grid-template-columns: 1.35fr .85fr; gap: 28px; align-items: start; }
.cr-planbox { background: #fff; border: 1px solid var(--cr-gris-clair); border-radius: var(--cr-rayon); padding: 14px; }
.cr-plan { position: relative; }
.cr-plan img { display: block; width: 100%; height: auto; border-radius: 10px; }
.cr-legende { font-size: 13px; color: var(--cr-gris); margin: 10px 4px 2px; }

.cr-pastille {
	position: absolute; transform: translate(-50%, -50%);
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--cr-bleu); color: #fff; border: 3px solid #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
	font: 700 15px/1 'Poppins', Arial, sans-serif;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; transition: transform .18s, background .18s;
}
.cr-pastille:hover { transform: translate(-50%, -50%) scale(1.12); }
.cr-pastille[aria-pressed="true"] { background: var(--cr-jaune); color: var(--cr-noir); transform: translate(-50%, -50%) scale(1.22); }
.cr-pastille:focus-visible { outline: 3px solid var(--cr-noir); outline-offset: 3px; }
.cr-pastille--indisponible { background: #999898; cursor: not-allowed; }
.cr-pastille--indisponible:hover { transform: translate(-50%, -50%); }

.cr-fiches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cr-fiche {
	display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
	background: #fff; border: 1px solid var(--cr-gris-clair); border-radius: 14px;
	padding: 16px; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.cr-fiche:hover { border-color: var(--cr-noir); }
.cr-fiche[aria-pressed="true"] { border-color: var(--cr-jaune); box-shadow: 0 0 0 3px var(--cr-jaune); }
.cr-fiche:focus-visible { outline: 3px solid var(--cr-bleu); outline-offset: 2px; }
.cr-fiche--indisponible { opacity: .55; cursor: not-allowed; }
.cr-numero {
	flex: 0 0 32px; height: 32px; border-radius: 50%;
	background: var(--cr-bleu); color: #fff; font-weight: 700; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.cr-fiche[aria-pressed="true"] .cr-numero { background: var(--cr-jaune); color: var(--cr-noir); }
.cr-fiche-texte { display: block; }
.cr-fiche-titre { display: block; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.cr-fiche-surface { display: block; font-size: 14px; font-weight: 700; color: var(--cr-orange); margin-bottom: 4px; }
.cr-fiche-desc { display: block; font-size: 14px; color: var(--cr-gris); line-height: 1.5; }
.cr-indispo { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cr-gris); }

.cr-choisi { margin: 22px 0 14px; font-size: 14px; color: var(--cr-gris); }
.cr-choisi strong { color: var(--cr-noir); }

/* Étapes */
.cr-etapes { background: #FFF9E3; }
.cr-liste-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; counter-reset: cr-etape; }
.cr-liste-etapes li { background: #fff; border: 1px solid var(--cr-gris-clair); border-radius: var(--cr-rayon); padding: 28px; counter-increment: cr-etape; }
.cr-liste-etapes li::before {
	content: counter(cr-etape); display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%; background: var(--cr-jaune);
	font-weight: 800; margin-bottom: 14px;
}
.cr-liste-etapes h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.cr-liste-etapes p { margin: 0; color: var(--cr-gris); font-size: 15px; }

/* Formulaire */
.cr-demande { background: var(--cr-fond); }
.cr-form { background: #fff; border: 1px solid var(--cr-gris-clair); border-radius: 24px; padding: clamp(22px, 4vw, 44px); max-width: 860px; }
.cr-form fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.cr-form legend { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--cr-gris); margin-bottom: 16px; padding: 0; }
.cr-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-form p { margin: 0 0 16px; }
.cr-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.cr-form input,
.cr-form select,
.cr-form textarea {
	width: 100%; font: inherit; font-size: 15px; padding: 13px 14px;
	border: 1px solid var(--cr-gris-clair); border-radius: 12px; background: #fff; color: var(--cr-noir);
}
.cr-form textarea { min-height: 150px; resize: vertical; }
.cr-form input:focus,
.cr-form select:focus,
.cr-form textarea:focus { outline: none; border-color: var(--cr-bleu); box-shadow: 0 0 0 3px rgba(58, 141, 222, .2); }
.cr-aide { display: block; margin-top: 6px; font-size: 13px; color: var(--cr-gris); }
.cr-mention { font-size: 13px; color: var(--cr-gris); line-height: 1.6; max-width: 620px; }

/*
 * Les liens de la mention suivent le style du site : noirs, sans soulignement,
 * à la taille du texte qui les porte. Sans cette règle, le thème leur impose
 * « font-size: 1rem », et ils ressortent plus gros que le texte de 13 px, en
 * bleu souligné par défaut du navigateur. Le soulignement revient au survol et
 * à la tabulation, pour qu'on sache où l'on est.
 */
.cr-mention a {
	font-size: inherit;
	color: var(--cr-noir);
	text-decoration: none;
}
.cr-mention a:hover { text-decoration: underline; }
.cr-mention a:focus-visible { text-decoration: underline; outline: 2px solid var(--cr-bleu); outline-offset: 2px; }
.cr-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cr-bouton {
	display: inline-block; background: var(--cr-jaune); color: var(--cr-noir);
	border: 0; border-radius: 999px; padding: 15px 30px;
	font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
	transition: background .15s, color .15s;
}
.cr-bouton:hover,
.cr-bouton:focus { background: var(--cr-noir); color: #fff; }
.cr-bouton:focus-visible { outline: 3px solid var(--cr-bleu); outline-offset: 3px; }

.cr-message { border-radius: 14px; padding: 16px 20px; margin: 0 0 26px; max-width: 860px; font-size: 15px; line-height: 1.6; }
.cr-message--ok { background: #E8F4E8; border-left: 4px solid #2E7D32; }
.cr-message--erreur { background: #FDEDE6; border-left: 4px solid var(--cr-orange); }
.cr-message--attente { background: #FFF6DD; border-left: 4px solid var(--cr-jaune); }

/* Écrans étroits */
@media (max-width: 940px) {
	.cr-grille { grid-template-columns: 1fr; }
	.cr-liste-etapes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.cr-deux { grid-template-columns: 1fr; }
	.charmilles-resa section { padding: 44px 0; }
	.cr-wrap { padding: 0 18px; }
	.cr-pastille { width: 32px; height: 32px; font-size: 13px; border-width: 2px; }
}