/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 05 2026 | 16:11:58 */
/* -------------------------------------------------------
   FONT
------------------------------------------------------- */
/* Idéalement, charge la font via Elementor (Site Settings > Typography)
   mais si tu préfères en CSS : */
/*@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');*/

/* -------------------------------------------------------
   ROOT TOKENS
------------------------------------------------------- */
:root{
  /* Couleurs (selon ta capture CSS) */
  --bleu-bti:   #093B60;
  --bleu-rgb: 9,59,96;
  --orange-bti: #EF4C23;
  --blanc:      #ffffff;
  --gris-bti:   #E3E9EF;

  /* Typo */
  /*--ff-bti: "TikTok Sans", sans-serif;*/
  --ff-bti: "TikTok Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;

  /* H1 - BTI (desktop: 70 / 100%) */
  --fs-h1: clamp(42.00px, calc(32.14px + 2.6291vw), 70.00px); /* font-size */
  --lh-h1: clamp(42.00px, calc(32.14px + 2.6291vw), 70.00px); /* line-height (100% => = font-size) */
  --mt-h1: 0px;                                                /* margin-top */
  --mb-h1: clamp(16.00px, calc(10.37px + 1.5023vw), 32.00px);  /* margin-bottom */

  /* H2 - BTI (desktop: 50 / 100%) */
  --fs-h2: clamp(32.00px, calc(25.66px + 1.6901vw), 50.00px);
  --lh-h2: clamp(32.00px, calc(25.66px + 1.6901vw), 50.00px);  /* 100% */
  --mt-h2: clamp(24.00px, calc(18.37px + 1.5023vw), 40.00px);
  --mb-h2: clamp(14.00px, calc(9.07px + 1.3146vw), 28.00px);

  /* H3 - BTI (desktop: 30 / 100%) */
  --fs-h3: clamp(22.00px, calc(19.18px + 0.7512vw), 30.00px);
  --lh-h3: 125%; /*clamp(22.00px, calc(19.18px + 0.7512vw), 30.00px);  /* 100% */
  --mt-h3: clamp(20.00px, calc(15.77px + 1.1268vw), 32.00px);
  --mb-h3: clamp(12.00px, calc(7.77px + 1.1268vw), 24.00px);
	
  /* H4 - BTI (desktop: 24 / 100%) */
  --fs-h4: clamp(20.00px, calc(18.59px + 0.3756vw), 24.00px);
  --lh-h4: clamp(20.00px, calc(18.59px + 0.3756vw), 24.00px); /* 100% */
  --mt-h4: clamp(18.00px, calc(14.48px + 0.9390vw), 28.00px);
  --mb-h4: clamp(10.00px, calc(6.48px + 0.9390vw), 20.00px);

  /* H5 - BTI (desktop: 22 / 100%) */
  --fs-h5: clamp(18.00px, calc(16.59px + 0.3756vw), 22.00px);
  --lh-h5: clamp(18.00px, calc(16.59px + 0.3756vw), 22.00px); /* 100% */
  --mt-h5: clamp(16.00px, calc(13.18px + 0.7512vw), 24.00px);
  --mb-h5: clamp(8.00px,  calc(5.18px + 0.7512vw),  16.00px);

  /* Body text - BTI (desktop: 20 / Auto) */
  --fs-body: clamp(16.00px, calc(14.59px + 0.3756vw), 20.00px);
  --lh-body: clamp(24.00px, calc(21.89px + 0.5634vw), 30.00px); /* proposition “confort” */
  --mt-body: 0px;
  --mb-body: clamp(12.00px, calc(9.18px + 0.7512vw), 20.00px);

  /* Text-description (desktop: 16 / 125%) */
  --fs-description: clamp(14.00px, calc(13.30px + 0.1878vw), 16.00px);
  --lh-description: clamp(18.00px, calc(17.30px + 0.1878vw), 20.00px); /* 16px * 1.25 = 20px */
  --mt-description: 0px;
  --mb-description: clamp(8.00px, calc(5.89px + 0.5634vw), 14.00px);
	
  /* Boutons – dimensions fluides (375 -> 1440) */
  --btn-fs: clamp(15px, calc(14.65px + 0.0939vw), 16px);
  --btn-py: clamp(12px, calc(10.59px + 0.3756vw), 16px);
  --btn-px: clamp(18px, calc(15.18px + 0.7512vw), 26px);
  --btn-gap: clamp(10px, calc(8.59px + 0.3756vw), 14px);
  --btn-icon-size: clamp(26px, calc(23.18px + 0.7512vw), 32px);
  --btn-radius-15: clamp(10px, calc(8.24px + 0.4695vw), 15px);
}

/* ====== WPML ====== */
.otgs-development-site-front-end {display: none;}

/* ======= MASQUER ======== */
.hide {display: none !important;}

/* -------------------------------------------------------
   TYPO CLASSES (Elementor-friendly)
   Tu peux mettre la classe sur le widget (Advanced > CSS Classes)
------------------------------------------------------- */

/* H1 */
h1, .h1-bti,
.h1-bti .elementor-heading-title, h1.elementor-heading-title.elementor-size-default,
.elementor-widget-heading.h1-bti .elementor-heading-title {
  font-family: var(--ff-bti) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  margin-top: var(--mt-h1) !important;
  margin-bottom: var(--mb-h1) !important;
}

/* H2 */
h2, .h2-bti,
.h2-bti .elementor-heading-title, h2.elementor-heading-title.elementor-size-default,
.elementor-widget-heading.h2-bti .elementor-heading-title {
  font-family: var(--ff-bti) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
  margin-top: var(--mt-h2) !important;
  margin-bottom: var(--mb-h2) !important;
}

/* H3 */
h3, .h3-bti,
.h3-bti .elementor-heading-title, h3.elementor-heading-title.elementor-size-default,
.elementor-widget-heading.h3-bti .elementor-heading-title, .h3-bti .elementor-heading-title, .h3-bti h1 {
  font-family: var(--ff-bti) !important;
  font-weight: 600 !important;
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3) !important;
  margin-top: var(--mt-h3) !important;
  margin-bottom: var(--mb-h3) !important;
}

.category-eru .bte-blanc h3,
.category-heat .bte-blanc h3,
.category-mau .bte-blanc h3 {
    text-transform: uppercase;
    color: var(--orange-bti);
}
.category-eru .bte-blanc p strong,
.category-heat .bte-blanc p strong,
.category-mau .bte-blanc p strong {
    color: var(--orange-bti);
}

/* H4 */
h4, .h4-bti,
.h4-bti .elementor-heading-title, h4.elementor-heading-title.elementor-size-default,
.elementor-widget-heading.h4-bti .elementor-heading-title {
  font-family: var(--ff-bti) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-h4) !important;
  margin-top: var(--mt-h4) !important;
  margin-bottom: var(--mb-h4) !important;
}

/* H5 */
h5, .h5-bti,
.h5-bti .elementor-heading-title, h5.elementor-heading-title.elementor-size-default,
.elementor-widget-heading.h5-bti .elementor-heading-title {
  font-family: var(--ff-bti) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-h5) !important;
  margin-top: var(--mt-h5) !important;
  margin-bottom: var(--mb-h5) !important;
}


/* Body text (Text Editor / paragraphs / lists) */
p, body, li, .body-bti,
.body-bti .elementor-widget-container,
.body-bti p,
.body-bti li, .elementor-element.blanc.elementor-widget.elementor-widget-text-editor,
.elementor-element.elementor-widget.elementor-widget-text-editor {
  font-family: var(--ff-bti) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

p, body, li, .body-bti p,
.body-bti li{
  margin-top: var(--mt-body) !important;
  margin-bottom: var(--mb-body) !important;
}

/* Description */
.description,
.description .elementor-widget-container,
.description p,
.description li{
  font-family: var(--ff-bti) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-description) !important;
  line-height: var(--lh-description) !important;
}

.description p,
.description li{
  margin-top: var(--mt-description) !important;
  margin-bottom: var(--mb-description) !important;
}


.bte-blanc li.elementor-icon-list-item {padding: var(--mb-description);}

.bte-blanc h3 { text-transform: uppercase; color: var(--orange-bti); }

/* --------------------------------------------------------
   PADDING
   -------------------------------------------------------- */
.pad-container {
	padding-left: var(--uicore-header--wide-spacing) !important;
	padding-right: var(--uicore-header--wide-spacing) !important;
}


/* =========================================================
   BTI — PATCH bti-gros-titre (supporte <div class="elementor-heading-title">)
   + override robuste vs règles h2... !important
   -> À mettre SOUS ton bloc .bti-gros-titre existant
========================================================= */

.elementor .bti-gros-titre{
  --bti-hero-base-fs: var(--fs-h1, 32px);
  --bti-hero-mb: var(--mb-h1, 24px);
  --bti-hero-ls: var(--ls-h1, -0.035em);
}

/* CIBLE ROBUSTE (h1/h2/h3/h4 + div) */
.elementor .bti-gros-titre.bti-gros-titre :is(h1,h2,h3,h4,div).elementor-heading-title,
.elementor :is(h1,h2,h3,h4,div).elementor-heading-title.bti-gros-titre{
  font-size: clamp(52px, calc(var(--bti-hero-base-fs) * 3), 94px) !important;
  line-height: .96 !important;
  letter-spacing: var(--bti-hero-ls) !important;
  margin: 0 0 var(--bti-hero-mb) 0 !important;
}

/* Si le titre est splitté en <span>, on force l’héritage */
.elementor .bti-gros-titre :is(h1,h2,h3,h4,div).elementor-heading-title *,
.elementor :is(h1,h2,h3,h4,div).elementor-heading-title.bti-gros-titre *{
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Tablette */
@media (max-width: 1024px){
  .elementor .bti-gros-titre.bti-gros-titre :is(h1,h2,h3,h4,div).elementor-heading-title,
  .elementor :is(h1,h2,h3,h4,div).elementor-heading-title.bti-gros-titre{
    font-size: clamp(44px, 6vw, 80px) !important;
    line-height: 1.02 !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  .elementor .bti-gros-titre.bti-gros-titre :is(h1,h2,h3,h4,div).elementor-heading-title,
  .elementor :is(h1,h2,h3,h4,div).elementor-heading-title.bti-gros-titre{
    font-size: clamp(34px, 9vw, 46px) !important; /* ajuste au besoin */
    line-height: 1.08 !important;
  }
}


/* -------------------------------------------------------
   TEXT COLOR OUTILS
------------------------------------------------------- */
.text-bleu-bti, .bleu,
.bleu h1, .bleu h2, .bleu h3, .bleu h4, .bleu h5, .bleu p, .bleu li {
	color: var(--bleu-bti) !important;
}
.text-orange-bti, .orange,
.orange h1, .orange h2, .orange h3, .orange h4, .orange h5, .orange p, .orange li {
	color: var(--orange-bti) !important;
}
.text-blanc, .blanc, 
.blanc h1, .blanc h2, .blanc h3, .blanc h4, .blanc h5, .blanc p, .blanc li, .blanc a {
	color: var(--blanc) !important;
}
.text-gris-bti, .gris,
.gris h1, .gris h2, .gris h3, .gris h4, .gris h5, .gris p, .gris li {
	color: var(--gris-bti) !important;
}

/* -------------------------------------------------------
   BACKGROUND COLOR UTILS
------------------------------------------------------- */
.bg-bleu-bti   { background-color: var(--bleu-bti) !important; }
.bg-orange-bti { background-color: var(--orange-bti) !important; }
.bg-blanc      { background-color: var(--blanc) !important; }
.bg-gris-bti   { background-color: var(--gris-bti) !important; }
.bg-cover { background-size: cover !important; background-position: center !important; }

@media screen and (max-width: 1200px) {
	.bg-orange-mobile { background-color: var(--orange-bti) !important;}
}

.elementor-widget-image img, .radius {
    border-radius: var(--btn-radius-15);
}
.mask .elementor-widget-image img {border-radius: 0px !important;}

.bte-blanc{
  background-color: var(--blanc) !important;
  border-radius: var(--btn-radius-15);

  /* 92px @ 1440px */
  --mx: clamp(16px, 6.389vw, 92px);

  /* 14px @ 1440px */
  --mb: clamp(6px, 0.972vw, 14px);

  margin-left: var(--mx);
  margin-right: var(--mx);
  max-width: calc(100% - (var(--mx) * 2));
  margin-bottom: var(--mb);

  padding: clamp(8px, 3vw, 16px);
}

.marges-gd {
  /* 92px @ 1440px */
  --mx: clamp(16px, 6.389vw, 92px);

  margin-left: var(--mx);
  margin-right: var(--mx);
  max-width: calc(100% - (var(--mx) * 2));
}

/* ==== FOOTER ===== */
.flex-inline, .elementor-column.flex-inline, .flex-inline .elementor-widget-wrap.elementor-element-populated {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center !important;
    flex-wrap: nowrap;
}

/* on masque lorsque non pertinent le où trouver */
:is(.page-id-182, .page-id-2348, .page-id-2516) footer div#trouvez {
	display: none;
}

/* ==== PAGE ==== */
body {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* ==== HEADER ==== */
div#wrapper-navbar {z-index: 9999;}

/* ==== BOUTONS SOCIAL FOOTER ==== */
.elementor-social-icon {
    background-color: transparent !important;
}

/* =========================================================
   BTI BUTTONS (Elementor)

   CLASSES À APPLIQUER SUR LE WIDGET "Button"
   .btn--orange  -> si tu veux forcer la variante orange explicitement
   .btn--bleu           : bouton bleu
   .btn--outline-blanc  : bouton transparent, bord blanc, texte blanc
========================================================= */

	/* ---------------------------------------------------------
	   BASE (radius + align)
	--------------------------------------------------------- */
	.elementor-button,
	.elementor-button-content-wrapper{
	  align-items: center;
	  border-radius: var(--btn-radius-15) !important;
	}

	/* ---------------------------------------------------------
	   ICON (toujours) — cercle + flèche SVG
	   Normal : cercle contour + flèche →
	   Hover  : flèche ↗ + cercle rempli (piloté par --icon-hover-*)
	--------------------------------------------------------- */

	/* Valeurs par défaut (cas ORANGE) */
	.elementor-widget-button .elementor-button{
	  --icon-hover-fill: var(--blanc);        /* fond cercle au hover */
	  --icon-hover-arrow: var(--orange-bti);  /* couleur flèche au hover */
	}

	.elementor-widget-button .elementor-button-content-wrapper{
	  position: relative;
	}

	/* Cercle (à droite du texte) */
	.elementor-widget-button .elementor-button-content-wrapper::after{
	  content: "";
	  width: 32px;
	  height: 32px;
	  flex: 0 0 32px;
	  display: inline-block;
	  margin-left: 12px;

	  border-radius: 50%;
	  border: 2px solid currentColor;
	  background-color: transparent;

	  transition: background-color .2s ease, border-color .2s ease;
	}

	/* Flèche (superposée dans le cercle) */
	.elementor-widget-button .elementor-button-content-wrapper::before{
	  content: "";
	  position: absolute;
	  right: 0;
	  top: 50%;
	  width: 32px;
	  height: 32px;

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

	  background-color: currentColor;
	  pointer-events: none;

	  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2016H24M24%2016L15.5%207.5M24%2016L15.5%2024.5%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	  -webkit-mask-repeat: no-repeat;
	  -webkit-mask-position: center;
	  -webkit-mask-size: 70%;

	  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2016H24M24%2016L15.5%207.5M24%2016L15.5%2024.5%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	  mask-repeat: no-repeat;
	  mask-position: center;
	  mask-size: 70%;

	  transition: transform .25s ease, background-color .2s ease;
	}

	/* Hover : ↗ + cercle rempli */
	.elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper::before{
	  transform: translateY(-50%) rotate(-45deg);
	  background-color: var(--icon-hover-arrow);
	}

	.elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper::after{
	  background-color: var(--icon-hover-fill);
	  border-color: transparent;
	}

	/* ---------------------------------------------------------
	   COULEURS — 3 variantes demandées
	   (les classes changent uniquement bg/texte/bordure + tokens hover icône)
	--------------------------------------------------------- */

	/* ORANGE (optionnel, car défaut déjà orange sur ton site)
	   Hover = cercle blanc + flèche orange */
	.elementor-widget-button.btn--orange .elementor-button,
	.elementor-button.btn--orange{
	  background-color: var(--orange-bti) !important;
	  color: var(--blanc) !important;
	  border-color: var(--orange-bti) !important;

	  --icon-hover-fill: var(--blanc);
	  --icon-hover-arrow: var(--orange-bti);
	}

	/* BLEU
	   Hover = cercle orange + flèche blanche */
	.elementor-widget-button.btn--bleu .elementor-button,
	.elementor-button.btn--bleu{
	  background-color: var(--bleu-bti) !important;
	  color: var(--blanc) !important;
	  border-color: var(--bleu-bti) !important;

	  --icon-hover-fill: var(--orange-bti);
	  --icon-hover-arrow: var(--blanc);
	}

	/* OUTLINE BLANC
	   Normal = fond transparent, bord blanc, texte blanc
	   Hover  = cercle orange + flèche blanche */
	.elementor-widget-button.btn--outline-blanc .elementor-button,
	.elementor-button.btn--outline-blanc{
	  background-color: transparent !important;
	  color: var(--blanc) !important;
	  border: 2px solid var(--blanc) !important;

	  --icon-hover-fill: var(--orange-bti);
	  --icon-hover-arrow: var(--blanc);
	}

	/* OUTLINE ORANGE
	   Normal = fond transparent, bord blanc, texte blanc
	   Hover  = cercle orange + flèche blanche */
	.elementor-widget-button.btn--outline-orange .elementor-button,
	.elementor-button.btn--outline-orange{
	  background-color: transparent !important;
	  color: var(--orange-bti) !important;
	  border: 2px solid var(--orange-bti) !important;

	  --icon-hover-fill: var(--orange-bti);
	  --icon-hover-arrow: var(--blanc);
	}


			/* =========================================================
			   BTI — Gravity Forms buttons (submit + file upload)
			   Usage (Gravity Forms > Form Settings > CSS Class Name):
			   - gf-bti-btn                (active le style)
			   - + 1 variante (optionnel) :
				 gf-btn--orange | gf-btn--bleu | gf-btn--outline-blanc | gf-btn--outline-orange
			========================================================= */

			/* ---------- 1) Tokens BTI (defaults) ---------- */
			.gform_wrapper.gf-bti-btn{
			  /* sizing */
			  --bti-gf-radius: var(--btn-radius-15, 15px);
			  --bti-gf-pad-y: 14px;
			  --bti-gf-pad-x: 22px;

			  --bti-gf-icon-size: 32px; /* cercle */
			  --bti-gf-icon-gap: 12px;  /* espace texte -> cercle */

			  /* couleurs (défaut = ORANGE) */
			  --bti-gf-bg:     var(--orange-bti, #EF4C23);
			  --bti-gf-color:  var(--blanc, #fff);
			  --bti-gf-border: var(--orange-bti, #EF4C23);

			  /* hover icône */
			  --bti-gf-icon-hover-fill:  var(--blanc, #fff);
			  --bti-gf-icon-hover-arrow: var(--orange-bti, #EF4C23);

			  /* flèche (mask) */
			  --bti-gf-arrow-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2016H24M24%2016L15.5%207.5M24%2016L15.5%2024.5%27%20stroke%3D%27000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
			}

			/* Variantes (sur le FORM) */
			.gform_wrapper.gf-bti-btn.gf-btn--bleu{
			  --bti-gf-bg:     var(--bleu-bti, #003B5C);
			  --bti-gf-color:  var(--blanc, #fff);
			  --bti-gf-border: var(--bleu-bti, #003B5C);

			  --bti-gf-icon-hover-fill:  var(--orange-bti, #EF4C23);
			  --bti-gf-icon-hover-arrow: var(--blanc, #fff);
			}

			.gform_wrapper.gf-bti-btn.gf-btn--outline-blanc{
			  --bti-gf-bg:     transparent;
			  --bti-gf-color:  var(--blanc, #fff);
			  --bti-gf-border: var(--blanc, #fff);

			  --bti-gf-icon-hover-fill:  var(--orange-bti, #EF4C23);
			  --bti-gf-icon-hover-arrow: var(--blanc, #fff);
			}

			.gform_wrapper.gf-bti-btn.gf-btn--outline-orange{
			  --bti-gf-bg:     transparent;
			  --bti-gf-color:  var(--orange-bti, #EF4C23);
			  --bti-gf-border: var(--orange-bti, #EF4C23);

			  --bti-gf-icon-hover-fill:  var(--orange-bti, #EF4C23);
			  --bti-gf-icon-hover-arrow: var(--blanc, #fff);
			}

			/* ---------- 2) Base bouton (submit, next/prev, browse files) ---------- */
			.gform_wrapper.gf-bti-btn :is(
			  input[type="submit"].gform_button,
			  input[type="button"].gform_button,
			  button.gform_button,
			  button.gform_button_select_files,
			  .gform_page_footer input[type="button"],
			  .gform_page_footer input[type="submit"],
			  .gform_page_footer button
			){
			  appearance: none;
			  -webkit-appearance: none;

			  background: var(--bti-gf-bg) !important;
			  color: var(--bti-gf-color) !important;
			  border: 2px solid var(--bti-gf-border) !important;

			  border-radius: var(--bti-gf-radius) !important;

			  /* espace réservé à l’icône à droite */
			  padding:
				var(--bti-gf-pad-y)
				calc(var(--bti-gf-pad-x) + var(--bti-gf-icon-size) + var(--bti-gf-icon-gap))
				var(--bti-gf-pad-y)
				var(--bti-gf-pad-x)
				!important;

			  font-weight: 500;
			  line-height: 1.1;
			  text-decoration: none !important;

			  display: inline-flex;
			  align-items: center;
			  justify-content: center;
			  gap: 10px;

			  cursor: pointer;
			  transition: transform .2s ease, box-shadow .2s ease;
			}

			.gform_wrapper.gf-bti-btn :is(
			  input[type="submit"].gform_button,
			  input[type="button"].gform_button,
			  button.gform_button,
			  button.gform_button_select_files
			):hover{
			  transform: translateY(-1px);
			}

			/* Disabled */
			.gform_wrapper.gf-bti-btn :is(
			  input[type="submit"].gform_button,
			  input[type="button"].gform_button,
			  button.gform_button,
			  button.gform_button_select_files
			):disabled{
			  opacity: .55;
			  cursor: not-allowed;
			  transform: none;
			}

			/* ---------- 3) Icône cercle + flèche (BOUTONS <button>) ---------- */
			.gform_wrapper.gf-bti-btn :is(
			  button.gform_button,
			  button.gform_button_select_files
			){
			  position: relative;
			}

			/* Cercle */
			.gform_wrapper.gf-bti-btn :is(
			  button.gform_button,
			  button.gform_button_select_files
			)::after{
			  content: "";
			  position: absolute;
			  right: var(--bti-gf-pad-x);
			  top: 50%;
			  width: var(--bti-gf-icon-size);
			  height: var(--bti-gf-icon-size);
			  transform: translateY(-50%);
			  border-radius: 999px;

			  border: 2px solid currentColor;
			  background: transparent;

			  transition: background-color .2s ease, border-color .2s ease;
			  pointer-events: none;
			}

			/* Flèche */
			.gform_wrapper.gf-bti-btn :is(
			  button.gform_button,
			  button.gform_button_select_files
			)::before{
			  content: "";
			  position: absolute;
			  right: var(--bti-gf-pad-x);
			  top: 50%;
			  width: var(--bti-gf-icon-size);
			  height: var(--bti-gf-icon-size);
			  transform: translateY(-50%) rotate(0deg);
			  transform-origin: 50% 50%;

			  background-color: currentColor;

			  -webkit-mask-image: var(--bti-gf-arrow-mask);
			  -webkit-mask-repeat: no-repeat;
			  -webkit-mask-position: center;
			  -webkit-mask-size: 70%;

			  mask-image: var(--bti-gf-arrow-mask);
			  mask-repeat: no-repeat;
			  mask-position: center;
			  mask-size: 70%;

			  transition: transform .25s ease, background-color .2s ease;
			  pointer-events: none;
			}

			/* Hover icône */
			.gform_wrapper.gf-bti-btn :is(
			  button.gform_button,
			  button.gform_button_select_files
			):hover::before{
			  transform: translateY(-50%) rotate(-45deg);
			  background-color: var(--bti-gf-icon-hover-arrow);
			}
			.gform_wrapper.gf-bti-btn :is(
			  button.gform_button,
			  button.gform_button_select_files
			):hover::after{
			  background-color: var(--bti-gf-icon-hover-fill);
			  border-color: transparent;
			}

			/* ---------- 4) Icône cercle + flèche (SUBMIT en <input>) ----------
			   Input ne supporte pas ::before/::after, donc on dessine l’icône
			   sur le conteneur du footer (qui “wrap” le bouton).
			--------------------------------------------------------- */

			/* On cible uniquement les footers qui contiennent un submit */
			.gform_wrapper.gf-bti-btn :is(.gform_footer, .gform_page_footer):has(> input[type="submit"].gform_button){
			  position: relative;
			  display: inline-flex;
			  align-items: center;
			  /* important pour currentColor des pseudos */
			  color: var(--bti-gf-color);
			}

			/* Cercle */
			.gform_wrapper.gf-bti-btn :is(.gform_footer, .gform_page_footer):has(> input[type="submit"].gform_button)::after{
			  content: "";
			  position: absolute;
			  right: var(--bti-gf-pad-x);
			  top: 50%;
			  width: var(--bti-gf-icon-size);
			  height: var(--bti-gf-icon-size);
			  transform: translateY(-50%);
			  border-radius: 999px;

			  border: 2px solid currentColor;
			  background: transparent;

			  transition: background-color .2s ease, border-color .2s ease;
			  pointer-events: none;
			  z-index: 2;
			}

			/* Flèche */
			.gform_wrapper.gf-bti-btn :is(.gform_footer, .gform_page_footer):has(> input[type="submit"].gform_button)::before{
			  content: "";
			  position: absolute;
			  right: var(--bti-gf-pad-x);
			  top: 50%;
			  width: var(--bti-gf-icon-size);
			  height: var(--bti-gf-icon-size);
			  transform: translateY(-50%) rotate(0deg);
			  transform-origin: 50% 50%;

			  background-color: currentColor;

			  -webkit-mask-image: var(--bti-gf-arrow-mask);
			  -webkit-mask-repeat: no-repeat;
			  -webkit-mask-position: center;
			  -webkit-mask-size: 70%;

			  mask-image: var(--bti-gf-arrow-mask);
			  mask-repeat: no-repeat;
			  mask-position: center;
			  mask-size: 70%;

			  transition: transform .25s ease, background-color .2s ease;
			  pointer-events: none;
			  z-index: 2;
			}

			/* Hover icône (hover sur le footer = hover sur le bouton) */
			.gform_wrapper.gf-bti-btn :is(.gform_footer, .gform_page_footer):has(> input[type="submit"].gform_button):hover::before{
			  transform: translateY(-50%) rotate(-45deg);
			  background-color: var(--bti-gf-icon-hover-arrow);
			}
			.gform_wrapper.gf-bti-btn :is(.gform_footer, .gform_page_footer):has(> input[type="submit"].gform_button):hover::after{
			  background-color: var(--bti-gf-icon-hover-fill);
			  border-color: transparent;
			}

			/* ---------- 5) Mobile (optionnel) ---------- */
			@media (max-width: 767px){
			  .gform_wrapper.gf-bti-btn{
				--bti-gf-pad-y: 12px;
				--bti-gf-pad-x: 18px;
				--bti-gf-icon-size: 30px;
				--bti-gf-icon-gap: 10px;
			  }
			}



/* =========================================================
   TITRE ONGLET (biseau triangle droit à droite)
   - Diagonale : du coin haut droit -> vers le bas en retrait
   - Pointe toujours "triangulaire" quelle que soit la largeur
========================================================= */

:root{
  /* largeur du biseau (fluide) */
  --tab-cut: clamp(22px, 3vw, 70px);
}

/* éviter que la forme soit coupée */
.onglet,
.onglet .elementor-container,
.onglet .elementor-widget-wrap{
  overflow: visible !important;
}

.onglet .h3-bti{
  margin: 0 0 4% 0 !important;
}

.onglet .elementor-column-gap-default>.elementor-column>.elementor-element-populated {padding: 0px !important;}

/* forme + typo */
.onglet .h3-bti .elementor-heading-title{
  display: inline-block; /* la forme suit le texte */
  position: relative;

  background-color: var(--orange-bti);
  color: var(--blanc);

  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--fs-h3) !important;
  line-height: 1.1;

  padding: clamp(10px, 1vw, 14px) clamp(28px, 6vw, 88px) clamp(10px, 1vw, 14px) var(--uicore-header--wide-spacing);
	
  margin: 0 !important;

  /* BISEAU : coupe en bas à droite (pas une flèche) */
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--tab-cut)) 100%,
    0 100%
  );
}

@media screen and (max-width: 1024px) {
	.onglet .h3-bti .elementor-heading-title{padding: clamp(10px, 1vw, 14px) clamp(28px, 6vw, 88px) clamp(10px, 1vw, 14px) 50px;}
}

/* =========================================================
   MENU CTA — même style que tes .elementor-button (cercle + flèche)
   -> ajoute la classe "bti-cta" sur le <li>
   IMPORTANT: on utilise .ui-menu-item-wrapper (pas a::before) pour éviter
              le ::before du thème (hover blanc estompé UiCore)
========================================================= */
nav ul li.menu-item {margin-bottom: 0px !important;}

/* 1) Reset du hover "blanc estompé" de UiCore sur CE li seulement (sinon conflit) */
.uicore-navbar .menu-item.bti-cta > a::before,
.uicore-navbar .menu-item.bti-cta > a::after{
  content: none !important;
}

/* 2) Le lien = le “bouton” */
.uicore-navbar .menu-item.bti-cta > a{
  /* sizing (ajuste si tu veux) */
  --cta-py: clamp(8px,  calc(6.59px + 0.3756vw), 12px);
  --cta-px: clamp(12px, calc(7.77px + 1.1268vw), 24px);

  /* icône cercle/flèche comme tes boutons */
  --cta-circle: 32px; /* identique à tes boutons */
  --cta-gap: 12px;

  /* hover tokens (ORANGE par défaut) */
  --icon-hover-fill: var(--blanc);
  --icon-hover-arrow: var(--orange-bti);

  display: inline-flex !important;
  align-items: center !important;

  padding: var(--cta-py) var(--cta-px) !important;
  border-radius: var(--btn-radius-15, 15px) !important;

  background-color: var(--orange-bti) !important;
  color: var(--blanc) !important;

  text-decoration: none !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  margin-left: 8px;
}

/* 3) Wrapper texte = équivalent de .elementor-button-content-wrapper */
.uicore-navbar .menu-item.bti-cta > a .ui-menu-item-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* 4) Cercle (exactement comme tes boutons) */
.uicore-navbar .menu-item.bti-cta > a .ui-menu-item-wrapper::after{
  content: "";
  width: var(--cta-circle);
  height: var(--cta-circle);
  flex: 0 0 var(--cta-circle);
  display: inline-block;
  margin-left: var(--cta-gap);

  border-radius: 50%;
  border: 2px solid currentColor;
  background-color: transparent;

  transition: background-color .2s ease, border-color .2s ease;
}

/* 5) Flèche (exactement TON SVG + rotation hover) */
.uicore-navbar .menu-item.bti-cta > a .ui-menu-item-wrapper::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--cta-circle);
  height: var(--cta-circle);

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

  background-color: currentColor;
  pointer-events: none;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2016H24M24%2016L15.5%207.5M24%2016L15.5%2024.5%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70%;

  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2016H24M24%2016L15.5%207.5M24%2016L15.5%2024.5%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70%;

  transition: transform .25s ease, background-color .2s ease;
}

/* Hover : ↗ + cercle rempli (comme tes boutons) */
.uicore-navbar .menu-item.bti-cta > a:hover .ui-menu-item-wrapper::before,
.uicore-navbar .menu-item.bti-cta > a:focus-visible .ui-menu-item-wrapper::before{
  transform: translateY(-50%) rotate(-45deg);
  background-color: var(--icon-hover-arrow);
}

.uicore-navbar .menu-item.bti-cta > a:hover .ui-menu-item-wrapper::after,
.uicore-navbar .menu-item.bti-cta > a:focus-visible .ui-menu-item-wrapper::after{
  background-color: var(--icon-hover-fill);
  border-color: transparent;
}

/* Optionnel: si tu veux aussi le CTA en BLEU via une classe sur <li> : btn--bleu */
.uicore-navbar .menu-item.bti-cta.btn--bleu > a{
  background-color: var(--bleu-bti) !important;
  color: var(--blanc) !important;

  --icon-hover-fill: var(--orange-bti);
  --icon-hover-arrow: var(--blanc);
}
.uicore-navbar nav .uicore-menu {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1024px) {
	.uicore-navbar .menu-item.bti-cta > a {
		background-color: transparent !important;
		color: var(--orange-bti) !important;
	}
	li.bti-cta.menu-item.menu-item-type-post_type {
		padding-left: 10px;
	}
}



/* =================================================
   PAGES PRODUITS
   ================================================= */
:root{
  --debit-icon-url: url("/wp-content/uploads/2026/02/Property-ERU-blanc.svg");
  --direct-icon-url: url("/wp-content/uploads/2026/02/Chauffage-Gaz-Direct.svg");
  --indirect-icon-url: url("/wp-content/uploads/2026/02/Chauffage-Gaz-Indirect-blanc.svg");
}

/* Icône "débit" à la hauteur du H1 et centrée */
article.tag-debit .h1-bti, article.tag-direct .h1-bti, article.tag-indirect .h1-bti {
  display: inline-flex;
  align-items: center;                 /* centre vertical texte + icône */
  gap: clamp(10px, 1vw, 16px);         /* espace entre texte et icône */
  line-height: 1;                      /* évite les décalages */
}

/* l’icône */
article.tag-debit .h1-bti::after, article.tag-direct .h1-bti::after, article.tag-indirect .h1-bti::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;

  width: 1em;                          /* = hauteur du texte */
  height: 1em;                         /* = hauteur du texte */

  /* micro-ajustement si tu veux (souvent 0 est parfait) */
  transform: translateY(0);
}
/* l’icône */
article.tag-debit .h1-bti::after {
  background: var(--debit-icon-url) center / contain no-repeat;
}
article.tag-direct .h1-bti::after {
  background: var(--direct-icon-url) center / contain no-repeat;
}
article.tag-indirect .h1-bti::after {
  background: var(--indirect-icon-url) center / contain no-repeat;
}



/* =========================================================
   GRAVITY FORMS — BTI SKIN (override des classes existantes)
   Objectifs :
   1) Remplacer le bleu pâle GF par le bleu BTI (dropzone + accents)
   2) Boutons GF = look & feel BTI (radius + icône cercle/flèche)
========================================================= */

/* ---------------------------------------------------------
   0) Tokens locaux (utilise tes variables globales si présentes)
--------------------------------------------------------- */
.gform_wrapper.gform-theme--framework{
  --bti-gf-blue:   var(--bleu-bti, #003b5c);
  --bti-gf-orange: var(--orange-bti, #EF4C23);
  --bti-gf-white:  var(--blanc, #ffffff);
  --bti-gf-radius: var(--btn-radius-15, 15px);
  --bti-gf-shadow: 0 14px 34px rgba(0,0,0,.14);

  /* Icône “normal” : cercle contour blanc + flèche → blanche */
  --bti-gf-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2714%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M9%2016h12M21%2016l-6-6M21%2016l-6%206%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");

  /* Icône “hover” (bleu) : cercle blanc rempli + flèche ↗ bleue */
  --bti-gf-icon-hover-blue: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2714%27%20fill%3D%27%23fff%27/%3E%3Cpath%20d%3D%27M10%2022l12-12M13%2010h9v9%27%20fill%3D%27none%27%20stroke%3D%27%23003b5c%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");

  /* Icône “hover” (orange) : cercle blanc rempli + flèche ↗ orange */
  --bti-gf-icon-hover-orange: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2714%27%20fill%3D%27%23fff%27/%3E%3Cpath%20d%3D%27M10%2022l12-12M13%2010h9v9%27%20fill%3D%27none%27%20stroke%3D%27%23EF4C23%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   1) DROPZONE (drag & drop) — remplace le bleu pâle GF
--------------------------------------------------------- */

/* Conteneur dropzone */
.gform_wrapper.gform-theme--framework .gform_drop_area,
.gform_wrapper.gform-theme--framework .ginput_container_fileupload{
  border-radius: var(--bti-gf-radius) !important;
}

/* Fond + bordure (fallback + version moderne) */
.gform_wrapper.gform-theme--framework .gform_drop_area{
  border: 2px dashed rgba(0,59,92,.35) !important; /* fallback */
  background: rgba(0,59,92,.06) !important;        /* fallback */
  border-color: color-mix(in srgb, var(--bti-gf-blue) 40%, transparent) !important;
  background: color-mix(in srgb, var(--bti-gf-blue) 8%, transparent) !important;
}

/* Le fameux “bandeau bleu pâle” est souvent un ::before */
.gform-theme--framework .gfield:where(.gfield--type-fileupload,.gfield--input-type-fileupload,.gfield--type-post_image) .gform_drop_area::before {
	color: var(--bti-gf-blue) !important;
}

/* Icône / texte (optionnel mais harmonise) */
.gform_wrapper.gform-theme--framework .gform_drop_instructions,
.gform_wrapper.gform-theme--framework .gform_drop_area .gform_button_select_files{
  color: var(--bti-gf-blue) !important;
}

/* Coins ronds */
.gform-theme--foundation .gfield .ginput_password, 
.gform-theme--foundation .gfield input, 
.gform-theme--foundation .gfield select, 
.gform-theme--framework textarea {
    border-radius: var(--btn-radius-15) !important;
}

/* ---------------------------------------------------------
   2) BOUTONS GF (submit + select files + next/prev)
   -> même “logique” que tes boutons Elementor
--------------------------------------------------------- */

/* Base bouton (tous les types de boutons GF courants) */
.gform_wrapper.gform-theme--framework :is(
  input.gform_button,
  input.button,
  button.gform_button,
  button.button,
  button.gform_button_select_files,
  .gform_page_footer .gform_next_button,
  .gform_page_footer .gform_previous_button
){
  -webkit-appearance: none !important;
  appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  border-radius: var(--bti-gf-radius) !important;
  padding: 14px 58px 14px 22px !important; /* espace à droite pour l’icône */
  line-height: 1 !important;

  border: 2px solid var(--bti-gf-blue) !important;
  background-color: var(--bti-gf-blue) !important;
  color: var(--bti-gf-white) !important;

  box-shadow: var(--bti-gf-shadow) !important;
  text-decoration: none !important;
  cursor: pointer !important;

  /* Icône BTI (background) */
  background-image: var(--bti-gf-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 32px 32px !important;

  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}

/* Hover : petite “lift” + icône hover */
.gform_wrapper.gform-theme--framework :is(
  input.gform_button,
  input.button,
  button.gform_button,
  button.button,
  button.gform_button_select_files,
  .gform_page_footer .gform_next_button,
  .gform_page_footer .gform_previous_button
):hover{
  transform: translateY(-1px) !important;
  background-image: var(--bti-gf-icon-hover-blue) !important;
}

/* Focus clavier */
.gform_wrapper.gform-theme--framework :is(
  input.gform_button,
  input.button,
  button.gform_button,
  button.button,
  button.gform_button_select_files,
  .gform_page_footer .gform_next_button,
  .gform_page_footer .gform_previous_button
):focus-visible{
  outline: 3px solid color-mix(in srgb, var(--bti-gf-blue) 30%, transparent) !important;
  outline-offset: 2px !important;
}

/* Bouton “outline” possible via classe GF (si tu en ajoutes une) */
.gform_wrapper.gform-theme--framework :is(
  input.gform_button.btn--outline-orange,
  button.gform_button.btn--outline-orange,
  button.gform_button_select_files.btn--outline-orange
){
  background-color: transparent !important;
  color: var(--bti-gf-orange) !important;
  border-color: var(--bti-gf-orange) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2714%27%20fill%3D%27none%27%20stroke%3D%27%23EF4C23%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M9%2016h12M21%2016l-6-6M21%2016l-6%206%27%20fill%3D%27none%27%20stroke%3D%27%23EF4C23%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

.gform_wrapper.gform-theme--framework :is(
  input.gform_button.btn--outline-orange,
  button.gform_button.btn--outline-orange,
  button.gform_button_select_files.btn--outline-orange
):hover{
  background-image: var(--bti-gf-icon-hover-orange) !important;
}

/* Désactivé */
.gform_wrapper.gform-theme--framework :is(
  input.gform_button[disabled],
  button.gform_button[disabled],
  button.gform_button_select_files[disabled]
){
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   3) Petites corrections de cohérence (évite styles GF “intrusifs”)
--------------------------------------------------------- */

/* GF ajoute parfois des min-height / padding “thème” sur les buttons */
.gform_wrapper.gform-theme--framework :is(
  input.gform_button,
  button.gform_button,
  button.gform_button_select_files
){
  min-height: unset !important;
}

/* Si ton bouton “Soumettre” est trop étroit : */
.gform_wrapper.gform-theme--framework input#gform_submit_button_1{
  white-space: nowrap !important;
}

/* --------------------------------------------------------
   À CONSERVER À LA FIN
   -------------------------------------------------------- */
.no-radius, .no-radius img {border-radius: 0px !important;}