/* ============================================================ DzStay — Design System v2 Thèmes : sahara | mediterranee | casbah | nuit Le thème actif est appliqué via ============================================================ */ :root { --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06); --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 10px 30px rgba(15, 23, 42, .10); --shadow-lg: 0 24px 60px rgba(15, 23, 42, .18); --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --transition: all .22s cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } html[dir="rtl"] body { font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif; } /* ---------- Thème Voyara (marque, par défaut) : navy, azur & orange ---------- */ :root, [data-theme="voyara"] { --primary: #0a66d6; --primary-hover: #0850ae; --primary-soft: #e4f0ff; --accent: #f97316; --accent-soft: #fff0e2; --bg: #f6f9fd; --bg-alt: #eaf1fa; --surface: #ffffff; --text: #0d1f4a; --text-muted: #64748b; --border: #dbe6f4; --hero-grad: linear-gradient(130deg, #05123a 0%, #0a2a78 42%, #0b6fd8 78%, #12a2f0 118%); --btn-grad: linear-gradient(135deg, #0b7be8, #0a57c4); --nav-glass: rgba(246, 249, 253, .82); } /* ---------- Thème Sahara ---------- */ [data-theme="sahara"] { --primary: #c2410c; --primary-hover: #9a3412; --primary-soft: #ffedd5; --accent: #f59e0b; --accent-soft: #fef3c7; --bg: #fdf9f3; --bg-alt: #f7efe3; --surface: #ffffff; --text: #292018; --text-muted: #8c7a6b; --border: #eee0cd; --hero-grad: linear-gradient(130deg, #431407 0%, #7c2d12 35%, #c2410c 70%, #f59e0b 115%); --btn-grad: linear-gradient(135deg, #ea580c, #c2410c); --nav-glass: rgba(253, 249, 243, .8); } /* ---------- Thème Méditerranée ---------- */ [data-theme="mediterranee"] { --primary: #0e7490; --primary-hover: #155e75; --primary-soft: #cffafe; --accent: #38bdf8; --accent-soft: #e0f2fe; --bg: #f6fbfd; --bg-alt: #e8f4f9; --surface: #ffffff; --text: #10242c; --text-muted: #64858f; --border: #d9eaf1; --hero-grad: linear-gradient(130deg, #082f49 0%, #0c4a6e 35%, #0e7490 70%, #38bdf8 115%); --btn-grad: linear-gradient(135deg, #0891b2, #0e7490); --nav-glass: rgba(246, 251, 253, .8); } /* ---------- Thème Casbah ---------- */ [data-theme="casbah"] { --primary: #166534; --primary-hover: #14532d; --primary-soft: #dcfce7; --accent: #ca8a04; --accent-soft: #fef9c3; --bg: #f8f7f1; --bg-alt: #eeece0; --surface: #ffffff; --text: #1c2419; --text-muted: #75806d; --border: #e2dfcd; --hero-grad: linear-gradient(130deg, #052e16 0%, #14532d 35%, #166534 70%, #ca8a04 118%); --btn-grad: linear-gradient(135deg, #16a34a, #166534); --nav-glass: rgba(248, 247, 241, .8); } /* ---------- Thème Nuit d'Alger ---------- */ [data-theme="nuit"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-soft: #272b52; --accent: #fbbf24; --accent-soft: #3d3320; --bg: #0d1526; --bg-alt: #131e36; --surface: #182339; --text: #e8edf8; --text-muted: #93a1bd; --border: #263551; --hero-grad: linear-gradient(130deg, #0a0f22 0%, #131c40 40%, #2b3a8c 75%, #4f46e5 120%); --btn-grad: linear-gradient(135deg, #6366f1, #4f46e5); --nav-glass: rgba(13, 21, 38, .8); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6); } [data-theme="nuit"] .btn-primary { color: #fff; } /* ============================ Base ============================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5rem; font-weight: 800; letter-spacing: -.015em; } .container { max-width: 1220px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); } .container-narrow { max-width: 880px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); } .muted { color: var(--text-muted); } .small { font-size: .85rem; } .text-center { text-align: center; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } .wrap { flex-wrap: wrap; } .grow { flex: 1; } .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* Icônes SVG inline */ .icon { flex-shrink: 0; vertical-align: -3px; } .icon-primary { color: var(--primary); } .icon-accent { color: var(--accent); } /* Isolation LTR des nombres en contexte RTL */ bdi, .ltr-num { unicode-bidi: isolate; direction: ltr; } /* ============================ Boutons ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.45rem; border-radius: 12px; border: 1.5px solid transparent; font-family: inherit; font-size: .94rem; font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; letter-spacing: .01em; } .btn-primary { background: var(--btn-grad); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 45%, transparent); } .btn-primary:active { transform: translateY(0); } .btn-accent { background: var(--accent); color: #241a02; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-accent:hover { filter: brightness(1.05); transform: translateY(-2px); } .btn-outline { border-color: var(--border); background: var(--surface); color: var(--text); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface)); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--bg-alt); color: var(--text); } .btn-danger { background: #dc2626; color: #fff; } .btn-danger:hover { background: #b91c1c; } .btn-sm { padding: .4rem .9rem; font-size: .82rem; border-radius: 9px; } .btn-lg { padding: .95rem 2.1rem; font-size: 1.04rem; border-radius: 14px; } .btn-block { width: 100%; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } /* ============================ Formulaires ============================ */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .83rem; font-weight: 700; margin-bottom: .4rem; } .input, .select, .textarea { width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-family: inherit; font-size: .94rem; transition: var(--transition); } .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); } .textarea { min-height: 120px; resize: vertical; } .error-text { color: #dc2626; font-size: .82rem; margin-top: .3rem; } .checkbox-row { display: flex; align-items: center; gap: .55rem; font-size: .92rem; } .checkbox-row input { width: 17px; height: 17px; accent-color: var(--primary); } /* ============================ Cartes ============================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .card-body { padding: 1.5rem; } .card-hover { transition: transform .28s var(--ease-spring), box-shadow .28s ease, border-color .28s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); } /* ------ Carte propriété / voyage ------ */ .prop-card { overflow: hidden; display: flex; flex-direction: column; } .prop-card .prop-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); } .prop-card .prop-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.25, .46, .45, .94); } .prop-card:hover .prop-img img { transform: scale(1.07); } .prop-card .prop-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(2, 6, 23, .45)); pointer-events: none; } .prop-card .prop-badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; } .prop-card .prop-price-tag { position: absolute; bottom: 12px; inset-inline-start: 12px; background: rgba(255, 255, 255, .94); color: #0f172a; backdrop-filter: blur(8px); padding: .34rem .85rem; border-radius: 999px; font-weight: 800; font-size: .86rem; z-index: 2; box-shadow: var(--shadow-sm); } .prop-card .card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .prop-card h3 { font-size: 1.05rem; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .prop-card .prop-meta { display: flex; gap: .9rem; flex-wrap: wrap; color: var(--text-muted); font-size: .81rem; margin-top: .3rem; } .prop-card .prop-meta span { display: inline-flex; align-items: center; gap: .32rem; } /* Carte voyage : bandeau date */ .trip-dates { display: inline-flex; align-items: center; gap: .45rem; background: var(--primary-soft); color: var(--primary); border-radius: 10px; padding: .35rem .75rem; font-size: .8rem; font-weight: 700; } .seats-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .28rem .7rem; border-radius: 999px; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 55%, var(--text)); } /* ============================ Badges ============================ */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .73rem; font-weight: 800; letter-spacing: .02em; } .badge .icon { vertical-align: 0; } .badge-primary { background: var(--primary-soft); color: var(--primary); } .badge-accent { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 58%, var(--text)); } .badge-success { background: #dcfce7; color: #15803d; } .badge-warning { background: #fef3c7; color: #b45309; } .badge-danger { background: #fee2e2; color: #b91c1c; } .badge-info { background: #dbeafe; color: #1d4ed8; } .badge-muted { background: var(--bg-alt); color: var(--text-muted); } [data-theme="nuit"] .badge-success { background: #14351f; color: #4ade80; } [data-theme="nuit"] .badge-warning { background: #38290a; color: #fbbf24; } [data-theme="nuit"] .badge-danger { background: #3b1414; color: #f87171; } [data-theme="nuit"] .badge-info { background: #17264d; color: #93c5fd; } /* ============================ Navbar ============================ */ .navbar { position: sticky; top: 0; z-index: 50; background: var(--nav-glass); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--border); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 70px; } .logo { display: flex; align-items: center; gap: .6rem; font-size: 1.28rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; } .logo .logo-mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--hero-grad); color: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); } .logo em { color: var(--primary); font-style: normal; } .nav-links { display: flex; align-items: center; gap: .25rem; } .nav-links > a { display: inline-flex; align-items: center; gap: .45rem; padding: .52rem .95rem; border-radius: 11px; font-weight: 600; font-size: .92rem; color: var(--text-muted); transition: var(--transition); } .nav-links > a:hover, .nav-links > a.active { color: var(--primary); background: var(--primary-soft); } /* Burger mobile */ .nav-toggle { display: none; background: none; border: 1.5px solid var(--border); border-radius: 10px; padding: .45rem .55rem; color: var(--text); cursor: pointer; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 70px; inset-inline: 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: .8rem; gap: .3rem; display: none; } .nav-links.open { display: flex; } .nav-links > a { padding: .8rem 1rem; } .nav-links .dropdown { width: 100%; } .nav-links .dropdown > button { width: 100%; justify-content: flex-start; } } /* Menu déroulant */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .45rem; display: none; z-index: 60; animation: dropIn .18s ease; } @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .dropdown.open .dropdown-menu { display: block; } .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .85rem; border: 0; background: none; border-radius: 9px; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text); cursor: pointer; text-align: start; } .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-alt); } @media (max-width: 860px) { .dropdown-menu { position: static; box-shadow: none; border: 0; padding-inline-start: 1.4rem; } } /* ============================ Hero ============================ */ .hero { background: var(--hero-grad); color: #fff; padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(6rem, 11vw, 8.5rem); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px); background-size: 26px 26px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 42% at 80% 12%, rgba(255, 255, 255, .16), transparent), radial-gradient(ellipse 45% 40% at 8% 90%, rgba(255, 255, 255, .1), transparent); pointer-events: none; } .hero .hero-kicker { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); border-radius: 999px; padding: .35rem 1rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.2rem; } .hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: .9rem; max-width: 720px; } .hero p { font-size: clamp(1rem, 2vw, 1.16rem); opacity: .92; max-width: 640px; margin: 0; } /* Barre de recherche */ .search-bar { position: relative; z-index: 5; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.1rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr auto; gap: .75rem; margin-top: -3.8rem; border: 1px solid var(--border); } .search-bar .field { margin: 0; } .search-bar label { display: flex; align-items: center; gap: .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); } @media (max-width: 980px) { .search-bar { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .search-bar { grid-template-columns: 1fr; } } /* ============================ Sections ============================ */ .section { padding: clamp(3rem, 7vw, 4.5rem) 0 1rem; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .section-head h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0; display: flex; align-items: center; gap: .6rem; } .section-head h2 .icon { color: var(--primary); } .section-head .muted { margin-top: .3rem; } /* Destination card */ .dest-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 1.2rem; color: #fff; background: var(--hero-grad); box-shadow: var(--shadow-sm); transition: transform .28s var(--ease-spring), box-shadow .28s ease; } .dest-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-lg); } .dest-card .dest-name { font-weight: 800; font-size: 1.18rem; z-index: 1; } .dest-card .dest-count { font-size: .8rem; opacity: .9; z-index: 1; } .dest-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(2, 6, 23, .6)); } /* Feature card */ .feature { text-align: center; padding: 2.2rem 1.5rem; } .feature .feature-icon { width: 64px; height: 64px; margin: 0 auto 1.1rem; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); border-radius: 20px; } /* ============================ Fiche propriété / voyage ============================ */ .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: .75rem; border-radius: var(--radius-lg); overflow: hidden; } .gallery .gallery-item { position: relative; display: block; overflow: hidden; background: var(--bg-alt); border: 0; padding: 0; cursor: zoom-in; width: 100%; height: 100%; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .gallery .gallery-item:hover img { transform: scale(1.05); } .gallery .gallery-item:first-child { grid-row: span 2; } .gallery .gallery-item .gallery-zoom { position: absolute; bottom: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #0f172a; opacity: 0; transition: var(--transition); } .gallery .gallery-item:hover .gallery-zoom { opacity: 1; } .gallery .gallery-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2, 6, 23, .55); color: #fff; font-weight: 800; font-size: 1.15rem; } @media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 130px; } .gallery .gallery-item:first-child { grid-column: span 2; grid-row: 1; } .gallery .gallery-item:nth-child(n+4) { display: none; } } .amenity-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; padding: .45rem 1rem; font-size: .87rem; font-weight: 600; } .amenity-chip .icon { color: var(--primary); } /* Widget de réservation */ .booking-widget { position: sticky; top: 92px; } .booking-widget .price-line { display: flex; justify-content: space-between; font-size: .92rem; padding: .3rem 0; } .booking-widget .price-total { border-top: 1.5px solid var(--border); margin-top: .6rem; padding-top: .75rem; font-weight: 800; font-size: 1.08rem; display: flex; justify-content: space-between; } .star { color: var(--accent); } /* Itinéraire de voyage */ .itinerary { border-inline-start: 2.5px solid var(--primary-soft); padding-inline-start: 1.3rem; margin: .8rem 0; } .itinerary p { position: relative; margin: 0 0 .9rem; } .itinerary p::before { content: ''; position: absolute; inset-inline-start: calc(-1.3rem - 8px); top: .5rem; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .include-list { list-style: none; padding: 0; margin: .4rem 0; } .include-list li { display: flex; align-items: flex-start; gap: .55rem; padding: .28rem 0; font-size: .92rem; } .include-list .icon { margin-top: .22rem; } /* Avis */ .review-item { border-bottom: 1px solid var(--border); padding: 1.2rem 0; } .review-item:last-child { border-bottom: 0; } .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; } /* ============================ Lightbox (galerie pro) ============================ */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4, 8, 20, .93); backdrop-filter: blur(10px); display: none; flex-direction: column; user-select: none; } .lightbox.open { display: flex; animation: lbIn .22s ease; } @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } } .lightbox-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; color: #e2e8f0; font-weight: 700; font-size: .9rem; flex-shrink: 0; } .lightbox-stage { flex: 1; position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; } .lightbox-stage img { max-width: min(94vw, 1400px); max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .3s ease; transform-origin: center; border-radius: 6px; } .lightbox-stage img.zoomed { cursor: grab; transition: none; } .lightbox-stage img.dragging { cursor: grabbing; } .lightbox-btn { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; transition: var(--transition); } .lightbox-btn:hover { background: rgba(255, 255, 255, .22); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } .lightbox-nav.prev { inset-inline-start: 1rem; } .lightbox-nav.next { inset-inline-end: 1rem; } .lightbox-thumbs { display: flex; gap: .5rem; padding: .9rem 1.3rem 1.1rem; justify-content: center; overflow-x: auto; flex-shrink: 0; } .lightbox-thumbs img { width: 68px; height: 48px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .45; border: 2px solid transparent; transition: var(--transition); } .lightbox-thumbs img.active { opacity: 1; border-color: #fff; } .lightbox-thumbs img:hover { opacity: .85; } .lightbox-hint { color: rgba(255,255,255,.55); font-size: .75rem; font-weight: 500; } @media (max-width: 640px) { .lightbox-nav.prev { inset-inline-start: .4rem; } .lightbox-nav.next { inset-inline-end: .4rem; } .lightbox-hint { display: none; } } /* ============================ Tables ============================ */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); } table.table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; } .table th { text-align: start; padding: .85rem 1.05rem; background: var(--bg-alt); color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .table td { padding: .9rem 1.05rem; border-top: 1px solid var(--border); vertical-align: middle; } .table tr:hover td { background: color-mix(in srgb, var(--bg-alt) 42%, transparent); } /* ============================ Alerts / Flash ============================ */ .alert { display: flex; align-items: flex-start; gap: .6rem; padding: .95rem 1.25rem; border-radius: 13px; font-size: .92rem; font-weight: 600; margin-bottom: 1.2rem; border: 1px solid transparent; } .alert .icon { margin-top: .12rem; } .alert-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; } .alert-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; } [data-theme="nuit"] .alert-success { background: #10331d; color: #6ee7a0; border-color: #1d5232; } [data-theme="nuit"] .alert-error { background: #3b1414; color: #fca5a5; border-color: #642424; } /* ============================ Pagination ============================ */ .pagination { display: flex; gap: .4rem; justify-content: center; margin: 2.2rem 0; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding-inline: .6rem; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface); font-size: .88rem; font-weight: 700; transition: var(--transition); } .pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); } .pagination a:hover { border-color: var(--primary); color: var(--primary); } /* ============================ Footer ============================ */ .footer { background: var(--bg-alt); border-top: 1px solid var(--border); margin-top: 5rem; padding: 3.4rem 0 1.7rem; } .footer h4 { font-size: .95rem; margin-bottom: .9rem; } .footer a { display: flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .9rem; padding: .26rem 0; transition: var(--transition); } .footer a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--border); margin-top: 2.4rem; padding-top: 1.5rem; font-size: .84rem; color: var(--text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } /* ============================ Admin ============================ */ .admin-layout { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; } .admin-sidebar { background: var(--surface); border-inline-end: 1px solid var(--border); padding: 1.3rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-sidebar .logo { margin-bottom: 1.7rem; padding-inline: .5rem; font-size: 1.1rem; } .admin-nav a { display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem; border-radius: 11px; color: var(--text-muted); font-weight: 600; font-size: .9rem; margin-bottom: .15rem; transition: var(--transition); } .admin-nav a:hover { background: var(--bg-alt); color: var(--text); } .admin-nav a.active { background: var(--primary-soft); color: var(--primary); } .admin-nav .nav-section { font-size: .67rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); padding: 1.2rem .9rem .45rem; font-weight: 800; } .admin-main { padding: 2rem 2.3rem 3rem; min-width: 0; background: var(--bg); } .admin-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.9rem; flex-wrap: wrap; } .admin-header h1 { font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .admin-header h1 .icon { color: var(--primary); } @media (max-width: 900px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--border); } .admin-nav { display: flex; flex-wrap: wrap; gap: .2rem; } .admin-nav .nav-section { display: none; } .admin-main { padding: 1.4rem 1.2rem 2.5rem; } } /* Stat cards */ .stat-card { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 3px; background: var(--btn-grad); opacity: .8; } .stat-card .stat-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--text-muted); } .stat-card .stat-label .icon { color: var(--primary); } .stat-card .stat-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; } /* Graphique en barres */ .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: .5rem; } .bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; height: 100%; justify-content: flex-end; } .bar-chart .bar { width: 100%; max-width: 44px; background: var(--btn-grad); border-radius: 7px 7px 2px 2px; min-height: 3px; opacity: .88; transition: var(--transition); } .bar-chart .bar:hover { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; } .bar-chart .bar-label { font-size: .65rem; color: var(--text-muted); white-space: nowrap; } /* Sélecteur de thème */ .theme-card { border: 2.5px solid var(--border); border-radius: var(--radius); padding: 1.25rem; cursor: pointer; transition: var(--transition); background: var(--surface); } .theme-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); } .theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); } .theme-swatches { display: flex; gap: .45rem; margin: .75rem 0; } .theme-swatches span { width: 36px; height: 36px; border-radius: 11px; border: 1px solid rgba(0,0,0,.08); } /* Images admin */ .img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; } .img-grid .img-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--border); } .img-grid .img-item img { width: 100%; height: 100%; object-fit: cover; } .img-grid .img-actions { position: absolute; inset-inline: 0; bottom: 0; display: flex; gap: .3rem; padding: .45rem; background: linear-gradient(transparent, rgba(2,6,23,.7)); justify-content: flex-end; } /* Étoiles de notation */ .rating-input { display: flex; flex-direction: row-reverse; gap: .2rem; justify-content: flex-end; } .rating-input input { display: none; } .rating-input label { font-size: 1.7rem; color: var(--border); cursor: pointer; transition: color .15s; line-height: 1; } .rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { color: var(--accent); } /* Auth pages */ .auth-wrap { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 2.5rem 1rem; } .auth-card { width: 100%; max-width: 440px; } /* Flatpickr harmonisation */ .flatpickr-calendar { font-family: inherit; border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* ============================ Carte interactive ============================ */ .map-page { position: relative; height: calc(100vh - 70px); min-height: 560px; overflow: hidden; } .map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: var(--bg-alt); } .map-panel { position: absolute; top: 20px; inset-inline-start: 20px; z-index: 20; width: 340px; max-width: calc(100% - 40px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: calc(100% - 40px); overflow: hidden; } .map-panel-head { padding: 1.3rem 1.4rem 1rem; } .map-panel-head h1 { font-size: 1.3rem; margin: .7rem 0 .3rem; } .map-panel-head .hero-kicker { text-transform: uppercase; } .map-stats { display: flex; gap: .6rem; margin-top: 1rem; } .map-stat { flex: 1; background: var(--bg-alt); border-radius: var(--radius-sm); padding: .6rem .5rem; text-align: center; } .map-stat strong { display: block; font-size: 1.25rem; color: var(--primary); } .map-stat span { font-size: .72rem; color: var(--text-muted); } .map-search { display: flex; align-items: center; gap: .5rem; padding: 0 1.4rem 1rem; } .map-search .input { border-radius: 999px; } .map-list { overflow-y: auto; padding: 0 .8rem 1rem; display: flex; flex-direction: column; gap: .3rem; } .map-list-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .85rem; border: 0; background: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text); transition: var(--transition); text-align: start; } .map-list-item:hover { background: var(--bg-alt); } .map-list-name { display: flex; align-items: center; gap: .4rem; } /* Markers personnalisés */ .dz-marker-wrap { background: none; border: 0; } .dz-marker { width: 100%; height: 100%; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(2, 6, 23, .35); border: 2.5px solid #fff; transition: transform .2s var(--ease-spring); } .dz-marker span { transform: rotate(45deg); font-weight: 800; font-size: .88rem; } .dz-marker-wrap:hover .dz-marker { transform: rotate(-45deg) scale(1.12); } /* Popups Leaflet stylés */ .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--surface); color: var(--text); } .leaflet-popup-content { margin: .9rem 1rem; font-family: var(--font-sans); } .leaflet-popup-tip { background: var(--surface); } .map-popup-head { font-weight: 800; font-size: 1rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; } .map-popup-head span { background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: .05rem .55rem; font-size: .78rem; } .map-offer { display: flex; gap: .6rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--border); } .map-offer img { width: 48px; height: 40px; object-fit: cover; border-radius: 8px; } .map-offer strong { display: block; font-size: .84rem; line-height: 1.25; } .map-offer span { font-size: .8rem; color: var(--primary); font-weight: 700; } .leaflet-container a.map-offer { color: var(--text); } @media (max-width: 720px) { .map-page { height: auto; min-height: 0; display: flex; flex-direction: column; } .map-canvas { position: relative; height: 55vh; order: 2; } .map-panel { position: relative; inset: auto; width: 100%; max-width: 100%; max-height: none; border-radius: 0; border-inline: 0; border-top: 0; box-shadow: none; order: 1; } .map-list { max-height: 240px; } } /* Divers */ .divider { border: 0; border-top: 1px solid var(--border); margin: 1.7rem 0; } .empty-state { text-align: center; padding: 3.6rem 1rem; color: var(--text-muted); } .empty-state .empty-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 22px; background: var(--bg-alt); color: var(--text-muted); } /* Animation d'apparition douce des sections */ @media (prefers-reduced-motion: no-preference) { .section > .container > * { animation: fadeUp .5s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } }