/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 21 2026 | 18:58:25 */
body.page-id-1009 {
		/* =========================
		 NOUVELLES COULEURS
		 ========================= */
		--noir1:      #000;
		--noir2:      #191919;
		--rouge:      #cc0000;
		--gris-pale:  #D8D8D8;
		--gris-fonce: #7A7D84;
		--blanc:     #FFFFFF;

		/* =========================
		 POUR HEADER
		 ========================= */
	    --header-h: clamp(86px, 7vw, 118px);
	    --header-w: min(58vw, 920px);
	    --page-gap: clamp(18px, 2.2vw, 36px);
	    --shape-line: 1px;
		--header-join-r: var(--hdr-r);
	    --header-line: 1px;
	    --header-bg: var(--noir1);
	    --header-stroke: var(--rouge);

	
	#uicore-page {border-color: var(--noir1) !important;}
	.uicore-reveal .uicore-post-info, .ui-simple-creative, .uicore-fade-light .uicore-zoom-wrapper, .content-area, main.site-main, .uicore-body-content>footer, .uicore-main-background,
	#uicore-page, footer#uicore-tb-footer {
		background-color: var(--noir1) !important;
		background: var(--noir1) !important;
	}
	

	/* STYLE DE POLICE */
	h1, .h1, .h1 p { 
		font-family:var(--font) !important; 
		font-weight:var(--fw-regular) !important; 
		font-size:var(--fs-h1) !important; 
		line-height:var(--lh-h1) !important; 
	}
	h2, .h2, .h2 p { 
		font-family:var(--font) !important; 
		font-weight:var(--fw-regular) !important; 
		font-size:var(--fs-h2) !important; 
		line-height:var(--lh-h2) !important; 
	}
	h3, .h3, .h3 p { 
		font-family:var(--font) !important; 
		font-weight:var(--fw-regular) !important; 
		font-size:var(--fs-h3) !important; 
		line-height:var(--lh-h3) !important; 
	}
	h4, .h4, .h4 p { 
		font-family:var(--font) !important; 
		font-weight:var(--fw-semibold) !important; 
		font-size:var(--fs-h4) !important; 
		line-height:var(--lh-h4) !important; 
	}
	p, body, .p { 
		font-family: var(--font) !important; 
		font-weight: var(--fw-regular) !important; 
		font-size: var(--fs-body-1) !important; 
		line-height: var(--lh-body-1) !important; 
	}
	.bdt-ep-advanced-heading-sub-title-content {
		text-transform: uppercase !important;
		font-family: var(--font) !important; 
		font-weight: var(--fw-medium) !important; 
		font-size: var(--fs-body-2) !important; 
		line-height: var(--lh-body-2) !important; 
	}

	/* =========================
	   COULEURS TEXTE — UTILITAIRES
	   ========================= */
	/* Sur une section / colonne / conteneur parent */
	.text-blanc,
	.text-blanc h1,
	.text-blanc h2,
	.text-blanc h3,
	.text-blanc h4,
	.text-blanc h1.bdt-ep-advanced-heading-title,
	.text-blanc h2.bdt-ep-advanced-heading-title,
	.text-blanc h3.bdt-ep-advanced-heading-title,
	.text-blanc h4.bdt-ep-advanced-heading-title,
	.text-blanc .bdt-ep-advanced-heading-title,
	.text-blanc .bdt-ep-advanced-heading-title *{
	  color: var(--blanc) !important;
	}


	.text-noir,
	.text-noir h1,
	.text-noir h2,
	.text-noir h3,
	.text-noir h4,
	.text-noir h1.bdt-ep-advanced-heading-title,
	.text-noir h2.bdt-ep-advanced-heading-title,
	.text-noir h3.bdt-ep-advanced-heading-title,
	.text-noir h4.bdt-ep-advanced-heading-title,
	.text-noir .bdt-ep-advanced-heading-title,
	.text-noir .bdt-ep-advanced-heading-title *{
	  color: var(--noir1) !important;
	}

	.text-rouge,
	.text-rouge h1,
	.text-rouge h2,
	.text-rouge h3,
	.text-rouge h4,
	.text-rouge h1.bdt-ep-advanced-heading-title,
	.text-rouge h2.bdt-ep-advanced-heading-title,
	.text-rouge h3.bdt-ep-advanced-heading-title,
	.text-rouge h4.bdt-ep-advanced-heading-title,
	.text-rouge .bdt-ep-advanced-heading-title,
	.text-rouge .bdt-ep-advanced-heading-title *{
	  color: var(--rouge) !important;
	}

	.text-gris-bleu,
	.text-gris-bleu h1,
	.text-gris-bleu h2,
	.text-gris-bleu h3,
	.text-gris-bleu h4,
	.text-gris-bleu h1.bdt-ep-advanced-heading-title,
	.text-gris-bleu h2.bdt-ep-advanced-heading-title,
	.text-gris-bleu h3.bdt-ep-advanced-heading-title,
	.text-gris-bleu h4.bdt-ep-advanced-heading-title,
	.text-gris-bleu .bdt-ep-advanced-heading-title,
	.text-gris-bleu .bdt-ep-advanced-heading-title *{
	  color: var(--gris-pale) !important;
	}

	.text-gris-fonce,
	.text-gris-fonce h1,
	.text-gris-fonce h2,
	.text-gris-fonce h3,
	.text-gris-fonce h4,
	.text-gris-fonce h1.bdt-ep-advanced-heading-title,
	.text-gris-fonce h2.bdt-ep-advanced-heading-title,
	.text-gris-fonce h3.bdt-ep-advanced-heading-title,
	.text-gris-fonce h4.bdt-ep-advanced-heading-title,
	.text-gris-fonce .bdt-ep-advanced-heading-title,
	.text-gris-fonce .bdt-ep-advanced-heading-title *{
	  color: var(--gris-fonce) !important;
	}



	/* =========================
	   BACKGROUNDS — UTILITAIRES
	   ========================= */
	.bg-noir {background-color: var(--noir1) !important;}
	.bg-rouge {background-color: var(--rouge) !important;}
	.bg-blanc {background-color: var(--blanc) !important;}
	.bg-gris-bleu {background-color: var(--gris-pale) !important;}
	.bg-gris-fonce {background-color: var(--gris-fonce) !important;}

	/* === TÉMOIGNAGES === */
	.temoignage {background-color: var(--blanc); border-radius: var(--hdr-r);}
	.mason1, .mason2 {width: 49% !important;}
	.mason1 {margin-right: 2% !important;}
	.mason3 {width: 100%;}
	.elementor-widget-bdt-review-card p {font-size: var(--fs-body-2) !important; line-height: var(--lh-body-2) !important;}

	@media screen and (max-width: 1024px) {
		.mason1, .mason2 {width: 100% !important;}
		.mason1 {margin-right: 0% !important;}
	}
	
	/* ACCORDÉON - FAQ */
	.e-n-accordion-item[open] > .e-n-accordion-item-title {border-bottom-color: var(--noir1) !important;}
	span.e-n-accordion-item-title-icon {
		background: var(--rouge);
		padding: 8px;
		border-radius: 100%;
	}
	/* Chaque item de l'accordéon */
	.e-n-accordion-item {border-radius: var(--hdr-r) !important; overflow: hidden;}
	
	/* Bandeau du titre */
	.e-n-accordion-item > .e-n-accordion-item-title{border-radius: var(--hdr-r) !important;	}
	h4.e-n-accordion-item-title-text {
		font-weight: 300 !important;
		text-transform: uppercase;
		color: white;
		font-size: calc(var(--fs-h4) / 1.25) !important;
	}
	.e-con.e-flex>.e-con-inner .elementor-widget-text-editor {color: var(--gris-fonce);}

	/* Quand l’item est ouvert, seuls les coins du haut restent sur le titre */
	.e-n-accordion-item[open] > .e-n-accordion-item-title{
	  border-radius:
		var(--hdr-r)
		var(--hdr-r)
		0
		0 !important;
	}

	/* Contenu ouvert */
	.e-n-accordion-item[open] > [role="region"]{
	  border-radius:
		0
		0
		var(--hdr-r)
		var(--hdr-r) !important;
	}
	/* === FIN ACCORDÉON - FAQ === */



	/* ================================
	   HEADER
	   ================================ */
		@media (min-width: 1025px) {
			.uicore-body-content div#uicore-page div#wrapper-navbar {margin-left: -15px !important;}
			.uicore-navbar {
				left: unset !important;
				transform:unset !important;
			}
			.uicore-body-content div#uicore-page .uicore-header-wrapper nav.uicore.uicore-container {
				padding-left: var(--hdr-r) !important;
			}
			#wrapper-navbar {
	        margin: 0px!important;
			/*max-width: min(100%, min(95%, var(--ui-container-size), var(--ui-container-size)));
			--uicore-header--wide-spacing: 21px;*/
			}

		}
	.uicore-nav-menu .uicore-nav .uicore-menu>.menu-item>a {
		color: var(--gris-fonce) !important;
	}
	.uicore-nav-menu .uicore-nav .uicore-menu>.menu-item>a:hover {
		color: var(--rouge) !important;
	}

	@media screen and (max-width: 1024px) {
		/*div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper::before, div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper::after {display: none !important;}*/
		.uicore-ham, #mini-nav .uicore-ham {color: var(--rouge) !important;}
		.uicore-navigation-wrapper .uicore-menu-container ul .menu-item:not(.uicore-visible) {
			opacity: 1 !important;
			transform: unset !important;
		}
	}


	/* =========================
	   BASE HEADER
	   ========================= */
	/* ÉTAT INITIAL */
		div[data-uils="header"]#wrapper-navbar{
		  position: absolute !important;

		  top: -10px !important/*var(--page-gap)*/;
		  left: var(--page-gap);

		  z-index: 100;

		  width: var(--header-w) !important;
		  max-width: none !important;

		  background: transparent !important;
		  pointer-events: none;
		}

		/* Le vrai bloc visible */
		div[data-uils="header"]#wrapper-navbar
		.uicore-header-wrapper{
		  position: relative;

		  width: 100%;
		  min-height: var(--header-h);

		  display: flex;
		  align-items: center;

		  margin: 0 !important;
		  padding: 0 !important;

		  background-color: var(--noir1) !important;

		  /*
		   * Le bord inférieur devient la partie gauche
		   * du contour du hero.
		   */
		  border: 0 !important;
		  border-bottom:
			var(--shape-line)
			solid
			var(--rouge) !important;

		  border-right:
			var(--shape-line)
			solid
			var(--rouge) !important;

		  border-radius:
			0
			0
			var(--hdr-r)
			0 !important;

		  overflow: visible !important;
		  pointer-events: auto;
		}


	/* NAVIGATION INTÉRIEURE */
	#wrapper-navbar
	.uicore-header-wrapper
	nav.uicore-container{
	  width: 100% !important;
	  max-width: none !important;
	  min-height: var(--header-h);

	  display: flex;
	  align-items: center;
	  justify-content: space-between;

	  padding:
		clamp(18px, 2vw, 30px)
		clamp(24px, 3vw, 52px) !important;

	  margin: 0 !important;
	}

	/* Logo */
	#wrapper-navbar
	.uicore-branding{
	  flex: 0 0 auto;
	}

	#wrapper-navbar
	.uicore-branding img{
	  width: clamp(190px, 16vw, 290px) !important;
	  height: auto !important;
	}
	#wrapper-navbar:not(.uicore-scrolled)
	.uicore-menu > .menu-item > a{
	  color: var(--blanc) !important;
	}

	#wrapper-navbar:not(.uicore-scrolled)
	.uicore-menu > .menu-item > a:hover{
	  color: var(--rouge) !important;
	}

	/* =====================================================
       RACCORDS COURBES DU HEADER — PAGE 1009
       ===================================================== */
	#wrapper-navbar
	.uicore-header-wrapper{
	  position: relative;
	  overflow: visible !important;

	  /*
	   * Ligne sous le menu et ligne à sa droite.
	   * Elles se raccordent aux deux courbes ci-dessous.
	   */
	  border-bottom:
		var(--header-line)
		solid
		var(--header-stroke) !important;

	  border-right:
		var(--header-line)
		solid
		var(--header-stroke) !important;

	  border-radius:
		0
		0
		var(--header-join-r)
		0 !important;
	}

	/* Base commune */
	#wrapper-navbar
	.uicore-header-wrapper::before,
	#wrapper-navbar
	.uicore-header-wrapper::after{
	  content: "";
	  display: block !important;
	  position: absolute;

	  width: calc(var(--header-join-r) + 1px);
	  height: calc(var(--header-join-r) + 1px);

	  pointer-events: none;
	  opacity: 1 !important;
	  z-index: 1;

	  box-shadow: none !important;
	  -webkit-mask: none !important;
	  mask: none !important;
	}
	
	/* COURBE CONCAVE EN BAS À GAUCHE */
	#wrapper-navbar
	.uicore-header-wrapper::before{
	  left: 0;
	  bottom: calc((var(--header-join-r) + 1px) * -1);

	  /*
	   * Centre du cercle : bas-droite.
	   * Cela produit un creux qui descend à gauche du header.
	   */
	  background:
		radial-gradient(
		  circle at 100% 100%,

		  transparent calc(var(--header-join-r) - var(--header-line)),

		  var(--header-stroke)
			calc(var(--header-join-r) - var(--header-line)),

		  var(--header-stroke)
			var(--header-join-r),

		  var(--header-bg)
			calc(var(--header-join-r) + .5px)
		) !important;
	}
	
	/*  COURBE CONCAVE EN HAUT À DROITE */
	#wrapper-navbar
	.uicore-header-wrapper::after{
	  right: calc((var(--header-join-r) + 1px) * -1);
	  top: 0;

	  /*
	   * Centre du cercle : bas-gauche.
	   * Cela raccorde la fin du menu à la partie haute du hero.
	   */
	  background:
		radial-gradient(
		  circle at 0 100%,

		  transparent calc(var(--header-join-r) - var(--header-line)),

		  var(--header-stroke)
			calc(var(--header-join-r) - var(--header-line)),

		  var(--header-stroke)
			var(--header-join-r),

		  var(--header-bg)
			calc(var(--header-join-r) + .5px)
		) !important;
	}


	/* =========================================================
	   ÉLÉMENTS GRAPHIQUES
	   ========================================================= */
		.coins-ronds,
		.elementor-widget-image.coins-ronds img {
			border-radius: var(--hdr-r) !important;
			overflow: hidden;
		}
		.coins-ronds-1 {
			border-top-left-radius: var(--hdr-r) !important;
			border-top-right-radius: var(--hdr-r) !important;
			overflow: hidden;
		}
		.coins-ronds-2 {
			border-bottom-left-radius: var(--hdr-r) !important;
			border-bottom-right-radius: var(--hdr-r) !important;
			overflow: hidden;
		}

		.bdt-fancy-list .flex-wrap {
			background-color: transparent !important;
			border: 1px solid var(--rouge) !important;
			border-radius: 9999px !important;
			margin-bottom: var(--15) !important;
			padding-left: var(--35) !important;
			padding-right: var(--35) !important;
		}
		.bdt-fancy-list .flex-wrap strong {color: var(--rouge);}

		.fancy-list-2 .bdt-fancy-list-group {grid-gap: 0px !important;}
		.fancy-list-2 .bdt-fancy-list .flex-wrap {
			background-color: transparent;
			border-left: 0px solid transparent !important;
			border-right: 0px solid transparent !important;
			border-bottom: 0px solid transparent;
			border-top: 1px solid var(--rouge) !important;
			border-radius: 0px !important;
			margin-bottom: 0px !important;
			padding-left: var(--35) !important;
			padding-right: var(--35) !important;
		}
		.fancy-list-2 .bdt-fancy-list-group li:not(:last-child) .bdt-flex.flex-wrap{
		  border-bottom: none !important;
		}
		.fancy-list-2 .bdt-fancy-list .flex-wrap strong {color: var(--rouge);}
		.fancy-list-2 .bdt-fancy-list-group li:last-child .bdt-flex.flex-wrap{
		  border-bottom: 1px solid var(--rouge) !important; /* ou la valeur que tu veux */
		}

	@media screen and (max-width: 1024px) {
		.bdt-fancy-list .flex-wrap, .fancy-list .bdt-fancy-list .flex-wrap {
			padding-left: calc(var(--35) * 2) !important;
			padding-right: calc(var(--35) * 2) !important;
		}
	}

	/* ========================================================
	   FOOTER
	   ======================================================== */
		.logo-footer {max-width: 410px !important;}
		.d-inline .elementor-widget-wrap.elementor-element-populated {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-end;
			margin-top: auto !important;
			margin-left: auto !important;
			width: inherit;
		}
		.copyright p {
			font-size: var(--fs-body-2) !important;
			line-height: var(--lh-bdy-2) !important;
		}
		.copyright p a {color: var(--blanc) !important;}
		.copyright p a:hover {text-decoration: underline; color: var(--blanc);}

		footer section.c1 {
			border-top-left-radius: var(--hdr-r) !important;
			border-top-right-radius: var(--hdr-r) !important;
			overflow: hidden !important;
		}
		footer section.c3 {
			border-bottom-left-radius: var(--hdr-r) !important;
			border-bottom-right-radius: var(--hdr-r) !important;
			overflow: hidden !important;
		}


	/* =========================================================
	   BTN PILL + PASTILLE (Elementor button)
	   - Pastille rouge à droite
	   - Flèche en ::after
	   - Remplissage au hover via ::before (optionnel, ici inclus)
	   ========================================================= */
	.elementor-button, 
	.elementor-widget-button .elementor-button.btn-fill,
	button.gform_button.btn-fill {
	  /* tailles responsives */
	  --btn-h: clamp(42px, 3.2vw, 54px);
	  --circle: clamp(40px, 3vw, 50px);
	  --padX: clamp(16px, 2vw, 26px);
	  --gap: clamp(10px, 1.4vw, 14px);
	  --radius: 999px;

	  /* couleurs (par défaut = variante "blanc") */
	  --bg: var(--blanc);
	  --text: var(--rouge);
	  --border: rgba(255,255,255,.55);
	  --circle-bg: var(--rouge);
	  --icon: var(--blanc);
	  --b: 2px;              /* épaisseur de bordure */
	  --edge: calc(var(--b) + 6px); /* marge interne entre bord et cercle */

		border-radius: 999px !important;
		font-size: var(--fs-body-2) !important;
		line-height: var(--lh-body-2) !important;
		font-weight: 600 !important;
		border-width: 2px;
		border-style: solid !important;
		border-color: transparent;

	  position: relative;
	  display: inline-flex !important;
	  align-items: center !important;
	  justify-content: flex-start !important;

	  padding-left: var(--padX) !important;
	  /* IMPORTANT: on réserve la place pour la pastille + gap */
	  padding-right: calc(var(--padX) + var(--circle) + var(--gap) - var(--padX) + var(--edge)) !important;
	  padding-top: 16px !important;
	  padding-bottom: 16px !important;

	  text-decoration: none;
	  overflow: hidden;

	  transition: color .25s ease, border-color .25s ease, background-color .25s ease !important;
	}
	.elementor-widget-button.btn-fill
	.elementor-button
	.elementor-button-content-wrapper{
	  position: relative;
	  z-index: 1;
	  transition: z-index 0s linear;
	}


	/*.elementor-button:hover, .elementor-widget-button.btn-fill
	.elementor-button:hover {background-color: unset !important;}*/

	.elementor-widget-button.btn-fill
	.elementor-button:hover
	.elementor-button-content-wrapper,
	.gform_wrapper .gform_button.btn-fill .btn-label,
	button.gform_button.btn-fill .btn-label {
	  z-index: 3;
	}

	/* FLÈCHE — sur le <a> à l'intérieur du wrapper .btn-fill */
	.elementor-widget-button.btn-fill .elementor-button::after,
	.gform_wrapper .gform_button.btn-fill:after,
	button.gform_button.btn-fill:after,
	button#gform_submit_button_1:after {
	  content: "\f061";
	  font-family: "Font Awesome 6 Free" !important;
	  font-weight: 900;
	  position: absolute;
	  top: 50%;
	  right: calc(var(--edge) + (var(--circle) / 2) + -3px);

	  transform: translate(50%, -50%) rotate(-45deg);
	  transform-origin: 50% 50%;

	  /*z-index: 2;*/
	  color: var(--icon);
	  font-size: clamp(14px, 1.2vw, 18px);
	  line-height: 1;

	  background-color: var(--rouge);
	  padding: calc(var(--circle) / 2.5);
	  border-radius: 999px;

	  transition: transform .55s cubic-bezier(.2,.9,.2,1), padding .85s cubic-bezier(.25,.1,.25,1);
	}
	.elementor-widget-button.btn-fill .elementor-button:hover::after,
	.gform_wrapper .gform_button.btn-fill:hover::after,
	button.gform_button.btn-fill:hover::after,
	button#gform_submit_button_1:hover::after {
	  transform: translate(50%, -50%) rotate(0deg);
	  padding: 100%;
	}

	/* Le texte (Elementor) */
	.elementor-widget-button.btn-fill .elementor-button .elementor-button-content-wrapper,
	.gform_wrapper .gform_button.btn-fill .btn-label,
	button.gform_button.btn-fill .btn-label {
	  display: inline-flex;
	  align-items: center;
	}


	/* ===============================
	   BTN – BLANC
	   =============================== */
		.elementor-widget-button.btn-fill--blanc .elementor-button,
		.gform_wrapper .gform_button.btn-fill.btn-fill--blanc,
		button.gform_button.btn-fill.btn-fill--blanc {
			border-color: var(--blanc) !important; 
			background-color: var(--blanc) !important;
		}
		.elementor-widget-button.btn-fill--blanc .elementor-button span.elementor-button-text,
		.gform_wrapper .gform_button.btn-fill.btn-fill--blanc .btn-label,
		button.gform_button.btn-fill.btn-fill--blanc .btn-label {
			color: var(--noir1);
		}
		/* hover : texte devient blanc */
		.elementor-widget-button.btn-fill--blanc .elementor-button:hover span.elementor-button-text,
		.gform_wrapper .gform_button.btn-fill.btn-fill--blanc:hover .btn-label,
		button.gform_button.btn-fill.btn-fill--blanc:hover .btn-label {
			color: var(--blanc) !important;
		}

	/* ===============================
	   BTN – GRIS-BLEU
	   =============================== */
		.elementor-widget-button.btn-fill--gris-bleu .elementor-button {border-color: var(--gris-pale) !important; background-color: var(--gris-pale) !important;}
		.elementor-widget-button.btn-fill--gris-bleu .elementor-button span.elementor-button-text{color: var(--rouge);}
		/* hover : texte devient blanc */
		.elementor-widget-button.btn-fill--gris-bleu .elementor-button:hover  span.elementor-button-text{color: var(--blanc) !important;}


	/* =================================
	   GRAVITY FORMS
	   ================================= */
	.gform_heading {display: none !important;}
	.visually-hidden{
	  position:absolute !important;
	  width:1px !important;
	  height:1px !important;
	  padding:0 !important;
	  margin:-1px !important;
	  overflow:hidden !important;
	  clip:rect(0,0,0,0) !important;
	  white-space:nowrap !important;
	  border:0 !important;
	}
	.gform-theme--framework * {
		border-radius: var(--hdr-r) !important;
		border-color: transparent !important;
		row-gap: var(--15) !important;
	}

	/* =================================
	   PASTILLES + variantes
	   ================================= */
		.stamp{
		  width: clamp(110px, 10vw, 180px);
		  aspect-ratio: 1/1;
		  display:inline-block;
		}
		.stamp svg{
		  width:100%;
		  height:100%;
		  display:block;
		}

		/* rotation lente */
		.svg-spin{
		  --spin-duration: 22s; /* + lent = moins étourdissant */
		  animation: stampSpin var(--spin-duration) linear infinite;
		  transform-origin: 50% 50%;
		  will-change: transform;
		}
		@keyframes stampSpin{ to{ transform: rotate(-360deg); } }
		@media (prefers-reduced-motion: reduce){
		  .svg-spin{ animation:none !important; }
		}

		/* Texte circulaire */
		.stamp__text{
		  font-family: var(--font);
		  font-weight: 600;
		  font-size: clamp(9px, 0.9vw, 15px);
		  letter-spacing: clamp(.04em, .12vw, .08em);
		  text-transform: uppercase;
		}

		/* Pour les versions pleines : texte + symbole prennent la couleur via currentColor */
		.stamp{
		  color: var(--stamp-fg, var(--blanc));
		}

		/* La couleur des "trous" dans un mask = noir */
		.stamp__cut{ fill: #000; }

		/* Fond de pastille */
		.stamp__bg{ fill: var(--stamp-bg, var(--blanc)); }

		/* Variantes couleur */
		.stamp--rouge{
		  --stamp-bg: var(--rouge);
		  --stamp-fg: var(--blanc);
		}
		.stamp--noir{
		  --stamp-bg: var(--noir1);
		  --stamp-fg: var(--blanc);
		}

		/* Variante percée : le fg n’est pas utilisé (mask), mais on le neutralise */
		.stamp--perce{
		  --stamp-bg: var(--blanc);
		  --stamp-fg: transparent;
		}

			/* ====================
			   ALIGNEMENT DE LA PASTILLE
			   ==================== */
			.left-middle.elementor-widget-html {
				position: relative;
				z-index: 1;
				translate: -10% 30%;
				margin-bottom: -100% !important;
			}
			.right-bottom.elementor-widget-html {
				position: relative;
				z-index: 1;
				translate: 83% 85%;
				margin-bottom: -100% !important;
			}

				/* ==================
				   HTML À COLLER DANS LA ZONE
				   ==================

				POUR LA VARIANTE PERCÉE

					<div class="stamp stamp--perce svg-spin" aria-label="Pastille">
					  <svg viewBox="0 0 200 200" role="img" aria-hidden="true">

						<defs>
						  <!-- Trajet du texte -->
						  <path id="stampPath-cut"
								d="M100,100 m-70,0 a70,70 0 1,1 140,0 a70,70 0 1,1 -140,0" />

						  <!-- Masque : blanc = visible / noir = trou -->
						  <mask id="stampMask-cut">
							<rect width="100%" height="100%" fill="white"/>

							<!-- Trou central -->
							<circle cx="100" cy="100" r="42" fill="black"/>

							<!-- Texte percé -->
							<text class="stamp__text stamp__cut">
							  <textPath href="#stampPath-cut" startOffset="50%" text-anchor="middle">
								<tspan>STRUCTUREZ VOS VENTES — MESUREZ VOS PROGRÈS.</tspan>
							  </textPath>
							</text>

							<!-- Symbole percé -->
							<g class="stamp__cut"
							   transform="translate(75 63) scale(1)">
							  <path d="M48.897 21.2772H0V31.1101H48.897V21.2772Z"/>
							  <path d="M48.897 0.103587V9.95289C37.2176 9.30829 30.1762 11.477 23.7738 13.4491C18.6007 15.0442 13.6186 16.5792 7.2709 16.5792C5.03666 16.5792 2.63851 16.388 0 15.9455V5.93779C8.82234 7.76232 14.1758 6.11807 20.8786 4.05314C27.7125 1.95 35.7919 -0.541013 48.897 0.103587Z"/>
							  <path d="M6.57196 48.952C10.2016 48.952 13.1439 46.0096 13.1439 42.38C13.1439 38.7504 10.2016 35.8081 6.57196 35.8081C2.94237 35.8081 0 38.7504 0 42.38C0 46.0096 2.94237 48.952 6.57196 48.952Z"/>
							</g>
						  </mask>
						</defs>

						<!-- Pastille blanche percée -->
						<circle class="stamp__bg"
								cx="100" cy="100" r="92"
								mask="url(#stampMask-cut)" />
					  </svg>
					</div>

				*/

	/* ================================
	   BOITES
	   ================================ */
	.bte-icon.bg-blanc .elementor-icon {font-size: var(--fs-h4) !important;}
	.bte-icon.bg-blanc .elementor-icon i:before {font-size: var(--fs-h4) !important;}

	.bte-icon.bg-blanc h4.elementor-icon-box-title {color: var(--rouge) !important;}
	.bte-icon.bg-rouge h4.elementor-icon-box-title, .bte-icon.bg-rouge p.elementor-icon-box-description {color: var(--blanc) !important;}

	.bte-icon.bg-blanc, .bte-icon.bg-rouge {
		padding: 35px;
		border-radius: var(--hdr-r);
	}

	.bte-icon.bg-blanc .elementor-icon i, .bte-icon.bg-blanc .elementor-icon svg {
		height: unset !important;
	}

	/* ===============================
	   ICON BOX (bte-icon) – pastille + flèche sur le titre
	   Hover = sur .bte-icon.bg-rouge
	   =============================== */

	/* Base : on prépare des variables et on réserve la place à droite dans le titre */
	.bte-icon.bg-rouge{
	  /* tailles responsives (adaptées à un H4) */
	  --circle: clamp(34px, 2.6vw, 46px);
	  --padX: clamp(14px, 1.8vw, 22px);
	  --gap: clamp(10px, 1.2vw, 14px);
	  --radius: 999px;

	  /* couleurs (carte rouge) */
	  --circle-bg: var(--rouge);
	  --icon: var(--blanc);
	  --edge: 10px; /* marge interne droite */
	}

	/* Le titre devient le "support" de l’icône */
	.bte-icon.bg-rouge h4.elementor-icon-box-title{
	  position: relative;
	  display: inline-flex;         /* pour que le padding-right fonctionne clean */
	  align-items: center;
	  padding-right: calc(2*(var(--edge) + var(--circle) + var(--gap)));
	  /* optionnel : si tu veux une zone cliquable/hover plus évidente sur le titre */
	  /* cursor: pointer; */
	}

	/* La flèche + cercle */
	.bte-icon.bg-rouge h4.elementor-icon-box-title::after{
	  content: "\f061";
	  font-family: "Font Awesome 6 Free" !important;
	  font-weight: 900;

	  position: absolute;
	  top: 50%;
	  right: var(--edge);

	  transform: translateY(-50%) rotate(-45deg);
	  transform-origin: 50% 50%;

	  color: var(--icon);
	  font-size: clamp(14px, 1.1vw, 18px);
	  line-height: 1;

	  background-color: var(--circle-bg);
	  padding: calc(var(--circle) / 2.6);
	  border-radius: 999px;
	  border: 2px solid var(--blanc);

	  margin-left: 100% !important;
	  margin-right: 0% !important;

	  /* animation */
	  transition: transform .55s cubic-bezier(.2,.9,.2,1);
	}

	/* Hover déclenché par le parent (la boite) */
	.bte-icon.bg-rouge:hover h4.elementor-icon-box-title::after{
	  transform: translateY(-50%) rotate(0deg);
	  /*padding: 100%;*/
	}

	/* ================================
	   ONGLETS
	   ================================ */
		/* La carte */
		.onglet-position {
		  position: relative !important;
		  border-top-left-radius: var(--hdr-r) !important;
		  border-top-right-radius: var(--hdr-r) !important;
		  padding: clamp(10px, 2.4vw, 20px) clamp(40px, 5.4vw, 100px) !important;
		  max-width: max-content !important;
		  margin-left: 0px !important;
		  background: var(--noir1);
		  overflow: visible !important; /* pour laisser dépasser l’onglet */
			
		  border: solid 1px var(--rouge) !important;
          border-bottom: solid 1px var(--noir1) !important;
		  margin-bottom: -1.75px;
		  z-index: 2;
			
		}

		/* L’onglet */
		.onglet{
		  /*position: absolute;
		  top: clamp(14px, 2vw, 22px);
		  left: clamp(14px, 2vw, 22px);*/

		  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 16px);
		  border-radius: 999px;
		  background: transparent; /* si tu veux juste du texte */
		  color: var(--rouge);     /* ta variable rouge */
		  font-weight: var(--fw-medium);
		  text-transform: uppercase;
		  font-size: var(--fs-body-2);
		  line-height: var(--lh-body-2);
		  z-index: 2;
		}

		/* Patch concave en bas-droite */
		.onglet-position::after{
			  content: "";
			  position: absolute;

			  /*
			   * Le carré est placé immédiatement à droite
			   * de l’onglet, au niveau de sa base.
			   */
			  right: calc(var(--hdr-cut) * -1);
			  bottom: -1px;

			  width: calc(var(--hdr-cut) + 1px);
			  height: calc(var(--hdr-cut) + 1px);

			  z-index: 3;
			  pointer-events: none;

			  /*
			   * 1. zone intérieure transparente;
			   * 2. anneau rouge de 1 px;
			   * 3. remplissage noir autour de la courbe.
			   */
			  background:
				radial-gradient(
				  circle at 100% 0,

				  transparent calc(var(--hdr-cut) - 1px),

				  var(--rouge) calc(var(--hdr-cut) - 1px),
				  var(--rouge) var(--hdr-cut),

				  var(--noir1) calc(var(--hdr-cut) + .5px)
				) !important;

			  /* On neutralise ton ancien masque */
			  -webkit-mask: none !important;
			  mask: none !important;
		}


		/* Si ton contenu passe “sous” la pièce, remonte-le */
		.onglet-position > *{
		  position: relative;
		  z-index: 1;
		}
		.coins-onglets {
			border-top-right-radius: var(--hdr-r);
			border-bottom-right-radius: var(--hdr-r);
			border-bottom-left-radius: var(--hdr-r);
		}

	/* =========================================
	   Coins ronds avec ta variable: var(--hdr-r)
	   ========================================= */

	/*.coins-ronds{
	  border-radius: var(--hdr-r) !important;
	  overflow: hidden !important;   /* coupe canvas + pseudos *
	  isolation: isolate;
	}*/

	/* couches Elementor / pseudos */
	div.coins-ronds::before,
	div.coins-ronds::after,
	div.coins-ronds > .elementor-background-overlay,
	div.coins-ronds > .elementor-motion-effects-container,
	div.coins-ronds > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor-407 .elementor-element.elementor-element-a0a044c::before {
	  border-radius: var(--hdr-r) !important;
	}
	.elementor-407 .elementor-element.elementor-element-a0a044c.element-pack-agbg-yes .bdt-animated-gradient-background {
		border-top-right-radius: var(--hdr-r);
	}

	/* canvas Element Pack (Animated Gradient BG) */
	.coins-ronds > canvas.bdt-animated-gradient-background{
	  border-radius: var(--hdr-r) !important;
	  overflow: hidden !important;
	  display: block;
	}
	/* =========================================================
	   COINS RONDS — coupe aussi canvas / overlay / pseudo Elementor
	   ========================================================= */

	/* Le clip doit être sur le conteneur qui porte coins-ronds / coins-onglets */
	.coins-onglets{
	  border-top-right-radius: var(--hdr-r) !important;
	  border-bottom-left-radius: var(--hdr-r) !important;
	  border-bottom-right-radius: var(--hdr-r) !important;
	  overflow: hidden !important;      /* <-- indispensable pour couper le canvas */
	  isolation: isolate;               /* <-- évite les artefacts de stacking */
	  position: relative;               /* <-- sécurise les pseudos/canvas */
		
	  border: solid 1px var(--rouge);
	}

	/* Elementor Containers: beaucoup de backgrounds/overlays passent par ::before */
	.coins-ronds::before,
	.coins-ronds::after,
	.coins-onglets::before,
	.coins-onglets::after{
	  border-top-right-radius: inherit !important;
	  border-bottom-right-radius: inherit !important;
	  border-bottom-left-radius: inherit !important;
	}

	/* Element Pack animated gradient (canvas) */
	.coins-ronds > canvas.bdt-animated-gradient-background,
	.coins-onglets > canvas.bdt-animated-gradient-background{
	  border-top-right-radius: inherit !important;
	  border-bottom-right-radius: inherit !important;
	  border-bottom-left-radius: inherit !important;
	  display: block;
	}

	/* Bonus: si un fond est appliqué sur un enfant bg-blanc coins-ronds, on garde le même clip */
	.coins-onglets .bg-blanc.coins-ronds{
	  border-radius: var(--hdr-r) !important;
	  overflow: hidden !important;
	}





	.coins-onglets .bg-blanc.coins-ronds.e-con.e-child {
		max-width: var(--container-max-width);
		margin: auto;
	}
	.elementor-element.elementor-element-e84c806 {
		grid-template-columns: 40% 60% !important;
	}
	@media screen and (max-width: 1024px) {
		.elementor-element.elementor-element-e84c806 {grid-template-columns: 100% !important;}
		.elementor-element.elementor-element-8d7900e.elementor-widget.elementor-widget-image img.attachment-full.size-full {max-width: 75% !important;}
		.elementor-element.elementor-element-f14b4c2.elementor-widget.elementor-widget-text-editor, 
		.elementor-element.elementor-element-e2bd18d.elementor-widget.elementor-widget-text-editor,
		.elementor-element.elementor-element-35e9304.fancy-list-2.bdt-content-position--left.elementor-widget.elementor-widget-bdt-fancy-list {
			text-align: center !important;
		}
	}
	
	
	/* =====================================================
       BTE - CHIFFRES ET ICÔNE SVG
       ================================================== */

			.bte-chiffre{
			  --step-bg: var(--noir1);
			  --step-bg-hover: var(--noir2);
			  --step-border: var(--rouge);

			  counter-reset: step;

			  display: grid !important;
			  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			  gap: clamp(16px, 1.5vw, 28px) !important;
			  align-items: stretch;
			}

			/* =====================================================
			   CARTE
			   ===================================================== */

			.bte-chiffre-int{
			  counter-increment: step;

			  position: relative !important;
			  isolation: isolate;
			  overflow: hidden !important;

			  min-width: 0;
			  min-height: clamp(300px, 24vw, 380px);

			  padding:
				clamp(28px, 3vw, 46px)
				clamp(18px, 2vw, 34px)
				clamp(24px, 2.5vw, 40px) !important;

			  display: flex !important;
			  flex-direction: column;
			  align-items: center;
			  justify-content: flex-start;

			  text-align: center;

			  background-color: var(--step-bg) !important;
			  border: 1px solid var(--step-border) !important;
			  border-radius: var(--hdr-r) !important;

			  transition:
				background-color .4s ease,
				transform .4s cubic-bezier(.2,.8,.2,1),
				box-shadow .4s ease;
			}

			/* Chiffre en arrière-plan */
			.bte-chiffre-int::before{
			  content: counter(step);

			  position: absolute;
			  top: clamp(4px, .8vw, 14px);
			  left: -35%;
			  z-index: -1;

			  color: var(--noir2);
			  font-family: var(--font);
			  font-size: clamp(7rem, 9vw, 11rem);
			  line-height: .85;
			  font-weight: 700;

			  pointer-events: none;
			  transition:
				color .4s ease,
				transform .5s cubic-bezier(.2,.8,.2,1);
			}

			/* Tout le contenu passe devant le chiffre */
			.bte-chiffre-int > *{
			  position: relative;
			  z-index: 1;
			}

			/* =====================================================
			   ICÔNE
			   ===================================================== */

			.bte-chiffre-int .elementor-widget-image{
			  width: clamp(105px, 9vw, 150px);
			  margin: 0 auto clamp(18px, 2vw, 30px) !important;
			}

			.bte-chiffre-int .elementor-widget-image img{
			  width: 100%;
			  height: auto;
			  display: block;

			  transition:
				filter .4s ease,
				transform .5s cubic-bezier(.2,.8,.2,1);
			}

			/* =====================================================
			   TEXTE
			   ===================================================== */

			.bte-chiffre-int h3{
			  margin: 0 0 clamp(12px, 1.3vw, 20px) !important;
			  color: var(--rouge) !important;

			  transition: color .35s ease;
			}

			.bte-chiffre-int p{
			  margin: 0 !important;
			  color: var(--blanc) !important;

			  font-size: var(--fs-body-2) !important;
			  line-height: var(--lh-body-2) !important;

			  transition: color .35s ease;
			}

			/* =====================================================
			   HOVER
			   ===================================================== */

			.bte-chiffre-int:hover{
			  background-color: var(--step-bg-hover) !important;
			  transform: translateY(-4px);

			  box-shadow:
				0 18px 45px rgba(0, 0, 0, .18);
			}

			.bte-chiffre-int:hover::before{
			  color: var(--noir1);
			  transform: translateY(-2px);
			}

			.bte-chiffre-int:hover h3{
			  color: var(--blanc) !important;
			}

			/*
			 * Tes SVG sont chargés comme images externes.
			 * Cette propriété transforme les traits rouges en blancs au hover.
			 * Elle fonctionne bien si les SVG sont monochromes rouges.
			 */
			.bte-chiffre-int:hover .elementor-widget-image img{
			  filter: brightness(0) invert(1);
			  transform: scale(1.04);
			}
	/*==================== FIN BTE AVEC CHIFFRE ========================== */
	
		/* =====================================================
	   SECTION SERVICES
	   ===================================================== */

	.services-grid{
	  --service-red: var(--rouge);
	  --service-dark: var(--noir2);
	  --service-white: var(--blanc);
	  --service-radius: var(--hdr-r);
	  --toggle-size: clamp(24px, 2vw, 32px);

	  overflow: visible !important;
	}

	/* Un service complet : carte + résultat */
	.service-item{
	  position: relative;
	  min-width: 0;
	  overflow: visible !important;
	}

	/* =====================================================
	   CARTE PRINCIPALE
	   ===================================================== */

	.service-card{
	  position: relative;
	  z-index: 2;

	  min-height: clamp(180px, 15vw, 230px);
	  padding:
		clamp(28px, 3vw, 48px)
		clamp(24px, 3vw, 50px);

	  display: flex !important;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;

	  text-align: center;
	  background: var(--service-dark);
	  border: 2px solid var(--service-red);
	  border-radius: var(--service-radius);
	  overflow: visible !important;
	}

	/* Titres */
	.service-card h2,
	.service-card h3,
	.service-card h4{
	  margin: 0 0 clamp(10px, 1vw, 16px);
	  color: var(--service-red) !important;
	}

	/* Description */
	.service-card p{
	  margin: 0;
	  color: var(--service-white) !important;
	}

	/* Empêche le widget HTML d'ajouter de la hauteur */
	.service-card .elementor-widget-html{
	  position: static;
	  margin: 0 !important;
	}

	/* =====================================================
	   BOUTON + / X
	   ===================================================== */

	.service-toggle{
	  position: absolute;
	  left: 50%;
	  bottom: calc(var(--toggle-size) / -2);
	  z-index: 5;

	  width: var(--toggle-size);
	  height: var(--toggle-size);
	  padding: 0;
	  border: 0;
	  border-radius: 50%;

	  display: grid;
	  place-items: center;

	  background: var(--service-red);
	  color: var(--noir);
	  cursor: pointer;

	  transform: translateX(-50%);
	  transition:
		transform .4s cubic-bezier(.2,.8,.2,1),
		background-color .25s ease;
	}

	.service-toggle:hover{
	  transform: translateX(-50%) scale(1.08);
	}

	.service-toggle:focus-visible{
	  outline: 2px solid var(--blanc);
	  outline-offset: 4px;
	}

	/* Le symbole + */
	.service-toggle-icon{
	  position: relative;
	  display: block;
	  width: 42%;
	  height: 42%;

	  transition: transform .45s cubic-bezier(.2,.8,.2,1);
	}

	.service-toggle-icon::before,
	.service-toggle-icon::after{
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;

	  width: 100%;
	  height: 2px;
	  border-radius: 999px;
	  background: currentColor;

	  transform: translate(-50%, -50%);
	}

	.service-toggle-icon::after{
	  transform: translate(-50%, -50%) rotate(90deg);
	}

	/* Le + tourne de 45 degrés pour devenir un x */
	.service-item.is-open .service-toggle-icon{
	  transform: rotate(45deg);
	}

	/* =====================================================
	   BOÎTE RÉSULTAT
	   Animation : ouverture du haut vers le bas + fondu
	   ===================================================== */

/* =====================================================
   BOÎTE RESULTS
   Fermée par défaut
   ===================================================== */

/* État fermé */
.service-result{
  position: relative !important;
  z-index: 1;

  width: min(82%, 430px) !important;
  max-width: 430px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  /* On laisse Elementor conserver display:flex */
  max-height: 0;
  min-height: 0 !important;

  opacity: 0;
  visibility: hidden;
  overflow: hidden !important;
  pointer-events: none;

  transform: translateY(-20px);

  transition:
    max-height .7s cubic-bezier(.2, .8, .2, 1),
    margin-top .7s cubic-bezier(.2, .8, .2, 1),
    opacity .35s ease,
    transform .7s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear .7s;
}

/* Le wrapper automatiquement ajouté par Elementor */
.service-result > .e-con-inner{
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

/* Carte rouge */
.service-result-inner{
  width: 100% !important;
  min-height: 0 !important;

  padding:
    clamp(22px, 2.4vw, 34px)
    clamp(20px, 2.6vw, 38px) !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  background-color: var(--rouge) !important;
  border-radius: var(--hdr-r) !important;

  text-align: center;
  overflow: hidden !important;
}

/* Texte */
.service-result-inner h2,
.service-result-inner h3,
.service-result-inner h4,
.service-result-inner p{
  color: var(--blanc) !important;
}

.service-result-inner h2,
.service-result-inner h3,
.service-result-inner h4{
  margin: 0 0 10px !important;
}

.service-result-inner p{
  margin: 0 !important;
}

/* Ligne verticale */
.service-result::before{
  content: "";
  position: absolute;

  left: 50%;
  bottom: 100%;

  width: 2px;
  height: clamp(34px, 3vw, 48px);

  background-color: var(--rouge);

  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;

  transition: transform .45s ease .12s;
}

/* =====================================================
   ÉTAT OUVERT
   ===================================================== */

.service-item.is-open .service-result{
  /*
   * Doit être supérieur à la hauteur réelle de la boîte.
   * 300px est largement suffisant ici.
   */
  max-height: 300px;

  margin-top: clamp(34px, 3vw, 48px) !important;

  opacity: 1;
  visibility: visible;
  overflow: visible !important;
  pointer-events: auto;

  transform: translateY(0);

  transition:
    max-height .7s cubic-bezier(.2, .8, .2, 1),
    margin-top .7s cubic-bezier(.2, .8, .2, 1),
    opacity .4s ease .1s,
    transform .7s cubic-bezier(.2, .8, .2, 1),
    visibility 0s;
}

.service-item.is-open .service-result::before{
  transform: translateX(-50%) scaleY(1);
}



			/* =====================================================
			   TABLETTE / MOBILE
			   ===================================================== */

			@media (max-width: 1024px){
			  .services-grid{
				grid-template-columns: 1fr !important;
			  }

			  .service-result{
				width: min(90%, 520px);
			  }
			}

			@media (max-width: 767px){
			  .service-card{
				min-height: auto;
				padding:
				  clamp(28px, 8vw, 42px)
				  clamp(18px, 6vw, 30px);
			  }

			  .service-result{
				width: 94%;
			  }
			}

			/* Accessibilité : réduire les animations */
			@media (prefers-reduced-motion: reduce){
			  .service-toggle,
			  .service-toggle-icon,
			  .service-result,
			  .service-result::before{
				transition: none !important;
			  }
			}
	/* ========================= FIN BTE SERVICE À DÉVELOPPER =========================== */
	
}