/*
	Friderici x Liquid Glass
	Ardoise + ambre (couleurs du logo) sur des panneaux en verre dépoli.
	Chargé après main.css.
*/

:root {
	--amber: #F3AE00;
	--amber-deep: #EC9D00;
	--slate: #43535D;
	--slate-deep: #12181c;
	--ink: #1a2227;
	--glass-hi: rgba(255, 255, 255, 0.55);
	--glass-lo: rgba(255, 255, 255, 0.08);
	--glass-edge: rgba(255, 255, 255, 0.28);
}

/* ---------- Fond : ardoise profonde + halos ambre qui dérivent ---------- */

html body {
	background-color: var(--slate-deep);
	background-image:
		radial-gradient(1200px 800px at 15% -10%, #2f3d45 0%, transparent 60%),
		radial-gradient(900px 700px at 100% 110%, #263239 0%, transparent 60%),
		linear-gradient(160deg, #11171b, #1d272d 55%, #101519);
	background-attachment: fixed;
	color: #fff;
	min-height: 100vh;
}

#bg { display: none !important; }

body::before,
body::after {
	content: "";
	position: fixed;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(60px);
	will-change: transform;
}

body::before {
	width: 46vmax;
	height: 46vmax;
	top: -14vmax;
	right: -10vmax;
	background: radial-gradient(circle at 35% 35%, rgba(243, 174, 0, 0.85), rgba(236, 120, 0, 0.35) 55%, transparent 72%);
	animation: drift-a 22s ease-in-out infinite alternate;
}

body::after {
	width: 40vmax;
	height: 40vmax;
	bottom: -16vmax;
	left: -12vmax;
	background: radial-gradient(circle at 60% 40%, rgba(120, 150, 165, 0.6), rgba(67, 83, 93, 0.35) 55%, transparent 72%);
	animation: drift-b 28s ease-in-out infinite alternate;
}

@keyframes drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-8vmax, 10vmax, 0) scale(1.15); }
}

@keyframes drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to   { transform: translate3d(10vmax, -8vmax, 0) scale(0.95); }
}

/* ---------- Le panneau de verre ---------- */

.glass-panel,
#home_actions,
#tel_form,
.plan_card {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(500px 220px at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.22), transparent 60%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.05));
	-webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.08);
	backdrop-filter: blur(28px) saturate(185%) brightness(1.08);
	border: 1px solid var(--glass-edge);
	border-radius: 28px;
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1.5px 0 rgba(255, 255, 255, 0.10),
		inset 1.5px 0 0 rgba(255, 255, 255, 0.14),
		inset -1.5px 0 0 rgba(255, 255, 255, 0.06),
		inset 0 0 40px rgba(255, 255, 255, 0.05),
		0 24px 60px -12px rgba(0, 0, 0, 0.55),
		0 6px 16px rgba(0, 0, 0, 0.25);
	color: #fff;
}

/* reflet spéculaire sur le bord haut */
.glass-panel::before,
#home_actions::before,
#tel_form::before,
.plan_card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%);
	-webkit-mask: linear-gradient(#000, transparent 70%);
	mask: linear-gradient(#000, transparent 70%);
}

/* liseré lumineux qui suit les bords */
.glass-panel::after,
#home_actions::after,
#tel_form::after,
.plan_card::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 65%, rgba(243, 174, 0, 0.75));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0.8;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass-panel, #home_actions, #tel_form, .plan_card {
		background: rgba(52, 66, 74, 0.92);
	}
}

/* ---------- En-tête & logo ---------- */

#header {
	margin-bottom: 1.5em;
}

#header p {
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: 0.03em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

#logo {
	box-sizing: border-box;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
	padding: 14px 20px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow:
		inset 0 1.5px 0 #fff,
		0 14px 34px -8px rgba(0, 0, 0, 0.5),
		0 0 0 6px rgba(255, 255, 255, 0.08);
}

#logo-swisscom {
	display: block;
	box-sizing: border-box;
	width: 150px;
	height: auto;
	margin: 1em auto 0;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 14px;
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.4);
}

/* ---------- Boutons : gouttes de verre ---------- */

html body .button,
html body button,
html body input[type="submit"] {
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
		inset 0 -2px 6px rgba(0, 0, 0, 0.12),
		0 8px 20px -6px rgba(0, 0, 0, 0.45);
	transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.3), box-shadow 0.25s ease, filter 0.25s ease;
}

html body .button::after,
html body button::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 3px;
	height: 45%;
	border-radius: 999px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

html body .button-primary,
html body button.button-primary {
	background: linear-gradient(180deg, #ffc93a 0%, var(--amber) 45%, var(--amber-deep) 100%);
	border-color: rgba(255, 226, 140, 0.8);
	color: var(--ink) !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
		inset 0 -3px 8px rgba(160, 90, 0, 0.35),
		0 10px 26px -6px rgba(243, 174, 0, 0.65),
		0 0 0 1px rgba(160, 90, 0, 0.25);
}

html body .button:hover,
html body button:hover,
html body input[type="submit"]:hover {
	transform: translateY(-2px) scale(1.02);
	filter: brightness(1.08) saturate(1.1);
	background-color: transparent;
	color: #fff !important;
}

html body .button-primary:hover,
html body button.button-primary:hover {
	background: linear-gradient(180deg, #ffd45c 0%, #ffb90f 45%, var(--amber-deep) 100%) !important;
	color: var(--ink) !important;
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
		inset 0 -3px 8px rgba(160, 90, 0, 0.35),
		0 14px 34px -6px rgba(243, 174, 0, 0.85),
		0 0 0 1px rgba(160, 90, 0, 0.25);
}

html body .button:active,
html body button:active {
	transform: translateY(0) scale(0.98);
}

html body .button:focus-visible,
html body button:focus-visible,
html body input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Accueil ---------- */

#home_actions {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	width: 100%;
	max-width: 360px;
	margin: 0;
	padding: 1.5em;
}

#home_actions li { margin: 0; }

#home_actions .button {
	display: block;
	width: 100%;
	white-space: normal;
}

/* ---------- Tableau des prix ---------- */

#plans_wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
	max-width: 1160px;
	margin: 1em auto 2em;
	padding: 0 1em;
}

.plan_card {
	display: flex;
	flex-direction: column;
	font-size: 14px; /* indépendant de l'échelle 12pt/16pt de main.css */
	width: 18em;
	padding: 1.6em 1.4em 1.4em;
	text-align: left;
	transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.2), box-shadow 0.35s ease;
}

.plan_card:hover {
	transform: translateY(-8px);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
		inset 0 -1.5px 0 rgba(255, 255, 255, 0.12),
		inset 0 0 50px rgba(243, 174, 0, 0.10),
		0 34px 70px -14px rgba(0, 0, 0, 0.6),
		0 0 40px -8px rgba(243, 174, 0, 0.35);
}

.plan_card h3 {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 0.9em 0;
	padding: 0.32em 0.8em;
	max-width: 100%;
	white-space: nowrap;
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ink);
	background: linear-gradient(180deg, #ffd04a, var(--amber));
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px -2px rgba(243, 174, 0, 0.5);
}

.plan_card p {
	font-size: 0.86em;
	line-height: 1.5em;
	margin: 0 0 0.8em 0;
	color: rgba(255, 255, 255, 0.85);
}

.plan_card strong { color: #fff; }

.plan_footer {
	margin-top: auto;
	padding-top: 0.6em;
}

.plan_prix {
	margin: 0.9em 0 1em;
	padding-top: 0.9em;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.plan_prix .ht {
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.6);
}

.plan_prix .ttc {
	font-size: 1.55em;
	font-weight: 700;
	color: var(--amber);
	text-shadow: 0 0 22px rgba(243, 174, 0, 0.45);
}

.plan_prix .ttc small {
	display: block;
	margin-top: 0.15em;
	font-size: 0.5em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.65);
	text-shadow: none;
}

.plan_card .button {
	font-size: 1em;
	width: 100%;
	text-align: center;
}

#tva_note {
	text-wrap: balance;
	text-align: center;
	max-width: 640px;
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Formulaire ---------- */

#tel_form {
	width: 100%;
	max-width: 400px;
	margin: 0.5em auto 0;
	padding: 2em 1.75em 1.75em;
	text-align: center;
}

#tel_form p { color: rgba(255, 255, 255, 0.88); }

#tel_form .plan_recap {
	display: inline-block;
	margin: 0 0 1em;
	padding: 0.55em 1.1em;
	border-radius: 999px;
	background: rgba(243, 174, 0, 0.18);
	border: 1px solid rgba(243, 174, 0, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#tel_form .plan_recap strong { color: var(--amber); }

#tel_form a {
	color: var(--amber);
	text-decoration: none;
	border-bottom: 1px solid rgba(243, 174, 0, 0.4);
}

#tel_form a:hover { border-bottom-color: var(--amber); }

#tel_form label {
	display: block;
	text-align: left;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 0.45em 0.4em;
	color: rgba(255, 255, 255, 0.9);
}

#tel_form input[type="tel"],
#tel_form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	height: 3em;
	margin-bottom: 1.1em;
	padding: 0 1.2em;
	font-size: 1em;
	color: #fff;
	background: rgba(10, 15, 18, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#tel_form input::placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1; }

#tel_form input:focus {
	outline: none;
	background: rgba(10, 15, 18, 0.4);
	border-color: var(--amber);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(243, 174, 0, 0.28), 0 0 24px rgba(243, 174, 0, 0.3);
}

#nom_error,
#tel_error {
	display: none;
	margin: -0.6em 0 1em 0.6em;
	text-align: left;
	font-size: 0.85em;
	color: #ff8aa6;
}

#tel_form button { width: 100%; margin-top: 0.4em; }

/* ---------- Confirmation ---------- */

.glass-panel {
	max-width: 520px;
	width: 100%;
	padding: 2em 1.75em;
}

.glass-panel #logo { margin-bottom: 1em; }

.glass-panel strong { color: var(--amber); }

/* ---------- Pied de page ---------- */

#footer .copyright,
#footer .copyright li {
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- Accessibilité / mobile ---------- */

@media screen and (max-width: 736px) {
	.plan_card { width: 100%; max-width: 360px; }
	html body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
	body::before, body::after { animation: none; }
	.plan_card, .button, button { transition: none; }
}