/* ====== CSS Variables - Design Tokens ====== */
:root {
    /* Color Palette */
    --Norme-AA-bleu-principal-2: #0070e1;
    --Norme-AA-bleu-principal-2-Noir-30:#004E9D;
    --Norme-AA-bleu-principal-2-Blanc-30:#4D9BEA;
    --Norme-AA-bleu-principal-2-Blanc-60:#99C6F3;
    --Norme-AA-bleu-principal-2-Blanc-80:#CCE2F9;

    --Norme-AA-bleu-principal-1: #00807f;
    --Norme-AA-bleu-principal-1-Noir-30ir:#005A59;
    --Norme-AA-bleu-principal-1-Blanc-30:#4DA6A5;

    --Norme-AA-background-bleu: #f5faff;

    --Cat-Noir-Noir-100: #000000;
    --Cat-Noir-Noir-50:#00000080;

    --Cat-Blanc-Blanc-100:#ffffff;
    --Cat-Blanc-Blanc-90:#FFFFFFE6;
    --Cat-Blanc-Blanc-80:#FFFFFFCC;
    --Cat-Blanc-Blanc-60:#FFFFFF99;

    --Cat-Gris-Gris-5: #e0e0e0;
    --gris-light: rgba(255, 255, 255, 0.9);

    --Degrad-Sagemcom-Norme-AA: linear-gradient(90deg, var(--Norme-AA-bleu-principal-2) 0%, var(--Norme-AA-bleu-principal-1) 100%);
   --survol-Degrad-Sagemcom-Norme-AA:linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), linear-gradient(90deg, var(--Norme-AA-bleu-principal-2) 0%, var(--Norme-AA-bleu-principal-1) 100%);
   --active-Degrad-Sagemcom-Norme-AA:linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%), linear-gradient(90deg, var(--Norme-AA-bleu-principal-2) 0%, var(--Norme-AA-bleu-principal-1) 100%);
   --degrade-fondimage: radial-gradient(70.59% 50% at 50% 50%, #0071BC 0%, #032A3F 100%);

    
    /* Typography */
    --font-family: 'Montserrat', sans-serif;
    --H1: 48px;
    --H2: 36px;
    --H3: 28px;
    --H4: 24px;
    --H5:20px;
  
    --corps: 16px;
    --chiffre:36px;
    --grand-texte:20px;
    --petit-texte: 14px;
    --lgende: 12px;
    --line-height: normal;
    
    /* Spacing Scale */
    --Spacing-scale-sp-1: 4px;
    --Spacing-scale-sp-2: 8px;
    --Spacing-scale-sp-3: 12px;
    --Spacing-scale-sp-4: 16px;
    --Spacing-scale-sp-5: 24px;
    --Spacing-scale-sp-6: 32px;
    
    /* Layout */
    --Spacing-scale-Marge-Left-Right: 80px;
    --Spacing-scale-Marge-Top-Bottom: 64px;
    --max-width: 1440px;
    
    /* Borders & Radius */
    --Corner-s: 8px;
    --Corner-arrondi: 999px;
}

html, body {
    font-family: var(--font-family);
    color: var(--Cat-Noir-Noir-100);
    background-color: var(--Cat-Blanc-Blanc-100);
    line-height: var(--line-height);
    font-size:var(--corps);
    font-weight:normal;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  line-height:var(--line-height);
}

@media (max-width:1024px) {
    :root{
       --H1: 40px;
       --H2: 32px;
       --H3: 24px;
       --H4: 22px;
       --H5: 18px;

       --chiffre:24px;
       --Spacing-scale-sp-5:20px;

       --Spacing-scale-Marge-Left-Right: 161px;
       --Spacing-scale-Marge-Top-Bottom: 48px;
    }
}
@media (max-width:768px){
   :root{
   	--H1: 32px;
	--H2: 28px;
	--H3: 24px;
	--H4: 20px;
	--H5:18px;
	--chiffre:28px;
  	--Spacing-scale-Marge-Left-Right: 20px;
	--Spacing-scale-Marge-Top-Bottom: 48px;
   }
}

@media (max-width: 1440px) {
    :root {
        --max-width: 100vw;
    }
}

@media (min-width:1441px){

	section >div.container-section,
	section > div.section-content{
		max-width:1440px;
	
	}
}