/* ===== CSS Voyageurs - À la Carte (styles extraits de voyageurs/alacarte.php) ===== */

.services-page-container { max-width: 1200px; margin: 0 auto; position: relative; }
.compact-service { background: rgba(255,255,255,0.95); border-radius: 12px; padding: 18px; margin-bottom: 12px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 2px 8px rgba(0,0,0,0.08); backdrop-filter: blur(5px); position: relative; overflow: hidden; cursor: pointer; border: 1px solid rgba(0,0,0,0.08); }
.compact-service:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.compact-header { display:flex; align-items:center; gap:14px; margin-bottom: 12px; }
.compact-icon { flex-shrink:0; width:48px; height:48px; border-radius:10px; overflow:hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #F8F9FA 0%, rgba(248,249,250,0.5) 100%); }
.compact-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; line-height: var(--line-height-relaxed); background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.compact-subtitle { font-size: var(--font-size-md); color: #4A4A4A; margin: 0; font-style: italic; opacity: .8; }
.compact-price { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background: rgba(248,249,250,.6); border-radius:8px; border:1px solid rgba(0,0,0,0.08); font-size: var(--font-size-lg); }
.compact-description { color:#4A4A4A; font-weight: var(--font-weight-medium); }
.compact-price-value { font-weight: var(--font-weight-bold); background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.compact-list { margin-top:8px; }
.compact-list-item { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; margin-bottom:4px; background: rgba(255,255,255,0.4); border:1px solid rgba(0,0,0,0.08); border-radius:6px; transition: all .2s ease; }
.compact-item-name { font-size: var(--font-size-lg); color:#1a1a1a; font-weight: var(--font-weight-semibold); }
.compact-item-highlight { font-size: var(--font-size-sm); color:#8A8A8A; margin-left:6px; font-style:italic; padding: 2px 6px; background: rgba(0,0,0,0.05); border-radius:10px; display:inline-block; margin-top:2px; }
.compact-item-price { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; min-width:80px; text-align:right; }

/* Header section */
.compact-header-section { text-align:center; margin-bottom:24px; position:relative; z-index:1; animation: headerFadeIn .6s ease-out .2s both; }
.compact-title { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); margin:0 0 10px 0; line-height: var(--line-height-normal); background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.compact-subtitle { font-size: var(--font-size-xl); color:#4A4A4A; margin:0 0 16px 0; line-height: var(--line-height-loose); font-weight: var(--font-weight-medium); }
.compact-contact-badge { display:inline-flex; align-items:center; gap:8px; background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); color:white; padding:12px 20px; border-radius:30px; box-shadow: 0 3px 12px rgba(0,0,0,0.15); cursor:pointer; transition: all .3s cubic-bezier(0.4,0,0.2,1); }
.compact-contact-badge:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

/* Grid */
.compact-services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:16px; margin-bottom:20px; }

/* Animations */
@keyframes compactFadeIn { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }
@keyframes slideInLeft { from{ opacity:0; transform: translateX(-5px);} to{ opacity:1; transform: translateX(0);} }
@keyframes pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }