/* ==========================================================================
   The Devils — habillage de la page d'accueil

   La page est construite avec des modules Divi natifs : textes, titres,
   couleurs, images, boutons et espacements se règlent dans le Divi Builder.
   Ce fichier ne contient que ce que le Builder ne sait pas produire :

     · les coins d'angle et les filigranes du logo
     · le bandeau rouge défilant
     · la grille en mosaïque (colonnes qui s'étendent sur 2 rangées)
     · les boutons à coins biseautés
     · le formulaire d'inscription

   Chaque bloc cible la classe CSS posée sur le module correspondant
   (onglet Avancé → Classe CSS dans le Builder).
   ========================================================================== */

/* Réglages d'apparence. Ce sont les valeurs par défaut : elles se redéfinissent
   sans toucher à ce fichier, depuis wp-admin → Apparence → Personnaliser →
   CSS additionnel, où un bloc commenté les reprend toutes. Ce qui est écrit
   là-bas est chargé après ce fichier et l'emporte donc sur lui. */
:root {
	--tdv-red: #e31b2c;
	--tdv-ink: #0a0a0a;
	--tdv-paper: #f5f2ec;
	--tdv-muted: #a6a096;
	--tdv-dim: #615d56;

	/* Durée d'un tour complet du bandeau défilant. Plus grand = plus lent. */
	--tdv-marquee-duree: 22s;
	/* Profondeur du biseau des boutons. 0 = coins droits. */
	--tdv-biseau: 8px;
	--tdv-biseau-hero: 10px;
}

/* Évite les bandes blanches entre les sections sur le gabarit vierge. */
body.page-template-page-template-blank,
body.page-template-page-template-blank #page-container,
body.page-template-page-template-blank #main-content {
	background-color: var(--tdv-ink);
}

/* Divi pose un ::after de nettoyage de flottants sur chaque ligne. Dans un
   conteneur grid ou flex il devient un item fantôme : rangée vide dans la
   mosaïque, colonne parasite dans les lignes en flex. On le neutralise sur
   les seules lignes qu'on repasse en grid/flex. */
.tdv-r-header::before, .tdv-r-header::after,
.tdv-r-mosaic::before, .tdv-r-mosaic::after,
.tdv-r-social::before, .tdv-r-social::after,
.tdv-r-footer::before, .tdv-r-footer::after {
	content: none;
}

/* --- Barre de navigation ------------------------------------------------ */

.tdv-s-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

.tdv-r-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	position: relative;
}

.tdv-r-header > * {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* Le bloc de marque et le bouton « Adhérer » n'ont pas la même largeur : en
   simple répartition, le menu se retrouvait décalé d'une trentaine de pixels
   vers la droite. On le sort du flux pour le caler sur le milieu de l'écran. */
@media (min-width: 981px) {
	.tdv-r-header > .et_pb_column:nth-child(2) {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: auto !important;
		margin: 0 !important;
	}

	.tdv-menu .et_pb_menu__wrap { justify-content: center; }
}

.tdv-brand .et_pb_text_inner p {
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

/* Le bloc de marque renvoie à l'accueil : c'est le lien qui porte la
   mise en ligne, pour que le logo et le texte soient cliquables ensemble. */
.tdv-brand .et_pb_text_inner a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.tdv-brand img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 4px;
	flex: none;
}

.tdv-menu .et_pb_menu__menu > nav > ul {
	justify-content: center;
	gap: 32px;
}

.tdv-menu .et_pb_menu__menu > nav > ul > li {
	margin: 0;
	padding: 0;
}

/* Le panneau du sous-menu déroulant garde le bleu par défaut de Divi sur son
   liseré (fond et texte sont déjà recolorés depuis le Builder, ce trait ne
   l'est pas). On l'aligne sur le rouge du site, dans les deux sens
   d'ouverture. */
.tdv-menu .nav li ul {
	border-top-color: var(--tdv-red);
}

.tdv-menu .nav li.et-reverse-direction-nav li ul,
.tdv-menu .et-menu-nav > ul.upwards li ul {
	border-bottom-color: var(--tdv-red);
}

/* --- Boutons à coins biseautés ------------------------------------------ */

.tdv-btn.et_pb_button,
.tdv-btn.et_pb_button:hover {
	clip-path: polygon(var(--tdv-biseau) 0, 100% 0, calc(100% - var(--tdv-biseau)) 100%, 0 100%);
	border-radius: 0;
}

.tdv-btn--hero.et_pb_button,
.tdv-btn--hero.et_pb_button:hover {
	clip-path: polygon(var(--tdv-biseau-hero) 0, 100% 0, calc(100% - var(--tdv-biseau-hero)) 100%, 0 100%);
	box-shadow: 0 20px 40px -10px rgba(227, 27, 44, .6);
}

/* --- Hero --------------------------------------------------------------- */

.tdv-s-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.tdv-s-hero > .et_pb_row {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Le filigrane du logo est désormais le fond de la section, réglé dans le
   Divi Builder (Section → Fond). L'image donne le logo, le dégradé posé
   par-dessus donne l'intensité : plus son opacité est haute, plus le
   filigrane s'efface. Même principe sur les autres sections. */

/* Les quatre équerres d'angle, en un seul élément (8 dégradés) */
.tdv-s-hero::after {
	content: "";
	position: absolute;
	inset: 28px;
	pointer-events: none;
	opacity: .3;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper));
	background-size:
		26px 2px, 2px 26px,
		26px 2px, 2px 26px,
		26px 2px, 2px 26px,
		26px 2px, 2px 26px;
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

.tdv-h1 h1 {
	padding-bottom: 0;
	text-shadow: 0 6px 40px rgba(0, 0, 0, .8);
}

/* La section à fond parallaxe (#DEVILNEVERDIES / « Asso No.1 ») rend son
   fond bien plus haut que sa propre boîte pour pouvoir le faire glisser sans
   montrer ses bords pendant le défilement, et Divi ne la passe pas en
   overflow:hidden : le débordement peint alors par-dessus la section qui la
   précède. Sans incidence tant que le Hero, très grand, absorbait le
   débordement — mais la section « Prochain match », plus fine, s'est
   retrouvée recouverte. */
.et_pb_section_parallax {
	overflow: hidden;
}

/* Divi pose overflow-y:hidden en ligne sur #page-container dès qu'une
   section à fond parallaxe est présente sur la page (accueil), pour
   contenir le débordement du fond — mais ça casse le sticky du menu, qui
   a besoin d'un ancêtre à overflow visible. Le confinement du parallaxe
   est déjà assuré par la règle ci-dessus, posée sur la section elle-même :
   revenir à overflow visible ici ne fait pas réapparaitre le débordement. */
body.home #page-container {
	overflow-y: visible !important;
}

/* --- Prochain match (carousel façon Twitch) ------------------------------ */

/* Contrairement aux autres sections de l'accueil, celle-ci n'a pas de couleur
   de fond réglée dans le Builder (Section → Fond) : Divi lui applique alors
   son blanc par défaut, qui tranche avec le reste du site tout en noir. */
.tdv-s-matchs {
	background-color: var(--tdv-ink) !important;
}

.tdv-matchs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: 20px;
	padding: 10px 0 6px;
}

/* Les trois cartes gardent le même cadre (même fond, même hauteur minimale)
   même quand l'une d'elles n'a pas encore de match à afficher (« Adversaire
   à confirmer ») : le contenu se centre verticalement dans un cadre fixe
   plutôt que de le faire rétrécir. */
.tdv-matchs__carte {
	background: var(--tdv-ink);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 28px 22px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	clip-path: polygon(var(--tdv-biseau) 0, 100% 0, calc(100% - var(--tdv-biseau)) 100%, 0 100%);
}

/* La carte centrale reste surélevée et cerclée de rouge : c'est elle qui doit
   accrocher l'œil en premier, comme sur l'accueil Twitch — mais son cadre
   garde la même taille que les deux autres. */
.tdv-matchs__carte--centre {
	border-color: var(--tdv-red);
	transform: translateY(-18px);
	box-shadow: 0 30px 60px -20px rgba(227, 27, 44, .5);
	position: relative;
	z-index: 2;
}

.tdv-matchs__badge {
	display: inline-block;
	font: 700 12px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tdv-dim);
	margin-bottom: 14px;
}

.tdv-matchs__badge--accent {
	color: var(--tdv-red);
}

.tdv-matchs__adversaire {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 32px;
	letter-spacing: 1px;
	color: var(--tdv-paper);
	text-transform: uppercase;
	line-height: 1.1;
}

.tdv-matchs__score {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 26px;
	color: var(--tdv-paper);
	margin-top: 6px;
}

.tdv-matchs__date,
.tdv-matchs__meta {
	font: 400 13px 'Barlow', sans-serif;
	color: var(--tdv-muted);
	margin-top: 8px;
}

.tdv-matchs__vide {
	font: 400 15px 'Barlow', sans-serif;
	color: var(--tdv-dim);
	padding: 12px 0;
}

.tdv-matchs__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 18px;
}

.tdv-matchs__cta,
.tdv-matchs__lien {
	display: inline-block;
	font: 700 13px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--tdv-red);
	text-decoration: none;
	border-bottom: 1px solid var(--tdv-red);
	padding-bottom: 2px;
}

.tdv-matchs__credit {
	text-align: center;
	font: 400 12px 'Barlow', sans-serif;
	color: var(--tdv-dim);
	margin: 10px 0 0;
	padding: 0;
}

.tdv-matchs__credit a {
	color: inherit;
}

@media (max-width: 980px) {
	.tdv-matchs {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.tdv-matchs__carte {
		min-height: 0;
	}

	/* En mobile, seul le prochain match reste affiché : le dernier résultat et
	   « Après » alourdissent la lecture sur petit écran sans apporter grand-
	   chose de plus que le titre de la section. */
	.tdv-matchs__carte--gauche,
	.tdv-matchs__carte--droite {
		display: none;
	}

	.tdv-matchs__carte--centre {
		transform: none;
	}
}

/* --- Bandeau défilant --------------------------------------------------- */

.tdv-s-marquee .et_pb_row,
.tdv-s-marquee .et_pb_column,
.tdv-s-marquee .et_pb_module {
	padding: 0;
	margin: 0;
}

.tdv-marquee {
	overflow: hidden;
	padding: 14px 0;
	white-space: nowrap;
}

.tdv-marquee__track {
	display: inline-block;
	animation: tdv-marquee var(--tdv-marquee-duree) linear infinite;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 26px;
	letter-spacing: 3px;
	color: var(--tdv-ink);
	text-transform: uppercase;
}

.tdv-marquee__track span {
	padding: 0 26px;
}

@keyframes tdv-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.tdv-marquee__track { animation: none; }
}

/* --- Mosaïque ----------------------------------------------------------- */

.tdv-r-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 190px;
	gap: 14px;
}

.tdv-r-mosaic > * {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	min-height: 0;
}

/* La grande photo occupe 2 colonnes sur 2 rangées, la dernière 2 colonnes. */
.tdv-r-mosaic > *:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.tdv-r-mosaic > *:nth-child(4) {
	grid-column: span 2;
}

.tdv-cell,
.tdv-cell .et_pb_image_wrap,
.tdv-cell img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.tdv-cell img {
	object-fit: cover;
}

.tdv-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tdv-card .et_pb_text {
	margin: 0;
}

.tdv-card .et_pb_text_inner p {
	margin: 0;
	padding: 0;
	line-height: inherit;
}

/* --- Réseaux ------------------------------------------------------------ */

.tdv-r-social {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.tdv-r-social > * {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	min-height: 250px;
}

/* Les modules gardent leur hauteur naturelle : sans ça, le texte se fait
   comprimer sous le bouton quand il passe sur deux lignes. */
.tdv-r-social > * > .et_pb_module {
	flex: 0 0 auto;
}

/* Le bouton reste collé en bas de la carte, quelle que soit la longueur du texte. */
.tdv-social-card .et_pb_button_module_wrapper {
	margin-top: auto !important;
}

.tdv-ghost.et_pb_button:hover {
	background-color: rgba(255, 255, 255, .08) !important;
	border-color: rgba(255, 255, 255, .55) !important;
}

/* --- Inscription -------------------------------------------------------- */

.tdv-s-signup {
	position: relative;
	overflow: hidden;
}

.tdv-s-signup > .et_pb_row {
	position: relative;
	z-index: 2;
}

.tdv-form {
	display: flex;
	gap: 12px;
	max-width: 640px;
}

.tdv-form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: var(--tdv-ink);
	border: 1px solid rgba(255, 255, 255, .2);
	padding: 18px 20px;
	font: 400 16px 'Barlow', sans-serif;
	color: var(--tdv-paper);
	border-radius: 0;
}

.tdv-form input[type="email"]::placeholder {
	color: var(--tdv-dim);
}

.tdv-form button {
	background: var(--tdv-red);
	color: #fff;
	font: 700 15px/1 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0 34px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	border-radius: 0;
}

.tdv-form__note {
	font: 400 13px 'Barlow', sans-serif;
	color: var(--tdv-dim);
	margin: 14px 0 0;
	padding: 0;
}

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

.tdv-r-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tdv-r-footer > * {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.tdv-r-footer .et_pb_text_inner p {
	margin: 0;
	padding: 0;
}

/* --- Adaptations tablette / mobile -------------------------------------- */

@media (max-width: 1100px) {
	.tdv-r-mosaic {
		grid-auto-rows: minmax(150px, auto);
	}
}

@media (max-width: 980px) {
	/* Divi bascule ses colonnes en pleine largeur : on rétablit nos grilles. */
	.tdv-r-mosaic > *,
	.tdv-r-social > *,
	.tdv-r-header > *,
	.tdv-r-footer > * {
		width: auto !important;
		margin-bottom: 0 !important;
	}

	/* Divi remplace le menu par un bouton hamburger : logo, hamburger et
	   bouton tiennent sur une seule ligne. */
	.tdv-r-header {
		flex-wrap: nowrap;
		gap: 14px;
	}

	/* Le hamburger passe en premier : coin haut gauche de l'écran. */
	.tdv-r-header > *:nth-child(2) {
		order: -1;
		flex: 0 0 auto;
		margin: 0 !important;
	}

	/* Le logo reste collé au hamburger, à gauche : c'est le bouton qu'on
	   pousse tout à droite avec une marge automatique, plutôt que de centrer
	   le logo sur l'écran (ça laissait un vide entre lui et le hamburger). */
	.tdv-r-header {
		justify-content: flex-start;
	}

	.tdv-r-header > *:nth-child(3) {
		margin-left: auto !important;
	}

	/* Divi impose la taille du texte et le retrait du bouton par des règles
	   plus spécifiques que les nôtres : il faut forcer. */
	.tdv-brand .et_pb_text_inner,
	.tdv-brand .et_pb_text_inner p,
	.tdv-brand .et_pb_text_inner a { font-size: 24px !important; }

	.tdv-brand .et_pb_text_inner a { gap: 10px; }
	.tdv-brand .et_pb_text_inner img {
		width: 30px !important;
		height: 30px !important;
	}

	.tdv-r-header .et_pb_button.et_pb_button {
		padding-left: 17px !important;
		padding-right: 17px !important;
	}

	.tdv-menu .et_mobile_nav_menu {
		margin: 0;
		float: none;
	}

	/* Le pictogramme hamburger est bleu par défaut chez Divi, et sa règle
	   est plus spécifique que la nôtre. */
	.tdv-menu .et_pb_menu__wrap .mobile_menu_bar:before,
	.tdv-menu .mobile_menu_bar:before,
	.tdv-menu .mobile_menu_bar_toggle:before {
		color: var(--tdv-paper) !important;
	}

	/* Le module Menu occupe 100% et son wrap aligne à droite : la colonne
	   s'étirait et repoussait le logo hors écran. */
	/* Largeur fixée à celle du hamburger : en auto, le module remplit la
	   colonne et repousse le logo hors écran. */
	.tdv-r-header > *:nth-child(2) {
		width: 32px !important;
		/* Divi met la colonne en relative : elle servait de référence au
		   panneau, qui restait large de 32px. */
		position: static;
	}

	.tdv-menu,
	.tdv-menu .et_pb_menu_inner_container,
	.tdv-menu .et_pb_menu__wrap {
		width: 100% !important;
		flex: 0 0 auto;
	}

	.tdv-menu .et_pb_menu__wrap {
		justify-content: flex-start;
	}

	/* Le panneau déroulant est positionné dans la colonne du menu, large de
	   32px : son fond ne passait pas sous le texte. On neutralise les
	   ancêtres positionnés pour qu'il se cale sur toute la ligne. */
	.tdv-r-header { position: relative; }

	.tdv-menu,
	.tdv-menu .et_pb_menu_inner_container,
	.tdv-menu .et_pb_menu__wrap,
	.tdv-menu .et_pb_menu__menu,
	.tdv-menu .et_mobile_nav_menu {
		position: static;
	}

	/* L'état fermé du menu mobile est porté par le CSS dynamique que Divi
	   génère page par page. Quand ce CSS arrive incomplet, plus rien ne
	   masque le panneau et il reste ouvert. On réaffirme la règle ici, dans
	   une feuille toujours chargée. Divi ouvre ensuite le menu en posant un
	   display en style en ligne, qui l'emporte sur celle-ci. */
	.tdv-menu .et_mobile_menu {
		display: none;
	}

	.tdv-menu .mobile_nav.opened .et_mobile_menu {
		display: block;
	}

	.tdv-menu .et_mobile_menu {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		border-top: 3px solid var(--tdv-red);
		padding: 6px 0;
	}

	.tdv-menu .et_mobile_menu li a {
		display: block;
		padding: 14px 20px;
		width: 100%;
		box-sizing: border-box;
	}

	/* Sous-menu de la navigation mobile : replié par défaut, avec une flèche
	   pour le déployer (Divi affiche sinon les pages filles en permanence,
	   sur toute la hauteur du panneau). La flèche est un ::after, pas un
	   élément inséré : le script de menu de Divi reconstruit le panneau après
	   coup et effacerait un bouton ajouté en JS. Le clic dans sa zone est
	   détecté par délégation dans assets/the-devils.js. */
	.tdv-menu .et_mobile_menu li.menu-item-has-children > a {
		position: relative;
		padding-right: 56px;
	}

	.tdv-menu .et_mobile_menu li.menu-item-has-children > a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--tdv-paper);
		border-bottom: 2px solid var(--tdv-paper);
		transform: translateY(-65%) rotate(45deg);
		transition: transform .2s;
	}

	.tdv-menu .et_mobile_menu li.tdv-submenu-open > a::after {
		transform: translateY(-35%) rotate(-135deg);
	}

	/* Divi force l'affichage du sous-menu mobile en !important : on doit
	   faire de même pour le replier. */
	.tdv-menu .et_mobile_menu .sub-menu {
		display: none !important;
		background: rgba(255, 255, 255, .04);
	}

	.tdv-menu .et_mobile_menu li.tdv-submenu-open > .sub-menu {
		display: block !important;
	}

	.tdv-menu .et_mobile_menu .sub-menu li a {
		padding-left: 36px;
		font-size: 14px;
	}

	.tdv-s-hero {
		min-height: 0 !important;
		padding-top: 96px !important;
		padding-bottom: 110px !important;
	}

	.tdv-r-social {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 780px) {
	.tdv-r-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}

	.tdv-r-mosaic > *:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.tdv-r-mosaic > *:nth-child(4) {
		grid-column: span 2;
	}

	.tdv-marquee__track {
		font-size: 20px;
	}

	.tdv-form {
		flex-direction: column;
	}

	.tdv-form button {
		padding: 18px 34px;
		justify-content: center;
	}

	.tdv-r-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
   PAGES INTÉRIEURES — L'association, Adhérer, Boutique, Médias, Contact
   Mêmes principes : tout ce qui suit est ce que le Divi Builder ne sait pas
   produire. Chaque règle cible la classe CSS posée sur le module.
   ========================================================================== */

/* --- Titre de page (filigrane + équerres) ------------------------------- */

.tdv-s-pagehero {
	position: relative;
	overflow: hidden;
}

.tdv-s-pagehero > .et_pb_row {
	position: relative;
	z-index: 2;
}

/* Le filigrane de cette section, y compris son décalage sur la page Adhérer,
   se règle dans le Builder (Section → Fond). */

/* Deux équerres, en haut et en bas du même côté. */
.tdv-s-pagehero::after {
	content: "";
	position: absolute;
	inset: 28px;
	pointer-events: none;
	opacity: .3;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper)),
		linear-gradient(var(--tdv-paper), var(--tdv-paper));
	background-size: 26px 2px, 2px 26px, 26px 2px, 2px 26px;
}

.tdv-corners--left::after {
	background-position: left top, left top, left bottom, left bottom;
}

.tdv-corners--right::after {
	background-position: right top, right top, right bottom, right bottom;
}

.tdv-s-pagehero--adherer::after {
	content: none;
}

.tdv-s-pagehero h1 {
	padding-bottom: 0;
}

/* --- Colonnes asymétriques ---------------------------------------------- */

/* Divi ne sait pas exprimer « 1fr + 340px » : on repasse la ligne en grille.
   Les largeurs viennent d'ici, plus des réglages de colonne du Builder. */
.tdv-split {
	display: grid;
	gap: 60px;
	align-items: start;
}

.tdv-split::before,
.tdv-split::after {
	content: none;
}

.tdv-split > * {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	min-width: 0;
}

.tdv-split--center { align-items: center; }

.tdv-split--340l { grid-template-columns: 340px minmax(0, 1fr); }
.tdv-split--340r { grid-template-columns: minmax(0, 1fr) 340px; }
.tdv-split--380  { grid-template-columns: minmax(0, 1fr) 380px; }
.tdv-split--420  { grid-template-columns: minmax(0, 1fr) 420px; }
.tdv-split--480  { grid-template-columns: minmax(0, 1fr) 480px; gap: 70px; }
.tdv-split--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* --- Grilles de cartes régulières --------------------------------------- */

.tdv-grid {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

.tdv-grid::before,
.tdv-grid::after {
	content: none;
}

.tdv-grid > * {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	min-width: 0;
}

.tdv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Deux cartes au format portrait : sur pleine largeur elles deviendraient
   démesurément hautes, on plafonne la colonne et on centre la paire. */
.tdv-grid--2p {
	grid-template-columns: repeat(2, minmax(0, 320px));
	justify-content: center;
}

/* --- Photo en tête de carte (L'association : bureau) -------------------- */

.tdv-avatar,
.tdv-avatar .et_pb_image_wrap,
.tdv-avatar img {
	display: block;
	width: 100%;
}

.tdv-avatar img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.tdv-avatar {
	margin: 0 0 22px !important;
}

/* --- Fiche d'identité (L'association) ----------------------------------- */

.tdv-facts dl {
	margin: 0;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	column-gap: 24px;
}

.tdv-facts dt,
.tdv-facts dd {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.tdv-facts dt {
	font: 700 12px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tdv-dim);
}

.tdv-facts dl > :nth-last-child(-n + 2) {
	border-bottom: 0;
}

/* --- Liste à puces (Adhérer) -------------------------------------------- */

.tdv-bullets ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.tdv-bullets li {
	position: relative;
	padding: 0 0 16px 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	list-style: none;
}

.tdv-bullets li::before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--tdv-red);
	font: 700 15px 'Barlow Condensed', sans-serif;
}

.tdv-bullets strong { font-weight: 600; }
.tdv-bullets span { color: var(--tdv-muted); }

/* --- Numéros d'étape en contour (Adhérer) ------------------------------- */

.tdv-step-num .et_pb_text_inner p {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--tdv-red);
	margin: 0;
}

/* --- Carte tarif (Adhérer) ---------------------------------------------- */

.tdv-price-card {
	box-shadow: 0 30px 60px -20px rgba(227, 27, 44, .5);
}

.tdv-price-card .et_pb_text_inner p { margin: 0; }

/* --- Récapitulatif (Adhérer) -------------------------------------------- */

.tdv-recap dl {
	margin: 0;
}

.tdv-recap dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 16px;
}

.tdv-recap dt,
.tdv-recap dd {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.tdv-recap dt { color: var(--tdv-muted); }
.tdv-recap dd { text-align: right; font-weight: 600; }

/* --- Fiches article (Boutique) ------------------------------------------ */

.tdv-product .et_pb_image {
	margin: 0;
	width: 100%;
}

.tdv-product .et_pb_image .et_pb_image_wrap,
.tdv-product .et_pb_image img {
	display: block;
	width: 100%;
}

/* L'écharpe montre recto et verso côte à côte. */
.tdv-product--duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.tdv-product--duo > .et_pb_text {
	grid-column: 1 / -1;
}

.tdv-product__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 10px;
}

.tdv-product__head h3 { margin: 0; padding: 0; }

.tdv-price {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 32px;
	letter-spacing: 1px;
	color: var(--tdv-red);
	white-space: nowrap;
}

.tdv-product__body p { margin: 0; padding: 0; }

/* --- Cartes fond d'écran (Médias) --------------------------------------- */

.tdv-media-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	/* Les cartes d'une même rangée sont mises à la même hauteur. Sans ceci,
	   la hauteur en trop se répartit entre les lignes et la carte dont le
	   visuel est le moins haut se retrouve toute délayée. */
	align-content: start;
	column-gap: 16px;
	/* Divi impose ses propres marges aux modules et l'emporte sur les nôtres.
	   L'espacement entre le visuel, la légende et le bouton passe donc par
	   l'écartement de la grille, que Divi ne touche pas. */
	row-gap: 24px;
	padding-bottom: 26px;
}

.tdv-media-card > .et_pb_image {
	grid-column: 1 / -1;
	margin: 0;
	width: 100%;
}

.tdv-media-card .et_pb_image .et_pb_image_wrap,
.tdv-media-card .et_pb_image img {
	display: block;
	width: 100%;
}

.tdv-media-card__cap {
	padding-left: 26px;
}

.tdv-media-card__cap h3 { margin: 0 0 8px; padding: 0; }
.tdv-media-card__cap p { margin: 0; padding: 0; text-transform: uppercase; }

.tdv-media-card .et_pb_button_module_wrapper {
	padding-right: 26px;
	margin: 0;
}

/* En mobile, la vignette est haute : bouton pleine largeur sous la légende. */
.tdv-media-card--mobile {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 20px;
	padding-bottom: 24px;
}

/* Les fonds d'écran n'ont pas tous le même rapport hauteur/largeur. On cadre
   les aperçus au format d'un écran de téléphone pour que les cartes d'une même
   rangée soient identiques ; le fichier téléchargé, lui, n'est pas recadré. */
.tdv-media-card--mobile .et_pb_image img {
	aspect-ratio: 9 / 16;
	object-fit: cover;
	object-position: center;
}

.tdv-media-card--mobile .tdv-media-card__cap { padding: 0 22px; }
.tdv-media-card--mobile .et_pb_button_module_wrapper { padding: 0 22px; }
.tdv-media-card--mobile .tdv-dl-btn { display: inline-block; text-align: left; }

/* --- Titre de section avec métadonnée (Médias) -------------------------- */

.tdv-sectitle__h {
	/* Respiration entre le titre de section et la galerie qui le suit. */
	padding-bottom: 20px;
}

.tdv-sectitle__h h2 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-bottom: 0;
}

.tdv-sectitle__meta {
	font: 700 13px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tdv-dim);
	white-space: nowrap;
}

/* --- Colonne latérale de Contact ---------------------------------------- */

.tdv-side-sep {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 28px;
}

.tdv-contact-side .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 8px 8px 0;
}

/* --- Appel à l'action à deux boutons ------------------------------------ */

.tdv-s-cta {
	position: relative;
	overflow: hidden;
}

.tdv-s-cta > .et_pb_row {
	position: relative;
	z-index: 2;
}


.tdv-r-cta .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 14px 0 0;
}

/* --- Cartes « Ce que propose l'association » ------------------------- */

/* Les cartes sont déjà à la même hauteur (align-items: stretch de .tdv-grid),
   mais le bouton suivait le texte : sur la carte Discord (texte court) il
   se retrouvait plus haut que sur les cartes à texte plus long. On passe
   la carte en colonne flex et on pousse le bouton tout en bas. */
/* .tdv-panel est un nom de classe générique réutilisé sur d'autres cartes
   du site (médias, adhérer, boutique) : on cible via .tdv-grid--4, qui
   n'existe que sur la grille « Ce que propose l'association », pour ne
   pas leur imposer ce display flex ailleurs. */
.tdv-grid--4 .tdv-panel {
	display: flex;
	flex-direction: column;
}

.tdv-grid--4 .tdv-panel .et_pb_button_module_wrapper {
	margin-top: auto !important;
	padding-top: 24px;
}

/* --- Formulaires Divi --------------------------------------------------- */

/* La maquette montre les intitulés au-dessus des champs ; Divi les masque et
   n'affiche qu'un placeholder. On les réaffiche. */
.tdv-form-mod .et_pb_contact_form_label {
	display: block;
	font: 700 12px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tdv-muted);
	margin-bottom: 8px;
}

.tdv-form-mod .et_pb_contact_field {
	padding: 0 9px 18px;
}

.tdv-form-mod input[type="text"],
.tdv-form-mod input[type="email"],
.tdv-form-mod textarea,
.tdv-form-mod select {
	background-color: var(--tdv-ink) !important;
	border: 1px solid rgba(255, 255, 255, .2) !important;
	border-radius: 0 !important;
	padding: 16px 18px !important;
	font: 400 16px 'Barlow', sans-serif !important;
	color: var(--tdv-paper) !important;
	width: 100%;
}

.tdv-form-mod textarea { min-height: 150px; line-height: 1.6; }

.tdv-form-mod input::placeholder,
.tdv-form-mod textarea::placeholder {
	color: var(--tdv-dim);
}

.tdv-form-mod .et_pb_contact_field_options_title {
	font: 700 12px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tdv-muted);
}

.tdv-form-mod .et_pb_contact_field_options_list label {
	font: 400 15px 'Barlow', sans-serif;
	color: var(--tdv-paper);
}

.tdv-form-mod .et_pb_button {
	clip-path: polygon(var(--tdv-biseau-hero) 0, 100% 0, calc(100% - var(--tdv-biseau-hero)) 100%, 0 100%);
	border-radius: 0;
}

/* --- Adaptations tablette / mobile — pages intérieures ------------------ */

@media (max-width: 1100px) {
	.tdv-split { gap: 40px; }
	.tdv-split--340l { grid-template-columns: 260px minmax(0, 1fr); }
	.tdv-split--340r { grid-template-columns: minmax(0, 1fr) 300px; }
	.tdv-split--380  { grid-template-columns: minmax(0, 1fr) 320px; }
	.tdv-split--420  { grid-template-columns: minmax(0, 1fr) 340px; }
	.tdv-split--480  { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }

	.tdv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.tdv-split > *,
	.tdv-grid > * {
		width: auto !important;
		margin-bottom: 0 !important;
	}

	.tdv-split {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 40px;
	}

	.tdv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tdv-s-pagehero::after { content: none; }

	.tdv-r-cta .et_pb_button_module_wrapper {
		display: block;
		margin: 0 0 12px;
	}
}

@media (max-width: 780px) {
	/* Les maquettes prévoient 56 px de marge de chaque côté : sur un écran de
	   320 px il ne reste que 208 px pour le texte, et les grands titres Bebas
	   se coupent en plein milieu d'un mot. On ramène la marge à 24 px et on la
	   pose toujours au même endroit, la section, pour que les pages se
	   comportent pareil. Le bandeau défilant garde ses bords francs. */
	.et_pb_section {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.et_pb_section > .et_pb_row {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.tdv-s-marquee {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* La légende et le bouton d'une carte ne tiennent plus côte à côte. */
	.tdv-media-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.tdv-media-card__cap { padding: 0 22px; }
	.tdv-media-card .et_pb_button_module_wrapper { padding: 0 22px; }
	.tdv-media-card .tdv-dl-btn { display: inline-block; text-align: left; }

	.tdv-grid--2,
	.tdv-grid--3,
	.tdv-grid--4 { grid-template-columns: minmax(0, 1fr); }

	.tdv-grid--2p { grid-template-columns: minmax(0, 320px); }

	.tdv-facts dl { grid-template-columns: minmax(0, 1fr); }
	.tdv-facts dt { padding-bottom: 4px; border-bottom: 0; }

	.tdv-sectitle__h h2 {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* 40 px de retrait dans un panneau large de 272 px ne laissaient plus la
	   place au bouton « Instagram · 3D-TheDevils », qui se coupait sur le
	   trait d'union du pseudo. */
	.tdv-contact-side { padding: 28px !important; }
}

/* Sur les écrans les plus étroits (iPhone SE et assimilés), l'en-tête ne tient
   plus sur une ligne : le bouton « Adhérer » sortait de l'écran. On resserre
   les trois éléments plutôt que d'en sacrifier un. */
@media (max-width: 380px) {
	.tdv-r-header { gap: 10px; }

	.tdv-brand .et_pb_text_inner,
	.tdv-brand .et_pb_text_inner p,
	.tdv-brand .et_pb_text_inner a { font-size: 19px !important; }

	.tdv-brand .et_pb_text_inner a { gap: 7px; }
	.tdv-brand .et_pb_text_inner img {
		width: 22px !important;
		height: 22px !important;
	}

	.tdv-r-header .et_pb_button.et_pb_button {
		padding: 10px 11px !important;
		font-size: 11px !important;
	}
}

/* Groupes d'options : Divi imprime son propre intitulé en plus du libellé
   de champ. On garde le libellé (même style que les autres champs) et on
   masque le doublon. */
.tdv-form-mod .et_pb_contact_field_options_title {
	display: none;
}

.tdv-form-mod .et_pb_contact_field_options_list {
	display: grid;
	gap: 12px;
	margin-top: 10px;
}

/* --- Diaporama d'article (Boutique) ------------------------------------- */

/* L'écharpe montre recto puis verso : module Galerie Divi en mode diaporama.
   Les vues se gèrent dans le Builder (Contenu → Galerie), pas ici. */
.tdv-product .et_pb_image img,
.tdv-product__slider .et_pb_gallery_image img {
	height: 320px;
	object-fit: cover;
}

.tdv-product__slider {
	margin: 0 !important;
	position: relative;
}

.tdv-product__slider .et_pb_gallery_items,
.tdv-product__slider .et_pb_gallery_item,
.tdv-product__slider .et_pb_gallery_image {
	margin: 0;
	width: 100%;
}

.tdv-product__slider .et_pb_gallery_image img {
	display: block;
	width: 100%;
}

/* Les flèches de Divi n'apparaissent qu'au survol : ici elles doivent se voir
   tout de suite, sinon rien n'indique qu'il y a une seconde vue. */
.tdv-product__slider .et-pb-slider-arrows a,
.tdv-product__slider:hover .et-pb-slider-arrows a {
	opacity: 1;
	color: #fff;
	background: rgba(10, 10, 10, .55);
	/* Divi rend la flèche en 48px dans une pastille de 34px : le glyphe
	   débordait et paraissait décalé. On centre à la flexbox. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	/* Divi impose un margin-top: -24px plus spécifique : on centre par
	   transform, indépendamment de la hauteur de la pastille. */
	top: 50%;
	margin-top: 0 !important;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
	padding: 0;
	transition: background .15s;
}

.tdv-product__slider .et-pb-slider-arrows a::before {
	font-size: inherit;
	line-height: 1;
	display: block;
}

.tdv-product__slider .et-pb-slider-arrows a:hover {
	background: var(--tdv-red);
}

.tdv-product__slider .et-pb-arrow-prev { left: 12px; }
.tdv-product__slider .et-pb-arrow-next { right: 12px; }

/* Compteur discret : indique qu'il y a deux vues. */
.tdv-product__slider .et-pb-controllers {
	bottom: 12px;
}

/* Les trois visuels de stickers n'ont pas le même format (12 × 6 cm, 10 × 10 cm
   et un rond) : on les montre en entier plutôt que recadrés. */
.tdv-product__slider--contain .et_pb_gallery_image img {
	object-fit: contain;
	background: var(--tdv-ink);
}

/* Pendant sa transition, Divi affiche deux vues à la fois. Elles sont en
   position relative : elles s'empilent, le conteneur double de hauteur et on
   voit une bande noire au-dessus de l'image. On les superpose au même endroit
   pour que l'animation d'opacité de Divi produise un simple fondu. */
.tdv-product__slider .et_pb_gallery_items {
	position: relative;
	height: 320px;
	overflow: hidden;
}

.tdv-product__slider .et_pb_gallery_item {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 0 !important;
	transition: none;
}

.tdv-product__slider .et_pb_gallery_image {
	height: 100%;
}

/* Le bouton d'envoi retrouve le rembourrage de la maquette (l'attribut Divi
   correspondant n'est pas reconnu par le convertisseur D4 → D5). */
.tdv-form-mod .et_pb_button {
	padding: 19px 40px !important;
}

/* Divi génère une règle propre à ce module de formulaire qui réduit le
   padding au survol (0.3em 1em), donnant l'impression que le bouton
   rétrécit. Sa sélecteur fait 4 classes + :hover et se charge après cette
   feuille : il faut le dépasser en spécificité, pas seulement en ordre. */
.tdv-form-mod.tdv-form-mod.tdv-form-mod.tdv-form-mod .et_pb_button:hover {
	padding: 19px 40px !important;
	box-shadow: 0 8px 22px -6px rgba(227, 27, 44, .5);
	transition: box-shadow .25s ease;
}

/* --- Accordéon des sections Médias (Desktop / Mobile / Événements) ---- */

.tdv-accordion-toggle {
	cursor: pointer;
	user-select: none;
}

/* La rangée du titre a une hauteur calculée à 0 (Divi ne la fait pas
   grandir avec son contenu) : la flèche se positionne sur le titre
   lui-même, qui a une vraie hauteur, plutôt que sur la rangée. */
.tdv-accordion-title-text {
	position: relative;
	padding-right: 26px;
}

.tdv-accordion-title-text::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--tdv-paper);
	border-bottom: 2px solid var(--tdv-paper);
	transform: translateY(-65%) rotate(45deg);
	transition: transform .2s;
}

.tdv-accordion-toggle.tdv-accordion-closed .tdv-accordion-title-text::after {
	transform: translateY(-35%) rotate(-135deg);
}

.tdv-accordion-panel.tdv-accordion-closed {
	display: none;
}

/* --- Pages d'attente (Adhésion / Boutique) --------------------------- */

.tdv-attente {
	text-align: center;
}

.tdv-attente .et_pb_module {
	margin-left: auto !important;
	margin-right: auto !important;
}

.tdv-attente-btns {
	text-align: center;
}

.tdv-attente-btns .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 7px 12px;
}

/* --- Flèche des listes déroulantes (Contact, Boutique, Adhérer) --------- */

/* Divi centre sa flèche sur le milieu de TOUTE la case du champ (top: 50%
   du wrapper .et_pb_contact_field). Tant que l'intitulé restait masqué par
   Divi, ce milieu coïncidait avec le milieu de la barre. Comme on réaffiche
   l'intitulé au-dessus (règle plus haut), le wrapper est devenu plus haut
   que la barre seule et la flèche est remontée vers l'intitulé, décalée de
   la barre elle-même. On la recale sur le bas du champ, là où est la barre :
   26.5px, soit la moitié de la hauteur de la barre (16px de padding en haut
   et en bas, plus 1px de bordure de chaque côté). */
.tdv-form-mod .et_pb_contact_field:has(select)::after {
	top: auto;
	bottom: 17.5px;
	transform: none;
}


/* Selecteur de langue (test Polylang, pages EN uniquement) */
.tdv-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tdv-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tdv-lang-switch__item {
	font: 700 13px 'Barlow Condensed', sans-serif;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--tdv-muted);
	transition: color .15s;
}

.tdv-lang-switch__item:hover {
	color: var(--tdv-paper);
}

.tdv-lang-switch__item--current {
	color: var(--tdv-paper);
}

.tdv-lang-switch__sep {
	color: var(--tdv-dim);
	font: 400 13px 'Barlow Condensed', sans-serif;
}

@media (max-width: 980px) {
	.tdv-header-actions .tdv-lang-switch {
		display: none;
	}
}

.tdv-mobile-lang-item {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 6px;
	padding: 18px 20px !important;
	display: flex;
	justify-content: center;
}

.tdv-mobile-lang-item .tdv-lang-switch {
	gap: 12px;
}

.tdv-mobile-lang-item .tdv-lang-switch__item,
.tdv-mobile-lang-item .tdv-lang-switch__sep {
	font-size: 15px;
}