/* theme.css — la feuille commune du thème v15, extraite de gabarit/sejour.html par theme_v15.py (MARQUE_LOT663) : ne pas éditer */
:root { color-scheme: light; --fond: #ffffff; --surface: #ffffff; --surface-2: #eaf4fb; --encre: #183a56; --encre-2: #516f84; --titre: #173b61; --filet: #dfe7ed; --marque: #153b65; --sur-marque: #ffffff; --soleil: #ffd45c; --sur-soleil: #153b60; --or: #87651d; --logo: #ffd45c; --sur-logo: #183a56; --ombre: 0 1px 2px rgb(21 59 101 / .06), 0 10px 28px rgb(21 59 101 / .09); --ombre-puce: 0 0 0 1px #dfe7ed, 0 5px 18px rgb(20 56 89 / .03); --voile: rgb(16 46 80 / .4); --e: #257653; --m: #975d15; --h: #b53c38; --u: #5b6e80; --be: #eaf5ed; --bm: #fff1de; --bh: #fcece9; --bu: #edf2f6; --te: #256c4b; --tm: #91510c; --th: #a13f35; --tu: #50677a; --g-marche: #7f95aa; --g-veh: #153b65; --g-relief: #2a647a; --g-relief-fond: #dcedf8; --rail: #cfdeeb; --v-route: #52697e; --v-grande: #172b3d; --v-chemin: #8ea5ba; --v-sentier: #b9cbdb; --v-escalier: #d6e3ef; --v-inconnu: #eef3f7; --f-dehors: #e3f2ea; --i-dehors: #2b6a4a; --f-sport: #fff1c7; --i-sport: #7a5a12; --f-culture: #ecebfa; --i-culture: #4a478c; --f-boutiques: #e2f0fb; --i-boutiques: #24557f; --f-table: #ffe6dc; --i-table: #8f4127; --orbite: rgb(21 59 101 / .14); --titres: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --corps: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r-l: 8px; --r-m: 12px; --r-s: 8px; }
/* site · Marine & soleil */
:root[data-prop="site"] { color-scheme: light; --fond: #ffffff; --surface: #ffffff; --surface-2: #eaf4fb; --encre: #183a56; --encre-2: #516f84; --titre: #173b61; --filet: #dfe7ed; --marque: #153b65; --sur-marque: #ffffff; --soleil: #ffd45c; --sur-soleil: #153b60; --or: #87651d; --logo: #ffd45c; --sur-logo: #183a56; --ombre: 0 1px 2px rgb(21 59 101 / .06), 0 10px 28px rgb(21 59 101 / .09); --ombre-puce: 0 0 0 1px #dfe7ed, 0 5px 18px rgb(20 56 89 / .03); --voile: rgb(16 46 80 / .4); --e: #257653; --m: #975d15; --h: #b53c38; --u: #5b6e80; --be: #eaf5ed; --bm: #fff1de; --bh: #fcece9; --bu: #edf2f6; --te: #256c4b; --tm: #91510c; --th: #a13f35; --tu: #50677a; --g-marche: #7f95aa; --g-veh: #153b65; --g-relief: #2a647a; --g-relief-fond: #dcedf8; --rail: #cfdeeb; --v-route: #52697e; --v-grande: #172b3d; --v-chemin: #8ea5ba; --v-sentier: #b9cbdb; --v-escalier: #d6e3ef; --v-inconnu: #eef3f7; --f-dehors: #e3f2ea; --i-dehors: #2b6a4a; --f-sport: #fff1c7; --i-sport: #7a5a12; --f-culture: #ecebfa; --i-culture: #4a478c; --f-boutiques: #e2f0fb; --i-boutiques: #24557f; --f-table: #ffe6dc; --i-table: #8f4127; --orbite: rgb(21 59 101 / .14); --titres: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --corps: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r-l: 8px; --r-m: 12px; --r-s: 8px; }
/* v15 (chantier § 16.158) : la page du séjour à la STRUCTURE de My Center Parcs — un bandeau de marque plein, la photo d'abord, quatre
   parties par le menu du bas, peu de commandes par écran, des cartes photo qui portent leur texte, un seul accent (le marine en aplats
   doux), AUCUN décor. Les couleurs sont les jetons du site (jetons_sejour.py) ; l'échelle et les rayons sont ceux MESURÉS sur ses
   onze captures (le relevé, § 2 ; les rayons : 5 à 10 px pour une carte, des pilules pour les boutons et les puces) ; la police par
   défaut est Instrument Sans, celle de l'accueil du site, la plus proche de Bagoss (la police de Center Parcs, commerciale) parmi
   celles que le site sert ; DM Sans et Manrope (la fiche) restent au choix de la maquette. */
:root { --rv-s: 6px; --rv-m: 8px; --rv-l: 10px; --case: #f3f6f9; --voile-ph: rgb(10 30 50 / .78);
  --ombre-carte: 0 1px 2px rgb(21 59 101 / .04), 0 4px 12px rgb(21 59 101 / .09);   /* Yonah, 29/10 : « un fond blanc et les zones délimitées par une ombre légère » ; mesurée sur sa capture 03 : 4 % de noir au plus, 5 à 10 px */
  --fs-heros: 26px; --fs-page: 18px; --fs-sec: 17px; --fs-carte: 15px; --fs-texte: 14px; --fs-sec2: 13px; --fs-puce: 13px; --fs-menu: 11px;
  --fs-min: 17px; --fs-petit: 11px }
:root { --corps: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --titres: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 var(--fs-texte)/1.5 var(--corps); -webkit-font-smoothing: antialiased }
h1, h2, h3, h4, p, figure { margin: 0 }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: 600; letter-spacing: -.01em; color: var(--titre); text-wrap: balance }
button, input, select { font: inherit; color: inherit }
b, strong { font-weight: 600 }
/* aucun gras lourd : ses captures, le 636e (600 au plus hors la marque) */
fieldset { min-width: 0; border: 0; margin: 0; padding: 0 }
legend { padding: 0 }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.num { font-variant-numeric: tabular-nums }
:focus-visible { outline: 2.5px solid var(--marque); outline-offset: 2px }
.bord { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
/* un bouton radio, caché : son étiquette est la commande */
[hidden] { display: none !important }
@media (prefers-reduced-motion: no-preference) { .presse { transition: transform .12s ease } .presse:active { transform: scale(.97) } }
a { color: var(--titre) }
/* le bandeau de marque : plein, marine, la marque jaune à flèche, les dates du séjour */
.bandeau { background: var(--marque); color: #ffffff; display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)) }
.marque { display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-decoration: none; color: inherit }
.marque-ic { width: 30px; height: 30px; border-radius: 7px; background: var(--logo); color: var(--sur-logo); display: grid; place-items: center; flex: none }
.marque-ic .ic { width: 18px; height: 18px; stroke-width: 2.2 }
.marque b { font: 600 14px/1.2 var(--titres); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dates { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .7);
  background: transparent; color: #ffffff; font: 500 13px/1 var(--corps); white-space: nowrap; cursor: pointer }
.dates .ic { width: 16px; height: 16px }
.carte { background: var(--surface); box-shadow: var(--ombre-carte); border-radius: var(--rv-m); padding: 16px; min-width: 0 }
/* les boutons : des pilules, à filet (la commande) ou jaunes (réserver, le carnet) */
.bouton, .petit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; text-align: center }
.bouton { min-height: 48px; padding: 0 22px; border: 1.5px solid var(--titre); background: var(--surface); color: var(--titre); font: 600 14px/1.2 var(--corps) }
.bouton .ic { width: 18px; height: 18px }
.bouton.principal { background: var(--soleil); color: var(--sur-soleil); border-color: var(--soleil) }
.bouton.plein { width: 100% }
.petit { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--filet); background: var(--surface); color: var(--titre); font: 500 13px/1.2 var(--corps) }
.petit .ic { width: 15px; height: 15px }
.petit[aria-pressed="true"] { background: var(--surface-2); border-color: transparent; font-weight: 600 }
/* une ligne « libellé à gauche, pilule à droite » (le contact de son écran « Informations pratiques ») */
.pil-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; min-height: 52px }
.pil-l + .pil-l { border-top: 1px solid var(--filet) }
.pil-l .q { min-width: 0; font-size: var(--fs-texte) }
.pil-l .q small { display: block; font-size: var(--fs-sec2); color: var(--encre-2) }
.pil-l .petit { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis }
.replie summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; font: 500 var(--fs-sec2)/1.3 var(--corps); color: var(--encre-2) }
.replie summary::-webkit-details-marker { display: none }
.replie summary .ic { width: 16px; height: 16px }
@media (prefers-reduced-motion: no-preference) { .replie summary .ic { transition: transform .2s } }
.replie[open] summary .ic { transform: rotate(180deg) }
.replie ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; max-width: 75ch; color: var(--encre-2); font: 400 var(--fs-sec2)/1.5 var(--corps) }
.replie a { color: inherit }
.avis { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: var(--rv-m); background: var(--surface-2); font: 400 var(--fs-sec2)/1.45 var(--corps); color: var(--encre) }
.avis .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--titre) }
/* « Sur place » : UNE rangée de puces à icône, les jours en cases qui défilent, le compte et « Filtrer », puis les cartes */
/* position: relative — les .sr et les boutons radio cachés sont en position absolue : sans ancêtre positionné, leur boîte sort du conteneur
   qui défile et élargit la page (mesuré : 724 px pour 412) */
.defile { position: relative; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch }
.defile::-webkit-scrollbar { display: none }
.puces { display: flex; gap: 8px; min-width: max-content; padding: 0 16px }
.puces label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--filet); background: var(--surface);
  font: 500 var(--fs-puce)/1 var(--corps); color: var(--titre); white-space: nowrap; cursor: pointer }
.puces label .ic { width: 18px; height: 18px }
.puces input:checked + label { background: var(--surface-2); border-color: transparent; font-weight: 600 }
.puces input:focus-visible + label, .cases input:focus-visible + label { outline: 2.5px solid var(--marque); outline-offset: 2px }
.cases { display: flex; gap: 8px; min-width: max-content; padding: 16px 16px 0 }
.cases label { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 66px; min-height: 56px; padding: 6px 10px; border-radius: var(--rv-s); background: var(--case);
  cursor: pointer; text-align: center; font-variant-numeric: tabular-nums }
.cases .cj { font: 600 12px/1.2 var(--corps); color: var(--titre); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap }
.cases .cn { font: 400 var(--fs-petit)/1.2 var(--corps); color: var(--encre-2); white-space: nowrap }
.cases .cn:empty { display: none }
.cases .cniv { font: 600 var(--fs-petit)/1.2 var(--corps); white-space: nowrap }
.cases input:checked + label { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--marque) }