body{

margin:0;

background:#f6f8fb;

font-family:system-ui;

color:#333;

}
h1{

font-size:clamp(
32px,
5vw,
42px
);

margin-bottom:24px;

}

.welcome{

max-width:900px;

margin:auto;

padding:30px;

}


.intro{

text-align:center;

font-size:20px;

line-height:1.6;

max-width:700px;

margin:auto auto 30px;

}

.steps{

display:grid;

grid-template-columns:
1fr auto 1fr auto 1fr;

gap:12px;

align-items:center;

margin-bottom:30px;

}

.step{

background:white;

padding:24px;

border-radius:22px;

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

}

.icon{

font-size:46px;

}

.arrow{

font-size:36px;

text-align:center;

color:#999;

}

.card{

background:white;

padding:26px;

border-radius:22px;

margin-bottom:20px;

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

}

.card ul{

padding-left:20px;

line-height:2;

list-style:none;
    
}

.extras{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(220px,1fr)
);

gap:18px;

margin-top:30px;

}

.extra{

background:white;

padding:24px;

border-radius:22px;

text-align:center;

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

}

.big{

font-size:54px;

}

.start{

text-align:center;

margin-top:40px;

}

button{

border:none;

padding:
18px 34px;

font-size:20px;

font-weight:700;

border-radius:999px;

cursor:pointer;

color:white;

background:
linear-gradient(
135deg,
#7c3aed,
#ec4899
);

}

button:hover{

transform:scale(1.03);

}

@media (max-width:800px){

.steps{

grid-template-columns:1fr;

}

.arrow{

display:none;

}

}



/* téléphone */
@media (max-width:600px){

.grid{
gap:4px;
}

.fact{

font-size:11px;

border-radius:8px;

}

}
/* isolation de la page Commencer */

.welcome h1{

font-size:clamp(
32px,
5vw,
42px
);

margin-bottom:24px;

}

.welcome h2{

font-size:clamp(
20px,
2.5vw,
28px
);

line-height:1.2;

margin:
0 0 12px;

}

.welcome h3{

font-size:clamp(
18px,
2vw,
22px
);

margin:
12px 0;

}

.welcome p{

font-size:16px;

line-height:1.7;

}

.welcome ul{

font-size:16px;

}

.welcome button{

font-size:20px;

}

.bottom-navigation {
    display: flex;

    justify-content: center;

    margin: 35px 0 20px;
}

.back-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 180px;
    min-height: 48px;

    padding: 0 25px;

    border-radius: 10px;

    background: #0c1d33;

    border: 1px solid #367da9;

    color: #bfe8ff;

    text-decoration: none;

    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.back-button:hover {
    background: #12365a;
    transform: translateY(-2px);
}


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

footer {
    text-align: center;

    color: #607b96;

    font-size: 12px;

    padding-top: 10px;
}
.step,
.extra {
    display: block;
    color: inherit;
    text-decoration: none;

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

.step:hover,
.extra:hover {
    transform: translateY(-5px);

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

.step:hover h2,
.extra:hover h3 {
    color: #2878d8;
}

.step::after,
.extra::after {
    content: "→";

    display: inline-block;

    margin-top: 8px;

    font-size: 20px;
    font-weight: 700;

    color: #2878d8;

    transition: transform 0.2s ease;
}

.step:hover::after,
.extra:hover::after {
    transform: translateX(5px);
}

.step p,
.extra p {
    color: #333;
}

.step h2,
.extra h3 {
    transition: color 0.2s ease;
}