:root {
    color: #0e2a3f;
    background: #f6f8fa;
    font: 100% / 1.55 system-ui, sans-serif;
}
body { margin: 0; }
a { color: inherit; }
.conteneur { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.bandeau { background: #fff; border-bottom: 1px solid #dce4ea; }
.barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.barre nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.marque { font-weight: 900; font-size: 1.4rem; text-decoration: none; }
.bouton { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 1rem; border-radius: .65rem; border: 1px solid #bac8d3; background: #fff; font-weight: 700; text-decoration: none; }
.accent { background: #f8d40a; border-color: #f8d40a; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2rem, 7vw, 5rem); }
.etiquette { display: inline-block; border-radius: 2rem; padding: .3rem .75rem; background: #e5effa; font-weight: 700; }
h1 { margin-block: .35em; font-size: clamp(2rem, 5vw, 3.65rem); line-height: 1.08; }
h1 span { display: block; color: #8a5100; }
h2 { line-height: 1.18; }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 1.15rem; }
figcaption { display: grid; gap: .25rem; background: #fff; border-radius: .8rem; padding: 1rem; margin-top: .75rem; }
.section { padding-block: 1.5rem; }
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.etapes article { border-radius: 1rem; padding: 1.1rem; background: #e5effa; }
.etapes article:nth-child(2) { background: #fff1cf; }
.etapes article:nth-child(3) { background: #e7f4ed; }
.confiance { border-radius: 1rem; padding: clamp(1.5rem, 5vw, 3rem); background: #0e2a3f; color: #fff; }
@media (max-width: 700px) {
    .hero, .etapes { grid-template-columns: 1fr; }
    .barre nav { order: 1; width: 100%; }
}
details { margin-block: .75rem; padding: .75rem 1rem; border: 1px solid #dce4ea; border-radius: .65rem; background: #fff; }
summary { cursor: pointer; font-weight: 700; }
.formulaire-reseau { display: grid; gap: .65rem; max-width: 40rem; }
.formulaire-reseau textarea, .formulaire-reseau select { font: inherit; }
.formulaire-reseau .bouton { justify-self: start; }
.texte-reseau { white-space: pre-wrap; overflow-wrap: anywhere; }
.formulaire-reseau input {
    font: inherit;
    padding: .65rem .8rem;
    border: 1px solid #bac8d3;
    border-radius: .65rem;
}