@media (max-width: 1600px) {
    header .nav.navbar-nav, header .navbar-right {
        gap: var(--space-8);
    }
}

@media (max-width: 1200px) {
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        height: 1px;
    }

    /* ------------- BASE ------------*/
    section > .container-accueil > * {
        margin-bottom: var(--space-32);
        background-image: none;
    }

    section > * {
        margin-bottom: 0;
    }

    main {
        margin-top: 0;
    }

    main.container {
        padding: var(--space-16) var(--space-24);
    }

    .container.full-width {
        padding: 0 var(--space-16);
    }

    .align-center {
        display: block;
    }

    .align-stretch {
        display: block;
    }

    .align-bottom {
        gap: var(--space-48) 0;
        flex-wrap: wrap;
    }

    .align-bottom > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ------------- NAV HEADER ------------*/
    /* Burger */
    .navbar-default .navbar-toggle {
        height: 60px;
        margin: 0;
        padding: 0 var(--space-16);
        border: none;
        background: transparent;
    }

    .navbar-toggle {
        float: left;
        margin-left: 15px;
        margin-right: 0;
    }

    /* Header / brand */
    .navbar-header {
        float: left;
    }

    .navbar-text {
        line-height: 1em;
    }

    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        padding: var(--space-8) 0;
        margin: 0;
    }

    .navbar > .container .navbar-brand > img,
    .navbar > .container-fluid .navbar-brand > img {
        height: 44px;
    }

    /* Layout (display:flex est défini ailleurs chez toi) */
    header .nav.navbar-nav,
    header .navbar-right {
        gap: 0;
        height: auto;
        position: relative;
    }

    header .nav.navbar-nav,
    header .navbar-collapse .navbar-right {
        flex-direction: column;
        float: none !important;
    }

    header .navbar-right {
        gap: var(--space-16);
        padding: var(--space-8);
        justify-content: flex-end;
    }

    .navbar .navbar-right.hidden-lg i {
        margin: 0;
    }

    .navbar-right.hidden-lg {
        gap: var(--space-8);
        float: right !important;
        padding: var(--space-8) 0;
    }

    /* CTAs */
    .navbar-collapse .navbar-right {
        justify-content: flex-end;
    }

    .navbar-collapse .navbar-right .btn {
        border-radius: var(--border-radius);
        display: block;
        width: 100%;
    }

    /* Panneau mobile */
    .navbar-default .navbar-collapse {
        width: 100%;
        max-width: 390px;
        height: 100vh !important;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        background-color: #FFF;
        display: block;
        transform: translateX(-100%);
        transition: transform .25s;
        z-index: 110;
        overflow: scroll !important;
    }

    /* Ouverture */
    .collapsing,
    .collapse.in {
        transform: translateX(0);
        transition: transform .25s;
    }

    /* Items */
    .navbar-nav li {
        height: auto;
    }

    .navbar .navbar-nav > li {
        height: auto;
        width: 100%;
        flex-direction: column;
    }

    .navbar .navbar-nav > li > a {
        display: block;
        width: 100%;
    }

    /* Sous-menu */
    .navbar-nav .dropdown {
        position: initial;
    }

    .navbar-nav .open .dropdown-menu {
        position: absolute;
        z-index: 10000;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background-color: #FFF;
    }

    /* Typo / paddings */
    .navbar-nav li a:not(.h3),
    .navbar-default .navbar-nav .open .dropdown-menu > li > a,
    .yamm-fw .yamm-content .yamm-submenu .list-group-item {
        padding: var(--space-16);
        border-top: 1px solid var(--color-gray-2);
        color: var(--color-blue-dark);
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-bold);
    }

    .yamm-fw .yamm-content .yamm-submenu .h3 {
        padding: var(--space-16);
        margin: 0;
    }

    .yamm-fw .yamm-content .h3:not(:first-of-type) {
        border-top: 1px solid var(--color-gray-2);
    }

    /* YAMM */
    .yamm-fw .yamm-content {
        margin: 0;
        gap: 0;
        padding: 0;
        flex-direction: column;
    }

    .yamm-fw .yamm-content .yamm-submenu {
        padding: 0;
        width: 100%;
        max-width: inherit;
    }

    .yamm-fw .yamm-content .yamm-submenu {
        border-left: none;
    }

    .yamm .container {
        width: initial;
    }

    #navHeader.submenu-open .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #navHeader.submenu-open .button-fermer,
    #navHeader.submenu-open .dropdown.open .dropdown-toggle,
    #navHeader.submenu-open .navbar-nav > li {
        display: none;
    }

    #navHeader.submenu-open .navbar-nav > li.visible-xs,
    #navHeader.submenu-open .navbar-nav > li.dropdown.open {
        display: block;
    }

    a.dropdown-retour,
    .navbar-nav > li > a.button-fermer {
        text-align: center;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.20);
        background: #FFF;
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10) !important;
    }

    /* ------------- CONTENU ------------*/
    .alert {
        margin-bottom: var(--space-16);
    }

    .partenairesAccueil a {
        width: 150px;

    }

    .partenairesAccueil a .img-partenaire {
        max-height: var(--space-40);
        margin: auto;
        display: block;
        max-width: 80%;
    }

    .partenairesAccueil, .partenaires {
        gap: var(--space-32);
    }

    .jumbotron {
        padding: var(--space-40) var(--space-8) 88px !important;
    }

    main .jumbotron,
    footer .jumbotron {
        padding: var(--space-24) var(--space-24) !important;
    }

    main .jumbotron .h1,
    footer .jumbotron .h1 {
        margin: 0;
        white-space: normal;
        padding: var(--space-4) var(--space-8);
    }

    section > .container-accueil > * h2 {
        font-size: 32px;
    }

    .jumbotron .h1,
    .enTouteSimplicite .h2 {
        font-size: var(--font-size-1);
        padding: var(--space-4) var(--space-16);
    }

    .jumbotron .btn {
        white-space: normal;
        position: relative;
    }

    .jumbotron .btn.btn-secondary-black {
        padding: var(--space-8) var(--space-32) var(--space-8) var(--space-8);
        display: inline-block;
    }

    .bg-bleu.bg-right .jumbotron {
        background-position: center 350px;
        background-size: auto 80%;
    }

    main .bg-bleu.bg-fille .jumbotron,
    main .bg-bleu.bg-homme .jumbotron {
        background: none;
    }

    .button-row .btn {
        width: 100%;
    }

    .enTouteSimplicite {
        padding: var(--space-32);
        text-align: center;
        background-image: none;
    }

    .enTouteSimplicite .h2 {
        line-height: 2em;
    }

    .enTouteSimplicite .h3 {
        margin-top: var(--space-8);
        margin-bottom: 0;
    }

    .enTouteSimplicite span.simpliciteChiffre {
        display: block;
        margin: 0 auto;
        line-height: 3em;
    }

    .row > div + div > .imgSeo,
    .imgSeo {
        margin: 0;
    }

    .bg-bleu-img {
        background: var(--color-blue-light);
        padding: var(--space-24) var(--space-8);
        color: var(--color-black);
    }

    /* ---------------  FORMULAIRE ------------------*/
    form[name="demande_form"] .di-viewport .panel-body.bordered {
        padding: var(--space-24);
        padding-bottom: 0;
    }

    .btn {
        padding: var(--space-12);
    }

    .btn-image {
        padding-right: 32px;
    }

    .label, label {
        white-space: normal;
    }

    .radio-inline, .radio-image:not(.preteur), .form-inline,
    .radio-boolean[id*=fumeur] {
        flex-direction: column;
    }

    .row[aria-labelledby="demande_form_datesignatureodp"] .form-inline {
        flex-direction: row;
    }

    .fieldset-cta .btn {
        width: 100%;
    }

    .fieldset-cta .btn:first-of-type {
        margin-bottom: var(--space-16);
    }

    .preteur.radio-image {
        gap: var(--space-12) var(--space-8);
    }

    .preteur.radio-image label {
        flex: 0 0 calc((100% - 3 * var(--space-4)) / 2);
    }

    .objetprojet.radio-image label {
        flex: initial;
    }

    .radio-image input[type="radio"] + label img {
        max-width: 80%;
    }

    .radio-boolean label {
        width: 50%;
    }


    /* ---------------  tarification ------------------*/
    .imgAssureur .img-responsive {
        margin: auto;
    }

    .tarif-cta {
        display: flex;
        gap: var(--space-8);
        flex-direction: row-reverse;
    }

    .tarif-cta .btn {
        margin: 0;
    }

    /* ---------------  FAQ ------------------*/
    #faq .panel-heading {
        padding-right: 80px;
    }


    /* ---------------  FOOTER ------------------*/
    #divArgFooter {
        padding: var(--space-16) var(--space-8);
    }

    #divArgFooter .align-center {
        flex-wrap: wrap;
    }

    #divArgFooter .align-center > div {
        width: 50%;
        text-align: center;
        margin: 0 25%;
        padding-bottom: 16px;
    }

    #divArgFooter p img {
        display: block;
        margin-bottom: 16px;
    }

    footer nav > .row {
        display: block;
    }

    #tpReviewsCol {
        padding: var(--space-16);
        overflow: hidden;
    }
}

@media (max-width: 767px) {

    .gap48 {
        gap: var(--space-32);
    }

    .align-bottom {
        flex-direction: column;
    }

    .align-bottom > div {
        flex: initial;
        max-width: initial;
    }

    .tarif-cta {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .button-row > div[class*="col-"] {
        flex-flow: column;
    }

    .jumbotron h1 {
        text-align: center;
    }

    .jumbotron .h1 {
        margin: 0 -24px;
        white-space: nowrap;
        padding: var(--space-4) var(--space-8);
    }

    .jumbotron .btn.btn-secondary-black {
        max-width: 350px;
    }

    main .jumbotron .btn {
        width: 100%;
        justify-content: center; /* alignement horizontal */
    }

    #tpReviewsCol h3 {
        font-size: var(--font-size-2);
    }

    .btn-image {
        width: 100%;
    }

    section > .container-accueil > * h2 {
        font-size: 24px;
    }

    /* ---------------  tarification ------------------*/
    ._coreTarification .tab-pane.sortable .tarif-item:not(.is-loading):first-of-type {
        padding-top: var(--space-24);
    }

    /*footer*/
    footer .jumbotron {
        background-image: url('../../images/homme-etonne.jpg');
        background-repeat: no-repeat;
        background-position: 0% top;
        background-size: 200%;
    }
}