/*
Theme Name: Fitness Insight Child
Theme URI: https://www.lys-aikido.fr
Description: Thème enfant de Fitness Insight pour la refonte visuelle du site Lys-Aïkido.
Author: Lys-Aïkido
Template: fitness-insight
Version: 1.0.0
Text Domain: fitness-insight-child
*/

/* ==== Identité visuelle inspirée de l'affiche du club (bordeaux / blush / typographie éditoriale) ==== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
	--fi-burgundy: #8A0414;
	--fi-red: #BA222D;
	--fi-blush: #FCE1DE;
	--fi-blush-2: #f6c6c0;
}

body {
	font-family: 'Poppins', 'Yantramanav', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.site-title a {
	font-family: 'Playfair Display', serif;
}

/* ==== Palette override: burgundy identity (auto-generated from parent theme) ==== */
.bread_crumb a:hover {
	color:#8A0414!important;
}
.bread_crumb span {
	color: #8A0414;
}
.woocommerce-breadcrumb a:hover {
	color:#8A0414!important;
}
/* Le theme peint tout le texte des articles au format « Citation » avec un
   degrade decoupe sur les lettres, en rendant la couleur reelle transparente.
   On annule : le texte reprend la couleur choisie dans l'editeur. */
.entry-content .quotepost a,
.entry-content .quotepost p {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
}

/* Le theme enveloppe tout l'encart dans un lien : les paragraphes sans couleur
   definie heritaient donc du bordeaux des liens, a cote de ceux que l'auteur
   avait passes en noir. On uniformise sur le noir. */
.entry-content .quotepost p {
	color: #000;
}
#Category-section pre.wp-block-verse {
	background: -webkit-linear-gradient( 90deg,#8A0414, #BA222D);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#Category-section .post-gallery .carousel-control-next-icon:hover,
#Category-section .post-gallery .carousel-control-prev-icon:hover {
	color: #8A0414;
}
button,
input[type="button"],
input[type="submit"] {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-image: linear-gradient(to right, #8A0414 , #BA222D);
}
a {
	color: #8A0414;
}
a:hover,
a:active {
	color: #8A0414;
}
#header {
	background-image: linear-gradient(to right, #8A0414, #BA222D);
}
.page-template-custom-home-page .top_header span i {
	color: #8A0414;
}
.page-template-custom-home-page .top_header strong {
	color: #8A0414;
}
.page-template-custom-home-page .links i {
	color: #8A0414;
}
.page-template-custom-home-page .menu_header {
	background: #8A0414;
}
.gb_nav_menu .menu > ul > li.highlight {
	background-color: #BA222D;
}
#slider .carousel-control-next-icon:hover,
#slider .carousel-control-prev-icon:hover {
	background: #8A0414;
}
.home-btn a {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
.home-btn a:hover {
	background-image: linear-gradient(to right, #8A0414 , #BA222D);
}
.box:hover:before {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
/* Encarts principaux : fond blanc (en transparent, le gris de la page remontait
   dedans et les rendait ternes). Bandeau ramene a 2px et large respiration
   interieure : l'epaisseur d'origine, combinee au cadre et aux angles arrondis,
   donnait une carte dure et datee. */
#Category-section .postbox.smallpostimage {
	border: 1px solid rgba(138,4,20,.12);
	border-top: 2px solid #8A0414;
	border-radius: 10px;
	box-shadow: none;
	background: #fff;
	padding: 34px 34px 26px;
}

/* Titre d'encart principal : sans le soulignement que WordPress ajoute
   d'office, et sans trait d'accroche, qui faisait redite avec le bandeau. */
#Category-section .postbox h3.text-center a,
#Category-section .postbox .entry-title a {
	text-decoration: none;
	color: #8A0414;
}
#Category-section .postbox h3.text-center {
	margin-bottom: 22px;
}
#Category-section .postbox.smallpostimage:hover h3 a {
	color: #8A0414;
}
.without-img-head {
	background-image: linear-gradient(to right, #FCE1DE , #f6c6c0);
}
.woocommerce ul.products li.product .star-rating {
	color: #BA222D;
}
a.showcoupon,
.woocommerce-message::before {
	color: #8A0414;
}
.woocommerce-message {
	border-top-color: #8A0414;
}
.woocommerce ul.products li.product .onsale, .woocommerce span.onsale {
	background: #8A0414;
}
.wc-block-cart__submit-container a,.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
.wc-block-cart__submit-container a:hover,a.added_to_cart.wc-forward:hover,.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
	background-image: linear-gradient(to right, #8A0414 , #BA222D);
}
nav.woocommerce-MyAccount-navigation ul li {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
nav.woocommerce-MyAccount-navigation ul li:hover {
	background-image: linear-gradient(to right, #8A0414 , #BA222D);
}
a.added_to_cart.wc-forward {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
.wc-block-checkout__actions_row a {
	color: #8A0414;
}
h3.entry-title a:hover {
	color: #8A0414;
}
.page-numbers.current {
	background: #8A0414;
}
.prev.page-numbers,
.next.page-numbers {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
.prev.page-numbers:focus,
.prev.page-numbers:hover,
.next.page-numbers:focus,
.next.page-numbers:hover {
	background-image: linear-gradient(to right, #8A0414 , #BA222D);
}
a.more-link {
	color: #8A0414;
}
.more-link:hover {
	color: #BA222D;
}
.bread_crumb .without-img a:hover {
	color: #8A0414 !important;
}
.scrollup {
	background-color: #8A0414;
}
.scrollup.is-active:hover,
.scrollup.is-active:focus {
	background: #8A0414;
}
.site-info {
	background: #8A0414;
}
.site-footer .widget-area a:hover {
	color: #8A0414;
}
.site-footer .search-form .search-submit {
	background: #8A0414;
}
.site-footer .search-form .search-submit {
	background: #8A0414;
}
#sidebar td a {
	color: #8A0414;
}
#sidebar label.wp-block-archives__label, #sidebar .wp-block-search .wp-block-search__label , #sidebar h3, #sidebar h1.wp-block-heading, #sidebar h2.wp-block-heading, #sidebar h3.wp-block-heading,#sidebar h4.wp-block-heading, #sidebar h5.wp-block-heading, #sidebar h6.wp-block-heading {
	border: 1px solid #8A0414;
}
#sidebar input[type="submit"] {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
#sidebar .widget {
	border-top: 4px solid #8A0414;
	border-bottom: 4px solid #8A0414;
}
#sidebar a:hover {
	color: #8A0414;
}
.single-tags a:hover,
#sidebar .tagcloud a:hover,
.site-footer .tagcloud a:hover, p.wp-block-tag-cloud a:hover {
	background:#8A0414;
}
button.search-submit {
	background-image: linear-gradient(to right, #BA222D , #8A0414);
}
#preloader {
	background-image: linear-gradient(to right, #FCE1DE , #f6c6c0);
}
#loader {
	border-top-color: #8A0414;
}
#loader:after {
	border-top-color: #BA222D;
}
/* (le survol de la navigation est traite plus bas, section NAVIGATION) */

/* ==== EN-TETE : AGENCEMENT (option courante) ==== */
@media (min-width: 992px) {
	/* la bande contact est vide : elle ne doit pas reserver d'espace */
	#header .top_header { padding: 0; }

	/* logo + titre centres, menu pleine largeur en dessous */
	#header .wrap_figure > .row > [class*="col-lg-3"],
	#header .wrap_figure > .row > [class*="col-lg-9"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	#header .logo { padding: 34px 0 0; }
	#header .logo .custom-logo-link { padding: 0; }
	#header .logo .custom-logo-link img { max-height: 118px; }
	#header .logo .site-title,
	#header .logo p.site-title { margin: 16px 0 0; }
	#header .site-description {
		margin: 8px 0 0;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .22em;
		opacity: .82;
	}
	#header .menu_header {
		margin-top: 26px;
		padding: 14px 0 22px;
		border-top: 1px solid rgba(255,255,255,.22);
	}
	#header .gb_nav_menu ul { text-align: center; }

	/* le menu doit tenir sur une seule ligne */
	#header .gb_nav_menu li a {
		font-size: 13px;
		padding: 8px 10px;
		letter-spacing: .06em;
	}
}

/* pas de soulignement dans la navigation */
#header .gb_nav_menu li a,
#header .gb_nav_menu li a:hover {
	text-decoration: none;
}

/* bandeau bordeaux uni, comme l'affiche */
#header {
	background-image: none;
	background-color: #8A0414;
}

/* ==== BANNIERE : voile bordeaux sur la photo (traitement facon affiche) ==== */
/* Le theme a deux chemins distincts pour cette banniere : l'image d'en-tete
   globale, posee en fond CSS (.header-image), et l'image mise en avant d'une
   page, qui est une vraie balise <img> (.single-post-image). Sans ce second
   cas, une page comme « Stages » affichait sa photo sans voile, donc bien plus
   claire que les autres. */
/* Le theme assombrit la photo avec « opacity: 0.5 » sur fond noir. Mais il
   l'applique a des endroits differents selon le chemin : sur l'element porteur
   du fond CSS d'un cote, sur la balise <img> de l'autre. Resultat, notre voile
   se retrouvait divise par deux d'un cote et a pleine force de l'autre.
   On neutralise donc cette opacite et on assombrit uniquement avec le voile :
   un seul reglage, un rendu identique partout. */
body .header-image,
body .single-post-image img {
	opacity: 1;
}

body .header-image {
	position: relative;
	background-position: center center;
}

/* le conteneur est affaisse (l'image a l'interieur est en absolu) :
   on l'etire sur la banniere pour pouvoir y poser le voile */
body .single-post-image {
	position: absolute;
	inset: 0;
}

/* Voile quasi noir, juste teinte de chaud : le bordeaux franc surchargeait
   l'image. Ces valeurs reproduisent le rendu sombre d'origine. */
body .header-image::after,
body .single-post-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(20,2,6,.60), rgba(20,2,6,.74));
}

/* ==== CORRECTIONS DE CONTRASTE SUR FONDS SOMBRES ==== */
/* Fil d'ariane pose sur la photo : le bordeaux y est illisible.
   On cible les enfants directs, pour ne pas toucher la variante .without-img
   (fond rose pale) qui a ses propres couleurs et reste lisible. */
.bread_crumb > a {
	color: #E1F3E1 !important;
}
.bread_crumb > a:hover,
.bread_crumb > a:focus {
	color: #fff !important;
}
.bread_crumb > span {
	color: rgba(255,255,255,.72) !important;
}

/* survol des liens dans le pied de page sombre */
.site-footer .widget-area a:hover,
.site-footer a:hover {
	color: #FCE1DE;
}

/* ==== NAVIGATION : SURVOL ET SOUS-MENUS ==== */

/* Le theme parent colore le survol en orange dans son @media mobile.
   On neutralise partout : le survol se signale par un filet, pas par la couleur. */
@media screen and (max-width: 991px) {
	.gb_nav_menu ul li a:active,
	.gb_nav_menu ul li a:hover {
		color: #fff !important;
	}
}

@media (min-width: 992px) {
	/* Sur le bandeau bordeaux le texte reste clair : c'est un filet fin,
	   comme les filets de l'affiche, qui signale le survol et la page courante. */
	#header .gb_nav_menu li a { position: relative; }
	#header .gb_nav_menu li a::after {
		content: "";
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 2px;
		height: 1px;
		background: #E1F3E1;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .3s ease;
	}
	#header .gb_nav_menu li a:hover::after,
	#header .gb_nav_menu li a:focus::after,
	#header .gb_nav_menu li.current-menu-item > a::after,
	#header .gb_nav_menu li.current_page_item > a::after {
		transform: scaleX(1);
	}
	#header .gb_nav_menu ul li a:hover,
	#header .gb_nav_menu ul li a:active,
	#header .gb_nav_menu ul li a:focus {
		color: #fff !important;
	}

	/* Sous-menus : panneau rose pale a texte bordeaux, comme les encadres
	   de l'affiche. Jamais bordeaux sur bordeaux. */
	#header .gb_nav_menu ul ul {
		background: #FCE1DE;
		border-top: 3px solid #BA222D;
		padding: 6px 0;
		box-shadow: 0 14px 30px rgba(58,2,10,.3);
	}
	#header .gb_nav_menu ul ul li a {
		color: #8A0414;
		padding: 9px 18px;
	}
	#header .gb_nav_menu ul ul li a::after { display: none; }
	#header .gb_nav_menu ul ul li a:hover {
		background: #8A0414;
		color: #fff !important;
	}
}

/* ==== VERSION MOBILE : BOUTON MENU ET PANNEAU ==== */
@media screen and (max-width: 991px) {
	/* le bouton collait au bas du bandeau : on lui redonne de l'air */
	#header .menu_header { padding-bottom: 28px; }

	/* plus de cadre gris : un bouton ajoure sur le bordeaux */
	#header .toggle-menu button {
		background: transparent;
		border: 1px solid rgba(255,255,255,.55);
		border-radius: 2px;
		padding: 10px 24px;
		color: #fff;
		margin-bottom: 0;
		transition: background .25s ease, border-color .25s ease;
	}
	#header .toggle-menu button:hover,
	#header .toggle-menu button:focus {
		background: rgba(255,255,255,.12);
		border-color: #E1F3E1;
	}
	#header .toggle-menu button i { font-size: 16px; }
	#header .toggle-menu button p {
		margin: 3px 0 0;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .22em;
	}

	/* le panneau passe du noir au bordeaux de la charte */
	.side_gb_nav { background-color: #8A0414; }

	/* le separateur passe du lien a la ligne, pour rester pleine largeur
	   pendant que le lien, lui, se reduit a la largeur de son libelle */
	.side_gb_nav .gb_nav_menu ul li {
		border-bottom: 1px solid rgba(255,255,255,.16);
	}
	.side_gb_nav .nav ul li a,
	.side_gb_nav .gb_nav_menu ul li a {
		display: inline-block;
		position: relative;
		border-bottom: 0;
		padding: 12px 15px;
		letter-spacing: .04em;
	}

	/* meme filet qui se deploie que sur la version ordinateur */
	.side_gb_nav .gb_nav_menu ul li a::after {
		content: "";
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 6px;
		height: 1px;
		background: #E1F3E1;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .3s ease;
	}
	.side_gb_nav .gb_nav_menu ul li a:hover::after,
	.side_gb_nav .gb_nav_menu ul li a:focus::after,
	.side_gb_nav .gb_nav_menu ul li.current-menu-item > a::after,
	.side_gb_nav .gb_nav_menu ul li.current_page_item > a::after {
		transform: scaleX(1);
	}
	.side_gb_nav .gb_nav_menu ul li a:hover,
	.side_gb_nav .gb_nav_menu ul li a:focus,
	.side_gb_nav .gb_nav_menu ul li a:active {
		color: #fff !important;
	}
	.side_gb_nav .closebtn,
	.side_gb_nav a.closebtn {
		color: #E1F3E1;
		font-size: 30px;
		text-decoration: none;
	}

	/* meme traitement du slogan que sur ordinateur */
	#header .site-description {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .2em;
		opacity: .85;
	}
}

/* ==== LIENS DE RETOUR A L'ACCUEIL ==== */
/* WordPress souligne les liens via ses styles globaux, avec une specificite
   superieure au « a { text-decoration: none } » du theme. Le theme ne neutralise
   ca que pour « .logo h1 a » : d'ou un titre souligne sur les pages interieures
   (ou il est en <p>) mais pas sur l'accueil (ou il est en <h1>). */
#header .site-title a,
#header .logo p a,
.bread_crumb a {
	text-decoration: none;
}

/* Meme taille de titre partout. Le theme rend le titre en <h1> sur l'accueil
   et en <p> ailleurs ; or « .logo p » le ramene a 15px, d'ou un titre deux fois
   plus petit sur les pages interieures. On fixe la taille sur les deux balises. */
#header .logo .site-title,
#header .logo p.site-title {
	font-size: 30px;
}
@media (min-width: 992px) {
	#header .logo .site-title,
	#header .logo p.site-title {
		font-size: 38px;
	}
}
#header .site-title a { font-size: inherit; }

/* survol sur le bandeau bordeaux : jamais de bordeaux sur bordeaux */
#header .site-title a:hover,
#header .site-title a:focus {
	color: #E1F3E1;
}

/* ==== FIL D'ARIANE : MEME SURVOL QUE LE MENU ==== */
.bread_crumb > a {
	position: relative;
	text-decoration: none;
}
.bread_crumb > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: #E1F3E1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.bread_crumb > a:hover::after,
.bread_crumb > a:focus::after {
	transform: scaleX(1);
}

/* ==== LIENS QUI SORTENT DU SITE ==== */
/* Une fleche discrete previent avant le clic. Le filet de survol du menu
   s'arrete au libelle : on neutralise donc le pseudo-element sur ce marqueur. */
.lien-externe::after {
	content: "\2197"; /* fleche vers le haut a droite */
	font-size: .78em;
	margin-left: .35em;
	opacity: .75;
	display: inline-block;
	vertical-align: baseline;
}
#header .gb_nav_menu li a .lien-externe::before { display: none; }

/* ==== ENCARTS DE LA BARRE LATERALE ==== */
/* Le theme les cerne de deux filets bordeaux de 4px, d'une ombre portee grise
   et coiffe le titre d'une pastille encadree qui chevauche la bordure. Trop
   d'effets pour un contenu secondaire : on revient a un simple bloc pose. */
/* Colonne secondaire : plus de cadre du tout. Ce ne sont plus des boites mais
   des sections posees, separees par leur seul titre et par l'espace. Sans
   cadre, le retrait indente le texte pour rien : on le retire aussi. */
#sidebar .widget {
	border: 0;
	border-top: 0;
	border-bottom: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
	margin-bottom: 54px;
}

/* Titre : meme serif que le reste du site, souligne d'un filet fin plutot
   qu'enferme dans une pastille. Le selecteur reprend celui du theme, qui est
   tres long, pour pouvoir le neutraliser. */
#sidebar label.wp-block-archives__label,
#sidebar .wp-block-search .wp-block-search__label,
#sidebar h3,
#sidebar h3.widget-title,
#sidebar h1.wp-block-heading,
#sidebar h2.wp-block-heading,
#sidebar h3.wp-block-heading,
#sidebar h4.wp-block-heading,
#sidebar h5.wp-block-heading,
#sidebar h6.wp-block-heading {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight: 600;
	color: #8A0414;
	background: transparent;
	border: 0;
	border-radius: 0;
	display: block;
	width: auto;
	margin: 0 0 16px;
	padding: 0 0 10px !important;
	text-align: left;
	line-height: 1.25;
	/* filet rouge fin sous le titre, sur toute la largeur de la colonne */
	border-bottom: 1px solid #BA222D;
}

/* ==== ARTICLES AU FORMAT « CITATION » ==== */
/* Le theme enferme tout leur contenu dans un <h1> : chaque paragraphe herite
   d'une taille et d'une graisse de titre, et ceux auxquels l'auteur n'a pas
   donne de taille heritent des 38px du h1. On ramene le bloc a du texte
   courant, aligne a gauche comme l'affiche. */
.entry-content .quotepost h1.quote-content {
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	text-align: left;
}
.entry-content .quotepost h1.quote-content p {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	line-height: 1.65;
	margin: 0 0 12px;
}

/* Le premier paragraphe tient lieu de titre, comme sur l'affiche. Le !important
   est necessaire : la classe de taille de WordPress (has-medium-font-size) en
   porte un elle-meme. */
.entry-content .quotepost h1.quote-content p:first-child {
	font-family: 'Playfair Display', serif;
	font-size: 27px !important;
	line-height: 1.3;
	margin-bottom: 20px;
}

/* ==== ENCART HORAIRES : MISE EN PAGE DE L'AFFICHE ==== */
.entry-content .lys-titre {
	font-family: 'Playfair Display', serif;
	font-size: 27px !important;
	line-height: 1.25;
	margin: 0 0 14px;
}
.entry-content .lys-intro {
	font-size: 15px !important;
	color: #4a4a4a;
	margin: 0 0 26px;
}

/* petite etiquette avant le tableau, dans le meme vocabulaire que le slogan
   de l'en-tete et les titres de la colonne de droite */
.entry-content .lys-etiquette {
	font-size: 11px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: #8A0414;
	margin: 0 0 10px;
}

/* Tableau des horaires : le jour en rouge, l'age en italique, des filets fins
   entre les lignes. Aucun cadre exterieur, comme sur l'affiche. */
.entry-content .lys-horaires { margin: 0 0 26px; }
.entry-content .lys-horaires table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}
.entry-content .lys-horaires td {
	border: 0;
	border-top: 1px solid rgba(138,4,20,.16);
	padding: 12px 14px 12px 0;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.5;
}
.entry-content .lys-horaires tr:first-child td {
	border-top: 0;
}
.entry-content .lys-horaires td:first-child {
	color: #BA222D;
	font-weight: 600;
	white-space: nowrap;
	width: 1%;
}
.entry-content .lys-horaires td:nth-child(2) {
	white-space: nowrap;
	width: 1%;
}
.entry-content .lys-horaires em {
	font-size: 13px;
	color: #6a6a6a;
}

/* Bloc enseignant : l'affiche l'isole dans un encadre rose pale */
.entry-content .lys-enseignant {
	background: #FCE1DE;
	border-radius: 8px;
	padding: 16px 18px;
	font-size: 15px !important;
	line-height: 1.55;
	margin: 0;
}

/* Le compteur d'etiquettes est code en dur en anglais dans le theme (« 0 tags »),
   hors du systeme de traduction, et la fonction n'est pas surchargeable.
   Il affiche de toute facon toujours zero : on le masque. */
.entry-footer .tags,
.postbox .tags,
span.tags {
	display: none;
}

/* ==== FORMULAIRE DE RECHERCHE ==== */
/* Le theme fixe a la fois « top » et « bottom » sur le bouton : au lieu de le
   positionner, cela l'etire, d'ou un bouton plus haut que le champ et deborde
   vers le haut. On le centre verticalement et on laisse sa hauteur libre. */
.site-footer .search-form,
#sidebar .search-form {
	position: relative;
}
.site-footer .search-form .search-submit,
#sidebar .search-form .search-submit {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	right: 5px;
	height: auto;
	line-height: 1.2;
	padding: 9px 20px;
}

/* le texte saisi ne doit pas passer sous le bouton */
.site-footer .search-form .search-field,
#sidebar .search-form .search-field {
	padding-right: 130px;
}

/* ==== PIED DE PAGE ==== */
/* Le theme cerne chaque titre d'un filet blanc en haut ET en bas, et WordPress
   souligne tous les liens : sur fond sombre, l'ensemble devient un empilement
   de traits. On garde un seul filet discret par titre, et des liens nets. */
.site-footer h3.widget-title,
.site-footer h1.wp-block-heading,
.site-footer h2.wp-block-heading,
.site-footer h3.wp-block-heading,
.site-footer h4.wp-block-heading,
.site-footer h5.wp-block-heading,
.site-footer h6.wp-block-heading {
	border-top: 0;
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding: 0 0 12px;
	margin: 0 0 16px;
	font-size: 20px;
}

/* l'ecart se joue entre les sections, pas sur les titres : chaque section
   occupe toute la largeur et suit la precedente sans respiration */
.site-footer .widget-column + .widget-column {
	margin-top: 36px;
}

.site-footer a {
	text-decoration: none;
}

/* de l'air entre les entrees, qui etaient collees les unes aux autres */
.site-footer .widget-area li {
	margin-bottom: 9px;
	line-height: 1.5;
}

/* Le credit du theme etait en gris foncé, prevu pour un fond clair : illisible
   depuis que la barre est bordeaux. Blanc attenue, pour rester discret. */
.site-info .footer-copyright {
	color: rgba(255,255,255,.62);
}

/* ==== WIDGET CALENDRIER (plugin Spider Calendar) ==== */
/* Ses couleurs viennent de ses propres reglages, passes en attributs « style »
   en ligne. La palette du club y est appliquee en base ; il reste le libelle
   des onglets, que le plugin laisse en blanc quel que soit le fond, d'ou des
   onglets inactifs invisibles (contraste 1,17). Aucune classe ne distingue
   l'onglet actif : on se repere sur la couleur de fond qu'il porte en ligne. */
#sidebar .spider_calendar .views,
#sidebar .spider_calendar .views * {
	color: #8A0414 !important;
}
#sidebar .spider_calendar .views[style*="8A0414"],
#sidebar .spider_calendar .views[style*="8A0414"] * {
	color: #fff !important;
}

/* La largeur du calendrier est fixee en dur en pixels (200px, la valeur du
   theme de widget), posee en attribut « style » par le plugin lui-meme
   (rendu serveur pour la vue Liste, script pour la vue Mois) : sur une
   colonne plus large, il en resulte une case trop etroite. Le plugin la
   repete en cascade sur plusieurs tableaux imbriques (div, table, tr, et
   un attribut HTML width="200" en plus du style en ligne) : elargir
   seulement le conteneur exterieur ne suffit pas, chaque niveau la
   reimpose. On cible donc precisement tout ce qui porte cette valeur de
   200px, sans toucher aux largeurs en pourcentage (fleches, cellules)
   qui font la mise en page interne du calendrier. */
#sidebar .spider_calendar [id^="calendar_"],
#sidebar .spider_calendar [id^="bigcalendar"],
#sidebar .spider_calendar [id^="calendar_"] [style*="200px"],
#sidebar .spider_calendar [id^="calendar_"] [width="200"] {
	width: 100% !important;
}

/* Les onglets de vue (Jour/Semaine/Liste/Mois) sont figes a 48px chacun par
   le plugin, une largeur pensee pour ses libelles anglais courts. Nos
   traductions francaises ("Semaine", "Journee") y debordent et se
   chevauchent. On les repartit en flexbox sur toute la largeur, avec une
   police legerement reduite pour que le texte le plus long tienne. */
#sidebar .spider_calendar #views_tabs {
	display: flex !important;
	width: 100% !important;
}
#sidebar .spider_calendar .views {
	width: 25% !important;
	box-sizing: border-box !important;
	font-size: 11px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 1px !important;
}

/* ==== GALERIES ==== */
/* Le theme etale chaque element sur la moitie de la largeur mais y laisse une
   vignette de 150px calee a gauche : des images minuscules perdues dans de
   grandes cases vides. On passe en grille, avec des tuiles de taille egale. */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin: 0 0 30px;
}

/* sur telephone, une seule colonne donnerait un defilement interminable
   pour 48 photos, et etirerait l'image au-dela de sa definition */
@media (max-width: 600px) {
	.entry-content .gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}
.entry-content .gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	/* marge interieure heritee de la mise en page flottante du theme :
	   avec une grille, elle ne fait que retrecir l'image dans sa case */
	padding: 0 !important;
	float: none !important;
	display: block;
	vertical-align: top;
}
.entry-content .gallery .gallery-icon {
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	display: block;
}
/* le lien est en ligne : il se rétrécit à la taille de l'image, et le 100 %
   de l'image se calcule alors sur lui. Il doit occuper toute la case. */
.entry-content .gallery .gallery-item a {
	display: block;
	width: 100%;
}
.entry-content .gallery .gallery-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border: 0 !important;
	padding: 0;
	transition: transform .45s ease;
}
.entry-content .gallery .gallery-item a:hover img,
.entry-content .gallery .gallery-item a:focus img {
	transform: scale(1.06);
}
.entry-content .gallery .gallery-caption {
	font-size: 12px;
	color: #6a6a6a;
	margin-top: 6px;
	padding: 0;
}

/* ==== PAGE TARIF ET HORAIRES ==== */
/* Meme vocabulaire que l'encart d'accueil : etiquettes en petites capitales,
   tableaux a filets fins, montant en rouge, encadre rose pour l'a-cote. */
.entry-content .lys-section {
	margin: 0 0 40px;
}
.entry-content h2.lys-soustitre {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	color: #8A0414;
	margin: 0 0 14px;
}

.entry-content .lys-tarifs { margin: 0 0 22px; }
.entry-content .lys-tarifs table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}
.entry-content .lys-tarifs td {
	border: 0;
	border-top: 1px solid rgba(138,4,20,.16);
	padding: 11px 14px 11px 0;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.5;
}
.entry-content .lys-tarifs tr:first-child td { border-top: 0; }
.entry-content .lys-tarifs td:first-child {
	color: #BA222D;
	font-weight: 600;
	white-space: nowrap;
	width: 1%;
}

/* note discrete sous un tableau */
.entry-content .lys-note {
	font-size: 14px !important;
	color: #6a6a6a;
	font-style: italic;
	margin: -10px 0 0;
}

/* encadre rose pale, comme « Cours enseignes par » sur l'affiche */
.entry-content .lys-encadre {
	background: #FCE1DE;
	border-radius: 8px;
	padding: 20px 22px;
	margin: 0;
}
.entry-content .lys-encadre > *:first-child { margin-top: 0; }
.entry-content .lys-encadre > *:last-child { margin-bottom: 0; }
.entry-content .lys-encadre ul { margin: 8px 0 0; padding-left: 20px; }
.entry-content .lys-encadre li { margin-bottom: 6px; line-height: 1.55; }

/* ==== CONTENU DES PAGES ==== */
/* Les pages posaient leur texte a meme le fond gris, sans cadre : d'ou cette
   impression de contenu tasse a gauche dans un grand vide. On le pose sur une
   carte blanche, comme les encarts de l'accueil. */
.content-area article.page {
	background: #fff;
	border: 1px solid rgba(138,4,20,.12);
	border-top: 2px solid #8A0414;
	border-radius: 10px;
	padding: 42px 46px 34px;
}
@media (max-width: 700px) {
	.content-area article.page {
		padding: 26px 22px 20px;
	}
}

/* Deux blocs cote a cote, pour occuper la largeur au lieu de l'empiler.
   WordPress insere un conteneur intermediaire dans les blocs Groupe : c'est
   lui qui porte les enfants, donc c'est lui qui doit porter la grille. */
.entry-content .lys-deux-colonnes,
.entry-content .lys-deux-colonnes > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 48px;
}
.entry-content .lys-deux-colonnes:has(> .wp-block-group__inner-container) {
	display: block;
}
@media (max-width: 700px) {
	.entry-content .lys-deux-colonnes,
	.entry-content .lys-deux-colonnes > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ==== TABLEAUX D'HORAIRES SUR PETIT ECRAN ==== */
/* Jour et horaire sont en « non secable » pour tenir sur une ligne : sur un
   telephone, il ne reste plus assez de largeur pour la troisieme colonne, qui
   deborde de la carte. On replie chaque ligne : jour et horaire cote a cote,
   description en dessous. */
@media (max-width: 600px) {
	.entry-content .lys-horaires table,
	.entry-content .lys-horaires tbody,
	.entry-content .lys-horaires tr,
	.entry-content .lys-horaires td {
		display: block;
		width: auto !important;
	}
	.entry-content .lys-horaires tr {
		border-top: 1px solid rgba(138,4,20,.16);
		padding: 12px 0;
	}
	.entry-content .lys-horaires tr:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.entry-content .lys-horaires td {
		border: 0 !important;
		padding: 0;
		white-space: normal !important;
	}
	.entry-content .lys-horaires td:first-child,
	.entry-content .lys-horaires td:nth-child(2) {
		display: inline-block;
		margin-right: 10px;
	}
	.entry-content .lys-horaires td:nth-child(3) {
		margin-top: 2px;
	}
}

/* ==== EN-TETE COMPACT AU DEFILEMENT ==== */
:root {
	--hauteur-barre-compacte: 74px;
	--hauteur-bande-compacte: 112px;
}

/* La classe « en-tete-compact » est posee sur <body> par assets/en-tete-compact.js.
   Reserve a l'ordinateur : sur telephone l'en-tete est deja court, et le fixer
   mangerait une part trop grande de l'ecran. */
@media (min-width: 992px) {
	/* transitions posees sur l'etat normal, pour que l'aller et le retour
	   soient animes tous les deux */
	#header,
	#header .logo,
	#header .logo .custom-logo-link img,
	#header .logo .site-title,
	#header .menu_header {
		transition: padding .3s ease, margin .3s ease, max-height .3s ease,
			font-size .3s ease, border-color .3s ease;
	}

	body.en-tete-compact #header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		box-shadow: 0 2px 16px rgba(58,2,10,.28);
	}
	.admin-bar.en-tete-compact #header {
		top: 32px;
	}

	/* L'en-tete quitte le flux : sans cela le contenu remonterait d'un coup de
	   sa hauteur (259 px mesures). On reserve exactement la place qu'il
	   occupait, mesuree en JavaScript et publiee dans --hauteur-en-tete. */
	body.en-tete-compact #page {
		padding-top: var( --hauteur-en-tete, 300px );
	}

	/* logo et titre sur une meme ligne a gauche, menu a droite */
	body.en-tete-compact #header .wrap_figure > .row {
		flex-wrap: nowrap;
		align-items: center;
	}
	body.en-tete-compact #header .wrap_figure > .row > [class*="col-lg-3"] {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	body.en-tete-compact #header .wrap_figure > .row > [class*="col-lg-9"] {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		/* sans cela, l'element refuse de descendre sous la largeur de son
		   contenu et le menu deborde du conteneur au lieu de se resserrer */
		min-width: 0;
	}

	body.en-tete-compact #header .logo {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 11px 0;
		text-align: left;
	}
	body.en-tete-compact #header .logo .custom-logo-link img {
		max-height: 52px;
	}
	body.en-tete-compact #header .logo .site-title,
	body.en-tete-compact #header .logo p.site-title {
		font-size: 23px;
		margin: 0;
		white-space: nowrap;
	}
	/* le slogan disparait : il ferait doublon avec le titre sur une seule ligne */
	body.en-tete-compact #header .site-description {
		display: none;
	}

	body.en-tete-compact #header .menu_header {
		margin-top: 0;
		padding: 0;
		border-top: 0;
	}
	body.en-tete-compact #header .gb_nav_menu ul {
		text-align: right;
	}

	/* Le logo occupe desormais une place sur la ligne du menu : celui-ci doit
	   se resserrer, sinon les dernieres entrees sortent du conteneur. */
	body.en-tete-compact #header .gb_nav_menu li a {
		font-size: 12px;
		padding: 7px 8px;
		letter-spacing: .02em;
	}
	body.en-tete-compact #header .gb_nav_menu li a::after {
		left: 8px;
		right: 8px;
	}
}

/* Sur les ecrans d'ordinateur les plus etroits, le titre cede la place :
   le logo suffit a identifier le site, et le menu doit rester entier. */
@media (min-width: 992px) and (max-width: 1150px) {
	body.en-tete-compact #header .logo .site-title,
	body.en-tete-compact #header .logo p.site-title {
		display: none;
	}
}

/* ==== ETAPE 2 : LA BANNIERE PHOTO SE REPLIE SOUS LA BARRE ==== */
/* Classe « banniere-compacte » posee par assets/en-tete-compact.js quand on
   continue a defiler. La banniere quitte le flux a son tour : on reserve sa
   hauteur sur le conteneur de contenu, comme pour l'en-tete. */
@media (min-width: 992px) {
	/* Pas de transition sur la hauteur : la banniere reprend sa place dans le
	   flux en meme temps, et l'animation ferait glisser tout le contenu qui
	   la suit pendant sa duree. Le basculement doit donc etre instantane. */
	body.banniere-compacte .page-header,
	body.banniere-compacte .outer-div {
		position: fixed;
		top: var( --hauteur-barre-compacte );
		left: 0;
		right: 0;
		/* hauteur pilotee au defilement par assets/en-tete-compact.js
		   (le theme impose « height: 400px !important » sur cette banniere,
		   le script doit donc passer par un style en ligne important) */
		z-index: 998;
		overflow: hidden;
		box-shadow: 0 2px 16px rgba(58,2,10,.28);
	}
	.admin-bar.banniere-compacte .page-header,
	.admin-bar.banniere-compacte .outer-div {
		top: calc( var( --hauteur-barre-compacte ) + 32px );
	}

	body.banniere-compacte #content {
		padding-top: var( --hauteur-banniere, 400px );
	}

	/* la photo remplit la bande, quelle que soit sa hauteur du moment */
	body.banniere-compacte .page-header .header-image,
	body.banniere-compacte .outer-div .header-image,
	body.banniere-compacte .page-header .single-post-image,
	body.banniere-compacte .outer-div .single-post-image {
		height: 100% !important;
	}

	/* les deux textes restent centres pendant que la bande se resserre */
	body.banniere-compacte .page-header .internal-div,
	body.banniere-compacte .outer-div .internal-div,
	body.banniere-compacte .page-header .inner-div,
	body.banniere-compacte .outer-div .inner-div {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		padding: 10px 16px;
	}
	/* Les deux textes gardent leur taille naturelle : les reduire produisait
	   un saut visible a l'instant ou la banniere est retenue. */
}

/* ==== PAGES SUR TELEPHONE : CARTE PLEINE LARGEUR ==== */
/* La carte blanche et le conteneur cumulaient leurs marges laterales : sur un
   ecran de 375 px, 68 px partaient en bordures pour 307 px de texte utile.
   La carte occupe donc toute la largeur, et ne garde qu'un retrait interieur. */
@media (max-width: 700px) {
	.content-area .container {
		padding-left: 0;
		padding-right: 0;
	}
	.content-area article.page {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		padding: 26px 16px 22px;
	}
}

/* ==== MOBILE : ENCARTS D'ACCUEIL PLEINE LARGEUR ==== */
/* Meme raison que pour les pages : les retraits s'empilaient sur toute la
   chaine des conteneurs. La marge negative compense celui de « #main », qui
   se situe trop haut pour etre neutralise sans deplacer la colonne laterale. */
@media (max-width: 700px) {
	#Category-section.entry-content {
		padding-left: 0;
		padding-right: 0;
	}
	#Category-section .postbox.smallpostimage {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		padding: 24px 16px 20px;
		margin-left: -12px;
		margin-right: -12px;
	}
}

/* ==== MOBILE : BANNIERE MOINS HAUTE ==== */
/* 400 px sur un ecran de 812 px, c'est la moitie de la hauteur utile pour une
   simple image de titre. Le theme impose cette valeur en « important ». */
@media (max-width: 991px) {
	.page-header {
		height: 210px !important;
	}
	.outer-div {
		height: 210px;
	}
	.page-header .header-image,
	.outer-div .header-image,
	.page-header .single-post-image,
	.outer-div .single-post-image {
		height: 210px !important;
	}
	.outer-div .single-post-image img {
		height: 210px !important;
	}
}

/* ==== MOBILE : BANDEAU DU TITRE PLUS COURT ==== */
/* Le logo, le titre et le bouton etaient empiles sur trois niveaux : 338 px
   avant meme d'atteindre le contenu. On les met sur une seule ligne, le
   bouton a droite. */
@media (max-width: 991px) {
	#header .wrap_figure > .row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	#header .wrap_figure > .row > [class*="col-"]:first-child {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
	}
	#header .wrap_figure > .row > [class*="col-"]:last-child {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	/* Grille plutot que flex : le titre et le slogan doivent s'empiler a
	   droite du logo, alors qu'en flex ils se placeraient cote a cote. */
	#header .logo {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 12px;
		align-items: center;
		text-align: left;
		padding: 12px 0;
	}
	#header .logo .custom-logo-link {
		grid-column: 1;
		grid-row: 1 / 3;
		padding: 0;
		line-height: 0;
	}
	#header .logo .site-title,
	#header .logo p.site-title {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}
	#header .logo .site-description {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}
	#header .logo .custom-logo-link img {
		max-height: 58px;
	}
	#header .logo .site-title,
	#header .logo p.site-title {
		font-size: 19px;
		margin: 0;
		line-height: 1.15;
	}
	#header .site-description {
		margin: 3px 0 0;
		font-size: 10px;
		letter-spacing: .06em;
		white-space: nowrap;
	}

	#header .top_header { padding: 0; }
	#header .menu_header {
		margin: 0;
		padding: 0;
		border-top: 0;
	}
	#header .toggle-menu {
		text-align: right;
	}
	#header .toggle-menu button {
		padding: 8px 14px;
	}
	#header .toggle-menu button i { font-size: 15px; }
	#header .toggle-menu button p {
		margin: 2px 0 0;
		font-size: 10px;
	}
}