/*=======================================
VARIABLE.CSS - LDT Design
Toutes les variables  CSS du projet
=======================================*/

:root{

  /* --- COULEUR ---- */

--color-primary:        #00666C; /* Alexandrite */
--color-primary-middle: #017C91; /* transformative teal */
--color-primary-light:  #66C1BF; /* turquoise clair */
--color-accent :        #D36A2A; /* orange/terra cotta */
--color-gold:           #FCBE0C; /* Jaune doré footer */
--color-red:            #D8273E; /*rouge cerise*/

--color-white:          #ffffff; 
--color-bg:             #f9f9f9; /* Fond générale */
--color-bg-section:     #f2f2f2; /* Fond section alternées */
--color-bg-tem:         #F5F3EE; /*Fond section temoignage*/
--color-text:           #2c2c2c; /* Texte principale */
--color-text-light:     #666666; /* Texte secondaire */
--color-text-muted:     #999999; /* Texte discret */
--color-border:         #e0e0e0; /* bordure */

/* --- TYPOGRAPHIE --- */

--font-heading: 'sofia-pro-soft', 'Trebuchet MS', sans-serif; /* Adobe font -- titre */
--font-body:    'Noto Sans', Helvetica, sans-serif; /* google font -- autre texte */

--fs-xs:    0.75rem;      /* 12px */
--fs-sm:    0.875rem;     /* 14px */
--fs-base:  1rem;         /* 16px */
--fs-md:    1.125rem;     /* 18px */
--fs-lg:    1.25rem;      /* 20px */
--fs-xl:    1.5rem;       /* 24px */
--fs-2xl:   2rem;         /* 32px */
--fs-3xl:   2.5rem;       /* 40px */
--fs-4xl:  clamp(2rem, 5vw, 3.5rem);  /* Responsive */

--fw-regular: 400;
--fw-medium:  500;
--fw-bold:    700; 

--lh-tight:   1.2;        /* ligne serrées */
--lh-normal:  1.5;        /* ligne normales */
--lh-loose:   1.8;        /* ligne espacés  */

/* ---- ESPACEMENT ---- */ 
--space-xs:   0.25rem;    /* 4px */
--space-sm:   0.5rem;     /* 8px */
--space-md:   1rem;       /* 16px */
--space-lg:   1.5rem;     /* 24px */
--space-xl:   2rem;       /* 32px */
--space-2xl:  3rem;       /* 48px */
--space-3xl:  4rem;       /* 64px */
--space-4xl:  6rem;       /* 96px */

/* Section padding responsive */
--section-padding: clamp(3rem, 7vw, 6rem);

/* ---  LAYOUT --- */
--max-width:       1200px;
--container-px:    clamp(1rem,  5vw, 2rem);
--navbar-height:   100px;

/* --- BORDURES --- */
--radius-sm:    4px;
--radius-md:    8px;
--radius-lg:    16px;
--radius-xl:    24px;
--radius-full:  9999px;

/* --- OMBRE --- */
--shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
--shadow-md:   0 4px 16px rgba(0,0,0,0.10);
--shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
--shadow-card: 0 2px 12px rgba(42,140,140,0.10);

/* --- TRANSITION --- */
--transition-fast:   0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow:   0.5s ease;

/* --- z-index --- */
--z-base:    1;
--z-overlay: 10;
--z-modal:   100;
--z-navbar:  1000;

}