/* ==== Espacements : marges de page et de sections (fluides de 393 à 1440 px) ==== */
:root {
	--pad-y: clamp(3rem, 1.8739rem + 4.5845vw, 6rem);
	--pad-y-sm: clamp(2rem, 1.2493rem + 3.0564vw, 4rem);
	--pad-x: clamp(1rem, -0.5014rem + 6.1127vw, 5rem);
}

/* ==== Sections : marge par défaut des sections principales (éditeur, classe ou CSS de l'élément l'emportent) ==== */
.e-con:where(:is(.elementor, .elementor > .elementor-section-wrap):not([data-elementor-type="header"], [data-elementor-type="footer"], [data-elementor-type="loop-item"]) > .e-parent:not(:has(> .elementor-widget-template))) {
	--container-default-padding-top: var(--pad-y);
	--container-default-padding-right: var(--pad-x);
	--container-default-padding-bottom: var(--pad-y);
	--container-default-padding-left: var(--pad-x);
}
.e-con:where(.e-parent.pad-sm) {
	--container-default-padding-top: var(--pad-y-sm);
	--container-default-padding-bottom: var(--pad-y-sm);
}

/* ==== Sections : pleine largeur d'un côté, l'autre aligné sur la largeur de contenu (passe devant les côtés réglés dans l'éditeur) ==== */
.elementor .elementor-element.e-con:is(.pad-xr0, .pad-xl0) {
	--content-width: 100%;
	overflow-x: clip;
	--bord-aligne: calc(var(--pad-x) + max(0px, (100% - 2 * var(--pad-x) - var(--container-max-width, 1140px)) / 2));
}
.elementor .elementor-element.e-con.pad-xr0 {
	--padding-left: var(--bord-aligne);
	--padding-right: 0px;
}
.elementor .elementor-element.e-con.pad-xl0 {
	--padding-left: 0px;
	--padding-right: var(--bord-aligne);
}
@media (max-width: 1024px) {
	.elementor .elementor-element.e-con:is(.pad-xr0, .pad-xl0) {
		--padding-left: var(--pad-x);
		--padding-right: var(--pad-x);
	}
}

/* ==== Sections : classes de marge (pad-x, pad-y, pad-sm) ==== */
.e-con:where(.pad-x) {
	--padding-left: var(--pad-x);
	--padding-right: var(--pad-x);
}
.e-con:where(.pad-y) {
	--padding-top: var(--pad-y);
	--padding-bottom: var(--pad-y);
}
.e-con:where(.pad-sm.pad-y) {
	--padding-top: var(--pad-y-sm);
	--padding-bottom: var(--pad-y-sm);
}

/* ==== Base ==== */
:root {
	--entete-h: 84px;
}
@media (max-width: 1024px) {
	:root {
		--entete-h: 72px;
	}
}
html {
	scroll-padding-top: calc(var(--barre-admin) + var(--entete-visible) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, video, canvas {
	max-width: 100%;
	height: auto;
	display: block;
}
.elementor-icon-wrapper {
	line-height: 0;
}
::marker {
	color: var(--e-global-color-primary);
	font-weight: 600;
}
::selection {
	background: var(--e-global-color-primary);
	color: var(--e-global-color-fond-1);
}
b, strong, .elementor-inline-editing b {
	font-weight: 700;
}
ul, ol {
	margin-bottom: 15px;
}
blockquote {
	border-left: 3px solid var(--e-global-color-primary);
	padding-left: 20px;
}
.elementor-swiper-button-prev svg {
	transform: scaleX(-1);
}

/* ==== Textes : retours à la ligne de la maquette (jamais rééquilibrés ni coupés d'un trait d'union), seul un mot plus long que la ligne est coupé ==== */
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
	overflow-wrap: break-word;
}
.elementor-widget-text-editor :is(p, ul, ol):last-child {
	margin-block-end: 0;
}

/* ==== Couleurs et opacités (classes utilitaires) ==== */
.color-primary {
	color: var(--e-global-color-primary) !important;
}
.color-secondary {
	color: var(--e-global-color-secondary) !important;
}
.color-accent {
	color: var(--e-global-color-accent) !important;
}
.color-text {
	color: var(--e-global-color-text) !important;
}
.op1 { opacity: 0.1; } .op2 { opacity: 0.2; } .op3 { opacity: 0.3; } .op4 { opacity: 0.4; } .op5 { opacity: 0.5; } .op6 { opacity: 0.6; } .op7 { opacity: 0.7; } .op8 { opacity: 0.8; } .op9 { opacity: 0.9; }
@media (max-width: 767px) {
	.mob-op1 { opacity: 0.1; } .mob-op2 { opacity: 0.2; } .mob-op3 { opacity: 0.3; } .mob-op4 { opacity: 0.4; } .mob-op5 { opacity: 0.5; } .mob-op6 { opacity: 0.6; } .mob-op7 { opacity: 0.7; } .mob-op8 { opacity: 0.8; } .mob-op9 { opacity: 0.9; }
}

/* ==== Icônes au trait : même épaisseur à toutes les tailles ==== */
:root {
	--icone-trait: 1.5px;
}
:is(.elementor-icon, .elementor-icon-list-icon, .elementor-button-icon, .elementor-icon-box-icon) svg :is([stroke], [stroke] *) {
	stroke-width: var(--icone-trait);
	vector-effect: non-scaling-stroke;
}

/* ==== Focus visible ==== */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 3px;
}
.sombre :where(a, button):focus-visible {
	outline-color: var(--e-global-color-secondary);
}

/* ==== Listes à coche (classe liste-coche sur le widget) ==== */
.liste-coche ul:not([class*="elementor-editor"]) {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--gap-liste, 12px);
}
.liste-coche ul:not([class*="elementor-editor"]) > li {
	position: relative;
	padding-left: 32px;
}
.liste-coche ul:not([class*="elementor-editor"]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.8em - 8.5px);
	width: 20px;
	height: 17px;
	background: currentColor;
	mask: var(--puce-liste, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 10.5l6 6L21 3.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E")) no-repeat center / contain;
}

/* ==== Colonnes collantes (classe colonne-collante) ==== */
:root {
	--entete-visible: var(--entete-h);
	--barre-admin: var(--wp-admin--admin-bar--height, 0px);
}
/* WordPress lets its admin bar scroll away under 600 px, over the fixed header: kept fixed, Elementor sticky offsets follow it. */
@media (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}
}
.entete-cache {
	--entete-visible: 0px;
}
.e-con.colonne-collante {
	position: sticky;
	top: calc(var(--entete-visible) + var(--haut-collant, 40px));
	max-height: calc(100vh - var(--entete-visible) - var(--haut-collant, 40px) - 24px);
	overflow-y: auto;
	z-index: 1;
	transition: top 0.3s ease;
}

/* ==== Onglets qui suivent le défilement (classe onglets-defilement, réglée par js/base.js) ==== */
.onglets-course {
	display: none;
}
.onglets-defilement-actif > .elementor-widget-n-tabs {
	position: sticky;
	top: calc(var(--barre-admin) + var(--entete-visible));
	z-index: 1;
	transition: top 0.3s ease;
}
.onglets-defilement-actif > .onglets-course {
	display: block;
	flex: none;
	width: 100%;
	height: calc((var(--onglets-nombre) - 1) * 60vh);
}

/* ==== En-tête : masqué en descendant, visible en remontant (classe entete-auto sur l'en-tête collant) ==== */
.entete-auto:not(.elementor-sticky__spacer) {
	transition: transform 0.3s ease;
}
.entete-cache .entete-auto:not(.elementor-sticky__spacer) {
	transform: translateY(-100%);
}
.collant-suit-entete.elementor-sticky--active {
	transition: transform 0.3s ease, opacity 0.3s, visibility 0.3s;
	transform: translateY(calc(var(--decalage-entete, 0px) + var(--decalage-supplementaire, 0px)));
}
.entete-cache {
	--decalage-entete: calc(-1 * var(--entete-h));
}
@media (prefers-reduced-motion: reduce) {
	.entete-auto, .collant-suit-entete {
		transition: none !important;
	}
}

/* ==== Panneau hors-canevas : ouvert au doigt ou à la souris, le focus va au panneau lui-même (js/base.js), sans anneau ==== */
.e-off-canvas__content:focus {
	outline: none;
}

/* ==== Accordéons : icône au trait colorée selon l'état ; classe accordeon-plus, un seul « + » qui pivote en croix ==== */
.e-n-accordion-item-title-icon span {
	color: var(--n-accordion-icon-normal-color);
}
.e-n-accordion-item:not([open]):hover > .e-n-accordion-item-title .e-n-accordion-item-title-icon span {
	color: var(--n-accordion-icon-hover-color);
}
.e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon span {
	color: var(--n-accordion-icon-active-color);
}
/* The [open] selectors match those of Elementor, whose sheet may print after this one. */
.elementor-widget-n-accordion.accordeon-plus .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened,
.elementor-widget-n-accordion.accordeon-plus .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened {
	display: none;
}
.elementor-widget-n-accordion.accordeon-plus .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed {
	display: flex;
	transition: transform 0.25s ease;
}
.elementor-widget-n-accordion.accordeon-plus .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed {
	display: flex;
	transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-n-accordion.accordeon-plus .e-n-accordion-item-title-icon .e-closed {
		transition: none;
	}
}

/* ==== Animations d'apparition automatiques (js/animations.js ; supprimer les deux si le site utilise GSAP) ==== */
:root {
	--anim-duree: 0.7s;
	--anim-decalage: 90ms;
	--anim-distance: 18px;
	--anim-courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.anim-pret .anim-el {
	opacity: 0;
	transform: translate3d(0, var(--anim-distance), 0);
}
.anim-actif .anim-el {
	transition: opacity var(--anim-duree) var(--anim-courbe), transform var(--anim-duree) var(--anim-courbe);
	transition-delay: calc(var(--anim-i, 0) * var(--anim-decalage));
}
.anim-pret .anim-vu .anim-el {
	opacity: 1;
	transform: none;
}

/* ==== Animation native « Fondu vers le haut » d'Elementor, plus courte et plus douce ==== */
@keyframes entree-monte {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.elementor-element.animated.fadeInUp {
	animation-name: entree-monte;
	animation-duration: 0.7s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==== Bandes défilantes (classe defilant ; js/base.js répète la liste, le site donne l'aspect des éléments) ==== */
.defilant {
	position: relative;
	overflow: hidden;
}
.defilant :is(ul, .defilant-piste) {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}
.defilant.en-mouvement :is(ul, .defilant-piste) {
	animation: defile var(--defile-duree, 60s) linear infinite;
}
.defilant.vers-droite.en-mouvement :is(ul, .defilant-piste) {
	animation-direction: reverse;
}
.defilant:is(:hover, :focus-within, .est-arrete) :is(ul, .defilant-piste) {
	animation-play-state: paused;
}
.defilant-pause {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 8px 12px;
	border: 0;
	background: var(--e-global-color-fond-1);
	color: var(--e-global-color-text);
}
.defilant-pause:not(:focus-visible) {
	clip-path: inset(50%);
	white-space: nowrap;
}
@keyframes defile {
	to {
		transform: translateX(calc(-1 * var(--defile-largeur, 0px)));
	}
}

/* ==== Vidéos de fond (js/base.js ajoute le bouton de pause, en bas à droite de la section) ==== */
/* The kit styles every button (.elementor-kit-N button and its states): the parent and the tag win over it. */
:is(.e-con, .elementor-section) > button.video-pause {
	position: absolute;
	right: var(--pad-x, 24px);
	bottom: 24px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--e-global-color-fond-1) 60%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--e-global-color-text) 45%, transparent);
	color: var(--e-global-color-fond-1);
	cursor: pointer;
}
:is(.e-con, .elementor-section) > button.video-pause:is(:hover, :focus) {
	border-color: var(--e-global-color-fond-1);
	background: color-mix(in srgb, var(--e-global-color-text) 70%, transparent);
	color: var(--e-global-color-fond-1);
}
:is(.e-con, .elementor-section) > button.video-pause:focus-visible {
	outline-color: var(--e-global-color-fond-1);
}
.video-pause::before,
.video-pause::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 14px;
	background: currentColor;
	transform: translate(calc(-50% - 4px), -50%);
}
.video-pause::after {
	transform: translate(calc(-50% + 4px), -50%);
}
.video-pause.est-arretee::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent currentColor;
	background: none;
	transform: translate(-40%, -50%);
}
.video-pause.est-arretee::after {
	display: none;
}

/* ==== Formulaires (couleurs du kit) ==== */
::placeholder {
	opacity: 1;
}
.elementor-field-group .elementor-field-textual:focus {
	box-shadow: none;
}
.elementor-field-option input[type="checkbox"], .elementor-field-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}
.elementor-field-option input ~ label::before {
	content: "";
	display: inline-block;
	position: relative;
	top: 4px;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	border: 2px solid var(--e-global-color-primary);
	background: var(--e-global-color-fond-1);
	box-sizing: border-box;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.elementor-field-option input[type="radio"] ~ label::before {
	border-radius: 50%;
}
.elementor-field-option input[type="radio"]:checked ~ label::before {
	background-color: var(--e-global-color-primary);
	box-shadow: inset 0 0 0 3px var(--e-global-color-fond-1);
}
.elementor-field-option input[type="checkbox"] ~ label::before {
	border-radius: 4px;
}
.elementor-field-option input[type="checkbox"]:checked ~ label::before {
	background-color: var(--e-global-color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
}
.elementor-field-option input:focus-visible ~ label::before {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}
.elementor-field-type-acceptance .elementor-field-option label {
	display: inline-flex !important;
	align-items: flex-start;
	margin-bottom: 5px;
}
.elementor-field-type-acceptance .elementor-field-option label::before {
	min-width: 18px;
	top: calc(0.75em - 9px) !important;
}
.elementor-field-type-select .elementor-field-textual {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
}
.elementor-field-type-select .select-caret-down-wrapper {
	display: none;
}
/* Desktop list drawn by js/base.js, the same in every browser; a phone or tablet keeps its system picker. The site sets
   --liste-fond, --liste-texte and --liste-actif when the field is not on the light background of the kit. */
.liste-choix {
	position: relative;
}
.liste-choix select {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}
.liste-choix-bouton {
	display: flex;
	align-items: center;
	text-align: start;
	cursor: pointer;
}
.liste-choix-bouton > span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.liste-choix .liste-choix-bouton.liste-choix-copie {
	border-width: var(--champ-trait);
	border-style: var(--champ-style);
	border-radius: var(--champ-rayon);
}
.liste-choix .liste-choix-bouton.liste-choix-copie:not(:focus) {
	background-color: var(--champ-fond);
	border-color: var(--champ-bord);
}
.liste-choix-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	border: 1px solid var(--liste-actif, var(--e-global-color-primary));
	border-radius: 4px;
	background: var(--liste-fond, var(--e-global-color-fond-1));
	color: var(--liste-texte, var(--e-global-color-text));
	box-shadow: 0 8px 24px color-mix(in srgb, var(--e-global-color-text) 18%, transparent);
}
.liste-choix-options.vers-haut {
	top: auto;
	bottom: calc(100% + 4px);
}
.liste-choix-options[hidden] {
	display: none;
}
.liste-choix-options li {
	padding: 10px 16px;
	cursor: pointer;
}
.liste-choix-options li[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
}
.liste-choix-options li.est-vise {
	background: color-mix(in srgb, var(--liste-actif, var(--e-global-color-primary)) 15%, transparent);
}
.liste-choix-options li[aria-selected="true"] {
	background: var(--liste-actif, var(--e-global-color-primary));
	color: var(--e-global-color-fond-1);
}
.elementor-field-type-upload input[type="file"] {
	border: 0 !important;
}
.elementor-field-type-upload input[type="file"]::file-selector-button {
	background: var(--e-global-color-primary);
	border: 0;
	padding: 8px 16px;
	margin-right: 12px;
	font-size: var(--e-global-typography-texte-petit-font-size);
	font-weight: 600;
	color: var(--e-global-color-fond-1);
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.elementor-field-type-upload input[type="file"]::file-selector-button:hover {
	opacity: 0.85;
}
.elementor-field-group .elementor-field-textual[aria-invalid="true"] {
	border-color: var(--e-global-color-erreur, #b3261e);
}