:root {
  /* Couleurs */
  --blue:#1069f9;
  --sand:#ede7d1;
  --neutral-300:#c4c4c2;
  --neutral-200:#e8e8e8;
  --ink:#121826;
  --text:#2b2f3a;
  --muted:#667085;
  --bg:#fff;

  /* UI */
  --radius:18px;
  --outline-w:2px;
  --card-stroke: rgba(16,105,249,.18);
  --chip-border:#e6e9ef;

  /* Typo globale */
  --font-title:"UTM Micra","Hero New",Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-body:"Hero New",Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* Échelle typographique globale */
  --fs-xxl:clamp(36px,6vw,56px);
  --fs-xl: clamp(28px,4vw,38px);
  --fs-lg: clamp(20px,2.4vw,24px);
  --fs-h4: clamp(16px, 2vw, 18px);
  --fs-md: clamp(16px,1.6vw,18px);
  --fs-sm: clamp(13px,1.2vw,14.5px);
  --lh-tight:1.15;
  --lh-title:1.22;
  --lh-copy:1.65;
}

/* =======================
   Typographie globale
   ======================= */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-copy);
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  letter-spacing:-.01em;
  text-wrap:balance;
  color: var(--ink);
}

h1 {
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  font-weight: 800;
  margin-block: .25rem .8rem;
}

h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-title);
  font-weight: 700;
  margin-block: .2rem .6rem;
}

h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.28;
  margin-block: .2rem .35rem;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-block: .2rem .4rem;
}



.floating-zoho-logo {
  position: fixed;
  bottom: 20px;       /* Distance du bas de la fenêtre : ajustable */
  right: 20px;        /* Distance du bord droit : ajustable */
  width: clamp(80px, 10vw, 120px); /* adaptable selon écran */
  z-index: 1000;      /* s’assure qu’il soit au-dessus des autres éléments */
  opacity: 0.8;       /* légèrement transparent pour ne pas être trop envahissant */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-zoho-logo img {
  width: 100%;        /* adapte l’image au conteneur */
  height: auto;
  display: block;
}

.floating-zoho-logo:hover {
  opacity: 1;
  transform: scale(1.05); /* léger zoom au survol */
}

/* Responsive : peut cacher ou réduire le logo sur petits écrans */
@media (max-width: 600px) {
  .floating-zoho-logo {
    width: clamp(60px, 15vw, 80px);
    bottom: 15px;
    right: 15px;
  }
}

/* =======================
   Utilitaires globaux
   ======================= */

/* 1) Texte en dégradé AVEC fallback fiable (corrige "La , levier...") */
.text-gradient{
  /* fallback universel si le clip n'est pas supporté (Zoho builder, vieux WebKit, etc.) */
  color: var(--blue);
  font-weight: 800;
}
@supports (-webkit-background-clip:text) {
  .text-gradient{
    background: linear-gradient(90deg, var(--blue), color-mix(in oklab, var(--blue) 65%, white));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* évite certains bugs d'affichage inline */
  }
}

/* 2) Liens "très cliquables" (retour de ton amie) */
.link-strong{
  color: var(--blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.link-strong:hover{ color: color-mix(in oklab, var(--blue) 85%, black); }

/* 3) Optionnel : chiffres de KPI avec le même fallback que .text-gradient */
.kpi .num{
  color: var(--blue);
  font-weight: 900;
  font-family: var(--font-title);
}
@supports (-webkit-background-clip:text) {
  .kpi .num{
    background: linear-gradient(90deg, var(--blue), color-mix(in oklab, var(--blue) 65%, white));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}