/* =============================================================================
   BJJ Swiss Academy — Refonte UI
   -----------------------------------------------------------------------------
   Objectif : moderniser sans changer l'identité (noir / rouge sang / crème).
   Chargé en dernier (voir functions.php) pour passer après les couleurs et le
   responsive du thème parent. !important réservé aux cas où le thème ou
   Elementor imposent des styles inline.

   SOMMAIRE
     0. Tokens (variables d'identité)
     1. Base & rythme typographique
     2. Titres (Rajdhani)
     3. Liens
     4. Boutons (sc_button + elementor-button)
     5. Formulaires (Contact Form 7)
     6. Header
     7. Footer
     8. Cartes / blocs de service
     9. Médias & images
    10. Utilitaires d'espacement de section

   --- SECTIONS PAR PAGE (ajoutées au fil de la refonte page par page) ---
    20. Home
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. TOKENS — identité capturée sur le site existant
   -------------------------------------------------------------------------- */
:root {
	/* Couleurs de marque */
	--bjjsa-red:        #d72323; /* accent principal */
	--bjjsa-red-strong: #d90000; /* rouge punch (CTA, survols) */
	--bjjsa-red-deep:   #590000; /* rouge sang profond (fonds sombres) */
	--bjjsa-ink:        #16120f; /* presque-noir, titres */
	--bjjsa-black:      #001313; /* noir bleuté des sections sombres */
	--bjjsa-cream:      #f1ede1; /* fond clair crème */
	--bjjsa-cream-2:    #e9e5d8; /* crème alternatif */
	--bjjsa-text:       #5b5853; /* texte courant (gris chaud) */
	--bjjsa-border:     #cac5b6; /* bordures discrètes */
	--bjjsa-white:      #ffffff;

	/* Rythme & formes */
	--bjjsa-radius:     6px;
	--bjjsa-radius-lg:  12px;
	--bjjsa-shadow:     0 6px 24px rgba(0, 0, 0, .10);
	--bjjsa-shadow-lg:  0 14px 40px rgba(0, 0, 0, .16);
	--bjjsa-transition: .25s cubic-bezier(.2, .7, .3, 1);

	/* Échelle typographique fluide */
	--bjjsa-h1: clamp(2.4rem, 5vw, 4.25rem);
	--bjjsa-h2: clamp(1.9rem, 3.4vw, 3rem);
	--bjjsa-h3: clamp(1.4rem, 2.2vw, 2rem);
}

/* ----------------------------------------------------------------------------
   1. BASE & RYTHME TYPOGRAPHIQUE
   -------------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.page_content_wrap p,
.entry-content p,
.sc_layouts_row .widget p {
	line-height: 1.75;
}

/* Largeur de lecture confortable pour les longs paragraphes de contenu éditorial */
.post_content > p,
.page_content_wrap .content .post_content_inner > p {
	max-width: 70ch;
}

/* ----------------------------------------------------------------------------
   2. TITRES — Rajdhani, plus serrés et affirmés
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.sc_item_title,
.widget_title {
	letter-spacing: .01em;
	line-height: 1.12;
}

h1 { font-size: var(--bjjsa-h1); }
h2 { font-size: var(--bjjsa-h2); }
h3 { font-size: var(--bjjsa-h3); }

/* Filet rouge sous les titres de section (sobre, sportif) */
.sc_item_subtitle:not(:empty) {
	color: var(--bjjsa-red);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
}

/* 2.1 SUR-TITRES — remplacer la police manuscrite "Homemade Apple"
   (imposée par le __custom.css du thème) par un label Rajdhani propre.
   On force font-family car les sélecteurs du thème sont plus spécifiques. */
.sc_title.sc_title_default .sc_item_subtitle,
.sc_promo_subtitle,
.sc_action_item .sc_action_item_subtitle,
.trx_addons_dropcap_style_2,
.widget_banner .banner-content .banner-subtitle,
.related_subtitle,
.newsletter,
.comments_wrap .comments_list_wrap .comments_form_title,
.wp-block-calendar caption,
.widget_calendar caption {
	font-family: 'Rajdhani', sans-serif !important;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .2em;
}

/* ----------------------------------------------------------------------------
   3. LIENS
   -------------------------------------------------------------------------- */
a {
	transition: color var(--bjjsa-transition);
}
.page_content_wrap a:not(.sc_button):not(.elementor-button):hover {
	color: var(--bjjsa-red-strong);
}

/* ----------------------------------------------------------------------------
   4. BOUTONS — sc_button (thème) + elementor-button, unifiés
   -------------------------------------------------------------------------- */
.sc_button.sc_button_default,
.elementor-button,
button.sc_button,
input[type="submit"].sc_button {
	border-radius: var(--bjjsa-radius);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: transform var(--bjjsa-transition),
	            box-shadow var(--bjjsa-transition),
	            background-color var(--bjjsa-transition),
	            color var(--bjjsa-transition);
	will-change: transform;
}

.sc_button.sc_button_default:hover,
.elementor-button:hover,
button.sc_button:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--bjjsa-shadow);
}

/* Variante pleine rouge (CTA principal) */
.sc_button.sc_button_default {
	background-color: var(--bjjsa-red);
	color: var(--bjjsa-white);
}
.sc_button.sc_button_default:hover {
	background-color: var(--bjjsa-red-strong);
	color: var(--bjjsa-white);
}

/* ----------------------------------------------------------------------------
   5. FORMULAIRES — Contact Form 7 & champs natifs
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
	border: 1px solid var(--bjjsa-border);
	border-radius: var(--bjjsa-radius);
	transition: border-color var(--bjjsa-transition),
	            box-shadow var(--bjjsa-transition);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--bjjsa-red);
	box-shadow: 0 0 0 3px rgba(215, 35, 35, .15);
	outline: none;
}

/* ----------------------------------------------------------------------------
   6. HEADER — header transparent custom (header_position_over)
   -------------------------------------------------------------------------- */
.sc_layouts_menu_nav > li > a {
	font-weight: 600;
	letter-spacing: .04em;
	transition: color var(--bjjsa-transition);
}
.sc_layouts_menu_nav > li > a:hover,
.sc_layouts_menu_nav > li.current-menu-item > a {
	color: var(--bjjsa-red);
}

/* Header collé : léger fond sombre + ombre pour la lisibilité au scroll */
.top_panel.sticky_style.sticky_fixed {
	box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}

/* ----------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.footer_wrap a:hover {
	color: var(--bjjsa-red);
}

/* ----------------------------------------------------------------------------
   8. CARTES / BLOCS DE SERVICE
   -------------------------------------------------------------------------- */
.sc_services_item,
.post_item .post_featured {
	border-radius: var(--bjjsa-radius-lg);
	overflow: hidden;
	transition: transform var(--bjjsa-transition),
	            box-shadow var(--bjjsa-transition);
}
.sc_services_item:hover {
	transform: translateY(-4px);
	box-shadow: var(--bjjsa-shadow-lg);
}

/* ----------------------------------------------------------------------------
   9. MÉDIAS & IMAGES
   -------------------------------------------------------------------------- */
.post_featured img,
.sc_image img,
figure img {
	border-radius: var(--bjjsa-radius-lg);
}

/* ----------------------------------------------------------------------------
   10. UTILITAIRES D'ESPACEMENT DE SECTION
   -------------------------------------------------------------------------- */
/* (réservé — ajusté page par page si besoin) */


/* ===========================================================================
   20. HOME
   ========================================================================== */

/* ---- 20.1 GALERIE PHOTO (Essential Grid, skin "gallery") --------------- */
/* DOM réel : li.eg-gallery-wrapper > .esg-media-cover-wrapper >
   .esg-entry-media > img.esg-entry-media-img, + .esg-entry-cover > .esg-overlay
   + .eg-icon-search. ESG est piloté en JS (styles inline) -> on force avec
   !important ; le :hover CSS du navigateur se déclenche indépendamment d'ESG. */

/* Centrer la galerie avec des marges sur les côtés (au lieu du plein écran).
   Scopé sur le widget Elementor de cette galerie ; ESG recalcule ses colonnes
   dans la largeur réduite. Ajuster --bjjsa-gallery-max pour + ou - d'espace. */
.elementor-element-b900aaa > .elementor-widget-container {
	--bjjsa-gallery-max: 1200px;
}
/* Essential Grid force la grille en pleine largeur (largeur posée en inline par
   son JS). On la PLAFONNE directement : max-width prime sur width inline, et les
   marges auto centrent -> espace garanti des deux côtés, 1ʳᵉ image décollée. */
.elementor-element-b900aaa .esg-grid,
#esg-grid-1-1 {
	max-width: var(--bjjsa-gallery-max, 1200px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Carte : coins arrondis + ombre, l'enveloppe découpe l'image qui zoome */
.esg-grid .eg-gallery-wrapper {
	box-shadow: var(--bjjsa-shadow);
	border-radius: var(--bjjsa-radius-lg);
	transition: box-shadow var(--bjjsa-transition);
}
.esg-grid .eg-gallery-wrapper:hover {
	box-shadow: var(--bjjsa-shadow-lg);
}
.esg-grid .esg-media-cover-wrapper {
	border-radius: var(--bjjsa-radius-lg);
	overflow: hidden !important;
}

/* Zoom doux de l'image au survol (vraie classe : esg-entry-media-img) */
.esg-grid .esg-entry-media-img {
	transition: transform .55s cubic-bezier(.2, .7, .3, 1) !important;
	transform: scale(1.001);
	will-change: transform;
}
.esg-grid .eg-gallery-wrapper:hover .esg-entry-media-img {
	transform: scale(1.09) !important;
}

/* Voile de marque (rouge sang dégradé) — ESG le fait apparaître au survol */
.esg-grid .esg-overlay.eg-gallery-container {
	background: linear-gradient(
		to top,
		rgba(89, 0, 0, .80) 0%,
		rgba(89, 0, 0, .30) 55%,
		rgba(89, 0, 0, 0) 100%
	) !important;
}

/* Icône loupe : blanche, ronde, ressort au survol */
.esg-grid .eg-icon-search {
	color: var(--bjjsa-white) !important;
	font-size: 26px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	transition: transform var(--bjjsa-transition),
	            background-color var(--bjjsa-transition);
}
.esg-grid .eg-gallery-element-0:hover .eg-icon-search,
.esg-grid .eg-gallery-wrapper:hover .eg-icon-search {
	transform: scale(1.08);
	background-color: var(--bjjsa-red);
	border-color: var(--bjjsa-red);
}

/* Filtres / recherche de la galerie : look bouton de marque */
.esg-filterbutton,
.esg-navigationbutton {
	border-radius: var(--bjjsa-radius);
	transition: background-color var(--bjjsa-transition),
	            color var(--bjjsa-transition);
}
.esg-filterbutton.selected,
.esg-filterbutton:hover,
.esg-navigationbutton:hover {
	background-color: var(--bjjsa-red) !important;
	color: var(--bjjsa-white) !important;
}


/* ===========================================================================
   21. PLANNING — mp-timetable  (page /the-schedule/)
   ===========================================================================
   On garde les couleurs de catégorie (elles distinguent KIDS / adultes / etc.)
   mais on encadre tout pour un rendu net et cohérent. */

/* --- Tableau : grille fine, respirante --- */
.mptt-shortcode-table {
	border-collapse: separate;
	border-spacing: 0;
}
.mptt-shortcode-table td,
.mptt-shortcode-table th {
	border-color: var(--bjjsa-border) !important;
}

/* --- En-tête des jours : barre sombre de marque, texte crème --- */
.mptt-shortcode-table thead th,
.mptt-shortcode-table .mptt-shortcode-column-title,
.mptt-shortcode-row-title {
	background: var(--bjjsa-ink) !important;
	color: var(--bjjsa-cream) !important;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 1rem;
}

/* --- Colonne des heures : discrète --- */
.mptt-shortcode-hours {
	color: var(--bjjsa-text);
	font-weight: 600;
	background: var(--bjjsa-cream-2);
}

/* --- Blocs de cours : carte arrondie, accent rouge, texte lisible --- */
.mptt-event-container.mptt-colorized {
	border-radius: var(--bjjsa-radius);
	border-left: 4px solid var(--bjjsa-red);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
	overflow: hidden;
	transition: transform var(--bjjsa-transition),
	            box-shadow var(--bjjsa-transition),
	            filter var(--bjjsa-transition);
}
.mptt-event-container.mptt-colorized:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: var(--bjjsa-shadow);
	filter: saturate(1.15);
	z-index: 2;
	position: relative;
}

.mptt-inner-event-content {
	padding: 8px 10px;
}

/* Titre du cours : Rajdhani, sombre et net (lisible sur les pastels) */
.mptt-inner-event-content .event-title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.1;
	color: var(--bjjsa-ink) !important;
	transition: color var(--bjjsa-transition);
}
.mptt-event-container.mptt-colorized:hover .event-title {
	color: var(--bjjsa-red-deep) !important;
}

/* Horaire du cours : petit, discret */
.mptt-inner-event-content .timeslot {
	font-size: .78em;
	font-weight: 600;
	color: rgba(22, 18, 15, .72);
	margin: 2px 0 0;
}
.mptt-inner-event-content .timeslot-delimiter {
	opacity: .6;
}