$font-extra: 2.3rem; $font-large: 1.6rem; $font-big: 1rem; $font-medium: .8rem; $font-normal: .6rem; $font-small: .45rem; $col-met: #28429f; $col-eur: #646578; $col-mond: #ab9569; $col-ter: #e01a35; $col-2: #4dabc1; //popsu 1 : programme 2 ? $col-1: #61ab32; $col-transition:#2aa088; $col-exode:$col-ter; $bck-col: #eff2f9; $lightblue: #98d0d9; $trame: center/80% linear-gradient(rgba(239,242,249,.5), rgba(239,242,249,.5)), url(../../images/motif_croix.svg) ; $trame_white: center/80% linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(../../images/motif_croix.svg) ; @media (min-width: 48rem) { :root { font-size: calc(1rem + ((1vw - .48rem) * 1.389)); /* .48rem = viewportWidthMinimum /100 */ /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } } @media (min-width: 120em) { :root { font-size: 2rem; } }