/* --------------------------------------------------------------------
Tarification Solidarité Transport
Main style-sheet
Le Studio, Worldline
-------------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

:focus {
    outline: 2px solid var(--theme-button-background-hover-color);
    outline-offset: 2px;
}

html {
    font-size: 62.5%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: 100%;
}

/*-----------------------------PAGE ACCUEIL-----------------------------*/

.bandeau-info {
    background-color: var(--theme-bandeau-background-color);
    color: var(--theme-bandeau-text-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border-radius: var(--radius-regular);
}

/*-----------------------------DEFAULTS-----------------------------*/

body {
    /* Typography */
    font-family: var(--stackr), sans-serif;
    font-size: 100%;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'liga' off, 'clig' off;
    letter-spacing: .015rem;
    /* Colors */
    color: var(--theme-neutral-text-color);
    background-color: var(--theme-neutral-background-color);
    /* Layout */
    display: flex;
    flex-direction: column;
    /* Position */
    text-align: left;
    position: relative;
    /* Dimensions */
    min-height: 100vh;

    &.header-opened {
        height: 100vh;
        overflow: hidden;

        .hero-banner, #content, .footer-top, footer {
            visibility: hidden;
        }
    }
}

@media (min-width: 48rem) {
    body.header-opened {
        height: unset;

        .hero-banner, #content, .footer-top, footer {
            visibility: visible;
        }
    }
}

p,
    /* a, */
li,
dt,
dd,
th,
td {
    font-size: 1.2rem;
    max-width: 80ch;
}

img {
    max-width: 100%;
}

button svg {
    pointer-events: none;
}

/*------------------- BUTTON  ------------------- */

button {
    cursor: pointer;
}

.btn-group {
    margin: 2em 0;
    text-align: center;
}

.btn-group button {
    margin: 0.5em;
}

.login-form .btn-group {
    margin-bottom: 0;
}

.white-bg-frame .btn-group {
    margin-top: 0;
}

.small-btn-size {
    text-align: center;
    font-family: var(--stacksb), sans-serif;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 2rem;
    border-radius: var(--radius-regular);
    cursor: pointer;
}


.small-ico-btn-size {
    position: relative;
    text-align: center;
    font-family: var(--stacksb), sans-serif;
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0.5em 1em 0.5em 0;
    padding: 1rem 1.7rem;
    border-radius: var(--radius-regular);
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 2em;
    text-indent: -10000em;
    z-index: 100;
}

.ico-btn-size {
    position: relative;
    text-align: center;
    font-family: var(--stacksb), sans-serif;
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0.5em 1em 0.5em 0;
    padding: 1rem 1.7rem;
    border-radius: var(--radius-regular);
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 2.3em;
    text-indent: -10000em;
    z-index: 100;
}

.icotxt-btn-size {
    width: fit-content;
    position: relative;
    font-family: var(--stacksb), sans-serif;
    margin: 0 1em 1em 0;
    padding: 1rem 1.7rem 1rem 4.7rem;
    border-radius: var(--radius-regular);
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 1em 50%;
    background-size: 1.9em;
    z-index: 100;
}

.icotxt-btn-size-first-request {
    width: fit-content;
    position: relative;
    font-family: var(--stacksb), sans-serif;
    margin: 0 1em 1em 0;
    border-radius: var(--radius-regular);
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 1em 50%;
    background-size: 1.9em;
    z-index: 100;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1rem 6rem;
}

a.edit {
    background-image: url(../img/ico-modifier-white.svg);
}

a.add {
    background-image: url(../img/ico-plus-cercle-white.svg);
}

button.blue-add {
    background-image: url(../img/ico-plus-cercle.svg);
}

button.black-delete {
    background-image: url(../img/ico-supprimer-black.svg);
}

button.edit {
    background-image: url(../img/ico-modifier-white.svg);
}

button.delete {
    background-image: url(../img/ico-supprimer-white.svg);
}

button.add {
    background-image: url(../img/ico-plus-cercle-white.svg);
}

button.see {
    background-image: url(../img/ico-visualiser-white.svg);
}

button.mail {
    background-image: url(../img/ico-mail-white.svg);
}

.primary-btn {
    color: var(--theme-button-text-color);
    background-color: var(--theme-button-background-color);
    border: solid 0.1rem var(--theme-button-background-color);
    text-decoration: none;

    &:hover, &:focus {
        color: var(--theme-button-text-hover-color);
        background-color: var(--theme-button-background-hover-color);
        border-color: var(--theme-button-background-hover-color);
    }

    &:disabled {
        background-color: var(--theme-button-disabled-background-color);
        color: var(--theme-button-disabled-text-color);
        border-color: var(--theme-button-disabled-background-color);
        cursor: not-allowed;
    }
}

.secondary-btn-one, .secondary-btn {
    color: var(--theme-secondary-button-text-color);
    background-color: var(--theme-secondary-button-background-color);
    border: solid 0.1rem var(--theme-secondary-button-text-color);
    text-decoration: none;
    text-align: center;
    max-width: none;

    &:hover, &:focus {
        color: var(--theme-secondary-button-text-hover-color);
        background-color: var(--theme-secondary-button-background-hover-color);
        border-color: var(--theme-secondary-button-text-hover-color);
    }

    &:disabled {
        background-color: var(--theme-secondary-button-disabled-background-color);
        color: var(--theme-secondary-button-disabled-text-color);
        border-color: var(--theme-secondary-button-disabled-text-color);
        cursor: not-allowed;
    }
}

.secondary-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.double-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    a, button {
        width: 100%;
    }
}

/*-----------------------------COMPONENTS TEMPLATE PAGE-----------------------------*/

/* .library-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: var(--neutral-light);
    padding: 2rem;
    min-height: 5rem;
    box-shadow: 0 3px 8px rgb(0 0 0 / 30%);
} */

/* .brand-name {
    color: var(--neutral-text);
    text-transform: uppercase;
    font-size: 2rem;
    font-family: var(--stackb);
}

.brand-name span {
    color: var(--interaction-blue);
    display: block;
    text-transform: none;
} */

/* #library-container {
    max-width: none;
    margin: 0;
    background: var(--neutral-white);
    width: 100%;
} */

/* .component-title {
    text-transform: uppercase;
    font-family: var(--stackb);
    font-size: 1.8rem;
    margin: 3rem 0;
} */

/* .box-component {
    width: 100%;

} */

.width-regulation {
    max-width: 80ch;
}

/* .library-separator {
    border: solid .1rem var(--neutral-text);
    margin: 2rem 0;
} */


/*-----------------------------HEADINGS-----------------------------*/

h1 {
    font-family: var(--stackb), sans-serif;
    font-size: 3.4rem;
    line-height: 1.2;
}

h2,
.h2 {
    max-width: 1080px;
    font-family: var(--stackb), sans-serif;
    font-size: 3rem;
    line-height: 1.3;
}

h3,
.h3 {
    font-family: var(--stackb), sans-serif;
    font-size: 2.6rem;
    line-height: 1.3;
}

h4,
.h4,
.link-card {
    font-family: var(--stackb), sans-serif;
    font-size: 2rem;
    line-height: 1.4;
}

h5,
.h5,
h6,
.h6 {
    font-family: var(--stacksb), sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
}

/*-------------------------------TEXT-------------------------------*/

.semibold {
    font-family: var(--stacksb), sans-serif;
}

.bold {
    font-family: var(--stackb), sans-serif;
}

strong {
    font-family: var(--stacksb), sans-serif;
}

.upload-document {
    color: #c73333;
}

.input-box-upload-document {
    margin-top: 10px;
}

.title-bandeau-info {
    text-wrap: nowrap;
}

.input-message {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    margin-top: 1rem;
}

.error-text {
    color: var(--accent-error);
}

.text--xxs,
.text--xss a {
    font-size: 1rem;
    line-height: 1.5;
}

.text--xs,
.text--xs a {
    font-size: 1.2rem;
    line-height: 1.5;
}

.text--s,
.text--s td,
.text--s th {
    font-size: 1.5rem;
    line-height: 1.5;
}

.text--current,
.text--current p,
.text--current li {
    font-size: 1.5rem;
    line-height: 1.5;
}

.text--medium,
.text--medium p,
.text--medium li {
    font-size: 1.8rem;
    line-height: 1.5;
}

.explanation-text {
    margin-top: 1rem;
}

/*-------------------------------LINK-------------------------------*/

/* .a11y {
    color: var(--interaction-blue);
    fill: var(--interaction-blue);
    cursor: pointer;
    transition: all .2s;
}

.a11y:hover {
    color: var(--neutral-text);
    fill: var(--neutral-text);
} */

.link--blue {
    text-decoration: none;
    color: var(--interaction-blue);
    fill: var(--interaction-blue);
    cursor: pointer;
    transition: all .2s;
}

.link--blue:hover {
    text-decoration: underline;
    color: var(--focus-blue);
    fill: var(--focus-blue);
}

.link--blue:focus {
    text-decoration: underline;
    color: var(--focus-blue);
    fill: var(--focus-blue);
}

.web-link {
    width: fit-content;
    text-decoration: none;
    color: var(--interaction-blue);
    fill: var(--interaction-blue);
    cursor: pointer;
    transition: all .2s;
}

.web-link:hover {
    text-decoration: none;
    color: var(--neutral-white);
    fill: var(--neutral-white);
    background: var(--interaction-blue);
    transition: all .2s;
}

.dark-link {
    color: var(--theme-neutral-text-color);
    fill: var(--theme-neutral-text-color);
    cursor: pointer;
    transition: all .2s;
}

.dark-link:hover {
    color: var(--theme-neutral-link-hover-color);
}

.site-map-ul {
    margin: 0;
    padding: 0;
}

.site-map-ul li {
    list-style-type: none;
    margin-bottom: 1rem;
}

.site-map-ul a {
    text-decoration: none;
}

.site-map-ul a:hover {
    text-decoration: underline;
    color: var(--focus-blue);
}

a[target="_blank"]::after {
    display: inline-block;
    overflow: hidden;
    content: "Ouvre nouvelle fenêtre";
    width: 1.15rem;
    height: 2rem;
    text-indent: 50em;
    background-image: url(../img/extern-link-icon.svg);
    background-size: contain;
    background-position: 0 .8rem;
    background-repeat: no-repeat;
    margin-left: .5rem;
}

.untarget-icon[target="_blank"]::after {
    display: none;
}

.link-card::after {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

a.download {
    padding-left: 1.3em;
    background-image: url(../img/ico-telechargement.svg);
    background-size: contain;
    background-position: 0 0.1em;
    background-repeat: no-repeat;
}

a.print {
    padding-left: 1.3em;
    background-image: url(../img/ico-impression.svg);
    background-size: contain;
    background-position: 0 0.1em;
    background-repeat: no-repeat;
}

/*----------------------------Labels----------------------------*/

.numeral-adjective {
    /* Typography */
    font-size: 1.5rem;
    /* Aligne les adjectifs numéraux ordinaux (ex: "er" dans 1er) en haut */
    vertical-align: top;
}

.nav-label-second-part {
    margin-left: 0.5rem;
}

.numeral-mc2i {
    font-size: 2.3rem;
}


/*-----------------------------HERO BANNER----------------------------*/

.hero-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/TST-homepage-hero-img.png);
    background-color: #737373;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5rem;
}

/* .hero-banner.JEI {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/TST-homepage-hero-img-JEI.png);
} */

.hero-banner h1 {
    color: var(--neutral-white);
}

/*-----------------------------HOMEPAGE----------------------------*/
/*-----------------------------HERO BANNER----------------------------*/

.hero-banner-homepage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;

    .hero-img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        background-color: lightgray;
        min-height: 30rem;
    }
}

.button-cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    justify-content: center;
    gap: 2rem;
    margin: -5rem 2rem 2rem 2rem;

    a.button-card {
        text-decoration: none;
        background-color: var(--theme-neutral-background-color);
        border-radius: var(--radius-regular);
        box-shadow: 0 2px 10px 0 var(--theme-neutral-box-shadow);
        display: flex;
        padding: 2rem;
        align-items: flex-start;
        gap: 2.3rem;
        height: 100%;
        flex: 1;

        img.image-section {
            width: 80px;
            height: 80px;
        }

        .text-section {
            color: var(--theme-neutral-text-color);
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
            gap: 1rem;

            h2 {
                font-family: var(--stacksb), sans-serif;
                font-size: var(--font-size-s);
                line-height: var(--line-height-s);
            }

            p {
                width: 100%;
                font-family: var(--stackr), sans-serif;
                font-size: var(--font-size-xxs);
                line-height: var(--line-height-xxs);
            }
        }
    }

    a[target="_blank"]::after {
         content: ""; display: none; width: 0; height: 0; 
    }

    a.button-card:hover { box-shadow: 0 3px 10px 0 rgba(162, 186, 209, 1); }
}

/* Tablet/Desktop >= 48rem */
@media (min-width: 48rem) {
    .button-cards {
        flex-direction: row;
        align-items: center;
        gap: 4rem;
        margin: -6rem 2rem 4rem 2rem;

        .button-card {
            max-width: 41rem; /* 370px + padding-left 20px + padding-right 20px */
        }
    }
}

/*-----------------------------HOMEPAGE----------------------------*/
.layout.content-index {
    max-width:unset;
    display:block;
    padding: 0;

    main.main-column.main-index {
        display: block;
        padding: 0;
        max-width: unset;
    }
}

/*-----------------------------CONTENT PART1----------------------------*/

.tst-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--theme-neutral-secondary-background-color);
    padding: 2rem;
    gap: 2rem;

    &.flash-message {
        background-color: var(--theme-neutral-background-color);
        padding: 0rem 2rem;

        & > .tst-content-block {
            width: 100%;  
            max-width: var(--desktop-container-max-width);
        }
    }

    &:nth-child(even) {
        background-color: var(--theme-neutral-background-color);
    }

    &.tst-content-with-image {
        & > .tst-content-block {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            max-width: 52rem;
            flex-direction: column;
            align-items: center;
            padding: 0;

            &.text-section {
                gap: 2rem;

                h2 {
                    font-family: var(--stackb), sans-serif;
                    font-size: var(--font-size-h4);
                    line-height: var(--line-height-h4);
                    color: var(--theme-neutral-text-color);
                    width: 100%;
                }

                .tst-content-block-text {
                    font-family: var(--stackr), sans-serif;
                    font-size: var(--font-size-s);
                    line-height: var(--line-height-s);
                    color: var(--theme-neutral-text-color);
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    flex-direction: column;
                    gap: 0.8rem;

                    * {
                        font-family: var(--stackr), sans-serif;
                        font-size: var(--font-size-s);
                        line-height: var(--line-height-s);
                        color: var(--theme-neutral-text-color);
                    }

                    strong {
                        font-family: var(--stacksb), sans-serif;
                    }

                    ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;

                        li {
                            position: relative;
                            padding: 0.3rem 0 0.3rem 4rem;
                            font-family: var(--stacksb), sans-serif;
                            min-height: 30px;

                            &:not(:last-child) {
                                margin-bottom: 0.5rem;
                            }

                            &::before {
                                content: "";
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 30px;
                                height: 30px;
                                background: url("../img/oui.svg") no-repeat center/contain;
                            }
                        }
                    }
                }
            }
        }
    }

    &.tst-content-help {
        padding: 2rem 2rem calc(2rem + var(--tst-footer-top-distance)) 2rem;

        .tst-content-help-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 2rem;
            max-width: 52rem;
            width: 100%;

            h2 {
                max-width: unset;
                width: 100%;
                font-family: var(--stackb), sans-serif;
                font-size: var(--font-size-h4);
                line-height: var(--line-height-h4);
            }

            .help-button-cards {
                display: grid;
                grid-template-columns: 1fr;
                gap: 2rem;
                width: 100%;

                a {
                    text-decoration: none;
                }

                a[target="_blank"]::after {
                     content: ""; display: none; width: 0; height: 0; 
                }

                .help-button-card {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    min-height: 15rem;
                    padding: 1rem;
                    border-radius: 6px;
                    /* Ombre gris bleu */
                    box-shadow: 0 3px 10px 0 var(--theme-neutral-secondary-box-shadow);
                    background-color: var(--theme-neutral-background-color);

                    p {
                        flex: 1;
                        padding: 2rem;
                        max-width: unset;

                        font-family: var(--stackb), sans-serif;
                        font-size: var(--font-size-h5-h6);
                        line-height: var(--line-height-h5-h6);
                        color: var(--theme-neutral-text-color);
                    }
                }

                .help-button-card:hover { box-shadow: 0 3px 10px 0 rgba(162, 186, 209, 1); }
            }

            .link-section {
                a {
                    color: var(--theme-secondary-button-text-color);
                    font-family: var(--stacksb), sans-serif;
                    font-size: var(--font-size-s);
                    line-height: var(--line-height-s);
                    text-decoration-line: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: none;
                    text-decoration-thickness: auto;
                    text-underline-offset: auto;
                }

                a[target="_blank"]::after {
                    content: ""; display: none; width: 0; height: 0; 
                }
            }
        }
    }
}


/* For windows with width higher than 48rem (tablet breakpoint) */
@media (min-width: 48rem) {
    .tst-content {
        flex-direction: row;
        padding: 4rem 2rem;
        gap: 4rem;

        &:nth-child(even) {
            flex-direction: row-reverse;
        }

        &.tst-content-with-image {
            .tst-content-block {
                padding: 0
            }
        }

        &.tst-content-help {
            width: 100%;

            .tst-content-help-container {
                gap: 2.4rem;
                max-width: 108rem;

                .help-button-cards {
                    grid-template-columns: repeat(3, 1fr);
                    gap: 4rem;

                    .help-button-card {
                        height: 100%;
                    }
                }

                .link-section {
                    margin-top: 1.6rem;
                }
            }
        }
    }


}

/*------------------- FORM INPUT  ------------------- */

input, textarea, select {
    font-size: 1.4rem;
    font-family: var(--stackr), sans-serif;
    min-height: 4.4rem;
    width: 100%;
    padding: 1rem 2rem;
    border: .1rem solid var(--theme-input-border-color);
    border-radius: var(--radius-regular);
    max-width: 64rem;
    background-color: var(--theme-input-background-color);
    color: var(--theme-input-text-color);
}

select {
    padding-top: 1.25rem;
}

textarea {
    min-height: 150px;
    resize: none;
    overflow-y: hidden;
    transition: height 0.2s ease;
    padding-bottom: 35px;
    box-sizing: border-box;
}

.textarea-with-counter {
    width: 100%;
    position: relative;
}

.character-count {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 12px;
    background-color: var(--neutral-light);
    color: var(--black);
    font-weight: bold;
    padding: 0.2rem;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.character-count-red {
    font-size: 12px;
    color: var(--character-count-color);
    font-weight: bold;
    background-color: var(--character-count-background-color);
}

.character-count-black {
    font-size: 12px;
    color: #000;
    font-weight: bold;
    background-color: var(--neutral-light);
}

label {
    color: var(--theme-input-label-text-color);
    font-family: var(--stacksb), sans-serif;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.8rem;
    margin: .5rem 0;
}

.label-upload-document {
    text-transform: none;
    text-align: justify;
    font-size: 1.4rem;
    color: var(--theme-frame-text-color);
    margin: 0;
    font-family: inherit;
}

.legend_input {
    color: var(--theme-frame-label-color);
    font-family: var(--stacksb), sans-serif;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    align-items: center;
    gap: .5rem;
    line-height: 1.8rem;
    margin: .5rem 0;
}


.asterisk-mention {
    color: var(--accent-error);
    font-size: 2rem;
    font-family: var(--stackb), sans-serif;
    line-height: 2rem;
}

.input-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    width: 100%;
}

.wrap {
    flex-wrap: wrap;
}

/* input[type=radio],
input[type=checkbox]{
  visibility: hidden;
  position: absolute;
} */

.container-checkbox {
    display: flex;
    gap: 1em;
    align-items: center;
}

.container-checkbox-upload-document {
    display: flex;
    gap: 1em;
}

input[type=checkbox] {
    min-height: 1.2em;
    max-height: 1.2em;
    min-width: 1.2em;
    max-width: 1.2em;
    /* height : 1.2em ;
    width: 1.2em; */
}

input[type=radio] {
    position: relative;
    width: 1em;
    height: 1em;
    appearance: none;
    padding: 0;
    border-color: var(--interaction-blue);
    border-radius: 1em;
    min-height: 1em;
    min-width: 1em;
}

input[type=radio]:checked::before {
    position: absolute;
    content: '';
    display: block;
    width: calc(1em - 6px);
    height: calc(1em - 6px);
    top: 2px;
    left: 2px;
    border-radius: 100%;
    background-color: var(--interaction-blue);
}

.radio-wrapper {
    display: flex;
    gap: 1em;
    align-items: center;
}

.topalign {
    align-items: initial;
}

.topalign input {
    margin-top: 1.25rem;
}

.radio-wrapper label {
    text-transform: none;
    color: var(--theme-neutral-text-color);
    font-size: 1.4rem;
    line-height: 2.1rem;
    font-family: var(--stackr), sans-serif;
    height: auto;
}

.input-radio-horizontal {
    display: flex;
    gap: 1em;
    align-items: center;

    #add_member_css_commun_sexe {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

.input-radio-horizontal label {
    text-transform: none;
    color: var(--theme-frame-text-color);
    font-size: 1.4rem;
    line-height: 2.1rem;
    font-family: var(--stackr), sans-serif;
    height: auto;
    display: inline;
    margin: auto 10px auto 10px;
}

/* .heading-4 label {
    font-family: var(--stackb);
    font-size: 2rem;
    line-height: 1.4;
} */

.heading-5 label {
    font-family: var(--stacksb), sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
}

/*------------------------------LOGIN FORM-----------------------------*/

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    background-color: var(--medium-blue);
    border-radius: var(--radius-regular);
    z-index: 2;
    margin-bottom: 2rem;
}

div.login-form {
    display: block;
    margin-bottom: 3em;
}

.login-form > fieldset > legend {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.login-form > fieldset > legend > h2 > span,
.login-form > fieldset > legend > h1 > span {
    color: var(--neutral-dark);
    display: block;
}

.login-form h2 {
    margin-bottom: 1em;
}

article.one-column-layout .login-form h2 {
    margin-bottom: 0;
}

.login-frame-container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.two-column-layout .login-form {
    width: 100%
}

.two-column-layout .choice-card {
    width: 100%
}

.two-column-layout .choice-card .img-wrapper {
    flex-wrap: nowrap;
}

.vertical-align {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.right-align {
    justify-content: end;
}

/*-----------------------------CHOICE CARD----------------------------*/

.form-rights {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
    margin: 1rem 0;
}

.choice-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /*
    background-color: rgb(0, 135, 60, .065);
    */
    background-color: var(--theme-neutral-secondary-background-color);
    color: var(--theme-neutral-secondary-text-color);
    padding: 2rem;
    border-radius: var(--radius-regular);
}

.img-wrapper {
    display: block;
}

@media screen and (max-width: 500px) {
    .img-wrapper img {
        width: auto;
        height: auto;
    }
}

@media screen and (min-width: 500px) {
    .img-wrapper img {
        width: auto;
        height: 23rem;
        display: block;
        margin: auto;

    }
}

@media screen and (min-width: 1040px) {
    .img-wrapper img {
        width: auto;
        height: 19rem;

    }
}

.img-accueil img {
    width: auto;
    height: 10rem;
    max-width: none;
}

.two-choice-cards {
    display: block;
}

.two-div {
    margin-bottom: 2rem;
}


/* .profilOF, .profilTrainee {
    display: inline-grid;
    position: relative;
    left: auto;
    top: auto;
    gap: 2em;
    padding: 10px;
    list-style: none;
    z-index: 10;
    border: 1px solid #53606E;
    border-radius: 6px;
}

.profilOF li {
    margin: 10px;
    padding: 2px 0 2px 24px;
    font-size: 1.3em;
    font-weight: bold;
    color: var(--neutral-white);
    background: url(../img/ico-pointeur-white.svg) no-repeat 0 50%;
    background-size: 1.3em;
}

.profilTrainee li {
    padding: 2px 0 2px 1.5em;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--neutral-white);
    background: url(../img/ico-profil-white.svg) no-repeat 0 50%;
    background-size: 1.3em;
}

.profilOF li:nth-child(2n), .profilTrainee li:nth-child(2n) {
    background: url(../img/ico-deconnect-white.svg) no-repeat 0 50%;
}

.profilOF li a, .profilTrainee li a {
    color: var(--neutral-white);
    font-size: 1.1em;
    text-decoration: none;
} */

/*---------------- DOUBLE ACTION CARDS  ---------------- */

/* .double-action-card-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.action-card-wrapper {
    display: flex;
    gap: 1rem;
    padding: 2rem;
    border-radius: var(--radius-regular);
    box-shadow: 0 0 .8rem hsla(210, 50%, 88%, 1);
    justify-content: space-between;
}

.action-card-wrapper:hover {
    color: var(--neutral-white);
    background-color: var(--interaction-blue);
    transition: all .2s;
    cursor: pointer;
}

.action-card-wrapper:hover .right-arrow.interaction-blue {
    fill: var(--neutral-white);
}

.action-card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.action-card-text > h3 > a,
.action-card-text > h3 > .link-card {
    color: var(--neutral-text);
    text-decoration: none;
    font-family: var(--stacksb);
}

.action-card-wrapper:hover h3 a,
.action-card-wrapper:hover h3 .link-card {
    color: var(--neutral-white);
    transition: all .2s;
} */

.right-arrow.interaction-blue {
    margin-top: auto;
    margin-bottom: auto;
    min-width: 2.2rem;
    min-height: 2rem;
    fill: var(--interaction-blue)
}

/*------------------ DEFINITON FRAME  ------------------ */

.right-arrow.interaction-blue.small {
    min-width: 1.3rem;
    min-height: 1.3rem;
    fill: var(--interaction-blue);
    margin-right: .6rem;
}

.right-arrow.interaction-blue.medium {
    min-width: 1.6rem;
    min-height: 1.6rem;
    fill: var(--interaction-blue);
    margin-right: .8rem;
}

.definition-frame {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background-color: var(--theme-frame-background-color);
    color: var(--theme-frame-text-color);
    border-radius: var(--radius-regular);
}

.message-frame {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2em 0;
    text-align: center;
    padding: 7rem 2rem 2rem 2rem;
    background: url(../img/ico-confirmation.svg) no-repeat 50% 2em;
    border: 1px solid var(--neutral-medium);
    border-radius: var(--radius-regular);
}

.message-warning {
    display: flex;
    align-items: center;
    padding: 2rem 2rem 2rem 2rem;
    border: 1px solid var(--neutral-medium);
    border-radius: var(--radius-regular);
}

.icon-warning {
    flex-shrink: 0; /* svg ne rétrécie pas */
    margin-top: 1rem;
}

@media screen and (max-width: 40rem) {
    .message-warning {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.unmargin {
    margin: 0;
}

/* Enlève l'image dans le message de succès lors d'une impression */
@media print {
    .message-frame {
        background: none;
        padding: 2rem 2rem 2rem 2rem;
    }

    #printButton {
        display: none;
    }

    .secondary-nav {
        display: none;
    }

    aside > .actu-frame {
        display: none;
    }

    .go-to-top-icon {
        display: none;
    }
}

.message-frame.error {
    background-image: url(../img/ico-echec.svg);
}

.message-frame.info {
    background-image: url(../img/ico-info-grand.svg);
}

.message-frame .entry-introduction {
    margin: 0;
    font-weight: bold;
}

.boxed-text {
    background-color: var(--neutral-white);
    border: solid .1rem var(--neutral-medium);
    padding: 1.5rem;
    border-radius: var(--radius-regular);
    margin: .5rem 0;
}

/*------------- DEFINITON FRAME WITH IMAGE  ------------- */

.definition-frame-wrapper {
    display: block;
}

.definition-frame-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.with-image img {
    padding: 2% 30% 4% 30%;
}

/*------------------- INFO TOOLTIP  ------------------- */

.info-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.info-icon {
    background: url(../img/info-icon.svg) no-repeat;
    width: 2rem;
    height: 2rem;
}

.tooltip-content::before {
    content: "";
    position: absolute;
    background-color: var(--neutral-text);
    right: .35rem;
    top: -0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(45deg);
    z-index: -1;
}

.tooltip-content {
    display: none;
    background-color: var(--neutral-text);
    padding: 0.7rem 1rem;
    color: var(--neutral-white);
    border-radius: var(--radius-regular);
    position: absolute;
    top: 3rem;
    right: 0;
    width: 20rem;
    transition: right 0s;
    z-index: 6;
}

.tooltip-content p {
    margin: 0;
}

.tooltip-content-add::before {
    content: "";
    position: absolute;
    background-color: var(--neutral-text);
    right: .35rem;
    top: -0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(45deg);
    z-index: -1;
}

.tooltip-content-add {
    display: none;
    background-color: var(--neutral-text);
    padding: 0.7rem 1rem;
    color: var(--neutral-white);
    border-radius: var(--radius-regular);
    position: absolute;
    top: 3rem;
    right: 0;
    width: 20rem;
    transition: right 0s;
    z-index: 2000;
}

.tooltip-content-add-upload::before {
    content: "";
    position: absolute;
    background-color: var(--neutral-text);
    right: .35rem;
    top: -0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(45deg);
    z-index: -1;
}

.tooltip-content-add-upload {
    display: none;
    background-color: var(--neutral-text);
    padding: 0.7rem 1rem;
    color: var(--neutral-white);
    border-radius: var(--radius-regular);
    position: absolute;
    top: 3rem;
    right: 0;
    width: 20rem;
    transition: right 0s;
    z-index: 2000;
}


@media (max-width: 465px) and (min-width: 375px) {
    .tooltip-content {
        display: none;
        background-color: var(--neutral-text);
        padding: 0.7rem 1rem;
        color: var(--neutral-white);
        border-radius: var(--radius-regular);
        position: absolute;
        top: 3rem;
        left: 0.2rem;
        width: 20rem;
        transition: right 0s;
        z-index: 2000;
    }

    /* pointe du span */
    .tooltip-content::before {
        content: "";
        position: absolute;
        background-color: var(--neutral-text);
        left: .35rem;
        top: -0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        transform: rotate(45deg);
        z-index: -1;
    }

    .tooltip-content-add {
        display: none;
        background-color: var(--neutral-text);
        padding: 0.7rem 1rem;
        color: var(--neutral-white);
        border-radius: var(--radius-regular);
        position: absolute;
        top: 3rem;

        width: 20rem;
        transition: right 0s;
        z-index: 2000;
    }

    /* pointe du span */
    .tooltip-content-add::before {
        content: "";
        position: absolute;
        background-color: var(--neutral-text);
        right: .35rem;
        top: -0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        transform: rotate(45deg);
        z-index: -1;
    }

    .tooltip-content-add-upload {
        display: none;
        background-color: var(--neutral-text);
        padding: 0.7rem 1rem;
        color: var(--neutral-white);
        border-radius: var(--radius-regular);
        position: absolute;
        top: 3rem;
        width: 20rem;
        transition: right 0s;
        z-index: 2000;
    }

    .tooltip-content-add-upload::before {
        content: "";
        position: absolute;
        background-color: var(--neutral-text);
        right: .35rem;
        top: -0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        transform: rotate(45deg);
        z-index: -1;
    }
}


@media (max-width: 310px) and (min-width: 295px) {
    .tooltip-content {
        display: none;
        background-color: var(--neutral-text);
        padding: 0.7rem 1rem;
        color: var(--neutral-white);
        border-radius: var(--radius-regular);
        position: absolute;
        top: 3rem;
        left: 0.2rem;
        width: 20rem;
        transition: right 0s;
        z-index: 2000;
    }

    /* pointe du span */
    .tooltip-content::before {
        content: "";
        position: absolute;
        background-color: var(--neutral-text);
        left: .35rem;
        top: -0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        transform: rotate(45deg);
        z-index: -1;
    }

    .tooltip-content-add-upload::before {
        content: "";
        position: absolute;
        background-color: var(--neutral-text);
        right: .35rem;
        top: -0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        transform: rotate(45deg);
        z-index: -1;
    }

    .tooltip-content-add-upload {
        display: none;
        background-color: var(--neutral-text);
        padding: 0.7rem 1rem;
        color: var(--neutral-white);
        border-radius: var(--radius-regular);
        position: absolute;
        top: 3rem;
        width: 20rem;
        transition: right 0s;
        z-index: 2000;
    }

}

@media (max-width: 294px) and (min-width: 292px) {
    .tooltip-content {
        display: none;
        background-color: var(--neutral-text);
        padding: 0.7rem 1rem;
        color: var(--neutral-white);
        border-radius: var(--radius-regular);
        position: absolute;
        top: 3rem;
        left: 1px;
        right: 1px;
        width: 20rem;
        transition: right 0s;
        z-index: 2000;
    }

    /* pointe du span */
    .tooltip-content::before {
        content: "";
        position: absolute;
        background-color: var(--neutral-text);
        left: .35rem;
        top: -0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        transform: rotate(45deg);
        z-index: -1;
    }
}

/*-------------------------- FORM CONTAINER  -------------------------- */

.form-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-container > legend {
    display: flex;
    flex-direction: column;
}

/*----------------------------MAIN & LAYOUT----------------------------*/

main, .layout {
    padding: 1.2rem 2rem max(6rem, calc(1rem + var(--tst-footer-top-distance)));
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.layout {
    padding: 2rem 2rem calc(1rem + var(--tst-footer-top-distance)) 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 0 auto;
}

.main-column {
    padding: 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.one-column-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.two-column-layout {
    display: inline-grid;
    gap: 2rem;
}

/*-------------------------------ASIDE------------------------------*/

aside {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: flex-start;
    width: 100%;
}

aside a {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
}

aside > .secondary-btn {
    display: block;
    width: 100%;
    text-wrap: nowrap;
}

/*------------------- ACTU FRAME  ------------------- */

.actu-frame {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background-color: var(--theme-neutral-background-color);
    border: solid .1rem var(--theme-neutral-text-color);
    border-radius: var(--radius-regular);
}

.img-carte-navigo {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
}

.img-carte-navigo img {
    max-width: auto;
    height: 20em;
}

.img-carte-navigo + img {
    max-width: 20em;
}

.actu-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: .5rem;
}

.pagination-icon {
    width: 3rem;
    height: 3rem;
    fill: var(--neutral-white);
}

.pagination-link {
    border-radius: var(--radius-regular);
}

.pagination-link[disabled] {
    background-color: var(--neutral-dark);
    cursor: not-allowed;
}

.pagination-link {
    background-color: var(--interaction-blue);
}

.pagination-link:hover {
    background-color: var(--focus-blue);
}

/*------------------- LATEST RELEASES  ------------------- */

.latest-releases {
    padding: 2rem;
    background-color: var(--neutral-white);
    border: solid .1rem var(--neutral-text);
    border-radius: var(--radius-regular);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

figcaption {
    display: flex;
    margin-top: 0.5rem;
}

.latest-releases img {
    max-width: 25rem;
}

/*----------------------------BREADCRUMB----------------------------*/

.breadcrumb-nav {
    padding-right: 2rem;
    margin-bottom: 3.4rem;
}

.breadcrumb-nav.content-page {
    margin-bottom: 0;
}

.content-page .breadcrumbs-list {
    line-height: normal;
}

.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    line-height: 2.5;
}

.breadcrumb-nav li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: .25rem;
}

.breadcrumb-icon {
    margin-right: .25rem;
    fill: var(--interaction-blue);
    transform: translateY(.1rem);
}

/*---------------------------------UL-----------------------------------*/

ul {
    margin: 0 0 2rem;
    padding: 0 0 0 2rem;
}

li {
    padding: 0 0 .25rem .5rem;
}

.bullet-list {
    margin: 0;
}

.chevrons-list {
    margin: 0;
    padding: 0;
}

.chevrons-list li {
    list-style: none;
    padding: .5rem 0;
}

.decimal-list li {
    list-style-type: decimal;
    margin-left: 2rem;
    padding: .5rem 0;
}

.decimal-list ul {
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0;
}

.decimal-list ul li {
    list-style-type: circle;
    margin-left: 2rem;
    padding: .5rem 0;
}

.sublist {
    margin: 1rem 0 0 0;
}

dl {
    display: flex;
    margin-bottom: 2em;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    grid-gap: 0;
}

dt {
    font-size: 1.5rem;
    width: 100%;
    text-align: left;
}

dd {
    flex: auto;
    width: 100%;
    margin-bottom: 1em;
    font-size: 1.5rem;
    font-weight: bold;
    word-wrap: break-word;
}

/*---------------------------------ol-----------------------------------*/

ol {
    margin: 0 0 2rem;
    padding: 0 0 0 2rem;
}

.decimal-list ol {
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0;
}

.decimal-list ol li {
    list-style-type: circle;
    margin-left: 2rem;
    padding: .5rem 0;
}

.secondary-nav ol {
    margin-top: 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*------------------------ TST ESPACE CONNECTE  ------------------------ */
/*
.heading-banner {
    background-image: url(../img/my-space-banner-bg-2.svg);
    background-size: cover;
    padding: 2rem;
}
*/

.heading-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.text-info-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.secondary-nav {
    z-index: 100;
}

.secondary-nav li {
    list-style-type: none;
}

.secondary-nav ul {
    margin-top: 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.secondary-nav a {
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: var(--stacksb), sans-serif;
    display: flex;
    align-items: center;
    gap: 1.9rem;
    background-color: var(--theme-neutral-secondary-background-color);
    color: var(--theme-neutral-secondary-text-color);
    padding: 1.5rem;
    border-radius: var(--radius-regular);
    width: 100%;
}

.secondary-nav a:hover {
    text-decoration: underline;
}

.message-preview {
    padding: 1rem 0;
    border-top: solid .1rem var(--theme-neutral-text-color);
}

.message-preview.no-title {
    padding: 0;
    border: none;
}

.message-preview.no-title .input-box:last-of-type {
    margin-top: 2em;
}


/*--------------------------------QUESTIONAIRE---------------------------------*/

.questionaire {
    display: block;
    gap: 1rem;
}

.questionaire img {
    max-width: 8rem;
}

/*-------------------------------STEPPER---------------------------------*/

/* OL steppper */
/* .stepper {
    position: relative;
    display: flex;
    list-style-type: none;
    margin: 2rem 0;
}


.stepper li {
    font-family: var(--stacksb);
    flex: 1;
    padding-bottom: 2.5rem;
} */


/* Stepper number */
/* .stepper li span {
    color: var(--interaction-blue);
    font-size: 2rem;
    line-height: 2.25rem;
}


.stepper li:last-of-type {
    flex: 0;
}

.stepper li:last-of-type::after {
    content: none;
} */


/* Circled numbers */
/* .stepper li::before {
    display: block;
    position: relative;
    margin-bottom: 0.5rem;
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background-color: var(--neutral-medium);
    border-radius: 100%;
    z-index: 10;
} */

/* Actual step */

/* .stepper li p {
    font-size: 1.6rem;
    line-height: 2.25rem;
    position: absolute;
    bottom: 0;
}

.stepper li[aria-current]::before {
    background-color: var(--interaction-blue);
} */

/* Old step */
/* .stepper li.old-step::before {
    background-color: var(--interaction-blue);
} */


/* Active step */

/* .stepper li.active-step p {
    position: absolute;
    left: 0;
}

.stepper li.active-step::before {
    background-color: var(--focus-blue);
} */

/* Next step */
/* .stepper li.next-step p,
.stepper li.old-step p {
    display: none;
} */

/* Last step with check icon */
/* .stepper li.last-step::before {
    width: 2rem;
    height: 2rem;
    top: -0.4rem;
    background-image: url(../img/check-line-white.svg);
    color: var(--neutral-white);
} */

/* Overall line first step */
/* .stepper li::after {
    display: block;
    position: absolute;
    content: "";
    width: calc(100% - 0.55rem);
    max-width: 1080px;
    height: 0.40rem;
    top: 0.40rem;
    left: 0.55rem;
    background-color: var(--neutral-medium);
    z-index: 1;
} */

/* Overall line second step */
/* .second-step li::after {
    background: linear-gradient(to right, var(--interaction-blue) 33%, var(--neutral-medium) 33%, var(--neutral-medium) 33%);
}

.second-step-small li::after {
    background: linear-gradient(to right, var(--interaction-blue) 50%, var(--neutral-medium) 50%);
}

.second-step-big li::after {
    background: linear-gradient(to right, var(--interaction-blue) 25%, var(--neutral-medium) 25%);
} */

/* Overall line third step */
/* .third-step li::after {
    background: linear-gradient(to right, var(--interaction-blue) 66%, var(--neutral-medium) 33%);
}

.third-step-small li::after {
    background: linear-gradient(to right, var(--interaction-blue) 99%, var(--neutral-medium) 1%);
}

.third-step-big li::after {
    background: linear-gradient(to right, var(--interaction-blue) 50%, var(--neutral-medium) 50%);
} */

/* Overall line fourth step */
/* .fourth-step li::after {
    background: linear-gradient(to right, var(--interaction-blue) 99%, var(--neutral-medium) 1%);
}

.fourth-step-big li::after {
    background: linear-gradient(to right, var(--interaction-blue) 2 74%, var(--neutral-medium) 26%);
} */

/* Overall line five step */
/* .five-step-big li::after {
    background: linear-gradient(to right, var(--interaction-blue) 99%, var(--neutral-medium) 1%);
} */

/* Overall line confirmation */
.confirmation li::after {
    background: var(--accent-validation);
}

/* Confirmation circle*/
/* .stepper.confirmation li::before {
    background-color: var(--accent-validation);
} */

/* Overall line error */
.error li::after {
    background: var(--accent-error);
}

/* Confirmation error*/
/* .stepper.error li::before {
    background-color: var(--accent-error);
} */

/* Last step with error icon */
/* .stepper li.error-icon::before {
    width: 2rem;
    height: 2rem;
    top: -0.4rem;
    background-image: url(../img/close-line.svg);
    color: var(--neutral-white);
} */

/*--------------------------------FRAME---------------------------------*/

.white-bg-frame {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*---------------------------FIT TO 100% WIDTH--------------------------*/

.fit-to-100 {
    display: block;
    width: 100%;
}

/*--------------------------- CONTAINER --------------------------*/

/* .container-solidarite-transport {
    display: flex;
    gap: 2em;
    align-items: center;
} */

/* .agence-logo {
    max-width: 6em;
} */


/*---------------------------------TABLE------------------------------- */

table {
    margin: 2rem 0;
    border-collapse: collapse;
}

.table-slice {
    border-radius: var(--radius-regular);
    box-shadow: 0 .2rem 1rem var(--theme-table-box-shadow);
}

.table-slice th {
    color: var(--theme-table-th-text-color);
    background-color: var(--theme-table-th-background-color);
}

table th, tbody td {
    padding: 1rem 1rem 1rem 2rem;
}

thead th, tbody td {
    font-size: 1.4rem;
}

thead th:first-child {
    border-top-left-radius: var(--radius-regular);
}

thead th:last-child {
    border-top-right-radius: var(--radius-regular);
}

.table-slice tr {
    background-color: var(--theme-table-tr-odd-background-color);
    color: var(--theme-table-tr-odd-text-color);

    &:nth-child(2n) {
        background-color: var(--theme-table-tr-even-background-color);
        color: var(--theme-table-tr-even-text-color);
    }
}

table img {
    width: 1.4em;
}

table a {
    font-size: 1em;
}

table tr.nonLu {
    font-weight: bold;
}

.entry-title {
    margin-bottom: 1rem;
}

.entry-subtitle {
    margin-bottom: 2.6rem;
}

.calendar-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    color: var(--neutral-dark);
    fill: var(--neutral-dark);
}

.calendar-wrapper svg {
    flex: 0 0 1.6rem;
    height: 1.6rem;
    width: 1.6rem;
    margin-right: .6rem;
}

.time-at {
    font-size: 1.2rem;
}

.entry-introduction {
    margin-top: 3rem;
    margin-bottom: 4.5rem;
}

.entry-content p {
    margin-bottom: 2rem;
}

/* .container-solidarite-transport p {
    margin-bottom: 0;
} */

.entry-content p:last-child {
    margin-bottom: 0;
}

.entry-content h2 {
    margin: 6rem 0 3rem;
}

.entry-content .h3 {
    margin: 1rem 0 1rem;
}

/*--------------------------MEDIA QUERIES --------------------------*/

@media (min-width: 48rem) {
    /*------------------questionnaire------------------*/
    .questionaire {
        display: flex;
        gap: 1rem;
    }

    /*------------------tst header------------------*/
    dl {
        display: flex;
        margin-bottom: 2em;
        flex-direction: row;
        grid-gap: 2em;
    }

    dt {
        width: 35%;
        text-align: right;
    }

    dd {
        width: 60%;
        margin-bottom: 0;
    }

    /* .profilOF, .profilTrainee {
        display: flex;
        position: absolute;
        left: auto;
        right: 0;
        top: -4rem;
        gap: 2em;
        list-style: none;
        z-index: 10;
        border: none;
    }

    .profilOF li {
        margin: 0;
        padding: 2px 0 2px 24px;
        color: #000;
        font-size: 1.5em;
        font-weight: bold;
        background: url(../img/ico-pointeur-black.svg) no-repeat 0 50%;
        background-size: 1.3em;
    }

    .profilTrainee li {
        margin: 0;
        color: var(--black);
        font-size: 1.5em;
        font-weight: bold;
        background: url(../img/ico-profil-black.svg) no-repeat 0 50%;
        background-size: 1.3em;
    }

    .profilOF li:nth-child(2n), .profilTrainee li:nth-child(2n) {
        background: url(../img/ico-deconnect-black.svg) no-repeat 0 50%;
        background-size: 1em 1em;
    }

    .profilOF li a, .profilTrainee li a {
        color: var(--black);
        font-size: 1.1em;
        text-decoration: none;
    }

    .profilOF li a:hover, .profilTrainee li a:hover {
        text-decoration: underline;
    } */
    .message-frame {
        text-align: left;
        padding: 2rem 2rem 2rem 10rem;
        background-position: 2em 2em;
    }

    /* .box-component {
        position: relative;
        left: 22%;
        width: 56%;
    } */
    /*-------------------headings-------------------*/
    h1 {
        font-size: 4.8rem;
    }

    h2,
    .h2 {
        font-size: 3.6rem;
    }

    h3, .h3 {
        font-size: 2.8rem;
    }

    h4, .h4, .link-card
        /* .heading-4 label  */
    {
        font-size: 2.2rem;
    }

    h5, .h5, h6, .h6, .heading-5 label {
        font-size: 1.8rem;
    }

    /*---------------------text---------------------*/
    .text--xxs,
    .text--xxs a {
        font-size: 1.2rem;
    }

    .text--xs,
    .text--xs a {
        font-size: 1.4rem;
    }

    .text--s,
    .text--s td,
    .text--s th {
        font-size: 1.5rem;
    }

    .text--current {
        padding-top: 0.4em;
        padding-bottom: 0.3em;
    }

    .text--current p,
    .text--current li {
        font-size: 1.8rem;
    }

    .text--medium,
    .text--medium p,
    .text--medium li {
        font-size: 2rem;
    }

    input, textarea, select {
        font-size: 1.6rem;
    }

    /*-----------------------list---------------------*/
    .chevrons-list li {
        padding: .75rem 0;
    }

    /*-----------------tst espace connecté------------*/
    .example ul {
        margin-top: 0;
    }

    /*---------------fit to 100% width---------------*/
    .fit-to-100 {
        display: flex;
        width: 50%;
        justify-content: center;
    }

    /*------------------breadcrumb------------------*/
    .breadcrumb-nav {
        padding-right: 10rem;
    }

    .breadcrumbs-list li {
        display: inline-block;
        margin-right: .5rem;
    }

    .breadcrumbs-list li:last-of-type {
        display: inline-block;
        margin-right: 1rem;
    }

    .breadcrumb-icon {
        margin-right: .5rem;
        fill: var(--interaction-blue);
        transform: translateY(.1rem);
    }

    /*--------------------layout---------------------*/
    .one-column-layout {
        width: 68rem;
        margin-right: auto;
        margin-left: auto;
        gap: 2rem;
    }

    .layout.layout-main-aside {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto 1fr;
        grid-column-gap: 4rem;
        grid-row-gap: 2rem;

    }

    .main-column {
        grid-column: 1;
        grid-row: 1 / span 2;
        padding: 1.2rem 0 3rem 0;
    }

    .two-column-layout {
        display: flex
    }

    .two-column-layout .login-form {
        width: 100%;
    }

    .wrap {
        flex-wrap: nowrap;
    }

    /*----------------------ul-----------------------*/
    ul {
        margin: 0 0 2.6rem;
    }

    li {
        padding: 0 0 .5rem .5rem;
    }

    /*------------------actu pagination---------------*/
    .actu-pagination {
        justify-content: left;
    }

    /*--------------------choice card------------------ */
    .form-rights {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        row-gap: 2rem;
        margin: 2rem 0;
    }

    .choice-card {
        gap: 2rem;
    }

    /*-------------------img wrapper----------------- */
    .img-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .img-accueil {
        gap: 10rem;
        margin: auto;
        text-align: center;
    }

    .time-at {
        font-size: 1.4rem;
    }

    .entry-introduction {
        margin-top: 6rem;
    }

    .entry-content p {
        margin-bottom: 2.6rem;
    }

    /* .container-solidarite-transport p {
        margin-bottom: 0;
    } */
    .entry-content h2 {
        margin: 9rem 0 4.5rem;
    }

    .entry-subtitle {
        margin-bottom: 2rem;
    }

    .double-btn-wrapper {
        flex-wrap: nowrap;
    }

    .login-form {
        margin-bottom: 0;
    }

    label.label-summary-cgu {
        font-size: 1.4rem;
    }

    .cgu-accessibility-text-align {
        text-align: justify;
    }

    .cgu-accessibility-text-align li {
        text-align: justify;
    }


}

@media (min-width: 65rem) {
    main, .layout {
        max-width: 1080px;
    }

    /*------------------breadcrumb------------------*/
    .breadcrumb-nav {
        padding-right: 15rem;
        margin-bottom: 6.6rem;
    }

    /*--------------double action card---------------*/
    /* .double-action-card-wrapper {
        grid-template-columns: 1fr 1fr;
    } */
    .two-choice-cards {
        display: flex;
        gap: 2rem;
    }

    .two-div {
        margin-bottom: 0;
    }

    /*----------definition framge with image----------*/
    .definition-frame-wrapper {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin-bottom: 2em;
    }

    .with-image img {
        max-height: 18rem;
        padding: 0 6%;
    }

    /*--------------double btn wrapper---------------*/
    .double-btn-wrapper a,
    .double-btn-wrapper button {
        width: 48%;
    }

    .double-btn-wrapper {
        flex-direction: initial;
        gap: 2rem;
    }

    .cgu-accessibility-width {
        width: 1080px;
        max-width: 1080px;
    }
}

/*--------------------------MAJ 03/24 --------------------------*/

h2 {
    position: relative;
    z-index: 1000;
}

/* #Button_Deconnexion {
    color: #000;
    font-size: 1.0em;
    font-weight: bold;
    background: none;
} */

input.choice {
    margin-bottom: 1em;
}

div.input-box.twoCol {
    display: flex;
    gap: 0.5rem;
}

div.input-box.twoCol .input-wrapper:last-child {
    flex: auto;
}

#geoportalZipcode {
    /* width: 6em; */
    width: 100%; /* TST-1464 */
}

/* Informations code COG dépliant */

.detailsCog {
    display: none;
}

.detailsCog.hidden {
    display: block;
}

.arrow svg {
    transition: transform 0.5s ease;
    transform: translateY(4px);
}

.arrow.open svg {
    transform: translateY(4px) rotate(180deg);
}

.responseLoading {
    display: none;
}

.birthName {
    font-size: smaller;
}

.text--xs--title {
    font-size: 200%;
    line-height: 1.5;
    float: left;
    width: 100%
}

.infoIconeCog {
    width: 2.5%;
}

.text--xs--cog--bis {
    font-size: 1.4rem;
    line-height: 1.5;
    float: left;
    width: 100%;
}

.text--s--cog {
    font-size: 1.4rem;
    line-height: 2.2;
}

.btn-wrapper-center {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.rowCog {
    display: table-row;
}

.carteVitaleCogImgTest, .text--xs--cog {
    font-size: 1.4rem;
    display: table-cell;
    vertical-align: middle;
    width: 40%;
}

/* TST-1479 */
.text--xs-ou {
    font-size: 1.6rem;
    font-weight: bold;
}

/* TST-1672 */
.formAddAdsFirstRequestCss {
    display: none;
}

.formAddAdsFirstRequestCss.visible {
    display: block;
    width: 100%;
}

.aideCog, .detailsCog {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* TST-1719 */
.helloMySpace {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

/* TST-1721 */
.aideCog, .detailsCog {
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

.mySpaceName {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

@media (max-width: 48rem) {

    /* Navigo sur myspace/home reste à gauche quand ecran moins de 768px */
    .right-align {
        justify-content: start;
    }

    /* met à la ligne les boutons dans le résumé de situation (au dessus des forms) */
    .btn-group {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    /* permet de mettre à la ligne dans le bouton 1ère demande par courrier  */
    .courrierPremDemande {
        display: inline-block;
        max-width: 100%;
        white-space: normal !important;
        word-wrap: break-word;
        word-break: break-word;
    }

    h1, h2, h3, h4, p, label {
        max-width: 100%;
        white-space: normal !important;
        word-wrap: break-word;
    }

    .login-form, .secondary-nav, .layout {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        white-space: normal !important;
        word-wrap: break-word;
        word-break: break-word;
    }

}

#codeCommune {
    display: none;
}

/* TST-1397 */
.image-pass-ok {
    width: 250px;
}

/* TST-1397 */
.image-pass-ko {
    width: 150px;
}

.date-cell {
    width: 150px;
}

/* TST-1409 */
/* media queries pour faire disparaitre la deuxième partie du breadrcrumb sur le responsive */
@media (max-width: 768px) {
    .breadcrumbs-list .breadcrumb:nth-child(2) {
        display: none;
    }

    .breadcrumbs-list .breadcrumb:first-child {
        display: flex;
        align-items: center;
    }

    .breadcrumbs-list .breadcrumb a {
        order: 2;
        padding-left: 1rem;
    }

    .breadcrumbs-list .breadcrumb .breadcrumb-icon {
        order: 1;
        margin-right: 4px;
    }

    .breadcrumb-icon {
        display: none;
    }

    .breadcrumb-icon-responsive {
        display: inline;
        transform: rotate(180deg);
        padding-right: 0.2rem;
    }

}

@media (min-width: 769px) {
    .breadcrumbs-list .breadcrumb {
        display: inline;
    }

    .breadcrumbs-list .breadcrumb:last-child {
        display: inline;
    }

    .breadcrumb-icon-responsive {
        display: none;
    }

    .breadcrumb-icon {
        display: inline;
    }

}

/* style pour la page de cgu */
.cgu_link_div {
    display: flex;
    justify-content: left;
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--theme-cgu-background-color);

    .cgu_link {
        text-decoration: none;
        font-weight: bold;
        font-size: 1.6rem;
        color: var(--theme-cgu-text-color);

        &:hover {
            color: var(--theme-cgu-text-hover-color);
        }
    }

    &:hover {
        text-align: left;
        display: flex;
        justify-content: left;
        padding: 2rem;
        border-radius: 0.5rem;
        background-color: var(--theme-cgu-background-hover-color);

        /* TST-1409 met le texte en blanc au survol de la div */
        a.cgu_link {
            color: var(--theme-cgu-text-hover-color);
        }
    }
}

.ul_cgu {
    list-style: none;
}

.ul_cgu li {
    list-style-image: url('../img/icon-blue.svg');
    padding-left: 0.5rem;
}

/* TST-2035 */
/* wrapper des champs password */
.password-field-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

/* input*/
.password-field-wrapper input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 3rem !important;
    /* padding-right: 40px !important; */
}

/* bouton dans le champ input*/
.toggle-password-visibility {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* icone yeux (fermé et ouvert) */
.eye-icon {
    max-width: 20px;
    max-height: 20px;
    width: 100%;
    height: auto;

    svg {
        fill: red;
    }
}

/* message en dessous de la saisie du code d'accès actuel */
.code-error-message {
    color: var(--error-color);
    font-size: 13px;
    font-weight: bold;
    display: none;
    margin: 5px 0 0 0;
}

/* message en dessous de la ée saisie du nouveau code d'accès */
.match-error-message {
    color: var(--error-color);
    font-size: 13px;
    font-weight: bold;
    display: none;
    margin: 5px 0 0 0;
}

@media (min-width: 694px) and (max-width: 768px) {
    .password-field-wrapper {
        position: relative;
        overflow: visible;
    }

    .toggle-password-visibility {
        right: 10rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .password-field-wrapper input {
        width: 100%;
        box-sizing: border-box;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1065px) {
    .toggle-password-visibility {
        right: 3rem;
    }
}

.list_password {
    padding-top: 0.5rem;
    margin-bottom: 0;
    font-size: 13px;
    padding-left: 0;
}

.list_password li {
    font-size: 13px;
}

/* conteneur de la barre de progression */
.progress-bar-container {
    margin: 10px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* message de sécurité */
#strengthMessage {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

/* barre de progression */
.progress-bar {
    height: 8px;
    width: 0;
    max-width: 100%;
    background-color: var(--error-color);
    border-radius: 4px;
    transition: width 0.3s ease-in-out, background-color 0.3s;
    display: block;
    box-sizing: border-box;
}

@media screen and (min-width: 700px) and (max-width: 768px) {
    .progress-bar-container {
        width: calc(100% - 8.5rem);
        max-width: calc(100% - 8.5rem);
    }
}

@media screen and (min-width: 1044px) {
    .progress-bar-container {
        width: calc(100% - 2.5rem);
        max-width: calc(100% - 2.5rem);
    }
}

/* États des critères */
.input-box-password-conditions li.criteria-valid {
    list-style: none;
    padding-left: 20px;
    background-image: url("../img/icon-check-green.svg");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    color: var(--success-color) !important;
    font-weight: bold !important;
}

.input-box-password-conditions li.criteria-invalid {
    list-style: none;
    padding-left: 20px;
    background-image: url("../img/icon-cross-red.svg");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    color: var(--error-color) !important;
    font-weight: bold !important;
}

.input-box-password-conditions p.criteria-valid {
    color: var(--success-color) !important;
    font-weight: bold !important;
}

.input-box-password-conditions p.criteria-invalid {
    color: var(--error-color) !important;
    font-weight: bold !important;
}

/* Style du champ avec erreur */
.password-field-error {
    border-color: var(--error-color) !important;
}

/* États de la force du mot de passe */
.strength-insufficient {
    color: var(--error-color) !important;
    font-weight: bold !important;
}

.strength-medium {
    color: var(--warning-color) !important; /* Orange */
    font-weight: bold !important;
}

.strength-solid {
    color: var(--success-color) !important;
    font-weight: bold !important;
}

/* Couleurs de la barre de progression */
.progress-insufficient {
    background-color: var(--error-color) !important;
}

.progress-medium {
    background-color: var(--warning-color) !important;
}

.progress-solid {
    background-color: var(--success-color) !important;
}

/* État par défaut des critères */
.input-box-password-conditions p {
    color: var(--neutral-dark);
}

.input-box-password-conditions li {
    list-style: none;
    padding-left: 20px;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    color: var(--neutral-dark);
    font-weight: normal;
    background-image: url("../img/ico-bullet-default.svg");
}

.input-box-password-conditions {
    padding-left: 0;
    list-style: none;
}

.password-field-error {
    border-color: var(--error-color) !important;
}

input#new_pwd:not(.password-field-error) {
    border-color: var(--theme-input-border-color);
}

/* TST-2223 : permet de ne pas avoir l'oeil par défaut d'Edge */
::-ms-reveal {
    display: none;
}

/* ipad mini */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .character-count {
        right: 50px;
    }
}

#resultsAddress, #resultsZipcode, #resultsCity {
    display: none;
    background-color: var(--neutral-white);
    font-size: 16px;
    margin: 0 auto;
    /* liste déroulante pour les propositions */
    max-height: 200px;
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: var(--radius-regular);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* contours des champs en erreur */
.input-error {
    border-color: var(--error-color) !important;
}

/* messages d'erreur */
.address-error-message,
.zipcode-required-error-message,
.city-required-error-message,
.city-chars-error-message,
.address-required-error-message,
.address-chars-error-message,
.api-error-message {
    font-size: 13px;
    color: var(--error-color);
    font-weight: bold;
    margin-top: 5px;
    display: none;
}

/* liste des propositions des API */
.resultApi, .resultApiCity {
    font-family: var(--stackr), sans-serif;
    padding: 10px 20px;
    text-align: left;
    background-color: var(--neutral-white);
    cursor: pointer;
    border: none;
    display: block;
    width: 100%;
    margin: auto;
    overflow: auto;
    font-size: 16px;
}

/* style au survol des propositions des API */
.resultApi:hover, .resultApiCity:hover,
.resultApi:focus, .resultApiCity:focus {
    background-color: #d1e3f6;
    outline: none;
}

/* Styles pour les résultats geoportal (la normalisation) */
.result {
    cursor: pointer;
    padding: 10px 20px 0.5rem;
    width: 100%;
    text-align: left;
    background-color: white;
    border: none;
    display: block;
}

.result:hover, .result:focus {
    background-color: #e3e3e3;
    font-weight: bold;
    outline: none;
}

.result-special {
    border-top: 1px solid var(--black);
    border-bottom: none;
}

/* TST-2306 */
.definition-frame-fraud {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem 2rem 2rem 4rem;
    border: 1px solid var(--fraud-border-color);
    border-radius: var(--radius-regular);
}

.info-icon-fraud {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 35px;
    flex-shrink: 0;
}

.fraud_text {
    font-size: 16px;
    text-align: justify;
    margin: 0;
    width: 100%;
}

/* TST-2308 */
.actu-frame-cgu .container-checkbox label.label-summary-cgu {
    color: var(--neutral-dark);
    font-family: inherit;
    letter-spacing: normal;
    margin: 0;
    line-height: 1.4;
    display: inline;
    align-items: initial;
    text-transform: none;
}

.container-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    margin-top: 0.8rem;
    line-height: 1.4;
}

/* lien dans le label */
.label-summary-cgu a {
    text-decoration: underline;
    color: var(--neutral-dark);
}

/* message d'erreur en gras */
.error-text-bold {
    color: var(--accent-error);
    font-weight: bold;
}

/* Checkbox en erreur */
input[type="checkbox"].checkbox-error {
    appearance: none !important; /* supprime le style par défaut du navigateur */
    border: 1px solid var(--accent-error) !important;
    width: 1.2em !important;
    height: 1.2em !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

input[type="checkbox"].checkbox-error:checked {
    /* comportement par défaut quand on checke après une erreur */
    appearance: auto !important;
}

.accessibility-title {
    text-align: center;
}

.entry-content h2.h5-cgu {
    margin: 1rem 0 1rem;
    font-size: 1.8rem;
}

button:disabled, /*S'applique à tous les button submit désactivé*/
input[type="submit"]:disabled {
    background-color: var(--theme-button-disabled-background-color); /* Un fond gris */
    color: var(--theme-button-disabled-text-color); /* Un texte plus sombre */
    cursor: not-allowed; /* Un curseur qui indique que l'action n'est pas permise */
    border-color: var(--button-disabled-border-color);
}

.dark-theme {
    .eye-icon {
        filter: brightness(0) saturate(100%) invert(100%);
    }
}

.layout.layout-main {
    main {
        max-width: 64rem;
    }
}


/* TST-2578 */
.file-info-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top : 0.2rem;

    .file-info {
        color: var(--accent-validation);
        margin: 0;
    }
}