/* ==========================================================
   EnVie
   Toutes nos idées, au même endroit.
   Styles principaux - Sprint 1
   ========================================================== */

/* ==========================================================
   Variables
   ========================================================== */

:root{

    --color-primary:#6FAFC4;
    --color-primary-dark:#4F92A8;

    --color-background:#F7F9FA;

    --color-card:#FFFFFF;

    --color-text:#2D3748;
    --color-text-light:#718096;

    --color-border:#E2E8F0;

    --shadow-small:0 2px 8px rgba(0,0,0,.05);

    --shadow-medium:0 8px 24px rgba(0,0,0,.08);

    --radius-small:12px;
    --radius-medium:20px;
    --radius-large:28px;

    --transition:.25s ease;

    --max-width:700px;

}


/* ==========================================================
   Reset
   ========================================================== */

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

html{
    font-size:16px;
}

body{

    background:var(--color-background);

    color:var(--color-text);

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

    min-height:100vh;

    display:flex;
    flex-direction:column;

}


/* ==========================================================
   Layout
   ========================================================== */

main{

    width:min(100%,var(--max-width));

    margin:auto;

    padding:20px;

}


/* ==========================================================
   Header
   ========================================================== */

.header{

    text-align:center;

    padding:60px 20px 30px;

}

.logo{

    font-size:72px;

    margin-bottom:12px;

}

.header h1{

    font-size:42px;

    font-weight:700;

    letter-spacing:-1px;

}

.header p{

    margin-top:12px;

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

    line-height:1.6;

    font-size:18px;

}


/* ==========================================================
   Bouton principal
   ========================================================== */

.mainButton{

    width:100%;

    border:none;

    cursor:pointer;

    background:var(--color-primary);

    color:white;

    border-radius:24px;

    padding:22px;

    font-size:22px;

    font-weight:600;

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

    transition:var(--transition);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:20px 0 30px;

}

.mainButton:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);

}

.mainButton:active{

    transform:scale(.98);

}

.emoji{

    font-size:28px;

}


/* ==========================================================
   Carte
   ========================================================== */

.card{

    background:var(--color-card);

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

    padding:24px;

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

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

}

.card h2{

    margin-bottom:12px;

    font-size:24px;

}

.card p{

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

    line-height:1.7;

}


/* ==========================================================
   Responsive iPhone
   ========================================================== */

@media(max-width:600px){

.header{

padding-top:48px;

}

.logo{

font-size:60px;

}

.header h1{

font-size:36px;

}

.mainButton{

font-size:20px;

padding:20px;

}

.card{

padding:20px;

}

}