/* var */
:root {

    --root-font-size: 17px;
    --line-height: 1.5;

    /* --espace =(--root-font-size/16px) */
    --espace: 1.0625rem;
    --quart-espace: .265625rem;
    --demi-espace: .53125rem;
    --double-espace: 2.125rem;
    --triple-espace: 3.1875rem;

    --largeur: 1200px;
    --largeur-reduite: 900px;
    --hauteur-minimale: 300px;

    --color-default: black;
    --color-default-hover: white;
    --color-inverse: white;
    --color-inverse-hover: black;

    --color-action: #0000ff;
    --color-action-hover: #0000B3;
    --color-action-inverse: white;

    --color-info: #FF9200;
    --color-info-inverse: white;

    --color-alerte: #EF4100;
    --color-alerte-inverse: white;

    --color-light: lightgrey;

    --color-tab-on: rgba(255, 174, 49,1);
    --color-tab-off: rgba(255, 174, 49,0.6);

}

/* défaut */

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

    /* root */
    html {
        scroll-behavior: smooth;
        font-size: var(--root-font-size);
    }

    /* body */
    body {
        margin: 0;
        min-height: 100vh;
        text-rendering: optimizeSpeed;
        line-height: var(--line-height);
        font-size: var(--root-font-size);
    }

    /* marges par défaut */
    h1 {margin-bottom: var(--double-espace)}
    :is(h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dt,dd):not(.no-marg):not(:last-child) {
        margin-bottom: var(--espace);
    }

    /* padding par défaut sur les listes sans classe */
    :is(ul,ol):not([class]) {padding-left: var(--espace)}

        /* pas de style par défaut sur les listes avec classe */
        :is(ul,ol)[class] {list-style: none}

    /* texte préformaté */
    pre {
        font-size: 70%;
        white-space: pre-wrap
    }

    code {font: inherit;}
    iframe {border: 0}
    
    /* liens */

        a:not(.souligne) {text-decoration: none;}

        /* couleur */
        /* par défaut = héritage */
        a:link, a:visited, a:focus, a:hover {color: inherit;}
        a.action:hover, a.action:focus {color: var(--color-action)}
        a.action-inverse:hover, a.action-inverse:focus {
            color: var(--color-inverse);
            background-color: var(--color-action)
        }

        /* pas de contour */
        a:focus {outline: none!important}

        /* style par défaut & style inverse */
        a:not([class]), a.inverse {
            display: inline-block;
            position: relative;
        }
        a:not([class]):before,
        a.inverse:before {
            background-color: currentColor;
            content: '';
            height: 1px;
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            transition: width 0.3s ease-in-out;
        }
        a:not([class]):before {width: 100%;}
        a.inverse:before {width: 0;}
        a:not([class]):hover:before {width: 0;}
        a.inverse:hover:before {width: 100%;}

        /* tag */

        a.tag:link, a.tag:visited {
            padding: var(--demi-espace);
            border-radius: 4px;
            font-size: 0.8rem;
            text-transform : uppercase;
            background: var(--color-default);
            color : var(--color-inverse);
        }

        a.tag:focus, a.tag:hover {background: var(--color-action)}

    /* images */
    img,
    picture {
        max-width: 100%;
        display: inline-block;
        border: none;
    }
    /* floute image sans l'attribut ALT (dev) */
    img:not([alt]):not(.mfp-img) {filter: blur(10px)}

    /* flux naturel / rythme */
    :where(p,ul,ol) + :where(h2,h3,h4,h5,h6) {padding-top: var(--espace)}
    article > * + * {padding-top: var(--espace)}

    /* champs formulaire */

        fieldset {border: none}

        input,
        button,
        textarea,
        select {
            font: inherit;
            padding: var(--quart-espace) var(--demi-espace);
            background: white;
            line-height: inherit;
            border: 1px solid var(--color-light)
        }

        textarea {resize: vertical}

        form.no-border *,
        *.no-border {border: none;}

        /* arrondi */
        .arrondi, form.arrondi :not(.btn_action) {border-radius: 0.5ex}
        .arrondi2 {border-radius: 1ex}
        .arrondi3 {border-radius: 1.5ex}

        /* focus */
        :read-write:focus,
        select:focus {
            outline: 0;
            border-color: var(--color-action)!important;
        }

        /* invalide */
        :invalid {
            box-shadow: none;
            outline: 0;
        }

        /* boutons */
        :is([type=button],[type=reset],[type=submit],button):not(:disabled) {cursor: pointer}

        /* placeholder */
        input::placeholder, textarea::placeholder {color: var(--color-light); opacity: 1}

        [data-erreur]::before {
            content: attr(data-erreur);
            display: inline-flex;
            width: 100%;
            font-size: 80%;
            color: var(--color-alerte);
            text-transform: lowercase;
        }

        [data-aide]::after {
            content: attr(data-aide);
            font-size: 80%;
            color: var(--color-light);
            text-transform: lowercase;
            display: inline;
        }

    /* animations et transitions */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

/* framework */

    /* conteneurs */

    .liquid {width: 100%}
    .solid {

        box-sizing: content-box;
        max-width: var(--largeur);
    }
    .solid:not(.no-marg) {
        margin-left: auto;
        margin-right: auto;
    }

    :is(.liquid,.solid):not(.fill) {
        padding-left: var(--espace);
        padding-right: var(--espace);
    }

    .liquid:not(.fill) > .solid {
        padding-left: 0;
        padding-right: 0
    }

    .min {max-width: var(--largeur-reduite)}
    .minh {min-height: var(--hauteur-minimale)}

    /* boîtes, colonnes */

        .box {
            display: flex;
            width: 100%;
        }

        .box.fill {
            width: auto;
            margin: 0 calc(-1 * var(--espace));
        }

        .box.wrap {flex-wrap: wrap}
        .box.auto {width: auto}
        .box.column {flex-direction: column}
        .box.reverse {flex-direction: row-reverse}
        .box.column.reverse {flex-direction: column-reverse}

        .box > * {
            --gap: 0rem;
            --columns: 1
        }

        /* alignement sur l'axe principal */
        .start {justify-content: flex-start}
        .center {justify-content: center}
        .end {justify-content: flex-end}
        .between {justify-content: space-between}
        .around {justify-content: space-around}
        .evenly {justify-content: space-evenly}
        .push {margin-left: auto}
        .stretch > * {flex: 1}

        /* alignement sur l'axe secondaire */
        /* align-content est pris en compte uniquement sur les conteneurs flexibles à plusieurs lignes (wrap) */
        ._start {align-items: flex-start; align-content: flex-start}
        ._center {align-items: center; align-content: center}
        ._end {align-items: flex-end; align-content: flex-end}
        ._base {align-items: baseline}
        ._stretch {align-items: stretch; align-content: stretch}
        ._between {align-content: space-between}
        ._around {align-content: space-around}

        /* alignement sur l'axe secondaire (surcharge au niveau sur l'élément) */
        .__start {align-self: flex-start}
        .__center {align-self: center}
        .__end {align-self: flex-end}
        .__base {align-self: baseline}
        .__stretch {align-self: stretch}

        .first {order: -1}


        /* boîtes préformatéés */

        /* box-division */
        /* les boîtes sont espacées et séparées par une bordure */
        /* la bordure n'est pas appliquée si les boîtes sont empilées verticalement */

            .box.box-division > * {
                padding-left: var(--espace);
                padding-right: var(--espace)
            }
            .box.box-division:not([class*="column"]) > *:not(:first-child) {
                border-left-width: 1px;
                border-left-style: solid;
                border-left-color: inherit;
            }

        /* box-label */
        /* boîte adaptée à l'affichage d'un label + champ */

            .box.box-label {gap: var(--espace)}

            .box > label,
            .box-label > label {
                flex: 1 0 33%;
            }

            .box > label + div {
                flex: 1 0 calc(67% - var(--espace));
            }

            .box > label + div > input:not([type=radio]):not([type=checkbox]):not([class^="ch"]),
            .box > label + div > select,
            .box > label + div > textarea {width: 100%}

    /* largeurs */

        .xs_20 {--w: 20%}
        .xs_25 {--w: 25%}
        .xs_33, .flex_33 {--w: 33.33333%}
        .xs_40 {--w: 40%}
        .xs_50 {--w: 50%}
        .xs_60 {--w: 60%}
        .xs_67 {--w: 66.66667%}
        .xs_75 {--w: 75%}
        .xs_80 {--w: 80%}
        .xs_100 {width: 100%}

        .xs_20, .xs_25, .xs_33, .xs_40, .xs_50, .xs_60, .xs_67, .xs_75, .xs_80 {
            width: calc(var(--w) - (((var(--columns,1) - 1) * var(--gap,0rem)) / var(--columns,1)))
        }
        
        .flex_33 {
            flex-basis: calc(var(--w))
        }


    /* btn */

        .btn {
            display: inline-block;
            border: 1px solid transparent;
            padding: var(--demi-espace) var(--espace);
            font-size: inherit;
            text-align: center;
            vertical-align: baseline;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
            user-select: none;
        }

        /* alignement avec l'élement de formulaire qui précède */
        input + .btn,
        select + .btn,
        .btn_input {padding: var(--quart-espace) var(--demi-espace)}

        /* variations */
        .btn_small {padding: var(--demi-espace)}
        .btn_link {background: transparent}
        .btn_link:hover, .btn_link:focus {color: var(--color-action)}

        .btn_defaut {background: var(--color-inverse); border-color: var(--color-default)}
        .btn_defaut, .btn_defaut:link, .btn_defaut:visited {color: var(--color-default)}
        .btn_defaut:hover, .btn_defaut:focus {color: var(--color-default-hover); background: var(--color-default);}

        .btn_inverse {background: var(--color-default); border-color: var(--color-inverse)}
        .btn_inverse, .btn_inverse:link, .btn_inverse:visited {color: var(--color-inverse)}
        .btn_inverse:hover, .btn_inverse:focus {color: var(--color-inverse-hover); background: var(--color-inverse);}

        .btn_action {background: var(--color-action); border-color: var(--color-action); font-weight: bold}
        .btn_action, .btn_action:link, .btn_action:visited {color: var(--color-action-inverse)}
        .btn_action:hover, .btn_action:focus {background: var(--color-action-hover);}

        .btn_input {
            min-width: 30px;
            font-weight: bold;
            transition: none;
        }

            .btn_input:hover, .btn_input:focus {
                color: var(--color-action);
                border-color: var(--color-action)!important;
            }


    /* tables */

        .table-responsive {
            width: 100%;
            overflow-x:  auto;
        }

        .table-conteneur {overflow: hidden}

            .table {
                display: grid;
                overflow-x: auto;
                margin: 0 calc(-1 * var(--espace));
            }

            .table.bordure {
                margin: 0;
                border-top: 1px solid var(--color-light);
                border-right: 1px solid var(--color-light);
            }

            .table.col1 {grid-template-columns: 1fr}
            .table.col2 {grid-template-columns: repeat(2,minmax(0, 1fr))}
            .table.col3 {grid-template-columns: repeat(3,minmax(0, 1fr))}
            .table.col4 {grid-template-columns: repeat(4,minmax(0, 1fr))}
            .table.col5 {grid-template-columns: repeat(5,minmax(0, 1fr))}
            .table.col6 {grid-template-columns: repeat(6,minmax(0, 1fr))}

                .table > * {
                    border-bottom: 1px solid var(--color-light);
                    padding: var(--demi-espace) var(--espace);
                }

                .table.bordure > * {border-left: 1px solid var(--color-light)}

                .table > .void {border-color: var(--color-inverse)}

                .table > .span {grid-column: 1/-1}
                .table > .span2 {grid-column: span 2}
                .table > .span3 {grid-column: span 3}
                .table > .span4 {grid-column: span 4}
                .table > .span5 {grid-column: span 5}
                .table > .span6 {grid-column: span 6}

                .table.header.col1 > :nth-child(-n+1),
                .table.header.col2 > :nth-child(-n+2),
                .table.header.col3 > :nth-child(-n+3),
                .table.header.col4 > :nth-child(-n+4),
                .table.header.col5 > :nth-child(-n+5),
                .table.header.col6 > :nth-child(-n+6) {
                    background: var(--color-light)
                }

                .table.center > * {text-align: center}
                
                .table.wrap > * {word-wrap: break-word}

    /* icones */

        .ico {
            display: flex;
            column-gap: var(--demi-espace);
        }

        .ico::before{
            font-family : 'Font Awesome 5 Free';
            font-size : 120%;
            font-weight : bold;
            line-height: 1.25;
        }

    /* helpers */

        .scroll-y {overflow-y: scroll}

        .bloc {display: block}
        .bloc:not(img) {width: 100%}/* width 100% for replaced elements */
        .bloc-i {display: inline-block}

        /* positionnement */
        .absolu {position: absolute}
        .relatif {position: relative}
        .haut {top: 0}
        .milieu {top: 50%; transform: translateY(-50%)}
        .bas {bottom: 0}
        .gauche {left: 0}
        .droite {right: 0}

        /* largeur */
        .defaut {flex: 0 0 auto; width: auto}
        .zero {flex: 1 1 0; width: 0}
        .auto {flex: auto; width: auto}
        .max {flex-basis: 100%; width: 100%}
        .max25 {max-width: 25%}
        .max50 {max-width: 50%}
        .max75 {max-width: 75%}
        .max100 {max-width: 100%}

        .ch1 {box-sizing: content-box; width: 1ch}
        .ch2 {box-sizing: content-box; width: 2ch}
        .ch3 {box-sizing: content-box; width: 3ch}
        .ch4 {box-sizing: content-box; width: 4ch}

        .grow {flex-grow: 1;}
        .shrink {flex-shrink: 1;}

        /* hauteur */
        .maxh100 {max-height: 100%}

        /* goutières */
        .gap0-5 {gap: var(--demi-espace)}
        .gap {gap: var(--espace)}
        .gap2 {gap: var(--double-espace)}
        .gap3 {gap: var(--triple-espace)}

        .box.gap0-5 > * {--gap: var(--demi-espace)}
        .box.gap > * {--gap: var(--espace)}
        .box.gap2 > * {--gap: var(--double-espace)}
        .box.gap3 > * {--gap: var(--triple-espace)}

        /* marges : vers le bas uniquement ! */
        .marg {margin-bottom: var(--espace);}
        .marg2 {margin-bottom: var(--double-espace);}
        .marg3 {margin-bottom: var(--triple-espace);}

        /* padding */
        [class*="padd025_"] {--padd: var(--quart-espace)}
        [class*="padd05_"] {--padd: var(--demi-espace)}
        [class*="padd_"] {--padd: var(--espace)}
        [class*="padd2_"] {--padd: var(--double-espace)}
        [class*="padd3_"] {--padd: var(--triple-espace)}

        .padd025_a, .padd05_a, .padd_a, .padd2_a, .padd3_a {padding: var(--padd)}
        .padd025_v, .padd05_v, .padd_v, .padd2_v, .padd3_v {padding-top: var(--padd); padding-bottom: var(--padd)}
        .padd025_h, .padd05_h, .padd_h, .padd2_h, .padd3_h {padding-left: var(--padd); padding-right: var(--padd)}
        .padd025_t, .padd05_t, .padd_t, .padd2_t, .padd3_t {padding-top: var(--padd)}
        .padd025_b, .padd05_b, .padd_b, .padd2_b, .padd3_b {padding-bottom: var(--padd)}
        .padd025_l, .padd05_l, .padd_l, .padd2_l, .padd3_l {padding-left: var(--padd)}
        .padd025_r, .padd05_r, .padd_r, .padd2_r, .padd3_r {padding-right: var(--padd)}

        /* bordure */
        .bord {border-width: 1px; border-style: solid; border-color: inherit}
        .bord_t {border-top-width: 1px; border-top-style: solid; border-top-color: inherit}
        .bord_b {border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: inherit}
        .bord_l {border-left-width: 1px; border-left-style: solid; border-left-color: inherit}
        .bord_r {border-right-width: 1px; border-right-style: solid; border-right-color: inherit}

        .btn_input.bord {border-color: var(--color-light)}
        input + .btn_input.bord {border-left-color: transparent}

        /* bloc */
        .to_group:after {
            content: "";
            display: table;
            clear: both;
        }
        .to_left {float: left;}
        .to_right {float: right;}
        .to_middle {
            margin-left: auto;
            margin-right: auto;
        }
        .to_center {
            display: grid;
            place-items: center;
        }

        /* image */
        .img100 {
            max-width: 100%;
            width: auto;
            height: auto;
        }

        .img50 {
            max-width: 50%;
            width: auto;
            height: auto;
        }

        .img100_h {max-height: 100%;}

        /* text */
        /* masonry : https://w3bits.com/labs/css-masonry/ */
        .text_left {text-align: left}
        .text_right {text-align: right}
        .text_center {text-align: center}
        .text_overflow {overflow: hidden}
        .text_nowrap {white-space: nowrap}
        
        .masonry > div {display: inline-block}

        /* colonnes */

        .xs_col1 {columns: 1 auto;}
        .xs_col2 {columns: 2 auto;}
        .xs_col3 {columns: 3 auto;}
        .xs_col4 {columns: 4 auto;}
        .xs_col5 {columns: 5 auto;}

        /* voir calcul largeur sur les boîtes fléxibles */
        .box.xs_col1 > * {--columns: 1}
        .box.xs_col2 > * {--columns: 2}
        .box.xs_col3 > * {--columns: 3}
        .box.xs_col4 > * {--columns: 4}
        .box.xs_col5 > * {--columns: 5}

        .span {column-span: all}

        /* police */

            /* taille relative à l'élément racine */
            .small {font-size : 0.8rem;}
            .big {font-size : 1.2rem}
            .big2 {font-size : 1.4rem}
            .big3 {font-size : 1.6rem}
            .big4 {font-size : 1.8rem}
            .big5 {font-size : 2rem}

            /* taille relative au parent */
            .smaller {font-size : 90%}
            .bigger {font-size : 110%}

            .normal {font-weight: normal}
            .bold {font-weight: bold}
            .upper {text-transform: uppercase}
            .lower {text-transform: lowercase}

        /* couleurs */
        .color-defaut {color: var(--color-default)}
        .color-info {color: var(--color-info)}
        .color-inverse {color: var(--color-inverse)}
        .color-light {color: var(--color-light)}

        .bg-defaut {background-color: var(--color-inverse)}
        .bg-info {background-color: var(--color-info)}
        .bg-inverse {background-color: var(--color-default)}
        .bg-light {background-color: var(--color-light)}

        .bord-defaut {border-color: var(--color-default)}
        .bord-info {border-color: var(--color-info)}
        .bord-inverse {border-color: var(--color-inverse)}
        .bord-light {border-color: var(--color-light)}

        /* cache / affiche */
        .invisible {visibility: hidden}
        .hide {display: none}
        .show {display: initial}

        /* desactive (lien / bouton / champ) */
        .desactive, :disabled {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 0.38;
        }

/* composants */

    /* fil d'ariane */

        .fil {
            display: flex;
            flex-wrap: nowrap;
            font-size: 80%;
            text-transform: uppercase;
        }

            .fil > :last-child {flex: 1 1 0}
            .fil > :last-child a {float: right}
            
            .fil > :not(:first-child)::before {
                content: '>';
                padding: 0 var(--demi-espace);
            }

    /* hamburger menu */

    .hamburger ul {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        list-style-type: none;
        padding-top: var(--espace);
        padding-bottom: var(--espace);
    }

        .hamburger li {padding: var(--espace)}

    /* overlay */

    body.is--masked {
        width: 100%;
        height: 100vh;
        position: fixed;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    body.is--masked::before {
        content: '';
        position: fixed;
        z-index: 800;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .8;
        background-color: #1a1919;
        pointer-events: all;
        transition: all 0.4s ease-in-out;
    }

    /* popup */

    .popup {
        position: relative;
        margin: 0 auto;
        background: var(--color-inverse);
        color: var(--color-default);
    }

    /* modal */

    .no-scroll {
        width: 100%;
        height: 100vh;
        position: fixed;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .modal {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.25);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s;
    }

    .modal:target,
    .modal[data-visible] {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .modal > div {
        max-width: 600px;
        min-width: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: var(--espace);
        overscroll-behavior: contain;
    }

    /* card */

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        grid-gap: 20px;
    }

    .card {
        display: grid;
        grid-template-rows: 5rem 200px 1fr;
    }

    .card img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }


    /* cookie */

    .section {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid currentColor;
    }

    .section .etiquette {
        position: relative;
        top: var(--demi-espace);
        left: var(--espace);
    }

    /* tabs */

    .tabs > input {display: none}
    .tabs > input + label {
        display: table-cell;
        position: relative;
        top: 1px;
        border: 1px solid var(--color-tab-on);
        border-bottom-color: transparent;
        padding: var(--demi-espace) var(--espace);
    }

    .tabs > input:not(:last-of-type) + label {border-right: none}

    .tabs > input ~ .tab {
        display: none;
        border-top: 1px solid var(--color-tab-on);
        padding: var(--espace)
    }

    #tab1:checked ~ .tab.content1,
    #tab2:checked ~ .tab.content2,
    #tab3:checked ~ .tab.content3,
    #tab4:checked ~ .tab.content4,
    #tab5:checked ~ .tab.content5 {display: block}

    .tabs > input:checked + label {font-weight: bold}
    .tabs:not(.fill) > input:checked + label {border-bottom-color: var(--color-inverse)}

    .tabs > input:not(:checked) + label:hover {cursor: pointer}

    .tabs.fill > input + label {background: var(--color-tab-off)}
    .tabs.fill > input:checked + label,
    .tabs.fill > input:not(:checked) + label:hover,
    .tabs.fill > input ~ .tab {background: var(--color-tab-on)}

/* screen vs print */

    @media screen {
        .print-only {display: none}
        .screen-only {display: initial}
    }
    @media print {
        .print-only {display: initial}
        .screen-only {display: none}
    }

/* media queries */

@media screen and (max-width:36rem) {

    :root {

        --espace: .53125rem;
        --quart-espace: .1328125rem;
        --demi-espace: .265625rem;
        --double-espace: 1.0625rem;
        --triple-espace: 1.59375rem;
    
    }
    
    .xs_retrait {
        margin-left: calc(var(--espace) * -1);
        margin-right: calc(var(--espace) * -1);
    }
    .xs_column {flex-direction: column}

    .xs_defaut  {flex: 0 0 auto; width: auto}
    .xs_zero {flex: 1 1 0; width: 0}
    .xs_auto {flex: auto; width: auto}
    .xs_max {flex-basis: 100%; width: 100%}
    .xs_max25 {max-width: 25%}
    .xs_max50 {max-width: 50%}
    .xs_max75 {max-width: 75%}

    .xs_grow {flex-grow: 1}
    .shrink {flex-shrink: 1;}

    .hide_upto_sm, .xs_hide {display: none!important}
    .show_upto_sm, .xs_show {display: initial!important}

    .solid.sm_fill {
        padding-left: 0;
        padding-right: 0
    }

    .row.xs_reverse {flex-direction: row-reverse}

    .box:not(.nowrap) {flex-wrap: wrap}

    .xs_gap0-5 {gap: var(--demi-espace)}
    .xs_gap {gap: var(--espace)}
    .xs_gap2 {gap: var(--double-espace)}
    .xs_gap3 {gap: var(--triple-espace)}

    .box.xs_gap0-5 > * {--gap: var(--demi-espace)}
    .box.xs_gap > * {--gap: var(--espace)}
    .box.xs_gap2 > * {--gap: var(--double-espace)}
    .box.xs_gap3 > * {--gap: var(--triple-espace)}

    .box.border > * {
        flex: 0 1 100%;
        padding: 0 var(--espace);
        border: none!important;
    }

    .table > * {word-break: break-all}

}

@media screen and (min-width:36rem) {

    .hide_from_sm, .sm_hide {display: none!important}
    .show_from_sm, .sm_show {display: initial!important}

    .row.sm_reverse {flex-direction: row-reverse}

    .sm_20 {--w: 20%}
    .sm_25 {--w: 25%}
    .sm_33 {--w: 33.33333%}
    .sm_40 {--w: 40%}
    .sm_50 {--w: 50%}
    .sm_60 {--w: 60%}
    .sm_67 {--w: 66.66667%}
    .sm_75 {--w: 75%}
    .sm_80 {--w: 80%}
    .sm_100 {width: 100%}

    .sm_20, .sm_25, .sm_33, .sm_40, .sm_50, .sm_60, .sm_67, .sm_75, .sm_80 {
        width: calc(var(--w) - (((var(--columns,1) - 1) * var(--gap,0rem)) / var(--columns,1)))
    }

    .sm_defaut  {flex: 0 0 auto; width: auto}
    .sm_zero {flex: 1 1 0; width: 0}
    .sm_auto {flex: auto; width: auto}
    .sm_max {flex-basis: 100%; width: 100%}
    .sm_max25 {max-width: 25%}
    .sm_max50 {max-width: 50%}
    .sm_max75 {max-width: 75%}
    .sm_max100 {max-width: 100%}

    .sm_col1 {columns: 1 auto;}
    .sm_col2 {columns: 2 auto;}
    .sm_col3 {columns: 3 auto;}
    .sm_col4 {columns: 4 auto;}
    .sm_col5 {columns: 5 auto;}

    .box.sm_col1 > * {--columns: 1}
    .box.sm_col2 > * {--columns: 2}
    .box.sm_col3 > * {--columns: 3}
    .box.sm_col4 > * {--columns: 4}
    .box.sm_col5 > * {--columns: 5}

    .sm_gap0-5 {gap: var(--demi-espace)}
    .sm_gap {gap: var(--espace)}
    .sm_gap2 {gap: var(--double-espace)}
    .sm_gap3 {gap: var(--triple-espace)}

    .box.sm_gap0-5 > * {--gap: var(--demi-espace)}
    .box.sm_gap > * {--gap: var(--espace)}
    .box.sm_gap2 > * {--gap: var(--double-espace)}
    .box.sm_gap3 > * {--gap: var(--triple-espace)}

}

@media screen and (max-width:48rem) {

    .hide_upto_md {display: none!important;}
    .show_upto_md {display: initial!important;}

    .solid.md_fill {
        padding-left: 0;
        padding-right: 0
    }

    /* menu hamburger */

    .hamburger ul {
        clear: both;
        overflow: hidden;
        max-height: 0;
        padding: 0;
        transition: max-height .2s ease-out;
    }
    .hamburger li {flex: 1 0 100%;}
    .hamburger li a {display: block;}

    .hamburger label {
        cursor: pointer;
        display: inline-block;
        float: right;
        padding: 0.7rem;
        position: absolute;
        top: 1em;
        right: 0;
        user-select: none;
    }

    .hamburger label span {
        background: #333;
        display: block;
        height: 2px;
        position: relative;
        transition: background .2s ease-out;
        width: 18px;
    }

    .hamburger label span:before,
    .hamburger label span:after {
        background: #333;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }

    .hamburger label span:before {top: 5px;}
    .hamburger label span:after {top: -5px;}

    .hamburger input:checked ~ ul {max-height: 100vh;}
    .hamburger input:checked ~ ul li {border-bottom: 1px solid black}

    .hamburger input:checked ~ label span {background: transparent;}

    .hamburger input:checked ~ label span:before {transform: rotate(-45deg);}
    .hamburger input:checked ~ label span:after {transform: rotate(45deg);}

    .hamburger input:checked ~ label:not(.steps) span:before,
    .hamburger input:checked ~ label:not(.steps) span:after {top: 0;}
}

@media screen and (min-width:48rem) {

    .hide_from_md, .md_hide {display: none!important}
    .show_from_md, .md_show {display: initial!important}

    .row.md_reverse {flex-direction: row-reverse}

    .md_20 {--w: 20%}
    .md_25 {--w: 25%}
    .md_33 {--w: 33.33333%}
    .md_40 {--w: 40%}
    .md_50 {--w: 50%}
    .md_60 {--w: 60%}
    .md_67 {--w: 66.66667%}
    .md_75 {--w: 75%}
    .md_80 {--w: 80%}
    .md_100 {width: 100%}

    .md_20, .md_25, .md_33, .md_40, .md_50, .md_60, .md_67, .md_75, .md_80 {
        width: calc(var(--w) - (((var(--columns,1) - 1) * var(--gap,0rem)) / var(--columns,1)))
    }

    .md_defaut  {flex: 0 0 auto; width: auto}
    .md_zero {flex: 1 1 0; width: 0}
    .md_auto {flex: auto; width: auto}
    .md_max {flex-basis: 100%; width: 100%}
    .md_max25 {max-width: 25%}
    .md_max50 {max-width: 50%}
    .md_max75 {max-width: 75%}
    .md_max100 {max-width: 100%}

    .md_col1 {columns: 1 auto;}
    .md_col2 {columns: 2 auto;}
    .md_col3 {columns: 3 auto;}
    .md_col4 {columns: 4 auto;}
    .md_col5 {columns: 5 auto;}

    .box.md_col1 > * {--columns: 1}
    .box.md_col2 > * {--columns: 2}
    .box.md_col3 > * {--columns: 3}
    .box.md_col4 > * {--columns: 4}
    .box.md_col5 > * {--columns: 5}

    .md_gap0-5 {gap: var(--demi-espace)}
    .md_gap {gap: var(--espace)}
    .md_gap2 {gap: var(--double-espace)}
    .md_gap3 {gap: var(--triple-espace)}

    .box.md_gap0-5 > * {--gap: var(--demi-espace)}
    .box.md_gap > * {--gap: var(--espace)}
    .box.md_gap2 > * {--gap: var(--double-espace)}
    .box.md_gap3 > * {--gap: var(--triple-espace)}

}

@media screen and (max-width:62rem) {

    .hide_upto_lg {display: none!important;}
    .show_upto_lg {display: initial!important}

}

@media screen and (min-width:62rem) {

    .hide_from_lg, .lg_hide {display: none!important}
    .show_from_lg, .lg_show {display: initial!important}

    .row.lg_reverse {flex-direction: row-reverse}

    .lg_20 {--w: 20%}
    .lg_25 {--w: 25%}
    .lg_33 {--w: 33.33333%}
    .lg_40 {--w: 40%}
    .lg_50 {--w: 50%}
    .lg_60 {--w: 60%}
    .lg_67 {--w: 66.66667%}
    .lg_75 {--w: 75%}
    .lg_80 {--w: 80%}
    .lg_100 {width: 100%}

    .lg_20, .lg_25, .lg_33, .lg_40, .lg_50, .lg_60, .lg_67, .lg_75, .lg_80 {
        width: calc(var(--w) - (((var(--columns,1) - 1) * var(--gap,0rem)) / var(--columns,1)))
    }

    .lg_defaut  {flex: 0 0 auto; width: auto}
    .lg_zero {flex: 1 1 0; width: 0}
    .lg_auto {flex: auto; width: auto}
    .lg_max {flex-basis: 100%; width: 100%}
    .lg_max25 {max-width: 25%}
    .lg_max50 {max-width: 50%}
    .lg_max75 {max-width: 75%}
    .lg_max100 {max-width: 100%}

    .lg_col1 {columns: 1 auto;}
    .lg_col2 {columns: 2 auto;}
    .lg_col3 {columns: 3 auto;}
    .lg_col4 {columns: 4 auto;}
    .lg_col5 {columns: 5 auto;}

    .box.lg_col1 > * {--columns: 1}
    .box.lg_col2 > * {--columns: 2}
    .box.lg_col3 > * {--columns: 3}
    .box.lg_col4 > * {--columns: 4}
    .box.lg_col5 > * {--columns: 5}

    .lg_gap0-5 {gap: var(--demi-espace)}
    .lg_gap {gap: var(--espace)}
    .lg_gap2 {gap: var(--double-espace)}
    .lg_gap3 {gap: var(--triple-espace)}

    .box.lg_gap0-5 > * {--gap: var(--demi-espace)}
    .box.lg_gap > * {--gap: var(--espace)}
    .box.lg_gap2 > * {--gap: var(--double-espace)}
    .box.lg_gap3 > * {--gap: var(--triple-espace)}

}

@media screen and (max-width:75rem) {

    .hide_upto_xl {display: none!important;}
    .show_upto_xl {display: initial!important}

}

@media screen and (min-width:75rem) {

    .hide_from_xl, .xl_hide {display: none!important}
    .show_from_xl, .xl_show {display: initial!important}

    .row.xl_reverse {flex-direction: row-reverse}

    .xl_20 {--w: 20%}
    .xl_25 {--w: 25%}
    .xl_33 {--w: 33.33333%}
    .xl_40 {--w: 40%}
    .xl_50 {--w: 50%}
    .xl_60 {--w: 60%}
    .xl_67 {--w: 66.66667%}
    .xl_75 {--w: 75%}
    .xl_80 {--w: 80%}
    .xl_100 {width: 100%}

    .xl_20, .xl_25, .xl_33, .xl_40, .xl_50, .xl_60, .xl_67, .xl_75, .xl_80 {
        width: calc(var(--w) - (((var(--columns,1) - 1) * var(--gap,0rem)) / var(--columns,1)))
    }

    .xl_defaut  {flex: 0 0 auto; width: auto}
    .xl_zero {flex: 1 1 0; width: 0}
    .xl_auto {flex: auto; width: auto}
    .xl_max {flex-basis: 100%; width: 100%}
    .xl_max25 {max-width: 25%}
    .xl_max50 {max-width: 50%}
    .xl_max75 {max-width: 75%}
    .xl_max100 {max-width: 100%}

    .xl_col1 {columns: 1 auto;}
    .xl_col2 {columns: 2 auto;}
    .xl_col3 {columns: 3 auto;}
    .xl_col4 {columns: 4 auto;}
    .xl_col5 {columns: 5 auto;}

    .box.xl_col1 > * {--columns: 1}
    .box.xl_col2 > * {--columns: 2}
    .box.xl_col3 > * {--columns: 3}
    .box.xl_col4 > * {--columns: 4}
    .box.xl_col5 > * {--columns: 5}

    .xl_gap0-5 {gap: var(--demi-espace)}
    .xl_gap {gap: var(--espace)}
    .xl_gap2 {gap: var(--double-espace)}
    .xl_gap3 {gap: var(--triple-espace)}

    .box.xl_gap0-5 > * {--gap: var(--demi-espace)}
    .box.xl_gap > * {--gap: var(--espace)}
    .box.xl_gap2 > * {--gap: var(--double-espace)}
    .box.xl_gap3 > * {--gap: var(--triple-espace)}

}