/* Printable programmes: fonts, print bar, sheets, the two pages */
/* Last update : 13.11.26 */

/* === FONTS === */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/BricolageGrotesque-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

/* === BASE === */
:root {
	--primary: #4373af;
	--ink: color-mix(in srgb, var(--primary) 80%, #000);
	--dark: #323232;
	--text: #2a2d30;
	--line: #8e979f;
	--sky-ember: #ee7a3c;
	--tint-top: #f2ebda;
	--tint-bottom: #dce6cf;
	--br: 0.4rem;
	--font: 'Bricolage Grotesque', system-ui, sans-serif;
}
.programme-hiver { --tint-top: #f7fafc; --tint-bottom: #d6e6f0; }
@page { size: A4; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.a4 { background: #dde3e7; font-family: var(--font); font-weight: 400; color: var(--text); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
:where(.a4) img { display: block; max-width: 100%; }
:where(.a4) :is(p, h1, h2, h3) { margin: 0; }
:where(.a4) a { color: inherit; text-decoration: none; }

/* === BAR === */
.a4-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12); font-size: 15px; }
.admin-bar .a4-bar { top: 32px; }
.a4-back { font-weight: 700; color: var(--ink); }
.a4-back:hover { color: var(--primary); }
.a4-print { padding: 0.75em 1.2em; border: 0; border-radius: var(--br); background: var(--primary); color: #fff; font: 700 15px/1.2 var(--font); box-shadow: 0 2px 6px rgb(20 24 28 / 0.16), 0 1px 2px rgb(20 24 28 / 0.12); cursor: pointer; transition: background-color 0.2s; }
.a4-print:hover { background: var(--ink); }
.a4-help { max-width: 794px; margin: 0 auto 16px; padding: 0 16px; font-size: 15px; font-weight: 700; text-align: center; }
.a4-alert { max-width: 794px; margin: 0 auto 12px; padding: 12px 16px; border-radius: var(--br); background: var(--sky-ember); color: #fff; font-size: 15px; font-weight: 700; }

/* === SHEETS === */
.a4-sheets { padding: 48px 0; }
.a4-frame { width: 794px; margin: 0 auto 48px; }
.a4-page { position: relative; width: 794px; height: 1123px; background: #fff; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12); font-size: 14px; line-height: 1.45; }
.a4-page.is-too-long { outline: 4px solid var(--sky-ember); }
.pad { padding: 0 56px; }
h1 { color: var(--primary); font-size: 38px; font-weight: 800; line-height: 1.1; }
h2 { margin-top: 26px; color: var(--primary); font-size: 20px; font-weight: 800; line-height: 1.2; }
h2 + * { margin-top: 8px; }
p + p { margin-top: 6px; }

/* === PAGE 1 === */
.cover { position: relative; height: 320px; background: var(--dark); }
.cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgb(20 24 28 / 0.6) 0%, rgb(20 24 28 / 0.15) 55%, rgb(20 24 28 / 0) 100%); }
.cover::after { content: ""; position: absolute; bottom: -1px; left: 0; z-index: 2; width: 100%; aspect-ratio: 1980 / 110; transform: scaleX(-1); background: #fff; -webkit-mask: url('../img/montagnes.svg') center bottom / 100% 100% no-repeat; mask: url('../img/montagnes.svg') center bottom / 100% 100% no-repeat; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }
.cover-logo { position: absolute; top: 34px; left: 50px; z-index: 2; width: 200px; height: auto; color: #fff; }

/* Safari on iPhone fails to print the photo and the two mountain shapes below (both are
   an external SVG, used as a CSS mask or background) while everything else prints fine,
   logo included (a plain inline SVG): programme.js adds this class on the phone only,
   for the moment of printing, and takes it off once the print sheet closes. */
body.a4-ios-print .cover-img,
body.a4-ios-print .cover::before,
body.a4-ios-print .cover::after,
body.a4-ios-print .foot::after { display: none; }
body.a4-ios-print .foot { padding-bottom: 16px; }
.p1 .pad { padding-top: 22px; }
.outings { display: grid; grid-template-columns: 32px fit-content(15rem) 1fr; gap: 3px 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.outings li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; padding: 7px 14px; border-radius: var(--br); }
.outings li:nth-child(odd) { background: color-mix(in srgb, var(--tint-bottom) 45%, #fff); }
.tick { appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 2px solid var(--ink); border-radius: 4px; background: #fff center / 12px no-repeat; cursor: pointer; }
.tick:checked { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9.5 10 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.when { padding-top: 1px; color: var(--ink); font-weight: 700; }
.what { font-size: 15px; font-weight: 700; }
.what small { display: block; font-size: 13px; font-weight: 400; }
.renvoi { position: absolute; right: 56px; bottom: 36px; color: var(--ink); font-weight: 700; }
.remarque { margin-top: 22px; padding: 16px 20px; border-radius: 0.6rem; background: linear-gradient(to bottom right, var(--tint-top), var(--tint-bottom)); font-weight: 700; }

/* === PAGE 2 === */
.p2 .pad { padding-top: 52px; }
.p2 .pad > :first-child,
.duo h2 { margin-top: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo > div { padding: 18px 20px; border-radius: 0.6rem; background: color-mix(in srgb, var(--tint-bottom) 45%, #fff); }
.conditions { display: grid; gap: 7px; padding: 0; list-style: none; }
.conditions li { position: relative; padding-left: 13px; }
.conditions li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.fill { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 36px; }
.fill label { display: flex; align-items: flex-end; gap: 10px; height: 42px; padding-bottom: 2px; border-bottom: 2px solid var(--line); font-size: 13px; }
.fill span { flex: none; padding-bottom: 3px; }
.fill input { flex: 1; min-width: 0; padding: 0 0 2px; border: 0; background: transparent; color: var(--text); font: 700 15px/1.2 var(--font); }
.fill input:focus { outline: 0; }
.fill label:focus-within { border-bottom-color: var(--primary); }
.foot { position: absolute; right: 0; bottom: 0; left: 0; }
.contacts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px; padding: 0 56px; font-size: 13px; }
.contacts h3 { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.contacts p + p { margin-top: 0; }
.foot::after { content: ""; display: block; margin-top: 20px; aspect-ratio: 1980 / 190; background: url('../img/montagnes.svg') top center / 100% 100% no-repeat; }

/* === MOBILE === */
@media screen and (max-width: 782px) {
	.admin-bar .a4-bar { top: 46px; }
}
@media screen and (max-width: 839px) {
	.a4-bar { font-size: 14px; }
	.a4-sheets { padding: 16px 0; }
	/* The page itself keeps its true 794×1123 px: only its visual rendering shrinks,
	   so a phone printing or saving as PDF (iOS ignores `zoom` at that point and was
	   printing the page at full, unscaled size split over several sheets) still gets
	   it at the right size. The frame around it shrinks to match, so nothing below
	   is left floating in blank space. */
	.a4-frame { width: calc(794px * var(--a4-fit, 1)); height: calc(1123px * var(--a4-fit, 1)); margin-bottom: 16px; }
	.a4-page { transform: scale(var(--a4-fit, 1)); transform-origin: top left; }
}

/* === PRINT === */
@media print {
	body.a4 { background: #fff; }
	.a4-bar, .a4-help, .a4-alert, #wpadminbar { display: none !important; }
	html { margin-top: 0 !important; }
	.a4-sheets { padding: 0; }
	.a4-frame { width: 210mm; height: auto; margin: 0 auto; }
	.a4-page { width: 210mm; height: 297mm; transform: none; box-shadow: none; page-break-inside: avoid; break-inside: avoid; break-after: page; }
	.a4-page:last-child { break-after: auto; }
	.cover { page-break-inside: avoid; break-inside: avoid; }
	.a4-page.is-too-long { outline: 0; }
}