/* ===== SOLEA — Design system ===== Séjours tout compris et expériences à la carte (marque fictive de démonstration). Polices : Fraunces (titres) + Inter (corps), chargées via dans le . Tokens issus du référentiel de marque Solea. */ :root { /* Fond et surfaces */ --sand: #FBF4E8; /* fond global, sable clair */ --surface: #FFFFFF; /* cartes, navigation */ --surface-blue: #EAF4F6; /* sections alternées, ton lagon clair */ --line: #ECE2CC; /* bordures et séparateurs */ /* Encres */ --ink: #1B3A4B; /* bleu nuit, titres et texte principal */ --ink-soft: #5A707A; /* texte secondaire */ --ink-faint: #8CA0A8; /* légendes, mentions */ /* Bleu lagon, structure et confiance */ --lagoon: #1B7A8C; /* nav, liens, badges informatifs */ --lagoon-deep: #0F5867; /* survol, fonds sombres */ --lagoon-tint: #D9EEF1; /* fonds doux, badges */ /* Corail, actions et temps forts */ --coral: #FF6B4A; /* CTA principal, prix, temps forts */ --coral-deep: #E04F30; /* survol des CTA */ --coral-tint: #FFE4DA; /* fonds doux, badges promo */ /* Soleil, légèreté */ --sun: #FFC857; /* accents ponctuels, étoiles, badges best-seller */ --sun-tint: #FFF3DA; /* Sémantique */ --available: #3FA66E; /* disponible, confirmé */ --limited: #E0A327; /* places limitées */ --soldout: #C1492E; /* complet */ --star: #FFC857; /* notation */ /* Dégradés */ --grad-hero: linear-gradient(135deg, #1B7A8C, #1B3A4B); --grad-sunset: linear-gradient(120deg, #FF6B4A, #FFC857); /* Typographie */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Rayons, généreux et chaleureux */ --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px; /* Ombres douces, teintées bleu nuit */ --shadow-sm: 0 2px 8px rgba(27,58,75,.08); --shadow-md: 0 18px 40px -18px rgba(27,58,75,.22); --shadow-card: 0 18px 40px -18px rgba(27,58,75,.22); /* Transitions */ --ease: cubic-bezier(.22,1,.36,1); --t-base: .28s; /* Divers */ --nav-height: 72px; --utility-height: 40px; --max-width: 1200px; /* ----- Ponts vers le squelette partagé (classes/cart.js) ----- */ --font: var(--font-body); --font-main: var(--font-body); --white: var(--surface); --cream: var(--sand); --border: var(--line); --text: var(--ink-soft); --text-light: var(--ink-faint); --radius: var(--r-md); --radius-sm: var(--r-sm); --pill: var(--r-pill); --accent: var(--coral); --accent-tint: var(--coral-tint); --success: var(--available); --sale: var(--soldout); --ease-out: var(--ease); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; } /* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--utility-height) + 12px); } body { font-family: var(--font-body); color: var(--ink); line-height: 1.6; background: var(--sand); padding-top: calc(var(--nav-height) + var(--utility-height)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; } h1, h2, h3 { line-height: 1.1; color: var(--ink); font-family: var(--font-display); font-weight: 700; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; } /* ===== Bandeau utilitaire ===== */ .utility-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--utility-height); z-index: 1001; background: var(--lagoon-deep); color: #fff; font-size: 0.8rem; font-weight: 500; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; } .utility-bar .dot { opacity: 0.5; } .utility-bar strong { font-weight: 700; } /* ===== Navigation ===== */ .navbar { position: fixed; top: var(--utility-height); left: 0; right: 0; height: var(--nav-height); background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); z-index: 1000; display: flex; align-items: center; } .navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .navbar__logo { display: inline-flex; align-items: center; gap: 9px; } .navbar__logo img { height: 34px; width: auto; display: block; transition: opacity var(--dur) var(--ease); } .navbar__logo:hover img { opacity: 0.82; } .navbar__logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.5px; color: var(--ink); } .logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.5px; color: var(--ink); text-transform: uppercase; } .logo-word .a { color: var(--coral); } .navbar__links { display: flex; gap: 4px; } .navbar__links a { color: var(--ink-soft); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border-radius: var(--r-pill); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .navbar__links a:hover, .navbar__links a.active { color: var(--lagoon-deep); background: var(--lagoon-tint); } .navbar__actions { display: flex; align-items: center; gap: 12px; } .navbar__cart { color: var(--ink); font-size: 1.05rem; position: relative; width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .navbar__cart:hover { background: var(--lagoon-tint); } .navbar__cart:active { transform: scale(0.93); } .navbar__cart-count { position: absolute; top: -6px; right: -6px; background: var(--coral); color: #fff; font-size: 0.68rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .navbar__menu-toggle { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); width: 42px; height: 42px; color: var(--ink); font-size: 1.2rem; cursor: pointer; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; gap: 8px; line-height: 1; transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:active { transform: scale(0.97); } /* Primaire : corail (action principale, réserver) */ .btn--primary { background: var(--coral); color: #fff; } .btn--primary:hover { background: var(--coral-deep); } /* Accent = alias corail (compat squelette) */ .btn--accent { background: var(--coral); color: #fff; } .btn--accent:hover { background: var(--coral-deep); } /* Secondaire : contour encre */ .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--outline:hover { background: var(--surface-blue); } /* Contour clair sur fond sombre (hero/footer) */ .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; } /* Sombre (lagon) */ .btn--dark { background: var(--lagoon); color: #fff; } .btn--dark:hover { background: var(--lagoon-deep); } .btn--lg { padding: 16px 34px; font-size: 1rem; } .btn--full { width: 100%; } .btn--added { background: var(--available) !important; color: #fff !important; } /* Lien lagon souligné au survol */ .link-lagoon { color: var(--lagoon); font-weight: 600; } .link-lagoon:hover { text-decoration: underline; } /* ===== Hero ===== */ .hero { position: relative; color: #fff; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(4.5rem, 9vw, 7rem); overflow: hidden; background-image: var(--grad-hero); } .hero::after { content: ""; position: absolute; top: -140px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,87,0.35), transparent 70%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; max-width: 720px; } .hero__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sun); margin-bottom: 20px; } .hero__title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.5px; font-weight: 700; color: #fff; margin-bottom: 18px; } .hero__title em { font-style: italic; color: var(--sun); } .hero__subtitle { font-size: 1.12rem; color: rgba(255,255,255,0.82); max-width: 560px; margin-bottom: 8px; } /* Barre de recherche superposée */ .search-bar { position: relative; z-index: 1; margin-top: 34px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; } .search-bar__field { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; } .search-bar__field + .search-bar__field { border-left: 1px solid var(--line); } .search-bar__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lagoon); } .search-bar__field select, .search-bar__field input { border: none; background: transparent; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); font-weight: 500; outline: none; padding: 2px 0; } .search-bar__btn { align-self: stretch; background: var(--coral); color: #fff; border: none; border-radius: var(--r-sm); padding: 0 26px; min-height: 54px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur) var(--ease); } .search-bar__btn:hover { background: var(--coral-deep); } /* ===== Section ===== */ .section { padding: 78px 0; } .section--soft { background: var(--surface-blue); } .section--sand { background: var(--sand); } .section__header { max-width: 720px; margin-bottom: 40px; } .section__header--center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; } .section__title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .section__subtitle { color: var(--ink-soft); font-size: 1.04rem; } .section__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; } .section__head-row .section__title { margin-bottom: 6px; } /* ===== Grille séjours / expériences ===== */ .stay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .stay-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .stay-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-blue); } .stay-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .stay-card__badge { position: absolute; top: 14px; left: 14px; padding: 5px 13px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; } .badge--bestseller { background: var(--sun); color: var(--ink); } .badge--promo { background: var(--coral-tint); color: var(--coral-deep); } .badge--new { background: var(--lagoon-tint); color: var(--lagoon-deep); } .stay-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .stay-card__place { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lagoon); margin-bottom: 6px; } .stay-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; line-height: 1.15; } .stay-card__rating { font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 12px; } .stay-card__rating .stars { color: var(--star); letter-spacing: 1px; } .stay-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .stay-card__tag { font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); background: var(--surface-blue); border-radius: var(--r-pill); padding: 4px 11px; } .stay-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .stay-card__price { font-size: 0.8rem; color: var(--ink-faint); } .stay-card__price strong { display: block; font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; color: var(--coral); line-height: 1.2; } .stay-card__price span { font-size: 0.75rem; color: var(--ink-faint); } /* Badge de disponibilité */ .avail { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; } .avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .avail--available { color: var(--available); background: rgba(63,166,110,0.12); } .avail--limited { color: var(--limited); background: rgba(224,163,39,0.14); } .avail--soldout { color: var(--soldout); background: rgba(193,73,46,0.12); } /* ===== Filtres catalogue ===== */ .filter-bar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; } .view-toggle { display: inline-flex; align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; } .view-toggle a { padding: 9px 22px; border-radius: var(--r-pill); font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .view-toggle a.active { background: var(--lagoon); color: #fff; } .filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .filter-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-right: 4px; } .filter-pill { font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .filter-pill:hover { border-color: var(--coral); color: var(--coral); } .filter-pill.active { background: var(--coral); color: #fff; border-color: var(--coral); } /* ===== Breadcrumb ===== */ .breadcrumb { padding: 18px 0; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-faint); } .breadcrumb a { color: var(--ink-faint); transition: color var(--dur) var(--ease); } .breadcrumb a:hover { color: var(--coral); } .breadcrumb__separator { color: var(--line); } /* ===== Page détail (séjour / expérience) ===== */ .detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; padding: 8px 0 8px; } .gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 12px; } .gallery__main { grid-column: 1 / -1; grid-row: span 2; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-blue); } .gallery__main img { width: 100%; height: 100%; object-fit: cover; } .detail__info { padding: 4px 0; } .detail__place { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lagoon); margin-bottom: 12px; } .detail__name { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .detail__rating { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .detail__rating .stars { color: var(--star); letter-spacing: 1px; } .detail__price { font-size: 1.7rem; font-weight: 700; color: var(--coral); margin-bottom: 4px; } .detail__price small { font-size: 0.9rem; font-weight: 500; color: var(--ink-faint); } .detail__desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; margin: 18px 0 24px; } /* Encart de réservation */ .booking-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 24px; margin-top: 22px; } .booking-box__label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-bottom: 10px; } /* Sélecteur de dates / créneaux (réutilisé par cart.js : .format-selector) */ .format-selector { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .format-selector__btn { padding: 10px 16px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .format-selector__btn:hover { border-color: var(--coral); } .format-selector__btn:active { transform: scale(0.96); } .format-selector__btn.active { background: var(--lagoon); color: #fff; border-color: var(--lagoon); } .format-selector__btn--out { color: var(--ink-faint); cursor: not-allowed; background: var(--surface-blue); text-decoration: line-through; opacity: 0.6; } .format-selector__btn--out:hover { border-color: var(--line); } /* Sélecteur de voyageurs (réutilisé par cart.js : .quantity-selector) */ .quantity-selector { display: flex; align-items: center; margin-bottom: 22px; border: 1.5px solid var(--line); border-radius: var(--r-pill); width: fit-content; overflow: hidden; } .quantity-selector button { width: 46px; height: 46px; border: none; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--ink); transition: background-color var(--dur) var(--ease); } .quantity-selector button:hover { background: var(--surface-blue); } .quantity-selector input { width: 56px; height: 46px; border: none; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); text-align: center; font-size: 1rem; font-weight: 600; font-family: var(--font-body); background: var(--surface); } /* Liste des inclusions */ .inclusions { margin: 24px 0; padding: 0; } .inclusions li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; color: var(--ink-soft); } .inclusions li:last-child { border-bottom: none; } .inclusions__icon { font-size: 1.15rem; line-height: 1.3; flex-shrink: 0; } /* Programme jour par jour */ .programme { margin-top: 8px; } .programme__item { position: relative; padding: 0 0 24px 34px; border-left: 2px solid var(--lagoon-tint); } .programme__item:last-child { border-left-color: transparent; padding-bottom: 0; } .programme__item::before { content: ""; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--lagoon); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--lagoon-tint); } .programme__day { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--coral); margin-bottom: 4px; } .programme__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; } .programme__text { font-size: 0.92rem; color: var(--ink-soft); } /* ===== Bloc engagement / promesse ===== */ .promise { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .promise__text h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.4rem); letter-spacing: -0.5px; color: var(--ink); margin-bottom: 16px; } .promise__text p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; } .promise__cards { display: grid; gap: 16px; } .promise-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--shadow-sm); } .promise-card__icon { font-size: 1.6rem; margin-bottom: 10px; } .promise-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .promise-card__text { color: var(--ink-soft); font-size: 0.92rem; } /* ===== Bandeau chiffres de confiance ===== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat { text-align: center; } .stat__num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--coral); line-height: 1; margin-bottom: 8px; } .stat__label { font-size: 0.9rem; color: var(--ink-soft); } /* ===== Avis ===== */ .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm); } .review-card__stars { color: var(--star); letter-spacing: 2px; font-size: 0.95rem; margin-bottom: 12px; } .review-card__text { color: var(--ink); font-size: 0.96rem; line-height: 1.6; margin-bottom: 16px; } .review-card__meta { font-size: 0.84rem; color: var(--ink-faint); } .review-card__meta strong { color: var(--ink); font-weight: 600; } .review-card__badge { color: var(--available); font-weight: 600; } /* ===== FAQ (accordéon) ===== */ .faq { max-width: 760px; margin: 0 auto; } .faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; } .faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq__q::after { content: "+"; font-size: 1.4rem; color: var(--coral); transition: transform var(--dur) var(--ease); } .faq__item.open .faq__q::after { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; padding: 0 22px; transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease); } .faq__item.open .faq__a { max-height: 320px; padding: 0 22px 20px; } /* ===== Tunnel de réservation (étapes) ===== */ .steps { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 640px; margin: 0 auto 40px; } .step { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--ink-faint); font-weight: 600; } .step__num { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } .step.done .step__num { background: var(--available); border-color: var(--available); color: #fff; } .step.active { color: var(--coral); } .step.active .step__num { background: var(--coral); border-color: var(--coral); color: #fff; } .step__line { flex: 1; height: 2px; background: var(--line); margin: 0 12px; min-width: 30px; } .step__line.done { background: var(--available); } /* ===== Formulaires (réservation) ===== */ .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; } .contact-form .form-group { margin-bottom: 18px; } .contact-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: 0.95rem; font-family: var(--font-body); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); outline: none; background: var(--surface); color: var(--ink); } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,0.14); } .option-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; cursor: pointer; transition: border-color var(--dur) var(--ease); } .option-row:hover { border-color: var(--coral); } .option-row input { width: auto; accent-color: var(--coral); } .option-row__label { flex: 1; font-size: 0.92rem; color: var(--ink); } .option-row__price { font-weight: 700; color: var(--coral); } .contact-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-md); } .contact-info-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 16px; } .co-block { margin-bottom: 24px; } .co-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; } .co-row { display: flex; gap: 16px; } .co-row > .form-group { flex: 1; } .co-summary { position: sticky; top: calc(var(--nav-height) + var(--utility-height) + 20px); align-self: start; } /* Récap réservation (réservation + confirmation) */ .co-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 0.92rem; color: var(--ink-soft); } .co-line--total { border-top: 2px solid var(--line); margin-top: 10px; padding-top: 14px; font-size: 1.15rem; font-weight: 700; color: var(--ink); } .co-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .co-item:last-child { border-bottom: none; } .co-item__img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-blue); border: 1px solid var(--line); flex-shrink: 0; } .co-item__info { flex: 1; min-width: 0; } .co-item__name { font-weight: 600; color: var(--ink); font-size: 0.9rem; } .co-item__meta { font-size: 0.8rem; color: var(--ink-faint); } .co-item__price { font-weight: 700; color: var(--ink); font-size: 0.9rem; white-space: nowrap; } #checkout-items, #order-items { margin-bottom: 10px; } /* ===== Page Header ===== */ .page-header { background-image: var(--grad-hero); color: #fff; padding: 56px 0; } .page-header__title { font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.5px; color: #fff; } .page-header__subtitle { color: rgba(255,255,255,0.8); margin-top: 8px; max-width: 600px; } /* ===== Newsletter ===== */ .newsletter__form { display: flex; max-width: 460px; gap: 10px; margin-top: 16px; } .newsletter__input { flex: 1; padding: 13px 18px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); border-radius: var(--r-sm); font-size: 0.92rem; font-family: var(--font-body); color: #fff; outline: none; } .newsletter__input::placeholder { color: rgba(255,255,255,0.55); } /* ===== Footer ===== */ .footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 60px 0 0; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer__brand { display: inline-block; margin-bottom: 16px; } .footer__brand .logo-word { color: #fff; font-size: 1.6rem; } .footer__brand .logo-word .a { color: var(--sun); } .footer__desc { font-size: 0.88rem; line-height: 1.7; margin-bottom: 20px; max-width: 320px; } .footer__social { display: flex; gap: 10px; } .footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 600; transition: background-color var(--dur) var(--ease); } .footer__social a:hover { background: var(--coral); } .footer__heading { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: #fff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.1em; } .footer__links li { margin-bottom: 10px; } .footer__links a { font-size: 0.88rem; transition: color var(--dur) var(--ease); } .footer__links a:hover { color: var(--sun); } .footer__legal { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.6; border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; text-align: center; font-size: 0.82rem; } .footer__managed { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0; } .footer__managed a { display: inline-flex; align-items: center; transition: opacity var(--dur) var(--ease); } .footer__managed a:hover { opacity: 0.7; } .footer__managed-logo { height: 22px; width: auto; display: block; } /* ===== Entrée au chargement ===== */ @keyframes solea-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero__eyebrow { animation: solea-rise 700ms var(--ease) both; } .hero__title { animation: solea-rise 700ms var(--ease) 60ms both; } .hero__subtitle { animation: solea-rise 700ms var(--ease) 150ms both; } .search-bar { animation: solea-rise 800ms var(--ease) 240ms both; } .page-header__title { animation: solea-rise 700ms var(--ease) backwards; } .page-header__subtitle { animation: solea-rise 700ms var(--ease) 90ms backwards; } .detail { animation: solea-rise 720ms var(--ease) 200ms backwards; } .contact-grid { animation: solea-rise 720ms var(--ease) 200ms backwards; } /* ===== Hovers (souris uniquement) ===== */ @media (hover: hover) and (pointer: fine) { .stay-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .stay-card:hover .stay-card__media img { transform: scale(1.06); } .review-card:hover { box-shadow: var(--shadow-md); } .promise-card:hover { box-shadow: var(--shadow-md); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn:active { transform: scale(0.97); box-shadow: none; } } /* ===== Responsive ===== */ @media (max-width: 1024px) { .stay-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .search-bar { grid-template-columns: 1fr 1fr; } .search-bar__field + .search-bar__field { border-left: none; } .search-bar__btn { grid-column: 1 / -1; } } @media (max-width: 768px) { .hero__title { font-size: clamp(2rem, 9vw, 2.8rem); } .navbar__links { display: none; position: absolute; top: var(--nav-height); left: 16px; right: 16px; flex-direction: column; padding: 14px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); } .navbar__links.open { display: flex; } .navbar__links a { text-align: center; } .navbar__menu-toggle { display: block; } .stay-grid { grid-template-columns: 1fr; } .detail { grid-template-columns: 1fr; } .promise, .contact-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .section { padding: 52px 0; } .steps { flex-wrap: wrap; gap: 10px; } .step__line { display: none; } } @media (max-width: 600px) { .utility-bar .dot, .utility-bar strong { display: none; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .search-bar { grid-template-columns: 1fr; } .newsletter__form { flex-direction: column; } } /* ===== Réduire le mouvement ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ===== Contact — bloc « Posez une question » (chat Tolk embarqué en fixe) ===== */ .ask { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; } .ask__copy { max-width: 520px; } .ask__title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; color: var(--ink); line-height: 1.1; margin-bottom: 16px; } .ask__lead { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin-bottom: 24px; } .ask__lead strong { color: var(--ink); font-weight: 700; } .ask__hint { font-size: 0.9rem; font-weight: 600; color: var(--ink-faint); margin-bottom: 12px; } .ask-chips { display: flex; flex-wrap: wrap; gap: 10px; } .ask-chip { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 0.88rem; text-align: left; color: var(--lagoon-deep); background: var(--lagoon-tint); border: 1px solid var(--line); padding: 8px 15px; border-radius: var(--r-pill); line-height: 1.3; cursor: pointer; transition: background-color .22s cubic-bezier(.22,1,.36,1), border-color .22s cubic-bezier(.22,1,.36,1), color .22s cubic-bezier(.22,1,.36,1), transform .14s cubic-bezier(.22,1,.36,1); } .ask-chip::after { content: "\2192"; font-size: 0.95em; opacity: 0.5; transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s cubic-bezier(.22,1,.36,1); } .ask-chip:active { transform: scale(0.96); } .ask-chip:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; } .ask-window { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; } .ask-window__bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--ink); border-bottom: 1px solid rgba(0,0,0,0.15); } .ask-window__dots { display: flex; gap: 7px; } .ask-window__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.3); } .ask-window__dot:first-child { background: var(--coral); } .ask-window__dot:nth-child(2) { background: var(--sun); } .ask-window__dot:nth-child(3) { background: var(--lagoon); } .ask-window__body { position: relative; background: #fff; } /* Widget Tolk (template "fullscreen") injecté ici — hauteur fixe = cadre stable. SCOPÉ à .ask-window__body : ailleurs, le widget flottant crée son propre #lightchat-container sur le ; ne pas forcer son iframe en plein écran. */ .ask-window__body #lightchat-container { width: 100%; height: 480px; display: block; } .ask-window__body #lightchat-container iframe { width: 100% !important; height: 100% !important; border: 0; display: block; } @media (hover: hover) and (pointer: fine) { .ask-chip:hover { background: var(--lagoon); border-color: var(--lagoon); color: #fff; } .ask-chip:hover::after { transform: translateX(3px); opacity: 1; } } @media (max-width: 860px) { .ask { grid-template-columns: 1fr; gap: 34px; } .ask__copy { max-width: none; } }