/* Shared depth, warm surfaces and sector accents. No content or route changes. */
:root {
  --page-accent: #e6b447;
  --page-tint: #fff4d7;
  --panel-shadow: 0 3px 7px rgba(24, 51, 82, .035), 0 16px 32px -14px rgba(24, 51, 82, .19);
  --panel-shadow-hover: 0 5px 12px rgba(24, 51, 82, .06), 0 24px 40px -15px rgba(24, 51, 82, .27);
}
.page-slug-colmar { --page-accent: #dfad43; --page-tint: #fff4d7; }
.page-slug-artzenheim-baltzenheim { --page-accent: #63b59b; --page-tint: #e3f5eb; }
.page-slug-volgelsheim { --page-accent: #a38bcc; --page-tint: #eee8fa; }
.page-slug-obersaasheim-geiswasser { --page-accent: #e69a7c; --page-tint: #ffede4; }
.page-slug-activite-soir, .page-slug-actualites { --page-accent: #a38bcc; --page-tint: #eee8fa; }
.page-type-restauration, .page-type-association { --page-accent: #63b59b; --page-tint: #e3f5eb; }

/* Useful category labels remain plain text, without decorative badges. */
.eyebrow {
  display: block; max-width: 100%; padding: 0; border: 0;
  border-radius: 0; background: none; font-size: 14px; font-weight: 600;
  line-height: 1.5; letter-spacing: normal; text-transform: none;
}
.eyebrow::before, .section-heading h2::after, .territory-header h2::after {
  content: none;
}
.kicker, .news-date, .featured-news-body span, .hours-card thead th {
  letter-spacing: normal; text-transform: none;
}
.nav-wrap { box-shadow: 0 5px 20px -12px rgba(22, 48, 81, .23); }
.brand-mark { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 #e6ad30, 0 7px 14px rgba(131, 98, 34, .13); }
.dropdown-panel { border-color: #dbe4ee; box-shadow: 0 8px 16px rgba(25, 57, 96, .06), 0 22px 45px rgba(25, 57, 96, .15); }
.btn { box-shadow: 0 3px 0 rgba(24, 51, 82, .12), 0 8px 18px -12px rgba(24, 51, 82, .3); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-primary { background: linear-gradient(160deg, #244a82, #173768); border-color: rgba(255,255,255,.12); box-shadow: 0 4px 0 #102b53, 0 12px 22px -12px rgba(18, 43, 82, .45); }
.btn-secondary, .btn-white { border-color: rgba(29, 61, 100, .14); }
.btn:focus-visible, .sector-jump a:focus-visible, .service-sector-grid a:focus-visible { outline: 3px solid #e8af32; outline-offset: 4px; }

/* Soft backgrounds and mounted photographs. */
:is(.hero-home, .sector-hero, .service-hero, .food-hero, .directory-hero, .page-hero) { position: relative; isolation: isolate; }
:is(.hero-home, .sector-hero, .service-hero, .food-hero, .directory-hero, .page-hero)::after {
  content: none;
}
.hero-home { background: linear-gradient(135deg, #fffaf0, #f2f7fc 55%, #eef7f3); }
.hero-photo { border: 7px solid #fff; box-shadow: 0 4px 0 rgba(32, 65, 98, .06), 0 30px 55px -20px rgba(32, 65, 98, .32); }
.floating-note, .hero-badge, .about-stamp { box-shadow: 0 4px 0 rgba(32, 65, 98, .08), 0 16px 28px -10px rgba(32, 65, 98, .25); }
:is(.sector-hero-photo, .service-hero-visual, .directory-hero-image, .gallery-hero-art) img,
.page-hero-association .association-art img {
  border: 6px solid #fff; box-shadow: 0 4px 0 rgba(32, 65, 98, .05), 0 22px 44px -14px rgba(32, 65, 98, .29);
}
.sector-hero { background: linear-gradient(125deg, #f7fafc 10%, #fffdf7 54%, var(--page-tint)); }
.sector-hero-photo::before { background: var(--page-accent); opacity: .55; border-radius: 46px 34px 48px 30px; }
.service-hero-visual::before { background: var(--page-tint); border: 1px solid var(--page-accent); }
.service-process-visual img, .about-photo > img:first-child { border: 6px solid #fff; box-shadow: var(--panel-shadow); }

/* Raised surfaces: white highlight, soft contact shadow and a deeper outer shadow. */
:is(.sector-service, .sector-menu-card, .sector-practical-card, .sector-rates,
    .sector-hours, .sector-restaurant-grid > div, .school-card, .restaurant-card,
    .service-fact-card, .service-practical-grid article, .service-process-list article,
    .service-extra-panel, .food-info-panel, .contact-card, .contact-email,
    .contact-hours-note, .history-prose, .timeline .timeline-item,
    .document-card, .tool-card, .highlight, .news-card, .detail-card, .service-side) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--panel-shadow);
}
:is(.sector-service, .service-fact-card, .service-index-card, .highlight) {
  border: 1px solid rgba(45, 75, 107, .1);
  background-image: radial-gradient(ellipse at top right, rgba(255,255,255,.8), transparent 70%);
}
:is(.sector-service-icon, .service-fact-icon, .service-index-icon,
    .sector-practical-card > span, .sector-menu-icon, .sector-notice-icon,
    .service-practical-icon, .restaurant-icon, .school-icon, .food-info-symbol) {
  border: 1px solid rgba(36, 78, 112, .07);
  box-shadow: 0 3px 0 rgba(25, 58, 87, .06), 0 7px 16px -10px rgba(25, 58, 87, .3);
}
.service-fact-card { box-shadow: inset 0 1px 0 #fff, 0 5px 0 rgba(46, 69, 90, .035), 0 18px 30px -15px rgba(46, 69, 90, .21); }
@media (min-width: 641px) {
  .service-fact-card h3 { margin: 38px 0 10px; }
}
.service-index-card { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 #fff, 0 5px 0 rgba(46, 69, 90, .04), var(--panel-shadow); }
.service-index-card::after { content: none; }
.service-index-card strong { padding-top: 17px; width: 100%; border-top: 1px solid rgba(34, 71, 108, .13); }
.sector-notice { border-left: 5px solid var(--page-accent); background: linear-gradient(135deg, #fff 55%, var(--page-tint)); box-shadow: var(--panel-shadow); }
.sector-notice-icon { background: var(--page-tint); }
.sector-hours { border-left: 4px solid #93b3d0; }
.sector-jump { box-shadow: 0 9px 20px -17px rgba(27, 58, 91, .38); }
.sector-jump a { border: 1px solid #dce6ee; box-shadow: 0 3px 0 #e4ebf2; transition: background-color .2s, transform .2s; }
.sector-jump a:first-child { background: var(--page-tint); border-color: var(--page-accent); }
.sector-restaurant-grid > div { border-top: 3px solid #e7cb8d; }
/* School names form a compact directory, with room for existing details. */
.sector-schools .school-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px; margin: 0; padding: 0; list-style: none;
}
.sector-schools .school-grid-many { display: block; column-count: 3; column-gap: 40px; }
.sector-schools .school-grid-single { grid-template-columns: 1fr; }
.sector-schools .school-card {
  display: block; break-inside: avoid; min-width: 0; min-height: 0; margin: 0; padding: 15px 0;
  border: 0; border-bottom: 1px solid #e3e9ee; border-radius: 0;
  background: none; box-shadow: none;
}
.sector-schools .school-card h3 {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4;
  color: #263b58; overflow-wrap: anywhere;
}
.sector-schools .school-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.sector-schools .school-card a {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 14px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px;
}
.sector-schools .school-card a:focus-visible { outline: 3px solid #e8af32; outline-offset: 4px; }
@media (max-width: 900px) {
  .sector-schools .school-grid-many { column-count: 2; }
}
@media (max-width: 640px) {
  .sector-schools .school-grid { grid-template-columns: 1fr; }
  .sector-schools .school-grid-many { column-count: 1; }
  .sector-schools .school-card { padding: 13px 0; }
  .sector-schools .school-card h3 { font-size: 17px; }
}
.sector-archives { box-shadow: 0 5px 0 rgba(24, 51, 82, .04), var(--panel-shadow); }
.sector-archives summary { background: linear-gradient(125deg, #244f7e, #1c3d65); }

/* Home and directory: each sector has its own warm accent and an inset photograph. */
.territories-section {
  background-image: linear-gradient(135deg, #173b74, #24508d);
}
.territory-card { --card-accent: #e8be65; border: 1px solid rgba(255,255,255,.65); border-bottom: 5px solid var(--card-accent); box-shadow: 0 6px 0 rgba(9, 30, 62, .17), 0 20px 35px -16px rgba(7, 26, 56, .5); transition: box-shadow .25s ease, filter .25s ease; }
.tc-artzen { --card-accent: #8bcdb7; }
.tc-volgels { --card-accent: #bba7e0; }
.tc-obers { --card-accent: #f0b094; }
.territory-photo { margin: 9px 9px 0; border-radius: 18px; height: 180px; }
.territory-content { padding: 21px; }
.territory-content > span { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: var(--card-accent); color: #163c65; }
.territory-content strong { display: inline-flex; align-items: center; gap: 6px; }
.territory-sticker { background: rgba(255,255,255,.08); box-shadow: 0 7px 0 rgba(11, 36, 70, .12); }
.directory-card { border-bottom: 4px solid #e8be65; box-shadow: var(--panel-shadow); }
.directory-card:nth-child(4n+2) { border-bottom-color: #8bcdb7; }
.directory-card:nth-child(4n+3) { border-bottom-color: #bba7e0; }
.directory-card:nth-child(4n+4) { border-bottom-color: #f0b094; }
.directory-card-number { padding: 5px 9px; background: #f2f6fa; border-radius: 9px; }
.service-sector-grid a, .service-detail-links a, .food-sector-nav a { box-shadow: 0 3px 0 rgba(29, 68, 102, .055), var(--panel-shadow); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }

/* Break up long pages with clearer edges and softer section transitions. */
:is(.sector-notice-section, .sector-meals, .sector-practical, .service-process,
    .service-practical, .service-sector-choice, .restaurant-group, .directory-section) {
  border-top: 1px solid rgba(46, 78, 105, .065); border-bottom: 1px solid rgba(46, 78, 105, .065);
}
.restaurant-group-number { box-shadow: 0 4px 0 rgba(71, 62, 79, .09), 0 10px 20px -12px rgba(71, 62, 79, .3); }
.restaurant-card-linked { border-top: 3px solid #dfb44f; }
.restaurant-card-link, .restaurant-sector-link { box-shadow: 0 3px 0 rgba(31, 66, 105, .07); }
.values-grid { gap: 16px; background: transparent; border-radius: 0; overflow: visible; }
.values-grid article { border: 1px solid rgba(45, 75, 107, .09); border-radius: 23px; box-shadow: var(--panel-shadow); }
.values-grid article > span { display: inline-grid; place-items: center; width: 33px; height: 33px; background: rgba(255,255,255,.8); border-radius: 10px; }
.values-row > div { border-color: rgba(255,255,255,.32); background: rgba(15,75,104,.19); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 22px -16px rgba(9, 70, 92, .5); }
.fact-card { background-image: radial-gradient(ellipse at top right, rgba(86,137,190,.35), transparent 65%); box-shadow: 0 5px 0 #102e59, 0 20px 35px -16px rgba(25, 57, 96, .35); border: 1px solid rgba(255,255,255,.15); }
.timeline .timeline-item { border-left: 4px solid #e4bd67; }
.timeline .timeline-item:nth-child(4n+2) { border-left-color: #85bea6; }
.timeline .timeline-item:nth-child(4n+3) { border-left-color: #b5a1d6; }
.timeline .timeline-item:nth-child(4n+4) { border-left-color: #8bb6d0; }
.timeline-date { border: 1px solid rgba(151, 119, 53, .12); box-shadow: 0 3px 0 rgba(151, 119, 53, .08); }
.page-hero-contact { background: linear-gradient(120deg, #edf6ff, #fff9ec 65%, #eaf7f1); }
.contact-bubble { box-shadow: 0 6px 0 rgba(36, 78, 116, .09), 0 20px 35px -20px rgba(36, 78, 116, .35); border: 5px solid #fff; }
.contact-card { border-top: 4px solid #e4bd67; background: linear-gradient(145deg, #fff 60%, #fffaf0); }
.contact-card:nth-child(2) { border-top-color: #85bea6; background: linear-gradient(145deg, #fff 60%, #f1faf5); }
.contact-card:nth-child(3) { border-top-color: #b5a1d6; background: linear-gradient(145deg, #fff 60%, #f7f3ff); }
.contact-tag { display: block; padding: 0; background: none; color: #426186; font-size: 13px; font-weight: 600; letter-spacing: normal; }
.service-index-label { font-weight: 600; letter-spacing: normal; text-transform: none; }
.gallery-card { padding: 7px; border: 1px solid #e1e7ef; background: #fff; box-shadow: var(--panel-shadow); }
.gallery-card img { border-radius: 18px; }
.gallery-card span { border: 1px solid rgba(31, 66, 105, .1); box-shadow: 0 5px 15px rgba(31, 66, 105, .12); }
.gallery-intro { padding: 22px 26px; border-left: 4px solid #94c5b1; border-radius: 0 19px 19px 0; background: #f1f8f4; }
.gallery-intro p { margin: 0; }
.prose th { background: #edf3f8; }

/* Dark closing sections share a discreet ornament and warm color stripe. */
:is(.family-cta, .sector-help, .food-help, .service-archive-cta) {
  background-image: radial-gradient(ellipse at 95% 0, rgba(118,169,218,.18), transparent 55%), linear-gradient(125deg, #204c83, #183b6d);
  border-top: 4px solid #e7bc64;
}
:is(.territories-section, .values-ribbon, .family-cta, .sector-help, .food-help, .service-archive-cta) .eyebrow {
  color: #fff0bd;
}
.site-footer { border-top: 5px solid transparent; border-image: linear-gradient(90deg, #e8be65 0 25%, #8bcdb7 25% 50%, #bba7e0 50% 75%, #f0b094 75%) 1; }
.footer-top { background-image: radial-gradient(ellipse at 0 0, rgba(91,137,188,.1), transparent 60%); }
.site-footer h3 { font-size: 14px; letter-spacing: normal; text-transform: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(24, 51, 82, .12), 0 15px 24px -13px rgba(24, 51, 82, .4); }
  .btn-primary:hover { box-shadow: 0 5px 0 #102b53, 0 16px 25px -12px rgba(18, 43, 82, .5); }
  .territory-card:hover { filter: brightness(1.025); box-shadow: 0 6px 0 rgba(9, 30, 62, .18), 0 25px 42px -12px rgba(7, 26, 56, .6); }
  .directory-card:hover, .service-index-card:hover, .service-sector-grid a:hover, .service-detail-links a:hover, .food-sector-nav a:hover { transform: translateY(-4px); box-shadow: var(--panel-shadow-hover); }
  .sector-jump a:hover { transform: translateY(-2px); background: #eaf2fa; }
}
@media (max-width: 640px) {
  .eyebrow { font-size: 13px; }
  .territory-photo { height: 190px; }
  .territory-content { padding: 22px; }
  .hero-photo { border-width: 5px; }
  .gallery-intro { padding: 18px 20px; }
  .values-grid { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .territory-card, .directory-card, .service-index-card,
  .service-sector-grid a, .service-detail-links a, .food-sector-nav a,
  .sector-jump a, .gallery-card img, .masonry-grid img { transition: none; }
  .btn:hover, .directory-card:hover, .service-index-card:hover,
  .service-sector-grid a:hover, .service-detail-links a:hover,
  .food-sector-nav a:hover, .sector-jump a:hover { transform: none; }
}