.elementor-kit-8{--e-global-color-primary:#000000;--e-global-color-secondary:#9A8465;--e-global-color-text:#131214;--e-global-color-accent:#61CE70;--e-global-color-b549750:#1D1E18;--e-global-color-4ab4d0a:#3E4236;--e-global-color-f6d2b03:#201808;--e-global-color-7a627b1:#F5EFE5A8;--e-global-color-05b5fb3:#A99E84;--e-global-color-ffb79d0:#1b1a1d;--e-global-color-37fb514:#FCF9F5;--e-global-color-85e1621:#E8328A;--e-global-typography-primary-font-family:"Gotham";--e-global-typography-primary-font-size:55px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Gotham";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Gotham";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-ee569cd-font-family:"Eight One Font";--e-global-typography-8818eb9-font-family:"Apalu";background-color:#F7F3EC;color:#000000;font-family:"Roboto", Sans-serif;overscroll-behavior:auto;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#131214;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 p{margin-block-end:14px;}.elementor-kit-8 a{font-family:"Roboto", Sans-serif;font-size:12px;}.elementor-kit-8 h1{font-family:"Eight One Font", Sans-serif;}.elementor-kit-8 h2{font-family:"Eight One Font", Sans-serif;}.elementor-kit-8 h3{font-family:"Apalu", Sans-serif;}.elementor-kit-8 h5{font-family:"Apalu", Sans-serif;}.elementor-kit-8 h6{font-family:"Apalu", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   1. VARIABLES
   Rappel : déclarer AUSSI ces couleurs dans Réglages du site › Couleurs
   globales, pour qu'elles apparaissent dans les sélecteurs Elementor.
   ========================================================================== */

:root{
  /* Pierre naturelle — travertin très clair nuancé */
  --hz-pierre-000:#FCF9F4;
  --hz-pierre-050:#F5EFE5;
  --hz-pierre-100:#EDE4D6;
  --hz-pierre-200:#E0D4C1;
  --hz-pierre-300:#CEBEA5;
  --hz-pierre-400:#B6A184;
  --hz-pierre-500:#9A8465;

  /* Fer forgé / aluminium noir sablé */
  --hz-fer-900:#131214;
  --hz-fer-800:#1D1C1E;
  --hz-fer-700:#2A292B;

  /* Bois */
  --hz-bois-clair:#C6A87B;
  --hz-noyer:#6B4A32;

  /* Charte logo (couleurs relevées sur le fichier vectoriel) */
  --hz-gris:#54504D;
  --hz-olive:#8BA944;
  --hz-olive-fonce:#6D8A2B;

  /* Accents par univers (tableau de charte graphique du client) */
  --hz-lagon:#3E7F86;      /* Spa / Sauna / Spa de nage */
  --hz-marbre:#F2F0EC;     /* Céramique blanche */

  /* Ombre chaude commune, cohérente sur tout le site */
  --hz-ombre:rgba(74,56,36,.34);
}


/* ==========================================================================
   2. TEXTURES TRAVERTIN

   Chaque texture est un empilement de calques de background, du plus haut
   au plus bas dans la déclaration. background-blend-mode fusionne les calques
   entre eux — c'est ce qui remplace les pseudo-éléments.

   Usage Elementor : sélectionner le conteneur › onglet Avancé ›
   « Classes CSS » › saisir le nom SANS le point, ex. hz-travertin
   ========================================================================== */

/* --- Travertin lisse : grain + veinage horizontal + dégradé de fond ------ */
.hz-travertin{
  background-image:
    /* 1. grain de pierre */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.30'/%3E%3C/svg%3E"),
    /* 2. veinage type travertin */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23v)' opacity='0.18'/%3E%3C/svg%3E"),
    /* 3. fond pierre */
    linear-gradient(177deg,var(--hz-pierre-050) 0%,var(--hz-pierre-100) 42%,var(--hz-pierre-200) 100%);
  background-size:220px 220px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
  background-blend-mode:overlay, multiply, normal;
}

/* --- Travertin ondulé : idem + cannelures verticales --------------------- */
.hz-travertin-cannele{
  background-image:
    /* 1. cannelures verticales (le « ondulé » du showroom) */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.49) 0px,
      rgba(255,252,246,.25) 7px,
      rgba(168,142,108,.08) 15px,
      rgba(120,96,68,.18) 25px,
      rgba(150,124,92,.10) 33px,
      rgba(255,255,255,.49) 42px),
    /* 2. ondulation douce horizontale */
    repeating-linear-gradient(3deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,0) 26px,
      rgba(122,98,70,.05) 52px,
      rgba(255,255,255,0) 80px),
    /* 3. grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g2)' opacity='0.28'/%3E%3C/svg%3E"),
    /* 4. veinage */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='v2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23v2)' opacity='0.16'/%3E%3C/svg%3E"),
    /* 5. fond pierre */
    linear-gradient(177deg,var(--hz-pierre-050) 0%,var(--hz-pierre-100) 42%,var(--hz-pierre-200) 100%);
  background-size:42px 100%, 100% 100%, 220px 220px, 100% 100%, 100% 100%;
  background-repeat:repeat-x, no-repeat, repeat, no-repeat, no-repeat;
  background-blend-mode:normal, soft-light, overlay, multiply, normal;
}

/* --- Variante claire (sections alternées) -------------------------------- */
.hz-travertin-clair{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='5'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g3)' opacity='0.22'/%3E%3C/svg%3E"),
    linear-gradient(177deg,#FCF9F4 0%,#F7F2E9 100%);
  background-size:220px 220px, 100% 100%;
  background-repeat:repeat, no-repeat;
  background-blend-mode:overlay, normal;
}

/* --- Fer forgé : fond sombre grainé (sections contrastées) --------------- */
.hz-fond-fer{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
    linear-gradient(168deg,#1D1C1E 0%,#0E0D0F 100%);
  background-size:300px 300px, 100% 100%;
  background-repeat:repeat, no-repeat;
  background-blend-mode:overlay, normal;
  color:var(--hz-pierre-100);
}
.hz-fond-fer h1,.hz-fond-fer h2,.hz-fond-fer h3,
.hz-fond-fer .elementor-heading-title{color:#fff}
.hz-fond-fer p,.hz-fond-fer .elementor-widget-text-editor{color:#A99E8A}

/* --- Éclairage LED rasant par le bas ------------------------------------- */
/* À combiner avec une texture, ex. class="hz-travertin-cannele hz-lueur" */
.hz-lueur{
  box-shadow:inset 0 -90px 90px -60px rgba(255,247,231,.9);
}


/* ==========================================================================
   3. LETTRAGE FER FORGÉ

   Usage Elementor : widget Titre › Avancé › Classes CSS › hz-fer
   Le sélecteur cible .elementor-heading-title car Elementor place le texte
   dans un enfant du widget.
   ========================================================================== */

/* --- Version pleine : métal + ombre portée (gros titres uniquement) ------ */
.hz-fer,
.hz-fer .elementor-heading-title{
  background-image:linear-gradient(170deg,
    #6B686C 0%,#2A282B 14%,#0E0D0F 46%,#201E22 72%,#4A474B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.75))
    drop-shadow(3px 7px 5px rgba(74,56,36,.42))
    drop-shadow(9px 18px 16px rgba(88,68,44,.30))
    drop-shadow(18px 34px 34px rgba(88,68,44,.16));
}

/* --- Version allégée : à privilégier sous 40 px ------------------------- */
.hz-fer-leger,
.hz-fer-leger .elementor-heading-title{
  color:var(--hz-fer-800);
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.6))
    drop-shadow(2px 5px 4px rgba(74,56,36,.36));
}


/* ==========================================================================
   4. ÉLÉMENTS DE TEXTE
   ========================================================================== */

/* --- Surtitre en capitales très espacées -------------------------------- */
.hz-surtitre,
.hz-surtitre .elementor-heading-title{
  font-size:10.5px !important;
  letter-spacing:.44em !important;
  font-weight:400 !important;
  color:var(--hz-pierre-500) !important;
  line-height:1.6 !important;
}

/* --- Filet gravé (séparateur) ------------------------------------------- */
/* Widget Séparateur › Avancé › Classes CSS › hz-filet */
.hz-filet .elementor-divider-separator{
  border:0 !important;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,70,48,.4),transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.75);
}

/* --- Chapô ---------------------------------------------------------------*/
.hz-chapo{font-size:17px;line-height:1.75;max-width:58ch;color:#5C5651}


/* ==========================================================================
   5. BOUTONS
   Usage : widget Bouton › Avancé › Classes CSS › hz-btn-fer (ou hz-btn-olive)
   ========================================================================== */

.hz-btn-fer .elementor-button,
.hz-btn-olive .elementor-button,
.hz-btn-contour .elementor-button{
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:400;
  padding:17px 34px;
  border-radius:2px;
  transition:.35s cubic-bezier(.2,.7,.3,1);
}

.hz-btn-fer .elementor-button{
  background:linear-gradient(168deg,#333134,#141315);
  color:var(--hz-pierre-050);
  box-shadow:0 2px 0 rgba(255,255,255,.5), 6px 14px 24px rgba(88,68,44,.32);
}
.hz-btn-fer .elementor-button:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 0 rgba(255,255,255,.5), 10px 22px 34px rgba(88,68,44,.4);
}

.hz-btn-olive .elementor-button{
  background:linear-gradient(168deg,#9CBB4E,#6D8A2B);
  color:#fff;
  box-shadow:0 2px 0 rgba(255,255,255,.4), 6px 14px 24px rgba(88,110,40,.32);
}
.hz-btn-olive .elementor-button:hover{transform:translateY(-3px)}

.hz-btn-contour .elementor-button{
  background:rgba(255,253,248,.4);
  border:1px solid rgba(38,34,30,.35);
  color:var(--hz-fer-800);
}
.hz-btn-contour .elementor-button:hover{
  background:rgba(255,253,248,.85);
  border-color:var(--hz-fer-800);
}


/* ==========================================================================
   6. CARTES PHOTO
   Usage : widget Image Box ou conteneur avec image de fond ›
           Avancé › Classes CSS › hz-carte
   ========================================================================== */

.hz-carte{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(120,96,68,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.8), 8px 18px 34px -22px rgba(74,56,36,.55);
  transition:.55s cubic-bezier(.2,.7,.3,1);
}
.hz-carte:hover{
  transform:translateY(-6px);
  box-shadow:0 1px 0 rgba(255,255,255,.8), 16px 34px 54px -26px rgba(74,56,36,.7);
}
.hz-carte img{transition:.7s cubic-bezier(.2,.7,.3,1)}
.hz-carte:hover img{transform:scale(1.055)}

/* Voile sombre pour poser du texte blanc sur une photo.
   À mettre sur le conteneur qui porte l'image de fond. */
.hz-voile{
  background-image:linear-gradient(to top,
    rgba(20,17,14,.92) 4%, rgba(20,17,14,.6) 34%, rgba(20,17,14,.06) 72%);
}

/* Encadré translucide posé sur une photo */
.hz-cartouche{
  background:linear-gradient(160deg,rgba(255,253,249,.93),rgba(230,220,204,.86));
  border:1px solid rgba(120,96,68,.34);
  backdrop-filter:blur(8px);
  box-shadow:16px 36px 60px -34px rgba(74,56,36,.66);
}


/* ==========================================================================
   7. ACCENTS PAR UNIVERS
   Reprend le tableau de charte graphique fourni par le client.
   Poser la classe sur le conteneur de la section, puis utiliser
   var(--hz-accent) dans les réglages de couleur Elementor.
   ========================================================================== */

.hz-u-pergola   { --hz-accent:var(--hz-noyer);       }  /* bois chêne naturel */
.hz-u-veranda   { --hz-accent:var(--hz-olive-fonce); }  /* vert */
.hz-u-cuisine   { --hz-accent:var(--hz-fer-700);     }  /* noir + bois */
.hz-u-cuisson   { --hz-accent:var(--hz-fer-700);     }  /* noir + bois */
.hz-u-spa       { --hz-accent:var(--hz-lagon);       }  /* bleu lagon */
.hz-u-mobilier  { --hz-accent:var(--hz-bois-clair);  }  /* bois + corde */
.hz-u-partenaire{ --hz-accent:var(--hz-pierre-500);  }  /* béton */


/* ==========================================================================
   8. CORRECTIFS ELEMENTOR
   ========================================================================== */

/* Les textures sont posées sur le conteneur : neutraliser l'overlay natif
   quand on utilise nos classes, sinon Elementor peut ajouter un aplat. */
.hz-travertin > .elementor-background-overlay,
.hz-travertin-cannele > .elementor-background-overlay,
.hz-travertin-clair > .elementor-background-overlay,
.hz-fond-fer > .elementor-background-overlay{background:none}

/* Les conteneurs Elementor sont transparents par défaut : forcer l'héritage
   du fond quand la texture est sur un parent. */
.hz-travertin .e-con-inner,
.hz-travertin-cannele .e-con-inner{background:transparent}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Gotham';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://lesdelices.impactagence.fr/wp-content/uploads/2026/10/Gotham-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Gotham';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://lesdelices.impactagence.fr/wp-content/uploads/2026/10/Gotham-Book.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Eight One Font';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://lesdelices.impactagence.fr/wp-content/uploads/2026/08/Eight-One.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Apalu';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://lesdelices.impactagence.fr/wp-content/uploads/2026/08/Apalu.ttf') format('truetype');
}
/* End Custom Fonts CSS */