@layer atomes{

    .icon{
        display: inline-block; width: var(--space-M); aspect-ratio: 1 / 1; background-position: center; background-repeat: no-repeat; background-size: 100%; vertical-align: middle;
        &.S{ width: var(--space-M); }
        &.M{ width: var(--space-L); }
        &.L{ width: var(--space-XL); }
        &.XL{ width: 64px; }
        &.white{ filter: brightness(0) invert(1); }
        &.fermer{ background-image: url("https://static.s-sfr.fr/media/RED/icones/fermer-black.svg"); }
        &.fleche-gauche{ background-image: url("https://static.s-sfr.fr/media/RED/icones/fleche_gauche-black.svg"); }
        &.fleche-droite{ background-image: url("https://static.s-sfr.fr/media/RED/icones/fleche_droite-black.svg"); }
        &.aide{ background-image: url("https://static.s-sfr.fr/media/RED/icones/aide-black.svg"); }
        &.closer{ background-image: url("https://static.s-sfr.fr/media/RED/icones/croix-noire.svg"); }
    }
    
    /* ----- ----- ----- Labels ----- ----- ----- */
    /* To do : transform to pIll */
    [class*="label-"]{ display: inline-flex; align-items: center; gap: var(--space-S); padding: var(--space-S) var(--space-M); }
    .label-1{ border-radius: var(--space-L); border: 1px solid var(--c-b-primary); color: var(--c-t-primary-1); }
    .label-2{ border-radius: var(--space-L); background-color: var(--c-bg-cta-black-default); color: var(--c-t-secondary); }
    .label-3{ border: 1px solid var(--c-b-primary); border-radius: var(--space-XS); color: var(--c-t-primary-1); }
    /* ----- ----- ----- Labels ----- ----- ----- */

    /* ----- ----- ----- Inputs ----- ----- ----- */
    input:is([type="text"],[type="search"]){
        width: 100%; padding: var(--space-S) var(--space-M); background: var(--c-bg-container-primary); border: 1px solid var(--c-b-tertiary); cursor: text;
        ::placeholder{ color: var(--c-t-tertiary); }
        &:focus,&:focus-visible{ outline: 2px solid var(--c-b-primary); outline-offset: -2px; }
        &:not(:placeholder-shown):user-valid{ border-color: var(--c-b-success); }
        &:not(:placeholder-shown):user-invalid{ border-color: var(--c-t-error); }
    }
    .input{
        &:has(input[disabled]){ pointer-events: none; }
        &:is(.radio,.toggle,.checkbox){
            position: relative; display: inline-flex; align-items: center; gap: 0 var(--space-S); vertical-align: top;
            input{ position: absolute; width: 100%; height: 100%; z-index: 1; }
            label::before{ transition: all .4s; }
            &:has(input:checked) .text{ font: var(--f-p-Mb); }
        }
        &.classic, &.search-bar{
            display: inline-grid; gap: var(--space-S);
            &:has(input[disabled]){
                .icon-text{ color: var(--c-t-disable); }
                input, button{
                    background-color: var(--c-bg-container-disable); border-color: var(--c-b-disable); color: var(--c-t-disable);                    
                    &::placeholder{ color: var(--c-t-disable); }
                    > .loupe{ filter: contrast(0); }
                }
            }            
        }
        &.classic{
            .icon-text{ --justify: start; }
        }
        &.search-bar{
            max-width: 352px; width: 100%;
            > .t{ font: var(--f-p-Mb); }
            > .w{
                position: relative; display: flex;
                > input{
                    anchor-name: --input-search; flex: 1 1 auto; border-right: 0px; padding-right: 28px;
                    &::-webkit-search-cancel-button{ display: none; }
                    &:not(:placeholder-shown) ~ [type=reset]{ display: block; }
                }
                > button{
                    &[class*="button-"]{ flex: 0 0 var(--space-XL); }
                    &[type="reset"]{ position: absolute; position-anchor: --input-search; align-self: anchor-center; right: calc(anchor(right) + var(--space-S)); display: none; width: var(--space-M); height: var(--space-M); background: url("https://static.s-sfr.fr/media/RED/icones/croix-noire.svg") no-repeat center; background-size: contain; }
                }
                > .autocomplete{
                    position: absolute; position-anchor: --input-search; position-area: bottom; top: anchor(bottom); width: 100%; margin-top: var(--space-S); padding: var(--space-M); background-color: var(--c-bg-container-primary); border: 1px solid var(--c-b-tertiary); display: none; opacity: 0; transition: display, opacity .4s; z-index: 10;
                    &.show{ display: block; opacity: 1; @starting-style{ opacity: 0; } }
                    > ul > li:not(:last-child){ margin-bottom: var(--space-M); }
                }
            }
        }
        .feedback{
            --feedback-icon: ""; display: none; align-items: center; gap: var(--space-S); line-height: normal;
            &::before{ content: ""; background: var(--feedback-icon) no-repeat center left; width: var(--space-M); height: var(--space-M); font: var(--f-p-M); }
            &.success{
                --feedback-icon: url("https://static.s-sfr.fr/media/RED/icones/check_valider.svg"); display: flex; color: var(--c-t-success);
            }
            &.error{
                --feedback-icon: url("https://static.s-sfr.fr/media/RED/icones/croix_rouge.svg"); display: flex; color: var(--c-t-error);
            }
        }
    }

    /* -> Toggle */
    .toggle{
        font: var(--f-p-M);
        label{ background-color: var(--c-fg-tertiary); width: var(--space-XL); min-height: 20px; border-radius: 10px; }
        label::before{ content: ""; display: block; border-radius: 50%; width: 16px; height: 16px; margin: 2px; background-color: var(--c-fg-secondary); transition: .2s; }
        input:checked + label{ background-color: var(--c-fg-brand-2); }
        input:checked + label:before{ transform: translateX(20px); }
        
        &:has(input[disabled]) label{ background-color: var(--c-fg-disable-2); }
        &:has(input[disabled]) label::before{ background-color: var(--c-fg-disable-1); }
        &:has(input[disabled]:checked) label{ background-color: var(--c-fg-disable-1); }
        &:has(input[disabled]:checked) label::before{ background-color: var(--c-fg-disable-2); }
    }
    /* ----- ----- ----- Inputs ----- ----- ----- */

    /* ----- Checkboxes & Radios ----- */
    :is(.checkbox,.radio) label{ display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--c-b-tertiary); }
    .checkbox{
        input:checked + label{ background-color: var(--c-fg-brand-2); border-color: var(--c-fg-brand-2); }
        input + label::before{ content: ''; width: 7px; height: 12px; border: solid var(--c-fg-constant-white); border-width: 0 2px 2px 0; transform: rotate(45deg) translateX(-1px) translateY(-1px); opacity: 0; }
        input:checked + label::before{ opacity: 1; }
        input[disabled]:checked + label{ background-color: var(--c-fg-disable-1); border-color: var(--c-fg-disable-1); }
        input[disabled] + label{ background-color: var(--c-fg-disable-2); border-color: var(--c-fg-disable-2); }
    }

    .radio{
        label{ border-radius: 50%; }
        input:checked + label{ border-color: var(--c-b-brand-2); }
        input + label::before{ content: ''; width: 14px; height: 14px; border-radius: 50%; opacity: 0; background-color: var(--c-fg-brand-2); }
        input:checked + label::before{ opacity: 1; }
        input[disabled] + label{ border-color: var(--c-b-disable); }
        input[disabled]:checked + label::before{ background-color: var(--c-fg-disable-1); }
    }
    /* ----- ----- ----- Inputs ----- ----- ----- */
    
    /* ----- ----- ----- Color Selector ----- ----- ----- */
    .color-selector{
        input:checked + &{ outline: 2px solid var(--c-b-brand-2); outline-offset: 2px; }
        input:focus-visible + &{ outline-color: var(--c-t-primary-1); }
        
        --sc-size: 16px; --sc-color-1: #000; --sc-color-2: #fff; display: grid; align-items: center; width: var(--sc-size); height: var(--sc-size); border: 1px solid var(--c-b-tertiary); border-radius: 50%; cursor: pointer;
        &.multi{ background-image: linear-gradient(315deg, var(--sc-color-1) 50%, var(--sc-color-2) 50%); }
        &.S{ --sc-size : 12px; }
        &.M{ --sc-size : 16px; }
        &.L{ --sc-size : 24px; }
    }
    /* ----- ----- ----- Color Selector ----- ----- ----- */

    /* ----- Price ----- */
    .price{
        display: flex; align-items: baseline; font: var(--f-t-Mb);
        .blue{ color: var(--c-t-brand-2); }
        .small{ font: var(--f-p-Mb); }
        .star{ font: var(--f-p-Sb); }
        @media (max-width: 1023px ) {
            font: var(--f-t-L);
        }
    }
    .price-strike{ font: var(--f-p-M); margin-left: var(--space-XS); text-decoration: line-through; }
    /* ----- Price ----- */

    /* ----- ----- ----- Switchs ----- ----- ----- */
    .switch{ display: grid; place-items: center; padding: var(--space-S) var(--space-L); font: var(--f-p-M); line-height: 20px; cursor: pointer; }
    input[disabled] + .switch, .switch[disabled]{ background-color: var(--c-fg-disable-2); color: var(--c-t-disable); pointer-events: none; cursor: default; }
    /* ----- ----- ----- Switchs ----- ----- ----- */

    /* ----- ----- ----- Stickers ----- ----- ----- */
    .sticker{
        display: inline-flex; align-items: center; min-height: var(--space-L); padding: 0 var(--space-S); font: var(--f-p-S); line-height: 100%;
        &.event{ background-color: var(--c-fg-sticker-event); color: var(--c-t-constant-white); }
        &.info{ background-color: var(--c-fg-sticker-info); color: var(--c-t-secondary); }
        &.bonus{ background-color: var(--c-fg-sticker-bonus); color: var(--c-t-constant-white); }
        &.brand{ background-color: var(--c-fg-sticker-brand); color: var(--c-t-primary-2); }
    }
    /* ----- ----- ----- Stickers ----- ----- ----- */

    /* ----- ----- ----- Bubble steps ----- ----- ----- */
    .bubblestep{
        display: grid; place-items: center; border-radius: 50%; font: var(--f-p-Sb); background-position: center; background-repeat: no-repeat;
        &.S{ width: var(--space-M); height: var(--space-M); border-radius: 50%; font: var(--f-p-Sb); }
        &.M{ width: var(--space-L); height: var(--space-L); font: var(--f-p-Mb); }
        &.L{ width: var(--space-XL); height: var(--space-XL); font: var(--f-t-Sb); }
        &.type1{ background-color: var(--c-fg-primary); color: var(--c-t-secondary); }
        &.type2{ background-color: var(--c-fg-brand-2); color: var(--c-t-secondary); }
        &.type3{ background-color: var(--c-fg-secondary); color: var(--c-t-primary-1); }
        &:not(.type1,.type2,.type3){ border-width: 2px; border-style: solid; }
        &.inprogress{ background-color: var(--c-fg-brand-2); border-color: var(--c-b-brand-2); }
        &.planned{ border-color: var(--c-b-brand-2); }
        &.completed{ background-color: var(--c-fg-brand-2); border-color: var(--c-b-brand-2); background-image: url("https://static.s-sfr.fr/media/RED/icones/check-white.svg"); }
        &.blocked{ background-color: var(--c-fg-primary); border-color: var(--c-b-primary); background-image: url("https://static.s-sfr.fr/media/RED/icones/fermer-white.svg"); }
    }
    /* ----- ----- ----- Bubble steps ----- ----- ----- */

    /* ----- ----- ----- Breadcrumb ----- ----- ----- */
    .breadcrumb{
        padding-bottom: 0;
        ol{ display: flex; flex-wrap: wrap; }
        li:not(:last-child)::after{ content: ""; display: inline-block; vertical-align: 2px; width: 5px; height: 5px; margin: 0 var(--space-S); border: 1px solid var(--c-t-primary-1); border-width: 1px 1px 0 0; transform: translate(-50% , 0%) rotate(45deg); }
        a{ font: var(--font-p-S1); text-decoration: underline; }
        a[aria-current]{ font-weight: 650; text-decoration: none; }
    }
    /* ----- ----- ----- Breadcrumb ----- ----- ----- */

    /* ----- ----- ----- Divider ----- ----- ----- */
    .divider{ width: 100%; height: 1px; background-color: var(--c-b-tertiary); }
    /* ----- ----- ----- Divider ----- ----- ----- */

    /* ----- ----- ----- Icon & texte ----- ----- ----- */
    .icon-text{
        --justify: center; --space-XxL: 64px; --title-def-1: ""; --title-def-2: "";        
        display: inline-grid; font: var(--f-p-M); gap: var(--space-S); grid-auto-flow: dense; justify-items: var(--justify); align-content: start;

        > .c{
            display: grid; gap: var(--space-XS); justify-items: var(--justify);
            > .t{
                display: inline; margin: 0;
                &:not([class*="f-t-"]){ font: var(--title-def-1); }
            }
            > .t2:not([class*="f-t-"]){ font: var(--title-def-2); }
        }
        &:is(.left,.right){ --justify: start; }
        &:is(.left,.right):has(.icon){
            grid-template-columns: auto 1fr; align-items: center;
            &.left{
                --justify: start;
                & > .icon{ grid-column: 1;  }
                & > .c{ grid-column: 2; }
            }
            &.right{
                --justify: end;
                & > .icon{ grid-column: 2; }
                & > .c{ grid-column: 1; }
            }
        }
        
        &.XS{
            .icon{ width: var(--space-M); }
            .t{ --title-def-1: var(--f-p-Mb); }
        }
        &.S{
            .icon{ width: var(--space-L); }
            .t{ --title-def-1: var(--f-t-Sb); }
            .t2{ --title-def-2: var(--f-p-Mb); }
        }
        &.M{
            .icon{ width: var(--space-XL); }
            .t{ --title-def-1: var(--f-t-Mb); }
            .t2{ --title-def-2: var(--f-p-Mb); }
        }
        &.L{
            row-gap: var(--space-S);
            .icon{ width: var(--space-XxL); }
            .t{ --title-def-1: var(--f-t-L); }
        }
    }
    /* ----- ----- ----- Icon & texte ----- ----- ----- */

    /* ----- ----- ----- Loader ----- ----- ----- */
    @keyframes spin { to { transform: rotate(1turn) } }
    .loader{ --loader-width: var(--space-XL); --loader-height: var(--space-XL); display: block; width: var(--loader-width); height: var(--loader-height); border-radius: 50%; animation: spin 1s infinite linear; }
    .loader{
        background: conic-gradient(from 90deg,rgba(255, 255, 255, 1) 0deg,rgba(90, 85, 223, 1) 265deg);
        -webkit-mask: radial-gradient(circle at center, transparent 60%, #000 62%);
        mask: radial-gradient(circle at center, transparent 60%, #000 62%);
    }
    /* ----- ----- ----- Loader ----- ----- ----- */

    /* ----- ----- ----- Tooltips ----- ----- ----- */
    [aria-describedby]:has([role="tooltip"]){
        &:is(:hover,:focus-visible){ anchor-name: --tooltip-anchor; }
        --tooltip-arrow-size: 6px; --tooltip-arrow-offset: 1px; --tooltip-icon-size: var(--space-M); --tooltip-font-size: var(--f-p-M); cursor: help;
        &::after{ content: ""; display: inline-block; width: var(--tooltip-icon-size); height: var(--tooltip-icon-size); vertical-align: calc(0px - (var(--tooltip-arrow-size) / 2)); background: url("https://static.s-sfr.fr/media/RED/icones/aide-black.svg") no-repeat center; background-size: contain; }
        &:is(:hover,:focus-visible) [role="tooltip"]{ display: block; opacity: 1; transition: block, opacity .4s; @starting-style{ display: block; opacity: 0; } }
        @supports not (position-anchor: --tooltip-anchor){
            position: relative;
        }
    }
    [role="tooltip"]{
        anchor-name: --tooltip; position: fixed; position-anchor: --tooltip-anchor; position-area: bottom; position-try-fallbacks: flip-block, flip-inline; display: none; width: max-content; max-width: 300px; margin-block: var(--tooltip-arrow-size) 0; padding: var(--space-M); background-color: var(--c-fg-primary); clip-path: inset(var(--tooltip-arrow-offset)) margin-box; text-align: left; font: var(--tooltip-font-size); color: var(--c-t-secondary); opacity: 0; z-index: 10;
        .chips{ --chips-color: var(--c-t-secondary); }
        &::before{
            content: ""; position: fixed; width: 12px; height: calc(anchor-size(--tooltip height) + var(--tooltip-arrow-size) * 2); position-anchor: --tooltip; position-try-fallbacks: flip-block; top: calc(anchor(--tooltip top) - var(--tooltip-arrow-size)); left: calc( anchor(--tooltip-anchor left) + ( var(--tooltip-icon-size) / 2 ) - var(--tooltip-arrow-size) ); background-color: inherit; clip-path: polygon( 0 var(--tooltip-arrow-size), 50% 0, 100% var(--tooltip-arrow-size), 100% calc(100% - var(--tooltip-arrow-size)), 50% 100%, 0 calc(100% - var(--tooltip-arrow-size)) ); z-index: -1;
        }
        @supports not (position-anchor: --tooltip-anchor){
            top: auto; left: 50%; transform: translateX(-50%);
        }
    }
    /* ----- ----- ----- Tooltips ----- ----- ----- */

}

@layer molecules{

    .button-group{
        display: flex; gap: var(--space-M); justify-content: center;
        @media(max-width: 1023px){ flex-direction: column; .button-3{ align-self: center; } }
    }

    /* ----- ----- ----- Tabs & Switchs Bar ----- ----- ----- */
    .tab-bar{
        display: inline-grid; grid-auto-columns: auto 1fr auto; grid-auto-flow: column; margin: 0 auto; --switch-space: 0px;
        & > button{
            position: relative; flex: 0 0 var(--space-L); width: var(--space-L); z-index: 1;
            &.hidden{ display: none; }
            &::before{ content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-left: 2px solid var(--c-fg-primary); border-bottom: 2px solid var(--c-fg-primary); }
            &:disabled::before, & > &:disabled::after{ border-color: var(--c-fg-disable-1); }
            &.left::before{ transform: rotate(45deg); }
            &.right::before{ transform: rotate(-135deg); }
        }
        &:has( li:first-child > input:checked ){
            button.left::before{ border-color: var(--c-fg-disable-1); }
        }
        &:has( li:last-child > input:checked ){
            button.right::before{ border-color: var(--c-fg-disable-1); }
        }    
        & > .w{
            position: relative; flex: 1 1 auto; overflow: auto; scrollbar-width: none; scroll-behavior: smooth;
            &::-webkit-scrollbar{ display: none; }
            ul{
                position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: max-content; padding-block: var(--switch-space); direction: ltr; z-index: 1;
                li{
                    width: 100%; white-space: nowrap;
                    > input{ position: absolute; opacity: 0; }
                    &:first-child::before{ content: ""; position: absolute; position-anchor: --tab-hover; inset: anchor(inside); display: block; transition: .2s; z-index: 1; }
                    &:has(.switch[disabled]){ background-color: var(--c-fg-disable-2); }
                    .switch{
                        &[disabled]{ background: transparent; }
                        position: relative; width: 100%; outline-color: rgba(255, 255, 255, 0); transition: color .2s, outline-color 1s; z-index: 2;
                        input:is(:focus-visible) + &{ outline: 2px solid var(--c-t-constant-white); outline-offset: -4px; }
                        input:checked + &{ anchor-name: --tab-hover; }
                    }
                }
            }
        }
        
        &.switchs{
            .w{
                background-color: var(--c-fg-secondary); border: 1px solid var(--c-b-primary);
                li{
                    &:first-child::before{ background-color: var(--c-fg-primary); }
                }
                li input:checked + .switch{ color: var(--c-t-secondary); }
            }        
        }

        &.tabs{
            background-color: var(--c-fg-secondary);
            li{
                &:first-child::before{ border-bottom: 2px solid var(--c-b-brand-2); }
                .switch{ padding: var(--space-M); }
            }        
        }

        @media (max-width: 1023px){
            .w ul{ grid-auto-columns: auto; }
        }
        
    }
    /* ----- ----- ----- Tabs & Switchs Bar ----- ----- ----- */

    /* ----- ----- ----- Quickaccess ----- ----- ----- */
    .quickaccess-section{
        display: grid; gap: var(--space-XL);
        @media (max-width: 1023px ) {
            gap: var(--space-L);
        }
    }
    .quickaccess{
        display: flex; align-items: center; gap: var(--space-XL); padding: var(--space-L); background-color: var(--c-bg-container-primary);
        > :first-child{ flex: 1 1 auto; }
        > :not(.button-group):nth-child(2){ flex: 0 1 auto; }
        > .button-group{ flex: 0 0 auto; }
        @media (max-width: 1023px ) {
            > .quickaccess{
                display: grid; gap: var(--space-L); padding: var(--space-M);
                .icon-text{
                    grid-template-columns: auto;
                    > :is(.icon,.c){ grid-column: 1; }
                }            
            }
        }
    }
    /* ----- ----- ----- Quickaccess ----- ----- ----- */

    /* ----- ----- ----- Progress Indicator & Status Tracker ----- ----- ----- */
    .progress-indicator{
        --direction: horizontal; --progress-anchor-x: --progress-anchor-0; container-name: indicator; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(100px, 1fr); justify-content: start; width: fit-content;

        > li{
            display: grid; grid-template-rows: auto auto; justify-items: center; justify-content: center; gap: var(--space-S);
            > .c{
                display: grid; gap: var(--space-L); justify-self: stretch;
                .icon-text{ --justify: start; }
            }
        }

        &:where(ol){
            counter-reset: progress-counter; position: relative;
            > li{
                &:first-child{
                    .bubblestep{ --progress-anchor-x: --progress-anchor-1; }
                    &::before{ content: ""; position: absolute; top: calc(var(--space-L) / 2); left: anchor(--progress-anchor-1 50%); right: anchor(--progress-anchor-2 50%); height: 2px; background-color: var(--c-fg-tertiary); z-index: 1; }
                    &::after{ content: ""; position: absolute; position-anchor: --progress-anchor-label; top: 12px; left: anchor(--progress-anchor-1 50%); right: anchor(right); height: 2px; background-color: var(--c-fg-constant-black); transition: all .4s; z-index: 2; }
                }
                &:last-child{
                    .bubblestep{ --progress-anchor-x: --progress-anchor-2; }
                }
                > input{
                    grid-column: 1; grid-row: 1 / 3; width: 100%; z-index: 4;
                }
                > .bubblestep{
                    grid-column: 1; grid-row: 1; z-index: 3; anchor-name: var(--progress-anchor-x);
                    &::before{ counter-increment: progress-counter; content: counter(progress-counter); }
                    &.type1{ background-color: var(--c-fg-tertiary); }
                }
                > .c{
                    grid-column: 1; grid-row: 2; color: var(--c-t-tertiary);
                    .icon-text{ --justify: center; text-align: var(--justify); }
                }
                
                &:has(input:checked, ~ li input:checked){
                    > .bubblestep.type1{ background-color: var(--c-fg-primary); }
                    > .c{ color: var(--c-t-primary-1); }
                }
            }
            li:has(input:checked) .bubblestep{ anchor-name: var(--progress-anchor-x), --progress-anchor-label; }
        }

        &:is(.vertical,.status-tracker){
            --direction: vertical;
            max-width: 602px; grid-auto-flow: row; grid-auto-rows: minmax(60px, auto); grid-auto-columns: auto;
        }
        
        &.status-tracker{
            > li{
                --border-type: dashed; --border-color: var(--c-b-brand-2);
                position: relative; align-items: start;
                &:not(:last-child)::before{ content: ""; position: absolute; top: var(--space-L); left: calc(var(--space-L) / 2); width: 0px; bottom: 0; border-left: 2px var(--border-type) var(--border-color); }

                > input{ position: absolute; opacity: 0; }
                > .c{
                    padding-bottom: var(--space-L);
                    .button-group{ justify-content: start; }
                }

                &:has(.inprogress){ --border-type: solid; }
                &:has(.blocked){ --border-type: solid; --border-color: var(--c-fg-primary); }
                &:has(.completed){ --border-type: solid; }
            }
        }

        @media (max-width: 1023px ) {
            --direction: vertical;
            max-width: 602px; grid-auto-flow: row; grid-auto-rows: minmax(60px, auto); grid-auto-columns: auto;
        }

        @container style(--direction: vertical){
            &:where(ol){
                > li{
                    &:first-child{
                        &::before{ top: anchor(--progress-anchor-1 bottom); bottom: anchor(--progress-anchor-2 50%); left: calc(var(--space-L) / 2); right: auto; width: 2px; height: auto; }
                        &::after{ top: anchor(--progress-anchor-1 bottom); bottom: anchor(bottom); left: calc(var(--space-L) / 2); right: auto; width: 2px; height: auto; }
                    }
                    > .bubblestep{ grid-column: 1; grid-row: 1; }
                    > input{ grid-column: 1 / 3; grid-row: 1; align-self: stretch; }
                    > .c{
                        grid-column: 2; grid-row: 1 / 2;
                        .icon-text{ --justify: start; }
                    }
                }
            }
            > li{
                grid-template-rows: none; grid-auto-flow: column; justify-items: start; justify-content: start; align-items: center;
            }
        }        
        
    }
    /* ----- ----- ----- Progress Indicator & Status Tracker ----- ----- ----- */

    /* ----- ----- ----- Messages ----- ----- ----- */
    .message{
        position: relative; display: grid; grid-template-columns: var(--space-L) 1fr; justify-items: start; gap: var(--space-M) var(--space-L); padding: var(--space-L); border-left: 4px solid var(--c-b-info);
        &.info{ background-color: var(--c-bg-container-alert-info); border-color: var(--c-b-info); }
        &::before{ content: ""; grid-row: span 2; width: var(--space-L); height: var(--space-L); background: url("https://static.s-sfr.fr/media/RED/icones/info-blue.svg") no-repeat center; background-size: 100%; }

        &.warning{ background-color: var(--c-bg-container-alert-warning); border-color: var(--c-b-warning); }
        &.error{ background-color: var(--c-bg-container-alert-error); border-color: var(--c-b-error); }
        &.success{ background-color: var(--c-bg-container-alert-success); border-color: var(--c-b-success); }
        &.note{ background-color: var(--c-bg-container-alert-note); border-color: var(--c-b-tertiary); }
        &.info::before{ background-image: url("https://static.s-sfr.fr/media/RED/icones/info-blue.svg"); }
        &.warning::before{ background-image: url("https://static.s-sfr.fr/media/RED/icones/attention_alerte-orange.svg"); }
        &.error::before{ background-image: url("https://static.s-sfr.fr/media/RED/icones/croix_rouge.svg"); }
        &.success::before{ background-image: url("https://static.s-sfr.fr/media/RED/icones/check_valider.svg"); }
        &.note::before{ background-image: url("https://static.s-sfr.fr/media/RED/icones/parametre-black.svg"); }

        > *{ grid-column: 2; font: var(--f-p-M); }
        > .t{ font: var(--f-p-Mb); }
    }
    @media (max-width: 1023px ) {
        .message{
            grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--space-M);
            > *{ grid-column: auto; }
        }
    }
    /* ----- ----- ----- Messages ----- ----- ----- */

    /* ----- ----- ----- StickyBanner ----- ----- ----- */
    .sticky-banner{
        .grid-full > &{  grid-column: gridfull; }
        display: grid; place-items: center; justify-content: center; width: 100%; padding: var(--space-S) var(--space-XXXL); background-color: var(--c-fg-sticker-event); color: var(--c-fg-constant-white);        
        @media (max-width: 1023px){
            padding-inline: var(--space-M);
        }
    }
    /* ----- ----- ----- StickyBanner ----- ----- ----- */

    /* ----- ----- ----- Cards ----- ----- ----- */
    .card{
        --card-gap: var(--space-L); --card-main-padding: var(--space-L);
        display: flex; flex-direction: column; gap: var(--card-gap); padding: var(--card-main-padding); background-color: var(--c-bg-container-primary);
        &.brand{ background-color: var(--c-bg-container-brand-1); }
        & > .c{
            display: flex; flex-direction: column; align-items: start; row-gap: var(--space-S);
            .icon-text{ gap: var(--space-M); }
            & > :is(h2,h3,[class*="f-t-"]){ margin-bottom: 0; }
        }
        &.icon-textcard{
            > .icon-text{ --justify: start; gap: var(--space-M); }
            > .button-group{
                flex-direction: column; width: 100%;
                .button-3{ align-self: center; }
            }
            > :is(a,[class*="button-"]):last-child{ margin-top: auto; }
        }
        &.image-textcard{
            --card-gap: var(--space-M); --card-main-padding: var(--space-M); max-width: 620px; background-color: var(--c-bg-container-brand-1);
            > .v{ overflow: clip;
                > img{ transition: transform .2s ease-in; }
            }
            &:hover > .v > img{ transform: scale(1.05); }
            > .c{ flex: 1 0 auto; gap: var(--space-L); padding: var(--space-L); background-color: var(--c-bg-container-primary); }
        }
        .end{ margin-top: auto; }
        @media(max-width: 1023px){
            --card-main-padding: var(--space-M);
        }
    }
    /* ----- ----- ----- Cards ----- ----- ----- */

    /* ----- ----- ----- List Card ----- ----- ----- */
    .list-card{
        display: grid; gap: var(--space-L); align-content: start; padding: var(--space-L); background-color: var(--c-bg-container-primary);
        & > .t{
            :first-child:has(+p){ margin-bottom: var(--space-S); }
        }
        & > .button-group{ justify-content: start; }
        @media(max-width: 1023px){
            gap: var(--space-M);
        }
    }
    /* ----- ----- ----- List Card ----- ----- ----- */

    /* ----- ----- ----- Accordion ----- ----- ----- */
    .accordion-section{
        display: grid; gap: var(--space-XL);
        > .t{
            > :first-child{ font: var(--f-t-L); }
            font: var(--f-p-M);
        }
    }
    .accordion{
        border-bottom: 1px solid var(--c-b-tertiary); font: var(--f-p-M); overflow: hidden;
        &:first-child, :not(.accordion) + &{ border-top: 1px solid var(--c-b-tertiary); }
        > .t{
            position: relative; display: flex; justify-content: space-between; column-gap: var(--space-L); padding: var(--space-L) var(--space-S) var(--space-L) 0; font: var(--f-t-Sb); color: var(--c-t-primary-1); cursor: pointer;
            &::after{ content: ""; flex: 0 0 8px; height: 8px; border-color: var(--c-t-primary-1); border-style: solid; border-width: 2px 2px 0 0; transform-origin: center; transform: rotateX(0deg) rotateZ(135deg); transition: transform .2s; }
            
            h2, h3, h4{ font: inherit; }
        }
        &[open] .t::after{ transform: rotateX(-180deg) rotateZ(135deg); }
        &::details-content{ display: block; block-size: 0; transition: block-size .4s, content-visibility .4s; transition-behavior: allow-discrete; }
        &[open]::details-content{ block-size: auto; }
        > .w{ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-L); padding: 0 0 var(--space-L) 0; }
        @media (max-width: 1023px ) {
            > .t{ padding: var(--space-M) var(--space-M) var(--space-M) 0; }
            > .w{ padding: 0 0 var(--space-M); }
        }
    }    
    /* ----- ----- ----- Accordion ----- ----- ----- */

    /* ----- ----- ----- List ----- ----- ----- */
    .list{
        > *:has(.price-icon){
            display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-M);
            .price-icon{ display: flex; align-items: center; column-gap: var(--space-S); text-align: end; font: var(--f-p-M); }
        }

        &:not(.horizontal){
            > *:not(:last-child){ padding-bottom: var(--space-M); }
            > * + *{ padding-top: var(--space-M); border-top: 1px solid var(--c-b-tertiary); }
        }
        &.horizontal{
            display: grid; grid-auto-flow: column; gap: var(--space-L);
            &  > *{ align-items: center; align-content: start; padding-top: var(--space-M); border-top: 1px solid var(--c-b-tertiary); }
        }
        &.noborder > *{ border: 0px; }

        @media (max-width: 1023px ){
            &.horizontal{ grid-auto-flow: row; justify-self: stretch; justify-items: center; }
        }
    }
    /* ----- ----- ----- List ----- ----- ----- */

}

@layer organismes{
    /* ----- ----- ----- PageTitle ----- ----- ----- */
    .page-title{
        display: grid; row-gap: var(--space-XL); padding: var(--space-L) 0 var(--space-XL);
        @media (max-width: 1023px ){
            row-gap: var(--space-L); padding: var(--space-M) 0 var(--space-L);
        }
    }
    /* ----- ----- ----- PageTitle ----- ----- ----- */

    /* ----- ----- ----- CardSlider ----- ----- ----- */
    .card-slider{
        --cardwidth: 400px;
        &.main{
            grid-column: gridfull;
            > .scroller{
                grid-column: gridfull; padding-inline: var(--gridsys-gap);
                > .w::after{ content: ""; max-width: 0.1px; height: 100%; }
            }
        }
        > .t{
            display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-XL); margin-bottom: var(--space-XL);
            > p:nth-child(2){ grid-column: 1; grid-row: 2; }
            .controllers{ align-self: end; margin-bottom: 0; }
        }
        .controllers{
            &.hidden{ display: none; }
            display: flex; justify-content: end; margin-bottom: var(--space-XL);
        }
        > .scroller{
            scrollbar-width: none; scroll-behavior: smooth; overflow: auto hidden;
            > .w{
                position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: var(--cardwidth); gap: 0 var(--space-XL); max-width: var(--gridsys-maxwidth); margin: 0 auto;
            }
        }
        > .button-group{ margin-top: var(--space-XL); }
        &.scrollOff{
            .controllers{ display: none; }
        }
        @media (max-width: 1023px){
            > .t{ column-gap: var(--space-L); margin-bottom: var(--space-L); }
            > .controllers{ margin-bottom: var(--space-L); }
            .scroller > .w{ grid-auto-columns: 271px; gap: 0 var(--space-M); }
        }
    }
    /* ----- ----- ----- CardSlider ----- ----- ----- */

    /* ----- ----- ----- Table ----- ----- ----- */
    .table-section{ display: grid; gap: var(--space-XL); }
    .table{
        width: 100%; border-collapse: collapse; table-layout: fixed;
        :is(td,th){ padding: var(--space-M); overflow: hidden; text-align: center; }
        thead th{ background-color: var(--c-bg-container-brand-1); border: 1px solid var(--c-b-tertiary); font: var(--f-p-Mb); }
        tbody, tfoot{
            th, td{ border-width: 0 1px 1px 1px; border-style: solid; border-color: var(--c-b-tertiary); font: var(--f-p-M); }
            tr:first-child td{ border-width: 1px; }
            tr:nth-child(even){ background-color: var(--c-bg-container-primary); }
            tr:nth-child(odd){ background-color: var(--c-bg-container-secondary); }
        }
        @media (max-width: 1023px){
            display: block; overflow: auto;
        }
    }
    /* ----- ----- ----- Table ----- ----- ----- */

    /* ----- ----- ----- MEABannerSlider ----- ----- ----- */
    .MEA-banner-slider{
        display: flex; gap: var(--space-L); padding: var(--space-L); background-color: var(--c-bg-container-brand-1);
        & > .v{
            flex: 0 0 auto;
        }
        & > .w{
            flex: 1 0 0; display: flex; flex-direction: column; align-items: start; gap: var(--space-M); overflow: clip;
            > .head,
            > .c{ display: grid; justify-items: start; gap: var(--space-S); }
            > .head > .t{
                gap: var(--space-XS);
                > :first-child{ font: var(--f-t-Mb); }
            }
            [class*="button-"]:last-child{ margin-top: auto; }
        }
        &.xsmall{
            max-height: 153px; padding: 0;
            & > .w{ padding: var(--space-L) var(--space-L) var(--space-L) 0; }
        }
        @media (max-width: 1023px ) {
            flex-direction: column; gap: var(--space-M); padding: var(--space-M);
            & > .w{
                [class*="button-"]{ align-self: stretch; }
            }
        }
    }
    /* ----- ----- ----- MEABannerSlider ----- ----- ----- */

    /* ----- ----- ----- Image Text Section ----- ----- ----- */
    .image-text-section{
        display: grid; gap: var(--space-XL);
        &.light > .w{ background-color: var(--c-bg-container-secondary); }
        > .w{
            display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--space-XL); padding: var(--space-L); background-color: var(--c-bg-container-primary);
            &:has(> .c > .button-group){
                align-items: stretch;
                > .c{ grid-template-rows: 1fr auto; }
            }
            &.light{ background-color: var(--c-bg-container-secondary); }
            & > .v > img{ transition: transform .2s ease-in; }
            &:hover > .v > img{ transform: scale(1.05); }
            > .c{
                display: grid; place-items: start; align-content: start; gap: var(--space-L);

                > .button-group{ justify-content: start; }
                > .c{
                    display: grid; place-items: start; gap: var(--space-L);

                    > .t{
                        & > :not(p):nth-child(1){ font: var(--f-t-Mb); }
                    }
                    > .c{
                        display: grid; place-items: start; gap: var(--space-M);
                        > .t{
                            gap: var(--space-M);
                            & > :not(p):nth-child(1){ font: var(--f-t-Sb); }
                        }
                    }
                }
            }
            @media (min-width: 1024px) {
                &:has( > .v:first-child ){
                    grid-template-columns: auto 1fr;
                    > .v{ grid-column: 1; }
                    > .c{ grid-column: 2; }
                }
            }
            @media (max-width: 1023px) {
                grid-template-columns: auto; gap: var(--space-M); padding: var(--space-M);
                > .v{ grid-row: 1; }
                > .c{
                    justify-items: stretch; grid-row: 2; gap: var(--space-M);
                }
            }
        }        
    }
    /* ----- ----- ----- Image Text Section ----- ----- ----- */

    /* ----- ----- ----- List Section ----- ----- ----- */
    .list-section{
        display: grid; gap: var(--space-XL);
        > .c{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-XL); }
        @media (max-width: 1023px){
            gap: var(--space-L);
            > .c{ grid-auto-flow: row; gap: var(--space-L); }
        }
    }
    /* ----- ----- ----- List Section ----- ----- ----- */

    /* ----- ----- ----- Stepper Section ----- ----- ----- */
    .stepper-section{
        display: grid; gap: var(--space-XL);
        
        > .t :not(p):first-child{ display: block; font: var(--f-t-L); }
        :first-child:is(.stepper){ padding: 0; }

        .stepper{
            padding: var(--space-L); background-color: var(--c-bg-container-primary);
            > .t{
                margin-bottom: var(--space-L);
                > :not(p):first-child{ display: block; font: var(--f-t-Mb); margin-bottom: var(--space-S); }
            }
            > :is(ol,ul){
                counter-reset: stepper-counter; display: grid; grid-auto-flow: row; grid-auto-rows: 1fr; gap: var(--space-L); align-items: start; justify-items: start;
                .bubblestep::before{ counter-increment: stepper-counter; content: counter(stepper-counter); }
                .increment{ position: relative; padding-left: 2ch; }
                .increment::before{ counter-increment: stepper-counter; content: counter(stepper-counter)"."; position: absolute; left: 0; }
                > li{
                    display: grid; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: var(--space-M);
                    & > *:not(.icon-text):nth-child(3){ grid-column: span 2; }
                }
            }
        }

        @media (min-width: 1024px){
            &:not(.vertical){
                .stepper > :is(ol,ul){
                    grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: auto; gap: var(--space-L); align-items: start; justify-items: center; text-align: center;
                    > li{
                        grid-template-columns: auto; gap: var(--space-L); justify-items: center;
                        & > *:not(.icon-text):nth-child(3){ grid-column: auto; }
                    }
                }
            }
        }

        @media (max-width: 1023px){
            .stepper > :is(ol,ul){
                & > li{
                    gap: var(--space-M) var(--space-S);
                    &:not(:has(.bubblestep)){ grid-template-columns: auto; }
                    & > *:not(.icon-text):nth-child(3){ grid-column: span 2; }
                    .icon-text{ grid-auto-flow: column; }
                    .icon-text > .c{ justify-items: start; text-align: left; }
                }
            }            
        }
    }
    /* ----- ----- ----- Stepper Section ----- ----- ----- */

    /* ----- ----- ----- Service Section ----- ----- ----- */
    .service-section{
        display: grid; gap: var(--space-XL);
        > .head{
            > .t:has(+ *){ margin-bottom: var(--space-L); }
            > .t :not(p):first-child{ display: block; font: var(--f-t-L); }
        }
        > .w{
            display: flex; align-items: start; gap: var(--space-XL);
            > .c{ flex: 1 0 0; display: grid; row-gap: var(--space-XL); }
            > .v{ flex: 1 1 0; max-width: max-content; }
            @media (max-width: 1023px){
                flex-direction: column; gap: var(--space-M); align-items: stretch;
                > .c{ order: 1; row-gap: var(--space-L); }
            }
            .button-group{ width: auto; }
        }
    }
    /* ----- ----- ----- Service Section ----- ----- ----- */

    /* ----- ----- ----- Message Section ----- ----- ----- */
    .message-section{
        padding: var(--space-L); background-color: var(--c-bg-container-primary);
        @media(max-width: 1023px){ padding: var(--space-M);  }
    }
    /* ----- ----- ----- Message Section ----- ----- ----- */
}

@layer templates{
    /* ----- ----- ----- Modal ----- ----- ----- */
    .modal{
        &::backdrop{ background-color: rgba(19, 19, 22, 0.50); overflow: hidden; overscroll-behavior: contain; }
        max-width: 840px; margin: 0 auto; padding: var(--space-L) 0; visibility: hidden; opacity: 0; transition: opacity 0.4s; overscroll-behavior: contain;
        &[open]{
            opacity: 1; visibility: visible;
            @starting-style{ &[open]{ opacity: 0; visibility: hidden; } }
        }
        > .w{
            display: grid; grid-template-rows: min-content auto; grid-template-columns: minmax(304px, 840px); background-color: var(--c-bg-container-primary);
            .bandeau, .content{
                display: grid; row-gap: var(--space-L); padding: var(--space-L);
            }
            .bandeau{
                background-color: var(--c-bg-container-brand-1);
                .header{
                    display: grid; grid-template-areas: "back progress closer"; grid-template-columns: auto 1fr auto;
                    .closer{ grid-column: closer; }
                }
            }
            .content{ overflow: auto; }
        }
        @media(max-width: 1023px){
            padding: var(--space-M);
            .w{
                .bandeau, .content{ row-gap: var(--space-M); padding: var(--space-M); }
            }
        }
    }
    /* ----- ----- ----- Modal ----- ----- ----- */

    /* ----- ----- ----- Mozaic Cards ----- ----- ----- */
    .mozaic-cards{
        --mozaic-card: 2; display: grid; gap: var(--space-XL);
        & > .c{
            display: grid; grid-template-columns: repeat(var(--mozaic-card), 1fr); gap: var(--space-XL);
            @media( min-width: 1024px ) {
                &:has(> :nth-child(3)){ --mozaic-card: 3; }
                &:has(> :nth-child(4)){ --mozaic-card: 4; }
            }
        }
        @media (max-width: 1023px ) {
            gap: var(--space-L);
            & > .c{ --mozaic-card: 1; gap: var(--space-L); }
        }
    }
    /* ----- ----- ----- Mozaic Cards ----- ----- ----- */
}