/**
 * Skill Carte Cadeau - le calendrier de reservation sur la page de la carte.
 *
 * Reprend les couleurs de la page (variables de .skcc-plein) quand il y est,
 * avec des valeurs de repli sinon.
 */

.skcc-resa {
	--r-encre: var(--skcc-encre, #2b2622);
	--r-texte: var(--skcc-texte, #5a5049);
	--r-doux: var(--skcc-doux, #9a8b80);
	--r-accent: var(--skcc-accent, #b0653a);
	--r-bouton: var(--skcc-bouton, #d58f68);
	--r-survol: var(--skcc-bouton-survol, #c27a53);
	--r-trait: var(--skcc-trait, #ead9cb);
	--r-carte: var(--skcc-carte, #ffffff);
	/* Une variable par couleur visible : le widget Elementor les change sans
	   toucher aux etats (jour choisi, jour ferme, survol). */
	--r-titre: var(--r-encre);
	--r-mois: var(--r-encre);
	--r-sem: var(--r-doux);
	--r-etape-fond: #f6efe9;
	--r-etape-texte: var(--r-doux);
	--r-etape-actif-fond: var(--r-accent);
	--r-etape-actif-texte: #fff;
	--r-etape-num-fond: #fff;
	--r-etape-num-texte: var(--r-etape-actif-fond);
	--r-fleche-fond: #fff;
	--r-fleche-texte: var(--r-encre);
	--r-fleche-bord: var(--r-trait);
	--r-fleche-survol: #f6efe9;
	--r-jour-fond: #f6efe9;
	--r-jour-texte: var(--r-encre);
	--r-jour-bord: transparent;
	--r-jour-survol: var(--r-accent);
	--r-jour-off: #cdbfb4;
	--r-jour-choisi-fond: var(--r-accent);
	--r-jour-choisi-texte: #fff;
	--r-sous-titre: var(--r-encre);
	--r-heure-fond: #fff;
	--r-heure-texte: var(--r-encre);
	--r-heure-bord: var(--r-trait);
	--r-heure-survol-fond: var(--r-heure-fond);
	--r-heure-survol-texte: var(--r-accent);
	--r-heure-survol-bord: var(--r-accent);
	--r-etiquette: var(--r-encre);
	--r-champ-fond: #fff;
	--r-champ-texte: var(--r-encre);
	--r-champ-bord: var(--r-trait);
	--r-champ-focus: var(--r-accent);
	--r-bouton-texte: var(--skcc-bouton-texte, #fff);
	--r-bouton-survol-texte: var(--r-bouton-texte);
	--r-btn2-fond: transparent;
	--r-btn2-texte: var(--r-encre);
	--r-btn2-bord: var(--r-trait);
	--r-btn2-survol: #f6efe9;
	--r-btn2-survol-texte: var(--r-btn2-texte);
	--r-choix-fond: #f6efe9;
	--r-choix-texte: var(--r-encre);
	--r-erreur: #a4301f;
	--r-merci-fond: #eef7f0;
	--r-merci-texte: #1f5a35;

	box-sizing: border-box;
	max-width: 760px;
	margin: 48px auto;
	padding: 32px clamp(18px, 4vw, 40px);
	background: var(--r-carte);
	border: 1px solid var(--r-trait);
	border-radius: 18px;
	box-shadow: var(--skcc-ombre, 0 18px 40px rgba(120, 80, 50, 0.12));
	color: var(--r-texte);
	scroll-margin-top: 90px;
}

/* Pose sur la page du marchand (code court ou widget) : pas de marge imposee. */
.skcc-resa--seul { margin: 0 auto; }

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

.skcc-resa [hidden] { display: none !important; }

.skcc-resa__titre {
	margin: 0 0 8px;
	color: var(--r-titre);
	font-size: clamp(22px, 3vw, 28px);
	line-height: 1.25;
	text-align: center;
}

.skcc-resa__intro {
	margin: 0 auto 22px;
	max-width: 56ch;
	text-align: center;
	line-height: 1.55;
}

/* Les trois etapes. */
.skcc-resa__etapes {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.skcc-resa__etapes li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	background: var(--r-etape-fond);
	color: var(--r-etape-texte);
}

.skcc-resa__etapes li span {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--r-etape-num-fond);
	font-weight: 600;
	font-size: 13px;
}

.skcc-resa__etapes li[aria-current="step"] { background: var(--r-etape-actif-fond); color: var(--r-etape-actif-texte); }
.skcc-resa__etapes li[aria-current="step"] span { color: var(--r-etape-num-texte); }

/* Etape 1 : le mois et ses jours. */
.skcc-resa__mois {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 12px;
	color: var(--r-mois);
	text-transform: capitalize;
}

.skcc-resa__fleche {
	width: 38px;
	height: 38px;
	border: 1px solid var(--r-fleche-bord);
	border-radius: 50%;
	background: var(--r-fleche-fond);
	color: var(--r-fleche-texte);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.skcc-resa__fleche:hover:not(:disabled) { background: var(--r-fleche-survol); }
.skcc-resa__fleche:disabled { opacity: 0.3; cursor: default; }

.skcc-resa__grille {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	min-height: 60px;
	text-align: center;
}

.skcc-resa__jsem {
	padding: 4px 0;
	color: var(--r-sem);
	font-size: 12px;
	text-transform: capitalize;
}

.skcc-resa__jour {
	aspect-ratio: 1;
	max-height: 52px;
	border: 1px solid var(--r-jour-bord);
	border-radius: 10px;
	background: var(--r-jour-fond);
	color: var(--r-jour-texte);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.skcc-resa__jour:hover:not(:disabled) { border-color: var(--r-jour-survol); }
.skcc-resa__jour:disabled { background: transparent; border-color: transparent; color: var(--r-jour-off); font-weight: 400; cursor: default; }
.skcc-resa__jour[aria-pressed="true"],
.skcc-resa__jour[aria-pressed="true"]:hover { background: var(--r-jour-choisi-fond); border-color: var(--r-jour-choisi-fond); color: var(--r-jour-choisi-texte); }

.skcc-resa__heures { margin-top: 20px; }

.skcc-resa__sous-titre {
	margin: 0 0 10px;
	color: var(--r-sous-titre);
	font-weight: 600;
}

.skcc-resa__sous-titre::first-letter { text-transform: uppercase; }

.skcc-resa__liste-heures {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
}

.skcc-resa__heure {
	padding: 10px 6px;
	border: 1px solid var(--r-heure-bord);
	border-radius: 10px;
	background: var(--r-heure-fond);
	color: var(--r-heure-texte);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.skcc-resa__heure:hover { border-color: var(--r-heure-survol-bord); background: var(--r-heure-survol-fond); color: var(--r-heure-survol-texte); }

.skcc-resa__vide,
.skcc-resa__alerte {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fbf1e8;
	color: var(--r-encre);
}

.skcc-resa__alerte { margin: 0 0 14px; background: #fdecea; color: #8a2a1f; }

/* Etapes 2 et 3 : les champs. */
.skcc-resa__choix {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--r-choix-fond);
	color: var(--r-choix-texte);
	font-weight: 600;
}

.skcc-resa__choix:empty { display: none; }

.skcc-resa__champ {
	display: block;
	margin: 0 0 14px;
}

.skcc-resa__champ span {
	display: block;
	margin: 0 0 6px;
	color: var(--r-etiquette);
	font-size: 14px;
	font-weight: 600;
}

.skcc-resa__champ input,
.skcc-resa__champ textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--r-champ-bord);
	border-radius: 10px;
	background: var(--r-champ-fond);
	color: var(--r-champ-texte);
	font: inherit;
}

.skcc-resa__champ input:focus,
.skcc-resa__champ textarea:focus {
	outline: none;
	border-color: var(--r-champ-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-champ-focus) 18%, transparent);
}

.skcc-resa__champ input[name="code"] { letter-spacing: 0.08em; text-transform: uppercase; }

.skcc-resa__duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}

.skcc-resa__piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skcc-resa__retour-carte,
.skcc-resa__retour { margin: 0 0 12px; min-height: 1em; }
.skcc-resa__retour-carte:empty,
.skcc-resa__retour:empty { display: none; }
.skcc-resa__retour,
.skcc-resa__retour-carte.est-mauvais { color: var(--r-erreur); }
.skcc-resa__retour-carte.est-bon { color: #2f7a4b; }

/* La carte acceptee, rappelee au-dessus du calendrier. */
.skcc-resa__carte-ok {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--r-choix-fond);
	color: var(--r-choix-texte);
	font-weight: 600;
}

.skcc-resa__carte-ok:empty { display: none; }

[data-panneau="jour"] .skcc-resa__actions { margin-top: 18px; }
.skcc-resa__actions--seul { justify-content: flex-end; }

.skcc-resa__actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.skcc-resa__btn {
	padding: 12px 22px;
	border: 0;
	border-radius: var(--skcc-bouton-rayon, 999px);
	background: var(--r-bouton);
	color: var(--r-bouton-texte);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.skcc-resa__btn:hover:not(:disabled) { background: var(--r-survol); color: var(--r-bouton-survol-texte); }
.skcc-resa__btn:disabled { opacity: 0.6; cursor: wait; }
.skcc-resa__btn--2 { background: var(--r-btn2-fond); color: var(--r-btn2-texte); border: 1px solid var(--r-btn2-bord); }
.skcc-resa__btn--2:hover:not(:disabled) { background: var(--r-btn2-survol); color: var(--r-btn2-survol-texte); }

.skcc-resa__fini { text-align: center; }

.skcc-resa__merci {
	margin: 0;
	padding: 24px 18px;
	border-radius: 14px;
	background: var(--r-merci-fond);
	color: var(--r-merci-texte);
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 520px) {
	.skcc-resa { margin: 28px 0; border-radius: 14px; }
	.skcc-resa__duo { grid-template-columns: minmax(0, 1fr); }
	/* Sur telephone : les trois etapes cote a cote, le numero au-dessus de son nom. */
	.skcc-resa__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.skcc-resa__etapes li { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: 14px; font-size: 12px; line-height: 1.2; text-align: center; }
	.skcc-resa__etapes li span { width: 22px; height: 22px; font-size: 12px; }
	.skcc-resa__grille { gap: 4px; }
	.skcc-resa__actions .skcc-resa__btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ */
/* La page "Utiliser sa carte cadeau" : banniere, etapes, infos.       */
/* ------------------------------------------------------------------ */

#skcc-reservation.skcc-plein { padding-top: 0; }

.skcc-banniere {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(360px, 52vh, 520px);
	padding: 72px 20px 120px;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0) 34%),
		radial-gradient(circle at 88% 80%, rgba(213, 143, 104, 0.22) 0, rgba(213, 143, 104, 0) 40%),
		var(--skcc-bande, #f9e4d4);
	color: var(--skcc-encre, #2b2622);
	text-align: center;
}

.skcc-banniere--photo {
	background: #2b2622 var(--skcc-banniere-image) center / cover no-repeat;
	color: #fff;
}

.skcc-banniere--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 20, 14, 0.35) 0%, rgba(30, 20, 14, 0.62) 100%);
}

.skcc-banniere__dedans {
	position: relative;
	max-width: 720px;
}

.skcc-banniere__sur {
	margin: 0 0 6px;
	font-family: var(--skcc-script, cursive);
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.2;
	color: var(--skcc-titre-script, #8a6a55);
}

.skcc-banniere--photo .skcc-banniere__sur { color: #f6dccb; }

.skcc-banniere__titre {
	margin: 0 0 16px;
	font-size: clamp(32px, 5.2vw, 54px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
}

.skcc-banniere__texte {
	margin: 0 auto 28px;
	max-width: 56ch;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.6;
	opacity: 0.92;
}

.skcc-banniere__bouton {
	display: inline-block;
	padding: 15px 32px;
	border-radius: var(--skcc-bouton-rayon, 999px);
	background: var(--skcc-bouton, #d58f68);
	color: var(--skcc-bouton-texte, #fff);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(120, 70, 40, 0.25);
	transition: transform 0.15s ease, background 0.15s ease;
}

.skcc-banniere__bouton:hover,
.skcc-banniere__bouton:focus-visible {
	background: var(--skcc-bouton-survol, #c27a53);
	color: var(--skcc-bouton-texte, #fff);
	transform: translateY(-1px);
}

/* Les trois etapes, a cheval sur le bas de la banniere. */
.skcc-comment {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	width: min(1000px, calc(100% - 40px));
	margin: -72px auto 0;
	padding: 0;
	list-style: none;
}

.skcc-comment__etape {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 24px 24px;
	border: 1px solid var(--skcc-trait, #ead9cb);
	border-radius: 18px;
	background: var(--skcc-carte, #fff);
	box-shadow: var(--skcc-ombre, 0 18px 40px rgba(120, 80, 50, 0.12));
	color: var(--skcc-texte, #5a5049);
	line-height: 1.5;
}

.skcc-comment__etape strong {
	color: var(--skcc-encre, #2b2622);
	font-size: 17px;
}

.skcc-comment__ic {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0 0 8px;
	border-radius: 50%;
	background: #fbeee4;
	color: var(--skcc-accent, #b0653a);
}

.skcc-comment__ic svg { width: 24px; height: 24px; }

.skcc-comment__num {
	position: absolute;
	top: 20px;
	right: 22px;
	font-family: var(--skcc-script, cursive);
	font-size: 34px;
	line-height: 1;
	color: var(--skcc-trait, #ead9cb);
}

#skcc-reservation .skcc-resa { margin: 56px auto; }

.skcc-resa__ferme {
	width: min(760px, calc(100% - 40px));
	margin: 56px auto;
	padding: 20px 24px;
	border-radius: 14px;
	background: var(--skcc-carte, #fff);
	text-align: center;
}

/* Les infos pratiques. */
.skcc-infos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	width: min(1000px, calc(100% - 40px));
	margin: 0 auto;
}

.skcc-infos__bloc {
	padding: 24px;
	border-radius: 18px;
	background: var(--skcc-bande, #f9e4d4);
	color: var(--skcc-texte, #5a5049);
	line-height: 1.6;
}

.skcc-infos__bloc h2 {
	margin: 0 0 10px;
	font-family: var(--skcc-script, cursive);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--skcc-titre-script, #8a6a55);
}

.skcc-infos__bloc p { margin: 0 0 8px; }
.skcc-infos__bloc a { color: var(--skcc-accent, #b0653a); font-weight: 600; word-break: break-all; }

.skcc-infos__bloc dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0;
}

.skcc-infos__bloc dt { color: var(--skcc-encre, #2b2622); font-weight: 600; }
.skcc-infos__bloc dd { margin: 0; }

@media (max-width: 760px) {
	.skcc-banniere { padding: 56px 20px 96px; min-height: 0; }
	.skcc-comment { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: -56px; }
	.skcc-comment__etape { padding: 20px; }
	.skcc-infos__bloc dl { grid-template-columns: minmax(0, 1fr); }
	.skcc-infos__bloc dd { margin-bottom: 6px; }
}