:root {
    /* NAV */
    --gap-link-nav: 70px;
    --gap-link-nav-row: 20px;
    --nav-size: calc(1rem + 0.15vw);
    --nav-icon: 15px;
    --nav-iconPlus: 5px;

    /* FOOTER */
    --footer-padding: 0 calc(10rem + 0.25vw);

    /* GOUTIER SITE */
    --goutier-margin: 0 0px;
    --goutier-padding: 0 65px;

    /* COLOR */
    --black: #2F2F2F;
    --white: #fff;
    --primary: #005686;
    --secondary: #009CDE;
    --footer-bgc: #f1f1f1;
    --gris: #CCCCCC;
    /* FONT */
    --parag: calc(1rem + 0.15vw);
    --title: 50px;
    --second-title: 35px;

    --ligth: 200;
    --regurlar: 400;
    --bold: 800;

    /* Marge & padding */
    --mg-ligth: 0 20px;
    --mg-standard: 0 40px;
    --mg-large: 0 80px;

    --section-margin-top: 75px;
    --title-margin-bottom: 50px;

    /* BOUTON  */
    --size-btn: 20px;
    --btn-paddings: 5px;
    --btn-weight: 600;
    --btn-border-px: 2px;
    --btn-border-line: solid;
    --btn-radius: 4px;
    --btn-width: 180px;
    --btn-text-align: center;
    --btn-padding: 5px;

    /* border radius*/
    --border-radius: 4px;

    /* LOGO */
    --nav-logo-h: 35px;
    --nav-logo-w: auto;
    --btn-logo: 115px;

    /* ANIMATION */
    --anime-time: all .35s;


    /* Bento design */
    --grid-inspi-marge: 20px;
    --grid-inspi-marge-r: 20px;

    /* Block Inspiration Bento ( GRID ) Début */
    --grid-inspi-columns: repeat(4, 1fr);
    --grid-inspi-rows: repeat(2, 300px);
    --grid-inspi-1: 1 / 1 / 2 / 3;
    --grid-inspi-2: 2 / 1 / 3 / 2;
    --grid-inspi-3: 2 / 2 / 3 / 3;
    --grid-inspi-4: 1 / 3 / 3 / 5;

    /* Block Inspiration Bento ( GRID ) Fin */
    /* Block catalogue bento ( GRID ) Debut */
    --grid-catalogue-columns: repeat(10, 1fr);
    --grid-catalogue-rows: repeat(2, 300px);
    --grid-area-1: 1 / 1 / 2 / 4;
    --grid-area-2: 1 / 4 / 2 / 7;
    --grid-area-3: 1 / 7 / 2 / 11;
    --grid-area-4: 2 / 1 / 3 / 5;
    --grid-area-5: 2 / 5 / 3 / 8;
    --grid-area-6: 2 / 8 / 3 / 11;

}

@media screen and (max-width:1440px) {
    :root {
        --footer-padding: 0 calc(5rem + 0.25vw);
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --gap-link-nav: 30px;
        --gap-link-nav-row: 20px;
        --nav-logo: 50px;
        --nav-icon: 15px;
        --nav-iconPlus: 5px;

        --size-btn: 16px;
        --btn-border-px: 2px;
        --btn-border-line: solid;
        --btn-radius: 4px;
        --btn-width: 120px;
        --btn-text-align: center;
        --btn-padding: 9px;

        --footer-padding: 0 calc(3rem + 0.25vw);

        --title: 30px;


        /* Block Inspiration Bento ( GRID ) Début */
        --grid-inspi-rows: repeat(2, 200px);

        /* Block catalogue bento ( GRID ) Debut */
        --grid-catalogue-rows: repeat(2, 200px);

        --btn-logo: 80px;


    }
}

@media screen and (max-width: 768px) {
    :root {
        --footer-padding: 0 1rem;


        --grid-inspi-marge-r: 0px;
        /* Block Inspiration Bento ( GRID ) Début */
        --grid-inspi-columns: 1fr;
        --grid-inspi-rows: repeat(4, 300px);
        --grid-inspi-1: 1 / 1 / 2 / 2;
        --grid-inspi-2: 2 / 1 / 3 / 2;
        --grid-inspi-3: 3 / 1 / 4 / 2;
        --grid-inspi-4: 4 / 1 / 5 / 2;

        /* Block catalogue bento ( GRID ) Debut */
        --grid-catalogue-columns: 1fr;
        --grid-catalogue-rows: repeat(6, 300px);
        --grid-area-1: 1 / 1 / 2 / 2;
        --grid-area-2: 2 / 1 / 3 / 2;
        --grid-area-3: 3 / 1 / 4 / 2;
        --grid-area-4: 4 / 1 / 5 / 2;
        --grid-area-5: 5 / 1 / 6 / 2;
        --grid-area-6: 6 / 1 / 7 / 2;


    }
}

@media screen and (max-width: 425px) {
    :root {
        /* GOUTIER SITE */
        --goutier-margin: 0 0px;
        --goutier-padding: 0 10px;
    }
}



body,
html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--parag);
    color: var(--black);
}

.ol-nav {
    width: 100%;
    font-size: var(--nav-size);
}

.ol-nav * {
    color: var(--black);
}

.ol-nav--logo {
    width: var(--nav-logo-w);
    height: var(--nav-logo-h);
}


.ol-nav ul {
    column-gap: var(--gap-link-nav);
    row-gap: var(--gap-link-nav-row);
}

.ol-nav .ol-ul {
    align-items: center
}


.container-fluid {
    margin: var(--goutier-margin);
    padding: var(--goutier-padding);
}

.ol-dropdown-after::after {
    display: none;
}

.dropdown-toggle::after {
    vertical-align: 0.155em;
    border-top: 0.2em solid;
    border-right: 0.2em solid transparent;
    border-bottom: 0;
    border-left: 0.2em solid transparent;
}

.ol-section-margin--top {
    margin-top: var(--section-margin-top);
}

.ol-title-margin--bottom {
    margin-bottom: var(--title-margin-bottom);
}

.ol-title {
    font-weight: var(--bold);
}

.ol-nav--icon {
    width: var(--nav-icon);
    font-size: calc(var(--nav-icon) + var(--nav-iconPlus));
}

/* ----- BOUTON ----- */
/* ----- BOUTON ----- */
/* ----- BOUTON ----- */

.ol-btn--cta {
    padding: var(--btn-padding);
}

.ol-btn--cta a {
    font-weight: var(--btn-weight);
    padding: var(--btn-paddings);
    color: var(--primary);
    font-size: var(--size-btn);
    border: var(--btn-border-px) var(--btn-border-line) var(--primary);
    border-radius: var(--btn-radius);
    width: var(--btn-width);
    text-align: var(--btn-text-align);
}

.ol-btn--animation a {
    display: block;
    text-align: center;
    position: relative;
    transition: var(--anime-time);
}

.ol-btn--animation a span {

    color: var(--primary);
}

.ol-btn--animation a span {
    position: relative;
    z-index: 2;
    transition: var(--anime-time);
}

.ol-btn--animation a:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary);
    transition: var(--anime-time);
}

.ol-btn--animation a:hover span {
    color: var(--white);
}

.ol-btn--animation a:hover:before {
    width: 100%;
}

/* ---- Bouton Second ---- */

.ol-btn--cta--second {
    padding: var(--btn-padding);
}

.ol-btn--cta--second a {
    font-weight: var(--btn-weight);
    padding: var(--btn-paddings);
    color: var(--white);
    font-size: var(--size-btn);
    border: var(--btn-border-px) var(--btn-border-line) var(--white);
    border-radius: var(--btn-radius);
    width: var(--btn-width);
    text-align: var(--btn-text-align);
}

.ol-btn--animation--second a {
    display: block;
    text-align: center;
    position: relative;
    transition: var(--anime-time);
}

.ol-btn--animation--second a span {

    color: var(--white);
}

.ol-btn--animation--second a span {
    position: relative;
    z-index: 2;
    transition: var(--anime-time);
}

.ol-btn--animation--second a:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--white);
    transition: var(--anime-time);
}

.ol-btn--animation--second a:hover span {
    color: var(--primary);
}

.ol-btn--animation--second a:hover:before {
    width: 100%;
}



/* ----- FOOTER ----- */
.ol-footer {
    padding: var(--footer-padding);
    padding-top: 50px;
    border-top: 0.5px solid #f3f3f3;
    margin-top: 50px;
}

.ol-footer p,
.ol-footer ul li {
    font-size: var(--parag);
    list-style: none;
    color: var(--black);
}

.ol-footer ul {
    padding: 0;
}

.ol-footer-margin {
    padding-right: 50px;
}

.ol-footer-title {
    font-size: var(--parag);
    color: var(--primary);
    font-weight: 700;
}

.ol-footer-last {
    padding: var(--footer-padding);
}

.ol-footer-last-bgc {
    background-color: var(--footer-bgc);
}

.ol-last-footer-p {
    margin: 10px 0;
    font-size: var(--parag);
    padding: 0;
}

.ol-justify {
    text-align: justify;
}


/*PAS OL*/
.navbar-toggler {
    padding: 0px;
    font-size: 16px;
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: 0px solid;
    border-radius: 0px;
    transition: var(--bs-navbar-toggler-transition);
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: -100px;
    margin-top: var(--bs-dropdown-spacer);
}


/* ----- Section interne Home By Me ----- */
/* ----- Section interne Home By Me ----- */
/* ----- Section interne Home By Me ----- */

.ol-inspi {
    display: grid;
    grid-template-columns: var(--grid-inspi-columns);
    grid-template-rows: var(--grid-inspi-rows);
    grid-column-gap: var(--grid-inspi-marge);
    grid-row-gap: var(--grid-inspi-marge);
    /**/
    background-color: var(--white);
    padding-right: var(--grid-inspi-marge-r);
}

.ol-inspi-1 {
    grid-area: var(--grid-inspi-1);
}

.ol-inspi-2 {
    grid-area: var(--grid-inspi-2);
}

.ol-inspi-3 {
    grid-area: var(--grid-inspi-3);
}

.ol-inspi-4 {
    grid-area: var(--grid-inspi-4);
}

.ol-catalogue-section-one,
.ol-inspi-section-one {
    overflow: hidden;
}

.ol-inspi--intern,
.ol-catalogue--intern {
    width: 100%;
    background-position: center;
    background-size: cover;
}


.ol-inspi--intern a,
.ol-catalogue--intern a {
    text-decoration: none;
}

.ol-inspi--intern a h2,
.ol-catalogue--intern a h2 {
    font-size: var(--title);
    color: var(--white);
    z-index: 100;

    border-bottom: 8px var(--white) solid;
}

.ol-inspi-section-one,
.ol-catalogue-section-one {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.ol-inspi-section-one a,
.ol-catalogue-section-one a {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;

    padding-bottom: calc(5vh - 8px);
    padding-left: calc(5vh);
}

/* catalogue */

.ol-catalogue {
    display: grid;
    grid-template-columns: var(--grid-catalogue-columns);
    grid-template-rows: var(--grid-catalogue-rows);
    grid-column-gap: var(--grid-inspi-marge);
    grid-row-gap: var(--grid-inspi-marge);
    /**/
    background-color: var(--white);
    padding-right: var(--grid-inspi-marge-r);
}

.ol-catalogue-1 {
    grid-area: var(--grid-area-1);
}

.ol-catalogue-2 {
    grid-area: var(--grid-area-2);
}

.ol-catalogue-3 {
    grid-area: var(--grid-area-3);
}

.ol-catalogue-4 {
    grid-area: var(--grid-area-4);
}

.ol-catalogue-5 {
    grid-area: var(--grid-area-5);
}

.ol-catalogue-6 {
    grid-area: var(--grid-area-6);
}

.ol-catalogue--block-cta {
    text-align: center;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

}

.ol-btn--logo {
    width: var(--btn-logo);
    height: var(--btn-logo);
    margin-bottom: 20px;
}

/* ANIMATION HOVER block catégorie + animation sur bento */

.ol-block--animation a {
    position: relative;
    transition: var(--anime-time);
    z-index: 99;
}

.ol-block--animation a:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary);
    transition: var(--anime-time);
    z-index: 10;
    opacity: 0;
}

.ol-block--animation a:hover span {
    color: var(--white);
}

.ol-block--animation a:hover:after {
    opacity: 0.80;
    width: 100%;
    z-index: 10;
}

/* deco none OL*/
.ol-decoration-none {
    text-decoration: none;
}