/*!
 * Snug Simple — CoOd
 * Feuille de style à charger APRES bootstrap.min.css (v4.3.1).
 * Elle surcharge les composants Bootstrap (body, titres, .btn, .navbar, .card, .list-group…)
 * et ajoute des classes préfixées .snug-* pour les blocs propres à la page.
 */

/* ===== Tokens ===== */
:root {
	--snug-bg: #F4F2EF;
	--snug-ink: #1E2A47;
	--snug-ink-soft: #55607A;
	--snug-mint: #CFEBDD;
	--snug-butter: #FBE8A8;
	--snug-lilac: #DDD6F6;
	--snug-peach: #FFD9C7;
	--snug-sky: #D0E6F8;
	--snug-r-lg: 32px;
	--snug-r-md: 22px;
	--snug-font: 'Nunito','Trebuchet MS',system-ui,sans-serif;
}

/* ===== Base Bootstrap surchargée ===== */
body {
	font-family: var(--snug-font);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--snug-ink);
	background-color: var(--snug-bg);
	/* texture papier très légère */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--snug-font);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--snug-ink);
}

h1, .h1 {
	font-size: calc(2.5rem + 2vw)
}

h2, .h2 {
	font-size: calc(1.6rem + .9vw)
}

h3, .h3 {
	font-size: 1.125rem;
	font-weight: 800
}

a {
	color: var(--snug-ink)
}

	a:hover {
		color: var(--snug-ink)
	}

@media (min-width:1200px) {
	h1, .h1 {
		font-size: 4.5rem
	}

	h2, .h2 {
		font-size: 2.5rem
	}
}

.container {
	max-width: 1080px
}

:focus-visible {
	outline: 4px solid var(--snug-ink);
	outline-offset: 3px;
	border-radius: 8px
}

.btn:focus, .btn.focus {
	box-shadow: none
}

.btn:focus-visible {
	outline: 4px solid var(--snug-ink);
	outline-offset: 3px
}

/* ===== Sections ===== */
.snug-section {
	padding-top: clamp(28px,5vw,56px);
	padding-bottom: clamp(28px,5vw,56px)
}

/* ===== Boutons (.btn Bootstrap + .btn-snug) ===== */
.btn-snug {
	color: #fff;
	background-color: var(--snug-ink);
	border: 0;
	border-radius: 999px;
	font-weight: 800;
	font-size: 1.125rem;
	padding: .95rem 2rem;
	box-shadow: 0 6px 0 rgba(30,42,71,.22);
	transition: transform .15s ease,box-shadow .15s ease;
}

	.btn-snug:hover {
		color: #fff;
		background-color: var(--snug-ink);
		transform: translateY(2px);
		box-shadow: 0 4px 0 rgba(30,42,71,.22)
	}

	.btn-snug:active {
		transform: translateY(6px);
		box-shadow: 0 0 0 rgba(30,42,71,.22)
	}

.btn-snug-butter {
	color: var(--snug-ink);
	background-color: var(--snug-butter);
	border-radius: 999px;
	border: 0;
	font-weight: 800;
	padding: .6rem 1.4rem;
}

	.btn-snug-butter:hover {
		color: var(--snug-ink);
		background-color: var(--snug-butter)
	}

.btn-snug-on-dark {
	color: var(--snug-ink);
	background-color: var(--snug-butter);
	box-shadow: 0 6px 0 rgba(0,0,0,.25);
}

	.btn-snug-on-dark:hover {
		color: var(--snug-ink);
		background-color: var(--snug-butter);
		box-shadow: 0 4px 0 rgba(0,0,0,.25)
	}

	.btn-snug-on-dark:active {
		box-shadow: 0 0 0 rgba(0,0,0,.25)
	}

/* ===== Navbar (.navbar Bootstrap) ===== */
.navbar-snug {
	margin-top: 20px;
	padding: 10px 12px 10px 26px;
	background-color: var(--snug-ink);
	border-radius: 999px;
}

	.navbar-snug .navbar-brand {
		padding: 0;
		margin: 0
	}

		.navbar-snug .navbar-brand img {
			height: 34px;
			width: auto
		}

	.navbar-snug .snug-flag {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid rgba(255,255,255,.7)
	}

/* ===== Hero ===== */
.snug-lead {
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: .2rem
}

.snug-price {
	display: inline-block;
	background: var(--snug-butter);
	padding: 0 .25em;
	border-radius: .25em;
	transform: rotate(-1.5deg)
}

.snug-hero-art {
	background: linear-gradient(160deg,var(--snug-mint),#E6F5EC);
	border-radius: var(--snug-r-lg);
	padding: 28px;
	box-shadow: inset 0 -10px 0 rgba(30,42,71,.06);
}

/* ===== Blocs pastel ===== */
.snug-block {
	border-radius: var(--snug-r-lg);
	padding: clamp(24px,4vw,40px)
}

.snug-block-lilac {
	background: linear-gradient(160deg,var(--snug-lilac),#EAE6FA)
}

.snug-block-peach {
	background: linear-gradient(160deg,var(--snug-peach),#FFE9DD)
}

.snug-block h2 {
	font-size: 1.75rem
}

/* pastille d'icône */
.snug-icon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 0 rgba(30,42,71,.12);
}

	.snug-icon svg {
		width: 30px;
		height: 30px
	}

/* liste à coches (.list-unstyled Bootstrap) */
.snug-checks li {
	display: flex;
	align-items: flex-start;
	font-weight: 700;
	margin-bottom: 12px
}

	.snug-checks li:last-child {
		margin-bottom: 0
	}

	.snug-checks li::before {
		content: "";
		flex: none;
		width: 26px;
		height: 26px;
		margin: 1px 12px 0 0;
		border-radius: 50%;
		background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A47' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/16px no-repeat;
	}

/* ===== Photos ===== */
.snug-photo {
	border-radius: var(--snug-r-lg);
	overflow: hidden;
	background: var(--snug-sky);
	padding: 12px
}

.snug-photo-mint {
	background: var(--snug-mint)
}

.snug-photo img {
	border-radius: 22px;
	width: 100%;
	max-height: 420px;
	object-fit: cover
}

/* ===== Étapes (.card Bootstrap) ===== */
.card.snug-step {
	border: 0;
	border-radius: var(--snug-r-md);
	background: var(--snug-mint)
}

.snug-step .card-body {
	padding: 24px 22px
}

.snug-step-2 {
	background: var(--snug-butter) !important
}

.snug-step-3 {
	background: var(--snug-sky) !important
}

.snug-step-4 {
	background: var(--snug-peach) !important
}

.snug-step .badge {
	background: #fff;
	color: var(--snug-ink);
	font-weight: 900;
	font-size: .9rem;
	padding: .3rem .8rem
}

.snug-step .card-title {
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.15;
	margin-bottom: .5rem
}

.snug-step .card-text {
	font-size: 1rem
}

/* ===== 90 % ===== */
.snug-proof {
	background-color: var(--snug-ink);
	background-image: radial-gradient(circle at 90% 10%,rgba(255,255,255,.10),transparent 45%);
	color: #fff;
	border-radius: var(--snug-r-lg);
	padding: clamp(32px,6vw,64px);
}

	.snug-proof h2 {
		color: #fff;
		font-size: calc(2.2rem + 2vw);
		margin-bottom: .2em
	}

	.snug-proof p {
		font-size: 1.25rem;
		font-weight: 700;
		margin: 0
	}

@media (min-width:1200px) {
	.snug-proof h2 {
		font-size: 4.25rem
	}
}

/* ===== Réassurance (.card Bootstrap) ===== */
.card.snug-card {
	border: 0;
	border-radius: var(--snug-r-md);
	background: #fff;
	box-shadow: 0 4px 0 rgba(30,42,71,.08)
}

.snug-card .card-body {
	padding: 24px
}

.snug-card .snug-icon {
	background: var(--snug-butter);
	box-shadow: none
}

.snug-card-2 .snug-icon {
	background: var(--snug-lilac)
}

.snug-card-3 .snug-icon {
	background: var(--snug-mint)
}

.snug-card h4 {
	font-size: 1.2rem;
	margin: 12px 0 4px
}

.snug-card p {
	margin: 0;
	color: var(--snug-ink-soft)
}

/* ===== Pied de page ===== */
.snug-footer {
	padding: 40px 0 48px
}

.snug-foot {
	background: var(--snug-ink);
	color: #fff;
	border-radius: var(--snug-r-lg);
	padding: 28px 32px
}

	.snug-foot img {
		height: 30px;
		width: auto
	}

	.snug-foot a {
		color: #fff;
		font-weight: 700
	}

		.snug-foot a:focus-visible {
			outline-color: #fff
		}

/* ===== Mobile ===== */
@media (max-width:575.98px) {
	.navbar-snug {
		padding-left: 18px
	}

		.navbar-snug .snug-flag {
			display: none
		}

	.btn-snug {
		display: block;
		width: 100%
	}

	.snug-hero-art {
		padding: 20px
	}
}

/* ===== Accessibilité ===== */
@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	.btn-snug {
		transition: none
	}
}

/* =====================================================================
   PAGES D'AUTHENTIFICATION (login, register, ForgotPassword)
   Formulaires Bootstrap 4.3.1 : .form-group, .form-control, .custom-control
   ===================================================================== */
.snug-auth {
	padding-top: clamp(28px,6vw,64px);
	padding-bottom: clamp(28px,6vw,64px)
}

.snug-auth-card {
	background: #fff;
	border-radius: var(--snug-r-lg);
	padding: clamp(24px,5vw,44px);
	box-shadow: 0 8px 0 rgba(30,42,71,.08);
	position: relative;
}

	.snug-auth-card.is-mint {
		background: linear-gradient(160deg,var(--snug-mint),#E9F6EF)
	}

	.snug-auth-card.is-lilac {
		background: linear-gradient(160deg,var(--snug-lilac),#ECE8FA)
	}

	.snug-auth-card.is-peach {
		background: linear-gradient(160deg,var(--snug-peach),#FFEADF)
	}

	.snug-auth-card h1 {
		font-size: calc(1.7rem + 1vw);
		margin-bottom: .35em
	}

	.snug-auth-card .snug-sub {
		font-weight: 700;
		color: var(--snug-ink-soft);
		margin-bottom: 1.5rem
	}

.snug-auth-icon {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 5px 0 rgba(30,42,71,.12);
	margin-bottom: 18px;
}

	.snug-auth-icon svg {
		width: 34px;
		height: 34px
	}

/* champs */
.snug-auth label {
	font-weight: 800;
	margin-bottom: .35rem;
	font-size: .98rem
}

.snug-auth .form-control {
	height: auto;
	padding: .85rem 1.1rem;
	font-family: var(--snug-font);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--snug-ink);
	background-color: #fff;
	border: 2px solid rgba(30,42,71,.14);
	border-radius: 16px;
	box-shadow: inset 0 2px 0 rgba(30,42,71,.04);
	transition: border-color .15s ease,box-shadow .15s ease;
}

	.snug-auth .form-control::placeholder {
		color: #8B94A9;
		font-weight: 500
	}

	.snug-auth .form-control:focus {
		border-color: var(--snug-ink);
		box-shadow: 0 0 0 4px rgba(30,42,71,.12);
	}

	.snug-auth .form-control.input-validation-error,
	.snug-auth .form-control.is-invalid {
		border-color: #C0392B
	}

.snug-auth .form-group {
	margin-bottom: 1.15rem
}

/* messages de validation ASP.NET (.text-danger, .validation-summary-errors) */
.snug-auth .text-danger {
	color: #B02A1D !important;
	font-weight: 700;
	font-size: .92rem
}

.snug-auth .validation-summary-errors,
.snug-auth .alert {
	background: #FDE8E4;
	color: #8F2418;
	border: 0;
	border-radius: 16px;
	padding: .8rem 1.1rem;
	font-weight: 700;
}

	.snug-auth .validation-summary-errors ul {
		margin: 0;
		padding-left: 1.1rem
	}

.snug-auth .validation-summary-valid {
	display: none
}

/* case « Se souvenir de moi » (.custom-control Bootstrap) */
.snug-auth .custom-control-label {
	font-weight: 700;
	cursor: pointer;
	padding-top: 2px
}

	.snug-auth .custom-control-label::before {
		width: 1.5rem;
		height: 1.5rem;
		top: 0;
		left: -2rem;
		border-radius: 8px;
		border: 2px solid rgba(30,42,71,.3);
		background: #fff;
	}

	.snug-auth .custom-control-label::after {
		width: 1.5rem;
		height: 1.5rem;
		top: 0;
		left: -2rem
	}

.snug-auth .custom-control {
	padding-left: 2rem;
	min-height: 1.5rem
}

.snug-auth .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--snug-ink);
	border-color: var(--snug-ink);
}

.snug-auth .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 4px rgba(30,42,71,.15)
}

/* liens secondaires */
.snug-auth-links {
	margin-top: 1.4rem;
	font-weight: 700
}

	.snug-auth-links a {
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 2px
	}

		.snug-auth-links a:hover {
			text-decoration-color: var(--snug-butter)
		}

.snug-auth .btn-snug.btn-block {
	padding: 1rem 2rem
}

/* panneau latéral décoratif (desktop) */
.snug-side {
	border-radius: var(--snug-r-lg);
	padding: clamp(24px,4vw,40px);
	height: 100%
}

	.snug-side h2 {
		font-size: 1.6rem;
		margin-bottom: 1rem
	}

	.snug-side img {
		max-width: 78%;
		margin: 0 auto 1.25rem
	}

@media (max-width:991.98px) {
	.snug-side {
		display: none
	}
}

/* =====================================================================
   ESPACE CONNECTE (admin / élève) : topbar + hamburger + menu latéral
   Utilise .navbar, .nav, .nav-link, .card, .btn de Bootstrap 4.3.1
   ===================================================================== */
:root {
	--snug-side-w: 272px;
	--snug-gap: 12px;
	--snug-top-h: 64px
}

/* topbar flottante */
.snug-app-top {
	position: fixed;
	top: var(--snug-gap);
	left: var(--snug-gap);
	right: var(--snug-gap);
	height: var(--snug-top-h);
	z-index: 1030;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--snug-ink);
	border-radius: 999px;
	padding: 0 12px 0 24px;
	box-shadow: 0 6px 0 rgba(30,42,71,.14);
}

	.snug-app-top .navbar-brand {
		padding: 0;
		margin: 0
	}

		.snug-app-top .navbar-brand img {
			height: 32px;
			width: auto
		}

/* bouton hamburger */
.snug-burger {
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--snug-butter);
	color: var(--snug-ink);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	transition: transform .15s ease;
}

	.snug-burger:hover {
		transform: scale(1.06)
	}

	.snug-burger:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px
	}

	.snug-burger span {
		display: block;
		width: 20px;
		height: 3px;
		border-radius: 3px;
		background: var(--snug-ink);
		transition: transform .2s ease,opacity .2s ease
	}

body:not(.sidebar-closed) .snug-burger span:nth-child(1) {
	transform: translateY(8px) rotate(45deg)
}

body:not(.sidebar-closed) .snug-burger span:nth-child(2) {
	opacity: 0
}

body:not(.sidebar-closed) .snug-burger span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg)
}

/* menu latéral */
.snug-sidebar {
	position: fixed;
	z-index: 1020;
	top: calc(var(--snug-top-h) + var(--snug-gap)*2);
	left: var(--snug-gap);
	bottom: var(--snug-gap);
	width: var(--snug-side-w);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--snug-r-lg);
	padding: 20px 16px;
	box-shadow: 0 8px 0 rgba(30,42,71,.08);
	transition: transform .25s ease;
}

body.sidebar-closed .snug-sidebar {
	transform: translateX(calc(-100% - 24px))
}

.snug-user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--snug-lilac);
	border-radius: 18px;
	padding: 10px 10px 10px 16px;
	margin-bottom: 18px;
}

	.snug-user strong {
		font-weight: 800;
		font-size: .95rem;
		word-break: break-all;
		line-height: 1.25
	}

.snug-logout {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 0 rgba(30,42,71,.14);
}

	.snug-logout svg {
		width: 20px;
		height: 20px
	}

	.snug-logout:hover {
		transform: translateY(1px);
		box-shadow: 0 2px 0 rgba(30,42,71,.14)
	}

.snug-nav .nav-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: .8rem 1rem;
	margin-bottom: 6px;
	border-radius: 16px;
	font-weight: 800;
	color: var(--snug-ink);
	transition: background-color .15s ease;
}

	.snug-nav .nav-link svg {
		width: 24px;
		height: 24px;
		flex: none
	}

	.snug-nav .nav-link:hover {
		background: var(--snug-bg)
	}

	.snug-nav .nav-link.active {
		background: var(--snug-butter);
		color: var(--snug-ink)
	}

	.snug-nav .nav-link:focus-visible {
		outline: 3px solid var(--snug-ink);
		outline-offset: 2px
	}

/* zone principale */
.snug-app-main {
	padding: calc(var(--snug-top-h) + var(--snug-gap)*2 + 24px) 24px 48px;
	margin-left: calc(var(--snug-side-w) + var(--snug-gap)*2);
	transition: margin-left .25s ease;
}

body.sidebar-closed .snug-app-main {
	margin-left: 0
}

.snug-app-main .snug-app-inner {
	max-width: 1180px;
	margin: 0 auto
}

.snug-page-title {
	font-size: calc(2rem + .8vw);
	margin-bottom: 1.25rem
}

/* voile mobile */
.snug-scrim {
	display: none
}

/* cartes de cours (.card Bootstrap) */
.card.snug-course {
	border: 0;
	border-radius: var(--snug-r-md);
	padding: 12px;
	background: var(--snug-mint);
	box-shadow: 0 5px 0 rgba(30,42,71,.10);
	transition: transform .15s ease,box-shadow .15s ease;
}

	.card.snug-course:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 0 rgba(30,42,71,.10)
	}

.snug-course.is-butter {
	background: var(--snug-butter)
}

.snug-course.is-lilac {
	background: var(--snug-lilac)
}

.snug-course.is-peach {
	background: var(--snug-peach)
}

.snug-course.is-sky {
	background: var(--snug-sky)
}

.snug-course .card-img-top {
	border-radius: 14px;
	height: 150px;
	object-fit: cover;
	width: 100%
}

.snug-course .card-body {
	padding: 16px 8px 8px
}

.snug-course .card-title {
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: .75rem
}

	.snug-course .card-title a {
		color: var(--snug-ink);
		text-decoration: none
	}

		.snug-course .card-title a:focus-visible {
			outline: 3px solid var(--snug-ink);
			outline-offset: 4px
		}

.snug-course .snug-last {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.75);
	border-radius: 999px;
	padding: .25rem .8rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--snug-ink);
	margin: 0;
}

	.snug-course .snug-last svg {
		width: 16px;
		height: 16px;
		flex: none
	}

/* mobile : le menu passe au-dessus du contenu */
@media (max-width:991.98px) {
	.snug-app-main {
		margin-left: 0;
		padding-left: 16px;
		padding-right: 16px
	}

	.snug-sidebar {
		box-shadow: 0 0 0 100vmax transparent,0 12px 40px rgba(30,42,71,.25)
	}

	body:not(.sidebar-closed) .snug-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1010;
		background: rgba(30,42,71,.35);
	}
}

@media (prefers-reduced-motion:reduce) {
	.snug-sidebar, .snug-app-main, .snug-burger span, .card.snug-course {
		transition: none
	}
}