/*!
Theme Name: Outgrid Child
Theme URI: https://uicore.co
Description: Multi-Purpose Elementor WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: outgrid
Version: 1.0.0
Text Domain: outgrid
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
  /* =========================
     COULEURS
     ========================= */
  --noir:      #352F2D;
  --rouge:     #cc0000; /*ancien rouge : #f13d32*/
  --gris-bleu: #DAE3ED;
  --gris-fonce:#7A7D84;
  --blanc:     #FFFFFF;

  /* =========================
     TYPO — Font family
     ========================= */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* =========================
     TYPO — Sizes (responsive)
     Desktop max = tes valeurs (1920)
     Mobile min = valeurs “logiques”
     ========================= */

  /* Titres */
  --fs-h1: clamp(2.75rem, 2.00rem + 3.00vw, 5.625rem); /* 44px -> 90px */
  --fs-h2: clamp(2.00rem, 1.60rem + 1.60vw, 3.75rem);  /* 32px -> 60px */
  --fs-h3: clamp(1.50rem, 1.25rem + 1.00vw, 2.50rem);  /* 24px -> 40px */
  --fs-h4: clamp(1.25rem, 1.10rem + 0.60vw, 1.875rem); /* 20px -> 30px */

  /* Textes */
  --fs-body-1: clamp(1.125rem, 1.05rem + 0.30vw, 1.375rem); /* 18px -> 22px */
  --fs-body-2: clamp(1.00rem, 0.95rem + 0.25vw, 1.125rem);  /* 16px -> 18px */
  --fs-menu:   clamp(1.00rem, 0.95rem + 0.25vw, 1.125rem);  /* 16px -> 18px */

  /* =========================
     TYPO — Line-heights (ratios)
     Basés sur tes px (ex: 60/70 = 1.167)
     ========================= */
  --lh-h1: 1;        /* 90/90 */
  --lh-h2: 1.167;    /* 60/70 */
  --lh-h3: 1.25;     /* 40/50 */
  --lh-h4: 1.333;    /* 30/40 */
  --lh-body-1: 1.455;/* 22/32 */
  --lh-body-2: 1.556;/* 18/28 */

  /* Poids */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-medium: 500;
	
  /* Header */
  --hdr-r:  clamp(12px, 3vw, 25px);   /* rayon normal */
  --hdr-cut: clamp(12px, 3vw, 25px);/* taille des coins inversés */
  --hdr-x:  clamp(12px, 3vw, 25px);   /* offset gauche */
  --hdr-y:  clamp(12px, 3vw, 25px);   /* offset haut */
  --r:   var(--hdr-r);     /* rayon normal */
  --cut: var(--hdr-cut);   /* rayon du creux */
  --x:   var(--hdr-x);     /* décalage horizontal */
  --y:   var(--hdr-y);     /* décalage vertical */
  --under: transparent;

  /* Dimensions */
  --35: clamp(16px, 4vw, 35px);
  --15: clamp(10px, 1.2vw, 15px);
}

/* 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(--noir) !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-bleu) !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(--noir) !important;}
.bg-rouge {background-color: var(--rouge) !important;}
.bg-blanc {background-color: var(--blanc) !important;}
.bg-gris-bleu {background-color: var(--gris-bleu) !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;}
}




/* ================================
   HEADER
   ================================ */
.logged-in.admin-bar .uicore-navbar.uicore-sticky {
    top: 27px !important;
    left: 5px !important;
}
	@media (min-width: 1025px) {
		.uicore-body-content div#uicore-page div#wrapper-navbar {margin-left: -10px !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;
		}
	}
.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 (évite les 4 coins ronds)
========================= */
div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper{
  position: relative;
  background: var(--blanc);
  border-top: 15px solid var(--blanc);
  margin-top: -20px;

  /* seulement 2 coins ronds (comme ta fiche) */
  border-top-left-radius: 0;
  border-bottom-right-radius: var(--hdr-r);
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;

  overflow: visible;
}

/* Assure que le contenu passe au-dessus des pseudo-éléments */
div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper > *{
  position: relative;
  z-index: 2;
}

/* Base commune des coins concaves */
div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper::before,
div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper::after{
  content: "";
  position: absolute;
  width: var(--hdr-cut);
  height: var(--hdr-cut);
  background: transparent;
  pointer-events: none;
  opacity: 1 !important;
  transform: none !important;
  z-index: 1;
}

/* =========================
   COIN SUP DROIT (concave, décalé vers la droite)
   -> IMPORTANT: le shadow doit être dans le quadrant BAS-GAUCHE
========================= */
div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper::after{
  top: 0px;
  right: calc(var(--hdr-x) * -1);

  /* on arrondit le coin interne du petit carré */
  border-top-left-radius: var(--hdr-cut);

  /* "peint" le quart de cercle au bon endroit :
     x négatif (vers la gauche) + y positif (vers le bas) */
  box-shadow: calc(var(--hdr-cut) * -1) calc(var(--hdr-cut) * -1) 0 var(--hdr-cut) var(--blanc);
}

/* =========================
   COIN BAS GAUCHE (concave, décalé vers le bas)
   -> le shadow doit être dans le quadrant HAUT-DROIT
========================= */
div[data-uils="header"]#wrapper-navbar .uicore-header-wrapper::before{
  left: 0px;
  top: calc(var(--hdr-x) * 3 - 4px);
  /* important: le pseudo derrière le header */
  z-index: -1;
  /* quart de cercle "dans" le header */
  border-top-left-radius: var(--hdr-cut);
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  /* le "remplissage" blanc se fait avec le shadow, comme cserjes */
  box-shadow: calc(var(--hdr-cut) * -1) calc(var(--hdr-cut) * -1) 0 var(--hdr-cut) var(--blanc);
}

/* =========================
   MENU STICKY INTELLIGENT
========================= */
 
div[data-uils="header"]#wrapper-navbar.uicore-scrolled .uicore-header-wrapper::before, 
div[data-uils="header"]#wrapper-navbar.uicore-scrolled .uicore-header-wrapper::after {
	display: none !important;
}
div[data-uils="header"]#wrapper-navbar.uicore-scrolled .uicore-header-wrapper {
	border-radius: 0 var(--hdr-r) var(--hdr-r) 0 !important;
	border-left: 15px solid var(--blanc);
    margin-left: -15px;
	margin-top: 15px;
	border-top: none;
}

/* =========================================================
   É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(--noir);
	}
	/* 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-bleu) !important; background-color: var(--gris-bleu) !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(--noir);
	  --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(--noir);
	  overflow: visible !important; /* pour laisser dépasser l’onglet */
	}

	/* 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;
	  right: calc(var(--hdr-cut)*-1);
	  bottom: 0;

	  /* Taille de la découpe (reprend ta variable) */
	  width: var(--hdr-cut);
	  height: var(--hdr-cut);

	  /* Couleur réelle de la pièce ajoutée */
	  background: var(--noir);

	  /* Important: que ça passe au-dessus du fond de la carte,
		 mais derrière le contenu si besoin */
	  z-index: 0;
	  pointer-events: none;

	  /* Découpe concave (quart de cercle retiré au coin haut-gauche) */
	  -webkit-mask: radial-gradient(circle var(--hdr-cut) at 100% 0,
					 transparent 98%,
					 var(--noir) 100%);
			  mask: radial-gradient(circle var(--hdr-cut) at 100% 0,
					 transparent 98%,
					 var(--noir) 100%);
	}
	.onglet-position.bg-rouge::after{
	  /* Couleur réelle de la pièce ajoutée */
	  background: var(--rouge) !important;

	  /* Découpe concave (quart de cercle retiré au coin haut-gauche) */
	  -webkit-mask: radial-gradient(circle var(--hdr-cut) at 100% 0,
					 transparent 98%,
					 var(--rouge) 100%) !important;
			  mask: radial-gradient(circle var(--hdr-cut) at 100% 0,
					 transparent 98%,
					 var(--rouge) 100%) !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 */
}

/* 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;
	}
}


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