/* =========================================================
   TUNNEL SWITCH -- Souscription / Tarification
   Surcharges specifiques au tunnel (comparateur + tarification).
   Charge apres theme-switch.css par layout-switch-tunnel.html.twig.
   ========================================================= */

/* =========================================================
   HEADER TUNNEL
   ========================================================= */

/* Desktop : pas de banniere questionnaire = 88px */
header + * {
    margin-top: 88px;
}

@media (min-width: 1201px) {
    header.scrolled {
        transform: none;
    }
}

/* =========================================================
   BANDEAU "ECONOMISEZ..."
   ========================================================= */

.container-fluid.bg-bleu-light p {
    margin: 0;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-3);
    line-height: var(--space-48);
}

/* =========================================================
   FORMULAIRE TUNNEL
   ========================================================= */

/* Viewport : overflow cache pour les animations fieldset */
main.container {
    overflow-x: hidden;
    gap: var(--space-64);
    margin-top: 0;
}

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

/* Espacement par gap au lieu de margin-bottom */
.form-group {
    margin-bottom: 0;
}

.panel-body,
.panel-body.panel-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.panel-body:before,
.panel-body:after,
.panel-body.panel-detail:before,
.panel-body.panel-detail:after {
    display: none;
}

.panel-body > *,
.panel-body.panel-detail > * {
    margin-bottom: 0;
}

/* Grille champs : gap vertical entre les lignes */
.panel-body.bordered > .row:not(.form-group) {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-24);
}

.panel-body.bordered > .row:not(.form-group):before,
.panel-body.bordered > .row:not(.form-group):after {
    display: none;
}

.panel-body.bordered > .row:not(.form-group) .form-group {
    margin-bottom: 0;
}

/* Radios : gap 32px */
.radio-inline,
.radio-image,
.radio-boolean,
.radio-round,
.form-inline {
    gap: var(--space-32);
}

/* Labels : couleur noire */
label, .label {
    color: var(--color-black);
}

/* Fieldset : gap gere l'espacement, pas de margin-bottom sur les enfants */
.di-viewport fieldset > .alert {
    margin-bottom: 0;
}

/* Badges titre pret */
h3.titrePret,
.h3.badge {
    display: inline-block;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--input-border-radius);
    border: 0.5px solid rgba(64, 64, 66, 0.40);
    background: var(--color-white);
    color: var(--color-primary-dark);
    font-size: var(--font-size-3);
}

fieldset .h3.badge:first-of-type {
    margin-top: 0;
}

/* Badge encours : reset du style badge tunnel (affiche comme un h4 nom assure) */
#demande_form_encours .h3.badge {
    display: block;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    text-align: inherit;
}

/* Titre pret + bouton supprimer : meme ligne */
.titreEtSupprimePret {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.titreEtSupprimePret .btn-supprimePret {
    padding: 0;
    border: none;
    background: none;
    font-size: var(--font-size-2);
    color: #ff3b30;
    line-height: 1;
}

.titreEtSupprimePret .btn-supprimePret:hover,
.titreEtSupprimePret .btn-supprimePret:focus {
    color: #d43b47;
    background: none;
}

.titreEtSupprimePret .libelle-supprimePret {
    display: none;
}

/* Encours : enfants en colonne avec gap */
#demande_form_encours [id^="encoursPersonne"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

#demande_form_encours [id^="encoursPersonne"] > * {
    width: 100%;
}

.ligneQuotites .titrePret {
    margin-top: 0;
}

/* Navbar tunnel : espacement texte + Trustpilot */
.navbar-tunnel .col-lg-6 p {
    margin-bottom: var(--space-8);
}

.navbar-tunnel .col-lg-6 p:last-child {
    margin-bottom: 0;
}

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

/* Desktop : footer simplifie, pas de padding nav */
footer nav.container {
    padding: var(--space-24) 0;
}

footer nav.container p {
    margin: 0;
}

footer nav > .row > * {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

footer nav.container > .row {
    align-items: center;
}

footer nav.container .nav-pills > li {
    margin-bottom: 0;
}

/* Arguments footer : images compactes, texte cache en desktop */
#divArgFooter img {
    max-width: 48px;
    max-height: 48px;
    width: auto;
    height: auto;
}

#divArgFooter .divArgFooter-desc {
    display: none;
}

/* =========================================================
   RESPONSIVE TABLETTE / MOBILE
   ========================================================= */

@media (max-width: 1200px) {
    /* Header : banniere + navbar = 136px */
    header + * {
        margin-top: 136px;
    }

    /* Logo : padding gauche (pas de burger dans le tunnel) */
    .navbar-brand {
        padding-left: var(--space-16);
    }

    /* Footer : padding 16px (surcharge 15px BS3 et 0px desktop) */
    footer .container {
        padding-left: var(--space-16);
        padding-right: var(--space-16);
    }

    /* Copyright : padding vertical + 16px lateral */
    footer nav.container {
        padding: var(--space-24) var(--space-16);
    }

    /* Arguments footer : texte visible */
    #divArgFooter .divArgFooter-desc {
        display: block;
        font-size: 14px;
    }
}