/* =========================================================
   THÈME SWITCH — Site public internaute (switchassur.fr)
   Les tokens par défaut dans token.css sont déjà Switch.
   Ce fichier contient les styles spécifiques au contexte Switch.
   ========================================================= */

/* =========================================================
   BODY / MAIN
   ========================================================= */

body {
    background-color: var(--color-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > * {
    width: 100%;
}

.container {
    max-width: var(--container-max-width);
}

main.container > *:first-child {
    margin-top: var(--space-24) !important;
}

main {
    margin-top: -40px;
    position: relative;
}

/* =========================================================
   FULL-WIDTH — blocs pleine largeur dans main.container
   ========================================================= */

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.full-width.bg-bleu-light {
    overflow: hidden;
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

h2, .h2 {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   ALERTES SWITCH — padding spécifique
   ========================================================= */

/* Puces de liste : flèches FA */

main ul:not(.dropdown-menu) {
    padding-left: 0;
}

main ul:not(.dropdown-menu) li {
    position: relative;
    list-style: none;
    padding-left: var(--space-24);
}

main ul:not(.dropdown-menu) li::before {
    content: "\f178";
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
}


/* =========================================================
   HEADER FIXE
   ========================================================= */

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10);
    transition: all 0.5s ease-in-out;
}

header .navbar {
    margin: 0 calc(var(--space-16) * -1);
}

header.scrolled {
    transform: translateY(calc(-1.01 * var(--space-48)));
}

header.scrolled .navbar-collapse.collapse.in {
    top: var(--space-48);
}

header + * {
    margin-top: 136px;
}

.navbar-brand {
    padding: var(--space-16) var(--space-32);
    margin-right: 0;
}

.navbar-brand img {
    height: 56px;
    width: auto;
}

.navbar-default .navbar-nav > li > a {
    color: var(--color-black);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
}

.navbar-default .navbar-nav > li > a.dropdown-toggle::after {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f0d7";
    color: var(--color-gray-5);
    margin-left: var(--space-8);
    font-size: var(--font-size-5);
}

.dropdown-menu .h3 {
    color: var(--color-primary);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    margin-top: 0;
}

.dropdown-menu .alert-info .row {
    display: flex;
    align-items: center;
}

.dropdown-menu .alert-info .btn {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

main > .container:first-child {
    background-color: var(--color-bg);
    border-radius: var(--panel-radius);
}

/* =========================================================
   HEADER — NAVIGATION
   ========================================================= */

header .nav.navbar-nav,
header .navbar-right {
    display: flex;
    gap: var(--space-32);
    margin-top: 0;
    height: 88px;
    align-items: center;
}

header .nav.navbar-nav:before,
header .navbar-right:before,
header .nav.navbar-nav:after,
header .navbar-right:after {
    display: none;
}

header .navbar-right {
    gap: var(--space-16);
    margin-right: auto;
}

/* =========================================================
   BANDEAU QUESTIONNAIRE
   ========================================================= */

.banniereQuestionnaire {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    line-height: var(--space-48);
}

.banniereQuestionnaire a {
    color: var(--color-white) !important;
    text-decoration: underline;
    font-weight: var(--font-weight-bold);
}

.banniereQuestionnaire p {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-16);
}

.banniereQuestionnaire p img {
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* =========================================================
   EN TOUTE SIMPLICITÉ
   ========================================================= */

.enTouteSimplicite {
    border: none;
    background-color: var(--color-blue-overlay);
    padding: var(--space-48) var(--space-88);
    border-radius: 30px;
    background-image: url('../../images/fille-etonnee.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 90%;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.10);
}

.enTouteSimplicite p,
.enTouteSimplicite h2 {
    color: var(--color-white);
}

.enTouteSimplicite .h2 {
    line-height: 1.5em;
    color: var(--color-primary-dark);
    background-color: var(--color-accent);
    display: inline;
    padding: 0 var(--space-16);
    border-radius: var(--space-8);
    box-decoration-break: clone;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-0);
}

.enTouteSimplicite span.simpliciteChiffre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3);
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

/* =========================================================
   BIEN CHOISIR (footer arguments)
   ========================================================= */

.bienChoisir > div {
    display: flex;
    gap: var(--space-32);
    flex-direction: column;
}

.bienChoisir > div > * {
    margin: 0;
}

footer .bienChoisir img {
    max-width: 75px;
    max-height: 75px;
}

/* =========================================================
   PARTENAIRES
   ========================================================= */

.partenairesAccueil,
.partenaires,
.space-between {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-48);
    justify-content: space-between;
}

.space-between:before,
.space-between:after {
    display: none;
}

.partenaires > a {
    flex: 1 1 calc((100% - 2 * 48px) / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 230px;
}

.partenaires > a + a {
    max-width: calc((100% - 2 * 48px) / 3);
}

.partenairesAccueil {
    margin-top: var(--space-16);
    padding: 0 var(--space-88);
}

.partenaires img {
    max-width: 315px;
    max-height: 130px;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
}

.partenairesAccueil a .img-partenaire {
    max-height: var(--space-56);
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.1s ease-in-out;
    padding: var(--space-8);
}

.partenairesAccueil a:hover .img-partenaire {
    opacity: 1;
    filter: grayscale(0%);
}

/* =========================================================
   PAGE D'ERREUR
   ========================================================= */

.erreur {
    display: flex;
    align-items: center;
}

.erreur .imageErreur {
    background-color: var(--color-primary);
    border-radius: var(--panel-radius);
}

.erreur img {
    width: 300px;
    padding-top: var(--space-48);
    margin: auto;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    margin-top: auto;
    background-color: var(--color-primary-dark);
    font-size: 14px;
}

footer nav.container {
    color: var(--color-white-muted);
    font-size: inherit;
}

footer nav.container h4 {
    font-size: inherit;
}

footer h4 {
    color: var(--color-accent);
    text-transform: uppercase;
}

footer address i {
    color: var(--color-accent);
}

footer ul {
    padding: 0;
}

footer ul li {
    list-style: none;
    margin-bottom: var(--space-16);
}

footer a {
    color: var(--color-white-muted);
    transition: all 0.1s ease-in-out;
    text-decoration: none;
}

footer a.badge {
    font-size: inherit;
    font-weight: var(--font-weight-bold);
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
}

footer a:hover {
    color: var(--color-white);
}

footer nav {
    padding: var(--space-56) 0;
}

footer .nav.nav-pills {
    background: none;
    padding-left: 0;
}

footer .nav.nav-pills > li > a {
    background: none !important;
    padding: 0 var(--space-8);
}

footer .nav.nav-pills > li + li > a {
    padding-left: var(--space-16);
}

footer .nav.nav-pills > li + li:before {
    content: "\2022";
    margin-right: var(--space-8);
    color: #999;
    position: absolute;
    left: 0;
}

footer .nav.nav-pills > li > a:hover,
footer .nav.nav-pills > li > a:focus {
    background: none !important;
}

/* Arguments footer */

#divArgFooter {
    background-color: var(--color-gray-1);
    color: var(--color-black);
    padding: var(--space-32) 0;
}

#divArgFooter > .container > .row {
    gap: var(--space-32);
}

#divArgFooter img {
    max-width: 68px;
    max-height: 68px;
}

#divArgFooter p {
    margin: 0;
    font-size: var(--font-size-3);
}

/* Back to top */

#back-to-top {
    border: none !important;
}

#back-to-top.btt-inline {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    border-radius: var(--btn-radius);
    padding: var(--space-8);
}

footer .jumbotron:before {
    background: var(--color-blue-overlay);
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.5;
}

footer .jumbotron {
    background-image: url('../../images/homme-etonne.jpg');
    background-repeat: no-repeat;
    background-position: 160% 25%;
    background-size: 80%;
}

footer nav > .row {
    display: flex;
}

.footer-menus {
    display: flex;
    justify-content: space-between;
}

.footer-menus > div {
    flex: 0 0 20%;
}

footer nav > .row > * {
    border-bottom: 1px solid;
    padding-bottom: var(--space-64);
    margin-bottom: var(--space-48);
}
/* =========================================================
   ICÔNE FA-BACKGROUNDED
   ========================================================= */

.fa-backgrounded {
    position: relative;
    color: var(--color-primary-dark);
    margin: 0 var(--space-16);
    line-height: var(--space-48);
}

.fa-backgrounded:before {
    z-index: 2;
    position: relative;
}

.fa-backgrounded:after {
    background-color: var(--color-accent);
    content: ' ';
    border-radius: var(--btn-radius);
    width: var(--space-48);
    height: var(--space-48);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* =========================================================
   BOUTON TÉLÉPHONE TUNNEL
   ========================================================= */

.btn-telTunel i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-40);
    height: var(--space-40);
    background: var(--color-primary-dark);
    color: var(--color-white);
    border-radius: 50%;
}

/* =========================================================
   IMAGE SEO
   ========================================================= */

.imgSeo {
    border-radius: var(--modal-radius);
    margin-right: var(--space-88);
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.imgSeo img {
    object-fit: cover;
    min-width: 100%;
}

.row > div + div > .imgSeo {
    margin-right: 0;
    margin-left: var(--space-88);
}

/* =========================================================
   PANELS
   ========================================================= */

.panel-default > .panel-heading {
    background: none;
    border-bottom: none;
}

/* =========================================================
   MODALES
   ========================================================= */

.h4.modal-title {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   TABLES SWITCH — couleurs brandées
   ========================================================= */

.table > thead > tr > th,
.table > tbody > tr > th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

.table-striped > tbody > tr > td {
    color: var(--color-black);
    background-color: var(--color-primary-light);
}

.table-striped > tbody > tr:nth-of-type(2n+1) > td {
    color: var(--color-black);
    background-color: var(--color-yellow-ultralight);
}

.table > tbody > tr.active,
.table.table-hover > tbody > tr:hover {
    background-color: var(--color-primary-light);
}

/* =========================================================
   FORMULAIRE — text-shadow legend
   ========================================================= */

.di-viewport legend {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   TARIFICATION SWITCH
   ========================================================= */


section > * {
    margin-bottom: 0;
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus,
input[type="radio"]:checked + label {
    background-color: var(--color-white);
}

/* Liste triable : gap 32px entre chaque tarif */
._coreTarification .tab-pane.sortable {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    margin-bottom: var(--space-48);
}

/* Premier tarif : bordure bleue */
._coreTarification .tab-pane.sortable .tarif-item:not(.is-loading):first-of-type {
    border: 5px solid var(--color-primary);
}

._coreTarification .tab-pane.sortable .tarif-item:not(.is-loading):first-of-type .dataTarifs {
    color: var(--color-blue);
}

/* CTA tarif */
.tarif-cta {
    display: flex;
    flex-direction: column;
}

/* Économie box : pas de margin sur le panel */
.economie-box { margin-bottom: 0; }


/* Image assureur + équivalence garantie : gap 16px */
.ligneTarif .infoTarif .imgAssureur {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ligneTarif .infoTarif .imgAssureur > * {
    margin: 0;
}

/* Données tarif : gap 16px entre prix et badge */
.ligneTarif .dataTarifs {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ligneTarif .dataTarifs > * {
    margin: 0;
}

/* Prix mensuel : chiffre + small collés */
.ligneTarif .dataTarifs .infoTarifMens {
    font-size: 40px;
    line-height: 1;
}

.ligneTarif .dataTarifs .infoTarifMens small {
    font-size: var(--font-size-4);
    line-height: 1.2;
    display: block;
    margin-top: var(--space-4);
}

/* =========================================================
   FORMULAIRE SOUSCRIPTION SWITCH
   ========================================================= */

/* Labels : noir Figma au lieu du bleu primaire */

.label,
label {
    color: var(--color-black);
}

/* Boutons : stroke 0.5px Figma */

.btn {
    border-width: 0.5px;
}

/* Surcharges inputs : box-shadow, inset borders */


.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--color-white) !important;
    color: var(--color-primary-dark) !important;
    outline: none !important;
}

input[type="radio"] + label,
.radio-image button {
    border-radius: var(--input-border-radius);
    border: var(--input-border-default);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
}

input[type="radio"]:checked + label,
input[type="radio"] + label:hover,
.radio-image button:hover {
    border: var(--input-border-focus);
    background: var(--color-primary-light);
    box-shadow: var(--box-shadow);
    color: var(--color-primary-dark);
}

.input-group,
.form-control:not(.bootstrap-select),
.bootstrap-select > .dropdown-toggle {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
}

.input-group .form-control,
.input-group .form-control + .input-group-addon {
    box-shadow: none;
}

.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus,
input.form-control:hover,
input.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 2px var(--color-primary),
    0 2px 5px 0 rgba(0, 0, 0, 0.05);
}

input[type="radio"]:checked + label,
input[type="radio"] + label:hover,
.radio-image button:hover {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 2px var(--color-primary),
    var(--box-shadow);
}

.input-group .form-control:not(.bootstrap-select):not(:disabled):not(:read-only):focus,
.input-group:hover .form-control:not(.bootstrap-select):not(:disabled):not(:read-only) {
    box-shadow: inset 3px 0 0 var(--color-primary),
    inset 0 3px 0 var(--color-primary),
    inset 0 -3px 0 var(--color-primary);
    border: none;
}

.input-group .form-control:not(.bootstrap-select):not(:disabled):not(:read-only):focus + .input-group-addon,
.input-group:hover .form-control:not(.bootstrap-select):not(:disabled):not(:read-only) + .input-group-addon {
    box-shadow: inset -3px 0 0 var(--color-primary),
    inset 0 3px 0 var(--color-primary),
    inset 0 -3px 0 var(--color-primary);
    border: none;
}

.bootstrap-select .dropdown-menu.open,
.bootstrap-select .dropdown-menu.open .inner {
    box-shadow: var(--dropdown-shadow);
}

/* Chevron retourné quand le dropdown est ouvert */

.bootstrap-select.open > .dropdown-toggle .caret {
    transform: scaleY(-1);
}

/* Dropdown items : radio rond Figma */

.bootstrap-select .dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    text-decoration: none;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    text-decoration: none;
}

.bootstrap-select .dropdown-menu li a::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 14px;
    border: 1px solid #939493;
    background-color: var(--color-white);
    box-sizing: border-box;
}

.bootstrap-select .dropdown-menu > .active > a::before,
.bootstrap-select .dropdown-menu > .active > a:focus::before,
.bootstrap-select .dropdown-menu > .active > a:hover::before {
    border-color: var(--color-primary-dark);
    background-color: var(--color-primary-dark);
    box-shadow: inset 0 0 0 4px var(--color-white);
}

/* Radios : pas de pseudo-élément check */

input[type="radio"] + label:before,
input[type="radio"]:checked + label:before {
    content: none;
}

.radio-boolean input[type="radio"] + label,
.radio-image input[type="radio"] + label {
    height: 90px;
}

.radio-image input[type="radio"] + label img {
    max-width: 60%;
    height: 45px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
}

/* Images sur les labels radio */

#demande_form_nombreassures label,
#demande_form_typeprojet label,
#demande_form_objetprojet label {
    background-repeat: no-repeat;
    background-size: 50px auto;
    background-position: var(--space-24);
    padding-left: 96px;
}

#demande_form_typeprojet label[for=demande_form_typeprojet_0] { background-image: url('../../images/changer.png'); }
#demande_form_typeprojet label[for=demande_form_typeprojet_1] { background-image: url('../../images/maison.png'); }
#demande_form_nombreassures label[for=demande_form_nombreassures_0] { background-image: url('../../images/utilisateur.png'); }
#demande_form_nombreassures label[for=demande_form_nombreassures_1] { background-image: url('../../images/utilisateurs.png'); }
#demande_form_objetprojet label[for=demande_form_objetprojet_0] { background-image: url('../../images/maison.png'); }
#demande_form_objetprojet label[for=demande_form_objetprojet_1] { background-image: url('../../images/location.png'); }
#demande_form_objetprojet label[for=demande_form_objetprojet_2] { background-image: url('../../images/pret-hypothecaire.png'); }
#demande_form_objetprojet label[for=demande_form_objetprojet_3] { background-image: url('../../images/maison-de-campagne.png'); }
#demande_form_objetprojet label[for=demande_form_objetprojet_4] { background-image: url('../../images/pret.png'); }
#demande_form_objetprojet label[for=demande_form_objetprojet_5] { background-image: url('../../images/credit.png'); }

.objetprojet.radio-image,
.preteur.radio-image {
    display: flex;
    gap: var(--space-16) var(--space-32);
    flex-wrap: wrap;
    justify-content: space-between;
}

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

.preteur.radio-image label {
    flex: 0 0 calc((100% - 6 * var(--space-32)) / 5);
    height: 80px;
    font-weight: bold;
}

.preteur.radio-image label:last-child {
    flex: 0 0 100%;
    justify-content: center;
    align-items: center;
    height: 48px;
}

.preteur.radio-image label::before {
    content: "" !important;
    display: none;
}

/* Viewport formulaire */


#demande_form_encours {
    margin-left: -15px;
    margin-right: -15px;
}

div.row[aria-labelledby="demande_form_nombreprets"] {
    display: none;
}

.form-check .label-text {
    position: relative;
    font-weight: var(--font-weight-regular);
    padding-left: var(--space-24);
}

.form-check .label-text:before {
    font-size: 19px;
    position: absolute;
    left: 0;
}

.btn-supprimePersonne {
    display: none;
}

#demande_form_comparer {
    display: none;
}

#demande_form_personnes h4,
.row > [class*="col-"] > fieldset > .panel.panel-detail > .panel-body > .row:first-child {
    display: none;
}

#demande_form_prets h4,
#demande_form_quotite h4 {
    font-size: var(--font-size-1);
    color: var(--color-primary);
}

#demande_form_quotite {
    display: flex;
    gap: var(--space-32);
    justify-content: space-between;
}

#demande_form_quotite > .row {
    width: 100%;
}

form[name=demande_form] .di-viewport .panel-body {
    padding: 0;
}

.bordered {
    background: var(--color-white);
    border: var(--border-muted);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

form[name="demande_form"] .di-viewport .panel-body.bordered {
    padding: var(--space-40);
}

/* Boutons spéciaux */

.btn-ajouterPalier,
.btn-ajoutPret {
    justify-content: center;
}

.btn-ajouterPalier {
    display: inline-flex;
    width: auto;
    align-self: flex-start;
}

.btn-supprime {
    border-radius: 50%;
    padding: 1px;
}

.btn-plus:after {
    font-family: "Font Awesome 7 Pro";
    content: "\2b";
    color: inherit;
    padding-left: var(--space-8);
}

.btn-arrow-right:after {
    font-family: "Font Awesome 7 Pro";
    content: "\f178";
    color: inherit;
    padding-left: var(--space-8);
}

.btn-image {
    height: 65px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-16);
    padding-right: var(--space-48);
    border: none;
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.10) !important;
    position: relative;
    gap: var(--space-16);
}

.btn-image:after {
    font-family: "Font Awesome 7 Pro";
    content: "\f178";
    color: inherit;
    position: absolute;
    right: var(--space-16);
}

.jumbotron .btn.btn-secondary-black {
    position: relative;
    font-weight: var(--font-weight-regular);
    padding: var(--space-8);
    padding-right: var(--space-32);
}

.jumbotron .btn.btn-secondary-black i {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--space-8);
}

.jumbotron .btn.btn-secondary-black:hover i {
    animation: shake 0.4s ease-in-out 1;
}

.jumbotron .btn-image {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.10);
}

/* Footer souscription */

footer nav {
    border: none;
    color: var(--color-white-muted);
}


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

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

@media (max-width: 1200px) {
    /* Header responsive */

    .navbar-toggle {
        display: block;
    }

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

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

    header .navbar {
        margin: 0;
    }

    header .container-fluid {
        padding-left: var(--space-16);
        padding-right: var(--space-16);
    }

    .navbar-header {
        float: left;
    }

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

    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        padding: 0;
        margin: 0;
        height: 88px;
        display: flex;
        align-items: center;
    }

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

    /* Panneau mobile */
    .navbar-default .navbar-collapse {
        width: 100%;
        max-width: 461px;
        height: 100vh !important;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        background-color: var(--color-white);
        display: flex !important;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform .25s;
        z-index: 110;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: var(--border-muted);
    }

    .navbar-default .navbar-collapse::before,
    .navbar-default .navbar-collapse::after {
        display: none;
    }

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

    .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 mobile */
    .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: var(--color-white);
    }

    .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: 14px 12px;
        border-top: none;
        border-bottom: var(--border-muted);
        color: var(--color-black);
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-medium);
    }

    .yamm-fw .yamm-content .yamm-submenu .h3 {
        padding: 14px 12px;
        margin: 0;
        border-bottom: var(--border-muted);
    }

    .yamm-fw .yamm-content .h3:not(:first-of-type) {
        border-top: none;
    }

    .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;
        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;
    }

    /* Boutons Fermer et Retour dans le panneau mobile */

    a.dropdown-retour,
    .navbar-nav > li > a.button-fermer,
    .navbar-nav > li.hidden-lg > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px var(--space-16);
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 2.4px;
        color: var(--color-black);
        border-top: none;
        border-bottom: var(--border-muted);
        background: var(--color-white);
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10) !important;
    }

    /* Chevron droit sur les items avec sous-menu */

    .navbar-nav > li.dropdown > a.dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle::after {
        content: "\f054";
        font-family: "Font Awesome 7 Pro";
        font-weight: 900;
        font-size: 12px;
        color: var(--color-black);
        margin-left: 0;
    }

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

    main {
        margin-top: 0;
    }

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

    .jumbotron .h2,
    .enTouteSimplicite .h2 {
        line-height: 2em;
        font-size: 32px;
    }

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

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

    main {
        margin-top: 0;
        margin-bottom: var(--space-48);
    }

    main > .container:first-child {
        border-radius: 0;
    }

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

    header .nav.navbar-nav,
    header .navbar-right {
        gap: 0;
        position: relative;
    }

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

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

    /* CTA fixes en bas du panneau mobile */

    header .navbar-collapse .navbar-right {
        margin-top: auto;
        padding: var(--space-16) 12px;
        gap: var(--space-16);
        width: 100%;
    }

    header .navbar-collapse .navbar-right .btn {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary-dark);
    }

    /* Forcer la visibilite du texte des CTA dans le panneau mobile */
    header .navbar-collapse .navbar-right .btn > span {
        display: inline !important;
    }

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

    .navbar-right {
        gap: var(--space-8);
        float: right !important;
        padding: 0;
        height: 88px;
        display: flex;
        align-items: center;
    }

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

    .partenairesAccueil a {
        width: 150px;
    }

    .partenairesAccueil.swiper-initialized {
        display: block;
        gap: 0;
        padding: 0;
        width: 100%;
    }

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

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

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

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

    .enTouteSimplicite span.simpliciteChiffre {
        display: flex;
        margin: 0 auto;
    }

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

    .row.flex:has(.imgSeo) {
        gap: var(--space-32);
    }

    /* Formulaire */

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

    .di-viewport fieldset {
        gap: var(--space-32);
    }

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

    #description_pret.radio-inline {
        flex-direction: row;
    }

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

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

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

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

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

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

    /* Tarification */

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

    .ligneTarif .panel-body {
        padding: var(--space-24);
    }

    label[for="selectTrieResultat"] {
        text-align: left;
    }

    /* Footer */

    footer {
        font-size: 12px;
    }

    footer nav > .row {
        display: block;
    }

}

@media (max-width: 767px) {
    main {
        margin-top: 113px;
        margin-bottom: 32px;
    }

    /* Header mobile */

    .navbar-right {
        height: auto;
    }

    .navbar-right .btn {
        width: 48px;
        height: 48px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-collapse .navbar-right .btn {
        width: 100%;
        height: 48px;
        padding: var(--space-12) var(--space-24);
    }

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

    main .jumbotron .btn {
        width: 100%;
        justify-content: center;
    }

    .wizard-cta-wrapper .btn {
        width: 100%;
    }

    .btn-image {
        width: 100%;
    }

    .preteur.radio-image {
        flex-direction: row;
    }

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

    #demande_form_quotite {
        flex-direction: column;
    }

    #demande_form_quotite > .row {
        width: auto;
    }

    .bs3.bootstrap-select .dropdown-toggle .filter-option {
        padding-right: 0;
    }

    .swiper:not(.swiper-watch-progress),
    .swiper-watch-progress .swiper-slide-visible {
        margin: 0;
        padding: 0;
    }

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

    /* Tarification mobile */

    .tarif-cta {
        flex-direction: column;
    }

    /* Formulaire mobile */

    .champ-obligatoire-message,
    .champ-error-message {
        width: 100%;
    }

    /* CTA pleine largeur en mobile */
    main .btn-primary,
    main .btn-secondary,
    main .btn-secondary-black,
    main .btn-danger {
        width: 100%;
    }

    main .btn-supprimePalier {
        display: inline;
        width: auto;
    }

    .enTouteSimplicite .h2 {
        font-size: 24px;
    }

    footer .bienChoisir img {
        max-width: 75px;
        max-height: 75px;
    }

    /* Footer menus mobile : grille 2 colonnes centree */

    .footer-menus {
        flex-wrap: wrap;
    }

    .footer-menus > div {
        flex: 0 0 50%;
        text-align: center;
    }

    footer nav {
        padding: var(--space-32) var(--space-24);
    }

    footer nav address {
        text-align: center;
        font-size: var(--font-size-4);
    }
}