/* Tarot de Lyon : noir et blanc, Karrik, cadres titrés et boutons au trait comme sur videoootheque.fr. */

@font-face {
	font-family: 'Karrik';
	src: url('fonts/Karrik-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Karrik';
	src: url('fonts/Karrik-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

:root {
	--tdl-fond: #000;
	--tdl-texte: #f2f2f2;
	--tdl-gris: #8f8f8f;
	--tdl-trait: 3px;
	--tdl-accent: #fff;
	--tdl-cadre-haut: #fff;
	--tdl-cadre-bas: rgba(255, 255, 255, 0);
	--tdl-marge: clamp(16px, 4vw, 50px);
}

html { background: var(--tdl-fond); }

body.tdl-page {
	margin: 0;
	min-height: 100vh;
	background: var(--tdl-fond);
	color: var(--tdl-texte);
	font-family: 'Karrik', sans-serif;
	font-synthesis: none;
	font-size: clamp(1.125rem, 1rem + .4vw, 1.36rem);
	line-height: 1.5;
	letter-spacing: -.1px;
}

body.tdl-page * { box-sizing: border-box; }
body.tdl-page h1, body.tdl-page h2, body.tdl-page h3, body.tdl-page strong, body.tdl-page b { font-weight: 400; }

/* Titre, comme la première version : centré sur fond noir */
.tdl-hero { background: var(--tdl-fond); padding: 3rem 16px 0; text-align: center; }
.tdl-nom-site {
	margin: 0;
	font-size: clamp(2rem, 7vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: .04em;
	color: #fff;
}
.tdl-nom-site a, .tdl-nom-site a:hover { color: #fff; text-decoration: none; }

/* Zone de jeu */
.tdl {
	max-width: 720px;
	margin: 0 auto;
	padding: 2rem var(--tdl-marge) 4rem;
}

/* Choix du tirage, à la manière du menu de la vidéooothèque : | 3 cartes | 5 cartes */
.tdl-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 1.2rem;
	margin: 0 0 .5rem;
	font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
}
.tdl-option {
	font: inherit;
	color: var(--tdl-gris);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color .25s;
}
.tdl-option::before { content: '| '; }
.tdl-option:hover, .tdl-option.est-actif { color: var(--tdl-texte); }
.tdl-option.est-actif { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }

/* Cadres titrés : le titre est posé sur le trait du haut */
.tdl-cadre {
	position: relative;
	margin: 2.8rem 0 0;
	padding: 2.3rem 1rem 1.2rem;
	border: var(--tdl-trait) solid;
	border-bottom-width: 0;
	border-image: linear-gradient(var(--tdl-cadre-haut), var(--tdl-cadre-bas)) 1;
}
.tdl-cadre-titre {
	position: absolute;
	top: 0;
	left: 1rem;
	transform: translateY(-55%);
	max-width: calc(100% - 2rem);
	margin: 0;
	padding: 0 .5rem;
	background: var(--tdl-fond);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	line-height: 1.15;
}

.tdl-consigne { margin: 0; }
.tdl-numero { color: var(--tdl-gris); margin: 0 0 1rem; }

/* Boutons au trait */
.tdl-btn {
	display: inline-block;
	margin-top: 1.6rem;
	padding: .6rem 1.2rem .75rem;
	font: inherit;
	line-height: 1.4;
	color: var(--tdl-accent);
	background: transparent;
	border: var(--tdl-trait) solid var(--tdl-accent);
	border-radius: 0;
	cursor: pointer;
	transition: background-color .25s, color .25s;
}
.tdl-btn:hover:not(:disabled), .tdl-btn:focus-visible { background: var(--tdl-accent); color: #000; outline: none; }
.tdl-btn:disabled { opacity: .4; cursor: default; }

.tdl-erreur { color: var(--tdl-gris); min-height: 1.5em; margin: 1rem 0 0; }

/* Dos des cartes */
.tdl-dos-rangee {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
}
.tdl-dos {
	width: clamp(64px, 15vw, 104px);
	aspect-ratio: 2 / 3;
	padding: 0;
	font: inherit;
	color: var(--tdl-texte);
	background: var(--tdl-fond);
	border: var(--tdl-trait) solid var(--tdl-texte);
	border-radius: 0;
	cursor: pointer;
	transition: transform .2s, border-color .2s;
}
.tdl-dos:hover:not(:disabled), .tdl-dos:focus-visible { transform: translateY(-6px); background: #1a1a1a; outline: none; }
.tdl-dos.est-revelee { opacity: .25; cursor: default; }

/* Tirage à 5 : extérieur / intérieur */
.tdl-groupe + .tdl-groupe { margin-top: 1.4rem; }
.tdl-groupe-nom { margin: 0 0 .6rem; color: var(--tdl-gris); }

/* Carte révélée */
.tdl-carte { margin: 3rem 0 0; animation: tdl-apparition .7s ease both; scroll-margin-top: 1.5rem; }
.tdl-carte-titre { margin: 0 0 1rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.15; }
.tdl-carte img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin: 0 0 1.4rem;
}
.tdl-description p { margin: 0 0 1em; }
.tdl-description p:last-child { margin-bottom: 0; }

@keyframes tdl-apparition {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tdl-carte { animation: none; }
	.tdl-dos { transition: none; }
}

/* Formulaire de consultation */
.tdl-champ { display: block; margin-bottom: 1.2rem; }
.tdl-champ span { display: block; margin-bottom: .35rem; color: var(--tdl-gris); }
.tdl-champ input,
.tdl-champ textarea {
	width: 100%;
	padding: .75rem;
	font: inherit;
	color: var(--tdl-texte);
	background: transparent;
	border: var(--tdl-trait) solid var(--tdl-texte);
	border-radius: 0;
}
.tdl-champ input:focus,
.tdl-champ textarea:focus { outline: 2px solid #fff; outline-offset: 2px; }

.tdl-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }