/*
 * Éditions Samouraï : styles.
 * Principe : chaque écran est une « scène » de 1920 × 1080 px, cotée d'après les maquettes
 * de l'auteur, puis réduite d'un bloc à la taille de la fenêtre (variable --s, posée par site.js).
 * Elle n'est jamais agrandie : sur un écran plus grand, un gris neutre comble le reste.
 * Sous 900 px de large : version empilée.
 */

@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/CourierPrime-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/CourierPrime-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Montserrat (libre, hébergée ici) : le mot « classification » du diaporama, comme sur les maquettes. */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Thème clair seulement : empêche le mode sombre forcé des navigateurs (Samsung Internet, Chrome) d'inverser les couleurs (retour du 16/10). */
	color-scheme: only light;
	--s: 1;
	--noir: #1a1a1a;   /* #141414 de la maquette (Apple RGB) converti en sRGB */
	--gris: #989898;   /* #868686 */
	--taupe: #c0a396;  /* #b19183 */
	--jaune: #ec981e;  /* #e2840a */
	--orange-ui: #ec981e;
	--filet: rgba(0, 0, 0, .17); /* noir à 20 % de la maquette (Apple RGB) : 17 % une fois converti, mesuré sur ses JPG */
	--gris-fond: #808080; /* autour de la scène sur grand écran : gris neutre (50 %, sans dominante), à ajuster si l'auteur donne un code */
	--f-eaves: "mrs-eaves", "Mrs Eaves", Georgia, serif;
	--f-eaves-pc: "mrs-eaves-roman-petite-caps", "mrs-eaves", Georgia, serif;
	--f-myriad-c: "myriad-pro-cond", "Myriad Pro Condensed", "Arial Narrow", sans-serif;
	--f-myriad: "myriad-pro", "Myriad Pro", Arial, sans-serif;
	--f-courier: "Courier Prime", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
	background: #fff;
	color: var(--noir);
	font-family: var(--f-eaves);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Écran plein et scène ---------- */

.screen {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}
.screen__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	filter: blur(0);
	background-color: #f2f2f2;
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
}
.stage {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1920px;
	height: 1080px;
	transform: translate(-50%, -50%) scale(var(--s));
	pointer-events: none;
}
.stage > * { position: absolute; pointer-events: auto; }
.fond { left: 0; top: 0; width: 1920px; height: 1080px; background-size: 1920px 1080px; pointer-events: none; }

/* Ordinateur : rien ne dépasse de la scène, et le gris neutre comble ce qu'elle ne couvre pas. */
@media (min-width: 900px) {
	.screen { background: var(--gris-fond); }
	.screen__bg { display: none; }
	.stage { overflow: hidden; }
}

/* ---------- En-tête : logo, menu, Soutenir ---------- */

/* Fichier en double taille (304 × 114), affiché à sa taille de maquette ; 1 px plus bas que la maquette pour que les lettres se posent sur le filet (demande du 15/10). */
.logo { left: 429px; top: 94px; width: 152px; height: 57px; }
.logo img { width: 152px; height: 57px; }

.menu { left: 663px; top: 0; width: 573px; height: 151px; border-bottom: 1px solid var(--filet); z-index: 5; --menu-haut: 86px; }
/* Sur les pages intérieures, la maquette place les rubriques 3 px plus bas que sur l'accueil */
.page-livre .menu, .page-auteur .menu, .page-simple .menu, .page-404 .menu { --menu-haut: 89px; }
.menu > ul {
	list-style: none; margin: 0; padding: 0;
	position: absolute; left: -100px; right: -100px; top: var(--menu-haut);
	display: flex; justify-content: center; align-items: flex-start; gap: 0 54px;
}
/* Ligne de base commune : chaque rubrique s'aligne sur une cale de 18 px, donc le pied des lettres tombe
 * 18 px sous --menu-haut quels que soient la police (petites capitales ou Courier) et le navigateur
 * (Chrome et Firefox ne placent pas les petites capitales au même pixel dans leur ligne). */
.menu > ul > li { display: flex; align-items: baseline; }
.menu > ul > li::before { content: ""; width: 0; height: 18px; }
.menu > ul > li > a, .menu__parent > button {
	position: relative; display: inline-grid; align-items: baseline; justify-items: center;
	font-family: var(--f-eaves-pc);
	font-size: 20px;
	line-height: 22px;
	letter-spacing: 0.02em;
	color: var(--noir);
	white-space: nowrap;
	transition: opacity .2s;
}
.menu__parent > button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: top; }
/* Courier du survol : dans la même case que les petites capitales, sur la même ligne de base,
 * sans largeur propre (la place reste celle des petites capitales). */
.menu__pc, .menu__cr { grid-area: 1 / 1; }
.menu__cr { display: flex; justify-content: center; width: 0; white-space: nowrap; }
.menu__cr, .menu .is-active {
	font-family: var(--f-courier);
	font-style: italic;
	font-size: 15.5px;
	letter-spacing: 0;
}
.menu__cr { visibility: hidden; }
.menu a:hover .menu__pc, .menu a:focus-visible .menu__pc,
.menu__parent:hover .menu__pc, .menu__parent:focus-within .menu__pc, .menu__parent.is-open .menu__pc { visibility: hidden; }
.menu a:hover .menu__cr, .menu a:focus-visible .menu__cr,
.menu__parent:hover .menu__cr, .menu__parent:focus-within .menu__cr, .menu__parent.is-open .menu__cr { visibility: visible; }
.menu > ul > li > a:active { opacity: .6; }

/* Sous-menu « Livres » : la liste des titres, accrochée sous le filet, dans la Courier du survol. */
.menu__parent { position: relative; }
.sousmenu {
	position: absolute; left: 50%; top: calc(151px - var(--menu-haut)); transform: translateX(-50%);
	visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s;
}
.sousmenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(151px - var(--menu-haut) - 22px); } /* garde le survol entre « Livres » et la liste */
.menu__parent:hover .sousmenu, .menu__parent:focus-within .sousmenu, .menu__parent.is-open .sousmenu { visibility: visible; opacity: 1; }
.sousmenu ul {
	list-style: none; margin: 0; padding: 13px 20px 14px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--filet); border-top: 0;
	text-align: center;
}
.sousmenu li + li { margin-top: 7px; }
.sousmenu a {
	font-family: var(--f-courier);
	font-style: italic;
	font-size: 15.5px;
	line-height: 20px;
	color: var(--noir);
	white-space: nowrap;
	transition: color .15s;
}
.sousmenu a:hover, .sousmenu a:focus-visible { color: var(--orange-ui); }
.sousmenu a[aria-current] { color: var(--gris); }

.soutenir {
	left: 1330px; top: 96px; width: 134px; height: 43px;
	border: 2px solid rgba(236, 152, 30, .64); /* le cadre de son image du bouton est à 64 % d'opacité, le texte à 100 % */
	color: var(--orange-ui);
	font-family: var(--f-myriad-c);
	font-weight: 600;
	font-size: 18px;
	display: flex; align-items: center; justify-content: center;
	padding-bottom: 2px; /* texte 1 px au-dessus du centre, comme sur son image du bouton */
	transition: background-color .2s, border-color .2s, color .2s;
}
.soutenir:hover, .soutenir:focus-visible { background: var(--orange-ui); border-color: var(--orange-ui); color: #fff; }

/* ---------- Page livre et page auteur ---------- */

.cover {
	left: 507px; top: 298px; width: 318px; height: 519px;
	border: 1px solid rgba(0, 0, 0, .3);
	background: #fff;
}
.cover img { width: 316px; height: 517px; object-fit: cover; }

.calque {
	left: 843px; top: 298px; width: 547px; height: 519px;
	background: rgba(255, 255, 255, .75);
}
.calque > * { position: absolute; }
.calque__titre {
	left: 41px; top: 40px; margin: 0; /* 41 px : l'encre du « L » tombe sur celle du texte, comme sur les maquettes */
	font-family: var(--f-eaves-pc);
	font-weight: 400;
	font-size: 24px;
	line-height: 26px;
}
.calque__texte {
	left: 42px; top: 88px; width: 385px; height: 290px; /* 363 de texte, 16 d'air, 6 de barre */
	overflow-y: auto;
	padding-top: 2px;
	font-family: var(--f-eaves);
	font-size: 18px;
	line-height: 22px;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}
/* 363 px : la largeur qui redonne dans le navigateur les coupures de lignes de ses maquettes (360 px sous InDesign). */
.calque__texte > * { max-width: 363px; }
/* Barre de défilement fine, à distance du texte ; même largeur partout pour que les lignes ne bougent pas. */
.calque__texte::-webkit-scrollbar { width: 6px; }
.calque__texte::-webkit-scrollbar-track { background: transparent; }
.calque__texte::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .25); border-radius: 3px; }
@supports not selector(::-webkit-scrollbar) {
	.calque__texte { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; }
}
.calque__texte p { margin: 0; text-indent: 36px; }
.calque__infos {
	left: 43px; bottom: 53px; width: 460px;
	font-family: var(--f-eaves-pc);
	font-size: 22.4px;
	line-height: 29px;
	color: var(--taupe);
	letter-spacing: .03em;
}
.calque__infos p { margin: 0; white-space: nowrap; }
.calque__col {
	left: 404px; top: 0; width: 144px; height: 100%;
	display: block;
	pointer-events: none; /* la colonne recouvre la barre de défilement : elle laisse passer la souris */
}
.calque__col > * { pointer-events: auto; }
.calque__col > * { position: absolute; left: 0; width: 144px; text-align: center; }
.prix {
	top: 90px; margin: 0;
	font-family: var(--f-myriad-c);
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	color: var(--jaune);
}
.extrait { top: 318px; display: block; color: var(--jaune); }
.extrait img { width: 47px; height: 50px; margin: 0 auto; }
.extrait span {
	display: block; margin-top: 54px;
	font-family: var(--f-myriad-c);
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
}
.extrait:hover span, .extrait:focus-visible span { text-decoration: underline; }

.embleme-bleu { left: 272px; top: 495px; width: 120px; height: 120px; }
.embleme-bleu img { width: 120px; height: 120px; }

/* Page simple (mentions légales, 404) : un seul grand calque */
.calque--seul { left: 507px; width: 883px; background: rgba(255, 255, 255, .9); }
.calque--seul .calque__texte { width: 797px; height: 380px; text-align: left; hyphens: manual; }
.calque--seul .calque__texte > * { max-width: 775px; }
.calque--seul .calque__texte p { text-indent: 0; margin-bottom: 11px; }
.calque--seul .calque__texte h2,
.calque--seul .calque__texte h3 {
	font-family: var(--f-eaves-pc); font-weight: 400; font-size: 20px; line-height: 22px; margin: 18px 0 6px;
}
.calque--seul .calque__texte a { text-decoration: underline; }

/* ---------- Accueil : diaporama ---------- */

/* Mouvement de la référence choisie par l'auteur (CodePen « Pure CSS Bug ECommerce Interactions », Adam Kuhn),
 * mesuré sur la démo et rejoué par site.js, bloc par bloc :
 * la photo glisse vers la gauche, le bloc de couleur 1 descend (et remonte au retour au premier livre),
 * le bandeau du type monte par-dessus l'ancien, l'emblème sort par le haut et revient par le bas,
 * la couleur de droite monte, la couverture tombe, les caractéristiques se dévoilent.
 * Ici : seulement la position de repos de chaque bloc et les zones qui les rognent. */
.slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; }
.slide.is-active { visibility: visible; z-index: 2; }
.slide.is-leaving { visibility: visible; z-index: 1; }

.slide__fond { left: 0; top: 0; width: 1920px; height: 1080px; }
.slide__fond > *, .slide__fond > * > * { position: absolute; }
.slide__gauche { left: 0; top: 0; width: 960px; height: 1080px; overflow: hidden; }
.slide__photo { left: 0; top: 0; width: 960px; height: 1080px; background-size: cover; background-position: center; background-color: #222; }
.slide__c2 { left: 960px; top: 0; width: 960px; height: 1080px; background: var(--c2); }
.slide__bloc1 { left: 0; top: 0; width: 759px; height: 539px; overflow: hidden; }
.slide__c1 { left: 0; bottom: 0; width: 759px; height: 1080px; background: var(--c1); }

/* Ombre portée de la carte (maquettes et référence) : posée sous la carte, elle ne bouge pas. */
.carte-ombre { left: 557px; top: 237px; width: 806px; height: 605px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .45); pointer-events: none; }
.slide.is-leaving .carte-ombre { visibility: hidden; }

.papier {
	left: 557px; top: 237px; width: 403px; height: 605px;
	background: #f7f7f7 url("../img/papier-trame.jpg") center / 403px 605px;
}
.papier__type {
	position: absolute; left: 0; top: 0; width: 202px; height: 91px; margin: 0; overflow: hidden;
	background: var(--c2-dessous, var(--c2));
	color: #fff;
	font-family: var(--f-myriad-c);
	font-weight: 600;
	font-size: 25px;
	line-height: 91px;
	text-align: center;
	letter-spacing: .01em;
	text-transform: uppercase;
}
/* Bandeau du type : un voile de couleur glisse sur la couleur du dessous (site.js fixe les deux pendant le mouvement). */
.papier__voile { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--c2-voile, var(--c2)); }
.papier__type span { position: relative; }
.papier__classif {
	/* Centré en hauteur sur les caractéristiques, quelle que soit la largeur du mot (elle dépend de la police). */
	position: absolute; left: 50px; top: 335.5px;
	transform-origin: 0 0; transform: rotate(-90deg) translateX(-50%);
	font-family: "Montserrat", var(--f-myriad);
	font-weight: 700;
	font-size: 50px;
	line-height: 1;
	color: rgba(255, 255, 255, .35);
	-webkit-text-stroke: 1px #b8b8b8;
	letter-spacing: 0;
	white-space: nowrap;
	user-select: none;
}
.carac {
	position: absolute; left: 141px; top: 97px; right: 20px; bottom: 31px;
	display: flex; flex-direction: column; justify-content: center;
	margin: 0;
	font-family: var(--f-courier);
	font-size: 14.5px;
	line-height: 22px;
}
.carac div { margin: 0 0 22px; }
.carac div:last-child { margin-bottom: 0; }
.carac dt { color: var(--noir); }
.carac dd { margin: 0; color: var(--gris); font-style: italic; }

/* La couverture glisse dans son bloc : la zone la rogne (un masque animé se désynchronise du mouvement dans Chrome). */
/* Fond blanc : pendant le mouvement, si un liseré apparaît entre les deux couvertures, il est blanc, pas coloré. */
.couv-zone { left: 960px; top: 237px; width: 403px; height: 605px; overflow: hidden; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.08); }
.couv { position: absolute; left: 0; top: 0; width: 403px; height: 605px; background: #fff; }
.couv img { width: 403px; height: 605px; }

/* L'emblème glisse à chaque changement de livre, rogné par la carte comme l'insecte de la référence. */
.embleme-zone { left: 557px; top: 237px; width: 806px; height: 605px; overflow: hidden; z-index: 3; pointer-events: none !important; }
.embleme { position: absolute; left: 318px; top: 218px; width: 170px; height: 170px; pointer-events: none; }
.embleme img { width: 170px; height: 170px; }

.suivant {
	left: 1303px; top: 523px; width: 33px; height: 33px; z-index: 4;
	border: 0; padding: 0; background: none; cursor: pointer;
}
.suivant svg { width: 33px; height: 33px; display: block; transition: transform .25s; }
.suivant:hover svg, .suivant:focus-visible svg { transform: scale(1.12); }

.slider .menu { z-index: 5; }
.stage--ui { z-index: 5; }

/* ---------- Bouton menu mobile ---------- */
.burger, .menu__accueil { display: none; }

/* ---------- Version empilée (téléphone, petite tablette) ----------
 * Pas de maquette téléphone (convenu au devis) : les blocs se placent les uns sous les autres,
 * avec les mêmes polices, couleurs et images. */
@media (max-width: 899px) {
	body.has-stage { overflow-y: auto; }
	.screen { position: relative; top: auto; right: auto; bottom: auto; left: auto; overflow: visible; min-height: 100vh; min-height: 100svh; }
	.screen__bg { position: fixed; background-position: center; }
	.fond, .embleme-bleu, .embleme-zone, .carte-ombre { display: none; }
	.stage {
		position: relative; left: auto; top: auto; transform: none;
		width: 100%; height: auto; padding: 14px 18px 48px;
		display: flex; flex-direction: column; align-items: center; gap: 20px;
		pointer-events: auto;
	}
	.stage > * { position: relative; left: auto !important; top: auto !important; }

	/* En-tête : logo au niveau du haut du bouton menu, couverture remontée de moitié (demande du 14/10). */
	.logo { align-self: flex-start; margin: 0 0 -8px 4px; }
	.burger {
		display: block; position: fixed; right: 12px; top: 14px; z-index: 30;
		width: 46px; height: 46px; border: 0; border-radius: 2px; cursor: pointer;
		background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0,0,0,.12);
	}
	.burger span, .burger span::before, .burger span::after {
		content: ""; display: block; position: absolute; left: 12px; width: 22px; height: 2px; background: var(--noir);
		transition: transform .25s, background-color .25s;
	}
	.burger span { top: 22px; }
	.burger span::before { left: 0; top: -7px; }
	.burger span::after { left: 0; top: 7px; }
	.menu-open .burger span { background: transparent; }
	.menu-open .burger span::before { transform: translateY(7px) rotate(45deg); }
	.menu-open .burger span::after { transform: translateY(-7px) rotate(-45deg); }
	.menu {
		position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto; height: auto; z-index: 25;
		background: rgba(255, 255, 255, .97); border: 0; display: none;
	}
	.menu-open .menu { display: flex; align-items: center; justify-content: center; }
	/* Le logo, à sa place des pages intérieures : il ramène à l'accueil. */
	.menu__accueil { display: block; position: absolute; left: 22px; top: 14px; }
	.menu__accueil img { width: 152px; height: 57px; }
	.menu > ul { position: static; flex-direction: column; align-items: center; gap: 28px; }
	.menu > ul > li { display: block; text-align: center; }
	.menu > ul > li::before { display: none; }
	.menu > ul > li > a, .menu__parent > button { font-size: 24px; line-height: 30px; }
	.menu .is-active, .menu__cr { font-size: 21px; }
	/* Sous-menu : toujours déplié sous « Livres » */
	.menu__parent > button { cursor: default; }
	.sousmenu { position: static; transform: none; visibility: visible; opacity: 1; margin-top: 10px; }
	.sousmenu::before { display: none; }
	.sousmenu ul { padding: 0; background: none; border: 0; }
	.sousmenu li + li { margin-top: 6px; }
	.sousmenu a { font-size: 18px; line-height: 26px; }
	.soutenir { order: 20; width: 160px; height: 46px; font-size: 20px; }

	/* Page livre / auteur / page simple */
	.cover { width: min(260px, 66vw); height: auto; }
	.cover img { width: 100%; height: auto; }
	.calque, .calque--seul { width: 100%; max-width: 560px; height: auto; padding: 26px 22px 28px; background: rgba(255, 255, 255, .9); }
	.calque > * { position: static; }
	.calque__titre { margin-bottom: 14px; font-size: 24px; }
	.calque__texte, .calque--seul .calque__texte { width: auto; height: auto; overflow: visible; padding: 0; font-size: 18px; line-height: 25px; }
	.calque__texte > *, .calque--seul .calque__texte > * { max-width: none; }
	.calque__col, .calque__col > * { pointer-events: auto; }
	.calque__infos { margin-top: 22px; width: auto; font-size: 20px; line-height: 27px; }
	.calque__infos p { white-space: normal; }
	.calque__col { display: flex; justify-content: center; align-items: center; gap: 36px; width: auto; height: auto; margin-top: 24px; }
	.calque__col > * { position: static; width: auto; }
	.extrait { display: flex; flex-direction: column; align-items: center; }
	.extrait span { margin-top: 8px; }

	/* Accueil : un livre à la fois, la flèche reste en bas à droite */
	.slide { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: none; opacity: 1; visibility: visible; min-height: 100vh; min-height: 100svh; background: var(--c2); transition: none; }
	.slide.is-active { display: block; }
	.slide.is-leaving { display: none; }
	/* Le fond du grand écran transposé en hauteur, avec les repères du diaporama (demande de l'auteur) :
	 * la photo descend jusqu'au bas de la carte, le bloc de couleur 1 s'arrête à mi-hauteur de la carte
	 * (son bord droit tombe sur celui du bandeau), la couleur 2 occupe le reste.
	 * Grille : 90 px d'air (la moitié de l'écart d'origine sous le bouton menu, demande du 14/10), la carte, la couverture ; les fonds se calent sur ces rangées. */
	.slide .stage { display: grid; grid-template-columns: 100%; grid-template-rows: 90px auto auto; justify-items: center; gap: 0; padding-top: 0; }
	.slide__fond { display: contents; }
	.slide .stage > :not(.slide__fond) { z-index: 1; }
	.slide__gauche { grid-area: 1 / 1 / 3 / 2; left: -18px; right: -18px; top: 0; bottom: 0; width: auto; height: auto; }
	.slide__photo { width: 100%; height: 100%; }
	.slide__c2 { display: none; }
	.slide__bloc1 { grid-area: 2 / 1 / 3 / 2; left: -18px; top: -90px; bottom: 50%; width: calc(18px + max(0px, (100% - 403px) / 2) + 202px); height: auto; }
	.slide__c1 { width: 100%; height: 100%; }
	.papier { grid-area: 2 / 1; width: min(403px, 100%); height: auto; padding-top: 91px; }
	.papier__type { position: absolute; }
	/* « classification » : à gauche des caractéristiques et centré sur elles, comme sur grand écran. */
	.papier__classif { top: calc(91px + (100% - 91px) / 2); }
	/* --carac-h : hauteur de la plus grande liste, posée par site.js, pour que la carte garde sa taille d'un livre à l'autre (demande du 14/10). */
	.carac { position: static; min-height: var(--carac-h, 380px); padding: 22px 20px 26px 141px; }
	/* La couverture touche la carte, l'emblème (plus petit) est posé à cheval sur les deux, accroché à la zone fixe et non à la couverture : il ne bouge pas quand elle glisse (demande du 14/10). */
	.couv-zone { grid-area: 3 / 1; width: min(403px, 100%); height: auto; overflow: visible; background: none; box-shadow: none; }
	.couv { position: relative; display: block; width: 100%; height: auto; }
	.couv img { width: 100%; height: auto; }
	.couv-zone::after { content: ""; position: absolute; right: 22px; top: -36px; width: 72px; height: 72px; background: url("../img/embleme.png") center / contain no-repeat; }
	.stage--ui { position: static; width: 0; height: 0; padding: 0; }
	.suivant { position: fixed !important; right: 14px; bottom: 14px; left: auto !important; top: auto !important; width: 54px; height: 54px; z-index: 20; }
	.suivant svg { width: 54px; height: 54px; }
}

/* ---------- Vieux Safari (iPhone 6 et autres, avant iOS 14.5) ----------
 * Ils ignorent l'espacement « gap » des boîtes flexibles : site.js le détecte et pose .sans-gap sur <html>,
 * et ces marges prennent le relais. Les navigateurs récents ne voient jamais ces règles. */
.sans-gap .menu > ul > li + li { margin-left: 54px; }
@media (max-width: 899px) {
	.sans-gap .menu > ul > li + li { margin-left: 0; margin-top: 28px; }
	.sans-gap .screen > .stage > .logo { margin-bottom: 12px; }
	.sans-gap .screen > .stage > .cover, .sans-gap .screen > .stage > .calque { margin-bottom: 20px; }
	.sans-gap .calque__col > * + * { margin-left: 36px; }
}