:root{
  
  --brume:        #E9EBEA;   
  --corde:        #F7F5F1;   
  --suie:         #14161A;   
  --signal:       #F2811E;   
  
  --signal-rgb:   242,129,30;
  --vert-de-gris: #1F988A;   

  --encre-80: rgba(20,22,26,.80);
  --encre-72: rgba(20,22,26,.72);
  --encre-64: rgba(20,22,26,.64);
  --encre-48: rgba(20,22,26,.48);
  --encre-22: rgba(20,22,26,.22);
  --encre-12: rgba(20,22,26,.12);

  --champ-bord:       #CFCFCF;
  --champ-bord-focus: #9A9A9A;

  --ombre-basse:  0 2px 10px rgba(var(--signal-rgb),.10);
  --ombre-haute:  0 18px 40px rgba(var(--signal-rgb),.16);

  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-corps:   'Public Sans', system-ui, -apple-system, sans-serif;
  --f-data:    'IBM Plex Mono', ui-monospace, monospace;

  --t-micro: .75rem;
  --t-petit: .875rem;
  --t-corps: 1rem;
  --t-md:    1.414rem;
  --t-lg:    2rem;
  --t-xl:    clamp(2.2rem, 4.5vw, 2.83rem);
  --t-2xl:   clamp(2.8rem, 7vw, 4rem);
  --t-3xl:   clamp(2.9rem, 8vw, 4.4rem);

  --grain: .5;           
  --coin: 22px;          
  --bord: 1.5px;
  --marge-cote: 68px;    

  --gap-xs: .5rem;   --gap-s: 1rem;    --gap-m: 1.6rem;
  --gap-l: 2.6rem;   --gap-xl: 4rem;
  --section: clamp(3rem, 8vw, 6.5rem);
  --page: 1240px;

  --e-sortie: cubic-bezier(.19,1,.22,1);      
  --e-menu:   cubic-bezier(.22,1,.36,1);      
  --d-court:  .18s;
  --d-moyen:  .34s;
  --d-menu:   .38s;   
  --d-liens:  .8s;    
  --pas-liens:.2s;    
  --defile-vitesse: 26;   
}

@media (max-width: 640px){
  :root{ --coin: 14px; --marge-cote: 52px; }
}