/* ==========================================================
   IMPAXO
   Base CSS
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

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


/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    /* Couleurs */

    --color-primary:#02234C;
    --color-secondary:#0E4C63;
    --color-support:#476584;
    --color-gold:#D7A33D;

    --color-background:#EEF5F8;
    --color-surface:#FFFFFF;

    --color-text:#02234C;
    --color-title:#02234C;

    --color-border:#DCE6EC;

    /* Typographie */

    --font-family:"Segoe UI",Arial,sans-serif;

    --font-size-base:19px;

    --line-height:1.75;

    /* Dimensions */

    --container-width:1400px;

    --content-width:980px;

    --header-height:88px;

    --left-band-width:110px;

}


/* ==========================================================
   BASE
   ========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-family);

    font-size:var(--font-size-base);

    line-height:var(--line-height);

    color:var(--color-text);

    background:var(--color-background);

}


/* ==========================================================
   LIENS
   ========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:.20s;

}

a:hover{

    color:var(--color-secondary);

}


/* ==========================================================
   IMAGES
   ========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ==========================================================
   CONTENEUR
   ========================================================== */

.container{

    width:min(100% - 80px,var(--container-width));

    margin:auto;

}


/* ==========================================================
   CORPS DES PAGES
   ========================================================== */

.page{

    position:relative;

    background:var(--color-background);

    overflow:hidden;

}


/* Bande verticale */

.page::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:var(--left-band-width);

    height:100%;

    background:var(--color-primary);

}


/* ==========================================================
   CARTE DE CONTENU
   ========================================================== */

.page .container{

    position:relative;

    background:var(--color-surface);

    min-height:400px;

    padding:

        60px
        90px
        70px
        90px;

}


/* ==========================================================
   TITRES
   ========================================================== */

h1{

    font-size:2.55rem;

    font-weight:700;

    color:var(--color-title);

    margin-bottom:55px;

}

h2{

    font-size:2rem;

    font-weight:700;

    color:var(--color-title);

    margin-top:55px;

    margin-bottom:22px;

}

h3{

    font-size:1.45rem;

    font-weight:700;

    color:var(--color-title);

}


/* ==========================================================
   PARAGRAPHES
   ========================================================== */

p{

    margin-bottom:22px;

}


/* ==========================================================
   CITATIONS
   ========================================================== */

blockquote{

    margin:40px 0;

    padding-left:22px;

    border-left:4px solid var(--color-gold);

    color:var(--color-secondary);

    font-style:italic;

    font-size:1.18rem;

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:var(--color-support);

    color:#FFFFFF;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1200px){

    :root{

        --left-band-width:80px;

    }

    .page .container{

        padding:55px;

    }

}

@media (max-width:900px){

    :root{

        --left-band-width:0;

        --font-size-base:18px;

    }

    .container{

        width:min(100% - 40px,var(--container-width));

    }

    .page .container{

        padding:40px 30px;

    }

    h1{

        font-size:2.1rem;

        margin-bottom:35px;

    }

    h2{

        font-size:1.65rem;

        margin-top:40px;

    }

}

.page{

    position:relative;

    background:var(--color-background);

    overflow:hidden;

    flex:1;

}