/** -------------------------------
	-- VETUP V2 - styles complémentaires à Tailwind
	------------------------------- */
/* ordre des layers déclaré ici : les utilitaires Tailwind gardent la priorité sur ces composants */
@layer theme, base, components, utilities;

@layer components {
	:root {
		--brand: #0b5fd7;
		--brand-soft: #eaf3fe;
		--ink: #0b1630;
		--header-h: 72px;
	}

	html {
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--header-h) + 16px);
	}

	body {
		background: #fff;
		color: var(--ink);
		-webkit-font-smoothing: antialiased;
	}

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		*, *::before, *::after { transition: none !important; animation: none !important; }
	}

	/** -------------------------------
		-- HEADER
		------------------------------- */
	#site-header.scrolled {
		border-color: #e5edf7;
		box-shadow: 0 6px 24px -12px rgba(11, 22, 48, .18);
	}

	.nav-link {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		padding: .5rem .7rem;
		border-radius: .6rem;
		font-weight: 500;
		font-size: .95rem;
		color: #1e293b;
		white-space: nowrap;
		transition: color .15s, background-color .15s;
	}
	.nav-link:hover,
	.nav-link:focus-visible { color: var(--brand); background: var(--brand-soft); }
	.nav-link[aria-current="page"] { color: var(--brand); }
	@media (min-width: 1280px) {
		.nav-link { padding: .5rem .9rem; }
	}

	/* dropdown : hover + focus au clavier + .open (tactile) */
	.dropdown { position: relative; }
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		padding-top: .6rem;
		min-width: 17rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s, transform .15s, visibility .15s;
	}
	.dropdown-menu.right { left: auto; right: 0; }
	.dropdown:hover > .dropdown-menu,
	.dropdown:focus-within > .dropdown-menu,
	.dropdown.open > .dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.dropdown:hover > button .fa-chevron-down,
	.dropdown.open > button .fa-chevron-down { transform: rotate(180deg); }
	.dropdown > button .fa-chevron-down { transition: transform .15s; }

	.dropdown-panel {
		background: #fff;
		border: 1px solid #e5edf7;
		border-radius: 1rem;
		box-shadow: 0 18px 40px -16px rgba(11, 22, 48, .25);
		padding: .5rem;
	}
	.dropdown-item {
		display: flex;
		align-items: flex-start;
		gap: .75rem;
		padding: .65rem .75rem;
		border-radius: .7rem;
		transition: background-color .15s;
	}
	.dropdown-item:hover,
	.dropdown-item:focus-visible { background: var(--brand-soft); }
	.dropdown-item .ico {
		flex: none;
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: .6rem;
		background: var(--brand-soft);
		color: var(--brand);
	}

	.icon-btn {
		display: inline-grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 999px;
		color: #475569;
		transition: color .15s, background-color .15s;
	}
	.icon-btn:hover,
	.icon-btn:focus-visible { color: var(--brand); background: var(--brand-soft); }
	.icon-btn img { width: 20px; height: auto; border-radius: 3px; }

	#mobile-menu { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }

	/** -------------------------------
		-- DÉCOR
		------------------------------- */
	.font-hand { font-family: "Caveat", cursive; }

	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: .75rem;
		font-size: .78rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #4b5d7a;
	}
	.eyebrow::before {
		content: "";
		width: 2rem;
		height: 3px;
		border-radius: 3px;
		background: var(--brand);
	}

	.hero-blob {
		position: absolute;
		inset: 6% -8% 4% 4%;
		border-radius: 48% 52% 44% 56% / 55% 48% 52% 45%;
		background: radial-gradient(circle at 30% 30%, #dcebfd 0%, #eaf3fe 55%, rgba(234, 243, 254, 0) 75%);
	}

	/* fond blanc des captures fondu dans le décor */
	.blend { mix-blend-mode: multiply; }

	.card-lift { transition: transform .2s, box-shadow .2s; }
	.card-lift:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 44px -22px rgba(11, 60, 140, .35);
	}

	/* défilement horizontal (épisodes Lia) : barre fine aux couleurs du site */
	.scroller {
		scrollbar-width: thin;
		scrollbar-color: #cfe2fc transparent;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
	}
	.scroller::-webkit-scrollbar { height: 6px; }
	.scroller::-webkit-scrollbar-thumb { background: #cfe2fc; border-radius: 999px; }

	/** -------------------------------
		-- MODALE VIDÉO
		------------------------------- */
	.video-modal {
		width: min(64rem, calc(100vw - 2rem));
		max-width: none;
		max-height: calc(100dvh - 2rem);
		margin: auto;
		padding: 0;
		border: 0;
		background: transparent;
		overflow: visible;
	}
	.video-modal video { max-height: calc(100dvh - 7rem); }
	.video-modal::backdrop {
		background: rgba(11, 22, 48, .8);
		backdrop-filter: blur(4px);
	}
	.video-modal[open] { animation: video-modal-in .2s ease-out; }
	@keyframes video-modal-in {
		from { opacity: 0; transform: translateY(12px) scale(.98); }
	}
	html:has(.video-modal[open]) { overflow: hidden; }

	/** -------------------------------
		-- TABLEAUX TARIFS / OPTIONS
		------------------------------- */
	.ptable {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		font-size: .92rem;
	}
	.ptable th,
	.ptable td {
		padding: .85rem 1rem;
		border-bottom: 1px solid #edf2f9;
		text-align: center;
		vertical-align: middle;
	}
	.ptable tbody th[scope="row"] {
		text-align: left;
		font-weight: 500;
		color: #1e293b;
	}
	.ptable thead th {
		position: sticky;
		top: var(--header-h);
		z-index: 1;
		background: #fff;
		font-size: 1rem;
		font-weight: 700;
		border-bottom: 2px solid #dbe7f7;
	}
	.ptable thead th.featured { color: var(--brand); }
	.ptable tbody td:nth-child(3) { background: rgba(234, 243, 254, .55); }
	.ptable tr.sec th {
		padding-top: 1.6rem;
		text-align: left;
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--brand);
		background: #fff;
	}
	.ptable .note {
		display: block;
		margin-top: .2rem;
		font-size: .75rem;
		color: #64748b;
	}
	.ptable .inc { color: #10b981; font-size: 1.15rem; }
	.ptable .opt { color: #f59e0b; font-size: 1.15rem; }
	.ptable .no { color: #cbd5e1; font-size: 1.15rem; }

	/* mobile : libellé + une seule offre visible */
	@media (max-width: 1023.98px) {
		.ptable th,
		.ptable td { padding: .75rem .6rem; }
		.ptable tbody td:nth-child(3) { background: none; }
		.ptable thead th { top: var(--header-h); }
		.ptable[data-plan="basic"] tr > :is(:nth-child(3), :nth-child(4)),
		.ptable[data-plan="premium"] tr > :is(:nth-child(2), :nth-child(4)),
		.ptable[data-plan="max"] tr > :is(:nth-child(2), :nth-child(3)) { display: none; }
		.ptable tbody th[scope="row"] { width: 55%; }
	}

	/** -------------------------------
		-- FORMULAIRES
		------------------------------- */
	.field label {
		display: block;
		margin-bottom: .4rem;
		font-size: .9rem;
		font-weight: 600;
		color: #1e293b;
	}
	.field input,
	.field select,
	.field textarea {
		width: 100%;
		height: 3rem;
		padding: 0 1rem;
		border: 1px solid #d5dfec;
		border-radius: .8rem;
		background: #fff;
		color: var(--ink);
		font-size: 1rem;
		transition: border-color .15s, box-shadow .15s;
	}
	.field select {
		appearance: none;
		padding-right: 2.5rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right .9rem center;
		background-size: 1.1rem;
	}
	.field textarea {
		height: auto;
		padding: .75rem 1rem;
		resize: vertical;
	}
	.field input::placeholder { color: #94a3b8; }
	.field input:focus,
	.field select:focus,
	.field textarea:focus {
		outline: none;
		border-color: var(--brand);
		box-shadow: 0 0 0 4px rgba(11, 95, 215, .15);
	}
	.field .error {
		display: none;
		margin-top: .35rem;
		font-size: .8rem;
		color: #dc2626;
	}
	.field.invalid input,
	.field.invalid select { border-color: #dc2626; }
	.field.invalid .error { display: block; }
	.req { color: #dc2626; }
	/* badge masqué : la mention reCAPTCHA est affichée sous le formulaire */
	.grecaptcha-badge { visibility: hidden; }

	/** -------------------------------
		-- TOAST
		------------------------------- */
	.toast {
		position: fixed;
		z-index: 60;
		right: 1rem;
		bottom: 1rem;
		left: 1rem;
		display: flex;
		align-items: flex-start;
		gap: .85rem;
		max-width: 26rem;
		margin-left: auto;
		padding: 1rem 1.1rem;
		border-radius: 1rem;
		background: #fff;
		border: 1px solid #e5edf7;
		border-left-width: 5px;
		box-shadow: 0 20px 44px -18px rgba(11, 22, 48, .35);
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .2s, transform .2s;
	}
	.toast.show { opacity: 1; transform: none; }
	.toast[hidden] { display: none; }
	.toast .toast-icon { font-size: 1.35rem; line-height: 1.4; }
	.toast.success .ico-error,
	.toast.error .ico-success { display: none; }
	.toast .toast-text { color: #475569; }
	.toast.success { border-left-color: #10b981; }
	.toast.success .toast-icon,
	.toast.success .toast-title { color: #047857; }
	.toast.error { border-left-color: #dc2626; }
	.toast.error .toast-icon,
	.toast.error .toast-title { color: #b91c1c; }
}