@charset "UTF-8";
/*
Theme Name: Flash
Theme URI: https://themegrill.com/themes/flash
Author: ThemeGrill
Author URI: https://themegrill.com
Description: Flash is free responsive multipurpose WordPress theme – truly a versatile theme perfect for any type of website you want. Like never before, it provides multiple pre-built demos which can be imported in seconds using ThemeGrill Demo Importer Plugin. The theme fully integrates with Flash Toolkit and SiteOrigin’s Page Builder Plugin that makes theme more user-friendly and easy. Additionally, theme features multiple blog layouts, WooCommerce support, multiple header styles, multiple color options etc.
License: GNU General Public License v3 or later
Version: 1.4.12
Tested up to: 6.8
Requires PHP: 5.6
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: flash
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-background, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready, blog, e-commerce

Flash is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
## Links
## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
## Posts and pages
## Comments
# Infinite scroll
# Media
## Captions
## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
theme style
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Normalize
--------------------------------------------------------------*/
:root {
	--primary-color: #21858c;
	--brightness: 80%;
	--lightbrightness: 110%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn,
em, font, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	word-break: break-word;
}

html {
	font-size: 62.5%;
	/* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll;
	/* Keeps page centered in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%;
	/* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%;
	/* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

* {
	/* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
	/* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
	/* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

*:before, *:after {
	/* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
	/* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
	/* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #fff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

blockquote,
q {
	quotes: "" "";
}

blockquote:before, blockquote:after,
q:before,
q:after {
	content: "";
}

a:focus, a:hover, a:active {
	outline: 0;
}

a img {
	border: 0;
	padding: 10px;
}

embed, iframe, object {
	max-width: 100%;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #333;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html.flash-studio .flash-cours-filter-select {
	background: #0b0f14;
	color: #f5f5f5;
}

html.flash-studio .flash-cours-filter-select option {
	background: #0b0f14;
	color: #f5f5f5;
}

b,
strong {
	font-weight: bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote,
.wp-block-quote,
.wp-block-quote.is-style-large {
	margin: 0 15px;
	font-size: 20px;
	font-style: italic;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
}

address {
	margin: 0 0 15px;
}

pre {
	background: #eee;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: 0.5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 25px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

/*--------------------------------------------------------------
Elements
--------------------------------------------------------------*/
hr, .wp-block-separator {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 15px;
}

ul,
ol {
	margin: 0 0 15px 20px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 15px;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 15px 15px;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to tg-container width. */
	vertical-align: middle;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 15px;
	width: 100%;
	border-collapse: collapse;
}

th {
	font-weight: bold;
}

td, th, .wp-block-table th, .wp-block-table td {
	border: 1px solid #ccc;
	padding: 5px 10px;
}

p {
	margin: 0 0 30px;
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-size: 100%;
	/* Corrects font size not being inherited in all browsers */
	margin: 0;
	/* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: middle;
}

.navigation .nav-links a,
.bttn,
button {
	background: #333;
	color: #fff;
	cursor: pointer;
	/* Improves usability and consistency of cursor style between image-type 'input' and others */
	font-size: 14px;
	line-height: 13px;
	border: none;
	padding: 10px 15px;
	font-weight: 400;
	display: inline-block;
	position: relative;
	text-shadow: none;
	-webkit-transition: background 0.5s ease;
	transition: background 0.5s ease;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

input[type="button"], input[type="reset"], input[type="submit"] {
	background: #333;
	color: #fff;
	cursor: pointer;
	/* Improves usability and consistency of cursor style between image-type 'input' and others */
	font-size: 14px;
	line-height: 13px;
	border: none;
	padding: 10px 15px;
	font-weight: 400;
	display: inline-block;
	position: relative;
	text-shadow: none;
	-webkit-transition: background 0.5s ease;
	transition: background 0.5s ease;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

.navigation .nav-links a:hover,
.bttn:hover,
button {
	color: #fff;
}

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
	color: #fff;
}

input[type="checkbox"], input[type="radio"] {
	padding: 0;
}

button:-moz-focus-inner {
	/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

input:-moz-focus-inner {
	/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] {
	color: #666;
	border: 1px solid #ccc;
	height: 36px;
	width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
	-webkit-border-radius: 0;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
	border: 1px solid #aaa;
}

textarea:focus {
	border: 1px solid #aaa;
}

.searchform input[type="text"]:focus {
	border: none;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] {
	padding: 3px 6px;
}

textarea {
	overflow: auto;
	/* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top;
	/* Improves readability and alignment in all browsers */
	color: #666;
	border: 1px solid #ccc;
	height: 160px;
	max-width: 100%;
	width: 100%;
}

button[type="submit"] {
	margin-bottom: 50px;
}

/*--------------------------------------------------------------
Links
--------------------------------------------------------------*/
a {
	color: #000;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

a:hover {
	color: #000;
}

/*--------------------------------------------------------------
Clearings
--------------------------------------------------------------*/
.clearfix:after, .clearfix:before,
.row:after,
.row:before,
.entry-content:after,
.entry-content:before,
.comment-content:after,
.comment-content:before,
.site-content:after,
.site-content:before,
.tg-container:after,
.tg-container:before {
	content: "";
	display: table;
}

.clearfix:after,
.row:after,
.entry-content:after,
.comment-content:after,
.site-content:after,
.tg-container:after {
	clear: both;
}

.clear {
	clear: both;
}

.wp-caption,
.wp-caption-text,
.sticky,
.gallery-caption,
.bypostauthor {
	/*class required for wordpress*/
}

.alignright {
	text-align: right;
}

.alignleft {
	text-align: left;
}

.aligncenter {
	text-align: center;
}

.alignleft {
	float: left;
	margin-right: 24px;
}

.alignright {
	float: right;
	margin-left: 24px;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 28px;
}

.hidden {
	display: none;
}

.full-width,
.full-width-center {
	overflow: hidden;
}

.full-width #primary .entry-content > .alignfull,
.full-width-center #primary .entry-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: unset;
}

.full-width #primary .entry-content > .alignfull.wp-block-cover, .full-width #primary .entry-content > .alignfull.wp-block-cover-image,
.full-width-center #primary .entry-content > .alignfull.wp-block-cover,
.full-width-center #primary .entry-content > .alignfull.wp-block-cover-image {
	width: unset;
}

.full-width #primary .entry-content > .alignwide,
.full-width-center #primary .entry-content > .alignwide {
	margin-left: -50px;
	margin-right: -50px;
	max-width: unset;
	width: unset;
}

.full-width.boxed #primary .entry-content > .alignfull,
.full-width-center.boxed #primary .entry-content > .alignfull {
	margin-left: -30px;
	margin-right: -30px;
	max-width: unset;
}

.full-width.boxed #primary .entry-content > .alignfull.wp-block-cover, .full-width.boxed #primary .entry-content > .alignfull.wp-block-cover-image,
.full-width-center.boxed #primary .entry-content > .alignfull.wp-block-cover,
.full-width-center.boxed #primary .entry-content > .alignfull.wp-block-cover-image {
	width: unset;
}

.full-width.boxed #primary .entry-content > .alignwide,
.full-width-center.boxed #primary .entry-content > .alignwide {
	margin: 0;
}

ul.wp-block-gallery {
	margin: 0;
}

/*--------------------------------------------------------------
grid
--------------------------------------------------------------*/
.tg-column-wrapper {
	clear: both;
	margin-left: -3%;
}

.tg-column-wrapper .tg-column-1,
.tg-column-wrapper .tg-column-2,
.tg-column-wrapper .tg-column-3,
.tg-column-wrapper .tg-column-4,
.tg-column-wrapper .tg-column-5 {
	float: left;
	margin-left: 3%;
}

.tg-column-wrapper .tg-column-1 {
	width: 100%;
}

.tg-column-wrapper .tg-column-2 {
	width: 47%;
}

.tg-column-wrapper .tg-column-3 {
	width: 30.33%;
}

.tg-column-wrapper .tg-column-4 {
	width: 22%;
}

/*--------------------------------------------------------------
Colors
--------------------------------------------------------------*/
.flash_inherit_color div {
	color: inherit !important;
}

.flash_inherit_color div.section-description {
	color: inherit !important;
}

.flash_inherit_color h1,
.flash_inherit_color h2 {
	color: inherit !important;
}

.flash_inherit_color h3 {
	color: inherit !important;
}

.flash_inherit_color h3.section-title {
	color: inherit !important;
}

.flash_inherit_color h4,
.flash_inherit_color h5,
.flash_inherit_color h6,
.flash_inherit_color p,
.flash_inherit_color span,
.flash_inherit_color div.service-content-wrap,
.flash_inherit_color .entry-summary {
	color: inherit !important;
}

/*--------------------------------------------------------------
Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

.wp-caption,
.gallery-caption {
	color: #666;
	font-size: 13px;
	font-style: italic;
	margin-bottom: 21px;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 11px 0;
}

/*--------------------------------------------------------------
common
--------------------------------------------------------------*/

.overlay {
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

#primary {
	float: left;
	width: 65.5%;
}

#secondary {
	float: right;
	width: 32.22%;
}

.page-template-full-width #primary,
.page-template-pagebuilder #primary {
	width: 100%;
}

#scroll-up {
	background-color: #f5f5f599;
	border-radius: 3px;
	bottom: 20px;
	color: #fff;
	display: none;
	padding: 10px 16px;
	position: fixed;
	opacity: 0.5;
	z-index: 9999;
	filter: alpha(opacity=50);
	/* For IE8 and earlier */
	right: 20px;
}

.post-navigation {
	margin: 30px 0;
	display: inline-block;
	width: 100%;
}

.post-navigation .nav-previous {
	float: left;
}

.post-navigation .nav-next {
	float: right;
}

.nav-next a .entry-title {
	float: left;
	margin-right: 3px;
}

.site {
	background-color: #fff;
}

/*--------------------------------------------------------------
Preloader CSS (logo Studio + couleurs maquette)
--------------------------------------------------------------*/
#preloader.flash-preloader__inner {
	position: relative;
	margin: 0;
	padding: 0;
}

#spinners {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#preloader-background.flash-preloader {
	--flash-preloader-bg: #0e0e0e;
	--flash-preloader-fg: #f5f5f5;
	--flash-preloader-accent: #f5f5f5;
	background-color: var(--flash-preloader-bg);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: grid;
	place-items: center;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

#preloader-background.flash-preloader.flash-preloader--is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.flash-preloader__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1.25rem;
}

.flash-preloader__logo--text {
	transform-origin: center center;
}

.flash-preloader__studio {
	display: inline-block;
	background-color: #f5f5f5;
	color: #0e0e0e;
	padding: 0.125rem 0.5rem;
	font-family: Anton, Impact, sans-serif;
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: -0.05em;
}

.flash-preloader__logo--text .flash-preloader__num {
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	line-height: 1;
}

.flash-preloader__logo--image {
	position: relative;
	display: inline-block;
	padding: 0.5rem;
	transform-origin: center center;
}

.flash-preloader__spinner.loader {
	width: 48px;
	height: 48px;
	border: 5px solid var(--flash-preloader-fg);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	animation: flash-preloader-pulse 1s linear infinite;
}

.flash-preloader__spinner.loader:after {
	content: '';
	position: absolute;
	width: 48px;
	height: 48px;
	border: 5px solid var(--flash-preloader-fg);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: flash-preloader-scaleUp 1s linear infinite;
}

@keyframes flash-preloader-scaleUp {
	0% { transform: translate(-50%, -50%) scale(0) }
	60% , 100% { transform: translate(-50%, -50%) scale(1) }
}

@keyframes flash-preloader-pulse {
	0% , 60% , 100% { transform: scale(1) }
	80% { transform: scale(1.2) }
}

.flash-preloader__image-frame {
	position: relative;
	z-index: 1;
	display: block;
	max-width: min(200px, 50vw);
}

.flash-preloader__img {
	display: block;
	width: auto;
	height: auto;
	max-height: 96px;
	max-width: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.flash-preloader__logo--text,
	.flash-preloader__logo--image {
		animation: none;
	}
	.flash-preloader__spinner.loader,
	.flash-preloader__spinner.loader:after {
		animation: none;
	}
}

/*--------------------------------------------------------------
Single page layout CSS
--------------------------------------------------------------*/
.left-sidebar #primary {
	float: right;
}

.left-sidebar #secondary {
	float: left;
}

.full-width #primary {
	float: none;
	width: 100%;
}

.full-width-center #primary {
	float: none;
	margin: 0 auto;
	width: 65.5%;
}

.boxed {
	width: 1200px;
	margin: 0 auto;
}

.boxed .site {
	background: #fff none repeat scroll 0 0;
	-webkit-box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.3);
	margin: 30px 0;
	position: relative;
}

.boxed .tg-container {
	width: 100%;
	padding: 0 30px;
}

@media (max-width: 980px) {
	.boxed .tg-container {
		width: 98%;
	}
}

#wp-custom-header-video {
	display: block;
	min-height: 300px;
	min-height: 75vh;
	width: 100%;
}

.wp-custom-header {
	position: relative;
	text-align: center;
}

.wp-custom-header-video-button {
	position: absolute;
	bottom: 0;
	left: 0;
}


/*--------------------------------------------------------------
Section Title
--------------------------------------------------------------*/
.section-title-wrapper {
	margin-bottom: 30px !important;
}

.section-title {
	color: #cca690;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	margin-bottom: 20px;
}

.section-title:before {
	background: #e1e1e1 none repeat scroll 0 0;
	bottom: -5px;
	content: "";
	height: 1px;
	left: 50%;
	margin-left: -50px;
	position: absolute;
	width: 100px;
}

.section-title:after {
	content: "";
	left: 50%;
	position: absolute;
	background: #30afb8 none repeat scroll 0 0;
	bottom: -6px;
	height: 3px;
	margin-left: -15px;
	width: 30px;
}

.section-description {
	text-align: center;
	color: #777;
}






/*--------------------------------------------------------------
Blogs
--------------------------------------------------------------*/
.blog-section .tg-column-2 {
	margin: 0;
}

.blog-section .tg-blog-widget-layout-1 .tg-column-2 {
	width: 50%;
}

.blog-section .row:nth-child(odd) {
	float: left;
	width: 100%;
	background-color: #fcfcfc;
}

.blog-section .tg-blog-widget-layout-1 .row:nth-child(odd) .post-image {
	float: left;
	width: 50%;
	position: relative;
}

.blog-section .row .post-image figure img {
	padding: 0;
}

.blog-section .row:nth-child(odd) .post-image figure img {
	width: 100%;
}

.blog-section .row:nth-child(odd) .post-image:before {
	border-bottom: 15px solid transparent;
	border-right: 15px solid #fcfcfc;
	border-top: 15px solid transparent;
	content: " ";
	font-size: 22px;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.blog-section .tg-blog-widget-layout-1 .blog-content:hover .entry-title a {
	color: #fff;
}

.blog-section .row:nth-child(odd) .blog-content {
	float: left;
	padding: 15px 5px 15px 20px;
	width: 50%;
}

.blog-section .row:nth-child(odd) .post-readmore {
	display: none;
}

.blog-section .row:nth-child(odd) .entry-title {
	line-height: 24px;
}

.blog-section .row:nth-child(odd) .entry-title a {
	font-size: 18px;
	font-weight: 700;
	color: #cca690;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .blog-content .entry-title a {
	color: #fff;
}

.blog-section .row:nth-child(odd) .entry-title a:hover {
	color: #30afb8;
}

.blog-section .row:nth-child(odd) .entry-meta {
	margin: 8px 0;
	color: #919191;
}

.blog-section .row:nth-child(odd) .entry-meta .fa {
	padding-right: 5px;
}

.blog-section .row:nth-child(odd) .entry-meta a {
	font-size: 12px;
	color: #919191;
}

.blog-section .row:nth-child(odd) .entry-meta .entry-author {
	margin-left: 15px;
}

.blog-section .row:nth-child(odd) .entry-summary {
	font-size: 14px;
	color: #777;
	font-weight: 400;
}

.blog-section .tg-blog-widget-layout-1 {
	margin: 0;
}

.tg-blog-widget-layout-1 .entry-summary {
	max-height: 167px;
	overflow: hidden;
}

.blog-section .row:nth-child(even) {
	float: left;
	width: 100%;
	background-color: #fcfcfc;
}

.blog-section .row:nth-child(even) .post-image {
	float: right;
	position: relative;
	width: 50%;
}

.blog-section .row:nth-child(even) .post-image figure img {
	width: 100%;
}

.tg-blog-widget-layout-1 .tg-blog-widget .entry-summary {
	margin: 0;
}

.blog-section .row:nth-child(even) .post-image:before {
	border-bottom: 15px solid transparent;
	border-left: 15px solid #fcfcfc;
	border-top: 15px solid transparent;
	content: " ";
	font-size: 22px;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.blog-section .row:nth-child(even) .blog-content {
	float: right;
	padding: 15px 5px 15px 20px;
	width: 50%;
}

.blog-section .row:nth-child(even) .post-readmore {
	display: none;
}

.blog-section .row:nth-child(even) .entry-title {
	line-height: 24px;
}

.blog-section .row:nth-child(even) .entry-title a {
	font-size: 18px;
	font-weight: 700;
	color: #cca690;
}

.blog-section .row:nth-child(even) .entry-title a:hover {
	color: #30afb8;
}

.blog-section .row:nth-child(even) .entry-meta {
	margin: 8px 0;
	color: #919191;
}

.blog-section .row:nth-child(even) .entry-meta .fa {
	margin-right: 5px;
}

.blog-section .row:nth-child(even) .entry-meta a {
	font-size: 12px;
	color: #919191;
}

.blog-section .row:nth-child(even) .entry-meta .entry-author {
	margin-left: 15px;
}

.blog-section .row:nth-child(even) .entry-summary {
	font-size: 14px;
	color: #777;
	font-weight: 400;
}

.blog-section .tg-blog-widget {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover {
	background-color: #30afb8;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .entry-title a {
	color: #fff;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .entry-title a:hover {
	color: #313b48;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .entry-meta {
	color: #fff;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .entry-meta a {
	color: #fff;
}

.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .entry-summary {
	color: #fff;
}

.blog-section .row:nth-child(odd) .tg-blog-widget:hover .post-image:before {
	border-right: 15px solid #30afb8;
}

.blog-section .row:nth-child(even) .tg-blog-widget:hover .post-image:before {
	border-left: 15px solid #30afb8;
}

.blog-section .tg-blog-widget-layout-1 .entry-title a:hover,
.blog-section .tg-blog-widget-layout-1 .tg-blog-widget:hover .blog-content .entry-title a:hover {
	color: #fff;
}

.blog-section .tg-blog-widget-layout-2 .post-image {
	position: relative;
	width: auto;
	float: none;
}

.blog-section .tg-blog-widget-layout-2 .post-image img {
	width: 100%;
	padding: 0;
}

.blog-section .tg-blog-widget-layout-2 .post-image .entry-date {
	background: #30afb8;
	left: 0;
	padding: 10px;
	position: absolute;
	text-align: center;
	top: 0;
}

.blog-section .tg-blog-widget-layout-2 .post-image .entry-date .fa {
	display: none;
}

.blog-section .tg-blog-widget-layout-2 .post-image .entry-date a {
	color: #fff;
	font-size: 12px;
}

.blog-section .tg-blog-widget-layout-2 .post-image.image-none .entry-date {
	position: relative;
	display: inline-block;
}

.blog-section .tg-blog-widget-layout-2 .post-image:before {
	display: none;
}

.blog-section .tg-blog-widget-layout-2 .blog-content {
	float: none;
	padding: 0 10px;
	width: auto;
	text-align: left;
}

.blog-section .tg-blog-widget-layout-2 .entry-title a {
	font-size: 18px;
	line-height: 24px;
	display: block;
}

/*----------------- tg-blog-widget-layout-2 -----------------*/
.tg-blog-widget-layout-2 .entry-title {
	margin-top: 15px;
}

.blog-section .tg-blog-widget-layout-2 .post-readmore {
	background: #30afb8;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	padding: 6px 12px;
	margin: 20px 0;
}

.blog-section .tg-blog-widget-layout-2 .post-readmore:hover {
	background: #2299a1;
}

.blog-section .tg-blog-widget-layout-2 .read-more-container {
	background: #f6f6f6;
	display: inline-block;
	width: 100%;
	padding: 5px 10px;
	margin-top: 20px;
}

.blog-section .tg-blog-widget-layout-2 .read-more-container .entry-author {
	float: left;
	color: #8e8e8e;
}

.tg-blog-widget-layout-2 .read-more-container .entry-author a {
	color: #8e8e8e;
	font-size: 12px;
}

.blog-section .tg-blog-widget-layout-2 .read-more-container .entry-author .fa {
	margin-right: 5px;
}

.blog-section .tg-blog-widget-layout-2 .read-more-container .read-more {
	float: right;
}

.blog-section .tg-blog-widget-layout-2 .read-more-container .read-more a {
	font-size: 12px;
	color: #30afb8;
}

.blog-section .tg-blog-widget-layout-2:hover {
	background-color: #fcfcfc;
}

.blog-section .tg-blog-widget-layout-2:hover .entry-meta a {
	color: #919191;
}

.tg-blog-widget-layout-2 .blog-content p {
	margin: 0 0 10px;
}

.blog-section .tg-blog-widget-layout-2 .entry-title a:hover,
.blog-section .tg-blog-widget-layout-2 .tg-blog-widget:hover .blog-content .entry-title a:hover,
.blog-section .tg-blog-widget-layout-2 .read-more-container .read-more:hover a {
	color: #239ca4;
}

.tg-blog-widget-layout-2 .read-more-container .entry-author:hover {
	color: #239ca4;
}

.tg-blog-widget-layout-2 .read-more-container .entry-author:hover a {
	color: #239ca4;
}

/*--------------------------------------------------------------
Clients
--------------------------------------------------------------*/
.client-wrapper.swiper-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto;
}


/*--------------------------------------------------------------
Archive
--------------------------------------------------------------*/
.post {
	margin-bottom: 40px;
	display: inline-block;
}

.post .entry-thumbnail {
	float: left;
	margin-right: 30px;
	width: 33.7%;
}

.entry-meta .entry-date a .updated:not(.published) {
	display: none;
}

.entry-content-block #primary .entry-title {
	font-size: 20px;
	line-height: 24px;
}

.entry-content,
.entry-summary {
	margin-top: 12px;
	color: #606060;
}

#primary .entry-footer span {
	font-size: 14px;
	margin-right: 15px;
}

#primary .entry-footer span .fa {
	margin-right: 5px;
}

#primary .entry-footer span a {
	font-size: 12px;
}

.navigation.posts-navigation {
	margin: 20px 0;
}

.entry-meta {
	font-size: 12px;
	margin-top: 12px;
}

.entry-meta .fa {
	padding-right: 5px;
}

.entry-meta a {
	font-size: 12px;
	color: #8e8e8e;
}

.entry-footer a {
	font-size: 12px;
	color: #8e8e8e;
}

.entry-meta span {
	margin-right: 15px;
}

#secondary {
	float: right;
	width: 32.22%;
}

#secondary .widget-title {
	font-size: 14px;
	position: relative;
	margin-bottom: 30px;
}

#secondary .widget-title:before, #secondary .widget-title:after {
	background: #e1e1e1 none repeat scroll 0 0;
	bottom: -10px;
	content: " ";
	height: 1px;
	left: 0;
	margin-left: 0;
	position: absolute;
	width: 100%;
}

#secondary .widget-title:after {
	background: #30afb8;
	bottom: -11px;
	height: 3px;
	margin-left: 0;
	width: 30px;
}

#secondary .searchform input {
	border: none;
	border-bottom: 1px solid #666;
	width: 70%;
}

#secondary .searchform .btn:hover {
	background: #30afb8 none repeat scroll 0 0;
}

#secondary .searchform button[type="submit"] {
	margin-bottom: 0;
}

#secondary .widget {
	margin-bottom: 30px;
}

#secondary .widget ul {
	margin: 0;
	list-style: none;
}

#secondary .widget ul li {
	position: relative;
	padding: 0 0 10px 20px;
	font-size: 12px;
}

#secondary .widget ul li:after {
	color: #000;
	content: "\" /*rtl:"\"*/;
	font-family: fontawesome;
	left: 0;
	position: absolute;
	top: 0;
}

#secondary .widget ul li a {
	font-size: 12px;
}

#secondary .widget ul li a:hover {
	color: #30afb8;
}

.widget_post_list .post-link-block {
	margin-bottom: 20px;
	display: inline-block;
}

.widget_post_list .entry-thumbnail {
	float: left;
	margin-right: 30px;
	width: 20%;
}

.widget_post_list .entry-content-block {
	overflow: hidden;
}

.widget_post_list .entry-content-block .entry-title {
	line-height: 13px;
	margin-bottom: 18px;
}

.widget_post_list .entry-content-block .entry-title a {
	font-size: 12px;
}

.widget_post_list .entry-content-block .entry-meta a {
	color: #8e8e8e;
	font-size: 12px;
}

.widget_post_list .entry-meta .entry-author {
	margin-left: 15px;
}

.blog .entry-thumbnail {
	float: left;
	width: 33.7%;
}

.blog .entry-content-block {
	width: 100%;
}

#primary .post .entry-content-block .entry-content {
	border: none;
}

.full-width-archive #primary .post {
	margin-bottom: 50px;
	width: 100%;
}

.full-width-archive #primary .post.has-post-thumbnail {
	margin-bottom: 0;
}

.full-width-archive #primary .post .entry-thumbnail {
	width: 100%;
	float: none;
	margin-right: 0;
}

.full-width-archive #primary .post .entry-thumbnail img {
	width: 100%;
}

.full-width-archive #primary .post .entry-content-block {
	overflow: unset;
	width: 94%;
	position: relative;
	top: 0;
	padding: 20px 20px 0;
	margin: 0 auto;
	background: #fff;
}

.full-width-archive #primary .post.has-post-thumbnail .entry-content-block {
	overflow: unset;
	width: 94%;
	position: relative;
	top: -45px;
	padding: 20px 20px 0;
	margin: 0 auto;
	background: #fff;
}

.grid-view #primary .post {
	display: inline-block;
	margin-bottom: 30px;
	margin-right: 1%;
	vertical-align: top;
	width: 48%;
}

.grid-view #primary .post .entry-thumbnail {
	width: 100%;
}

.grid-view #primary .post .entry-content-block {
	position: unset;
	width: 100%;
}

.post-type-archive-portfolio .entry-thumbnail {
	float: left;
	clear: both;
	margin-bottom: 40px;
	margin-right: 30px;
}

.post-type-archive-portfolio .navigation.posts-navigation {
	width: 100%;
	clear: both;
}

.entry-content-block .entry-title {
	font-size: 18px;
}

.grid-view .entry-header {
	margin-top: 10px;
}



/*--------------------------------------------------------------
Post Page
--------------------------------------------------------------*/
.post {
	width: 100%;
}

.single .entry-content-block .entry-meta {
	margin-top: 0;
	margin-bottom: 20px;
}

.single .entry-content-block .entry-header {
	margin: 20px 0 5px;
}

.single .entry-thumbnail {
	margin-top: 20px;
	width: 100%;
}

.single .entry-thumbnail img {
	padding: 0;
}

.single .entry-content-block {
	width: 100%;
}

.single .entry-content-block .entry-title {
	font-size: 20px;
}

.single .entry-content-block .entry-meta .fa {
	padding-right: 5px;
}

.single .entry-content-block .entry-meta a {
	font-size: 12px;
}

.post .entry-content-block .entry-meta a:hover,
.post .entry-content-block .entry-meta span:hover {
	color: #30afb8;
}

.single .entry-content-block .entry-content {
	border-bottom: 1px solid #c5c5c5;
	padding-bottom: 1.75em;
}

/*--------------------------------------------------------------
Contenu article / page : css/article-prose.css (injecté en fin de page, voir flash_print_article_prose_styles dans functions.php)
--------------------------------------------------------------*/

.single .entry-content-block .entry-footer span {
	color: #8e8e8e;
	font-size: 14px;
	margin-right: 15px;
}

.single .entry-content-block .entry-footer span .fa {
	margin-right: 5px;
}

.single .entry-content-block .entry-footer span a {
	color: #8e8e8e;
	font-size: 12px;
}

.post .entry-content-block .entry-footer span a:hover {
	color: #30afb8;
}

.author-description {
	border-bottom: 1px solid #c5c5c5;
	display: block;
	padding: 0 0 30px;
}

.author-description .author-img {
	display: inline-block;
	width: 75px;
	float: left;
}

.author-description .author-description-block {
	width: calc(100% - 100px);
	float: right;
	display: inline-block;
}

.author-description .author-description-block .author-title {
	color: #313b48;
	font-weight: 700;
}

.author-description .author-description-block .author-summary {
	font-size: 12px;
}

.default-wp-page {
	margin: 0;
	padding: 30px 0;
	display: inline-block;
	border-bottom: 1px solid #c5c5c5;
}

.default-wp-page .previous {
	float: left;
	width: 46%;
}

.default-wp-page .previous a {
	display: inline-block;
}

.default-wp-page .previous a span {
	float: left;
}

.default-wp-page .previous a span:first-child {
	font-size: 30px;
	padding: 8px 0;
}

.default-wp-page .previous a span img {
	padding: 0 10px;
}

.default-wp-page .previous a .entry-title {
	display: inline-block;
	width: 60%;
	padding: 8px 0;
}

.default-wp-page .navigation-divider {
	display: inline-block;
	padding: 20px;
}

.default-wp-page .next {
	float: right;
	width: 46%;
}

.default-wp-page .next a {
	display: inline-block;
}

.default-wp-page .next a span {
	float: right;
}

.default-wp-page .next a span:first-child {
	font-size: 30px;
	padding: 8px 0;
}

.default-wp-page .next a span img {
	padding: 0 10px;
}

.default-wp-page .next a .entry-title {
	display: inline-block;
	width: 60%;
	padding: 8px 0;
	text-align: right;
}

.related-posts-wrapper {
	margin-top: 30px;
}

.related-posts-wrapper .related-posts-main-title {
	margin-bottom: 20px;
}

.related-posts-wrapper .post-thumbnails {
	margin-bottom: 20px;
}

.related-posts-wrapper .post-thumbnails img {
	padding: 0;
}

.related-posts-wrapper .entry-title {
	font-size: 18px;
}

.related-posts-wrapper .entry-title a:hover {
	color: #30afb8;
}

.related-posts-wrapper .entry-meta > span a:hover {
	color: #30afb8;
}

/*--------------------------------------------------------------
404 page
--------------------------------------------------------------*/
.not-found .icon-404 .fa {
	font-size: 300px;
}

#primary .content-404 {
	padding: 60px 0;
}

#primary .not-found .page-header .page-title {
	font-size: 24px;
	line-height: 30px;
}

#primary .not-found .page-content {
	margin: 30px 0;
}

#primary .searchform input {
	border: none;
	border-bottom: 1px solid #666;
	width: 70%;
}

#primary .searchform .btn:hover {
	background: #30afb8 none repeat scroll 0 0;
}

.search .hentry {
	border-bottom: 1px solid #e1e1e1;
	margin-top: 20px;
}


/*--------------------------------------------------------------
WooCommerce
--------------------------------------------------------------*/
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
	padding: 0;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: #30afb8;
	padding: 0;
	height: 50px;
	width: 50px;
	line-height: 50px;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
	width: auto;
}

.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: #30afb8;
	color: #fff;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: #2299a1;
}

.added_to_cart.wc-forward {
	background-color: #30afb8;
	border-radius: 3px;
	font-size: 14px;
	line-height: 18px;
	color: #fff;
	padding: 4px 17px;
	margin-top: 5px;
}

.added_to_cart.wc-forward:hover {
	background-color: #2299a1;
}

.added_to_cart.wc-forward:after {
	content: "\f23d";
	color: #fff;
	font-family: fontawesome;
	padding-left: 8px;
}

.woocommerce-Price-amount.amount {
	color: #30afb8;
}

.woocommerce .star-rating span {
	color: #ffae65;
}

.widget_shopping_cart .buttons {
	text-align: center;
}

.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
	padding: 5px 0;
	text-align: center;
}

.flash-cart-views .woocommerce ul.cart_list li img {
	width: 70px;
}

.woocommerce ul.product_list_widget li img {
	width: 70px;
}

.woocommerce ul.products li.product .price del {
	margin-right: 5px;
	display: inline-block;
}

.woocommerce nav.woocommerce-pagination {
	text-align: left;
}

.woocommerce .woocommerce-breadcrumb {
	float: right;
	margin: 0;
	padding: 14px 0;
}

.woocommerce .woocommerce-breadcrumb span {
	font-size: 12px;
	color: #a1a1a1;
	position: relative;
	line-height: 18px;
	padding: 0 14px;
}

.woocommerce .woocommerce-breadcrumb span:before {
	color: #a1a1a1;
	content: "\" /*rtl:"\"*/;
	font-family: fontawesome;
	left: 0;
	position: absolute;
	top: 0;
}

.woocommerce .woocommerce-breadcrumb span:first-of-type:before {
	content: none;
}

#secondary .widget_products ul.product_list_widget li img {
	padding: 0 0 20px 0;
}

#secondary .widget_products ul li {
	clear: both;
}

.woocommerce-breadcrumb {
	float: right;
	margin: 0;
	padding: 14px 0;
}

.woocommerce-breadcrumb span {
	font-size: 12px;
	color: #a1a1a1;
	position: relative;
	line-height: 18px;
	padding: 0 14px;
}

.woocommerce-breadcrumb span:before {
	color: #a1a1a1;
	content: "\" /*rtl:"\"*/;
	font-family: fontawesome;
	left: 0;
	position: absolute;
	top: 0;
}

.woocommerce-breadcrumb span:first-of-type:before {
	content: none;
}

.slider-arrow .swiper-button-prev:after {
	content: none;
}

.slider-arrow .swiper-button-next:after {
	content: none;
}





/********* DEV ************/


.text-outline {
	-webkit-text-stroke: 1px rgba(255, 255, 255, 1);
	color: transparent;
	-webkit-text-fill-color: rgba(200, 200, 200, 0.2);
}
.urban-grid {
	background-size: 40px 40px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
					  linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
/* Fallback "sans Tailwind" : les sections .urban-grid utilisent souvent position:relative via Tailwind */
html.flash-studio .urban-grid {
	position: relative;
}
.brutalist-border {
	border: 1px solid rgba(245, 245, 245, 0.2);
	transition: border-color 0.3s ease;
}
.brutalist-border:hover {
	border-color: rgba(245, 245, 245, 1);
}

/* Cartes cours (lien plein) : le thème impose a:hover { color: #000 } — garder le texte clair. */
html.flash-studio a.flash-cours-card-link,
html.flash-studio a.flash-cours-card-link:hover,
html.flash-studio a.flash-cours-card-link:focus,
html.flash-studio a.flash-cours-card-link:active,
html.flash-studio a.flash-cours-card-link h3 {
	color: #f5f5f5 !important;
}

/*
 * Cours populaires (accueil) :
 * - sous 770px : carrousel 1 carte / vue (transform JS), points sous le bloc.
 * - ≥ 770px : grille 3 colonnes (gap 3rem), comme avant le carrousel.
 */
html.flash-studio .flash-cours-populaires-viewport {
	overflow: hidden;
	width: 100%;
}

html.flash-studio .flash-cours-populaires-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	will-change: transform;
	transition: transform 0.5s ease;
}

html.flash-studio .flash-cours-populaires-track > .flash-cours-slide,
html.flash-studio .flash-cours-populaires-track > .flash-stage-card-cell {
	flex: 0 0 100%;
	min-width: 0;
	/* largeurs en px côté JS (carrousel) */
	box-sizing: border-box;
}

/*
 * Fallback "sans Tailwind" (1er paint) :
 * Les cartes cours sont stylées principalement via classes Tailwind utilitaires.
 * Si le CDN Tailwind n'est pas encore appliqué, l'image peut paraître minuscule jusqu'à un resize.
 * On force ici les dimensions/positions essentielles sur les classes maison.
 */
html.flash-studio .flash-cours-slide {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

/*
 * Page « tous les cours » : grille flex (cartes fixes + CTA qui comble la ligne).
 * Pas de hauteur calculée en JS — évite les boucles de redimensionnement.
 */
html.flash-studio .flash-cours-listing-grid {
	--flash-cours-gap-x: 2.5rem;
	--flash-cours-gap-y: 3rem;
	--flash-cours-cell: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	column-gap: var(--flash-cours-gap-x);
	row-gap: var(--flash-cours-gap-y);
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	html.flash-studio .flash-cours-listing-grid {
		--flash-cours-cell: calc((100% - var(--flash-cours-gap-x)) / 2);
	}
}

@media (min-width: 1280px) {
	html.flash-studio .flash-cours-listing-grid {
		--flash-cours-cell: calc((100% - 2 * var(--flash-cours-gap-x)) / 3);
	}
}

html.flash-studio .flash-cours-listing-grid > .flash-cours-slide {
	flex: 0 0 var(--flash-cours-cell);
	max-width: var(--flash-cours-cell);
	min-width: 0;
	box-sizing: border-box;
}

html.flash-studio .flash-cours-listing-grid > .flash-cours-programme-cta {
	flex: 1 1 var(--flash-cours-cell);
	min-width: var(--flash-cours-cell);
	max-width: 100%;
	box-sizing: border-box;
	aspect-ratio: auto;
	align-self: stretch;
}

html.flash-studio .flash-cours-listing-grid > .flash-cours-programme-cta__inner {
	box-sizing: border-box;
	min-height: 100%;
}

html.flash-studio a.flash-cours-programme-cta,
html.flash-studio a.flash-cours-programme-cta:hover,
html.flash-studio a.flash-cours-programme-cta:focus,
html.flash-studio a.flash-cours-programme-cta:active {
	color: #f5f5f5 !important;
}

/* Ligne pleine précédente : CTA seul sur une nouvelle ligne (3/3, 2/2, 1/1). */
html.flash-studio .flash-cours-listing-grid > .flash-cours-programme-cta[data-cta-layout="alone"] {
	flex: 1 1 100%;
	min-width: 100%;
	max-width: 100%;
	height: calc(var(--flash-cours-cell) * 5 / 4);
	max-height: calc(var(--flash-cours-cell) * 5 / 4);
}

/* 1 carte + CTA : le bloc prend les colonnes restantes (2/3 ou 1/2). */
html.flash-studio .flash-cours-listing-grid > .flash-cours-programme-cta[data-cta-layout="fill-2"] {
	flex: 1 1 calc(2 * var(--flash-cours-cell) + var(--flash-cours-gap-x));
	min-width: calc(2 * var(--flash-cours-cell) + var(--flash-cours-gap-x));
	max-width: 100%;
	height: auto;
	max-height: none;
}

html.flash-studio .flash-cours-listing-grid > .flash-cours-programme-cta[data-cta-layout="fill-1"] {
	flex: 1 1 var(--flash-cours-cell);
	min-width: var(--flash-cours-cell);
	max-width: 100%;
	height: auto;
	max-height: none;
}

/* 2 cartes + CTA : une cellule comme les autres. */
html.flash-studio .flash-cours-listing-grid > .flash-cours-programme-cta[data-cta-layout="cell"] {
	flex: 0 0 var(--flash-cours-cell);
	max-width: var(--flash-cours-cell);
	height: auto;
	max-height: none;
}
/* Fallback si aspect-ratio n'est pas supporté */
@supports not (aspect-ratio: 1 / 1) {
	html.flash-studio .flash-cours-slide::before {
		content: "";
		display: block;
		padding-top: 125%;
	}
}
html.flash-studio .flash-cours-slide > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/*
 * Cartes cours : la règle globale `a img { padding: 10px }` (héritage thème) s’applique au lien plein
 * et réduit la zone de l’image → bandes noires / image « centrée ». On neutralise pour un vrai plein cadre.
 */
html.flash-studio a.flash-cours-card-link > img {
	padding: 0;
	margin: 0;
	border: 0;
	vertical-align: top;
}

/* Même logique que l’image par défaut ailleurs, mais ici on veut remplir la carte (ratio 4/5). */
html.flash-studio a.flash-cours-card-link > img.flash-default-upload-img {
	object-fit: cover !important;
}

html.flash-studio .flash-cours-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	box-sizing: border-box;
	overflow: visible;
}

body.flash-singular-studio .flash-cours-card__content {
	overflow: visible;
}

/* Pastilles date / niveau — cartes stages (accueil, overlay). */
html.flash-studio .flash-stage-card__badge {
	background-color: rgba(0, 0, 0, 0.58);
	border: 1px solid rgba(245, 245, 245, 0.14);
	color: rgba(245, 245, 245, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/*
 * Pastilles niveau — cartes cours (liste, accueil).
 * Le lien carte force color:#f5f5f5 !important ; le reset Flash impose border:0 sur span.
 * On redéfinit tout avec !important (comme .studio-ring).
 */
html.flash-studio a.flash-cours-card-link .flash-cours-card__niveau-badge,
body.flash-singular-studio a.flash-cours-card-link .flash-cours-card__niveau-badge {
	display: inline-flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
	min-height: 1.5rem !important;
	padding: 0.25rem 0.75rem !important;
	border-radius: 9999px !important;
	white-space: nowrap !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
}

html.flash-studio a.flash-cours-card-link .flash-cours-card__niveau-badge--light,
html.flash-studio a.flash-cours-card-link:hover .flash-cours-card__niveau-badge--light,
html.flash-studio a.flash-cours-card-link:focus .flash-cours-card__niveau-badge--light,
html.flash-studio a.flash-cours-card-link:active .flash-cours-card__niveau-badge--light,
body.flash-singular-studio a.flash-cours-card-link .flash-cours-card__niveau-badge--light,
body.flash-singular-studio a.flash-cours-card-link:hover .flash-cours-card__niveau-badge--light,
body.flash-singular-studio a.flash-cours-card-link:focus .flash-cours-card__niveau-badge--light,
body.flash-singular-studio a.flash-cours-card-link:active .flash-cours-card__niveau-badge--light {
	background-color: #fff !important;
	color: #0e0e0e !important;
	border: 1px solid #0e0e0e !important;
}

html.flash-studio a.flash-cours-card-link .flash-cours-card__niveau-badge--dark,
html.flash-studio a.flash-cours-card-link:hover .flash-cours-card__niveau-badge--dark,
html.flash-studio a.flash-cours-card-link:focus .flash-cours-card__niveau-badge--dark,
html.flash-studio a.flash-cours-card-link:active .flash-cours-card__niveau-badge--dark,
body.flash-singular-studio a.flash-cours-card-link .flash-cours-card__niveau-badge--dark,
body.flash-singular-studio a.flash-cours-card-link:hover .flash-cours-card__niveau-badge--dark,
body.flash-singular-studio a.flash-cours-card-link:focus .flash-cours-card__niveau-badge--dark,
body.flash-singular-studio a.flash-cours-card-link:active .flash-cours-card__niveau-badge--dark {
	background-color: #0e0e0e !important;
	color: #f5f5f5 !important;
	border: 1px solid #f5f5f5 !important;
}

/* Cartes cours sans lien (aperçu admin, etc.). */
html.flash-studio .flash-cours-slide .flash-cours-card__niveau-badge--light,
body.flash-singular-studio .flash-cours-slide .flash-cours-card__niveau-badge--light {
	background-color: #fff !important;
	color: #0e0e0e !important;
	border: 1px solid #0e0e0e !important;
}

html.flash-studio .flash-cours-slide .flash-cours-card__niveau-badge--dark,
body.flash-singular-studio .flash-cours-slide .flash-cours-card__niveau-badge--dark {
	background-color: #0e0e0e !important;
	color: #f5f5f5 !important;
	border: 1px solid #f5f5f5 !important;
}

/* Âge — pastille superposée à l’image (coin haut droit), une ligne. */
html.flash-studio a.flash-cours-card-link .flash-cours-card__content .flash-cours-card__age-lucarne,
html.flash-studio a.flash-cours-card-link:hover .flash-cours-card__content .flash-cours-card__age-lucarne,
html.flash-studio a.flash-cours-card-link:focus .flash-cours-card__content .flash-cours-card__age-lucarne,
html.flash-studio a.flash-cours-card-link:active .flash-cours-card__content .flash-cours-card__age-lucarne,
html.flash-studio .flash-cours-slide .flash-cours-card__content .flash-cours-card__age-lucarne,
body.flash-singular-studio a.flash-cours-card-link .flash-cours-card__content .flash-cours-card__age-lucarne,
body.flash-singular-studio a.flash-cours-card-link:hover .flash-cours-card__content .flash-cours-card__age-lucarne,
body.flash-singular-studio a.flash-cours-card-link:focus .flash-cours-card__content .flash-cours-card__age-lucarne,
body.flash-singular-studio a.flash-cours-card-link:active .flash-cours-card__content .flash-cours-card__age-lucarne,
body.flash-singular-studio .flash-cours-slide .flash-cours-card__content .flash-cours-card__age-lucarne {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 10 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	border: none !important;
	max-width: min(18rem, 88%);
	pointer-events: none;
}

html.flash-studio a.flash-cours-card-link .flash-cours-card__content .flash-cours-card__age-badge,
html.flash-studio a.flash-cours-card-link:hover .flash-cours-card__content .flash-cours-card__age-badge,
html.flash-studio a.flash-cours-card-link:focus .flash-cours-card__content .flash-cours-card__age-badge,
html.flash-studio a.flash-cours-card-link:active .flash-cours-card__content .flash-cours-card__age-badge,
html.flash-studio .flash-cours-slide .flash-cours-card__content .flash-cours-card__age-badge,
body.flash-singular-studio a.flash-cours-card-link .flash-cours-card__content .flash-cours-card__age-badge,
body.flash-singular-studio a.flash-cours-card-link:hover .flash-cours-card__content .flash-cours-card__age-badge,
body.flash-singular-studio a.flash-cours-card-link:focus .flash-cours-card__content .flash-cours-card__age-badge,
body.flash-singular-studio a.flash-cours-card-link:active .flash-cours-card__content .flash-cours-card__age-badge,
body.flash-singular-studio .flash-cours-slide .flash-cours-card__content .flash-cours-card__age-badge {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	background-color: rgba(14, 14, 14, 0.78) !important;
	color: rgba(245, 245, 245, 0.95) !important;
	border: 1px solid rgba(245, 245, 245, 0.18) !important;
	border-radius: 3px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

html.flash-studio a.flash-cours-card-link .flash-cours-card__content .flash-cours-card__age-badge-text,
html.flash-studio .flash-cours-slide .flash-cours-card__content .flash-cours-card__age-badge-text,
body.flash-singular-studio a.flash-cours-card-link .flash-cours-card__content .flash-cours-card__age-badge-text,
body.flash-singular-studio .flash-cours-slide .flash-cours-card__content .flash-cours-card__age-badge-text {
	display: block !important;
	width: auto !important;
	color: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	text-align: center !important;
}

/* Carrousel tablette : réduire légèrement la taille de la carte (sinon trop haute via aspect 4/5). */
@media (min-width: 600px) and (max-width: 769px) {
	html.flash-studio .flash-cours-populaires-viewport {
		/* Le JS dimensionne les slides sur la largeur du viewport : on la borne ici. */
		max-width: min(520px, 78vw);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 599px) {
	html.flash-studio .flash-cours-populaires-viewport {
		/* Même logique que 600–769px, mais un peu plus large pour petits écrans. */
		max-width: min(460px, 92vw);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 769px) {
	html.flash-studio .flash-cours-populaires-dots.flash-cours-populaires-dots--visible {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		margin-top: 1.5rem;
		padding: 0;
		list-style: none;
	}

	html.flash-studio .flash-cours-populaires-dot {
		width: 0.5rem;
		height: 0.5rem;
		padding: 0;
		border: 0;
		border-radius: 9999px;
		background-color: rgba(245, 245, 245, 0.35);
		cursor: pointer;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	html.flash-studio .flash-cours-populaires-dot:hover,
	html.flash-studio .flash-cours-populaires-dot:focus-visible {
		background-color: rgba(245, 245, 245, 0.65);
		outline: none;
	}

	html.flash-studio .flash-cours-populaires-dot.is-active {
		background-color: #f5f5f5;
		transform: scale(1.25);
	}
}

html.flash-studio .flash-cours-populaires-dots {
	display: none;
}

@media (min-width: 770px) {
	html.flash-studio .flash-cours-populaires-viewport {
		overflow: hidden;
		width: 100%;
	}

	html.flash-studio .flash-cours-populaires-track {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 3rem;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	html.flash-studio .flash-cours-populaires-track > .flash-cours-slide,
	html.flash-studio .flash-cours-populaires-track > .flash-stage-card-cell {
		max-width: none;
		width: auto !important;
		min-width: 0;
		box-sizing: border-box;
	}

	html.flash-studio .flash-cours-populaires-dots {
		display: none !important;
	}
}

/* Ajustements micro-responsive : 3 cartes visibles mais contenu stable dans la carte. */
@media (min-width: 770px) and (max-width: 830px) {
	html.flash-studio .flash-cours-card__content {
		padding: 1.25rem !important; /* ~p-5 au lieu de md:p-7 */
	}

	html.flash-studio .flash-cours-card__title {
		font-size: 1.625rem !important; /* légèrement < text-3xl */
		line-height: 1.15 !important;
		min-height: 3.5rem !important;
	}

	html.flash-studio .flash-cours-card__excerpt {
		min-height: 0 !important;
		margin-bottom: 0.75rem !important;
	}

	html.flash-studio .flash-cours-card__cta {
		padding: 0.45rem 0.85rem !important;
	}
}

html.flash-studio a.flash-stage-card-link,
html.flash-studio a.flash-stage-card-link:hover,
html.flash-studio a.flash-stage-card-link:focus,
html.flash-studio a.flash-stage-card-link:active,
html.flash-studio a.flash-stage-card-link h3 {
	color: #f5f5f5 !important;
}

/*
 * Cartes stages (split) : tailles par défaut partagées — toutes les cartes respectent
 * les mêmes hauteurs de blocs (image 3/4 + meta fixe), CTA aligné en bas.
 */
html.flash-studio {
	--flash-stage-card-title-block: 4.75rem;
	--flash-stage-card-period-block: 2.375rem;
	--flash-stage-card-choregraphe-block: 3.75rem;
	--flash-stage-card-niveau-block: 4rem;
	--flash-stage-card-meta-min: 20.5rem;
}

@media (min-width: 640px) {
	html.flash-studio {
		--flash-stage-card-title-block: 5.625rem;
		--flash-stage-card-meta-min: 21.5rem;
	}
}

/* Grille stages : même hauteur par ligne (cellule flex + lien flex-1). */
html.flash-studio .flash-stages-grid,
html.flash-studio #flash-stages-populaires-track {
	align-items: stretch;
}

html.flash-studio .flash-stages-grid > .flash-stage-card-cell,
html.flash-studio #flash-stages-populaires-track > .flash-stage-card-cell {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	align-self: stretch;
	box-sizing: border-box;
}

html.flash-studio .flash-stages-grid > .flash-stage-card-cell > *,
html.flash-studio #flash-stages-populaires-track > .flash-stage-card-cell > * {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

html.flash-studio a.flash-stage-card-link,
html.flash-studio .flash-stage-card-link.cursor-default {
	min-height: 100%;
	height: 100%;
}

/* Meta stages : colonne flex — CTA calé en bas, hauteur minimale fixe pour aligner les cartes. */
html.flash-studio .flash-stage-card-meta {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: var(--flash-stage-card-meta-min);
	box-sizing: border-box;
}

html.flash-studio .flash-stage-card-link .flash-stage-card-media,
html.flash-studio .flash-stage-card-link.cursor-default .flash-stage-card-media {
	flex-shrink: 0;
}

html.flash-studio .flash-stage-card__title {
	min-height: var(--flash-stage-card-title-block);
	max-height: var(--flash-stage-card-title-block);
	margin-bottom: 0.5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

html.flash-studio .flash-stage-card__period {
	min-height: var(--flash-stage-card-period-block);
	max-height: var(--flash-stage-card-period-block);
	margin-bottom: 0.75rem;
	overflow: hidden;
	box-sizing: border-box;
}

html.flash-studio .flash-stage-card__choregraphe {
	min-height: var(--flash-stage-card-choregraphe-block);
	max-height: var(--flash-stage-card-choregraphe-block);
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	box-sizing: border-box;
}

html.flash-studio .flash-stage-card__niveau {
	min-height: var(--flash-stage-card-niveau-block);
	max-height: var(--flash-stage-card-niveau-block);
	margin-bottom: 1.25rem;
	overflow: hidden;
	box-sizing: border-box;
}

html.flash-studio .flash-stage-card__niveau > span:last-child {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

html.flash-studio .flash-stage-card__cta {
	margin-top: auto;
	flex-shrink: 0;
}

@media (min-width: 770px) {
	html.flash-studio #flash-stages-populaires-track {
		align-items: stretch;
		grid-auto-rows: 1fr;
	}

	html.flash-studio #flash-stages-populaires-track > .flash-stage-card-cell {
		height: 100%;
		align-self: stretch;
	}
}

/*
 * Vignettes stages : dimensions strictement identiques.
 * Ne dépend pas de Tailwind CDN (aspect-[3/4]) : on force le ratio + un recadrage cover.
 */
html.flash-studio .flash-stage-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
/* Fallback si aspect-ratio n'est pas supporté */
@supports not (aspect-ratio: 1 / 1) {
	html.flash-studio .flash-stage-card-media::before {
		content: "";
		display: block;
		padding-top: 133.3333%;
	}
}
html.flash-studio .flash-stage-card-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Section contact (accueil) : une colonne tant que largeur < 1250px ; 2 colonnes à partir de 1250px. */
@media (min-width: 1250px) {
	html.flash-studio .flash-contact-section-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Studio — dimensions & typo alignées sur doc/template-front.html :
 * - rem Tailwind = base 16px (pas 62,5 % du thème Flash)
 * - contenu pleine largeur ; max-w-7xl / px-6 restent sur les blocs comme la maquette
 */
html.flash-studio {
	font-size: 100%;
	/* Comme le preflight Tailwind de doc/template-front.html (Inter sur la racine). */
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
html.flash-studio body {
	background-color: #0e0e0e;
	color: #f5f5f5;
	/* Kirki (Customizer) et le reset Flash ciblent encore body { Montserrat } : forcer la pile maquette. */
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.5;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Le thème impose a, a:hover { color: #000 } — illisible sur fond #0e0e0e.
 * Uniquement dans la zone de contenu : sinon on écrase les hovers Tailwind du header (#masthead) et du pied de page.
 */
/*
 * Garder la lisibilité des liens "texte" sur fond sombre, sans impacter les CTA/boutons.
 * (Sinon, color:inherit au hover rend certains boutons blancs illisibles.)
 */
html.flash-studio #content.site-content a:hover:not(.bg-studio-white):not(.flash-cours-single__hero-cta):not(.flash-inscription-cta-row__link--pill):not(.wp-block-button__link),
html.flash-studio #content.site-content a:focus:not(.bg-studio-white):not(.flash-cours-single__hero-cta):not(.flash-inscription-cta-row__link--pill):not(.wp-block-button__link),
html.flash-studio #content.site-content a:active:not(.bg-studio-white):not(.flash-cours-single__hero-cta):not(.flash-inscription-cta-row__link--pill):not(.wp-block-button__link) {
	color: inherit;
}

/*
 * Exception : CTA hero "pilule blanche" (ex. « Découvrir les cours »).
 * La règle ci-dessus force color:inherit au hover → texte blanc sur fond blanc.
 * On conserve les autres effets (scale, etc.) et on fige uniquement les couleurs.
 */
html.flash-studio #content.site-content a.bg-studio-white:hover,
html.flash-studio #content.site-content a.bg-studio-white:focus,
html.flash-studio #content.site-content a.bg-studio-white:active {
	color: #0e0e0e !important;
	background-color: #f5f5f5 !important;
}

/*
 * CTA "S’inscrire" (variant pill) : ne jamais hériter une couleur blanche au hover/focus,
 * même si la page n'a pas la classe html.flash-studio.
 */
#content.site-content a.flash-inscription-cta-row__link--pill:hover,
#content.site-content a.flash-inscription-cta-row__link--pill:focus,
#content.site-content a.flash-inscription-cta-row__link--pill:active,
#content.site-content a.flash-inscription-cta-row__link--pill:hover :is(span, i, svg),
#content.site-content a.flash-inscription-cta-row__link--pill:focus :is(span, i, svg),
#content.site-content a.flash-inscription-cta-row__link--pill:active :is(span, i, svg) {
	color: #0e0e0e !important;
}

/* Page "cours" : CTA hero (bouton blanc) ne doit jamais passer en texte blanc au hover. */
#content.site-content .single-cours a.flash-cours-single__hero-cta:hover,
#content.site-content .single-cours a.flash-cours-single__hero-cta:focus,
#content.site-content .single-cours a.flash-cours-single__hero-cta:active,
#content.site-content .single-cours a.flash-cours-single__hero-cta:hover :is(span, i, svg),
#content.site-content .single-cours a.flash-cours-single__hero-cta:focus :is(span, i, svg),
#content.site-content .single-cours a.flash-cours-single__hero-cta:active :is(span, i, svg) {
	color: #0e0e0e !important;
}

/* CTA type maquette (texte + studio-ring) : style.css impose button { background:#333 }. */
html.flash-studio button.bg-transparent {
	background: transparent !important;
	box-shadow: none;
}

html.flash-studio button,
html.flash-studio input,
html.flash-studio select,
html.flash-studio textarea {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html.flash-studio code,
html.flash-studio kbd,
html.flash-studio pre,
html.flash-studio samp,
html.flash-studio tt,
html.flash-studio var {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

html.flash-studio blockquote,
html.flash-studio .wp-block-quote,
html.flash-studio .wp-block-quote.is-style-large {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html.flash-studio h1,
html.flash-studio h2,
html.flash-studio h3 {
	font-family: Anton, Inter, sans-serif !important;
	/* Le reset Flash impose font-weight:700 sur tous les hn ; Anton est mono-poids (comme la maquette Tailwind). */
	font-weight: 400 !important;
	text-transform: uppercase;
	/* Aligné titres internes (.flash-ip-chapter__title, etc.) : léger tracking positif */
	letter-spacing: 0.02em;
}

/* Bloc titre section (ex. TOUTES LES / ACTUALITÉS) : interligne serré comme template-front.html */
html.flash-studio h1.text-6xl,
html.flash-studio h2.text-6xl {
	line-height: 1.05;
	padding-top: 0.1em;
}

html.flash-studio h1.text-6xl > .block {
	display: block;
}

/* Contour uniquement : priorité sur toute couleur héritée du thème. */
html.flash-studio .text-outline {
	color: transparent !important;
	-webkit-text-fill-color: rgba(200, 200, 200, 0.2) !important;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 1);
}

/* Titres de contenu (blocs) : interlettrage léger, sans Anton. */
html.flash-studio h4,
html.flash-studio h5,
html.flash-studio h6 {
	letter-spacing: 0.02em;
}

html.flash-studio #content.site-content > .tg-container {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Le thème Flash impose #primary à ~65 % + float : bande blanche à droite (fond .site). */
html.flash-studio #primary.content-area {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
}

/*
 * Header fixe (#masthead.site-header--studio, h-20 = 5rem) : sans marge, le contenu passe sous la barre.
 */
html.flash-studio #content.site-content,
body.flash-singular-studio #content.site-content {
	padding-top: 5rem;
	box-sizing: border-box;
	background-color: #0e0e0e;
}
body.admin-bar html.flash-studio #content.site-content,
body.admin-bar body.flash-singular-studio #content.site-content {
	padding-top: calc(5rem + 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar html.flash-studio #content.site-content,
	body.admin-bar body.flash-singular-studio #content.site-content {
		padding-top: calc(5rem + 46px);
	}
}

/* Le thème impose .site { background:#fff } — fond noir pages internes / Studio. */
body.flash-singular-studio {
	background-color: #0e0e0e;
	color: #f5f5f5;
}
body.flash-singular-studio #page.site,
body.flash-singular-studio .site,
html.flash-studio body.flash-singular-studio #page.site,
html.flash-studio body.flash-singular-studio .site {
	background-color: #0e0e0e !important;
}
/* Accueil statique : hero plein écran (front-page.php), pas de bandeau sous le header. */
html.flash-studio body.home.front-page #content.site-content {
	padding-top: 0;
}

/*
 * Listes « Stages » / « Actualités » et archives CPT : les sections ont déjà pt-28 (Tailwind).
 * Évite un double décalage sous le header.
 */
html.flash-studio body.post-type-archive #content.site-content,
html.flash-studio body[class*="page-template-page-stages"] #content.site-content,
html.flash-studio body[class*="page-template-page-actualites"] #content.site-content {
	padding-top: 0 !important;
}

@media (max-width: 1200px) {
	html.flash-studio #content.site-content > .tg-container {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * Bordures circulaires maquette : le reset global Flash impose border:0 sur a/div/button,
 * ce qui annule souvent border + border-* Tailwind. Ces classes forcent l’anneau visible.
 */
html.flash-studio .studio-ring,
body.flash-singular-studio .studio-ring {
	box-sizing: border-box !important;
	border: 1px solid rgba(245, 245, 245, 0.28) !important;
	border-radius: 9999px !important;
	background-clip: padding-box;
}
html.flash-studio a.studio-ring,
html.flash-studio button.studio-ring,
body.flash-singular-studio a.studio-ring,
body.flash-singular-studio button.studio-ring {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/*
 * Formulaire contact (Contact Form 7, etc.) — même rendu que la maquette template-front.
 * Le reset Flash annule les bordures des champs : on les redéfinit ici (pas uniquement Tailwind).
 */
html.flash-studio .studio-contact-form .wpcf7 {
	color: #f5f5f5;
}
html.flash-studio .studio-contact-form .wpcf7-form {
	margin: 0;
}
html.flash-studio .studio-contact-form .wpcf7-form > p {
	margin: 0 0 2rem;
}
html.flash-studio .studio-contact-form .wpcf7-form > p:last-of-type {
	margin-bottom: 0;
}
html.flash-studio .studio-contact-form .wpcf7-form label,
html.flash-studio .studio-contact-form .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
html.flash-studio .studio-contact-form .wpcf7-form label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.4);
	margin-bottom: 0.5rem;
}
html.flash-studio .studio-contact-form .wpcf7-form .wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.25rem;
	padding: 1rem 0;
	border: 0 !important;
	border-bottom: 1px solid rgba(245, 245, 245, 0.2) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #f5f5f5 !important;
	outline: none;
	transition: border-color 0.2s ease;
	font-size: 1rem;
	line-height: 1.5;
}
html.flash-studio .studio-contact-form .wpcf7-form .wpcf7-form-control:focus {
	border-bottom-color: #f5f5f5 !important;
}
html.flash-studio .studio-contact-form .wpcf7-form textarea.wpcf7-form-control {
	min-height: 6rem;
	resize: vertical;
}
html.flash-studio .studio-contact-form .wpcf7-form select.wpcf7-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(245,245,245,0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 1.25rem;
	padding-right: 2rem;
	font-family: inherit;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	color: #f5f5f5 !important;
}
html.flash-studio .studio-contact-form .wpcf7-form select.wpcf7-form-control option {
	background-color: #0e0e0e;
	color: #f5f5f5;
	font-weight: 400;
}
html.flash-studio .studio-contact-form .wpcf7-form input[type="submit"],
html.flash-studio .studio-contact-form .wpcf7-form button[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 1.5rem 1rem;
	border: 1px solid rgba(14, 14, 14, 0.28) !important;
	border-radius: 0 !important;
	background: #f5f5f5 !important;
	color: #0e0e0e !important;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.flash-studio .studio-contact-form .wpcf7-form input[type="submit"]:hover,
html.flash-studio .studio-contact-form .wpcf7-form button[type="submit"]:hover {
	background: #d4d4d4 !important;
	border-color: rgba(14, 14, 14, 0.5) !important;
}
html.flash-studio .studio-contact-form .wpcf7-form input[type="submit"]:focus-visible,
html.flash-studio .studio-contact-form .wpcf7-form button[type="submit"]:focus-visible {
	outline: none;
	border-color: rgba(14, 14, 14, 0.85) !important;
	box-shadow: 0 0 0 3px rgba(14, 14, 14, 0.18);
}
html.flash-studio .studio-contact-form .wpcf7-not-valid-tip {
	font-size: 0.75rem;
	margin-top: 0.35rem;
	color: #f87171;
}
html.flash-studio .studio-contact-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem;
	border: 1px solid rgba(245, 245, 245, 0.2) !important;
	font-size: 0.875rem;
}
html.flash-studio .studio-contact-form .wpcf7-spinner {
	margin: 0 0.5rem;
}
/* Grille 2 colonnes (nom / email) : classe sur un conteneur dans le modèle CF7 */
html.flash-studio .studio-contact-form .studio-cf7-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	html.flash-studio .studio-contact-form .studio-cf7-grid {
		grid-template-columns: 1fr 1fr;
	}
}
html.flash-studio .studio-contact-form .studio-cf7-grid > p {
	margin: 0 !important;
}

/*
 * Variante claire (fond blanc / texte noir) pour le bloc formulaire contact
 * sur fond sombre (accueil + page contact).
 */
html.flash-studio .flash-contact-form-wrap--light {
	/* Clair mais pas blanc pur : blanc cassé légèrement grisé */
	background: #f2f2f2 !important;
	color: #0e0e0e !important;
	border-color: rgba(14, 14, 14, 0.18) !important;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form,
html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7 {
	color: #0e0e0e !important;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-form label {
	color: rgba(14, 14, 14, 0.55) !important;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-form .wpcf7-form-control {
	background: transparent !important;
	color: #0e0e0e !important;
	border-bottom-color: rgba(14, 14, 14, 0.25) !important;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-form .wpcf7-form-control:focus {
	border-bottom-color: rgba(14, 14, 14, 0.9) !important;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-form .wpcf7-form-control::placeholder {
	color: rgba(14, 14, 14, 0.45);
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-form select.wpcf7-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(14,14,14,0.55)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0 center !important;
	background-size: 1.25rem !important;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-form select.wpcf7-form-control option {
	background-color: #f2f2f2;
	color: #0e0e0e;
}

html.flash-studio .flash-contact-form-wrap--light .studio-contact-form .wpcf7-response-output {
	border-color: rgba(14, 14, 14, 0.15) !important;
	color: rgba(14, 14, 14, 0.9) !important;
}

/* Liste actualités — pagination */
html.flash-studio .flash-archive-pagination .navigation.pagination {
	margin: 0;
}
html.flash-studio .flash-archive-pagination .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
}
html.flash-studio .flash-archive-pagination .navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border: 1px solid rgba(245, 245, 245, 0.25);
	color: #f5f5f5;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
html.flash-studio .flash-archive-pagination .navigation.pagination a.page-numbers:hover,
html.flash-studio .flash-archive-pagination .navigation.pagination .page-numbers.current {
	background: #f5f5f5;
	color: #0e0e0e;
	border-color: #f5f5f5;
}
html.flash-studio .flash-archive-pagination .navigation.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: rgba(245, 245, 245, 0.35);
	min-width: auto;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}
html.flash-studio .flash-archive-pagination .navigation.pagination .prev,
html.flash-studio .flash-archive-pagination .navigation.pagination .next {
	min-width: 2.75rem;
	padding-left: 0.35rem;
	padding-right: 0.35rem;
}

/* Page liste actualités (page-actualites, archives articles) — charte Studio + lisibilité */
html.flash-studio #primary .site-main.flash-archive-studio {
	background-color: #0a0a0a;
}

html.flash-studio .flash-archive-studio__intro {
	color: rgba(245, 245, 245, 0.88) !important;
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: 36rem;
}

html.flash-studio .flash-archive-studio__intro.archive-description {
	color: rgba(245, 245, 245, 0.82) !important;
}

html.flash-studio .flash-archive-studio__back {
	color: rgba(245, 245, 245, 0.55);
}

html.flash-studio .flash-archive-studio__list {
	border-top: 1px solid rgba(245, 245, 245, 0.06);
}

html.flash-studio main.flash-archive-studio .flash-archive-studio__excerpt {
	color: rgba(245, 245, 245, 0.82) !important;
}

@media (min-width: 768px) {
	html.flash-studio .flash-archive-studio__card-link {
		border-radius: 4px;
		transition: background-color 0.2s ease, box-shadow 0.2s ease;
		padding: 1.25rem;
		margin: -1.25rem;
	}
	html.flash-studio .flash-archive-studio__card-link:hover {
		background-color: rgba(245, 245, 245, 0.03);
		box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.1);
	}
}

/* Pagination actualités : survol gris charte (cohérent avec #f5f5f599) */
html.flash-studio .flash-archive-pagination .navigation.pagination a.page-numbers:hover {
	background: rgba(245, 245, 245, 0.08) !important;
	color: rgb(245 245 245 / 0.88) !important;
	border-color: rgba(245, 245, 245, 0.35) !important;
}

/* Parallaxe (JS) */
.flash-parallax,
.flash-hero-parallax {
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	transform-origin: center;
}

/* Hero: on garde un léger zoom même avant le 1er tick JS */
.flash-hero-parallax {
	/* Fallback "sans Tailwind" : l'image hero doit couvrir la section */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: translate3d(0, 0, 0) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.flash-parallax,
	.flash-hero-parallax {
		transform: none !important;
	}
}

/* Reveal au scroll (JS) */
.flash-reveal {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 650ms ease;
	will-change: transform, opacity;
}
.flash-reveal.flash-reveal--from-left {
	transform: translate3d(-36px, 10px, 0);
}
.flash-reveal.flash-reveal--from-right {
	transform: translate3d(36px, 10px, 0);
}
.flash-reveal.flash-reveal--from-up {
	transform: translate3d(0, 22px, 0);
}
.flash-reveal.flash-reveal--in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
/**
 * Images de remplacement (upload par défaut) : object-fit contain évite de trop agrandir
 * un fichier modeste en résolution (effet flou / pixélisation fréquent avec cover).
 */
img.flash-default-upload-img {
	object-fit: contain !important;
	object-position: center;
	background-color: #0e0e0e;
}

@media (prefers-reduced-motion: reduce) {
	.flash-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/*
 * Galerie photos — correctif inline-width WordPress.
 *
 * Le shortcode [gallery columns="3"] injecte style="width:33%" sur chaque .gallery-item.
 * En layout CSS Grid (mobile 1 col, tablette 2 col, desktop 3 col), ce % est calculé
 * par rapport au conteneur GRID entier, pas à la colonne — d'où les vignettes trop étroites.
 * On force width:auto pour que le grid décide (comportement attendu pour un grid item).
 *
 * Portée : toutes les pages html.flash-studio (= tout le site).
 */
html.flash-studio .gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	clear: both;
}
@media (min-width: 640px) {
	html.flash-studio .gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	html.flash-studio .gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}
html.flash-studio .gallery .gallery-item {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: inherit;
}
html.flash-studio .gallery .gallery-item img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}