/**
 * Ducs Hockeynet — styles front, d'après la maquette Figma.
 *
 * Charte : fond bleu nuit, accents rouges, typographie condensée noire en
 * capitales, cartes à grands rayons.
 *
 * Tout repose sur des variables CSS redéfinissables : voir README §7.
 * Nomenclature BEM, préfixe « ducs- ». Aucun framework, aucune police externe.
 *
 * ⚠️ La police condensée de la maquette n'est pas chargée par le plugin :
 * renseignez --ducs-police-titre avec la police du thème (voir README).
 */

/* -------------------------------------------------------------------------
 * 1. Jetons de design
 * ---------------------------------------------------------------------- */

.ducs-widget,
.ducs-calendrier,
.ducs-classement,
.ducs-effectif,
.ducs-joueur,
.ducs-fiche-joueur,
.ducs-lightbox,
.ducs-message {
	/* ---- Couleurs de marque (valeurs fournies par le studio) ---- */
	--ducs-bleu-1: #001141;
	--ducs-bleu-2: #132558;
	--ducs-rouge: #ff0004;

	/* ---- Échelle utilisée dans le CSS, dérivée des couleurs de marque ----
	 * Redéfinir --ducs-bleu-1 / --ducs-bleu-2 / --ducs-rouge suffit à
	 * recolorer l'ensemble ; les quatre nuances ci-dessous ne servent qu'aux
	 * fonds de page et aux états de survol. */
	--ducs-bleu-900: #000b2e;              /* dérivé : fond de page */
	--ducs-bleu-850: #000e38;              /* dérivé : fond intermédiaire */
	--ducs-bleu-800: var(--ducs-bleu-1);   /* cartes, lignes du calendrier */
	--ducs-bleu-700: var(--ducs-bleu-2);   /* lignes du classement */
	--ducs-bleu-600: var(--ducs-bleu-2);   /* cases de score, bouton M'alerter */
	--ducs-bleu-500: #1d3570;              /* dérivé : survol */
	--ducs-rouge-fonce: #d60003;           /* dérivé : survol billetterie */

	--ducs-blanc: #ffffff;
	--ducs-creme: #f5f6f8;

	--ducs-vert: #3ddc84;
	--ducs-bleu-vif: #3b5bff;

	/* Dégradé doré des rencontres de phase finale. */
	--ducs-or-1: #f7cf47;
	--ducs-or-2: #dfa22c;

	--ducs-texte: var(--ducs-blanc);
	--ducs-texte-doux: #8d9bbd;

	/* Aplat affiché à la place d'un logo ou d'une photo manquants. */
	--ducs-placeholder: var(--ducs-bleu-2);

	/* Typographie de la maquette : Studio Pro (Production Type).
	 * ⚠️ Police commerciale : le plugin ne la charge pas. Elle doit être
	 * fournie par le thème ou par Elementor (voir README §7.0). Les valeurs
	 * suivantes ne sont que des replis, en attendant. */
	--ducs-police-titre: "Studio Pro", "Oswald", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--ducs-police-texte: inherit;

	--ducs-rayon: 10px;
	--ducs-rayon-lg: 14px;
	--ducs-espace: 40px;

	box-sizing: border-box;
	color: var(--ducs-texte);
	font-family: var(--ducs-police-texte);
}

.ducs-widget *,
.ducs-calendrier *,
.ducs-classement *,
.ducs-effectif *,
.ducs-joueur *,
.ducs-fiche-joueur * {
	box-sizing: inherit;
}

/* Titres condensés, capitales, très serrés — signature de la maquette. */
.ducs-carte-match__equipe,
.ducs-ligne__equipe,
.ducs-classement__nom,
.ducs-carte-match__score,
.ducs-ligne__score-case,
.ducs-classement__cell--pts,
.ducs-classement__cell--diff,
.ducs-classement__cell--rang,
.ducs-carte__nom,
.ducs-carte__numero,
.ducs-joueur__nom,
.ducs-joueur__numero,
.ducs-effectif__titre,
.ducs-maillot__titre,
.ducs-citation__texte,
.ducs-fiche-joueur__nom,
.ducs-fiche-joueur__numero {
	font-family: var(--ducs-police-titre);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
 * 2. Boutons
 * ---------------------------------------------------------------------- */

.ducs-btn {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px 15px;
    border: 0;
    border-radius: 7px;
    text-transform: uppercase;
    line-height: 1.5em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: 14px;
    font-weight: 500;
	width: 100%;
	letter-spacing: 4%;
}
.ducs-joueur__liens .ducs-btn {
    width: auto;
	text-decoration: none;
}
.ducs-btn:hover,
.ducs-btn:focus-visible {
	transform: translateY(-1px);
}

.ducs-btn--billetterie {
	background: var(--ducs-rouge);
	color: var(--ducs-blanc);
}

.ducs-btn--billetterie:hover {
	background: var(--ducs-rouge-fonce);
	color: var(--ducs-blanc);
}

/* Diffuseur : fond sombre sur carte claire. */
.ducs-btn--diffuseur {
	background: var(--ducs-bleu-900);
	color: var(--ducs-blanc);
}

/* Replay : fond clair, utilisé sur les cartes sombres. */
.ducs-btn--replay {
	background: var(--ducs-blanc);
	color: var(--ducs-bleu-900);
}

.ducs-btn--replay:hover {
	background: var(--ducs-creme);
	color: var(--ducs-bleu-900);
}

.ducs-btn--alerte {
	background: var(--ducs-bleu-600);
	color: var(--ducs-blanc);
}

.ducs-btn--alerte:hover {
	background: var(--ducs-bleu-500);
	color: var(--ducs-blanc);
}

/* Sur carte claire, le bouton d'alerte reprend le bleu nuit plein. */
.ducs-carte-match--a-venir .ducs-btn--alerte {
	background: var(--ducs-bleu-600);
}

/* Icônes dessinées en CSS : aucune dépendance à une police d'icônes. */
.ducs-btn__play {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	position: relative;
}

.ducs-btn__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 3.5px 0 3.5px 5px;
	border-color: transparent transparent transparent currentColor;
}

.ducs-btn__cloche {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	border: 1.5px solid currentColor;
	border-bottom: 0;
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	position: relative;
}

.ducs-btn__cloche::after {
	content: "";
	position: absolute;
	left: -3px;
	right: -3px;
	bottom: -2px;
	height: 1.5px;
	background: currentColor;
}

.ducs-btn__fleche {
	font-size: 1.05em;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * 3. Barre de filtres (calendrier + classement)
 * ---------------------------------------------------------------------- */

.ducs-filtres {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ducs-espace);
    margin: 30px 0 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 50px 0;
	
}

.ducs-filtres__groupe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ducs-filtre {
	color: var(--ducs-blanc);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px 13px;
    border: 0;
    border-radius: 5px;
    text-transform: uppercase;
    line-height: 1.5em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    background: #132558;
	letter-spacing: 4%;
}

.ducs-filtre:hover {
	background: var(--ducs-bleu-500);
}

.ducs-filtre.is-actif {
	background: var(--ducs-rouge);
}

.ducs-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 14px 35px 13px 20px;
    border: 1px solid #ffff;
    border-radius: 5px;
    background-color: transparent;
    background-image: url(/wp-content/uploads/2026/08/arrow-down-01.svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 11px;
    color: var(--ducs-blanc);
    font-size: 0.74rem;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    background-size: 19px;
    background-position-x: calc(100% - 20px);
    font-family: "Tusker Grotesk", Sans-serif;
    letter-spacing: 4%;
}

.ducs-select option {
	color: initial;
}

/* -------------------------------------------------------------------------
 * 4. Widget d'accueil — cartes de match
 * ---------------------------------------------------------------------- */

.ducs-widget__titre {
	margin: 0 0 var(--ducs-espace);
}

.ducs-widget__grille {
	list-style: none;
	margin: 0;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--ducs-espace);
}

.ducs-carte-match {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: var(--ducs-rayon-lg);
	text-align: center;
}

/* Match terminé : carte sombre. */
.ducs-carte-match--resultat {
	background: var(--ducs-bleu-800);
	color: var(--ducs-blanc);
}

/* Match à venir : carte claire. */
.ducs-carte-match--a-venir {
	background: var(--ducs-blanc);
	color: var(--ducs-bleu-900);
}

/* Phase finale : dégradé doré, texte sombre. */
.ducs-carte-match--playoffs {
	background: linear-gradient(100deg, var(--ducs-or-1), var(--ducs-or-2));
	color: var(--ducs-bleu-900);
}

.ducs-carte-match__entete {
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: "Tusker Grotesk", Sans-serif;
    color: #000;
}

.ducs-carte-match__journee {
	color: var(--ducs-rouge);
}

.ducs-carte-match__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 16px;
}

.ducs-carte-match__logo {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
 * Placeholders de logo / photo
 *
 * Quand l'API ne fournit pas de logo, on affiche un aplat aux dimensions de
 * l'image plutôt qu'un vide ou l'icône d'image cassée du navigateur.
 * La classe --absent est aussi posée par le JavaScript si le chargement échoue.
 * ---------------------------------------------------------------------- */

.ducs-carte-match__logo--absent,
.ducs-ligne__logo--absent,
.ducs-classement__logo--absent {
	display: inline-block;
	background: var(--ducs-placeholder);
	border-radius: 6px;
	/* Neutralise l'éventuelle image cassée quand la classe est posée en JS. */
	color: transparent;
	font-size: 0;
}

.ducs-carte__photo--absente {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ducs-placeholder);
}

/* Sur les cartes claires, l'aplat reste visible sans être agressif. */
.ducs-carte-match--a-venir .ducs-carte-match__logo--absent,
.ducs-carte-match--playoffs .ducs-carte-match__logo--absent {
	opacity: 0.18;
}

.ducs-carte-match__vs {
    font-size: 1.7rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Tusker Grotesk", Sans-serif;
}

.ducs-carte-match__affiche {
	display: flex;
    flex-direction: column;
    line-height: 0.92;
    margin-bottom: 5px;
    margin-top: 15px;
}

.ducs-carte-match__equipe {
	font-size: 2em;
    font-family: "Tusker Grotesk", Sans-serif;
    font-weight: 600;
    line-height: 1.1em;
    color: #000;
}
ul.ducs-mois__liste li span.ducs-ligne__equipe {
    font-size: 2em;
    font-family: "Tusker Grotesk", Sans-serif;
    font-weight: 600;
    line-height: 1.1em;
    color: #fff;
}
.ducs-carte-match__statut,
.ducs-carte-match__date {
	margin: 0 0 18px;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-family: "Tusker Grotesk", Sans-serif;
    color: #000;
    opacity: 1;
}

/* Pied de carte : poussé en bas pour aligner les boutons entre cartes. */
.ducs-carte-match__pied {
	display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.ducs-calendrier a.ducs-btn.ducs-btn--diffuseur {
    color: var(--ducs-bleu-900);
    background: var(--ducs-blanc);
}
.ducs-calendrier a.ducs-btn.ducs-btn--diffuseur:hover{
    color: var(--ducs-bleu-900) !important;
    background: var(--ducs-blanc);
}
.ducs-carte-match--resultat .ducs-carte-match__pied {
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	justify-content: space-between;
}

.ducs-carte-match__score-bloc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
}

.ducs-carte-match__score {
	font-size: 2rem;
}

.ducs-carte-match__score-sep {
	opacity: 0.45;
	margin: 0 2px;
}

.ducs-carte-match__issue {
	margin-top: 5px;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.ducs-carte-match__issue--victoire {
	color: var(--ducs-vert);
}

.ducs-carte-match__issue--defaite {
	color: var(--ducs-texte-doux);
}

.ducs-carte-match__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 5. Calendrier — lignes groupées par mois
 * ---------------------------------------------------------------------- */

.ducs-calendrier__titre {
	margin: 0 0 var(--ducs-espace);
}

.ducs-mois {
	margin-bottom: 34px;
}

.ducs-mois__titre {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ducs-texte);
}

.ducs-mois__liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 !important;
    margin-top: 25px !important;
	margin-bottom: 50px !important;
}

.ducs-ligne {
	display: grid;
    grid-template-columns: minmax(140px, 1.1fr) minmax(140px, 1.2fr) minmax(150px, 0.9fr) auto;
    align-items: center;
    gap: var(--ducs-espace);
    padding: 25px;
    background: #0B1228;
    border: 1px solid #132558;
    border-radius: 10px;
}

/* Phase finale : dégradé doré et inversion du texte. */
.ducs-ligne--playoffs {
	background: linear-gradient(100deg, var(--ducs-or-1), var(--ducs-or-2));
	color: var(--ducs-bleu-900);
}

.ducs-ligne--playoffs .ducs-ligne__competition,
.ducs-ligne--playoffs .ducs-ligne__info {
	color: var(--ducs-bleu-900);
}

.ducs-ligne--playoffs .ducs-btn--billetterie {
	background: var(--ducs-bleu-vif);
}

.ducs-ligne__affiche {
	display: flex;
	flex-direction: column;
	line-height: 0.92;
}

.ducs-ligne__equipe {
	font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}

.ducs-ligne__meta {
	display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffff;
    font-family: "Tusker Grotesk", Sans-serif;
}

.ducs-ligne__journee {
	color: var(--ducs-rouge);
}

.ducs-ligne__issue--victoire {
	color: var(--ducs-vert);
}

.ducs-ligne__issue--defaite {
	color: var(--ducs-rouge);
}

.ducs-ligne__centre {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ducs-ligne__logos {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ducs-ligne__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.ducs-ligne__vs {
    font-size: 1.5em;
    font-weight: 600;
    font-family: "Tusker Grotesk", Sans-serif;
}

/* Score en deux cases séparées par un point, comme sur la maquette. */
.ducs-ligne__score {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ducs-ligne__score-case {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 78px;
	padding: 14px 10px;
	border-radius: 8px;
	background: var(--ducs-bleu-600);
	font-size: 1.8rem;
	line-height: 1;
}

.ducs-ligne__score-sep {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.85;
}

.ducs-ligne__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
	min-width: 190px;
}

.ducs-calendrier__vide-filtre {
	padding: var(--ducs-espace);
	text-align: center;
	color: var(--ducs-texte-doux);
}

/* -------------------------------------------------------------------------
 * 6. Classement
 * ---------------------------------------------------------------------- */

.ducs-classement__titre {
	margin: 0 0 var(--ducs-espace);
}

.ducs-classement__contexte {
	margin: 0 0 var(--ducs-espace);
	background: transparent;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    font-family: "Tusker Grotesk", Sans-serif;
}
.ducs-classement__mention strong {
    color: #FF0004;
}
/* Défilement horizontal maîtrisé plutôt qu'un débordement de page. */
.ducs-classement__wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ducs-classement__table {
	width: 100%;
	border-collapse: separate;
	/* L'espacement vertical crée l'effet « lignes-cartes » de la maquette. */
	border-spacing: 0 8px;
}

.ducs-classement__table thead th {
    padding: 20px 14px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4%;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    font-family: "Tusker Grotesk", Sans-serif;
}

.ducs-classement__col--equipe {
	text-align: left !important;
}

.ducs-classement__ligne td {
    padding: 25px;
    background: #001141;
    text-align: center;
    vertical-align: middle;
    font-family: "Tusker Grotesk", Sans-serif;
}
.ducs-classement__ligne--ducs td.ducs-classement__cell--equipe span {
    color: #001141 !important;
}
.ducs-classement__ligne td:first-child {
	border-radius: var(--ducs-rayon) 0 0 var(--ducs-rayon);
}

.ducs-classement__ligne td:last-child {
	border-radius: 0 var(--ducs-rayon) var(--ducs-rayon) 0;
}

.ducs-classement__cell--rang {
	width: 56px;
	font-size: 1rem;
}

.ducs-classement__cell--equipe {
	text-align: left;
	white-space: nowrap;
}

.ducs-classement__logo {
	width: 55px;
    height: 55px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 12px;
    border-radius: 100px !important;
}

.ducs-classement__nom {
	vertical-align: middle;
    font-size: 2em;
    font-family: "Tusker Grotesk", Sans-serif;
    font-weight: 600;
    line-height: 1.1em;
    color: #DEE3F2;
	margin-top: 12px;
}

.ducs-classement__abrev {
	display: none;
	font-weight: 700;
	vertical-align: middle;
}

.ducs-classement__cell--pts {
	font-size: 1.5rem;
	color: var(--ducs-rouge);
}

.ducs-classement__cell--num {
	font-size: 0.9rem;
	/* Pas d'opacity ici : elle s'appliquerait aussi au fond de la cellule et
	 * grisrait les chiffres de la ligne des Ducs, qui est sur fond clair. */
	color: #DEE3F2;
}

.ducs-classement__cell--diff {
	font-size: 1.15rem;
}

/* Ligne des Ducs : inversion complète, fond blanc. */
.ducs-classement__ligne--ducs td {
	background: var(--ducs-creme);
	color: var(--ducs-bleu-900);
}

.ducs-classement__ligne--ducs .ducs-classement__cell--num,
.ducs-classement__ligne--ducs .ducs-classement__cell--diff {
	color: var(--ducs-bleu-1);
}

/* Séparateur de poule de maintien. */
.ducs-classement__separateur td {
    padding: 22px 0 6px;
    background: transparent;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    font-family: "Tusker Grotesk", Sans-serif;
}

/* Bascule Simplifié / Détaillé : le détail est masqué par défaut. */
.ducs-vue-detaille {
	display: none;
}

.ducs-classement.is-detaille .ducs-vue-detaille {
	display: table-cell;
}

.ducs-classement.is-detaille .ducs-vue-simplifie {
	display: none;
}

.ducs-classement__mention {
    font-size: 0.76rem;
    color: #fff;
    padding-top: 30px;
}

/* -------------------------------------------------------------------------
 * 7. Effectif — variante CLAIRE
 *
 * Contrairement au calendrier et au classement (fond bleu nuit), la maquette
 * de l'effectif est sur fond blanc : titres bleu marine, poste en rouge,
 * numéro noir. Les jetons sont donc redéfinis localement.
 * ---------------------------------------------------------------------- */

.ducs-effectif {
	--ducs-texte: var(--ducs-bleu-1);
	--ducs-placeholder: var(--ducs-bleu-2);
	color: var(--ducs-bleu-1);
}

.ducs-effectif__titre {
	margin: 0 0 48px;
	font-family: var(--ducs-police-titre);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 0.92;
	color: var(--ducs-bleu-1);
}

.ducs-effectif__titre-ligne {
	display: block;
}

.ducs-effectif__section {
	margin-bottom: 56px;
}

/* Titre de section + filet horizontal, comme sur la maquette. */
.ducs-effectif__section-titre {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    font-family: "Tusker Grotesk", Sans-serif;
    display: block;
}

.ducs-effectif__grille {
    list-style: none;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(var(--ducs-colonnes, 5), minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px !important;
}

.ducs-carte {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.ducs-carte__media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: #DEE3F2;
}
.ducs-carte__media:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(177.76deg, rgba(222, 227, 242, 0) 63.57%, rgba(214, 220, 236, 0.9) 91.3%, #D3D9EA 97.69%);
	z-index: 1;
}
.ducs-carte__photo {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ducs-carte:hover .ducs-carte__photo,
.ducs-carte:focus-visible .ducs-carte__photo {
	transform: scale(1.04);
}

.ducs-carte__photo--absente {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ducs-placeholder);
}

/* Nom et poste à gauche, numéro à droite. */
.ducs-carte__corps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-top: 18px;
}

.ducs-carte__infos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ducs-carte__nom {
	font-size: 0.92rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.1;
    color: #000;
    font-family: "Tusker Grotesk", Sans-serif;
    letter-spacing: 0;
}

.ducs-carte__poste {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ducs-rouge);
    font-family: "Tusker Grotesk", Sans-serif;
    letter-spacing: 3%;
}

.ducs-carte__numero {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #000;
    flex-shrink: 0;
    font-family: "Tusker Grotesk", Sans-serif;
}

/* -------------------------------------------------------------------------
 * 8. Fiche joueur — page détail, variante CLAIRE
 * ---------------------------------------------------------------------- */

.ducs-joueur {
	--ducs-texte: var(--ducs-bleu-1);
	color: var(--ducs-bleu-1);
	font-family: var(--ducs-police-texte);
}

.ducs-joueur * {
	box-sizing: border-box;
}

/* ---- Fil d'ariane ---- */

.ducs-fil {
    margin-bottom: 20px;
    font-family: 'Tusker Grotesk', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.ducs-fil__lien {
	color: var(--ducs-bleu-2);
	text-decoration: none;
}

.ducs-fil__lien:hover {
	opacity: 1;
}

.ducs-fil__sep {
	margin: 0 6px;
}

.ducs-fil__courant {
	color: var(--ducs-bleu-1);
}

/* ---- En-tête ---- */

.ducs-joueur__entete {
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding: 40px 40px 20px;
    background: linear-gradient(49.77deg, #CED5E7 7.26%, #DFE4F0 20.32%, rgba(226, 231, 244, 0) 36.13%), linear-gradient(177.76deg, rgba(222, 227, 242, 0) 39.91%, rgba(214, 220, 236, 0.9) 64.65%, #D3D9EA 70.36%), radial-gradient(315.59% 239.47% at 72.01% 39.57%, #FFFFFF 0%, #DEE3F2 100%), #DEE3F2;
}

.ducs-joueur__entete-texte {
	position: relative;
	min-width: 0;
}

.ducs-joueur__nom {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 4.6vw, 3.2rem);
    color: var(--ducs-bleu-1);
    font-family: "Tusker Grotesk", Sans-serif;
    max-width: 300px;
    line-height: 1.2;
}

.ducs-joueur__poste {
    margin: 5px 0 0px !important;
    color: var(--ducs-bleu-2);
    font-family: 'Tusker Grotesk', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

/* Numéro géant en filigrane. */
.ducs-joueur__numero {
    display: block;
    font-weight: 800;
    font-size: clamp(7rem, 16vw, 13rem);
    color: var(--ducs-blanc);
    user-select: none;
    pointer-events: none;
    font-family: 'Tusker Grotesk', sans-serif;
    line-height: 1;
    margin-top: 30px;
    margin-bottom: 15px;	
}

.ducs-joueur__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ducs-btn--instagram {
	background: var(--ducs-blanc);
	color: var(--ducs-bleu-1);
}

.ducs-btn--instagram:hover {
	background: var(--ducs-creme);
	color: var(--ducs-bleu-1);
}

/* Icônes CSS des boutons de la fiche. */
.ducs-btn__externe {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	position: relative;
}

.ducs-btn__externe::before {
	content: "";
	position: absolute;
	inset: 2px 2px 4px 4px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(-45deg);
}

.ducs-btn__instagram {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	border: 1.5px solid currentColor;
	border-radius: 5px;
	position: relative;
}

.ducs-btn__instagram::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.ducs-joueur__entete-media {
	min-width: 0;
    height: 740px;
    margin-bottom: -215px;
}

.ducs-joueur__action {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--ducs-rayon);
}

/* ---- Corps ---- */

.ducs-joueur__corps {
    padding: 40px 40px 20px;
}
.ducs-joueur__colonne.ducs-joueur__colonne--citation {
    margin-top: 185px;
}
.ducs-joueur__colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 48px;
}

.ducs-joueur__colonne {
	min-width: 0;
}

.ducs-bloc {
	margin-bottom: 36px;
}

.ducs-bloc:last-child {
	margin-bottom: 0;
}

.ducs-bloc__titre {
    margin: 0 0 15px;
    letter-spacing: 0.04em;
    color: var(--ducs-bleu-1);
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    text-transform: uppercase;
}

/* ---- Fiche technique ---- */

.ducs-fiche-tech {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 20px;
	margin: 0;
	margin-top: 1.5em;
}

.ducs-fiche-tech__label {
    color: var(--ducs-bleu-1);
    margin-bottom: 6px;
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}

.ducs-fiche-tech__valeur {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(0, 17, 65, 0.5);
    opacity: 0.85;
    font-family: 'Tusker Grotesk';
    font-weight: 500;
}

/* ---- Bio ---- */

.ducs-bio {
	font-size: 0.86rem;
	line-height: 1.65;
	color: var(--ducs-bleu-2);
}

.ducs-bio p {
	margin: 0 0 14px;
	color: #293A6B;
}

.ducs-bio p:last-child {
	margin-bottom: 0;
}

/* ---- Citation ---- */

.ducs-citation {
    position: relative;
    margin: 0;
    padding: 32px;
    border-radius: var(--ducs-rayon);
    background: linear-gradient(49.77deg, #CED5E7 7.26%, #DFE4F0 20.32%, rgba(226, 231, 244, 0) 36.13%), linear-gradient(177.76deg, rgba(222, 227, 242, 0) 39.91%, rgba(214, 220, 236, 0.9) 64.65%, #D3D9EA 70.36%), radial-gradient(315.59% 239.47% at 72.01% 39.57%, #FFFFFF 0%, #DEE3F2 100%), #DEE3F2;
}

.ducs-citation__marque {
    position: absolute;
    top: 30px;
    right: 30px;
    font-family: var(--ducs-police-titre);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ducs-bleu-1);
    width: 40px;
	
}

.ducs-citation__texte {
    margin: 0;
    padding-right: 40px;
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.28;
    color: var(--ducs-bleu-1);
    font-family: "Tusker Grotesk", Sans-serif;
    padding-left: 0 !important;
    border: none;
	max-width: 500px;
}

.ducs-citation__auteur {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: "Tusker Grotesk", Sans-serif;
}

.ducs-citation__nom {
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ducs-bleu-1);
}

.ducs-citation__fonction {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #293A6B !important;
}

/* ---- Galerie « En match » ---- */

.ducs-galerie-front__saison {
	margin: 35px 0 22px !important;
    color: var(--ducs-bleu-1);
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}
section.ducs-bloc.ducs-bloc--galerie {
    margin-top: 4em !important;
}
.ducs-galerie-front {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.ducs-galerie-front__lien {
	display: block;
	overflow: hidden;
	border-radius: 5px;
	background: var(--ducs-placeholder);
}

.ducs-galerie-front__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ducs-galerie-front__lien:hover .ducs-galerie-front__image,
.ducs-galerie-front__lien:focus-visible .ducs-galerie-front__image {
	transform: scale(1.05);
}

/* ---- Lightbox ---- */

.ducs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 11, 46, 0.94);
	padding: 40px;
}

.ducs-lightbox[hidden] {
	display: none !important;
}

.ducs-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--ducs-rayon);
}

.ducs-lightbox__btn {
	position: absolute;
	background: none;
	border: 0;
	color: var(--ducs-blanc);
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 12px 18px;
	opacity: 0.75;
}

.ducs-lightbox__btn:hover {
	opacity: 1;
}

.ducs-lightbox__btn--fermer {
	top: 12px;
	right: 18px;
}

.ducs-lightbox__btn--prec {
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.ducs-lightbox__btn--suiv {
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}


/* ---- Navigation entre joueurs ---- */

.ducs-nav-joueurs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ducs-espace);
    margin-top: 48px;
    padding-top: 30px;
    border-top: 1px solid #000;
    margin-bottom: 60px;
}

.ducs-nav-joueurs__lien {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: opacity 0.15s ease;
    color: #000;
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}

.ducs-nav-joueurs__lien:hover,
.ducs-nav-joueurs__lien:focus-visible {
	opacity: 0.6;
	color: var(--ducs-bleu-1);
}

.ducs-nav-joueurs__fleche {
	font-size: 1.15em;
	line-height: 1;
}

/* Placeholder invisible : conserve l'alignement quand il n'y a qu'un lien. */
.ducs-nav-joueurs__vide {
	display: block;
}

/* ---- Portez son maillot ---- */

.ducs-maillot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 40px 0 0 40px;
    border-radius: 5px;
    color: var(--ducs-blanc);
	margin-top: 200px;
	min-height: 445px;
    background: linear-gradient(49.77deg, #CED5E7 7.26%, #DFE4F0 20.32%, rgba(226, 231, 244, 0) 36.13%), linear-gradient(177.76deg, rgba(222, 227, 242, 0) 39.91%, rgba(214, 220, 236, 0.9) 64.65%, #D3D9EA 70.36%), radial-gradient(315.59% 239.47% at 72.01% 39.57%, #FFFFFF 0%, #DEE3F2 100%), #DEE3F2;
}

.ducs-maillot__surtitre {
    margin: 0 0 15px;
    color: var(--ducs-bleu-1);
    font-family: "Tusker Grotesk", Sans-serif;
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}

.ducs-maillot__titre {
    margin: 0 0 14px;
    text-transform: uppercase;
    font-size: 4em;
    color: var(--ducs-bleu-1);
    font-weight: 600;
    line-height: 1;
    max-width: 550px;
}

.ducs-maillot__accroche {
    margin: 0 0 30px;
    color: #001141;
    font-size: 0.84rem;
    line-height: 1.55;
    max-width: 42ch;
}

.ducs-maillot__media img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -200px;
    min-height: 645px;
    object-fit: contain;
    object-position: bottom;
}
.ducs-maillot__texte a {
    background: #001141;
    text-decoration: none;
    width: auto;
}
/* -------------------------------------------------------------------------
 * 9. Divers
 * ---------------------------------------------------------------------- */

.ducs-message {
	padding: var(--ducs-espace) 20px;
	background: var(--ducs-bleu-800);
	border-radius: var(--ducs-rayon);
	color: var(--ducs-texte-doux);
}

.ducs-message p {
	margin: 0;
}

.ducs-joueur__champ {
	display: inline;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

[hidden] {
	display: none !important;
}
.ducs-classement .ducs-filtres {
    border: none;
    padding: 20px 0;
    margin: 30px 0;
}
.info-flex {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
	align-items: center;
}
.popup-matche .ducs-next-match {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	margin-top: 0 !important;
}
.popup-matche .ducs-next-match__contenu {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 0px;
}
.popup-matche .ducs-next-match__contenu:before{
border-radius: 0;
}
.popup-matche .ducs-next-match__cta {
    border: 1px solid #ffff;
    border-radius: 7px;
    padding: 15px 30px;
    margin-bottom: 25px;
    background: #ffff;
    color: #FF0004 !important;
    width: calc(100% - 40px);
    display: flex;
    justify-content: center;
}
.popup-matche .ducs-next-match__cta svg path {
	stroke: #FF0004;
}
.ducs-next-match__contenu:before {
    border-radius: 0;
}
.popup-matche .popup-matche .ducs-next-match__contenu {
    padding-top: 15px;
}
.popup-matche {
    display: flex;
    flex-direction: column;
}
button.ducs-lightbox__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    padding: 0px 14px 4px;
}
/* -------------------------------------------------------------------------
 * 10. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1240px) {
	.ducs-effectif__grille {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) {
	.ducs-ligne {
		grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
		grid-template-areas:
			"affiche meta centre"
			"actions actions actions";
	}
	.popup-matche .ducs-next-match__cta {

		margin-top: 20px;
	}

	.ducs-ligne__affiche { grid-area: affiche; }
	.ducs-ligne__meta    { grid-area: meta; }
	.ducs-ligne__centre  { grid-area: centre; }

	.ducs-ligne__actions {
		grid-area: actions;
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
	}

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

	/* La fiche joueur passe sur une seule colonne. */
	.ducs-joueur__entete,
	.ducs-joueur__colonnes,
	.ducs-maillot {
		grid-template-columns: 1fr;
	}

	.ducs-joueur__entete{
		padding: 28px 20px;
	}
	.ducs-joueur__corps,
	.ducs-maillot {
		padding: 28px 20px 0;
	}

	.ducs-joueur__numero {
		font-size: 5em;
		color: var(--ducs-bleu-1);
	}
	.ducs-joueur__entete-media {
		height: auto;
		margin-bottom: 0;
	}
	.ducs-joueur__colonne.ducs-joueur__colonne--citation {
		margin-top: 0;
	}


	.ducs-maillot {
		margin-top: 0;
	}
	.ducs-maillot__media img {
		margin-top: 0;
		min-height: auto;
	}
	.ducs-citation__marque {
		position: absolute;
		top: 24px;
		right: 24px;
		width: 25px;
	}
	.ducs-maillot__titre {
		font-size: 2.5em;
	}
}

@media (max-width: 782px) {
	/* Le classement passe en version compacte : abréviations, colonnes réduites. */
	.ducs-classement__nom {
		display: none;
	}

	.ducs-classement__abrev {
		display: inline;
	}

	.ducs-classement__logo {
		margin-right: 0;
	}

	.ducs-classement__ligne td {
		padding: 12px 8px;
	}

	.ducs-filtres {
		justify-content: flex-start;
	}
	.info-flex {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.ducs-effectif__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ducs-galerie-front {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ducs-citation {
		padding: 24px;
	}

	.ducs-lightbox {
		padding: 16px;
	}

	.ducs-nav-joueurs__lien {
		font-size: 0.76rem;
	}

	.ducs-ligne {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"affiche centre"
			"meta meta"
			"actions actions";
		padding: 14px;
	}

	.ducs-ligne__score-case {
		min-width: 54px;
		padding: 10px 8px;
		font-size: 1.35rem;
	}

	.ducs-ligne__logo {
		width: 36px;
		height: 36px;
	}

	.ducs-ligne__actions .ducs-btn {
		flex: 1 1 auto;
	}

	.ducs-carte-match--resultat .ducs-carte-match__pied {
		flex-direction: column;
		align-items: stretch;
	}

	.ducs-carte-match__score-bloc {
		align-items: center;
	}

	.ducs-fiche-joueur__media {
		flex: 1 1 100%;
		max-width: 170px;
	}
}

@media (max-width: 420px) {
	.ducs-effectif__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.ducs-filtre {
		flex: 1 1 auto;
		padding: 10px 14px;
		font-size: 0.68rem;
	}
}

/* Respect des préférences d'accessibilité. */
@media (prefers-reduced-motion: reduce) {
	.ducs-btn,
	.ducs-carte,
	.ducs-carte__photo,
	.ducs-galerie-front__image,
	.ducs-filtre {
		transition: none;
	}

	.ducs-btn:hover,
	.ducs-carte:hover,
	.ducs-carte:hover .ducs-carte__photo,
	.ducs-galerie-front__lien:hover .ducs-galerie-front__image {
		transform: none;
	}
}
