/*
    base.css - reset + grille

    Remplace Bootstrap 5.3.8 (232 Ko) qui n'etait charge que pour son reset
    (Reboot) et cinq classes de grille : .container, .row, .col-md-5,
    .col-md-7, .col-md-12. Tout le reste du framework partait sur le fil a
    chaque visite sans jamais servir.

    Les valeurs reproduisent Reboot et la grille Bootstrap a l'identique pour
    les elements reellement presents dans les pages : le rendu est inchange.

    Charge avant main.css, exactement a la place qu'occupait Bootstrap, pour
    que la cascade reste la meme.
*/

/* ---------- reset (equivalent Reboot) ---------- */

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

body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul, ol {
    padding-left: 2rem;
}

ul, ol, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
}

b, strong { font-weight: bolder; }

small { font-size: 0.875em; }

a { color: inherit; }

img, svg { vertical-align: middle; }

table {
    caption-side: bottom;
    border-collapse: collapse;
}

th { text-align: inherit; }

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
}

pre, code, kbd, samp {
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: 1em;
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button, select { text-transform: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button { border-radius: 0; }

textarea { resize: vertical; }

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

[hidden] { display: none !important; }

/* ---------- grille ---------- */

.container {
    --gutter-x: 1.5rem;
    width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
    --gutter-x: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x) * -0.5);
    margin-left: calc(var(--gutter-x) * -0.5);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
}

@media (min-width: 768px) {
    .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}