:root {
    /* Idéalement à déplacer dans token.css si ce n’est pas déjà fait */
    --container-width: auto; /* Actuellement non utilisé dans ce bloc */
    --di-transition-duration: 0.35s;
}

main {
    margin-top: 0;
}

.full-width.bg-bleu {
    background: var(--color-blue-light);
    padding: var(--space-12);
}

.full-width.bg-bleu p {
    margin: 0;
    color: var(--color-black);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-3);
}

header nav .navbar-text {
    width: 100%;
}

/* ----------------- barre de progression ----------------- */

.progress {
    margin-bottom: 12px;
}

.global-progression-wrapper {
    margin-bottom: var(--space-32);
}

/* --------------------- viewport formulaire ----------------- */
/* Viewport global : conteneur des fieldsets "écran par écran" */
main.container {
    overflow-x: hidden;
    box-shadow: inset 20px 0 20px white, inset -20px 0 20px white;
}

.di-viewport {
    position: relative;
    background: #fff;
    padding: 0;
    width: 100%;
    /*min-height: 500px;  hauteur mini de base */
    box-sizing: border-box;
}

.di-viewport div[class*="col-"] {
    min-height: 0;
}

/* Fieldset "au repos" : flux normal, il donne sa hauteur au viewport */

.di-viewport fieldset {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1;
    background: #fff;
    transform: translateX(0%);
}

/* Fieldset en animation : superposés en absolu */

.di-viewport fieldset.fs-anim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: auto;
}

.di-viewport div[class*="col-"] > fieldset.fs-anim {
    left: 15px;
    right: 15px;
}

/* Bloc CTA injecté par demandeInternaute :
   grâce à flex + margin-top:auto, il se colle en bas du fieldset */

.fieldset-cta {
    margin-top: auto;
}

/* Fieldset invisible dans l'état normal (géré par demandeInternaute) */

fieldset.hidden {
    display: none !important;
}

.di-viewport legend {
    font-size: var(--font-size-1);
    color: var(--color-blue);
    font-weight: var(--font-weight-bold);
    border: 0;
    margin-bottom: var(--space-32);
    display: block;
}

/* --------------------- états d’animation ----------------- */
/*
   - fs-initial : position de départ (à droite, transparent)
   - fs-enter   : position finale (en place, opaque)
   - fs-initial-retour / fs-leave-retour : cas de navigation arrière
*/

.di-viewport fieldset.fs-anim.fs-initial {
    transform: translateX(50%);
    opacity: 0;
}

.di-viewport fieldset.fs-anim.fs-enter {
    transform: translateX(0%);
    opacity: 1;
}

.di-viewport fieldset.fs-anim.fs-initial-retour {
    transform: translateX(-50%);
    opacity: 0;
}

.di-viewport fieldset.fs-anim.fs-leave-retour {
    transform: translateX(50%);
    opacity: 0;
}

/* Animation "wiggle" sur la sortie avant :
   petit coup à droite puis glisse vers la gauche en disparaissant */

@keyframes fs-leave-wiggle {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateX(10px) scale(1.01);
        opacity: 0.7;
    }
    30% {
        transform: translateX(0px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-60%) scale(1);
        opacity: 0;
    }
}

.di-viewport fieldset.fs-anim.fs-leave {
    animation: fs-leave-wiggle var(--di-transition-duration) ease-in-out forwards;
}

/* Transitions douces sur les états gérés en transition */

.di-viewport fieldset.fs-anim.fs-initial,
.di-viewport fieldset.fs-anim.fs-enter,
.di-viewport fieldset.fs-anim.fs-initial-retour,
.di-viewport fieldset.fs-anim.fs-leave-retour {
    transition-property: transform, opacity;
    transition-duration: var(--di-transition-duration);
    transition-timing-function: ease-in-out;
    will-change: transform, opacity;
}

/* Réduction des animations si l’utilisateur a activé "réduire les animations" */

@media (prefers-reduced-motion: reduce) {
    .di-viewport fieldset.fs-anim.fs-initial,
    .di-viewport fieldset.fs-anim.fs-enter,
    .di-viewport fieldset.fs-anim.fs-initial-retour,
    .di-viewport fieldset.fs-anim.fs-leave-retour {
        transition: none !important;
    }

    .di-viewport fieldset.fs-anim.fs-leave {
        animation: none !important;
    }
}

/* --------------------- ajustements de formulaire existant ----------------- */
form[name=demande_form] .di-viewport .panel-body {
    padding: 0;
}

/* un peu de custom pour les panel bordered */
/*============== BORDERED ET SHADOW=====*/
.bordered {
    background: var(--color-white);
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
}

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


/* On masque les titres h4 "techniques" et la première ligne des panels détail */
#demande_form_personnes h4,
#demande_form_prets h4,
.row > [class*="col-"] > fieldset > .panel.panel-detail > .panel-body > .row:first-child {
    display: none;
}

/* On supprime les marges internes pour coller au layout DI */

.row > [class*="col-"] > fieldset > .panel.panel-detail > .panel-body {
    padding: 0;
    margin: 0;
}

#demande_form_nombreassures label:before,
#demande_form_typeprojet label:before,
#demande_form_objetprojet label:before {
    content: none;
}

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

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

/* type de projet */
#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');
}

/* nombre d'assuré */
#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');
}

/* objet du pêt */
#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; /* ou space-around / space-evenly */

}

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

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

.preteur.radio-image label {
    height: 80px;
    font-weight: bold;
}

/* logo décoratif */
.preteur.radio-image label::before {
    content: "" !important;
    display: none;
}

.preteur.radio-image label:last-child:before {
    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;
}
.ligneQuotites .titrePret{
    margin-top: 0;
}
.btn-supprimePret {
    position: absolute;
    top: -16px;
    right: 0;
}

#demande_form_comparer {
    display: none;
}

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