/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

hr {
    border:none;
}
/* A elements that don't have a class get default styles */
/*
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}
*/

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* The Cover - Vertical centering */
/* https://every-layout.dev/layouts/cover/ */

.l_cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--l_cover__size, 100vh);
    padding: 1rem;
}

.l_cover>* {
    margin-block: 1rem;
}

.l_cover> :first-child:not(.l_cover__main) {
    margin-block-start: 0;
}

.l_cover> :last-child:not(.l_cover__main) {
    margin-block-end: 0;
}

.l_cover>.l_cover__main {
    margin-block: auto;
}

/* The Center - horizontal centering */
/* https://every-layout.dev/layouts/center/ */

.l_center {
    max-inline-size: var(--l_center__size, 65ch);
    margin-inline: auto;
}

/* @link https://utopia.fyi/type/calculator?c=300,19,1.17,1100,19,1.43,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.5807rem, 0.975rem + -0.5735vw, 0.8675rem);
    --step--1: clamp(0.8304rem, 1.0842rem + -0.3691vw, 1.015rem);
    --step-0: clamp(1.1875rem, 1.1875rem + 0vw, 1.1875rem);
    --step-1: clamp(1.3894rem, 1.2736rem + 0.6175vw, 1.6981rem);
    --step-2: clamp(1.6256rem, 1.3245rem + 1.6055vw, 2.4283rem);
    --step-3: clamp(1.9019rem, 1.3129rem + 3.1412vw, 3.4725rem);
    --step-4: clamp(2.2252rem, 1.1976rem + 5.4809vw, 4.9657rem);
    --step-5: clamp(2.6035rem, 0.917rem + 8.9947vw, 7.1009rem);
    --step-6: clamp(3.0461rem, 0.3806rem + 14.2163vw, 10.1543rem);
  }

  
/* @link https://utopia.fyi/space/calculator?c=300,10,1.067,1100,20,1.067,6,2,&s=0.75|0.5|0.25,1.2|1.6|2.2|3.3|5,s-xl&g=s,l,xl,12 */

:root {
    --space-3xs: clamp(0.1875rem, 0.1406rem + 0.25vw, 0.3125rem);
    --space-2xs: clamp(0.3125rem, 0.1953rem + 0.625vw, 0.625rem);
    --space-xs: clamp(0.5rem, 0.3359rem + 0.875vw, 0.9375rem);
    --space-s: clamp(0.625rem, 0.3906rem + 1.25vw, 1.25rem);
    --space-m: clamp(0.75rem, 0.4688rem + 1.5vw, 1.5rem);
    --space-l: clamp(1rem, 0.625rem + 2vw, 2rem);
    --space-xl: clamp(1.375rem, 0.8594rem + 2.75vw, 2.75rem);
    --space-2xl: clamp(2.0625rem, 1.2891rem + 4.125vw, 4.125rem);
    --space-3xl: clamp(3.125rem, 1.9531rem + 6.25vw, 6.25rem);
  
    /* One-up pairs */
    --space-3xs-2xs: clamp(0.1875rem, 0.0234rem + 0.875vw, 0.625rem);
    --space-2xs-xs: clamp(0.3125rem, 0.0781rem + 1.25vw, 0.9375rem);
    --space-xs-s: clamp(0.5rem, 0.2188rem + 1.5vw, 1.25rem);
    --space-s-m: clamp(0.625rem, 0.2969rem + 1.75vw, 1.5rem);
    --space-m-l: clamp(0.75rem, 0.2813rem + 2.5vw, 2rem);
    --space-l-xl: clamp(1rem, 0.3438rem + 3.5vw, 2.75rem);
    --space-xl-2xl: clamp(1.375rem, 0.3438rem + 5.5vw, 4.125rem);
    --space-2xl-3xl: clamp(2.0625rem, 0.4922rem + 8.375vw, 6.25rem);
  
    /* Custom pairs */
    --space-s-xl: clamp(0.625rem, -0.1719rem + 4.25vw, 2.75rem);
  }
  
:root {
    --color-primary: #00023c;
    --color-secondary: #ff9e1b;

    /* utlilisé ? */
    --color-light: white;
    --color-dark: black;
}


body {
    background: var(--color-light);
    color: var(--color-primary);
    font-size: var(--step-0);
    font-family: sans-serif;
    max-width: 108ch;
    margin: auto;
}

h1 {
    margin: var(--space-s);
    font-size: var(--step-5);
    color: var(--color-secondary);
}

h2 {
    margin: var(--space-s);
    font-size: var(--step-3);
    color: var(--color-secondary);
    text-align: right;
}

hr {
    border-top: var(--color-secondary) var(--space-3xs) solid;
}

h2 em {
    color: var(--color-primary);
}

.hero {
    margin: var(--space-s);
    padding: var(--space-s);
    border: var(--color-secondary) var(--space-3xs) solid;
    border-radius: var(--space-m);
}

div.emphasis {
    margin: var(--space-s);
    padding: var(--space-s);
    font-size: var(--step-1);
    color: var(--color-light);
    background-color: var(--color-secondary);
    border-radius: var(--space-m);
}

div.emphasis ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}


.flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.flow .card {
    flex: 1 1;
}

.card {
    margin: var(--space-s);
    padding: var(--space-s);
    border: var(--color-secondary) var(--space-3xs) solid;
    border-radius: var(--space-m);
    min-width: 22ch;
    hyphens: auto;
}

.card__head {
    font-size: var(--step-1);
}


.card ul {
    margin: 0;
}

.u_txtcenter {
    text-align: center;
}

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0rem;
    --threshold: 35rem;
}

.switcher>* {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}


.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
}

.with-sidebar> .sidebar {
    flex-grow: 1;
    max-inline-size: var(--step-6);
}

.with-sidebar> .content {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 60%;
}

/* ---- CSS Utilities ---- */

.u_ta-center {
    text-align: center;
}

.u_ta-right {
    text-align: right;
}

.u_list-style-none {
    list-style: none;
}

.u_reset-marg-pad {
    margin: 0;
    padding: 0;
}

.u_margin-inline-auto {
    margin-inline: auto;
}

.u_text-decoration-none {
    text-decoration: none;
}

.u_empty_list-style {
    list-style-type: '';
}

.u_text-align-center{
    text-align: center
}