:root {
--papier: #f4f1ea;
--encre: #1c1915;
--secondaire: #3f3a33;
--accent: #0e4d5c;
--filet: #d9d2c5;
--lien: #0b3d4a;
--mesure: 38rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: "Segoe UI", system-ui, sans-serif;
font-size: 1.0625rem;
line-height: 1.5;
color: var(--encre);
background: var(--papier);
}
.conteneur {
width: min(100% - 2rem, 64rem);
margin-inline: auto;
}
.evitement {
position: absolute;
left: 0.5rem;
top: 0.5rem;
transform: translateY(-150%);
padding: 0.5rem 0.75rem;
background: var(--encre);
color: var(--papier);
text-decoration: none;
}
.evitement:focus {
transform: none;
z-index: 2;
}
.entete {
border-bottom: 1px solid var(--filet);
}
.entete__barre {
display: flex;
align-items: center;
min-height: 4.25rem;
}
.marque {
color: inherit;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
}
main {
flex: 1;
}
.accueil {
padding: clamp(3rem, 8vw, 6rem) 0;
}
.surtitre {
margin: 0 0 0.75rem;
color: var(--accent);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h1 {
margin: 0;
max-width: 14ch;
font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.03em;
}
.chapo {
max-width: var(--mesure);
margin: 1.25rem 0 0;
color: var(--secondaire);
font-size: 1.25rem;
line-height: 1.45;
}
.retour {
margin: 1.75rem 0 0;
}
a {
color: var(--lien);
}
.marque:hover,
.retour a:hover {
text-decoration: none;
}
.pied {
border-top: 1px solid var(--filet);
padding: 1.5rem 0 2rem;
color: var(--secondaire);
}
.pied p {
margin: 0;
}
.pied p + p {
margin-top: 0.25rem;
}
a:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media (max-width: 22rem) {
.conteneur {
width: min(100% - 1.5rem, 64rem);
}
}