/* ======================================== */
/* APP METIER TOITURE */
/* Mobile first */
/* ======================================== */

:root{

    --color-bg:#f5f5f3;
    --color-card:#ffffff;
    --color-text:#111111;
    --color-muted:#747474;
    --color-border:#e5e5e5;
    --color-border-dark:#c9c9c9;
    --color-primary:#111111;
    --color-primary-text:#ffffff;
    --color-danger:#c62828;

    --radius-small:12px;
    --radius-medium:16px;
    --radius-large:22px;

    --shadow-card:
        0 8px 30px rgba(0,0,0,.045);

    --shadow-active:
        0 12px 30px rgba(0,0,0,.15);

    --app-width:720px;

    --transition-fast:.18s ease;
    --transition-base:.25s ease;

}


/* ======================================== */
/* RESET */
/* ======================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    min-height:100%;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    min-height:100vh;

    margin:0;

    background:var(--color-bg);

    color:var(--color-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size:16px;

    line-height:1.5;

    -webkit-font-smoothing:antialiased;

}

button,
input,
select,
textarea{

    font:inherit;

}

button{

    color:inherit;

}

button,
label,
input[type="range"],
input[type="radio"],
input[type="checkbox"]{

    -webkit-tap-highlight-color:transparent;

}

svg{

    display:block;

}

[hidden]{

    display:none !important;

}


/* ======================================== */
/* ACCESSIBILITE */
/* ======================================== */

.sr-only{

    position:absolute !important;

    width:1px !important;

    height:1px !important;

    padding:0 !important;

    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;

    white-space:nowrap !important;

    border:0 !important;

}

.required{

    color:var(--color-danger);

}


/* ======================================== */
/* APPLICATION */
/* ======================================== */

.app-shell{

    min-height:100vh;

}

.app-main{

    width:100%;

    max-width:var(--app-width);

    margin:0 auto;

    padding:
        24px
        16px
        calc(120px + env(safe-area-inset-bottom));

}


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

.app-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.94);

    border-bottom:1px solid var(--color-border);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}

.app-header-inner{

    width:100%;

    max-width:var(--app-width);

    margin:0 auto;

    padding:
        calc(12px + env(safe-area-inset-top))
        16px
        12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

}

.app-header-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.app-brand{

    min-width:0;

    display:flex;

    align-items:center;

    gap:11px;

}

.app-brand-icon{

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-primary);

    color:var(--color-primary-text);

    border-radius:13px;

}

.app-brand-icon svg{

    width:24px;

    height:24px;

}

.app-brand-content{

    min-width:0;

    display:flex;

    flex-direction:column;

}

.app-brand-title{

    font-size:15px;

    font-weight:800;

    line-height:1.25;

}

.app-brand-subtitle{

    margin-top:2px;

    color:var(--color-muted);

    font-size:11px;

    line-height:1.3;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.app-header-action{

    width:44px;

    height:44px;

    flex:0 0 44px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:14px;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);

}

.app-header-action:active{

    transform:scale(.94);

}

.app-header-action svg{

    width:21px;

    height:21px;

}


/* ======================================== */
/* PROGRESSION */
/* ======================================== */

.app-progress{

    width:100%;

    max-width:var(--app-width);

    margin:0 auto;

    padding:0 16px 12px;

}

.app-progress-info{

    margin-bottom:7px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    font-size:11px;

    font-weight:700;

}

#step-label{

    color:var(--color-text);

}

#step-progress-text{

    min-width:0;

    color:var(--color-muted);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.app-progress-track{

    width:100%;

    height:5px;

    overflow:hidden;

    background:#ededed;

    border-radius:999px;

}

.app-progress-bar{

    display:block;

    width:12.5%;

    height:100%;

    background:var(--color-primary);

    border-radius:inherit;

    transition:width .35s ease;

}


/* ======================================== */
/* ETAPES */
/* ======================================== */

.app-step{

    animation:stepEnter .25s ease both;

}

@keyframes stepEnter{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.step-heading{

    margin-bottom:22px;

}

.step-kicker{

    display:block;

    margin-bottom:5px;

    color:var(--color-muted);

    font-size:11px;

    font-weight:800;

    letter-spacing:.09em;

    text-transform:uppercase;

}

.step-heading h1{

    margin:0;

    font-size:29px;

    font-weight:850;

    line-height:1.12;

    letter-spacing:-.035em;

}

.step-heading p{

    margin:8px 0 0;

    max-width:540px;

    color:var(--color-muted);

    font-size:14px;

    line-height:1.5;

}


/* ======================================== */
/* CARDS */
/* ======================================== */

.app-card{

    margin-bottom:16px;

    padding:20px;

    background:var(--color-card);

    border:1px solid var(--color-border);

    border-radius:var(--radius-large);

    box-shadow:var(--shadow-card);

}

.app-card-header{

    margin-bottom:20px;

    display:flex;

    align-items:center;

    gap:12px;

}

.app-card-icon{

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f2f2f2;

    border-radius:13px;

}

.app-card-icon svg{

    width:22px;

    height:22px;

}

.app-card-header h2{

    margin:0;

    font-size:18px;

    font-weight:800;

    line-height:1.25;

    letter-spacing:-.015em;

}

.app-card-header p{

    margin:2px 0 0;

    color:var(--color-muted);

    font-size:12px;

}


/* ======================================== */
/* FIELDS */
/* ======================================== */

.fields-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:0 12px;

}

.field{

    position:relative;

    min-width:0;

    margin-bottom:18px;

}

.field-full{

    grid-column:1 / -1;

}

.field label,
.field legend{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:750;

    line-height:1.35;

}

.field-help{

    margin:-3px 0 10px;

    color:var(--color-muted);

    font-size:12px;

}

.field input:not(
    [type="radio"]
):not(
    [type="checkbox"]
):not(
    [type="range"]
),
.field select,
.field textarea{

    width:100%;

    min-width:0;

    padding:14px;

    background:#fff;

    color:var(--color-text);

    border:2px solid var(--color-border);

    border-radius:var(--radius-medium);

    outline:none;

    font-size:16px;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}

.field textarea{

    min-height:100px;

    resize:vertical;

}

.field input::placeholder,
.field textarea::placeholder{

    color:#a0a0a0;

}

.field input:focus,
.field select:focus,
.field textarea:focus{

    border-color:var(--color-primary);

    box-shadow:
        0 0 0 4px rgba(17,17,17,.07);

}

.field select{

    appearance:none;

    -webkit-appearance:none;

    padding-right:42px;

    background-image:
        linear-gradient(45deg,transparent 50%,#111 50%),
        linear-gradient(135deg,#111 50%,transparent 50%);

    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 14px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:no-repeat;

}

.fieldset-reset{

    min-width:0;

    margin:0 0 18px;

    padding:0;

    border:0;

}


/* ======================================== */
/* SEGMENTED CONTROL */
/* ======================================== */

.segmented-control{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    padding:4px;

    background:#f0f0f0;

    border-radius:16px;

}

.segment-option{

    position:relative;

    margin:0 !important;

}

.segment-option input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.segment-option span{

    min-height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px 12px;

    border-radius:12px;

    color:var(--color-muted);

    font-size:14px;

    font-weight:750;

    cursor:pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);

}

.segment-option input:checked + span{

    background:#fff;

    color:var(--color-text);

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);

}


/* ======================================== */
/* CARTES TRAVAUX */
/* ======================================== */

.work-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:9px;

}

.work-card{

    position:relative;

    min-width:0;

    margin:0 !important;

}

.work-card input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.work-card-content{

    min-height:104px;

    padding:13px 6px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:9px;

    text-align:center;

    background:#fff;

    border:2px solid var(--color-border);

    border-radius:17px;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);

}

.work-card-content svg{

    width:32px;

    height:32px;

}

.work-card-content strong{

    max-width:100%;

    font-size:12px;

    line-height:1.25;

    overflow-wrap:anywhere;

}

.work-card input:checked + .work-card-content{

    background:var(--color-primary);

    color:var(--color-primary-text);

    border-color:var(--color-primary);

    box-shadow:var(--shadow-active);

}

.work-card:active .work-card-content{

    transform:scale(.96);

}


/* ======================================== */
/* RADIO CARDS */
/* ======================================== */

.radio-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:11px;

}

.radio-card{

    position:relative;

    min-width:0;

}

.radio-card input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.radio-card label{

    min-height:120px;

    margin:0;

    padding:15px 10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:9px;

    text-align:center;

    background:#fff;

    border:2px solid var(--color-border);

    border-radius:18px;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);

}

.radio-card.compact label{

    min-height:108px;

}

.radio-card label svg{

    width:42px;

    height:42px;

}

.radio-title{

    font-size:13px;

    font-weight:750;

    line-height:1.25;

}

.radio-card input:checked + label{

    background:var(--color-primary);

    color:var(--color-primary-text);

    border-color:var(--color-primary);

    box-shadow:var(--shadow-active);

}

.radio-card:active label{

    transform:scale(.97);

}


/* ======================================== */
/* RANGE */
/* ======================================== */

.range-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px 16px;

}

.range-field{

    min-width:0;

}

.range-field-full{

    margin-bottom:22px;

}

.range-header{

    margin-bottom:11px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

}

.range-header label{

    margin:0;

    font-size:14px;

    font-weight:750;

}

.range-header output{

    flex:0 0 auto;

    padding:5px 9px;

    background:#f1f1f1;

    border-radius:9px;

    font-size:13px;

    white-space:nowrap;

}

.range-header output strong{

    font-size:15px;

}

.range-field input[type="range"]{

    width:100%;

    height:24px;

    margin:0;

    appearance:none;

    -webkit-appearance:none;

    background:transparent;

    cursor:pointer;

}

.range-field input[type="range"]::-webkit-slider-runnable-track{

    width:100%;

    height:6px;

    background:#dedede;

    border-radius:999px;

}

.range-field input[type="range"]::-webkit-slider-thumb{

    width:25px;

    height:25px;

    margin-top:-9.5px;

    appearance:none;

    -webkit-appearance:none;

    background:var(--color-primary);

    border:4px solid #fff;

    border-radius:50%;

    box-shadow:
        0 2px 8px rgba(0,0,0,.25);

}

.range-field input[type="range"]::-moz-range-track{

    height:6px;

    background:#dedede;

    border-radius:999px;

}

.range-field input[type="range"]::-moz-range-thumb{

    width:18px;

    height:18px;

    background:var(--color-primary);

    border:4px solid #fff;

    border-radius:50%;

    box-shadow:
        0 2px 8px rgba(0,0,0,.25);

}

.range-scale{

    margin-top:3px;

    display:flex;

    justify-content:space-between;

    gap:10px;

    color:var(--color-muted);

    font-size:10px;

}

.range-grid-field{

    margin:0;

}


/* ======================================== */
/* ACCESS LEVEL */
/* ======================================== */

.access-level{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    padding:4px;

    background:#f0f0f0;

    border-radius:16px;

}

.access-level label{

    position:relative;

    margin:0;

}

.access-level input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.access-level span{

    min-height:46px;

    padding:8px 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--color-muted);

    border-radius:12px;

    font-size:12px;

    font-weight:750;

    text-align:center;

    cursor:pointer;

}

.access-level input:checked + span{

    background:#fff;

    color:var(--color-text);

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);

}


/* ======================================== */
/* TOGGLE CARDS */
/* ======================================== */

.toggle-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:9px;

}

.toggle-card{

    position:relative;

    min-width:0;

    margin:0 !important;

}

.toggle-card input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.toggle-card span{

    min-height:52px;

    padding:9px 8px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    border:2px solid var(--color-border);

    border-radius:14px;

    font-size:12px;

    font-weight:700;

    line-height:1.25;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);

}

.toggle-card input:checked + span{

    background:var(--color-primary);

    color:var(--color-primary-text);

    border-color:var(--color-primary);

}

.toggle-card:active span{

    transform:scale(.97);

}


/* ======================================== */
/* COUNTERS */
/* ======================================== */

.counter-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px 12px;

}

.counter-field{

    min-width:0;

}

.counter-field-full{

    grid-column:1 / -1;

}

.counter-field > label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:750;

}

.counter{

    height:52px;

    display:grid;

    grid-template-columns:48px minmax(0,1fr) 48px;

    overflow:hidden;

    background:#fff;

    border:2px solid var(--color-border);

    border-radius:15px;

}

.counter button{

    padding:0;

    background:#f4f4f4;

    border:0;

    font-size:24px;

    font-weight:500;

    cursor:pointer;

    touch-action:manipulation;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);

}

.counter button:active{

    background:#e5e5e5;

    transform:scale(.92);

}

.counter input{

    width:100%;

    min-width:0;

    padding:0 4px;

    background:#fff;

    border:0;

    outline:none;

    text-align:center;

    font-size:18px;

    font-weight:800;

    appearance:textfield;

    -moz-appearance:textfield;

}

.counter input::-webkit-inner-spin-button,
.counter input::-webkit-outer-spin-button{

    margin:0;

    appearance:none;

    -webkit-appearance:none;

}


/* ======================================== */
/* NAVIGATION */
/* ======================================== */

.app-navigation{

    position:fixed;

    right:0;

    bottom:0;

    left:0;

    z-index:900;

    width:100%;

    max-width:var(--app-width);

    margin:0 auto;

    padding:
        12px
        16px
        calc(12px + env(safe-area-inset-bottom));

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    background:
        linear-gradient(
            to top,
            #f5f5f3 72%,
            rgba(245,245,243,0)
        );

}

.app-button{

    min-height:54px;

    padding:12px 19px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:0;

    border-radius:16px;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

    touch-action:manipulation;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        opacity var(--transition-fast);

}

.app-button svg{

    width:19px;

    height:19px;

}

.app-button:active{

    transform:scale(.96);

}

.app-button-primary{

    min-width:145px;

    background:var(--color-primary);

    color:var(--color-primary-text);

    box-shadow:
        0 10px 25px rgba(0,0,0,.17);

}

.app-button-secondary{

    background:#fff;

    color:var(--color-text);

    border:1px solid var(--color-border);

}


/* ======================================== */
/* FOCUS */
/* ======================================== */

input[type="radio"]:focus-visible + span,
input[type="checkbox"]:focus-visible + span,
.radio-card input:focus-visible + label{

    outline:3px solid rgba(17,17,17,.25);

    outline-offset:3px;

}

button:focus-visible{

    outline:3px solid rgba(17,17,17,.25);

    outline-offset:3px;

}


/* ======================================== */
/* TABLETTE / DESKTOP */
/* ======================================== */

@media(min-width:769px){

    .app-main{

        padding-top:36px;

    }

    .app-card{

        padding:26px;

    }

    .step-heading h1{

        font-size:34px;

    }

    .radio-grid{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

    }

    .radio-card.compact label{

        min-height:130px;

    }

    .work-card-content{

        min-height:125px;

    }

    .work-card-content svg{

        width:40px;

        height:40px;

    }

    .work-card-content strong{

        font-size:14px;

    }

}


/* ======================================== */
/* PETITS MOBILES */
/* ======================================== */

@media(max-width:390px){

    .app-main{

        padding-right:12px;

        padding-left:12px;

    }

    .app-header-inner,
    .app-progress{

        padding-right:12px;

        padding-left:12px;

    }

    .app-card{

        padding:17px;

        border-radius:19px;

    }

    .step-heading h1{

        font-size:27px;

    }

    .app-brand-subtitle{

        max-width:205px;

    }

    .fields-grid{

        gap:0 9px;

    }

    .field input:not(
        [type="radio"]
    ):not(
        [type="checkbox"]
    ):not(
        [type="range"]
    ),
    .field select,
    .field textarea{

        padding:12px;

    }

    .work-grid{

        gap:7px;

    }

    .work-card-content{

        min-height:96px;

        padding:10px 4px;

    }

    .work-card-content svg{

        width:29px;

        height:29px;

    }

    .work-card-content strong{

        font-size:11px;

    }

    .range-grid{

        gap:18px 12px;

    }

}


/* ======================================== */
/* TRES PETITS ECRANS */
/* ======================================== */

@media(max-width:340px){

    .fields-grid,
    .range-grid{

        grid-template-columns:1fr;

    }

    .field-full{

        grid-column:auto;

    }

    .work-grid{

        grid-template-columns:1fr;

    }

    .work-card-content{

        min-height:68px;

        flex-direction:row;

    }

    .radio-grid{

        grid-template-columns:1fr;

    }

    .radio-card.compact label{

        min-height:80px;

    }

    .counter-grid{

        grid-template-columns:1fr;

    }

    .counter-field-full{

        grid-column:auto;

    }

}


/* ======================================== */
/* REDUCED MOTION */
/* ======================================== */

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}

/* ======================================== */
/* ETAPE 6 - PHOTOS */
/* ======================================== */

.photo-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.photo-grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.photo-card{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.photo-upload{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-height:165px;

    padding:22px;

    border:2px dashed var(--color-border);

    border-radius:22px;

    background:#fafafa;

    cursor:pointer;

    transition:
        background .25s,
        border-color .25s,
        transform .25s,
        box-shadow .25s;

}

.photo-upload:hover{

    background:#fff;

    border-color:var(--color-primary);

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);

}

.photo-upload:active{

    transform:scale(.98);

}

.photo-icon{

    font-size:46px;

    line-height:1;

}

.photo-title{

    font-size:18px;

    font-weight:700;

    color:var(--color-text);

}

.photo-text{

    font-size:14px;

    color:var(--color-text-light);

    text-align:center;

}

.photo-preview{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(95px,1fr));

    gap:12px;

    min-height:12px;

}

.photo-preview img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:16px;

    border:2px solid var(--color-border);

    background:#fff;

    box-shadow:
        0 8px 20px rgba(0,0,0,.06);

    transition:
        transform .25s,
        box-shadow .25s;

}

.photo-preview img:hover{

    transform:scale(1.03);

    box-shadow:
        0 15px 30px rgba(0,0,0,.12);

}

.photo-empty{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:90px;

    border:2px dashed var(--color-border);

    border-radius:18px;

    color:var(--color-text-light);

    font-size:14px;

    background:#fcfcfc;

}

.photo-thumb{

    position:relative;

}

.photo-thumb img{

    display:block;

}

.photo-remove{

    position:absolute;

    top:6px;

    right:6px;

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.75);

    color:#fff;

    font-size:15px;

    cursor:pointer;

}

.photo-remove:hover{

    background:#d32f2f;

}


/* ======================================== */
/* TABLETTE */
/* ======================================== */

@media(min-width:769px){

    .photo-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .photo-grid-2{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}


/* ======================================== */
/* MOBILE */
/* ======================================== */

@media(max-width:768px){

    .photo-grid-2{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .photo-upload{

        min-height:135px;

        padding:18px;

    }

    .photo-icon{

        font-size:38px;

    }

    .photo-title{

        font-size:16px;

    }

}


/* ======================================== */
/* PETITS MOBILES */
/* ======================================== */

@media(max-width:390px){

    .photo-grid-2{

        grid-template-columns:1fr;

    }

    .photo-upload{

        min-height:120px;

    }

    .photo-icon{

        font-size:34px;

    }

}