/* ========================================================================== Base : remise à zéro, typographie, utilitaires ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 16px); } /* Verrou de défilement quand le menu est ouvert : posé sur pour qu'iOS le respecte. */ html.est-bloque, body.est-bloque { overflow: hidden; } body { margin: 0; font-family: var(--police); font-size: 17px; line-height: 1.6; color: var(--encre); background: var(--blanc); text-rendering: optimizeLegibility; } [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--bleu); text-underline-offset: .18em; } a:hover { color: var(--bleu-fonce); } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--bleu); text-wrap: balance; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } h3 { font-size: 1.35rem; letter-spacing: -.01em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.2em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--mandarine); outline-offset: 3px; border-radius: 4px; } main:focus { outline: none; } ::selection { background: var(--sable); color: var(--bleu-fonce); } .conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); } .section { padding-block: var(--espace-section); } .section-sable { background: var(--sable-clair); } .visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ins { white-space: nowrap; } .texte-large { font-size: 1.15rem; line-height: 1.65; max-width: 62ch; } .mesure > * { max-width: 760px; } .evitement { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--bleu); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; } .evitement:focus { top: 12px; color: #fff; } /* Apparition discrète des sections, une seule fois, et jamais si l'utilisateur limite les animations. */ .js .apparait { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .js .apparait.est-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .apparait { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }