/* Trackday Giallo : charte graphique (jeton de design + composants de base).
   Reprise de maquettes/accueil-giallo/style.css : rouge #DC0000, Outfit uniquement,
   rayon 0, aucune ombre, titres en majuscules. */

:root {
	--tdg-accent: #DC0000;
	--tdg-accent-ombre: #8F0000;
	--tdg-carbone: #202020;
	--tdg-carbone-profond: #181818;
	--tdg-noir: #000;
	--tdg-blanc: #fff;
	--tdg-marbre: #F5F5F5;
	--tdg-graphite: #494949;
	/* Gris de texte sur fond clair : 5,3:1 sur blanc, 4,9:1 sur marbre (l'ancien #7D7D7D ne faisait que 4,1:1). */
	--tdg-acier: #6B6B6B;
	/* Gris de texte sur fond sombre : 5,5:1 sur carbone. */
	--tdg-cendre: #969696;
	/* Couleur du contour de focus : carbone sur fond clair, blanc sur fond sombre (voir plus bas). */
	--tdg-focus: var(--tdg-carbone);
	/* Gris de texte : acier sur fond clair, cendre sur fond sombre (redéfini avec le contour de focus, plus bas). */
	--tdg-gris: var(--tdg-acier);
	--tdg-police: 'Outfit', system-ui, sans-serif;
	--tdg-espace: .023em;
	--tdg-max: 1440px;
	--tdg-marge: clamp(16px, 4vw, 64px);
	--tdg-ease: cubic-bezier(.76, 0, .24, 1);
	--tdg-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
/* « html body.tdg-theme » : la police et la graisse de base ne doivent pas dépendre du kit Elementor (chargé seulement
   à la demande sur les pages non Elementor) ni être écrasées par le thème parent (Hello Elementor : police système). */
body, html body.tdg-theme {
	font-family: var(--tdg-police);
	font-weight: 300;
	color: var(--tdg-carbone);
	letter-spacing: var(--tdg-espace);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
body.tdg-theme :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--tdg-police);
	font-weight: 600;
	text-transform: uppercase;
}
/* Focus clavier : contour de 2 px lisible sur tous les fonds (le rouge disparaissait sur les boutons rouges
   et n'atteignait que 3,4:1 sur le noir). Une seule touche d'accent : le rouge reste réservé à l'action. */
/* « html body » : le thème parent (Hello Elementor, reset.css) pose sur a/button/input un contour noir + halo blanc à spécificité égale et chargé après nous. */
html body :focus-visible { outline: 2px solid var(--tdg-focus); outline-offset: 3px; }
html body a:focus-visible, html body button:focus-visible, html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible, html body [tabindex]:not([tabindex="-1"]):focus-visible { box-shadow: none; }
.tdg-sombre, .tdg-nav, .tdg-menu, .tdg-pied, .tdg-heros, .tdg-offre, .tdg-galerie, .tdg-fh, .tdg-boutique-entete { --tdg-focus: var(--tdg-blanc); --tdg-gris: var(--tdg-cendre); }

/* ---------- Sections ---------- */
.tdg-sombre { background: var(--tdg-carbone); color: var(--tdg-blanc); }
.tdg-clair { background: var(--tdg-blanc); color: var(--tdg-carbone); }
.tdg-sombre .tdg-surtitre,
.tdg-sombre .tdg-lien-fleche { color: var(--tdg-blanc); }
.tdg-clair .tdg-surtitre,
.tdg-clair .tdg-lien-fleche { color: var(--tdg-carbone); }

/* ---------- Typographie ---------- */
.tdg-surtitre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .2em;
}
.tdg-surtitre::before { content: ''; width: 32px; height: 1px; background: currentColor; }

.tdg-titre-xl, .tdg-titre-l, .tdg-titre-m {
	font-family: var(--tdg-police);
	font-weight: 600;
	line-height: .92;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.tdg-titre-xl { font-size: clamp(54px, 9.4vw, 148px); font-weight: 800; line-height: .9; letter-spacing: -.02em; }
.tdg-titre-l { font-size: clamp(44px, 7vw, 104px); }
.tdg-titre-m { font-size: clamp(28px, 3.4vw, 54px); line-height: 1; }

.tdg-fleche { display: inline-block; transition: transform .5s var(--tdg-ease-out); }

/* ---------- Boutons ---------- */
.tdg-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 18px 28px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--tdg-accent);
	color: var(--tdg-blanc);
	font-family: var(--tdg-police);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color .4s;
}
.tdg-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--tdg-blanc);
	transform: translateY(101%);
	transition: transform .6s var(--tdg-ease);
	z-index: -1;
}
.tdg-btn:hover, .tdg-btn:focus-visible { color: var(--tdg-carbone); }
.tdg-btn:hover::before, .tdg-btn:focus-visible::before { transform: translateY(0); }
.tdg-btn:hover .tdg-fleche, .tdg-btn:focus-visible .tdg-fleche,
.tdg-lien-fleche:hover .tdg-fleche, .tdg-lien-fleche:focus-visible .tdg-fleche { transform: translateX(8px); }

/* Sur fond clair, le remplissage blanc au survol reste délimité par un filet carbone */
.tdg-clair .tdg-btn:hover { outline: 1px solid var(--tdg-carbone); outline-offset: -1px; }

.tdg-btn--contour {
	padding: 10px 18px;
	border: 1px solid var(--tdg-acier);
	background: transparent;
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	transition: background .3s, color .3s, border-color .3s;
}
.tdg-btn--contour::before { display: none; }
.tdg-btn--contour:hover, .tdg-btn--contour:focus-visible {
	background: var(--tdg-blanc);
	color: var(--tdg-carbone);
	border-color: var(--tdg-blanc);
	box-shadow: none;
}
.tdg-clair .tdg-btn--contour:hover { border-color: var(--tdg-carbone); }

/* ---------- Liens ---------- */
.tdg-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	text-decoration: none;
	color: inherit;
}
.tdg-lien-ligne { position: relative; text-decoration: none; }
.tdg-lien-ligne::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--tdg-ease);
}
.tdg-lien-ligne:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
	.tdg-btn, .tdg-btn::before, .tdg-fleche, .tdg-lien-ligne::after { transition: none; }
}
/* Mouvement réduit, filet général : plus aucune transition ni animation CSS dans le thème (boutique, pages, menu…). */
@media (prefers-reduced-motion: reduce) {
	.tdg-theme *, .tdg-theme *::before, .tdg-theme *::after {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Calendrier du module de réservation (le module n'est pas modifié) ---------- */
/* Gris de texte du module aligné sur celui de la charte (contraste ≥ 4,5:1). */
body .td-calendrier, body .td-parcours { --td-acier: var(--tdg-gris); }
/* Bandeaux sombres du parcours : les étapes à venir restent lisibles sur le carbone. */
body .td-parcours__entete, body .td-progression, body .td-parcours--ferme { --td-acier: var(--tdg-cendre); }
/* Mobile : le module affiche un « Réserver » rouge sur chaque ligne ; la charte n'autorise qu'un rouge par écran.
   Contour au repos, rouge au toucher/survol/focus. */
@media (max-width: 760px) {
	.td-calendrier .td-date .td-bouton:not(.td-bouton--neutre) { border: 1px solid currentColor; background: transparent; color: inherit; }
	.td-calendrier .td-date .td-bouton:not(.td-bouton--neutre):hover,
	.td-calendrier .td-date .td-bouton:not(.td-bouton--neutre):focus-visible,
	.td-calendrier .td-date .td-bouton:not(.td-bouton--neutre):active { border-color: var(--td-rouge); background: var(--td-rouge); color: #fff; }
}