/* BASE — remise à zéro, éléments HTML nus, classes utilitaires.
   .wrap .pad .bg-soft .rule .head .hl .ruled, échelle typographique .t-*.
   Aucun composant, aucune section : ce qui sert partout. */

/* ── Polices, auto-hébergées ──
   DM Sans et Hanken Grotesk sont des fontes variables : un seul fichier par
   sous-ensemble couvre toutes les graisses. latin-ext n'est téléchargé que si
   un caractère l'exige — pour un texte français, il ne part jamais. */
@font-face {
	font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('../fonts/dm-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Replis calibrés ──
   Le temps que la vraie police arrive, le texte est composé dans une police
   système ré-étalonnée sur les métriques mesurées de la police finale :
   même largeur moyenne, même hauteur de ligne. L'échange ne décale rien.
   Valeurs relevées dans Chromium sur un échantillon de la page. */
@font-face {
	font-family: 'Hanken Grotesk repli';
	src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
	size-adjust: 99.4%; ascent-override: 100.6%; descent-override: 30.5%; line-gap-override: 0%;
}
@font-face {
	font-family: 'DM Sans repli';
	src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
	size-adjust: 92.6%; ascent-override: 106.9%; descent-override: 33.5%; line-gap-override: 0%;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
/* Note : scrollbar-gutter: stable a été essayé puis retiré. La page défile
   toujours, la barre est donc présente dès le premier rendu et ne décale rien
   (décalage cumulé mesuré : 0). En contrepartie la propriété coûtait 15 px de
   largeur utile à toutes les tailles, ce qui aurait modifié la maquette. */
/* Le grain est un fond, pas un calque posé par-dessus : derrière le
   contenu il ne coûte rien, et il ne touche jamais au rendu du texte. */
body { font-family: 'Hanken Grotesk', 'Hanken Grotesk repli', system-ui, sans-serif; color: var(--ink);
	background-color: var(--bg); background-image: var(--grain); background-size: 150px 150px;
	font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (max-width: 560px) {
	body { font-size: 16px; }
}

::selection { background: var(--lime); color: var(--forest); }
img { display: block; max-width: 100%; }
/* <picture> n'est qu'un aiguillage de formats : il ne doit rien peser dans
   la mise en page, sinon chaque photo enveloppée décalerait son conteneur. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; border-radius: 4px; }

/* Évitement du menu. Invisible tant qu'on ne tabule pas : au clavier, la page
   commence par sept liens d'en-tête avant le moindre contenu, et il faut les
   repasser à chaque retour. Le lien ne se montre qu'au focus. */
.skip { position: fixed; top: 10px; left: 10px; z-index: 300; transform: translateY(-160%);
	background: var(--forest); color: #fff; font-size: .92rem; font-weight: 600;
	padding: 12px 18px; border-radius: var(--r-sm); box-shadow: var(--sh-3);
	transition: transform .2s var(--out); }
.skip:focus-visible { transform: translateY(0); }
h1,h2,h3,h4 { font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
/* Tous les titres, jusqu'aux intitulés de carte. Quand seuls les grands titres
   changeaient de police, on lisait deux sans-serif voisines dans la même
   section — une inconsistance, pas une hiérarchie. Celle-ci passe désormais
   par la taille et la graisse, pas par la famille. */
h1, h2, h3, h4, h5, .t-h3, .strip-photo q, .qb-in h2 {
	font-family: 'DM Sans', 'DM Sans repli', 'Hanken Grotesk', system-ui, sans-serif; font-weight: 700; }
h1,h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Calibré pour que le titre du hero tienne sur deux lignes dès 861 px :
   la colonne offre environ 11,9 fois la taille de police, la plus longue
   des deux lignes en demande 11,75. En dessous de cette taille, il repasse
   à trois lignes et le premier écran devient trop haut. */
.t-display { font-size: clamp(1.92rem, 3.85vw, 2.9rem); letter-spacing: -.02em; line-height: 1.09; }
.t-h2 { font-size: clamp(1.68rem, 2.9vw, 2.35rem); letter-spacing: -.02em; line-height: 1.14; }
.t-h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); letter-spacing: -.02em; }
.t-lead { font-size: clamp(1.02rem, 1.35vw, 1.12rem); line-height: 1.6; color: var(--muted); }
.t-body { font-size: 1rem; line-height: 1.65; color: var(--muted); }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.pad { padding-block: clamp(4.25rem, 7.5vw, 6.75rem); }
.bg-soft { background-color: var(--soft); background-image: var(--grain); background-size: 150px 150px; }
.rule { border-top: 1px solid var(--line); }

.head { max-width: 48rem; }
/* Les chapôs tenaient dans 39rem quand les titres en occupaient 45 : ils
   paraissaient tassés sous leur propre titre. Ils tirent maintenant presque
   toute la largeur du bloc, et perdent une ligne au passage. */
.head .t-lead { margin-top: 16px; max-width: 44rem; }
.hl { background-image: linear-gradient(transparent 60%, var(--wash) 60%, var(--wash) 93%, transparent 93%);
	background-repeat: no-repeat; background-size: 0% 100%;
	padding-inline: .06em; margin-inline: -.06em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	transition: background-size .8s var(--out) .16s; }
.in .hl, .done .hl { background-size: 100% 100%; }

/* Filets de bulletin : trame réglée, très légère, fondue en diagonale.
   Sur les deux sections où l'on énumère (la méthode, les prestations). */
.ruled { position: relative; }
.ruled > .wrap { position: relative; z-index: 1; }
.ruled::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: repeating-linear-gradient(to bottom, rgba(31,61,48,.022) 0 1px, transparent 1px 32px);
	-webkit-mask-image: linear-gradient(168deg, #000 0%, #000 38%, transparent 80%);
	mask-image: linear-gradient(168deg, #000 0%, #000 38%, transparent 80%); }