.elementor-kit-615{--e-global-color-primary:#105654;--e-global-color-secondary:#E1B047;--e-global-color-text:#111111;--e-global-color-accent:#E1B047;--e-global-typography-primary-font-family:"DM Serif Display";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Raleway";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Raleway";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Raleway";--e-global-typography-accent-font-weight:500;}.elementor-kit-615 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:12px;}.elementor-element{--widgets-spacing:12px 12px;--widgets-spacing-row:12px;--widgets-spacing-column:12px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:80%;}.e-con{--container-max-width:80%;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}/* Start custom CSS *//* ==========================================================================
   DESIGN SYSTEM — VERBRUGGE
   Basé sur le template Barapub (site-template skill)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. RESET / FIX DE BASE
   -------------------------------------------------------------------------- */

/*Fix overflow and margin text p*/
body{overflow-x: hidden !important;}

.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}

/* MOBILE MENU */

.mobile-menu-item {
    display:none !important;
}

@media screen and (max-width: 1024px) {
    .mobile-menu-item{
    display: inherit !important;
}
}


/* --------------------------------------------------------------------------
   1. COULEURS — Verbrugge
   -------------------------------------------------------------------------- */

:root {
  /* Marque */
  --color-primary: #105654;
  --color-primary-light: #1EA3A0;
  --color-secondary: #E1B047;
  --color-accent: #E1B047;

  /* Neutres */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-neutral-900: #111111;
  --color-neutral-700: #3A3A3A;
  --color-neutral-500: #7A7A7A;
  --color-neutral-300: #D6D6D6;
  --color-neutral-100: #F5F5F5;

  /* Teinte claire de la secondaire */
  --color-secondary-100: #FBF6E9;

  /* Sémantique */
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-neutral-100);
  --color-bg-alt-secondary: var(--color-secondary-100);
  --color-border: var(--color-neutral-300);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-light);

  /* Feedback */
  --color-success: #2E7D32;
  --color-error: #C62828;
}

/* Classes utilitaires couleur */
.text-primary .elementor-heading-title, .text-primary p, .text-primary .elementor-button{color:var(--color-primary) !important;}
.text-muted .elementor-heading-title, .text-muted p, .text-muted .elementor-button{color:var(--color-text-muted) !important;}
.bg-primary{background-color:var(--color-primary) !important;}
.bg-alt{background-color:var(--color-bg-alt) !important;}
.bg-alt-secondary{background-color:var(--color-bg-alt-secondary) !important;}


/* --------------------------------------------------------------------------
   2. POLICES — récupérées du starter template Astra déjà en place
   -------------------------------------------------------------------------- */

:root {
  --font-heading: 'DM Serif Display', serif;
  --font-body: 'Raleway', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: 0;
}

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }


/* --------------------------------------------------------------------------
   3. TOKENS COMPLÉMENTAIRES
   -------------------------------------------------------------------------- */

:root {
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  --shadow-s: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-m: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-l: 0 12px 32px rgba(0,0,0,0.12);

  --transition-base: 0.2s ease;
}


/* --------------------------------------------------------------------------
   4. TITRES
   -------------------------------------------------------------------------- */

h1 { font-size: clamp(2.25rem, 1.607rem + 3.214vw, 4.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.875rem, 1.482rem + 1.964vw, 3.25rem); line-height: 1.15; }
h3 { font-size: clamp(1.625rem, 1.304rem + 1.607vw, 2.75rem); line-height: 1.2; }
h4 { font-size: clamp(1.375rem, 1.125rem + 1.25vw, 2.25rem); line-height: 1.25; }
h5 { font-size: clamp(1.1875rem, 1.027rem + 0.804vw, 1.75rem); line-height: 1.3; }
h6 { font-size: clamp(1.0625rem, 0.973rem + 0.446vw, 1.375rem); line-height: 1.35; }

.titre-page .elementor-heading-title { font-size: clamp(2.25rem, 1.607rem + 3.214vw, 4.5rem); line-height: 1.1; }
.titre-section .elementor-heading-title { font-size: clamp(1.875rem, 1.482rem + 1.964vw, 3.25rem); line-height: 1.15; }
.sous-titre .elementor-heading-title { font-size: clamp(1.625rem, 1.304rem + 1.607vw, 2.75rem); line-height: 1.2; }
.titre-box .elementor-heading-title { font-size: clamp(1.375rem, 1.125rem + 1.25vw, 2.25rem); line-height: 1.25; }
.petit-titre .elementor-heading-title { font-size: clamp(1.1875rem, 1.027rem + 0.804vw, 1.75rem); line-height: 1.3; }
.titre-label .elementor-heading-title { font-size: clamp(1.0625rem, 0.973rem + 0.446vw, 1.375rem); line-height: 1.35; }


/* Classes modificatrices de police -- a combiner avec une classe de role
   ci-dessus (ex: "petit-titre font-body") pour ecraser la police du tag
   sans toucher a sa taille. Utile quand un client mixe les deux polices
   sur un meme niveau de titre (ex: petit-titre/tagline en font-body).
   Meme specificite que les classes de role (2 classes) -- l'ordre dans la
   feuille tranche, d'ou le !important pour rester fiable si l'ordre bouge. */
.font-heading .elementor-heading-title, .font-heading.elementor-heading-title { font-family: var(--font-heading) !important; }
.font-body .elementor-heading-title, .font-body.elementor-heading-title { font-family: var(--font-body) !important; }


/* --------------------------------------------------------------------------
   5. TEXTE COURANT
   -------------------------------------------------------------------------- */

p, .text-body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}

.text-large p {
  font-size: 1.125rem;
  line-height: 1.5;
}

.text-small p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.text-strong, .text-strong .elementor-heading-title, .text-strong p, .text-strong a {
  font-weight: 600;
}

.tagline .elementor-heading-title {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   6. PADDING
   -------------------------------------------------------------------------- */

.pad-s{padding: clamp(1rem, 0.7692rem + 1.0256vw, 1.5rem);}
.pad-m{padding: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem);}
.pad-l{padding: clamp(2rem, 1.5385rem + 2.0513vw, 3rem);}

.pad-tb-s{padding: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem) 0;}
.pad-tb-m{padding: clamp(4rem, 3.5385rem + 2.0513vw, 5rem) 0;}
.pad-tb-l{padding: clamp(7rem, 6.5385rem + 2.0513vw, 8rem) 0;}
.pad-t-s{padding-top: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);}
.pad-t-m{padding-top: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);}
.pad-t-l{padding-top: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);}
.pad-b-s{padding-bottom: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);}
.pad-b-m{padding-bottom: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);}
.pad-b-l{padding-bottom: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);}


/* --------------------------------------------------------------------------
   7. MARGE & GAP
   -------------------------------------------------------------------------- */

.mar-s{margin: clamp(1rem, 0.7692rem + 1.0256vw, 1.5rem);}
.mar-m{margin: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem);}
.mar-l{margin: clamp(2rem, 1.5385rem + 2.0513vw, 3rem);}

.mar-tb-s{margin: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem) 0;}
.mar-tb-m{margin: clamp(4rem, 3.5385rem + 2.0513vw, 5rem) 0;}
.mar-tb-l{margin: clamp(7rem, 6.5385rem + 2.0513vw, 8rem) 0;}
.mar-t-s{margin-top: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);}
.mar-t-m{margin-top: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);}
.mar-t-l{margin-top: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);}
.mar-b-s{margin-bottom: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);}
.mar-b-m{margin-bottom: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);}
.mar-b-l{margin-bottom: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);}

.gap-s{gap: clamp(1rem, 0.7692rem + 1.0256vw, 1.5rem);}
.gap-m{gap: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem);}
.gap-l{gap: clamp(2rem, 1.5385rem + 2.0513vw, 3rem);}


/* --------------------------------------------------------------------------
   8. CONTENEUR & BOUTONS
   -------------------------------------------------------------------------- */

.container-custom {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.7692rem + 1.0256vw, 1.5rem);
}

.btn-primary .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius-s) !important;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-primary) !important;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.btn-primary .elementor-button:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light) !important;
  color: var(--color-white);
}

.btn-secondary .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--color-primary);
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius-s) !important;
  border: 1px solid var(--color-primary) !important;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.btn-secondary .elementor-button:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}


/* --------------------------------------------------------------------------
   9. COMPOSANTS
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem);
  box-shadow: var(--shadow-s);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition-base);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}


/* --------------------------------------------------------------------------
   10. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */

img { max-width: 100%; height: auto; display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}/* End custom CSS */