/**
 * Secret Parisien — l'application de poche.
 * Vert nuit, filets d'or, serifs de gazette : l'écrin du thème, replié
 * au format téléphone. Aucune dépendance, une seule feuille.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Cinzel:wght@400;600&family=Jost:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
	--vert-nuit: #06231C;
	--vert-foret: #0B3328;
	--vert-paris: #0F4A38;
	--vert-clair: #2F6B52;
	--sauge: #9DBBA4;
	--or: #C9A227;
	--or-clair: #E7C86A;
	--or-pale: #F2E3B6;
	--or-fonce: #8F741F;
	--creme: #F7F2E5;
	--ivoire: #FCF9F1;
	--encre: #1C2B24;
	--voile: rgba(6, 35, 28, 0.86);
	--display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
	--caps: Cinzel, "Trajan Pro", Georgia, serif;
	--corps: Jost, Futura, "Avenir Next", "Century Gothic", sans-serif;
	--entete: calc(3.4rem + env(safe-area-inset-top));
	--barre: calc(3.6rem + env(safe-area-inset-bottom));
	--ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--vert-nuit);
	color: var(--creme);
	font: 400 1rem/1.6 var(--corps);
	-webkit-font-smoothing: antialiased;
	overscroll-behavior-y: none;
}
img { max-width: 100%; height: auto; }
a { color: var(--or-clair); }
button { font: inherit; }

/* ================= L'ossature ================= */

.app-entete {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	height: var(--entete);
	padding: env(safe-area-inset-top) .9rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	background: linear-gradient(180deg, rgba(4, 26, 21, .97), rgba(6, 35, 28, .92));
	border-bottom: 1px solid rgba(201, 162, 39, .38);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.app-entete__marque {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	color: var(--creme);
	text-decoration: none;
	min-width: 0;
}
.app-entete__sp {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--or-clair);
	letter-spacing: .06em;
}
.app-entete__nom {
	font-family: var(--caps);
	font-size: .78rem;
	letter-spacing: .32em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-entete__compte {
	flex: none;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 39, .55);
	background: rgba(15, 74, 56, .35);
	color: var(--or-clair);
	display: grid;
	place-items: center;
	cursor: pointer;
	font-size: 1.05rem;
}
.app-entete__compte svg,
.app-plan__moi svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.app-entete__compte.est-la { background: var(--or); color: var(--vert-nuit); border-color: var(--or); }

.app-scene {
	padding: calc(var(--entete) + .9rem) .95rem calc(var(--barre) + 1.2rem);
	max-width: 44rem;
	margin: 0 auto;
	min-height: 100vh;
}
.app-scene:focus { outline: none; }

/* Les gestes du navigateur restent à la porte : panoramiques permis,
   jamais de zoom de page (il ferait dériver les barres fixes sur iPhone). */
html { overscroll-behavior-y: none; touch-action: pan-x pan-y; }
html.mode-plan,
html.mode-plan body {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}
/* Le verrou béton d'iOS : en mode carte, le corps de page est cloué au
   cadre. Sans lui, le rebond du document survit parfois à overflow hidden
   et emporte la barre avec lui. */
html.mode-plan body {
	position: fixed;
	inset: 0;
	width: 100%;
}
.app-barre {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	height: var(--barre);
	padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
	display: flex;
	justify-content: center;
	gap: .2rem;
	background: linear-gradient(0deg, rgba(4, 26, 21, .98), rgba(6, 35, 28, .94));
	border-top: 1px solid rgba(201, 162, 39, .38);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.app-barre__onglet {
	flex: 1;
	max-width: 9.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .12rem;
	background: none;
	border: 0;
	border-radius: .6rem;
	color: var(--sauge);
	text-decoration: none;
	font-family: var(--corps);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}
.app-barre__onglet svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; fill: none; stroke-width: 1.5; }
.app-barre__onglet.est-actif { color: var(--or-clair); }
.app-barre__onglet.est-actif svg { filter: drop-shadow(0 0 6px rgba(231, 200, 106, .5)); }

/* Rubans d'état */
.app-ruban {
	position: fixed;
	top: var(--entete);
	left: 50%;
	transform: translateX(-50%);
	z-index: 55;
	margin-top: .5rem;
	padding: .4rem .9rem;
	border-radius: 2rem;
	background: var(--or);
	color: var(--vert-nuit);
	font-size: .8rem;
	font-weight: 500;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	gap: .6rem;
}
.app-ruban--hors-ligne { background: var(--vert-foret); color: var(--creme); border: 1px solid rgba(201, 162, 39, .5); }
.app-ruban button {
	border: 0;
	background: var(--vert-nuit);
	color: var(--or-clair);
	border-radius: 1.2rem;
	padding: .2rem .7rem;
	cursor: pointer;
	font-size: .75rem;
}

/* ================= Ornements et titres ================= */

.app-titre {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.65rem;
	line-height: 1.2;
	margin: .2rem 0 .9rem;
	color: var(--ivoire);
}
.app-filet {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 1.6rem 0 .9rem;
	color: var(--or);
	font-family: var(--caps);
	font-size: .72rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.app-filet::before, .app-filet::after {
	content: "";
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .55));
}
.app-filet::after { background: linear-gradient(90deg, rgba(201, 162, 39, .55), transparent); }

/* ================= Puces et filtres ================= */

.app-puces {
	display: flex;
	gap: .45rem;
	overflow-x: auto;
	padding: .1rem .1rem .55rem;
	margin: 0 -.15rem .6rem;
	scrollbar-width: none;
}
.app-puces::-webkit-scrollbar { display: none; }
.app-puce {
	flex: none;
	border: 1px solid rgba(201, 162, 39, .5);
	background: rgba(15, 74, 56, .25);
	color: var(--creme);
	border-radius: 2rem;
	padding: .3rem .85rem;
	font-size: .8rem;
	letter-spacing: .02em;
	cursor: pointer;
	white-space: nowrap;
}
.app-puce.est-actif { background: var(--or); border-color: var(--or); color: var(--vert-nuit); font-weight: 500; }
.app-puce small { opacity: .65; }

/* ================= Cartes du journal ================= */

.app-cartes { display: grid; gap: 1rem; }
.app-carte {
	display: block;
	background: linear-gradient(180deg, rgba(11, 51, 40, .55), rgba(6, 35, 28, .35));
	border: 1px solid rgba(201, 162, 39, .28);
	border-radius: .85rem;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform .25s var(--ease), border-color .25s;
}
.app-carte:active { transform: scale(.985); }
.app-carte__image {
	aspect-ratio: 76 / 42;
	background: var(--vert-foret) center / cover no-repeat;
}
.app-carte__corps { padding: .8rem .95rem 1rem; }
.app-carte__sur {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--caps);
	font-size: .62rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--or-clair);
	margin-bottom: .35rem;
}
.app-carte__sur i { font-style: normal; color: var(--sauge); letter-spacing: .1em; }
.app-carte__titre {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.32rem;
	line-height: 1.22;
	margin: 0 0 .35rem;
	color: var(--ivoire);
}
.app-carte__extrait { margin: 0; color: var(--sauge); font-size: .92rem; font-weight: 300; }
.app-carte__pied { margin-top: .55rem; font-size: .74rem; color: rgba(157, 187, 164, .8); letter-spacing: .06em; }

/* La une : plein ciel. Le titre posé sur l'image, la nuit qui monte. */
.app-une {
	position: relative;
	display: block;
	border-radius: 1.1rem;
	overflow: hidden;
	border: 1px solid rgba(201, 162, 39, .5);
	background: var(--vert-nuit);
	color: inherit;
	text-decoration: none;
}
.app-une__image {
	height: 430px;
	background: var(--vert-foret) center / cover no-repeat;
}
.app-une__ciel {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 35, 28, .05) 28%, rgba(4, 26, 21, .62) 60%, rgba(4, 26, 21, .96) 88%);
}
.app-une__texte { position: absolute; inset: auto 0 0 0; padding: 1rem 1.05rem 1.1rem; }
.app-une__balise {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .5rem;
	font-family: var(--caps);
	font-weight: 500;
	font-size: .6rem;
	letter-spacing: .34em;
	color: var(--or-clair);
	text-transform: uppercase;
	white-space: nowrap;
}
.app-une__balise i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(231, 200, 106, .75), rgba(231, 200, 106, 0)); }
.app-une__balise i:first-child { background: linear-gradient(90deg, rgba(231, 200, 106, 0), rgba(231, 200, 106, .75)); }
.app-une__titre { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.85rem; line-height: 1.12; color: var(--creme); }
.app-une__sur { font-family: var(--caps); font-size: .58rem; letter-spacing: .26em; color: var(--sauge); margin: .5rem 0 .45rem; text-transform: uppercase; }
.app-une__sur em { font-style: normal; color: var(--or-clair); }
.app-une__mot { margin: 0; font-weight: 300; font-size: .9rem; line-height: 1.5; color: rgba(247, 242, 229, .85); }

/* Rangée d'adresse (recherche, carnet) */
.app-rang {
	display: flex;
	gap: .8rem;
	align-items: center;
	padding: .65rem .3rem;
	border-bottom: 1px solid rgba(201, 162, 39, .18);
	color: inherit;
	text-decoration: none;
}
.app-rang__medaillon {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 39, .6);
	background: var(--vert-foret) center / cover no-repeat;
	display: grid;
	place-items: center;
	color: var(--or-clair);
	font-family: var(--display);
	font-size: 1.2rem;
}
.app-rang__texte { min-width: 0; flex: 1; }
.app-rang__titre {
	display: block;
	font-family: var(--display);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--ivoire);
	line-height: 1.25;
}
.app-rang__sous { display: block; font-size: .78rem; color: var(--sauge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= La lecture ================= */

.app-lecture__retour,
.app-retour {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: none;
	border: 0;
	color: var(--sauge);
	font-family: var(--corps);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: .2rem 0;
	margin-bottom: .7rem;
	cursor: pointer;
}
.app-lecture__hero {
	margin: 0 -.95rem;
	aspect-ratio: 16 / 10;
	background: var(--vert-foret) center / cover no-repeat;
	border-bottom: 1px solid rgba(201, 162, 39, .4);
}
.app-lecture h1 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.9rem;
	line-height: 1.18;
	margin: 1rem 0 .5rem;
	color: var(--ivoire);
}
.app-lecture__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .9rem;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--or-clair);
	margin-bottom: 1rem;
}
.app-lecture__meta i { font-style: normal; color: var(--sauge); }

.app-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.1rem 0 1.4rem;
}
.app-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	border: 1px solid rgba(201, 162, 39, .6);
	background: rgba(15, 74, 56, .3);
	color: var(--creme);
	border-radius: 2rem;
	padding: .5rem 1.05rem;
	font-family: var(--corps);
	font-size: .84rem;
	letter-spacing: .04em;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, color .2s, transform .15s;
}
.app-bouton:active { transform: scale(.97); }
.app-bouton--or { background: var(--or); border-color: var(--or); color: var(--vert-nuit); font-weight: 500; }
/* La ligne d'actions de l'article : quatre boutons, une seule ligne, toujours. */
.app-actions__ligne { display: flex; flex-wrap: nowrap; gap: .4rem; width: 100%; }
.app-actions__ligne .app-bouton {
	flex: 1 1 0;
	min-width: 0;
	padding: .5rem .2rem;
	font-size: .74rem;
	letter-spacing: .01em;
	white-space: nowrap;
}
.app-bouton--plein { width: 100%; }
.app-bouton.est-actif { background: var(--or); border-color: var(--or); color: var(--vert-nuit); }
.app-bouton[disabled] { opacity: .55; pointer-events: none; }

.app-contenu {
	font-family: var(--display);
	font-size: 1.14rem;
	line-height: 1.72;
	color: var(--creme);
}
.app-contenu p { margin: 0 0 1.05rem; }
.app-contenu h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1.25;
	color: var(--or-clair);
	margin: 1.8rem 0 .7rem;
}
.app-contenu h2::before { content: "✦ "; color: var(--or); font-size: .8em; }
.app-contenu a { color: var(--or-clair); text-decoration-color: rgba(201, 162, 39, .5); }
.app-contenu img { border-radius: .5rem; border: 1px solid rgba(201, 162, 39, .3); margin: .4rem 0; }
.app-contenu figure { margin: 1.2rem 0; }
.app-contenu figcaption { font-family: var(--corps); font-size: .76rem; color: var(--sauge); margin-top: .35rem; }
.app-contenu ul, .app-contenu ol { padding-left: 1.3rem; margin: 0 0 1.05rem; }
.app-contenu li { margin-bottom: .35rem; }
.app-contenu blockquote {
	margin: 1.2rem 0;
	padding: .2rem 0 .2rem 1rem;
	border-left: 2px solid var(--or);
	color: var(--or-pale);
	font-style: italic;
}
.app-contenu .schema-faq { margin-top: 1.5rem; border-top: 1px solid rgba(201, 162, 39, .35); padding-top: .4rem; }
.app-contenu .schema-faq-section { border-bottom: 1px solid rgba(201, 162, 39, .18); padding: .75rem 0; }
.app-contenu .schema-faq-question { display: block; color: var(--or-clair); font-weight: 600; margin-bottom: .3rem; }
.app-contenu .schema-faq-answer { font-size: 1.02rem; }
.app-contenu .sp-app-adresses { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; font-family: var(--corps); }
.app-contenu .sp-puce-lieu,
.sp-puce-lieu {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	border: 1px solid rgba(201, 162, 39, .55);
	border-radius: 2rem;
	padding: .3rem .8rem;
	font-size: .82rem;
	color: var(--or-clair);
	text-decoration: none;
	background: rgba(15, 74, 56, .3);
}
/* La plaque de rue parisienne, celle du site, à l'échelle de la poche :
   émail vert et bleu nuit, cartouche cintré, rosaces vissées aux angles. */
.sp-plaque {
	--plaque-vert: #2E6A4C;
	--plaque-vert-sombre: #24573D;
	--plaque-vert-clair: #3B7C5B;
	--plaque-bleu: #223A5E;
	--plaque-bleu-clair: #2C4A74;
	--plaque-bleu-sombre: #1C3150;
	--plaque-blanc: #F2F4EF;
	max-width: 420px;
	margin: .2rem auto .9rem;
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .38));
}
.sp-plaque__chapeau { width: min(58%, 250px); margin: 0 auto -1px; }
.sp-plaque__chapeau svg { display: block; width: 100%; height: auto; }
.sp-plaque__email { fill: var(--plaque-vert); }
.sp-plaque__fond { fill: var(--plaque-bleu); stroke: var(--plaque-blanc); stroke-width: 2.6; }
.sp-plaque__arrt {
	fill: var(--plaque-blanc);
	font-family: var(--corps);
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 2px;
}
.sp-plaque__exposant { font-size: 24px; }
.sp-plaque__rosace-svg circle { fill: var(--plaque-vert); stroke: var(--plaque-vert-sombre); stroke-width: 1.4; }
.sp-plaque__rosace-svg .sp-plaque__rosace-filet { fill: none; stroke: var(--plaque-blanc); stroke-width: 2.4; }
.sp-plaque__rosace-svg .sp-plaque__rosace-rivet { fill: #C7CDD2; stroke: #6E7A80; stroke-width: 1; }
.sp-plaque__corps {
	position: relative;
	background: linear-gradient(165deg, var(--plaque-vert-clair) 0%, var(--plaque-vert) 45%, var(--plaque-vert-sombre) 100%);
	border-radius: 12px;
	padding: clamp(.7rem, 2.6vw, 1rem);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 8px rgba(0, 0, 0, .3);
}
.sp-plaque__nom {
	display: grid;
	gap: .4rem;
	padding: clamp(.95rem, 3.4vw, 1.4rem) clamp(.8rem, 3vw, 1.4rem);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .08) 0%, transparent 55%),
		linear-gradient(170deg, var(--plaque-bleu-clair) 0%, var(--plaque-bleu) 52%, var(--plaque-bleu-sombre) 100%);
	border: 2.5px solid var(--plaque-blanc);
	border-radius: 7px;
	box-shadow: inset 0 3px 12px rgba(0, 0, 0, .34);
	font-family: var(--corps);
	color: var(--plaque-blanc);
	text-transform: uppercase;
	text-align: center;
	line-height: 1.1;
}
.sp-plaque__voie { display: block; font-size: clamp(.8rem, 2.3vw, 1.05rem); font-weight: 500; letter-spacing: .34em; text-indent: .34em; }
.sp-plaque__intitule { display: block; font-size: clamp(1.4rem, 5.6vw, 2rem); font-weight: 600; letter-spacing: .12em; text-indent: .12em; }
.sp-plaque__rosace {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 44% 40%, #E9EDEB 0 3px, #B9C1C6 4.5px, #6E7A80 6px, transparent 7px),
		radial-gradient(circle, var(--plaque-vert) 0 7.5px, var(--plaque-blanc) 8px 10px, var(--plaque-vert) 10.5px 12.5px, var(--plaque-vert-sombre) 13px);
	box-shadow: 0 3px 7px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.sp-plaque__rosace--hg { top: -7px; left: -7px; }
.sp-plaque__rosace--hd { top: -7px; right: -7px; }
.sp-plaque__rosace--bg { bottom: -7px; left: -7px; }
.sp-plaque__rosace--bd { bottom: -7px; right: -7px; }
.app-adresse {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	background: rgba(11, 51, 40, .5);
	border: 1px solid rgba(201, 162, 39, .3);
	border-radius: .7rem;
	padding: .7rem .9rem;
	margin: 0 0 1rem;
	font-family: var(--corps);
	font-size: .9rem;
	color: var(--creme);
}
/* Sous la plaque, l'adresse complète se fait discrète : rien qu'une ligne. */
.app-adresse--nue {
	background: none;
	border: 0;
	justify-content: center;
	text-align: center;
	color: var(--sauge);
	padding: 0 0 .1rem;
}

.app-note {
	width: 100%;
	min-height: 4.4rem;
	background: rgba(11, 51, 40, .55);
	border: 1px solid rgba(201, 162, 39, .4);
	border-radius: .6rem;
	color: var(--creme);
	font: 300 .95rem/1.5 var(--corps);
	padding: .6rem .75rem;
	resize: vertical;
}
.app-note:focus { outline: 1px solid var(--or); }

/* ================= La carte de Paris ================= */

.app-plan {
	position: fixed;
	inset: var(--entete) 0 var(--barre);
	background: var(--vert-nuit);
}
/* Deux classes : la feuille MapLibre, chargée après celle-ci, pose
   position relative sur .maplibregl-map et gagnerait à égalité. */
.app-plan .app-plan__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-plan__filtres {
	position: absolute;
	top: .6rem;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 0 .7rem;
}
.app-plan__filtres .app-puces { margin: 0; padding-bottom: .2rem; }
.app-plan__filtres .app-puce { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); background: rgba(6, 35, 28, .85); }
.app-plan__filtres .app-puce.est-actif { background: var(--or); }
.app-plan__moi {
	position: absolute;
	right: .8rem;
	bottom: 1rem;
	z-index: 5;
	width: 2.7rem;
	height: 2.7rem;
	border-radius: 50%;
	border: 1px solid var(--or);
	background: rgba(6, 35, 28, .9);
	color: var(--or-clair);
	font-size: 1.15rem;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.app-plan__moi { display: grid; place-items: center; }
.app-plan__mention {
	position: absolute;
	left: .75rem;
	bottom: .45rem;
	z-index: 4;
	margin: 0;
	font-size: .6rem;
	letter-spacing: .02em;
	color: rgba(157, 187, 164, .65);
	pointer-events: none;
}
.app-plan__mention a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(157, 187, 164, .3);
	pointer-events: auto;
}
/* Le bandeau et les coins de contrôle MapLibre restent au vestiaire. */
.app-plan .maplibregl-ctrl-bottom-right,
.app-plan .maplibregl-ctrl-bottom-left,
.app-plan .maplibregl-ctrl-attrib { display: none; }
.app-plan__mot {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2rem;
	color: var(--sauge);
	font-family: var(--display);
	font-size: 1.1rem;
}
.app-epingle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, #F2E3B6, #C9A227 58%, #8F741F);
	border: 1.5px solid #F2E3B6;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
	display: grid;
	place-items: center;
	color: #06231C;
	font-family: Georgia, serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.app-epingle--article { background: radial-gradient(circle at 32% 30%, #CFE3D6, #9DBBA4 58%, #4E7561); }
.app-feuille {
	position: absolute;
	left: 50%;
	bottom: .9rem;
	transform: translateX(-50%);
	z-index: 6;
	width: min(92%, 26rem);
	background: linear-gradient(180deg, rgba(11, 51, 40, .97), rgba(6, 35, 28, .97));
	border: 1px solid var(--or);
	border-radius: .9rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
	overflow: hidden;
}
.app-feuille__corps { display: flex; gap: .8rem; padding: .8rem .9rem; align-items: center; color: inherit; text-decoration: none; }
.app-feuille__vignette { flex: none; width: 4.6rem; height: 4.6rem; border-radius: .6rem; background: var(--vert-foret) center / cover no-repeat; border: 1px solid rgba(201, 162, 39, .5); }
.app-feuille__fermer {
	position: absolute;
	top: .3rem;
	right: .35rem;
	border: 0;
	background: none;
	color: var(--sauge);
	font-size: 1.25rem;
	cursor: pointer;
	padding: .25rem .5rem;
}

/* ================= La porte, le compte, les formulaires ================= */

.app-champ { margin-bottom: .9rem; }
.app-champ label {
	display: block;
	font-family: var(--caps);
	font-size: .66rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--or-clair);
	margin-bottom: .35rem;
}
.app-champ input {
	width: 100%;
	background: rgba(11, 51, 40, .55);
	border: 1px solid rgba(201, 162, 39, .45);
	border-radius: .6rem;
	color: var(--creme);
	font: 400 1rem/1.4 var(--corps);
	padding: .7rem .85rem;
}
.app-champ input:focus { outline: 1px solid var(--or); }
.app-code input {
	text-align: center;
	font-size: 1.7rem;
	letter-spacing: .55em;
	font-family: var(--display);
}
.app-mot-doux { color: var(--sauge); font-size: .9rem; font-weight: 300; }
.app-billet {
	background: rgba(201, 162, 39, .12);
	border: 1px solid rgba(201, 162, 39, .5);
	border-radius: .6rem;
	padding: .6rem .85rem;
	font-size: .88rem;
	margin: 0 0 .9rem;
}
.app-billet--souci { border-color: rgba(198, 90, 71, .7); background: rgba(198, 90, 71, .12); }
.app-ligne-reglage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem .2rem;
	border-bottom: 1px solid rgba(201, 162, 39, .18);
}
.app-ligne-reglage strong { font-weight: 500; display: block; }
.app-ligne-reglage small { color: var(--sauge); font-weight: 300; }
.app-interrupteur {
	flex: none;
	width: 3rem;
	height: 1.7rem;
	border-radius: 1rem;
	border: 1px solid rgba(201, 162, 39, .6);
	background: rgba(11, 51, 40, .6);
	position: relative;
	cursor: pointer;
}
.app-interrupteur::after {
	content: "";
	position: absolute;
	top: .16rem;
	left: .18rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--sauge);
	transition: transform .2s var(--ease), background .2s;
}
.app-interrupteur[aria-checked="true"] { background: var(--vert-paris); }
.app-interrupteur[aria-checked="true"]::after { transform: translateX(1.25rem); background: var(--or-clair); }

.app-vide {
	text-align: center;
	color: var(--sauge);
	font-family: var(--display);
	font-size: 1.08rem;
	padding: 2.2rem 1rem;
	font-style: italic;
}
.app-vide::before { content: "✦"; display: block; color: var(--or); font-style: normal; margin-bottom: .5rem; }

/* ================= Toast, squelettes ================= */

.app-toast {
	position: fixed;
	bottom: calc(var(--barre) + .8rem);
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	z-index: 80;
	background: var(--or);
	color: var(--vert-nuit);
	font-size: .85rem;
	font-weight: 500;
	padding: .55rem 1.1rem;
	border-radius: 2rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s, transform .25s var(--ease);
	max-width: 88vw;
	text-align: center;
}
.app-toast.est-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.app-squelette { border-radius: .85rem; background: rgba(11, 51, 40, .55); overflow: hidden; position: relative; min-height: 6rem; }
.app-squelette::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(201, 162, 39, .12) 50%, transparent 70%);
	animation: app-brille 1.4s infinite;
}
@keyframes app-brille { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.app-squelette--carte { height: 15rem; }
.app-squelette--rang { height: 4.2rem; }

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

/* Grand écran : la gazette respire */
@media (min-width: 720px) {
	.app-cartes { grid-template-columns: 1fr 1fr; }
	.app-une { grid-column: 1 / -1; }
	.app-une__image { height: 520px; }
	.app-une__titre { font-size: 2.4rem; }
	.app-scene { padding-top: calc(var(--entete) + 1.4rem); }
}