.elementor-kit-8{--e-global-color-primary:#FA3E19;--e-global-color-secondary:#000000;--e-global-color-text:#000000;--e-global-color-accent:#FA3E19;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter Tight";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter Tight";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter Tight";--e-global-typography-accent-font-weight:900;--e-global-typography-20a9e90-font-family:"Outfit";--e-global-typography-20a9e90-font-weight:600;font-family:"Outfit", Sans-serif;}.elementor-kit-8 e-page-transition{background-color:#FA3E19;}.elementor-kit-8 h1{font-family:"Outfit", Sans-serif;}.elementor-kit-8 h2{font-family:"Outfit", Sans-serif;font-size:22px;text-transform:none;}.elementor-kit-8 h3{font-family:"Outfit", Sans-serif;}.elementor-kit-8 h4{font-family:"Outfit", 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 *//*
PERFORM — Charte CSS pour Elementor
Auteur: Laurie + ChatGPT
Version: 1.0
Usage: collez ce fichier dans Apparence > Personnaliser > CSS additionnel
       OU Elementor > Réglages du site > Custom CSS.
Note: Les classes sont pensées pour être ajoutées dans l'onglet "Avancé > Classes CSS"
      des widgets/colonnes/sections Elementor.
*/

/* 1) Variables (couleurs, typos, rayons, ombres, échelles) */
:root{
  /* Couleurs */
  --perform-accent: #FF4D2D;      /* Accent primaire (CTA, liens, mises en avant) */
  --perform-accent-2: #0EA5E9;    /* Accent secondaire (badges, graphs) */
  --ink-1000: #0B0B0E;            /* Noir profond */
  --ink-900:  #1A1C1F;            /* Texte principal */
  --ink-700:  #3D4349;            /* Texte muted */
  --ink-500:  #9AA3AF;            /* Labels / placeholders */
  --surface-0:#FFFFFF;            /* Blanc / cartes */
  --surface-100:#F3F4F6;          /* Fond clair */
  --line-300: #E5E7EB;            /* Hairline */

  /* Typo scale (clamp pour responsive) */
  --h1: clamp(40px, 6vw, 52px);
  --h2: clamp(28px, 4.2vw, 40px);
  --h3: clamp(20px, 3vw, 28px);
  --lead: clamp(18px, 2.2vw, 19px);
  --body: 17px;

  /* Rythme / espacements */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Rayons */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-s: 0 4px 12px rgba(0,0,0,.08);
  --shadow-m: 0 12px 30px rgba(0,0,0,.12);
  --shadow-l: 0 18px 50px rgba(0,0,0,.16);

  /* Motion */
  --easing: cubic-bezier(.2,.6,.2,1);
  --duration: 240ms;
}

/* 2) Fonts (option 1 : chargement direct). 
   Bonne pratique: définir aussi via Elementor > Réglages du site > Typographies globales. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Oswald:wght@700&display=swap');

/* 3) Reset de base / couleurs globales */
html, body{
  color: var(--ink-900);
  background: var(--surface-100);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,.elementor-heading-title{
  font-family: "Oswald", "Inter", system-ui, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink-1000);
  line-height: 1.1;
  margin: 0 0 var(--space-4) 0;
}
h1,.h1{font-size: var(--h1);}
h2,.h2{font-size: var(--h2);}
h3,.h3{font-size: var(--h3);}
.lead{font-size: var(--lead); line-height: 1.55; color: var(--ink-700);}
p{margin: 0 0 var(--space-4) 0;}

a{color: var(--perform-accent); text-decoration: none;}
a:hover{opacity:.9;}

/* 4) Accessibilité : focus visible */
:where(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline: 2px solid var(--perform-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 5) Sections utilitaires */
.section{padding: clamp(48px, 8vw, 96px) 0;}
.section-tight{padding: clamp(28px, 6vw, 60px) 0;}
.container-narrow{max-width: 840px; margin-inline: auto;}
.container-wide{max-width: 1220px; margin-inline: auto;}

/* 6) Boutons (ajouter la classe au widget Elementor) */
.btn-perform .elementor-button,
.elementor-button.btn-perform{
  --btn-bg: var(--perform-accent);
  --btn-color: #fff;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 0;
  border-radius: var(--radius-pill);
  padding: .9rem 1.4rem;
  font-weight: 700;
  transform: translateZ(0);
  transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing), filter var(--duration) var(--easing);
  box-shadow: var(--shadow-s);
}
.btn-perform .elementor-button:hover,
.elementor-button.btn-perform:hover{
  transform: scale(1.02);
  box-shadow: var(--shadow-m);
  filter: saturate(1.05);
}

.btn-ghost .elementor-button,
.elementor-button.btn-ghost{
  background: transparent;
  color: var(--ink-1000);
  border: 2px solid var(--ink-1000);
  border-radius: var(--radius-pill);
  padding: .8rem 1.2rem;
  font-weight: 700;
  transition: all var(--duration) var(--easing);
}
.btn-ghost .elementor-button:hover,
.elementor-button.btn-ghost:hover{
  background: var(--ink-1000);
  color: #fff;
  transform: translateY(-1px);
}

/* 7) Cartes */
.card-perform{
  background: var(--surface-0);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-s);
  transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
  overflow: clip;
}
.card-perform:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--shadow-m);
}

/* 8) Tags / Badges */
.tag-perform{
  display:inline-flex; align-items:center; gap:.45rem;
  background: color-mix(in oklab, var(--perform-accent) 14%, white);
  color: var(--ink-1000);
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .85rem;
  border: 1px solid color-mix(in oklab, var(--perform-accent) 30%, white);
}

/* 9) KPIs */
.kpi{
  display:block;
  font-family: "Oswald", "Inter", sans-serif;
  font-size: clamp(36px, 6vw, 60px);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--ink-1000);
}
.kpi small{display:block; font: 500 14px/1.3 "Inter", sans-serif; color: var(--ink-700); margin-top: .35rem;}

/* 10) Media overlay (pour sections Hero avec image) */
.media-overlay{
  position: relative;
  isolation: isolate;
  background: var(--ink-1000);
  color: #fff;
}
.media-overlay > .elementor-container,
.media-overlay .elementor-container{ position: relative; z-index: 2; }
.media-overlay::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,14,.55) 0%, rgba(11,11,14,.82) 80%),
              radial-gradient(1200px 600px at 85% 10%, color-mix(in oklab, var(--perform-accent) 30%, transparent) 0%, transparent 60%);
  z-index:1;
  pointer-events:none;
}

/* 11) Utilitaires */
.text-accent{color: var(--perform-accent)!important;}
.bg-accent{background: var(--perform-accent)!important; color:#fff;}
.bg-dark{background: var(--ink-1000)!important; color:#fff;}
.round{border-radius: var(--radius-xl)!important;}
.shadow{box-shadow: var(--shadow-m)!important;}
.hr{height:1px; background: var(--line-300); width:100%;}

.m-0{margin:0!important;}
.mt-4{margin-top:var(--space-4)!important;}
.mt-8{margin-top:var(--space-8)!important;}
.mb-4{margin-bottom:var(--space-4)!important;}
.mb-8{margin-bottom:var(--space-8)!important;}
.p-4{padding:var(--space-4)!important;}
.p-8{padding:var(--space-8)!important;}

/* 12) Accordion (FAQ) — style propre pour Elementor */
.section .elementor-accordion,
.elementor-accordion{
  --acc-border: var(--line-300);
  --acc-bg: var(--surface-0);
  border: 1px solid var(--acc-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--acc-bg);
}
.elementor-accordion .elementor-accordion-item{
  border-top:1px solid var(--line-300);
}
.elementor-accordion .elementor-tab-title{
  padding: 1rem 1.2rem;
  font-weight:700;
  color: var(--ink-1000);
}
.elementor-accordion .elementor-tab-content{
  background: var(--surface-0);
  color: var(--ink-700);
  padding: 0 1.2rem 1rem;
}

/* 13) Tableaux, listes */
ul{padding-left: 1.2rem;}
ul li{margin-bottom:.4rem;}
ol{padding-left:1.2rem;}
ol li{margin-bottom:.35rem;}

/* 14) Formulaires (Elementor) */
.elementor-field-group .elementor-field, 
.elementor-field-group .elementor-select-wrapper select{
  border-radius: var(--radius-m);
  border:1px solid var(--line-300);
  background:#fff;
}
.elementor-field-group .elementor-field:focus{
  border-color: color-mix(in oklab, var(--perform-accent) 35%, var(--line-300));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--perform-accent) 24%, transparent);
  outline:0;
}

/* 15) Header / menu (si tu ajoutes la classe .site-header à ta section header) */
.site-header{
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line-300);
}
.site-header.is-stuck{ box-shadow: var(--shadow-s); }

/* 16) Dark mode section (optionnel, ajoute .bg-dark) */
.bg-dark .elementor-heading-title,
.bg-dark h1,.bg-dark h2,.bg-dark h3{ color:#fff; }
.bg-dark p, .bg-dark li{ color: color-mix(in oklab, white 78%, var(--ink-1000)); }
.bg-dark .btn-ghost .elementor-button,
.bg-dark .elementor-button.btn-ghost{ border-color:#fff; color:#fff; }
.bg-dark .btn-ghost .elementor-button:hover,
.bg-dark .elementor-button.btn-ghost:hover{ background:#fff; color: var(--ink-1000); }

/* 17) Helpers responsive pour images hero */
.img-cover img{ width:100%; height:100%; object-fit:cover; border-radius: inherit; }

/* 18) Lien de "skip to content" pour accessibilité (si présent) */
.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#fff; padding:.5rem 1rem; border-radius: var(--radius-m); box-shadow: var(--shadow-s); }

/* 19) Ratios d’usage (indicatif): 70% neutres / 20% noir profond / 10% accent *//* End custom CSS */