/* GOOD DOSE : feuille de style principale.
   Valeurs relevees dans Figma, frames Desktop - 1, Desktop - 2, iPhone 16 - 1, iPhone 16 - 2.

   Principe de fidelite : au dela de 1268 le conteneur est fige a 1204 et toutes
   les valeurs sont celles de la maquette, sans interpolation. Le rendu est donc
   identique a 1280 comme a 1920. Entre 900 et 1268 le conteneur retrecit et
   seules les tailles de titre s interpolent. En dessous de 900, layout mobile.

   Les variables prefixees --gd-cal sont les points de calage vertical : elles
   dependent des metriques reelles des polices et se reglent par superposition. */

/* Inter, licence SIL Open Font License, voir assets/fonts/inter-OFL.txt */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/inter-latin-variable.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: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/inter-latin-ext-variable.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* Impact, Modesto Poster et Times ne sont pas declarees ici.

   Ces deux fichiers ne sont pas livres avec le theme, ils sont deposes a la
   main. Les declarer dans cette feuille les rendrait tributaires du dossier du
   theme, que WordPress efface a chaque mise a jour. Leur regle @font-face est
   donc construite par inc/assets.php, qui les cherche d abord dans le theme
   puis dans les televersements. Voir gooddose_hosted_fonts(). */

:root {
	/* Couleurs relevees */
	--gd-bg: #fbfaf7;
	--gd-ink: #000;
	--gd-yellow: #ffff6e;
	--gd-on-dark: #f5f5f5;
	--gd-muted: #777;
	--gd-placeholder: #b8b8b8;
	--gd-legal: #8b8477;
	--gd-rule: rgba(0, 0, 0, .15);
	--gd-error: #8f2417;

	/* Piles de polices. Une seule ligne a changer quand la licence est tranchee. */
	--gd-font-display: Impact, Haettenschweiler, "Impact Web", "Arial Narrow Bold", sans-serif;
	--gd-font-poster: "modesto-poster", "Modesto Poster", var(--gd-font-display);
	--gd-font-serif: Times, "Times New Roman", "Times Web", serif;
	--gd-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Gabarit mobile */
	--gd-shell: 321px;
	--gd-prose-shell: 345px;
	--gd-radius: 4px;

	/* Surlignage jaune. Valeurs en em pour suivre la taille du titre, y compris
	   dans la plage ou elle est interpolee. Relevees dans la maquette :
	   bande de 15 sur un titre de 24 en mobile, de 40 sur 50 en desktop. */
	--gd-mark-height: .625em;
	--gd-mark-shift: -.075em;
	--gd-mark-lead: 0em;
	--gd-mark-overhang: .08em;

	/* Calage vertical, a affiner par superposition */
	--gd-cal-title-intro: 26px;
	--gd-cal-intro-form: 13px;
	--gd-cal-footer-top: 18px;

	/* Corps du texte legal en mobile, valeur du fichier Figma. */
	--gd-prose-size-mobile: 9px;
}

/* Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
	background: var(--gd-bg);
	color: var(--gd-ink);
	font-family: var(--gd-font-ui);
	font-size: 16px;
	line-height: 1.4;
	font-synthesis: none;
}

.gd-main {
	flex: 1 0 auto;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--gd-ink);
	outline-offset: 2px;
}

.gd-band :focus-visible {
	outline-color: var(--gd-yellow);
}

.gd-skip {
	position: absolute;
	left: -9999px;
}

.gd-skip:focus {
	left: 8px;
	top: 8px;
	z-index: 10;
	padding: 8px 12px;
	background: var(--gd-ink);
	color: var(--gd-yellow);
	text-decoration: none;
}

.gd-shell {
	width: var(--gd-shell);
	max-width: calc(100% - 48px);
	margin-inline: auto;
}

/* En-tete */

.gd-header__inner {
	padding-top: 22px;
	padding-bottom: 23px;
	border-bottom: 1px solid var(--gd-rule);
	display: flex;
	justify-content: center;
}

.gd-header__logo img {
	width: auto;
	height: 57px;
}

/* Repli tant que l export du logo manque : le nom reste lisible et cliquable,
   sans icone d image cassee. Disparait des que le fichier est depose. */
.gd-header__wordmark {
	font-family: var(--gd-font-display);
	font-size: 30px;
	line-height: 1;
	letter-spacing: .02em;
}

/* Accroche */

.gd-hero {
	padding-top: 45px;
	text-align: center;
}

.gd-hero__title {
	/* Le bloc deborde de 4px a gauche du conteneur, comme dans le fichier. */
	margin: 0 -4px 0 -4px;
	width: 329px;
	font-family: var(--gd-font-display);
	font-size: 24px;
	line-height: 1.01;
	font-weight: 400;
	letter-spacing: 0;
}

.gd-hero__line {
	display: block;
}

.gd-mark {
	background-color: transparent;
	/* Le calque LOGO_V2 est un aplat de #ffff6e, pas un trace dessine. Un
	   degrade a deux bornes identiques le reproduit au pixel pres, sans
	   requete, et suit n importe quelle longueur de texte. */
	background-image: linear-gradient(var(--gd-yellow), var(--gd-yellow));
	background-repeat: no-repeat;
	background-position: left calc(100% + var(--gd-mark-shift));
	background-size: 100% var(--gd-mark-height);
	color: inherit;
	/* La bande part du bord gauche du texte et le depasse a droite, comme dans
	   le fichier. La marge negative empeche ce debordement de peser sur le
	   retour a la ligne. */
	padding-inline: var(--gd-mark-lead) var(--gd-mark-overhang);
	margin-inline: calc(-1 * var(--gd-mark-lead)) calc(-1 * var(--gd-mark-overhang));
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.gd-hero__intro {
	margin: var(--gd-cal-title-intro) 6px 0 9px;
	max-width: 306px;
	font-family: var(--gd-font-serif);
	font-style: italic;
	font-size: 15px;
	letter-spacing: -.05em;
}

.gd-hero__figure {
	margin-top: 29px;
	display: flex;
	justify-content: center;
	transform: translateX(-3px);
}

.gd-hero__figure img {
	width: 217px;
	height: auto;
}

/* Formulaire */

.gd-form-zone {
	margin-top: var(--gd-cal-intro-form);
	width: 315px;
	max-width: 100%;
}

.gd-form__label,
.gd-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gd-form__row {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.gd-form__input {
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--gd-ink);
	border-radius: var(--gd-radius);
	background: #fff;
	color: var(--gd-ink);
	font-family: var(--gd-font-ui);
	font-size: 16px;
	text-align: center;
	transition: border-color 120ms ease;
}

.gd-form__input::placeholder {
	color: var(--gd-placeholder);
	opacity: 1;
}

/* Le focus porte un anneau noir pour le contraste et un halo jaune pour
   l identite. Le jaune seul sur le fond creme n atteindrait pas le rapport
   de contraste exige d un indicateur de focus. */
.gd-form__input:focus-visible,
.gd-form__check:focus-visible,
.gd-form__button:focus-visible {
	outline: 2px solid var(--gd-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(255, 255, 110, .55);
}

.gd-form__input[aria-invalid="true"] {
	border-color: var(--gd-error);
	border-width: 2px;
	padding: 0 9px;
}

/* Le remplissage automatique de Chrome repeint le champ en bleu.
   On lui impose le fond et la couleur du site. */
.gd-form__input:-webkit-autofill,
.gd-form__input:-webkit-autofill:hover {
	box-shadow: inset 0 0 0 1000px #fff;
	-webkit-text-fill-color: var(--gd-ink);
}

/* Le halo de focus doit survivre au remplissage automatique : les deux
   regles ecrivent box-shadow, il faut donc les combiner. */
.gd-form__input:-webkit-autofill:focus-visible {
	box-shadow: inset 0 0 0 1000px #fff, 0 0 0 6px rgba(255, 255, 110, .55);
	-webkit-text-fill-color: var(--gd-ink);
}

.gd-form__button {
	height: 32px;
	padding: 0 16px;
	border: 1px solid var(--gd-ink);
	border-radius: var(--gd-radius);
	background: var(--gd-ink);
	color: var(--gd-yellow);
	font-family: var(--gd-font-poster);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
}

/* Survol : le bouton s inverse et prend le jaune du surlignage.
   C est le seul geste ajoute, et il reprend celui de la maquette. */
.gd-form__button:hover {
	background: var(--gd-yellow);
	color: var(--gd-ink);
}

.gd-form__button:active {
	transform: translateY(1px);
}

.gd-form__button[disabled] {
	background: var(--gd-ink);
	color: var(--gd-yellow);
	opacity: .55;
	cursor: default;
	transform: none;
}

.gd-form__consent {
	margin-top: 20px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
}

/* La case garde ses 11 pixels de la maquette, mais sa zone cliquable est
   portee a 24, seuil minimal recommande pour une cible tactile. */
.gd-form__check-hit {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: -6px 0 0 -6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gd-form__check {
	width: 9px;
	height: 9px;
	margin: 0;
	appearance: none;
	border: 1px solid var(--gd-muted);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.gd-form__check-hit:hover .gd-form__check {
	border-color: var(--gd-ink);
}

.gd-form__check:checked {
	background: var(--gd-ink);
	border-color: var(--gd-ink);
}

.gd-form__check[aria-invalid="true"] {
	border-color: var(--gd-error);
}

.gd-form__consent-text,
.gd-form__consent-text p {
	margin: 0;
	color: var(--gd-muted);
	font-size: 12px;
	line-height: 1.35;
}

.gd-form__consent-text a {
	font-weight: 700;
	text-decoration: underline;
	transition: color 120ms ease;
}

.gd-form__consent-text a:hover {
	color: var(--gd-ink);
}

.gd-form__message {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.35;
	text-align: left;
}

.gd-form__message:empty {
	margin: 0;
}

.gd-form__message--error {
	color: var(--gd-error);
}

.gd-form__message--pending {
	color: var(--gd-muted);
}

.gd-form__noscript {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--gd-muted);
	text-align: left;
}

/* Confirmation. Elle remplace le formulaire au meme endroit et reprend le
   surlignage jaune : la page repond avec son propre geste. */

.gd-form__done:focus {
	outline: none;
}

.gd-form__done-title {
	margin: 0;
	font-family: var(--gd-font-display);
	font-size: 24px;
	line-height: 1.01;
}

.gd-form__done-text {
	margin: 14px 0 0;
	max-width: 306px;
	color: var(--gd-muted);
	font-size: 12px;
	line-height: 1.35;
}

/* Bandeau noir */

.gd-band {
	margin-top: 17px;
	padding: 35px 0 36px;
	background: var(--gd-ink);
	color: var(--gd-on-dark);
	text-align: center;
}

.gd-band__inner {
	width: var(--gd-shell);
	max-width: calc(100% - 48px);
	margin-inline: auto;
	display: grid;
	gap: 32px;
}

.gd-band__title {
	margin: 0;
	color: var(--gd-yellow);
	font-family: var(--gd-font-poster);
	font-size: 16px;
	line-height: 1.01;
	font-weight: 400;
}

.gd-band__text {
	margin: 10px auto 0;
	max-width: 311px;
	font-family: var(--gd-font-serif);
	font-size: 15px;
	line-height: .93375;
	letter-spacing: -.05em;
}

/* Pied de page. Le filet superieur n existe que hors page d accueil :
   sur la landing c est le bandeau noir qui fait la separation. */

.gd-footer {
	border-top: 1px solid var(--gd-rule);
}

.home .gd-footer {
	border-top: 0;
}

.gd-footer__inner {
	width: var(--gd-shell);
	max-width: calc(100% - 48px);
	margin-inline: auto;
	padding-top: var(--gd-cal-footer-top);
	padding-bottom: 24px;
	text-align: center;
}

.gd-footer__credit {
	margin: 0;
	color: var(--gd-muted);
	font-size: 12px;
}

.gd-footer__credit span {
	color: var(--gd-ink);
}

.gd-footer__links {
	margin-top: 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.gd-footer__menu,
.gd-footer__lang {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 34px;
}

.gd-footer__menu a,
.gd-footer__lang a {
	color: var(--gd-muted);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 120ms ease;
}

.gd-footer__menu a:hover,
.gd-footer__lang a:hover,
.gd-error__back a:hover,
.gd-prose__body a:hover {
	color: var(--gd-ink);
}

.gd-footer__legal {
	margin: 22px 0 0;
	color: var(--gd-legal);
	font-size: 11px;
	line-height: calc(16 / 11);
}

.gd-footer__legal span {
	display: block;
}

/* Reserve pour le bandeau de consentement.

   Le bandeau est fixe en bas de fenetre. Sans reserve, il recouvre en
   permanence le bas du document : arrive en fin de page, le visiteur ne peut
   jamais lire les mentions du pied de page, quel que soit son defilement. Il
   tronque aussi la seconde ligne de la mention de consentement du formulaire au
   premier ecran, mesure a 9711 pixels carres en 1440.

   La reserve ne s applique que tant que le bandeau est affiche : des qu il est
   ferme, la classe disparait et l espace avec elle. */

body:has(.cmplz-cookiebanner.cmplz-show) {
	padding-bottom: 300px;
}

/* Le seuil est 769 et non un palier de la maquette : c est celui de
   l extension, qui passe d une barre pleine largeur a une boite en coin a cette
   largeur exacte.

   769 et non 768. Mesure au pixel du 13/08/2026 : a 768 l extension sert encore
   une barre, et cette barre grandit de 265 a 283 entre 767 et 768. Un seuil
   pose a 768 retirait donc 40 pixels de reserve a l endroit precis ou la barre
   en gagnait 18, laissant un decouvert de 23. C est le genre d ecart qu un
   raisonnement sur les valeurs rondes ne trouve pas.

   Empreintes mesurees, decalage du bas compris : 282 en 393, 283 en 600, 265 en
   767, 283 en 768, 238 au-dela de 769. Les valeurs posees gardent une marge, la
   hauteur de la boite dependant de la longueur du texte, qui changera avec la
   version anglaise. */

@media (min-width: 769px) {
	body:has(.cmplz-cookiebanner.cmplz-show) {
		padding-bottom: 260px;
	}
}

/* Contenu editorial, page CGU */

.gd-prose {
	width: var(--gd-prose-shell);
	max-width: calc(100% - 48px);
	margin-inline: auto;
	padding-top: 20px;
	padding-bottom: 34px;
}

.gd-prose__title {
	/* Le bloc titre et son surlignage sont decales vers la droite dans le
	   fichier : 11,5px en mobile, 44,5px en desktop. Reproduit tel quel. */
	margin: 0 0 38px 23px;
	font-family: var(--gd-font-poster);
	font-size: 13px;
	line-height: 1.01;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
}

.gd-prose__title .gd-mark {
	--gd-mark-height: .77em;
	--gd-mark-shift: 0em;
	--gd-mark-lead: .38em;
	--gd-mark-overhang: .38em;
}

.gd-prose__body {
	color: var(--gd-muted);
	font-size: var(--gd-prose-size-mobile);
	line-height: 1.26;
	letter-spacing: -.05em;
}

.gd-prose__body > *:first-child {
	margin-top: 0;
}

.gd-prose__body h2,
.gd-prose__body h3 {
	margin: 30px 0 8px;
	color: var(--gd-ink);
	font-family: var(--gd-font-poster);
	font-size: 10px;
	line-height: 1.01;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
}

.gd-prose__body p {
	margin: 0 0 10px;
}

.gd-prose__body ul,
.gd-prose__body ol {
	margin: 0 0 10px;
	padding-left: 1.2em;
}

.gd-prose__body li {
	margin: 0;
}

.gd-prose__body strong {
	font-weight: 700;
}

.gd-prose__body a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Page d erreur. Meme echelle typographique que la hero, colonne centree. */

.gd-error {
	padding-top: 45px;
	padding-bottom: 40px;
	text-align: center;
}

.gd-error__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gd-error__eyebrow {
	margin: 0 0 14px;
	color: var(--gd-muted);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.gd-error__title {
	max-width: 329px;
}

.gd-error__text {
	margin-top: var(--gd-cal-title-intro);
	max-width: 306px;
}

.gd-error__form {
	width: 100%;
	max-width: 315px;
}

.gd-error__form .gd-form__done-text {
	margin-inline: auto;
}

.gd-error__back {
	margin: 24px 0 0;
	font-size: 12px;
}

.gd-error__back a {
	color: var(--gd-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 120ms ease;
}

.gd-error__figure {
	margin-top: 32px;
}

.gd-error__figure img {
	width: 217px;
	height: auto;
}

/* Palier tablette. Absent de la maquette, qui ne couvre que 393 et 1728.

   Il commence a 480 et non a 600 : les telephones les plus larges plafonnent a
   430 points, la mise en page mobile couvre donc tous les telephones, et
   au-dela la colonne devient fluide au lieu de rester figee a 321 pixels
   jusqu a 900. La typographie remonte en meme temps, les corps de la maquette
   mobile etant calibres pour un telephone.

   Le formulaire, lui, ne repasse en ligne qu a 600 : plus tot, la colonne est
   trop etroite et le champ email deviendrait plus court qu en mobile. */

@media (min-width: 480px) {
	:root {
		--gd-shell: min(620px, 100% - 64px);
		--gd-prose-shell: min(660px, 100% - 64px);
		--gd-prose-size-mobile: 12px;
	}

	.gd-hero {
		padding-top: 72px;
	}

	.gd-hero__title {
		width: auto;
		max-width: none;
		margin: 0;
		font-size: 32px;
	}

	.gd-hero__intro {
		margin: 32px auto 0;
		max-width: 520px;
		font-size: 18px;
	}

	.gd-form-zone {
		width: 315px;
		max-width: 100%;
		margin: 24px auto 0;
	}

	.gd-hero__figure {
		margin-top: 40px;
		transform: none;
	}

	.gd-hero__figure img {
		width: 300px;
	}

	.gd-band {
		margin-top: 0;
		padding: 56px 0 58px;
	}

	.gd-band__inner {
		gap: 40px;
	}

	.gd-band__title {
		font-size: 18px;
	}

	.gd-band__text {
		margin-top: 12px;
		max-width: none;
		font-size: 17px;
	}

	.gd-footer__inner {
		padding-top: 28px;
		padding-bottom: 32px;
	}

	.gd-prose {
		padding-top: 32px;
		padding-bottom: 40px;
	}

	.gd-prose__title {
		margin-left: 0;
		font-size: 16px;
	}

	.gd-prose__body h2,
	.gd-prose__body h3 {
		font-size: 14px;
	}

	.gd-error {
		padding-top: 72px;
	}

	.gd-error__title {
		max-width: 520px;
		margin-inline: auto;
	}

	.gd-error__form {
		max-width: 315px;
	}

	.gd-error__figure img {
		width: 300px;
	}
}

/* Le formulaire repasse en ligne. La largeur de la paire est calculee pour que
   le champ email ne retrecisse jamais quand la fenetre s elargit : 480 moins le
   bouton et l ecart donne 328, contre 315 en colonne, et 333 au palier
   desktop. */

@media (min-width: 600px) {
	.gd-form-zone {
		width: auto;
	}

	.gd-form__row {
		flex-direction: row;
		gap: 10px;
		max-width: 480px;
		margin-inline: auto;
	}

	.gd-form__input {
		flex: 1 1 auto;
		height: 42px;
		padding: 0 12px;
		text-align: left;
	}

	.gd-form__button {
		flex: 0 0 auto;
		min-width: 142px;
		height: 42px;
	}

	.gd-form__consent,
	.gd-form__message,
	.gd-form__noscript {
		max-width: 480px;
		margin-inline: auto;
	}

	.gd-error__form {
		max-width: 480px;
	}
}

/* Palier intermediaire : structure desktop, conteneur fluide */

@media (min-width: 900px) {
	:root {
		--gd-shell: min(1204px, 100% - 64px);
		--gd-prose-shell: min(889px, 100% - 64px);
		--gd-mark-height: .8em;
		--gd-mark-shift: .2em;
		--gd-mark-overhang: .74em;
	}

	.gd-shell,
	.gd-band__inner,
	.gd-footer__inner {
		width: var(--gd-shell);
		max-width: none;
	}

	.gd-prose {
		width: var(--gd-prose-shell);
		max-width: none;
	}

	.gd-header__inner {
		padding-top: 39px;
		padding-bottom: 27.07px;
	}

	.gd-header__logo img {
		height: 65.65px;
	}

	.gd-header__wordmark {
		font-size: 36px;
	}

	.gd-hero {
		padding-top: 116px;
		padding-bottom: 136px;
		text-align: left;
	}

	.gd-hero__inner {
		display: grid;
		/* Plancher de 300 sur la colonne de l illustration : sans lui, le ratio
		   792 sur 412 donne 286 pixels a 900, sous les 300 du palier precedent,
		   et la mascotte retrecissait quand la fenetre s elargissait. Le
		   plancher ne joue que de 900 a 940, ou le ratio reprend la main. */
		grid-template-columns: minmax(0, 792fr) minmax(300px, 412fr);
		align-items: start;
	}

	.gd-hero__content {
		padding-top: 14px;
	}

	.gd-hero__title {
		margin: 0;
		width: auto;
		max-width: 761px;
		font-size: clamp(32px, 4vw, 50px);
	}

	.gd-hero__intro {
		margin: 53px 0 0;
		max-width: 626px;
		font-size: clamp(19px, 1.9vw, 24px);
	}

	.gd-hero__figure {
		margin-top: 0;
		justify-content: flex-end;
		transform: none;
	}

	.gd-hero__figure img {
		width: 100%;
		max-width: 412px;
	}

	.gd-form-zone {
		margin-top: 42px;
	}

	.gd-form__row {
		flex-direction: row;
		gap: 10px;
		max-width: 485px;
	}

	.gd-form__input {
		flex: 1 1 auto;
		height: 49px;
		padding: 0 12px;
		text-align: left;
	}

	.gd-form__button {
		flex: 0 0 auto;
		min-width: 142px;
		height: 49px;
	}

	.gd-form-zone {
		width: auto;
	}

	.gd-form__check {
		width: 11px;
		height: 10px;
	}

	.gd-form__consent {
		margin-top: 19px;
	}

	.gd-form__consent-text,
	.gd-form__consent-text p,
	.gd-form__message,
	.gd-form__noscript,
	.gd-form__done-text {
		font-size: 13px;
	}

	.gd-form__input[aria-invalid="true"] {
		padding: 0 11px;
	}

	.gd-form__done-title {
		font-size: 32px;
	}

	.gd-form__done-text {
		max-width: 485px;
	}

	.gd-band {
		margin-top: 0;
		padding: 79px 0 78px;
	}

	.gd-band__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}

	.gd-band__title {
		margin-inline: auto;
		max-width: 391px;
		/* Le plancher reprend la valeur du palier precedent : sous 18, le
		   bandeau s ecrivait plus petit a 900 qu a 899. */
		font-size: clamp(18px, 1.6vw, 20px);
	}

	.gd-band__text {
		margin-top: 14px;
		max-width: 376px;
		font-size: clamp(17px, 1.6vw, 20px);
	}

	.gd-footer__inner {
		padding-top: 24px;
		padding-bottom: 49px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 32px;
		text-align: left;
	}

	.gd-footer__credit,
	.gd-footer__menu a,
	.gd-footer__lang a {
		font-size: 16px;
	}

	.gd-footer__links {
		margin-top: 0;
		gap: 32px;
	}

	.gd-footer__legal {
		margin: 0;
		font-size: 12.4px;
		line-height: 21.6px;
		text-align: right;
	}

	.gd-error {
		padding-top: 116px;
		padding-bottom: 96px;
	}

	.gd-error__title {
		margin-inline: auto;
		max-width: 900px;
		text-align: center;
	}

	.gd-error__text {
		margin-top: 32px;
		margin-inline: auto;
		max-width: 626px;
		text-align: center;
	}

	.gd-error__form {
		margin-top: 10px;
		max-width: 485px;
	}

	.gd-error__form .gd-form__consent,
	.gd-error__form .gd-form__message {
		text-align: left;
	}

	.gd-error__back {
		margin-top: 32px;
		font-size: 16px;
	}

	/* Pleine largeur pour servir de reference au pourcentage ci-dessous. Sans
	   elle, la figure se reduit a son contenu, le pourcentage se resout contre
	   sa propre largeur et le calcul devient circulaire. */
	.gd-error__figure {
		margin-top: 48px;
		width: 100%;
	}

	/* Meme calcul que sur l accueil : 34,22 % du conteneur, soit le rapport de
	   la colonne 412 sur 1204 de la maquette, avec plancher a 300 et plafond a
	   412. Une premiere version bornait sur la largeur de fenetre : les deux
	   illustrations avaient bien les memes valeurs aux extremes, mais celle de
	   la page d erreur etait plus grande entre les deux, la largeur de fenetre
	   incluant les gouttieres que le conteneur exclut. */
	.gd-error__figure img {
		width: max(300px, 34.22%);
		max-width: 412px;
		margin-inline: auto;
	}

	.gd-prose {
		padding-top: 49px;
		padding-bottom: 27px;
	}

	.gd-prose__title {
		margin-left: 89px;
		margin-bottom: 47px;
		font-size: 20px;
	}

	.gd-prose__title .gd-mark {
		--gd-mark-height: .95em;
		--gd-mark-shift: .5em;
		--gd-mark-lead: .5em;
		--gd-mark-overhang: .5em;
	}

	.gd-prose__body {
		font-size: 13px;
	}

	.gd-prose__body h2,
	.gd-prose__body h3 {
		margin-top: 36px;
		margin-bottom: 8px;
		font-size: 20px;
	}

	.gd-prose__body p,
	.gd-prose__body ul,
	.gd-prose__body ol {
		margin-bottom: 14px;
	}
}

/* Palier de reference : le conteneur est fige, plus aucune interpolation.
   Le rendu est identique de 1268 a l infini, donc conforme a la maquette. */

@media (min-width: 1268px) {
	.gd-hero__title {
		font-size: 50px;
	}

	.gd-hero__intro {
		font-size: 24px;
	}

	.gd-band__title,
	.gd-band__text {
		font-size: 20px;
	}

	.gd-footer__inner {
		width: min(1636px, 100% - 92px);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.gd-header,
	.gd-form-zone,
	.gd-hero__figure,
	.gd-footer__links {
		display: none;
	}

	body {
		background: #fff;
	}

	.gd-prose__body {
		color: #000;
		font-size: 11pt;
		letter-spacing: 0;
	}
}