/* L'épi-cerise — couleurs de nature, typographie légère, ciel de Chiny à l'heure de la visite. */

:root {
	--encre: #1f3a2c;          /* vert forêt : texte */
	--encre-douce: #4a6355;    /* texte secondaire */
	--vert: #2f7a3d;           /* feuille : boutons, liens d'action */
	--vert-fonce: #245f30;
	--vert-pale: #dcebd3;
	--blanc: #fcfdfb;
	--feuille: #f0f6ec;        /* fond de section, vert très pâle */
	--ciel-clair: #eaf4fb;     /* fond de section, bleu très pâle */
	--griotte: #c62b32;        /* aujourd'hui */
	--soleil: #f2b33d;
	--soleil-fonce: #e3a21a;
	--nuit: #0d1833;
	--filet: rgb(31 58 44 / 0.14);

	--police: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
	--marge: clamp(1rem, 4vw, 3rem);
	--page: 74rem;
	--rythme: clamp(4rem, 9vw, 7rem);
	--rayon: 12px;

	/* Valeurs de jour sans script ; js/site.js les règle sur le vrai ciel. */
	--ciel-haut: #5aa6e6;
	--ciel-milieu: #8cc4ee;
	--ciel-bas: #d2eaf8;
	--ciel-encre: #15301f;
	--ciel-filet: rgb(21 48 31 / 0.22);
	--soleil-x: 50%;
	--soleil-y: 18%;
	--soleil-vis: 1;
	--lune-x: 80%;
	--lune-y: 20%;
	--lune-vis: 0;
	--etoiles: 0;
	--pre-lum: 1;

	color-scheme: light;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}

body {
	margin: 0;
	background: var(--blanc);
	color: var(--encre);
	font-family: var(--police);
	font-weight: 400;
	font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--vert-pale); color: var(--encre); }

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

h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
h2 { font-weight: 300; font-size: clamp(2.1rem, 4.2vw, 3.25rem); letter-spacing: -0.01em; }
h3 { font-weight: 500; font-size: 1.375rem; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 4px; }

.visuellement-cache {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.evitement {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 10;
	padding: 0.6rem 1rem;
	border-radius: var(--rayon);
	background: var(--encre);
	color: var(--blanc);
	font-weight: 500;
}
.evitement:focus { top: 1rem; }

.chiffres, .horaire td, .ephemerides dd { font-variant-numeric: tabular-nums lining-nums; }
.discret { color: var(--encre-douce); }

.page { width: min(100% - 2 * var(--marge), var(--page)); margin-inline: auto; }

.chapeau {
	font-weight: 300;
	font-size: clamp(1.2rem, 1vw + 0.95rem, 1.45rem);
	line-height: 1.45;
	max-width: 38ch;
	color: var(--encre-douce);
}

/* ── Le ciel ────────────────────────────────────────────────────────── */

.ciel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: min(100svh, 62rem);
	color: var(--ciel-encre);
	background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-milieu) 48%, var(--ciel-bas) 80%, var(--ciel-bas) 100%);
}

.ciel__etoiles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: var(--etoiles);
	transition: opacity 1.5s ease-out;
	pointer-events: none;
}

.ciel__soleil {
	position: absolute;
	z-index: 0;
	left: var(--soleil-x);
	top: var(--soleil-y);
	width: clamp(5rem, 9vw, 8rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(circle, #fffbea 0 22%, rgb(255 244 200 / 0.75) 26%, rgb(255 236 170 / 0.28) 42%, rgb(255 236 170 / 0) 70%);
	opacity: var(--soleil-vis);
	pointer-events: none;
}

.ciel__lune {
	position: absolute;
	z-index: 0;
	left: var(--lune-x);
	top: var(--lune-y);
	width: clamp(2rem, 3vw, 2.75rem);
	height: auto;
	translate: -50% -50%;
	overflow: visible;
	opacity: var(--lune-vis);
	pointer-events: none;
}
.ciel__lune circle { fill: rgb(255 255 255 / 0.07); }
.ciel__lune path { fill: #f6f1dc; }

.ciel__contenu {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	width: min(100% - 2 * var(--marge), 76rem);
	margin-inline: auto;
}

.bandeau {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 2rem;
	padding-block: 1rem 0.8rem;
	border-bottom: 1px solid var(--ciel-filet);
}
.bandeau__titre { font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; }

.sommaire {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sommaire a {
	display: inline-block;
	padding-block: 0.3rem;
	font-size: 1.0625rem;
	text-decoration: none;
}
.sommaire a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.une {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding-block: clamp(2rem, 5vh, 4rem) clamp(5rem, 13vh, 8.5rem);
}

.enseigne {
	display: flex;
	align-items: flex-start;
	gap: clamp(0.9rem, 2vw, 1.5rem);
}
.enseigne__logo {
	flex: none;
	width: clamp(3.25rem, 6vw, 5rem);
	margin-top: 0.35rem;
	transition: filter 1.2s ease-out;
}
/* De jour, un fin contour vert forêt (l'encre du texte) détache le blé doré et les cerises du bleu ;
   il suit la forme du dessin, sans pastille. La nuit, le logo reste nu. */
[data-encre="sombre"] .enseigne__logo {
	filter: drop-shadow(0 0 0.5px #1f3a2c) drop-shadow(0 0 0.5px #1f3a2c);
}
.enseigne h1 {
	font-weight: 400;
	font-size: clamp(3rem, 7vw, 5.25rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.enseigne__sous-titre {
	margin-top: 0.7rem;
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.25rem, 1.4vw + 0.8rem, 1.6rem);
	line-height: 1.3;
}
.enseigne__offre {
	margin-top: 1rem;
	max-width: 34ch;
	font-size: clamp(1.125rem, 0.5vw + 0.98rem, 1.3rem);
	line-height: 1.45;
}
.enseigne__adresse { margin-top: 0.6rem; font-size: 1.0625rem; }

/* Le cartouche « Aujourd'hui », une page blanche posée dans le ciel. */
.aujourdhui {
	background: #fff;
	color: var(--encre);
	border-radius: 18px;
	padding: clamp(1.3rem, 2.4vw, 1.9rem);
	box-shadow: 0 18px 40px -18px rgb(13 40 70 / 0.35), 0 2px 6px rgb(13 40 70 / 0.08);
	transition: box-shadow 1.2s ease-out;
}
.aujourdhui__date {
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 1.85rem);
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--filet);
}
.aujourdhui__date [data-date] { display: inline-block; }
.aujourdhui__date [data-date]::first-letter { text-transform: uppercase; }

.statut {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.9rem;
	margin-top: 0.9rem;
}
.statut__mot {
	position: relative;
	display: inline-block;
	padding: 0.05rem 0.45rem;
	margin: 0.25rem 0.4rem 0.25rem 0.35rem;
	font-weight: 500;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	line-height: 1.1;
	color: var(--griotte);
}
.statut__detail { font-size: 1.125rem; }

/* Le cercle au crayon rouge autour du statut du jour. */
.cercle {
	position: absolute;
	left: -0.8rem;
	top: -0.55rem;
	width: calc(100% + 1.7rem);
	height: calc(100% + 1.1rem);
	max-width: none;
	overflow: visible;
	pointer-events: none;
	opacity: 0;
}
.cercle path {
	fill: none;
	stroke: var(--griotte);
	stroke-width: 1.75;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.site-pret .statut .cercle,
.site-pret .est-aujourdhui .cercle { opacity: 1; }
.site-pret .cercle path { animation: tracer 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* L'arc du jour. */
.journee {
	margin-top: 1rem;
	padding-block: 0.8rem 0.7rem;
	border-block: 1px solid var(--filet);
}
.journee[hidden] { display: none; }
.journee__phrase { font-style: italic; font-size: 1.125rem; line-height: 1.35; }
.journee__arc { width: 100%; height: auto; margin-top: 0.4rem; overflow: visible; }
.journee__course { fill: none; stroke: var(--encre-douce); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }
.journee__parcouru { fill: none; stroke: var(--soleil); stroke-width: 3; stroke-linecap: round; }
.journee__horizon { stroke: var(--vert); stroke-width: 1.5; }
.journee__soleil { fill: var(--soleil); stroke: var(--soleil-fonce); stroke-width: 1.5; }

.ephemerides {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0 1rem;
	margin: 0.2rem 0 0;
}
.ephemerides dt { font-size: 0.9375rem; color: var(--encre-douce); }
.ephemerides dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
}
.ephemerides__lune { justify-self: center; }
.ephemerides__lune dt { text-align: center; }
.ephemerides__lune dd { font-size: 1rem; line-height: 1.2; }
.ephemerides__coucher { justify-self: end; text-align: right; }
.ephemerides__coucher dd { justify-content: flex-end; }
.lune { width: 1.6rem; height: 1.6rem; flex: none; overflow: visible; }
.lune circle { fill: none; stroke: #8b97ad; stroke-width: 1; }
.lune path { fill: #f1d77e; }

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }

.bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 3rem;
	padding: 0.65rem 1.25rem;
	border: 1.5px solid var(--vert);
	border-radius: 999px;
	font-weight: 500;
	font-size: 1.0625rem;
	text-decoration: none;
	transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}
.bouton svg {
	width: 1.2rem; height: 1.2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bouton--plein { background: var(--vert); color: #fff; }
.bouton--plein:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.bouton--plein:hover svg { transform: translateX(3px); }
.bouton--trait { color: var(--vert-fonce); background: transparent; }
.bouton--trait:hover { background: var(--vert-pale); }

/* La prairie : la vraie photo, sans filtre de couleur (la nuit l'assombrit seulement). */
.ciel__pre {
	position: relative;
	z-index: 1;
	width: 100%;
	height: clamp(15rem, 38vh, 29rem);
	margin-top: calc(-1 * clamp(7rem, 15vh, 12rem));
	object-fit: cover;
	object-position: 50% 24%;
	filter: brightness(var(--pre-lum));
	transition: filter 1.5s ease-out;
}

/* La nuit : ciel étoilé, le cartouche reste allumé comme une vitrine. */
[data-lumiere="nuit"] .aujourdhui {
	background: #fffaf1;
	box-shadow: 0 26px 60px -22px rgb(255 210 120 / 0.38), 0 2px 8px rgb(0 0 0 / 0.25);
}
[data-lumiere="nuit"] .ciel :focus-visible,
[data-lumiere="aube"] .ciel :focus-visible,
[data-lumiere="crepuscule"] .ciel :focus-visible { outline-color: #fff; }
[data-lumiere="nuit"] .aujourdhui :focus-visible { outline-color: var(--vert); }

.scintille {
	position: absolute;
	z-index: 0;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: #fff;
	opacity: calc(var(--etoiles) * 0.9);
	animation: scintiller 4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes scintiller { 50% { opacity: calc(var(--etoiles) * 0.25); } }

/* Aperçu à une autre heure (?heure= / ?date=) : outil de relecture, pas de la page publique. */
.apercu {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 20;
	max-width: calc(100% - 2rem);
	padding: 0.6rem 0.9rem;
	border-radius: 16px;
	background: rgb(255 255 255 / 0.95);
	color: var(--encre);
	box-shadow: 0 10px 30px -12px rgb(13 40 70 / 0.45);
	font-size: 0.9375rem;
}
body:has(> .apercu) { padding-bottom: 4.5rem; }
.apercu summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.apercu summary::-webkit-details-marker { display: none; }
.apercu[open] summary { margin-bottom: 0.4rem; }
.apercu form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.apercu label { display: flex; align-items: center; gap: 0.5rem; }
.apercu input { font: inherit; color: inherit; accent-color: var(--vert); }
.apercu__heure input { width: min(16rem, 52vw); }
.apercu output { min-width: 3.2em; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ── Sections ───────────────────────────────────────────────────────── */

.section { padding-block: var(--rythme); }
.section--feuille { background: var(--feuille); }
.section--ciel { background: var(--ciel-clair); }

.section__tete {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem clamp(2rem, 5vw, 5rem);
	align-items: end;
}

.avis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1.25rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	padding: 1.1rem 1.4rem;
	border-radius: var(--rayon);
	background: #fbeceb;
	color: var(--griotte);
}
.avis[hidden] { display: none; }
.avis__titre { font-weight: 500; font-size: 1.25rem; }
.avis__texte { font-size: 1.1875rem; color: var(--encre); }

/* Horaire */
.semaine {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.horaire {
	width: 100%;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	border-collapse: collapse;
}
.horaire thead th {
	padding: 0 0 0.6rem;
	text-align: left;
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--encre-douce);
	border-bottom: 1px solid var(--encre);
}
.horaire tbody th,
.horaire td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--filet);
	text-align: left;
	vertical-align: baseline;
}
.horaire tbody th { font-weight: 500; font-size: 1.25rem; padding-right: 1rem; width: 34%; }
.horaire td { font-size: 1.1875rem; white-space: nowrap; padding-right: 1rem; }
.horaire__ferme { font-style: italic; color: var(--encre-douce); }
.jour { position: relative; display: inline-block; }
.est-aujourdhui th,
.est-aujourdhui td:not(.horaire__ferme) { color: var(--griotte); }
.horaire .cercle { left: -1rem; top: -0.5rem; height: calc(100% + 1rem); width: calc(100% + 2.1rem); }

.semaine__pratique { padding-top: 0.5rem; }
.semaine__pratique h3 { padding-bottom: 0.7rem; border-bottom: 1px solid var(--encre); }
.pratique { margin: 0; }
.pratique > div {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 1rem;
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--filet);
}
.pratique dt { color: var(--encre-douce); }
.pratique dd { margin: 0; }

/* Produits */
.frais {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0;
	list-style: none;
	font-weight: 300;
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	line-height: 1.3;
	text-wrap: balance;
}
.frais li { display: inline; }
.frais li:not(:last-child)::after {
	content: "\00a0\2022";
	color: var(--vert);
	padding-right: 0.3em;
}

.depanne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 1rem clamp(2rem, 5vw, 5rem);
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--filet);
}
.depanne h3 { font-weight: 400; font-style: italic; }
.depanne__liste { margin: 0; padding: 0; list-style: none; columns: 3 11rem; column-gap: 2.5rem; }
.depanne__liste li { break-inside: avoid; padding-block: 0.5rem; border-bottom: 1px solid var(--filet); font-size: 1.125rem; }

/* Saisons */
.mois { margin-top: clamp(2rem, 4vw, 3rem); }
.mois__onglets {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding: 0.2rem 0.2rem 0.5rem;
	margin-inline: -0.2rem;
	scrollbar-width: thin;
	scrollbar-color: var(--vert-pale) transparent;
}
.mois__onglets[hidden] { display: none; }
.mois__onglets button {
	flex: 1 0 auto;
	min-width: 3.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--filet);
	border-radius: 999px;
	background: #fff;
	color: var(--encre);
	font: 400 1.0625rem/1 var(--police);
	cursor: pointer;
	transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}
.mois__onglets button:hover { border-color: var(--vert); }
.mois__onglets button[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 500; }
.mois__onglets button.est-courant:not([aria-selected="true"]) { border-color: var(--vert); color: var(--vert-fonce); font-weight: 500; }

.mois__panneaux { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.mois__panneau {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 0.5rem clamp(2rem, 5vw, 5rem);
	align-items: baseline;
	padding-block: 0.5rem;
}
.mois__panneau[hidden] { display: none; }
.mois__panneau:focus-visible { outline-offset: 6px; }
.mois--onglets .mois__panneau { animation: feuilleter 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes feuilleter { from { opacity: 0.25; transform: translateY(6px); } }
.mois:not(.mois--onglets) .mois__panneau { border-bottom: 1px solid var(--filet); }
.mois__panneau h3 { font-weight: 300; font-size: clamp(2.6rem, 6.5vw, 4.5rem); letter-spacing: -0.015em; line-height: 1; }
.mois:not(.mois--onglets) .mois__panneau h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.mois__panneau p { font-weight: 300; font-size: clamp(1.3rem, 1.4vw + 0.85rem, 1.75rem); line-height: 1.35; max-width: 34ch; }
.mois__panneau .mois__note { grid-column: 2; font-weight: 400; font-style: italic; font-size: 1.125rem; color: var(--encre-douce); margin-top: 0.4rem; }

.saisons__pied {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 0.9rem;
	border-top: 1px solid var(--filet);
	font-size: 1rem;
	color: var(--encre-douce);
	max-width: 70ch;
}

/* Le pays */
.photos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.photo { margin: 0; display: grid; grid-template-rows: 1fr auto; }
.photo img { width: 100%; object-fit: cover; border-radius: var(--rayon); }
.photo--large { grid-column: span 4; }
.photo--haute { grid-column: span 2; }
.photo--moitie { grid-column: span 3; }
.photo--large img { aspect-ratio: 16 / 10; }
.photo--moitie img { aspect-ratio: 4 / 3; }
.photo--haute img { height: 0; min-height: 100%; }
.photo figcaption { margin-top: 0.55rem; font-style: italic; font-size: 1.0625rem; color: var(--encre-douce); }

/* Contact */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.contact__adresse { margin-top: 1.25rem; font-weight: 300; font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.3; }
.contact__liste { margin: 1.25rem 0 0; }
.contact__liste > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: 0.55rem; border-bottom: 1px solid var(--filet); }
.contact__liste dt { color: var(--encre-douce); }
.contact__liste dd { margin: 0; }
.contact__halte { margin-top: 1.25rem; max-width: 36ch; color: var(--encre-douce); }

.carte { margin-top: 0.5rem; }
.carte__plan {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 34px -18px rgb(13 40 70 / 0.35);
	text-decoration: none;
	color: var(--encre);
}
.carte__plan img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte__invite {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px -4px rgb(13 40 70 / 0.3);
	font-weight: 500;
	font-size: 1rem;
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.carte__plan:hover .carte__invite,
.carte__plan:focus-visible .carte__invite { background: var(--vert); color: #fff; }
.carte__iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 16px; }
.carte__source { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--encre-douce); }

/* ── Pied de page ───────────────────────────────────────────────────── */

.pied { background: var(--nuit); color: #e6ecf5; }
.pied__page { padding-block: clamp(3rem, 6vw, 4.5rem); }
.pied__soleil { font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.25; max-width: 30ch; color: #fff; }
.pied__mentions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid rgb(230 236 245 / 0.25);
	font-size: 1rem;
}
.pied__mentions strong { font-weight: 500; font-size: 1.125rem; color: #fff; }
.pied__retour { margin-top: 2rem; font-size: 1rem; }
.pied :focus-visible { outline-color: #fff; }
.pied ::selection { background: #fff; color: var(--nuit); }

/* ── Petits écrans ──────────────────────────────────────────────────── */

@media (max-width: 60rem) {
	.une { grid-template-columns: 1fr; }
	.semaine, .section__tete, .depanne, .contact, .mois__panneau { grid-template-columns: 1fr; }
	.mois__panneau .mois__note { grid-column: 1; }
}

@media (max-width: 40rem) {
	.bandeau { padding-top: 0.8rem; }
	.bandeau nav { width: 100%; }
	.sommaire { justify-content: space-between; gap: 0 0.5rem; }
	.sommaire a { font-size: 1rem; }
	.une { padding-block: 1.5rem 9.5rem; gap: 1.75rem; }   /* une bande de ciel libre pour le soleil et la lune */
	.enseigne h1 { font-size: clamp(2.5rem, 12vw, 3.25rem); }
	.ciel__pre { height: 15rem; margin-top: -6rem; object-position: 72% 24%; }
	.ephemerides { gap: 0 0.5rem; }
	.ephemerides__lune dd span { display: none; }
	.actions .bouton { flex: 1 1 auto; justify-content: center; }
	.horaire tbody th { width: auto; }
	.pratique > div, .contact__liste > div { grid-template-columns: 1fr; gap: 0.1rem; }
	.photos { grid-template-columns: 1fr; }
	.photos .photo { grid-column: 1 / -1; }
	.photo--haute img { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
	.pied__mentions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.site-pret .cercle path { animation: none; stroke-dashoffset: 0; }
	.mois--onglets .mois__panneau, .scintille { animation: none; }
	.bouton, .bouton svg, .ciel__etoiles, .ciel__pre, .aujourdhui { transition: none; }
}

@media print {
	.ciel { background: none; color: var(--encre); }
	.ciel__etoiles, .ciel__soleil, .ciel__lune, .ciel__pre, .carte__invite, .sommaire, .actions, .mois__onglets { display: none !important; }
	.mois__panneau[hidden] { display: grid !important; }
}