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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #202020;

    background:
        #f4f4f4;
}


button,
textarea,
select,
input {
    font: inherit;
}


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

.header {
    width: 100%;

    padding:
        clamp(2.5rem, 6vw, 6rem)
        min(5rem, 8%);

    text-align: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #111111,
            #292929
        );
}


.header__content {
    width: min(100%, 75rem);

    margin-inline: auto;
}


.header h1 {
    margin:
        0
        0
        1rem;

    font-size:
        clamp(2rem, 5vw, 4.5rem);

    line-height: 1.05;
}


.header p {
    margin: 0;

    font-size:
        clamp(1rem, 1.6vw, 1.3rem);

    color: #d6d6d6;
}


/* ==============================
   MAIN
================================ */

main {
    width: min(100%, 90rem);

    margin-inline: auto;

    padding:
        clamp(2rem, 5vw, 5rem)
        min(5rem, 8%);
}


/* ==============================
   GENERATEUR
================================ */

.qr-generator {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 25rem), 1fr)
        );

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: start;
}


.qr-generator__form,
.qr-generator__preview {
    background: #ffffff;

    padding:
        clamp(1.5rem, 4vw, 3rem);

    box-shadow:
        0
        1rem
        3rem
        rgb(0 0 0 / 8%);
}


.qr-generator h2 {
    margin:
        0
        0
        2rem;

    font-size:
        clamp(1.5rem, 2.5vw, 2.4rem);
}


/* ==============================
   FORMULAIRE
================================ */

.field {
    display: flex;

    flex-direction: column;

    gap: 0.7rem;

    margin-bottom: 1.5rem;
}


.field label {
    font-weight: 700;

    font-size:
        clamp(0.95rem, 1.2vw, 1.05rem);
}


textarea {
    width: 100%;

    min-height: clamp(6rem, 10vw, 8rem);
    max-height: 14rem;

    padding: 1rem 1.1rem;

    resize: vertical;

    border: 0.08rem solid #d8d8d8;

    background: #fafafa;

    color: #202020;

    font-size: clamp(0.9rem, 1vw, 1rem);

    line-height: 1.5;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


textarea::placeholder {
    color: #9a9a9a;

    font-size: clamp(0.78rem, 0.9vw, 0.9rem);

    line-height: 1.45;

    opacity: 1;
}


textarea:hover {
    border-color: #bdbdbd;
}


textarea:focus {
    border-color: #202020;

    background: #ffffff;

    box-shadow:
        0 0 0 0.18rem rgb(0 0 0 / 6%);
}

select {
    min-height: 3.5rem;

    padding:
        0.5rem
        1rem;
}


textarea:focus,
select:focus {
    border-color: #111111;

    box-shadow:
        0
        0
        0
        0.2rem
        rgb(0 0 0 / 8%);
}


.field__info {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    font-size: 0.85rem;

    color: #777777;
}


/* ==============================
   OPTIONS
================================ */

.options {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 10rem), 1fr)
        );

    gap: 1.2rem;
}


input[type="color"] {
    width: 100%;

    height: 3.5rem;

    border:
        0.1rem
        solid
        #d3d3d3;

    background: #ffffff;

    cursor: pointer;
}


/* ==============================
   BOUTONS
================================ */

.buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem;
}


.button {
    min-height: 3.5rem;

    padding:
        0.8rem
        clamp(1.2rem, 3vw, 2rem);

    border: none;

    cursor: pointer;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background-color 0.2s ease;
}


.button:hover:not(:disabled) {
    transform:
        translateY(-0.15rem);
}


.button:active:not(:disabled) {
    transform:
        translateY(0);
}


.button--primary {
    color: #ffffff;

    background: #111111;
}


.button--primary:hover {
    background: #333333;
}


.button--secondary {
    color: #202020;

    background: #e5e5e5;
}


.button--download {
    width: 100%;

    margin-top: 1.5rem;

    color: #ffffff;

    background: #157347;
}


.button:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* ==============================
   QR CODE
================================ */

.qr-generator__preview {
    text-align: center;
}


.qr-wrapper {
    display: grid;

    place-items: center;

    width: 100%;

    min-height:
        clamp(18rem, 35vw, 32rem);

    padding:
        clamp(1rem, 3vw, 2rem);

    background: #f2f2f2;

    overflow: hidden;
}


#qrcode {
    display: none;

    width: min(100%, 32rem);

    margin-inline: auto;
}


#qrcode img,
#qrcode canvas {
    display: block;

    width: 100% !important;

    height: auto !important;

    margin-inline: auto;
}


.qr-placeholder {
    color: #8c8c8c;
}


.qr-placeholder span {
    display: grid;

    place-items: center;

    width:
        clamp(5rem, 12vw, 8rem);

    aspect-ratio: 1;

    margin:
        0
        auto
        1rem;

    border:
        0.3rem
        solid
        #c7c7c7;

    font-size:
        clamp(2rem, 5vw, 4rem);

    font-weight: 900;
}


.qr-placeholder p {
    margin: 0;
}


/* ==============================
   MESSAGE
================================ */

.message {
    min-height: 1.5rem;

    margin:
        1.5rem
        0
        0;

    font-weight: 700;
}


.message--error {
    color: #b42318;
}


.message--success {
    color: #157347;
}


/* ==============================
   INFORMATIONS
================================ */

.information {
    margin-top:
        clamp(4rem, 8vw, 8rem);
}


.information > h2 {
    text-align: center;

    font-size:
        clamp(1.6rem, 3vw, 2.8rem);

    margin:
        0
        0
        3rem;
}


.information__grid {
    columns: 3 18rem;

    column-gap: 2rem;
}


.information article {
    break-inside: avoid;

    display: inline-block;

    width: 100%;

    margin:
        0
        0
        2rem;

    padding:
        clamp(1.5rem, 4vw, 2.5rem);

    background: #ffffff;

    box-shadow:
        0
        1rem
        3rem
        rgb(0 0 0 / 6%);
}


.information__icon {
    display: inline-grid;

    place-items: center;

    min-width: 4rem;

    min-height: 4rem;

    padding: 0.5rem;

    margin-bottom: 1rem;

    background: #111111;

    color: #ffffff;

    font-weight: 900;
}


.information h3 {
    margin:
        0
        0
        1rem;

    font-size:
        clamp(1.2rem, 2vw, 1.5rem);
}


.information p {
    margin: 0;

    line-height: 1.7;

    color: #666666;

    overflow-wrap: anywhere;
}


/* ==============================
   FOOTER
================================ */

footer {
    padding:
        2rem
        min(5rem, 8%);

    text-align: center;

    background: #111111;

    color: #bdbdbd;
}


footer p {
    margin: 0;
}


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

@media (max-width: 45rem) {

    main {
        padding:
            2rem
            min(2rem, 5%);
    }


    .qr-generator__form,
    .qr-generator__preview {
        padding:
            clamp(1.2rem, 5vw, 2rem);
    }


    .buttons {
        flex-direction: column;
    }


    .button {
        width: 100%;
    }


    .field__info {
        flex-direction: column;

        gap: 0.3rem;
    }

}
.qr-generator__form,
.qr-generator__preview {
    background: #ffffff;

    padding:
        clamp(1.5rem, 3vw, 2.5rem);

    border: 0.08rem solid #e7e7e7;

    box-shadow:
        0 0.8rem 2.5rem rgb(0 0 0 / 5%);
}


.qr-generator h2 {
    margin:
        0
        0
        0.5rem;

    font-size:
        clamp(1.4rem, 2vw, 2rem);

    font-weight: 700;

    letter-spacing: -0.02em;
}


.qr-generator__form > h2::after {
    content: "Saisissez le contenu à convertir en QR Code.";

    display: block;

    margin-top: 0.5rem;
    margin-bottom: 1.8rem;

    color: #777777;

    font-size: clamp(0.8rem, 0.9vw, 0.95rem);

    font-weight: 400;

    letter-spacing: normal;
}


.field {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    margin-bottom: 1.3rem;
}


.field label {
    color: #303030;

    font-weight: 600;

    font-size:
        clamp(0.85rem, 0.95vw, 0.95rem);
}


.field__info {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    color: #8a8a8a;

    font-size:
        clamp(0.72rem, 0.8vw, 0.8rem);
}

.button {
    min-height: 3rem;

    padding:
        0.7rem
        clamp(1.1rem, 2vw, 1.7rem);

    border: none;

    cursor: pointer;

    font-size: clamp(0.82rem, 0.9vw, 0.95rem);

    font-weight: 700;

    letter-spacing: 0.01em;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background-color 0.2s ease;
}