/* polices particulières */
@font-face {
    font-family: "titre";
    src: url('fonts/cormorantgaramond.woff2') format('woff2'),
        url('fonts/cormorantgaramond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "texte";
    src: url('fonts/lato.woff2') format('woff2'),
        url('fonts/lato.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* gère les variables*/
:root {
    --fond1: #F7F3E8;
    --fond2: #EFE7DA;
    --fond3: #E6DDCE;
    --fond4: #DCCFBF;
    --fond5: #D1C2B0;
    --fond6: #C6B5A1;

    --trans1: rgba(255, 255, 255, 0.9);

    --trait1: #2B1F18;
    --trait2: #3A2B23;
    --trait3: #4A372E;
    --trait4: #5A463A;
    --trait5: #6A5648;
    --trait6: #7A6656;

    --ombre1: 0 2px 6px rgba(42, 36, 30, 0.06);
    --ombre2: 0 6px 16px rgba(42, 36, 30, 0.12);
    --ombre3: 0 12px 28px rgba(42, 36, 30, 0.18);

    --accent1: #E07A2A;
    --accent2: #C65F18;
    --accent3: #8A3E12;

    --succes: #3D8A5A;
    --info: #2A9DAF;
    --attention: #D99A2F;
    --alerte: #D14B3A;

    --fondSansImage: var(--trait2);
    --fondSansImageDegrade: linear-gradient(180deg, color-mix(in srgb, var(--trait2) 90%, transparent) 0%, color-mix(in srgb, var(--fond2) 90%, transparent) 100%);
    --traitSansImage: var(--fond1);

    --fondEntete: var(--trans1);
    --traitEntete: var(--trait1);
    --ombreEntete: var(--ombre1);

    --fondBouton: var(--fond1);
    --fondBouton-hover: var(--fond3);
    --fondBouton-active: var(--fond5);
    --traitBouton: var(--trait2);

    --fondBordure: var(--fond6);
    --traitBordure: var(--trait6);

    --fondAccent: var(--accent1);
    --traitAccent: var(--fond1);

    --texteAccent: var(--accent3);

    --lien: var(--accent1);
    --lien-hover: var(--accent2);
    --lien-active: var(--accent3);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond1: #111122;
        --fond2: #222233;
        --fond3: #333344;
        --fond4: #444455;
        --fond5: #555566;
        --fond6: #666677;

        --trans1: rgba(20, 20, 40, 0.9);

        --trait1: #E6E6F2;
        --trait2: #D8D8E6;
        --trait3: #C8C8D8;
        --trait4: #BABACB;
        --trait5: #ACACBD;
        --trait6: #9E9EAF;

        --ombre1: 0 2px 6px rgba(230, 236, 242, 0.06);
        --ombre2: 0 6px 16px rgba(230, 236, 242, 0.12);
        --ombre3: 0 12px 28px rgba(230, 236, 242, 0.18);

        --fondSansImage: var(--fond2);
        --fondSansImageDegrade: linear-gradient(180deg, color-mix(in srgb, var(--fond1) 90%, transparent) 0%, color-mix(in srgb, var(--fond3) 90%, transparent) 100%);
        --traitSansImage: var(--trait1);

        --fondEntete: var(--trans1);
        --traitEntete: var(--trait1);
        --ombreEntete: var(--ombre1);

        --fondBouton: var(--trait1);
        --fondBouton-hover: var(--trait2);
        --fondBouton-active: var(--trait3);
        --traitBouton: var(--fond1);

        --fondBordure: var(--fond6);
        --traitBordure: var(--trait6);

        --fondAccent: var(--accent1);
        --traitAccent: var(--trait1);
    }
}

/* crée une structure centrée */
body {
    margin: 0;
    padding: 0;
    background-color: var(--fond1);
    color: var(--trait1);
    font-family: 'texte', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* en-tête de la page fixe */
#entetePage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    border-radius: 0 0 1rem 1rem;
    width: calc(100vw - 2rem);
    height: calc(90px - 2rem);
    background-color: var(--fondEntete);
    color: var(--traitEntete);
    fill: var(--traitEntete);
    box-shadow: var(--ombreEntete);
    display: flex;
    align-items: center;
    z-index: 1000;
}

.boutonMenu {
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bouton.boutonIcone {
    padding: 0 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.logoTitre {
    flex: 1;
    margin: 0;
    text-align: center;
}

.logoTitre p {
    margin: 0;
    font-size: 1rem;
}

.logoTitre em {
    font-size: 0.5rem;
}

.connecte {
    fill: var(--fondAccent);
}

.succes {
    color: var(--succes);
}
.info {
    color: var(--info);
}
.attention {
    color: var(--attention);
}
.alerte {
    color: var(--alerte);
}

.dessusDessous {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* menu de navigation */
.menuPrincipal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 20px;
}

.blocMenu {
    padding: 15px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.titreMenu {
    font-family: "titre";
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.liensMenu {
    display: flex;
    flex-direction: column;
    /* vertical par défaut */
    gap: 8px;
}

.liensMenu a {
    text-decoration: none;
    font-size: 0.95rem;
}

.liensMenu a:hover {
    text-decoration: underline;
}

/* titres, textes, ... */
h1,
h2,
h3 {
    font-family: "titre", serif;
}

h1,
article h1,
section h1,
aside h1,
nav h1 {
    margin: 1.75rem 0;
    font-size: 2.4rem;
    text-align: center;
}

h2,
article h2,
section h2,
aside h2,
nav h2 {
    font-size: 1.8rem;
}

p,
em {
    font-size: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
}

/* accroche (texte sur image) */
.logoDI {
    /* svg */
    flex-shrink: 0;
}

.accroche {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--fondSansImage);
    background-image: var(--fondSansImageDegrade);
    color: var(--traitSansImage);
}

.accroche>picture,
.accroche>video {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.accroche>video {
    object-fit: cover;
}

.accroche>picture>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accroche>div {
    position: relative;
    z-index: 2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.accroche,
.accroche>div {
    min-height: 10vh;
}

/* contenu de la page */
body>main {
    flex: 1;
    margin-bottom: 7rem;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
}

main>nav {
    margin: 0 auto;
}

/* blocs */
.blocs {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 3rem;
}

.bloc {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--fond3);
    color: var(--trait3);
    box-shadow: 0 2px 8px rgba(128, 128, 128, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenu {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contenu ul,
.contenu ol {
    padding: 1rem;
    width: 100%;
}

/* adaptations selon largeur */
@media (min-width: 460px) {

    /* écran supérieur à*/
    h1,
    article h1,
    section h1,
    aside h1,
    nav h1 {
        font-size: 3rem;
    }

    h2,
    article h2,
    section h2,
    aside h2,
    nav h2 {
        font-size: 2rem;
    }

    h3,
    article h3,
    section h3,
    aside h3,
    nav h3 {
        font-size: 1.2rem;
    }

    p,
    em,
    li {
        font-size: 1.1rem;
    }

    em {
        width: 100%;
    }

    small {
        font-size: 1rem;
    }

    .logoTitre p {
        font-size: 1.3rem;
    }

    .logoTitre em {
        font-size: 0.8rem;
    }
}