:root {  
  /* Gradients horizontaux (90deg) */
  --gradient-fresh: linear-gradient(90deg, var(--vert-sauge), var(--vert-turquoise), var(--jaune));
  --gradient-warm: linear-gradient(90deg, var(--jaune), var(--orange), var(--rose));
  --gradient-nature: linear-gradient(90deg, var(--vert-sauge), var(--vert-turquoise));
  --gradient-sunset: linear-gradient(90deg, var(--orange), var(--rose), var(--beige));
  --gradient-full: linear-gradient(90deg, var(--vert-sauge), var(--vert-turquoise), var(--jaune), var(--orange), var(--rose));
  
  /* Gradients verticaux (180deg) */
  --gradient-fresh-v: linear-gradient(180deg, var(--vert-sauge), var(--vert-turquoise), var(--jaune));
  --gradient-warm-v: linear-gradient(180deg, var(--jaune), var(--orange), var(--rose));
  --gradient-nature-v: linear-gradient(180deg, var(--vert-sauge), var(--vert-turquoise));
  
  /* Gradients diagonaux (135deg) */
  --gradient-fresh-d: linear-gradient(135deg, var(--vert-sauge), var(--vert-turquoise), var(--jaune));
  --gradient-warm-d: linear-gradient(135deg, var(--jaune), var(--orange), var(--rose));
  --gradient-nature-d: linear-gradient(135deg, var(--vert-sauge), var(--vert-turquoise));
  
  /* Gradients radiaux */
  --gradient-fresh-r: radial-gradient(circle, var(--vert-turquoise), var(--vert-sauge));
  --gradient-warm-r: radial-gradient(circle, var(--jaune), var(--orange), var(--rose));
  
  /* Gradients subtils (avec transparence) */
  --gradient-overlay-light: linear-gradient(90deg, rgba(77, 138, 128, 0.1), rgba(8, 192, 146, 0.1), rgba(248, 222, 101, 0.1));
  --gradient-overlay-medium: linear-gradient(90deg, rgba(77, 138, 128, 0.3), rgba(8, 192, 146, 0.3), rgba(248, 222, 101, 0.3));
}

/* Exemples d'utilisation */

/* Bordure avec gradient */
.gradient-border {
  border: 3px solid transparent;
  border-image: var(--gradient-fresh) 1;
}

/* Ligne horizontale <hr> */
hr.gradient-line {
  height: 3px;
  border: none;
  background: var(--gradient-fresh);
  margin: 2rem 0;
}

/* Trait de soulignement */
.gradient-underline {
  background: var(--gradient-fresh);
  height: 3px;
  width: 100%;
  margin-top: 0.5rem;
}

/* Bordure du bas */
.gradient-border-bottom {
  border-bottom: 4px solid;
  border-image: var(--gradient-warm) 1;
}

/* Background avec gradient */
.gradient-bg {
  background: var(--gradient-fresh);
}

/* Texte avec gradient */
.gradient-text {
  background: var(--gradient-fresh);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Bordure de photo avec gradient */
.gradient-photo-border {
  border: 4px solid transparent;
  border-radius: 50%;
  background-origin: border-box;
  background-clip: content-box, border-box;
  background-image: linear-gradient(white, white), var(--gradient-fresh);
}

/* Séparateur décoratif */
.gradient-separator {
  width: 100px;
  height: 4px;
  background: var(--gradient-nature);
  margin: 1.5rem auto;
  border-radius: 2px;
}

/* Box avec bordure gradient */
.gradient-box {
  position: relative;
  padding: 2rem;
  background: white;
}

.gradient-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: var(--gradient-fresh);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}