/* ============================================================ Les Gîtes Lanmou — Styles (refactor B) Objectif: code réorganisé + duplication réduite, rendu visuel inchangé. Note: l'ordre de cascade des règles (hors :root) est conservé pour garantir le rendu. ============================================================ */ /* ---------------------------- Design tokens ---------------------------- */ :root { --sand: #FAF6EF; --text: #1E1E1E; --ds-green: var(--text); --muted: #6B625A; --blue: #2C7DA0; --max: 1100px; --radius: 16px; --glass-tint: rgba(46,111,91,0.10); --glass-inner: inset 0 1px 0 rgba(255,255,255,0.55); --focus: rgba(44,125,160,0.35); --link-icon: #B77746; --btn-green: #5EA575; --blur: 14px; --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-strong: rgba(255, 255, 255, 0.80); --glass-border: rgba(255, 255, 255, 0.62); --glass-shadow: 0 12px 34px rgba(0,0,0,0.09); --hover-gold: #D9B45A; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 26px; --space-6: 34px; --green: #55B38B; --green-light: #9BCDBB; --green-mint: #CADED2; --green-pastel: #E3F4EE; --gold: #D3AC85; --white: #FEFEFE; } * { box-sizing: border-box; } html,body { margin: 0; padding: 0; } /* --- Top background image (home banner) --- */ .top-bg{ position: absolute; top: 0; left: 0; right: 0; height: 420px; /* fallback (JS ajuste la hauteur) */ pointer-events: none; overflow: hidden; } .top-bg::before{ content: ""; position: absolute; inset: 0; /* Image de fond */ background-image: url("images/Home_ban.jpeg"); background-repeat: no-repeat; background-position: center top; /* Pleine largeur de page, sans recadrage */ background-size: cover; opacity: 1; } body { position: relative; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color: var(--text); line-height: 1.5; background: radial-gradient(900px 520px at 14% 10%, rgba(44,125,160,0.14), transparent 60%), radial-gradient(900px 520px at 86% 18%, rgba(46,111,91,0.14), transparent 60%), radial-gradient(900px 760px at 40% 92%, rgba(217,180,90,0.10), transparent 60%), var(--sand); } a { text-decoration: none; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 18px; } /* --- Responsive safety --- */ img{ max-width:100%; height:auto; } video{ max-width:100%; height:auto; } svg{ max-width:100%; height:auto; } iframe{ max-width:100%; } :where(p,li,a,span){ overflow-wrap:anywhere; word-break:break-word; } .header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, var(--glass-bg-strong), rgba(255,255,255,0.46)); border-bottom: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(1.25); -webkit-backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(1.25); } .header-inner { display: flex; justify-content: space-between; } .brand { display: flex; flex-direction: column; gap: 2px; } .brand .name { font-weight: 800; } .brand .place { color: var(--muted); } .nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .nav a { padding: 8px 10px; border-radius: 12px; } .nav a.active { background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.38)); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 8px 22px rgba(0,0,0,0.05), var(--glass-inner); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } .main { padding: 18px 0 40px; } .card { background: linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,0.34)), linear-gradient(180deg, var(--glass-tint), transparent); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow), var(--glass-inner); backdrop-filter: blur(var(--blur)) saturate(1.18); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.18); transition: transform 160ms ease, box-shadow 160ms ease; } .card:hover { transform: translateY(-1px); } .card h1,.card h2,.card h3 { margin: 0 0 10px 0; } .card p:last-child { margin-bottom: 0; } .grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width:880px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3,1fr); } } .hero { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.22)); box-shadow: var(--glass-shadow); } .hero img { width: 100%; height: 320px; object-fit: cover; display: block; border-bottom: 1px solid rgba(255,255,255,0.45); } .hero-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; background-color: rgba(255,255,255,0.85); } .hero-title { font-weight: 900; } .btn-row { display: flex; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.60); background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)); box-shadow: 0 10px 26px rgba(0,0,0,0.07), var(--glass-inner); backdrop-filter: blur(var(--blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); cursor: pointer; } .btn:hover { transform: translateY(-1px); } .btn.primary { background: linear-gradient(180deg, rgba(46,111,91,0.95), rgba(46,111,91,0.78)); } .btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus), var(--glass-inner); } .kv { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); } .kv strong { color: var(--text); } .icon-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; } @media (min-width:620px) { .icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (min-width:980px) { .icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } } .icon-item { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.32)); backdrop-filter: blur(var(--blur)) saturate(1.12); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.12); } .icon-item i { text-align: center; } .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (min-width:720px) { .gallery { grid-template-columns: repeat(3,1fr); } } .gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.35); box-shadow: 0 10px 22px rgba(0,0,0,0.05); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width:820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .form { display: grid; gap: 12px; } .field { display: grid; gap: 6px; } label { font-size: .95rem; color: var(--muted); } input,textarea { width: 100%; border: 1px solid rgba(255,255,255,0.55); border-radius: 14px; padding: 10px 12px; font: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.40)); box-shadow: 0 10px 22px rgba(0,0,0,0.05), var(--glass-inner); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } textarea { min-height: 130px; resize: vertical; } .note,.small { font-size: .92rem; color: var(--muted); } body { font-size: 100%; } h1 { font-size: 2.0rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.1rem; } .btn { padding: 8px 12px; border-radius: 12px; } .card { margin-bottom: 18px; } .grid, .grid-2, .grid-3 { grid-template-columns: 1fr !important; } section { margin-bottom: 28px; } a { color: var(--link-icon); } a:hover { opacity: .9; } .icon-item i, .btn i, .nav a, .brand .name { color: var(--link-icon); } .btn.primary { background: linear-gradient(180deg, rgba(94,165,117,0.95), rgba(94,165,117,0.80)); } .btn.primary i, .btn.primary span { color: #fff; } .icon-item { background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.38)); } .icon-item i { color: var(--link-icon); } .section { scroll-margin-top: 92px; } .menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); box-shadow: 0 10px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.55); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); cursor: pointer; align-items: center; justify-content: center; gap: 6px; } .menu-toggle .bar { width: 18px; height: 2px; background: var(--link-icon); border-radius: 999px; display: block; } .menu-panel { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 820px) { .menu-toggle { display: inline-flex; } .menu-panel { width: 100%; display: none; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42)); box-shadow: 0 10px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.55); backdrop-filter: blur(calc(var(--blur) + 6px)); -webkit-backdrop-filter: blur(calc(var(--blur) + 6px)); } .menu-panel.open { display: flex; } .nav a { display: flex; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.45); } .header-inner { flex-wrap: wrap; align-items: flex-start; } } .decor { position: absolute; pointer-events: none; opacity: 0.22; filter: blur(0.1px); } .decor.top-left { top: -18px; left: -12px; } .decor.top-right { top: -18px; right: -12px; } .decor.bottom-left { bottom: -18px; left: -12px; } .decor.bottom-right { bottom: -18px; right: -12px; } .decor svg { width: 140px; height: auto; } @media (max-width: 520px) { .decor svg { width: 110px; } } .decor path, .decor circle, .decor line { stroke: var(--link-icon); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .decor .fill { fill: rgba(183,119,70,0.12); stroke: var(--link-icon); } .card.decorated { position: relative; overflow: hidden; } .card.decorated::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 220px at 10% 10%, rgba(183,119,70,0.10), transparent 55%), radial-gradient(400px 220px at 90% 90%, rgba(94,165,117,0.10), transparent 55%); pointer-events: none; } html { scroll-behavior: smooth; } .card p { color: rgba(30,30,30,0.78); } .note, .small, label { color: rgba(30,30,30,0.62); } .hero { position: relative; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.42)); pointer-events: none; } .hero-body { position: relative; z-index: 1; } .icon-item i { opacity: 0.95; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.06)); } .btn { transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55); } .btn:active { transform: translateY(0px); opacity: 0.95; } @media (max-width: 520px) { :root { --blur: 12px; } .hero img { height: 260px; } } @media (prefers-reduced-transparency: reduce) { .card, .header, .btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,0.92) !important; } } .section-pair { display: grid; gap: 18px; } @media (max-width: 820px) { .section-pair { grid-template-columns: 1fr; } } .section-pair { grid-template-columns: 1fr 1.15fr; } @keyframes softIn { from { opacity: 0; transform: translateY(10px) scale(0.995); filter: saturate(0.98); } to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); } } .card { animation: softIn 520ms ease both; } .card:nth-of-type(1) { animation-delay: 0ms; } .card:nth-of-type(2) { animation-delay: 60ms; } .card:nth-of-type(3) { animation-delay: 120ms; } .card:nth-of-type(4) { animation-delay: 180ms; } .card:nth-of-type(5) { animation-delay: 240ms; } .card:nth-of-type(6) { animation-delay: 300ms; } .card:nth-of-type(7) { animation-delay: 360ms; } .card:nth-of-type(8) { animation-delay: 420ms; } .card:nth-of-type(9) { animation-delay: 480ms; } @media (prefers-reduced-motion: reduce) { .card { animation: none !important; transform: none !important; } } .icon-grid.wide { grid-template-columns: 1fr !important; } a:hover { color: var(--hover-gold); } body { background: #FFFFFF !important; } .icon-grid.included .icon-item { justify-content: space-between; } .icon-grid.included .icon-item::after { content: "✓"; font-weight: 800; color: #5EA575; opacity: 0.95; margin-left: 10px; } .card h2, .card h1 { color: var(--link-icon); letter-spacing: 0.2px; } .card h2 { position: relative; padding-bottom: 8px; margin-bottom: 12px; } .card h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(183,119,70,0.95), rgba(217,180,90,0.75)); } .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 2000; } .lightbox.open { display: flex; } .lightbox-panel { width: min(980px, 100%); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.20); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 80px rgba(0,0,0,0.25); } .lightbox-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.55); } .lightbox-title { font-weight: 700; color: rgba(30,30,30,0.82); font-size: 0.98rem; } .lightbox-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.65); cursor: pointer; } .lightbox-close i { color: var(--link-icon); } .lightbox-media { background: rgba(255,255,255,0.25); } .lightbox-media img, .lightbox-media video { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; background: rgba(0,0,0,0.05); } .desirade-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 920px) { .desirade-layout { grid-template-columns: 1fr; } .slide-viewport { aspect-ratio: 4 / 3; } } .form.simple .grid { gap: 12px; } .form.simple .field { gap: 6px; } .card h2 { transition: color 180ms ease, filter 180ms ease; } .card h2:hover { color: #5EA575; filter: drop-shadow(0 8px 18px rgba(217,180,90,0.18)); } .card h2:hover::after { background: linear-gradient(90deg, rgba(94,165,117,0.95), rgba(217,180,90,0.85)); } .icon-item { min-height: 38px; } .icon-item span { font-size: 0.95rem; } .icon-item i { width: 16px; } .presentation-sub { font-size: 0.98rem; color: rgba(30,30,30,0.78); margin: 6px 0 14px; max-width: 72ch; } .comments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px auto 10px; max-width: 80%; } @media (max-width: 900px) { .comments-grid { grid-template-columns: 1fr; max-width: 100%; } } .comment-box { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42)); border: 1px solid rgba(255,255,255,0.60); backdrop-filter: blur(var(--blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); box-shadow: 0 10px 26px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55); } .comment-box p { margin: 0; font-style: italic; color: rgba(30,30,30,0.75); line-height: 1.55; } .comment-avatar { width: 42px; height: 42px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.60); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); } .comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .comment-avatar::after { content: "🌿"; position: absolute; transform: translate(28px, 28px); font-size: 0.85rem; opacity: 0.55; } @keyframes softCommentIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .comment-box { animation: softCommentIn 520ms ease both; } .comments-grid .comment-box:nth-child(1) { animation-delay: 0ms; } .comments-grid .comment-box:nth-child(2) { animation-delay: 90ms; } @media (prefers-reduced-motion: reduce) { .comment-box { animation: none !important; transform: none !important; } } .signature { margin: 14px 0 6px; text-align: right; color: var(--ds-green); font-family: "Dancing Script", ui-serif, serif; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.2px; } @media (max-width: 820px) { .comment-box { grid-template-columns: 34px 1fr; } .comment-avatar { width: 34px; height: 34px; } } .comment-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid rgba(0,155,77,0.35); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .comment-avatar:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,155,77,0.18); border-color: rgba(255,204,0,0.6); } .comment-label { font-size: 0.65rem; text-align: center; line-height: 1.1; color: rgba(0,0,0,0.55); white-space: nowrap; } .presentation h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin-bottom: 8px; } .presentation .presentation-sub { font-size: clamp(0.98rem, 1.35vw, 1.12rem); line-height: 1.55; color: rgba(30,30,30,0.78); max-width: 70ch; margin: 0 auto 14px; } .presentation .comments-grid { max-width: 80%; margin: 12px auto 8px; justify-items: stretch; } .presentation .comment-box { width: 100%; } .presentation .comment-avatar { align-self: start; } .presentation .comment-box p { font-size: 0.94rem; line-height: 1.55; color: rgba(30,30,30,0.74); } .presentation .signature { margin-top: 14px; font-size: clamp(1.10rem, 1.6vw, 1.40rem); color: var(--ds-green); } .presentation .icon-grid { justify-content: center; margin-top: 14px; } @media (max-width: 900px) { .presentation .comments-grid { max-width: 100%; } } .section-pair { display: block !important; } .section-pair > .section { width: 100% !important; } .presentation .comments-grid { display: flex !important; flex-direction: column !important; } .desirade-layout { display: block !important; } .main > .container > .section, .main > .container > .section.card { width: 100%; } @media (min-width: 0) { .container { grid-template-columns: 1fr !important; } } .section { margin-bottom: var(--space-6); } .card { padding: clamp(14px, 2.4vw, 18px); } .card p { margin: 0 0 var(--space-3); } .hero-title { font-size: clamp(1.65rem, 4.8vw, 2.35rem); line-height: 1.08; margin: 0 0 var(--space-2); } .hero-sub { font-size: clamp(0.98rem, 2.4vw, 1.12rem); margin: 0 0 var(--space-4); opacity: 0.82; } .card h2 { font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.15; margin: 0 0 var(--space-2); } .card h3 { font-size: clamp(1.02rem, 2.6vw, 1.16rem); margin: var(--space-4) 0 var(--space-2); color: rgba(0,0,0,0.72); } .btn-row { gap: var(--space-2); margin-top: var(--space-3); } .note { margin-top: var(--space-3); font-size: 0.92rem; opacity: 0.78; } .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (max-width: 430px) { .container { padding: 14px; } .icon-grid { gap: 8px; } .icon-item { max-width: 100%; } .menu-panel a { padding: 10px 12px; } .btn { width: 100%; justify-content: center; } .btn-row { flex-direction: column; } } @media (max-width: 360px) { .hero-title { font-size: 1.55rem; } .card h2 { font-size: 1.18rem; } } .mosaic-wrap svg { display: block; } @media (max-width: 520px) { .mosaic-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .mosaic-wrap svg { width: 1176px; max-width: none; } } .mosaic-wrap { margin-top: 12px; border-radius: 18px; overflow: hidden; max-height: 384px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .mosaic-wrap svg { width: 100%; height: auto; display: block; } .mosaic-reveal { transform: translateY(14px) scale(0.985); transform-origin: center; } .mosaic-reveal.is-visible { transform: translateY(0) scale(1); } @media (max-width: 520px) { .mosaic-wrap { max-height: 336px; } } .presentation { text-align: center; } .presentation > * { margin-left: auto; margin-right: auto; } .presentation .comments-grid { align-items: center; } .presentation .comment-box { text-align: left; } /* Contact / Réservation — même esprit que la section Présentation */ #contact.presentation .contact-panel { width: min(820px, 100%); margin: var(--space-3) auto 0; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42)); border: 1px solid rgba(255,255,255,0.60); backdrop-filter: blur(var(--blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); box-shadow: 0 10px 26px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55); text-align: left; } #contact.presentation .contact-panel .btn.primary { margin: var(--space-3) auto 0; justify-self: center; } #contact.presentation .contact-panel .note { text-align: center; } .icon-item { font-size: 0.7em; padding: 5px 7px; gap: 6px; border-radius: 10px; } .icon-item i { font-size: 0.9em; } @media (max-width: 768px) { .icon-grid { width: 100%; } } .site-logo { max-height: 54px; width: auto; display: block; } .header .site-logo { margin-bottom: 4px; } .footer-logo { max-height: 70px; margin-bottom: 10px; opacity: 0.9; } @media (max-width: 768px) { .site-logo { max-height: 46px; } .footer-logo { max-height: 56px; } } .brand-inline { display: flex; align-items: center; gap: 12px; flex-direction: row; } .brand-text { display: flex; flex-direction: column; } .header-logo { max-height: 48px; width: auto; background: transparent; mix-blend-mode: multiply; } @media (max-width: 768px) { .header-logo { max-height: 42px; } } .brand .name { font-size: 1.18rem; line-height: 1.05; } .brand .place { font-size: 0.98rem; } .header-logo { transform: scale(1.10); transform-origin: left center; image-rendering: auto; } .header-actions { display: flex; gap: 10px; align-items: center; } @media (max-width: 820px) { .header-actions { width: 100%; justify-content: flex-start; order: 3; } } .header-phone { background: linear-gradient(180deg, rgba(104,167,128,0.96), rgba(104,167,128,0.80)); transform: none !important; } .header-phone i, .header-phone span { color: #fff; } .header-phone::after { background: linear-gradient(120deg, transparent 0%, rgba(184,130,79,0.00) 30%, rgba(184,130,79,0.55) 45%, rgba(255,255,255,0.25) 52%, rgba(184,130,79,0.35) 60%, transparent 75%); transform: translateX(-55%); } .header-phone:hover::after { transform: translateX(55%); } .btn.primary:hover { transform: none !important; } .btn.primary::after { background: linear-gradient(120deg, transparent 0%, rgba(184,130,79,0.00) 30%, rgba(184,130,79,0.55) 45%, rgba(255,255,255,0.25) 52%, rgba(184,130,79,0.35) 60%, transparent 75%); transform: translateX(-55%); } .btn.primary:hover::after { transform: translateX(55%); } .card h2 { display: inline-block; width: fit-content; } .card h2::after { width: 100% !important; } .hero-title { letter-spacing: 0.3px; background: linear-gradient(180deg, rgba(104,167,128,1), rgba(184,130,79,0.95)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 18px 40px rgba(0,0,0,0.06); } .hero-sub { color: rgba(30,30,30,0.70); font-weight: 520; } .icon-item { position: relative; overflow: hidden; } .icon-item::before { content: ""; position: absolute; inset: -1px; background: radial-gradient( 140px 140px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.55), rgba(184,130,79,0.18) 35%, transparent 70% ); opacity: 0; transition: opacity 220ms ease; pointer-events: none; mix-blend-mode: overlay; } .icon-item:hover::before { opacity: 1; } .icon-item:hover { border-color: rgba(184,130,79,0.38); } span { font-size: 0.8em; } .hero-illustration { display: block; width: min(180px, 46vw); height: auto; margin: 10px auto 14px; opacity: 0.95; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.10)); } .icon-item { display: inline-flex; line-height: 1.2; } .icon-item span { white-space: nowrap; } @media (max-width: 520px) { .icon-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } } #accueil .mosaic-wrap { max-height: 384px; } .presentation .mosaic-wrap { margin-bottom: 12px; } #accueil { background: none !important; } #accueil.hero { background: none !important; box-shadow: none !important; border: none !important; } .header-inner { display: grid; } .header-actions { margin-left: 0 !important; justify-content: center !important; } @media (min-width: 821px) { .menu-toggle { display: none !important; } .nav { justify-content: flex-end; flex-wrap: nowrap; } } @media (max-width: 820px) { .menu-toggle { display: inline-flex !important; } .menu-panel { grid-column: 1 / -1; } } .hero-body { align-items: center; text-align: center; } .hero-sub { max-width: 60ch; } .btn-row { justify-content: center; } .icon-grid { display: inline-flex !important; flex-wrap: wrap; width: fit-content !important; max-width: 100%; margin-left: auto !important; margin-right: auto !important; justify-content: center; } .icon-item { width: fit-content !important; max-width: 100%; white-space: nowrap; } @media (max-width: 520px) { .icon-grid { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; padding-bottom: 6px; } } @media (max-width: 820px) { .menu-panel { display: flex !important; max-height: 0; opacity: 0; transform: translateY(-6px); overflow: hidden; pointer-events: none; transition: max-height 360ms ease, opacity 220ms ease, transform 260ms ease; } .menu-panel.open { max-height: 420px; opacity: 1; transform: translateY(0); pointer-events: auto; } } /* IMPORTANT: ne pas forcer filter:none sur les SVG des mosaïques. Cela peut neutraliser certains effets (ombres / filtres SVG) selon les navigateurs. On garde uniquement une éventuelle neutralisation sur des raster classiques. */ .mosaic-wrap img { filter: none !important; } .mosaic-wrap svg image { image-rendering: auto; shape-rendering: geometricPrecision; } .header-inner { display: grid !important; } .header-inner .header-actions { grid-area: actions; justify-self: center; width: auto !important; margin: 0 !important; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .header-inner .header-actions::-webkit-scrollbar { height: 0; } .header-inner .header-phone { white-space: nowrap; } @media (min-width: 821px) { .menu-toggle { display: none !important; } .nav { display: flex !important; } } .btn.primary { backdrop-filter: blur(var(--blur)) saturate(1.12); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.12); } .btn.primary::before { background: radial-gradient( 140px 140px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.46), rgba(255,255,255,0.18) 35%, transparent 70% ); z-index: 0; } .btn.primary > * { position: relative; z-index: 1; } .gite-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 920px) { .gite-layout { grid-template-columns: 1fr; } } .table-wrap { overflow: auto; border-radius: 14px; } .table-glass { width: 100%; border-collapse: collapse; min-width: 520px; background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.34)); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 10px 26px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55); } .table-glass th, .table-glass td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.06); white-space: nowrap; } .table-glass thead th { font-weight: 800; color: rgba(30,30,30,0.82); background: rgba(255,255,255,0.35); } .table-glass tbody tr:last-child td { border-bottom: 0; } .availability { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } @media (max-width: 980px) { .reviews-grid { grid-template-columns: 1fr; } } .review-card { border-radius: 16px; padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42)); border: 1px solid rgba(255,255,255,0.60); box-shadow: 0 10px 26px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55); backdrop-filter: blur(var(--blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); } .review-card p { margin: 10px 0 8px; color: rgba(30,30,30,0.74); font-style: italic; } .review-meta { color: rgba(30,30,30,0.62); font-size: 0.92rem; } .stars i { color: var(--hover-gold); } .map-embed { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 10px 26px rgba(0,0,0,0.06); background: rgba(255,255,255,0.35); } .map-embed iframe { width: 100%; height: 100%; border: 0; } .slider { position: relative; } .slide-viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 10px 22px rgba(0,0,0,0.05); background: rgba(255,255,255,0.35); } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 320ms ease; } .slide.active { opacity: 1; } .slide img, .slide video { width: 100%; height: 100%; object-fit: cover; display: block; } .slider-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)); box-shadow: 0 10px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.55); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); cursor: pointer; } .slider-btn i { color: var(--link-icon); } .footer { padding: 0; margin-top: 30px; border-top: 1px solid var(--glass-border); background: radial-gradient(900px 520px at 18% 10%, rgba(44,125,160,0.10), transparent 60%), radial-gradient(900px 520px at 86% 12%, rgba(46,111,91,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.16)); box-shadow: 0 -18px 44px rgba(0,0,0,0.05); backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(1.15); -webkit-backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(1.15); color: var(--text); } .footer a { color: var(--text); text-decoration: none; } .footer a:hover { color: var(--green); } .footer .small { color: var(--muted); } .footer-map-wrap { position: relative; height: 360px; overflow: hidden; border-top: 1px solid var(--glass-border); } @media (min-width:900px) { .footer-map-wrap { height: 420px; } } .footer-map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(1.02) contrast(1.05) brightness(0.98); } .footer-map-wrap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 380px at 30% 10%, rgba(255,255,255,0.18), transparent 60%), linear-gradient(180deg, rgba(250,246,239,0.04), rgba(30,30,30,0.14)); pointer-events: none; } .footer-map-card { position: absolute; left: 16px; top: 16px; width: min(360px, calc(100% - 32px)); padding: 14px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--glass-bg-strong), rgba(255,255,255,0.46)), linear-gradient(180deg, var(--glass-tint), transparent); border: 1px solid var(--glass-border); box-shadow: 0 18px 40px rgba(0,0,0,0.08), var(--glass-inner); backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(1.15); -webkit-backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(1.15); } .footer-map-head strong { color: var(--text); } .footer-map-meta { margin-top: 8px; line-height: 1.35; } .footer-map-actions { display: grid; gap: 8px; margin-top: 12px; } .footer-map-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.40)); border: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); } .footer-map-link i { width: 18px; text-align: center; color: var(--green); } .footer-map-link span { color: rgba(30,30,30,0.84); } .footer-map-link:hover { background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.48)); } .footer-reach { background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.22)), linear-gradient(180deg, var(--glass-tint), transparent); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); } .footer-reach-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; } .footer-reach-title { font-weight: 700; color: rgba(30,30,30,0.92); letter-spacing: 0.01em; } .footer-social { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .social-btn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)); box-shadow: 0 10px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55); backdrop-filter: blur(var(--blur)) saturate(1.12); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.12); transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .social-btn i { color: rgba(30,30,30,0.86); font-size: 18px; } .social-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.50)); border-color: rgba(255,255,255,0.70); } .social-booking { border-radius: 14px; } .social-booking .booking-mark { font-weight: 900; font-size: 18px; color: rgba(30,30,30,0.88); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans"; } .footer-main { padding: 22px 0 18px; display: grid; gap: 18px; } @media (min-width:920px) { .footer-main { grid-template-columns: 1fr 1fr; } } .footer-col h5 { margin: 0 0 10px; font-size: 1rem; color: rgba(30,30,30,0.92); } .footer-col p { margin: 0; color: rgba(30,30,30,0.70); } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer-links a { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .footer-links i { width: 18px; text-align: center; color: var(--green); } .footer-links span { color: rgba(30,30,30,0.78); } .footer-bottom { background: rgba(255,255,255,0.20); border-top: 1px solid var(--glass-border); } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; flex-wrap: wrap; color: rgba(30,30,30,0.62); } .mini-links { display: flex; gap: 12px; flex-wrap: wrap; } .mini-link { color: rgba(30,30,30,0.72); } .mini-link:hover { color: var(--green); } @media (max-width:560px) { .footer-reach-inner { flex-direction: column; align-items: flex-start; } } .header-inner { display: grid !important; } .header-inner .header-phones { display: flex; } @media (max-width: 820px) { .header-inner .header-phones { max-width: 62vw; } } .header-phone { padding: 12px 16px !important; min-height: 50px; border-radius: 16px !important; font-weight: 900; letter-spacing: 0.3px; font-size: 1.03rem; color: #fff !important; background: linear-gradient(180deg, rgba(85,179,139,0.98), rgba(85,179,139,0.80)) !important; border: 1px solid rgba(255,255,255,0.34) !important; box-shadow: 0 16px 40px rgba(85,179,139,0.22), 0 6px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.30) !important; backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(1.22); -webkit-backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(1.22); position: relative; overflow: hidden; } .header-phone span { font-size: 1em !important; } .header-phone i { color: #fff !important; font-size: 1.12rem; } .header-phone::after { content: ""; position: absolute; inset: -30% -50%; background: linear-gradient(120deg, transparent 0%, rgba(211,172,133,0.00) 30%, rgba(211,172,133,0.55) 45%, rgba(255,255,255,0.26) 52%, rgba(211,172,133,0.35) 60%, transparent 75%); transform: translateX(-55%); transition: transform 520ms ease, opacity 520ms ease; opacity: 0; pointer-events: none; } .header-phone:hover { transform: translateY(-1px) scale(1.01) !important; box-shadow: 0 20px 52px rgba(85,179,139,0.24), 0 10px 22px rgba(0,0,0,0.10), 0 0 0 4px rgba(85,179,139,0.16), inset 0 1px 0 rgba(255,255,255,0.34) !important; } .header-phone:hover::after { transform: translateX(55%); opacity: 1; } .hero-phones { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } @media (max-width: 520px) { .hero-phones { flex-direction: column; width: 100%; } .hero-phones .header-phone { width: 100%; justify-content: center; } } .header .container { max-width: 100% !important; } .header-inner { display: grid !important; align-items: center; gap: 14px; } .header-inner .brand { grid-area: brand; } .header-inner .header-phones { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 4px; } .header-inner .header-phones::-webkit-scrollbar { height: 0; } .header-inner .menu-toggle { grid-area: toggle; justify-self: end; } @media (max-width: 820px) { .header-inner .header-phones { max-width: 58vw; justify-self: start; } } .btn.header-phone { font-weight: 900; letter-spacing: 0.35px; color: #fff !important; background: linear-gradient(180deg, rgba(85,179,139,0.98), rgba(85,179,139,0.82)) !important; border: 1px solid rgba(255,255,255,0.36) !important; box-shadow: 0 18px 44px rgba(85,179,139,0.22), 0 8px 18px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.28) !important; position: relative; overflow: hidden; } .btn.header-phone i { color: #fff !important; } .btn.header-phone span { color: #fff !important; font-size: 1.00em !important; white-space: nowrap; } .btn.header-phone::before { content: ""; position: absolute; inset: 0; background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.38), rgba(211,172,133,0.16) 38%, transparent 70% ); opacity: 0; transition: opacity 200ms ease; pointer-events: none; mix-blend-mode: overlay; } .btn.header-phone::after { content: ""; position: absolute; inset: -20% -45%; background: linear-gradient(120deg, transparent 0%, rgba(211,172,133,0.00) 30%, rgba(211,172,133,0.50) 45%, rgba(255,255,255,0.22) 52%, rgba(211,172,133,0.32) 60%, transparent 78% ); transform: translateX(-55%); transition: transform 520ms ease, opacity 520ms ease; opacity: 0; pointer-events: none; } .btn.header-phone:hover { transform: translateY(-1px) !important; box-shadow: 0 22px 60px rgba(85,179,139,0.26), 0 12px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.32) !important; } .btn.header-phone:hover::before { opacity: 1; } .btn.header-phone:hover::after { transform: translateX(55%); opacity: 1; } @media (max-width: 520px) { .btn.header-phone { padding: 12px 14px !important; min-height: 48px; font-size: 1.00rem; } } .header-inner { grid-template-columns: auto 1fr auto !important; grid-template-areas: "brand phones nav" !important; } .header-inner .menu-toggle { display: none !important; } .header-inner .nav { grid-area: nav; width: auto !important; justify-content: flex-end; align-self: center; } .header-inner .header-phones { grid-area: phones; justify-self: center; max-width: min(520px, 40vw) !important; } @media (max-width: 820px) { .header-inner { grid-template-columns: 1fr auto !important; grid-template-areas: "brand toggle" "phones phones" "nav nav" !important; } .header-inner .menu-toggle { display: inline-flex !important; } .header-inner .header-phones { justify-self: start; max-width: 100% !important; } .header-inner .nav { width: 100% !important; } } .btn.header-phone { padding: 11px 14px !important; min-height: 45px !important; border-radius: 14px !important; font-size: 0.92rem !important; } .btn.header-phone i { font-size: 1.00rem !important; } .btn.primary { padding: 11px 14px !important; min-height: 45px !important; border-radius: 14px !important; font-weight: 900 !important; letter-spacing: 0.35px !important; font-size: 0.92rem !important; color: #fff !important; background: linear-gradient(180deg, rgba(85,179,139,0.98), rgba(85,179,139,0.82)) !important; border: 1px solid rgba(255,255,255,0.36) !important; box-shadow: 0 18px 44px rgba(85,179,139,0.22), 0 8px 18px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.28) !important; position: relative; overflow: hidden; } .btn.primary i { color: #fff !important; font-size: 1.00rem !important; } .btn.primary span { color: #fff !important; font-size: 1.00em !important; white-space: nowrap; } .btn.primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.38), rgba(211,172,133,0.16) 38%, transparent 70% ); opacity: 0; transition: opacity 200ms ease; pointer-events: none; mix-blend-mode: overlay; } .btn.primary::after { content: ""; position: absolute; inset: -20% -45%; background: linear-gradient(120deg, transparent 0%, rgba(211,172,133,0.00) 30%, rgba(211,172,133,0.50) 45%, rgba(255,255,255,0.22) 52%, rgba(211,172,133,0.32) 60%, transparent 78% ); transform: translateX(-55%); transition: transform 520ms ease, opacity 520ms ease; opacity: 0; pointer-events: none; } .btn.primary:hover { transform: translateY(-1px) !important; box-shadow: 0 22px 60px rgba(85,179,139,0.26), 0 12px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.32) !important; } .btn.primary:hover::before { opacity: 1; } .btn.primary:hover::after { transform: translateX(55%); opacity: 1; } /* ============================================================ Price button + vertical rhythm tweaks (Ajouts en fin de fichier pour ne pas casser la cascade) ============================================================ */ /* Bouton prix (simple, premium, cohérent avec l'esthétique glass) */ .btn.price-btn { padding: 11px 14px !important; min-height: 45px !important; border-radius: 14px !important; font-weight: 900 !important; letter-spacing: 0.25px !important; font-size: 0.92rem !important; color: rgba(30,30,30,0.86) !important; background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)) !important; border: 1px solid rgba(255,255,255,0.60) !important; border-left: 3px solid rgba(183,119,70,0.75) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.55) !important; position: relative; overflow: hidden; } .btn.price-btn i { color: var(--link-icon) !important; font-size: 0.98rem !important; } .btn.price-btn span { color: rgba(30,30,30,0.86) !important; font-size: 1.00em !important; white-space: nowrap; } /* Effet visuel proche des icon-item (glow léger) */ .btn.price-btn::before { content: ""; position: absolute; inset: -1px; background: radial-gradient( 180px 140px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.50), rgba(184,130,79,0.16) 35%, transparent 70% ); opacity: 0; transition: opacity 220ms ease; pointer-events: none; mix-blend-mode: overlay; } /* (on désactive le balayage pour rester "simple") */ .btn.price-btn::after { content: none !important; } .btn.price-btn:hover { transform: translateY(-1px) !important; border-color: rgba(255,255,255,0.70) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55) !important; } .btn.price-btn:hover::before { opacity: 1; } /* Rythme vertical homogène (spacing cohérent) */ .hero-body { gap: var(--space-3) !important; } .hero-body > .icon-grid { margin-top: 0 !important; } .hero-body > .btn-row { margin-top: 0 !important; } /* Désirade : espacement cohérent entre texte / mosaïque / atouts */ #desirade .desirade-layout > .presentation-sub { margin: 0 auto var(--space-3) !important; } /* Désirade : centrage horizontal du contenu (section full-width, contenu centré) */ #desirade .desirade-layout { width: min(var(--max), 92vw); margin-left: auto !important; margin-right: auto !important; text-align: center; } #desirade .desirade-layout > .mosaic-wrap { width: 100%; } #desirade .desirade-layout > p { margin: 0 auto var(--space-3) !important; max-width: 72ch; } #desirade .desirade-layout > .mosaic-wrap { margin: var(--space-3) auto var(--space-4) !important; } #desirade .desirade-layout > .icon-grid { margin-top: 0 !important; } /* ------------------------------------------------------------ Utilitaires d'espacement (remplace les styles inline) ------------------------------------------------------------ */ .mt-1 { margin-top: var(--space-1) !important; } .mt-2 { margin-top: var(--space-2) !important; } .mt-3 { margin-top: var(--space-3) !important; } .mt-4 { margin-top: var(--space-4) !important; } .my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; } .my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; } .hr-soft { border: 0; border-top: 1px solid rgba(0,0,0,0.06); } /* ------------------------------------------------------------ Rythme vertical global : marges homogènes entre les blocs ------------------------------------------------------------ */ /* Titres / textes */ .presentation-sub { margin: 0 auto var(--space-3) !important; max-width: 72ch; } /* Blocs récurrents */ .mosaic-wrap { margin: var(--space-3) auto var(--space-4) !important; } .icon-grid { margin-top: var(--space-3) !important; } .btn-row { margin-top: var(--space-3) !important; } .comments-grid { margin: var(--space-4) auto var(--space-4) !important; } .signature { margin: var(--space-4) 0 var(--space-2) !important; } /* Ajustements ciblés */ #infos h2 + h2 { margin-top: var(--space-4); } #infos .kv { margin-top: var(--space-3); } /* Icon-item : icônes = même taille que l’icône du bouton prix (fa-tag) */ .icon-item i{ font-size: 0.98rem !important; /* même valeur que .btn.price-btn i */ line-height: 1 !important; width: 16px; /* on garde la largeur actuelle pour ne pas changer l’alignement */ text-align: center; flex: 0 0 auto; } /* Lightbox : boutons précédent/suivant + swipe (nav visible si plusieurs médias) */ .lightbox-panel{ position: relative; } .lightbox-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.68); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 10px 28px rgba(0,0,0,0.18); cursor: pointer; display: grid; place-items: center; transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease; z-index: 2; } .lightbox-nav:hover{ filter: brightness(1.02); transform: translateY(-50%) scale(1.04); } .lightbox-prev{ left: 10px; } .lightbox-next{ right: 10px; } .lightbox-nav i{ color: var(--link-icon); font-size: 1rem; } @media (max-width: 520px){ .lightbox-nav{ top: auto; bottom: 12px; transform: none; } .lightbox-nav:hover{ transform: scale(1.04); } } /* Footer - réseaux sociaux (même style que les boutons sociaux existants) */ .footer-grid .footer-social{ margin-top: 8px; } .footer-social-label{ margin-top: 10px; } /* ========================================================= MOSAIQUES (Presentation + Desirade) — survol premium - Zoom "dans" la vignette (sans toucher aux transforms/filters SVG) - Léger highlight du cadre ========================================================= */ @media (hover:hover) and (pointer:fine){ /* Zoom interne sur les images (on ne touche PAS à filter: pour ne pas écraser les filtres SVG) */ #presentation .mosaic-svg g[filter="url(#mshadow)"] > g image, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g image{ cursor: zoom-in; transform-box: fill-box; transform-origin: center; transition: transform 260ms cubic-bezier(.2,.8,.2,1); will-change: transform; } #presentation .mosaic-svg g[filter="url(#mshadow)"] > g:hover image, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g:hover image{ transform: scale(1.05); } /* Cadre : highlight très léger au survol */ #presentation .mosaic-svg g[filter="url(#mshadow)"] > g rect, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g rect{ transition: stroke 220ms cubic-bezier(.2,.8,.2,1), stroke-opacity 220ms cubic-bezier(.2,.8,.2,1); } #presentation .mosaic-svg g[filter="url(#mshadow)"] > g:hover rect, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g:hover rect{ stroke: var(--hover-gold); stroke-opacity: 0.75; } } /* Accessibilité : pas d’animation si réduction des mouvements */ @media (prefers-reduced-motion: reduce){ #presentation .mosaic-svg g[filter="url(#mshadow)"] > g image, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g image, #presentation .mosaic-svg g[filter="url(#mshadow)"] > g rect, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g rect{ transition: none !important; } #presentation .mosaic-svg g[filter="url(#mshadow)"] > g:hover image, #desirade .mosaic-svg g[filter="url(#dshadow)"] > g:hover image{ transform: none !important; } } /* +20% taille mosaïque (conteneur) => +20% sur tout le contenu du SVG */ #presentation .mosaic-wrap, #desirade .mosaic-wrap{ /* 1100px * 1.20 = 1320px, sans dépasser le viewport (évite la barre horizontale) */ width: min(1320px, calc(100vw - 36px)); margin-left: auto; margin-right: auto; /* +20% sur ta valeur actuelle (320px -> 384px) */ max-height: 384px; } @media (max-width: 520px){ #presentation .mosaic-wrap, #desirade .mosaic-wrap{ /* +20% sur ta valeur mobile (280px -> 336px) */ max-height: 336px; } } /* MOSAIQUES — centrage + +20% (Présentation + Désirade) */ :root{ --mosaic-max: 1320px; } #desirade{ --max: var(--mosaic-max); } #presentation .mosaic-wrap, #desirade .desirade-layout{ width: min(var(--mosaic-max), calc(100vw - 36px)); margin-left: auto; margin-right: auto; } #presentation .mosaic-wrap, #desirade .desirade-layout > .mosaic-wrap{ max-height: 384px; /* 320px * 1.20 */ } @media (max-width: 520px){ #presentation .mosaic-wrap, #desirade .desirade-layout{ width: calc(100vw - 28px); } #presentation .mosaic-wrap, #desirade .desirade-layout > .mosaic-wrap{ max-height: 336px; /* 280px * 1.20 */ } } /* FIX CENTRAGE — mosaïque #presentation */ #presentation .mosaic-wrap{ width: 100% !important; max-width: var(--mosaic-max) !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 520px){ #presentation .mosaic-wrap{ width: 100% !important; } } /* ========================================================= Contact — image + infos (gauche) / formulaire (droite) Objectif: hauteur identique et rendu homogène. Ajouts en fin de fichier pour ne pas casser la cascade. ========================================================= */ #contact.presentation .contact-layout{ width: min(980px, 100%); margin: var(--space-3) auto 0; display: grid; gap: 16px; align-items: stretch; /* => même hauteur */ } @media (min-width: 980px){ #contact.presentation .contact-layout{ /* 2/3 (gauche: image + infos) / 1/3 (droite: formulaire) */ grid-template-columns: 2fr 1fr; } } /* Les panels doivent remplir leur colonne (le style "glass" vient de .contact-panel existant) */ #contact.presentation .contact-layout .contact-panel{ width: 100%; margin: 0; } /* Bloc gauche: 1 seul panel, image + infos collés */ #contact.presentation .contact-left-panel{ padding: 0; /* on gère le padding côté info */ overflow: hidden; /* pour que l'image suive le radius */ } #contact.presentation .contact-left{ display: flex; align-items: stretch; height: 100%; } #contact.presentation .contact-media{ flex: 0 0 38%; min-width: 190px; } #contact.presentation .contact-media picture, #contact.presentation .contact-media img{ width: 100%; height: 100%; display: block; } #contact.presentation .contact-media img{ object-fit: cover; } #contact.presentation .contact-info{ flex: 1; padding: 14px 16px; display: grid; gap: 12px; align-content: center; } #contact.presentation .contact-info-title{ margin: 0; } #contact.presentation .contact-info-list{ display: grid; gap: 10px; } #contact.presentation .contact-callout{ margin: 4px 0 0; } /* Bloc droit: le panel s'étire + le formulaire remplit la hauteur */ #contact.presentation .contact-form-panel{ display: flex; } #contact.presentation .contact-form-panel form{ flex: 1; display: flex; flex-direction: column; gap: 10px; height: 100%; } /* Champ message: s'étire pour "prendre" la hauteur manquante => même hauteur que le bloc gauche */ #contact.presentation .contact-form-panel .field-message{ flex: 1; display: flex; flex-direction: column; } #contact.presentation .contact-form-panel .field-message textarea{ flex: 1; min-height: 140px; } /* Réduire l'échelle du formulaire (moins long/large) */ #contact.presentation .contact-form-panel label{ font-size: 0.92rem; } #contact.presentation .contact-form-panel input, #contact.presentation .contact-form-panel textarea{ padding: 9px 11px; border-radius: 12px; } /* Dates: 2 colonnes dès qu'on a la place */ #contact.presentation .contact-form-panel .grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 560px){ #contact.presentation .contact-form-panel .grid{ grid-template-columns: 1fr 1fr; } } /* Bouton + note en bas, centré */ #contact.presentation .contact-form-panel .btn.primary{ margin-top: auto; align-self: center; } #contact.presentation .contact-form-panel .note{ text-align: center; } /* Réseaux sociaux dans le contact */ #contact.presentation .contact-social{ justify-content: flex-start; } /* Responsive: pile les blocs, et l'image passe au-dessus */ @media (max-width: 899px){ #contact.presentation .contact-layout{ grid-template-columns: 1fr; } #contact.presentation .contact-left{ flex-direction: column; } #contact.presentation .contact-media{ flex: 0 0 auto; min-width: 0; height: 240px; } #contact.presentation .contact-info{ text-align: center; justify-items: center; } #contact.presentation .contact-info .icon-item{ justify-content: center; } #contact.presentation .contact-callout{ text-align: center; } #contact.presentation .contact-social{ justify-content: center; } } /* ========================================================= Footer — colonne carte (70/30) + carte cliquable Ajout en fin de fichier pour préserver la cascade. ========================================================= */ .footer-grid--map{ display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; } @media (min-width: 900px){ .footer-grid--map{ grid-template-columns: 7fr 3fr; /* 70/30 */ align-items: stretch; } } .footer-main{ display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 820px){ .footer-main{ grid-template-columns: 1fr 1fr; align-items: start; } } .footer-map-col{ display: grid; gap: 10px; align-content: start; } .footer-map-card{ width: 100%; border: 1px solid rgba(255,255,255,0.60); background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.40)); box-shadow: 0 10px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.55); border-radius: 16px; padding: 10px; cursor: pointer; backdrop-filter: blur(var(--blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); transition: transform 160ms ease, box-shadow 160ms ease; } .footer-map-card:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55); } .footer-map-frame{ /* Responsive sizing: keeps a clean proportion in the 30% column */ width: 100%; aspect-ratio: 16 / 10; height: auto; min-height: 150px; max-height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.35); } @media (min-width: 900px){ .footer-map-frame{ min-height: 170px; max-height: 240px; } } @media (max-width: 520px){ .footer-map-frame{ aspect-ratio: 16 / 9; min-height: 180px; max-height: 260px; } } .footer-map-frame iframe{ width: 100%; height: 100%; border: 0; display: block; pointer-events: none; /* clic = ouverture carte */ } .footer-map-cta{ margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; letter-spacing: 0.2px; color: rgba(30,30,30,0.86); } .footer-map-cta i{ color: var(--link-icon); } .footer-map-hint{ text-align: center; } /* ========================================================= Accueil — full width + image de fond (Home_ban) ========================================================= */ /* Évite un scroll horizontal dû au "full-bleed" */ body{ overflow-x: hidden; } /* Section accueil en pleine largeur + bannière en background */ #accueil.hero{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* on garde le contenu centré, mais la section (fond) est full-width */ background: url("images/Home_ban.png") center / cover no-repeat !important; /* neutralise l'habillage "card" du hero uniquement sur l'accueil */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* respire un peu plus pour laisser voir la photo */ padding: clamp(22px, 5vw, 58px) 0 !important; } /* Overlay pour garder une bonne lisibilité (sans changer la mise en page) */ #accueil.hero::after{ /* Suppression du fondu blanc (on conserve la pseudo-couche sans impact layout) */ background: none !important; opacity: 0 !important; } /* Contenu du hero : centré + largeur max (comme le reste du site) */ #accueil.hero > .mosaic-wrap, #accueil.hero > .hero-body{ width: min(var(--max), calc(100vw - 36px)); margin-left: auto; margin-right: auto; } /* ========================================================= Accueil — débordement du background jusqu'en haut de page (sans déplacer le contenu) ========================================================= */ :root{ /* Valeur volontairement un peu large pour couvrir header + paddings */ --accueil-bleed-top: 180px; /* Pour que #accueil fasse exactement "une page" (header + padding main + hero) */ --sticky-header-offset: 92px; /* cohérent avec .section{scroll-margin-top:92px;} */ --main-pad-top: 18px; /* cohérent avec .main{padding-top:18px;} */ } #accueil.hero::before{ content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--accueil-bleed-top)); height: calc(100% + var(--accueil-bleed-top)); /* Afficher l'image entière (sans rognage) + centrage */ /* ✅ Rendu "paysage" : remplit la bannière */ background-image: url("images/Home_ban.png"); /* source unique (évite mismatch) */ background-repeat: no-repeat; background-position: center 50%; background-size: cover; pointer-events: none; z-index: 0; } /* Le contenu reste strictement identique, au-dessus du background */ #accueil.hero > .mosaic-wrap, #accueil.hero > .hero-body{ position: relative; z-index: 1; } /* ========================================================= Accueil — hero-body en glass (comme le reste du site) ========================================================= */ #accueil.hero .hero-body{ background: linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,0.34)), linear-gradient(180deg, var(--glass-tint), transparent); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow), var(--glass-inner); backdrop-filter: blur(var(--blur)) saturate(1.18); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.18); /* un peu plus “card” sans changer ton layout */ padding: clamp(14px, 2.2vw, 18px); } /* Accueil — même effet que le (mglass + mshadow) */ #accueil.hero > .hero-body{ background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.42) 100% ); border: 1px solid rgba(255,255,255,0.60); border-radius: 22px; /* équivalent des 2 feDropShadow du SVG */ box-shadow: 0 10px 10px rgba(0,0,0,0.12), 0 2px 3px rgba(0,0,0,0.08); } /* Accueil — hero-body = largeur selon contenu (shrink-to-fit) */ #accueil.hero > .hero-body{ display: inline-flex; /* shrink-to-fit + garde le layout vertical */ flex-direction: column; align-items: center; text-align: center; width: fit-content !important; /* override la règle "width: min(...)" */ max-width: min(var(--max), calc(100vw - 36px)); margin-left: auto; margin-right: auto; } /* Accueil — hero-body centré au milieu (largeur = contenu) */ #accueil.hero{ display: flex; flex-direction: column; align-items: center; /* centre les enfants horizontalement */ } #accueil.hero > .hero-body{ display: flex; /* (et non inline-flex) */ flex-direction: column; align-items: center; text-align: center; width: fit-content !important; /* largeur selon contenu */ max-width: min(var(--max), calc(100vw - 36px)); margin-left: auto; margin-right: auto; } /* Accueil — les images restent fixes, elles bougent UNIQUEMENT au survol */ @media (hover:hover) and (pointer:fine){ /* état initial = comme avant */ #accueil .mosaic-wrap svg image{ transform: none !important; filter: none !important; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 220ms ease; will-change: transform, filter; } /* ✅ uniquement l'image survolée bouge */ #accueil .mosaic-wrap svg image:hover{ transform: scale(1.06) !important; filter: saturate(1.10) contrast(1.06) brightness(1.02) !important; } } /* Accessibilité */ @media (prefers-reduced-motion: reduce){ #accueil .mosaic-wrap svg image{ transition: none !important; transform: none !important; } } /* ========================================================= Accueil — hero-body centré (X/Y) + mosaïque collée en bas ========================================================= */ #accueil.hero{ display: grid !important; grid-template-rows: 1fr auto; /* haut = espace flexible, bas = mosaïque */ justify-items: center; /* centre horizontalement les enfants */ align-items: stretch; /* ✅ Accueil = hauteur pleine page (viewport) */ min-height: calc(100vh - var(--sticky-header-offset) - var(--main-pad-top)); min-height: calc(100svh - var(--sticky-header-offset) - var(--main-pad-top)); /* évite un "surplus" de scroll juste sous le hero */ margin-bottom: 0 !important; } /* hero-body : centré dans la zone du haut (vertical + horizontal) */ #accueil.hero > .hero-body{ place-self: center; /* center/center dans la 1re ligne */ margin: 0 !important; /* neutralise d’éventuels auto margins */ } /* mosaïque : toujours en bas */ #accueil.hero > .mosaic-wrap{ place-self: end center; /* bottom + centered */ margin-top: 0 !important; } /* ========================================================= Contact — réduction ~30% (sans changer la taille des textes / icônes) Objectif: section #contact plus compacte via padding/gaps/hauteurs, sans toucher aux font-sizes existants. ========================================================= */ #contact.presentation .contact-layout{ width: min(900px, 100%); margin: 10px auto 0; /* ~ -30% vs var(--space-3)=14px */ gap: 12px; /* 16px -> 12px */ } /* Panels (on garde l'esthétique glass), plus compacts */ #contact.presentation .contact-panel{ padding: 10px 12px; /* 14/16 -> 10/12 */ border-radius: 14px; /* 16 -> 14 */ } /* Bloc gauche: image un peu plus compacte */ #contact.presentation .contact-media{ flex: 0 0 34%; /* 38% -> 34% */ min-width: 150px; /* 190px -> 150px */ } #contact.presentation .contact-info{ padding: 10px 12px; /* 14/16 -> 10/12 */ gap: 10px; /* 12 -> 10 */ } #contact.presentation .contact-info-list{ gap: 8px; /* 10 -> 8 */ } /* Bloc droit: formulaire plus compact (sans changer font-size) */ #contact.presentation .contact-form-panel form{ gap: 8px; /* 10 -> 8 */ } #contact.presentation .contact-form-panel .grid{ gap: 10px; /* 12 -> 10 */ } #contact.presentation .contact-form-panel input, #contact.presentation .contact-form-panel textarea{ padding: 8px 10px; /* 9/11 -> 8/10 */ border-radius: 12px; /* conserve la cohérence */ } #contact.presentation .contact-form-panel .field-message textarea{ min-height: 120px; /* 140 -> 120 */ } /* Bouton un peu moins haut dans cette section uniquement */ #contact.presentation .contact-form-panel .btn.primary{ padding: 10px 12px !important; min-height: 42px !important; border-radius: 14px !important; } /* Responsive: image moins haute (240px -> ~170px) */ @media (max-width: 899px){ #contact.presentation .contact-media{ height: 170px; } } /* ========================================================= Header — ajustements - Téléphones centrés sur la page (desktop) - Navigation collée à droite - Logo + ~10% + espace logo/texte - .header-phones = hauteur du header + largeur au plus juste (Ajout en fin de fichier pour préserver la cascade) ========================================================= */ /* Un peu plus d’espace entre le logo et le texte */ .brand-inline{ gap: 16px !important; } /* Logo un peu plus grand (~ +10% vs rendu actuel) */ .header-logo{ transform: scale(1.21) !important; transform-origin: left center; } /* Desktop (>=821px) : centre exact de la page pour les téléphones + nav à droite */ @media (min-width: 821px){ .header-inner{ grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important; grid-template-areas: "brand phones nav" !important; align-items: stretch !important; /* permet à .header-phones de prendre toute la hauteur */ } .header-inner .brand{ justify-self: start; align-self: center; } .header-inner .header-phones{ justify-self: center; align-self: stretch; height: 100%; width: max-content; max-width: 100% !important; padding: 0 4px; } .header-inner .nav{ justify-self: end; align-self: center; width: max-content; justify-content: flex-end; } } /* Mobile (<=820px) : téléphones centrés + liens nav alignés à droite */ @media (max-width: 820px){ .header-logo{ transform: scale(1.15) !important; } .header-inner{ align-items: stretch !important; } .header-inner .header-phones{ justify-self: center !important; align-self: stretch; width: 100%; height: 100%; justify-content: center; } .header-inner .nav{ justify-content: flex-end !important; align-items: flex-end; } .header-inner .nav a{ justify-content: flex-end; text-align: right; } } /* Contact — image collée dans le panel gauche */ #contact.presentation .contact-left-panel{ padding: 0 !important; /* enlève l’espace autour => image collée */ overflow: hidden; /* pour respecter les coins arrondis */ } #contact.presentation .contact-left{ height: 100%; align-items: stretch; } #contact.presentation .contact-media{ margin: 0 !important; padding: 0 !important; align-self: stretch; } #contact.presentation .contact-media picture, #contact.presentation .contact-media img{ margin: 0 !important; padding: 0 !important; display: block; } /* ========================================================= MOSAÏQUES — mises à l’échelle (Jan 2026) - +10% sur toutes les mosaïques (et contenus) sauf Accueil - Accueil : +20% + effet éventail (géré dans le SVG) ========================================================= */ :root{ --mosaic-max-10: 1210px; /* 1100px * 1.10 */ --mosaic-max-accueil: 1320px; /* 1100px * 1.20 */ } /* +10% : toutes les mosaïques hors Accueil (actuellement Présentation + Désirade) */ #presentation .mosaic-wrap, #desirade .mosaic-wrap{ width: min(var(--mosaic-max-10), calc(100vw - 36px)) !important; max-width: var(--mosaic-max-10) !important; margin-left: auto !important; margin-right: auto !important; } /* Désirade : aligne aussi la largeur de contenu sur la mosaïque */ #desirade{ --max: var(--mosaic-max-10); } /* Accueil : +20% sur la mosaïque */ #accueil.hero > .mosaic-wrap{ width: min(var(--mosaic-max-accueil), calc(100vw - 36px)) !important; max-width: var(--mosaic-max-accueil) !important; margin-left: auto !important; margin-right: auto !important; } /* Mobile : la mosaïque devient scrollable (SVG width fixe) — on applique l’échelle demandée */ @media (max-width: 520px){ #presentation .mosaic-wrap svg, #desirade .mosaic-wrap svg{ width: 1294px !important; /* 1176px * 1.10 */ max-width: none !important; } #accueil .mosaic-wrap svg{ width: 1412px !important; /* 1176px * 1.20 */ max-width: none !important; } } /* ========================================================= CONTACT — labels en gras, placeholders stylés, icône date en gris (Jan 2026) ========================================================= */ #contact form label, #contact .form label{ font-weight: 700; } /* Placeholder (textarea + inputs si ajoutés plus tard) */ #contact form ::placeholder, #contact .form ::placeholder{ font-weight: 600; font-style: italic; color: rgba(0,0,0,0.55); opacity: 1; /* évite l’opacité par défaut de certains navigateurs */ } /* Icône calendrier (Chrome/Safari/Edge) */ #contact input[type="date"]::-webkit-calendar-picker-indicator{ opacity: 0.55; } /* Icône calendrier (Chrome/Safari/Edge) — certaines versions utilisent aussi ce pseudo */ #contact input[type="date"]::-webkit-inner-spin-button{ display:none; } /* ========================================================= CONTACT — intro (titre + sous-titres) ========================================================= */ #contact .contact-intro{ margin: 0 0 18px; text-align: center; } #contact .contact-intro-title{ margin: 0 0 6px; font-weight: 400; letter-spacing: 0.2px; } #contact .contact-intro-sub{ margin: 0; font-weight: 400; } #contact .contact-intro-signature{ margin: 2px 0 0; font-weight: 400; font-style: italic; font-size: 0.95em; opacity: 0.85; } /* ========================================================= CONTACT — liseré permanent sur les champs (comme .icon-item:hover) ========================================================= */ #contact form input, #contact form textarea{ border-color: rgba(184,130,79,0.38); background: radial-gradient(140px 140px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.55), rgba(184,130,79,0.18) 35%, transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.40)); background-blend-mode: overlay, normal; } /* ========================================================= CONTACT (Section #contact) — ajustements demandés - Champs du formulaire: intérieur blanc uniquement - Infos de contact: centrées verticalement dans le conteneur (desktop) ========================================================= */ /* 1) Intérieur blanc uniquement pour les champs du formulaire (panel droite) */ #contact.presentation .contact-form-panel input, #contact.presentation .contact-form-panel textarea{ background: #ffffff !important; background-image: none !important; background-blend-mode: normal !important; } /* 2) Infos de contact centrées verticalement (desktop) */ @media (min-width: 900px){ #contact.presentation .contact-info{ align-content: center; } } header, main, footer{ position: relative; z-index: 1; } /* --- Centrage : mosaïque "presentation" (contenu) --- */ #presentation [data-mosaic-carousel="presentation"] .mosaic-svg{ display: block; width: 100%; max-width: 1200px; height: auto; margin-left: auto; margin-right: auto; } /* Presentation: align mosaic SVG width with the page container */ #presentation .mosaic-svg{ max-width: var(--max); } /* --- Mobile: ajustement du scroll-margin pour compenser le header sticky plus haut --- */ @media (max-width: 820px){ :root{ --sticky-header-offset: 150px; } .section{ scroll-margin-top: 150px; } } @media (max-width: 520px){ :root{ --sticky-header-offset: 170px; } .section{ scroll-margin-top: 170px; } } /* ========================================================= Accueil (#accueil) — mosaïque collée à #presentation (sans marge) - Retire la marge basse du conteneur .mosaic-wrap - Décale la mosaïque de la valeur du padding-bottom du hero pour que le bas du panneau (SVG) tombe pile sur le haut de #presentation - Aucun changement sur les breakpoints / responsive ========================================================= */ #accueil.hero{ overflow: visible !important; /* sinon .hero{overflow:hidden} coupe le débordement */ } #accueil.hero > .mosaic-wrap.reveal.mosaic-reveal{ margin: 0 auto 0 !important; position: relative; top: clamp(22px, 5vw, 58px) !important; /* = padding-bottom du hero (#accueil.hero) */ z-index: 3; } /* Contact — badge tarif (non cliquable) au-dessus des infos */ .contact-price-wrap{ width: 100%; display: flex; align-items: center; justify-content: center; /* crée un petit espace vertical et permet un centrage vertical réel */ min-height: 56px; margin: 6px 0 14px; } .btn.is-static{ pointer-events: none; cursor: default; } /* ========================================================= CONTACT — badge tarif AU-DESSUS des infos (fix structure) - Le badge est maintenant dans la même colonne que l’aside contact-info - Centré horizontalement, et sans casser le layout desktop/mobile ========================================================= */ #contact.presentation .contact-info-block{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; gap: 12px; align-items: stretch; } #contact.presentation .contact-info-block .contact-price-wrap{ width: 100%; display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 0 0 6px; } /* Le padding est désormais géré par .contact-info-block */ #contact.presentation .contact-info{ padding: 0 !important; } /* ========================================================= PATCH (22/01/2026) — recentrage mosaïques + Désirade full-bleed Problèmes corrigés : - Les mosaïques "Présentation" et "La Désirade" n'étaient plus centrées (SVG trop large => rognage / décalage à droite). - La section "La Désirade" ne prenait plus toute la largeur du viewport. ========================================================= */ /* 1) Mosaïques : on force le SVG à s'adapter au conteneur (desktop) => plus de dépassement/rognage à droite, centrage conservé. */ #presentation .mosaic-wrap, #desirade .mosaic-wrap{ margin-left: auto !important; margin-right: auto !important; } @media (min-width: 720px){ #presentation .mosaic-wrap .mosaic-svg, #desirade .mosaic-wrap .mosaic-svg{ width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; } } /* Mobile : on conserve le comportement "carrousel" si le SVG est plus large */ @media (max-width: 719px){ #presentation .mosaic-wrap, #desirade .mosaic-wrap{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; } #presentation .mosaic-wrap .mosaic-svg, #desirade .mosaic-wrap .mosaic-svg{ max-width: none !important; } } /* 2) Désirade : section pleine largeur (full-bleed) */ #desirade.section{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; /* optionnel : look edge-to-edge */ border-radius: 0; border-left: 0; border-right: 0; } /* ========================================================= PATCH (22/01/2026) 1) Contact — ajoute une marge/padding plus "épais" autour du badge tarif 2) Accueil — titre plus lisible (fond un peu moins transparent) ========================================================= */ /* 1) Contact — espace autour du badge tarif */ #contact.presentation .contact-info-block .contact-price-wrap{ /* "marge" autour + padding pour respirer */ margin: 16px 0 18px !important; padding: 12px 0 !important; } /* 2) Accueil — hero-body plus opaque + titre plus lisible */ #accueil.hero > .hero-body{ background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.70) 100% ) !important; border-color: rgba(255,255,255,0.70) !important; } #accueil.hero .hero-title{ color: rgba(30,30,30,0.92); text-shadow: 0 2px 10px rgba(255,255,255,0.40), 0 4px 16px rgba(0,0,0,0.15); } /* ========================================================= PATCH (22/01/2026) — Accueil (mobile) Objectif : mosaïque #accueil entièrement visible (sans scroll horizontal) et sans impact sur les autres mosaïques/sections. ========================================================= */ @media (max-width: 520px){ /* Sur mobile, on évite le mode "carrousel" (SVG trop large + masque) sur la mosaïque de l'accueil */ #accueil.hero > .mosaic-wrap{ overflow-x: hidden !important; padding-bottom: 0 !important; /* le masque sert d'indice de scroll sur les autres mosaïques : ici on le retire pour afficher l'ensemble sans rognage/fondu */ -webkit-mask-image: none !important; mask-image: none !important; /* évite que la mosaïque soit décalée vers le bas sur mobile */ transform: none !important; /* assure l'empilement au-dessus de la section suivante si besoin */ position: relative; z-index: 3; } /* Le SVG s'adapte au viewport => mosaïque entièrement visible */ #accueil.hero > .mosaic-wrap .mosaic-svg{ width: 100% !important; max-width: 100% !important; height: auto !important; } } /* Plus d’espace entre le logo et le texte (header uniquement) */ .header .brand-inline{ gap: 18px !important; } @media (max-width: 820px){ .header-inner{ position: relative; grid-template-columns: 1fr !important; grid-template-areas: "brand" "phones" "nav" !important; justify-items: center; } .header-inner .menu-toggle{ position: absolute !important; top: 14px; right: 14px; grid-area: auto !important; /* évite une zone implicite "toggle" */ z-index: 2; } .header-inner .brand{ justify-self: center !important; width: 100%; } .header-inner .brand-inline{ justify-content: center !important; width: 100%; } .header-inner .brand-text{ text-align: center; } .header .brand-inline{ gap: 25px !important; } } /* Un peu plus d’espace entre le logo et le texte (+ alignement desktop) */ .header .brand-inline{ flex-direction: row; align-items: center; gap: 24px !important; } /* Mobile (<=820px) : logo au-dessus du texte + centrage */ @media (max-width: 820px){ .header-inner .brand-inline{ width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 10px !important; text-align: center; } .header-inner .brand-inline .brand-text{ display: flex; flex-direction: column; align-items: center; text-align: center; } } /* Header : localisation avec icône (sans impacter le responsive) */ .header .brand-text .place{ display: inline-flex; align-items: center; gap: 8px; } .header .brand-text .place i{ color: var(--link-icon); font-size: 0.95em; opacity: 0.95; } /* ========================================================= PATCH (22/01/2026) — La Désirade: titre aligné + boutons mosaïque fixes - Le titre "La Désirade" adopte le même style que les titres de sections "Présentation" et "Contact". - Les boutons (prev/next) des mosaïques restent fixes pendant le scroll horizontal (mobile). ========================================================= */ /* 1) Titre La Désirade : même style que Présentation / Contact */ #desirade .desirade-layout > h2{ font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin: 0 auto 8px; color: var(--text); font-weight: 700; letter-spacing: 0.2px; display: block; } #desirade .desirade-layout > h2::after{ content: none !important; /* retire le soulignement des titres .card */ } #desirade .desirade-layout > h2:hover{ color: var(--text); filter: none; } /* 2) Mosaïques : le scroll se fait sur .mosaic-scroll, pas sur le conteneur des boutons */ .mosaic-wrap.mosaic-carousel{ position: relative; overflow: hidden; /* boutons en overlay, contenu scrollé à l'intérieur */ } .mosaic-wrap.mosaic-carousel .mosaic-svg{ position: relative; z-index: 0; } .mosaic-wrap.mosaic-carousel .mosaic-scroll{ width: 100%; overflow: hidden; } @media (max-width: 520px){ /* Annule l'ancien comportement "scroll sur .mosaic-wrap" */ .mosaic-wrap.mosaic-carousel{ overflow-x: hidden !important; padding-bottom: 0 !important; } /* Scroll horizontal sur le contenu uniquement (SVG), boutons fixes */ .mosaic-wrap.mosaic-carousel .mosaic-scroll{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .mosaic-wrap.mosaic-carousel .mosaic-scroll::-webkit-scrollbar{ height: 0; } .mosaic-wrap.mosaic-carousel .mosaic-scroll .mosaic-svg{ max-width: none !important; } } /* ========================================================= PATCH (22/01/2026) — Header: liens plus visibles - Augmente légèrement la taille - Met en gras les liens de navigation du header ========================================================= */ .header .nav a, .header .menu-panel a{ font-weight: 800; font-size: 1.02rem; } /* ========================================= Footer : 2 colonnes côte à côte - texte à gauche - image carte à droite (même hauteur que le footer, sans marge) ========================================= */ .footer .container{ /* Sert de référence pour annuler le padding côté carte */ --container-pad: 18px; } .footer-grid--map{ display: flex; align-items: stretch; /* IMPORTANT : même hauteur pour les 2 colonnes */ justify-content: space-between; gap: 18px; } /* Colonne image (gauche) */ .footer-grid--map .footer-map-col{ order: -1; /* image à gauche (sans changer le HTML) */ flex: 0 0 auto; display: flex; align-items: stretch; /* l’élément prend toute la hauteur */ } /* Colonne texte (droite) */ .footer-grid--map .footer-main.informations{ flex: 1 1 auto; /* on garde ton padding existant (déjà défini sur .footer-main) */ display: flex; flex-direction: column; justify-content: center; } /* L’image remplit la hauteur du footer (on annule le padding du container seulement sur la carte) */ .footer-grid--map .footer-map-link-img{ width: clamp(220px, 28vw, 340px); display: block; align-self: stretch; overflow: hidden; /* annule le padding du container en haut / gauche / bas => image pleine hauteur du footer */ margin: calc(-1 * var(--container-pad)) 0 calc(-1 * var(--container-pad)) calc(-1 * var(--container-pad)); /* coins cohérents avec le style (gauche arrondie, droite “collée” au texte) */ border-radius: 18px 0 0 18px; border-right: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.28)); box-shadow: 0 12px 30px rgba(0,0,0,0.06), var(--glass-inner); } .footer-grid--map .footer-map-link-img img{ width: 100%; height: 100%; display: block; object-fit: cover; } /* Mobile : on empile, et on remet les marges normales */ @media (max-width: 860px){ .footer-grid--map{ flex-direction: column; gap: 14px; } /* sur mobile, on revient à l’ordre naturel (texte puis image) */ .footer-grid--map .footer-map-col{ order: 0; } .footer-grid--map .footer-map-link-img{ width: 100%; height: 210px; margin: 0; border-radius: 18px; border: 1px solid rgba(255,255,255,0.55); } } .footer-copyright{ margin-top: 8px; font-size: 0.85rem; opacity: 0.75; } /* ========================================================= Footer — Mentions légales (lien) + Modal ========================================================= */ .footer-copyright{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .footer-sep{ opacity: 0.7; } .footer-legal-link{ color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: 0.9; } .footer-legal-link:hover, .footer-legal-link:focus{ opacity: 1; } /* Empêche le scroll du fond quand la popup est ouverte */ .modal-open, .modal-open body{ overflow: hidden; } /* Modal */ .modal{ position: fixed; inset: 0; z-index: 9999; display: none; } .modal.is-open{ display: block; } .modal-overlay{ position: absolute; inset: 0; background: rgba(0,0,0,0.45); } .modal-dialog{ position: relative; margin: 6vh auto; width: min(760px, 92vw); max-height: 88vh; overflow: auto; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75)); box-shadow: 0 18px 60px rgba(0,0,0,0.22); } .modal-dialog:focus{ outline: none; } .modal-close{ position: sticky; top: 0; margin-left: auto; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background: rgba(255,255,255,0.75); font-size: 22px; line-height: 1; cursor: pointer; } .modal-content h3{ margin-top: 14px; margin-bottom: 6px; font-size: 1.05rem; } .modal-content p{ margin: 0 0 10px; } .modal-content .muted{ opacity: 0.85; } @media (max-width: 520px){ .modal-dialog{ margin: 5vh auto; padding: 16px 14px 14px; } } /* Note sous le prix (formulaire contact) */ .contact-price-note{ margin-top: 6px; text-align: center; opacity: 0.95; } /* Note sous le prix (formulaire contact) — forcer en dessous du bouton */ .contact-price-wrap{ display: flex; flex-direction: column; align-items: center; } .contact-price-wrap .price-btn{ display: inline-flex; } .contact-price-note{ width: 100%; margin-top: 8px; text-align: center; } /* ========================================================= Contact — centrage du titre + réseaux sociaux ========================================================= */ .contact-info-title{ text-align: center; } .contact-info .footer-social-label{ text-align: center; } .contact-info .footer-social{ justify-content: center; } /* ========================================================= Contact — centrage réseaux sociaux (override) ========================================================= */ #contact.presentation .contact-social{ justify-content: center; width: 100%; } #contact.presentation .footer-social-label{ text-align: center; } /* Footer — réseaux sociaux : ne pas centrer */ .footer-main .footer-social-label{ text-align: left; } .footer-main .footer-social{ justify-content: flex-start; } /* Mention confidentialité juste avant le bouton d'envoi (formulaire contact) */ .form-privacy-note{ margin: 10px 0 0; text-align: center; opacity: 0.92; } .form-privacy-note a{ font-weight: 600; } /* Case à cocher de consentement (formulaire contact) */ .form-consent{ margin: 10px auto 0; width: 100%; max-width: 520px; display: flex; gap: 10px; align-items: flex-start; justify-content: center; font-size: 0.88rem; line-height: 1.35; color: var(--muted); cursor: pointer; } .form-consent input{ flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; cursor: pointer; } .form-consent span{ display: block; } .form-consent a{ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Consent mobile */ @media (max-width: 520px){ .form-consent{ justify-content: flex-start; } } /* Bouton "Envoyer une demande" — états */ .btn.primary.is-sending{ opacity: 0.75; cursor: progress; } .btn.primary.is-sent{ opacity: 1; } /* Footer — carte : arrondis sur les 4 coins */ .footer-grid--map .footer-map-link-img{ border-radius: 18px; } .footer-grid--map .footer-map-link-img img{ border-radius: 18px; } /* ========================================================= Mosaïque carousel — centrage horizontal + navigation ========================================================= */ .mosaic-wrap.mosaic-carousel{ width: min(1100px, 100%); margin-left: auto; margin-right: auto; } .mosaic-wrap.mosaic-carousel .mosaic-scroll{ width: 100%; } .mosaic-wrap.mosaic-carousel .mosaic-svg{ margin-left: auto; margin-right: auto; } /* Boutons de navigation (overlay, centrés verticalement) */ /* ---------------------------- Mosaïque — navigation (Précédent / Suivant) Plus visible, dans le thème (sable + doré + pointe de vert) ---------------------------- */ .mosaic-wrap.mosaic-carousel:not(.has-mosaic-nav) .mosaic-nav{ display: none; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav{ position: relative; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; border: 1px solid rgba(183,119,70,0.55); /* proche du --link-icon */ background: linear-gradient(180deg, rgba(250,246,239,0.92), rgba(255,255,255,0.74)); box-shadow: 0 16px 36px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.72); backdrop-filter: blur(var(--blur)) saturate(1.18); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.18); cursor: pointer; transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease, box-shadow 180ms ease; -webkit-tap-highlight-color: transparent; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav::before{ content: ""; position: absolute; inset: 3px; border-radius: 14px; border: 1px solid rgba(94,165,117,0.22); /* touche de vert */ pointer-events: none; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav i{ pointer-events: none; color: var(--link-icon); font-size: 1.2rem; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.70)); } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav:hover{ filter: brightness(1.03) saturate(1.05); transform: translateY(-50%) scale(1.06); box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.78); } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav:active{ transform: translateY(-50%) scale(0.98); } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav:focus-visible{ outline: 3px solid var(--focus); outline-offset: 4px; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-prev{ left: 12px; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-next{ right: 12px; } @media (hover:hover) and (pointer:fine){ /* discret mais visible, puis plein au survol */ .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav{ opacity: 0.55; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav:hover .mosaic-nav{ opacity: 1; } } @media (max-width: 820px){ .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav{ opacity: 1; } } @media (max-width: 520px){ .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav{ width: 52px; height: 52px; border-radius: 16px; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav::before{ border-radius: 13px; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-prev{ left: 8px; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-next{ right: 8px; } } @media (prefers-reduced-motion: reduce){ .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav{ transition: none; } .mosaic-wrap.mosaic-carousel.has-mosaic-nav .mosaic-nav:hover{ transform: translateY(-50%); } } /* ========================================================= Présentation (#presentation) — section pleine largeur + contenu centré ========================================================= */ #presentation{ /* full-bleed même si la section est dans un .container */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* sécurité anti-dépassement */ overflow-x: hidden; overflow-x: clip; /* padding identique au .container */ padding-left: 18px; padding-right: 18px; text-align: center; } /* Centre les blocs de texte / grilles (sans toucher à la mosaïque qui a son propre max-width) */ #presentation > h2, #presentation > .presentation-sub, #presentation > .signature, #presentation > .comments-grid, #presentation > .icon-grid{ width: min(var(--max), 100%); margin-left: auto !important; margin-right: auto !important; } /* Mosaïque: reste centrée, ne prend pas 100vw */ #presentation .mosaic-wrap.mosaic-carousel.has-mosaic-nav{ width: 100% !important; max-width: var(--mosaic-max) !important; margin-left: auto !important; margin-right: auto !important; } /* Centre le SVG dans le viewport scroll */ #presentation .mosaic-wrap.mosaic-carousel .mosaic-scroll{ display: flex; justify-content: center; width: 100%; } /* ========================================================= Adresse Google Maps — rendre l'adresse cliquable sans style de lien ========================================================= */ a.icon-item.map-address-link{ color: inherit; text-decoration: none; } a.icon-item.map-address-link:hover, a.icon-item.map-address-link:focus{ color: inherit; text-decoration: none; } /* ========================================================= MOSAÏQUES — Présentation plus grande que Désirade (desktop + responsive + mobile) - Desktop/Responsive : conteneur Présentation plus large - Mobile : scroll conservé + Présentation "zoomée" via SVG plus large ========================================================= */ :root{ --mosaic-max-presentation: 1320px; --mosaic-max-desirade: 1120px; --mosaic-h-presentation: 384px; --mosaic-h-desirade: 320px; --mosaic-h-presentation-mobile: 336px; --mosaic-h-desirade-mobile: 280px; --mosaic-svg-mobile-presentation: 1400px; /* zoom mobile */ --mosaic-svg-mobile-desirade: 1200px; } /* Desktop & responsive: Présentation > Désirade */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ width: min(var(--mosaic-max-presentation), calc(100vw - 36px)) !important; max-height: var(--mosaic-h-presentation) !important; margin-left: auto !important; margin-right: auto !important; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ width: min(var(--mosaic-max-desirade), calc(100vw - 56px)) !important; /* volontairement plus "serré" */ max-height: var(--mosaic-h-desirade) !important; margin-left: auto !important; margin-right: auto !important; } /* Le SVG remplit son conteneur (desktop/tablette) */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-svg, #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-svg{ width: 100% !important; height: auto !important; } /* Tablette: conserve l'écart sans forcer de scroll */ @media (max-width: 900px){ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ width: min(var(--mosaic-max-presentation), 96vw) !important; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ width: min(var(--mosaic-max-desirade), 90vw) !important; } } /* Mobile: scroll horizontal conservé + "zoom" uniquement sur Présentation */ @media (max-width: 520px){ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ width: calc(100vw - 28px) !important; max-height: var(--mosaic-h-presentation-mobile) !important; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ width: calc(100vw - 28px) !important; max-height: var(--mosaic-h-desirade-mobile) !important; } /* On force une largeur réelle plus grande : vignettes plus grandes + scroll */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-scroll .mosaic-svg{ width: var(--mosaic-svg-mobile-presentation) !important; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-scroll .mosaic-svg{ width: var(--mosaic-svg-mobile-desirade) !important; } } /* ========================================================= HOME_BAN — Bannière plein écran (desktop + mobile) Objectif: - image = taille de la page (viewport) - responsive mobile fiable (100vh iOS/Android via --vh) NOTE: --vh est défini en JS dans index.html ========================================================= */ :root{ --vh: 1vh; } /* Bandeau de fond derrière le header + accueil */ .top-bg{ height: calc(var(--vh, 1vh) * 100) !important; /* 100% viewport réel */ min-height: 100vh; } /* Source unique + rendu "plein écran" */ .top-bg::before{ background-image: url("images/Home_ban.jpeg") !important; background-size: cover !important; background-position: center 50% !important; } /* Mobile: on remonte légèrement le cadrage (souvent meilleur rendu) */ @media (max-width: 520px){ .top-bg::before{ background-position: center 35% !important; } } /* Accueil: pas de double background (on utilise top-bg) */ #accueil.hero{ background: none !important; min-height: calc((var(--vh, 1vh) * 100) - var(--sticky-header-offset) - var(--main-pad-top)) !important; } #accueil.hero::before{ content: none !important; } /* ========================================================= PATCH (04/02/2026) Header — textes légèrement plus grands + aperçu au clic des .icon-item (mobile) ========================================================= */ /* 1) Header : léger boost de lisibilité (sans casser le layout) */ .header .brand .name{ font-size: clamp(1.22rem, 2.1vw, 1.32rem); } .header .brand .place{ font-size: clamp(1.00rem, 1.8vw, 1.08rem); } .header .nav a, .header .menu-panel a{ font-size: 1.06rem; } /* Boutons téléphones (header) */ .header .btn.header-phone{ font-size: 0.96rem !important; } @media (max-width: 520px){ .header .nav a, .header .menu-panel a{ font-size: 1.04rem; } .header .btn.header-phone{ font-size: 0.94rem !important; } } /* ========================================================= PATCH — Mosaïques : vignettes plus grandes (04 févr. 2026) - Les SVG ont désormais preserveAspectRatio="xMidYMid slice" dans le HTML - On force une hauteur visible plus généreuse (sans débordement sur la page) ========================================================= */ :root{ --mosaic-h-accueil: 380px; --mosaic-h-presentation: 340px; --mosaic-h-desirade: 300px; --mosaic-h-accueil-mobile: 320px; /* Mobile: mosaïques Présentation + Désirade plus compactes */ --mosaic-h-presentation-mobile: 200px; --mosaic-h-desirade-mobile: 180px; } /* Fixe une hauteur (=> vignettes plus grandes) + masque proprement le surplus */ #accueil.hero > .mosaic-wrap{ height: var(--mosaic-h-accueil) !important; max-height: none !important; overflow: hidden !important; } #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ height: var(--mosaic-h-presentation) !important; max-height: none !important; overflow: hidden !important; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ height: var(--mosaic-h-desirade) !important; max-height: none !important; overflow: hidden !important; } /* Le conteneur interne remplit la hauteur (pour que le SVG fasse bien 100%) */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-scroll, #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-scroll{ height: 100% !important; padding-bottom: 0 !important; overflow: hidden !important; } /* Le SVG remplit son conteneur (cover via preserveAspectRatio="... slice") */ #accueil.hero > .mosaic-wrap .mosaic-svg, #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-svg, #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-svg{ width: 100% !important; height: 100% !important; max-width: none !important; display: block !important; } /* Mobile */ @media (max-width: 520px){ #accueil.hero > .mosaic-wrap{ height: var(--mosaic-h-accueil-mobile) !important; } #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ height: var(--mosaic-h-presentation-mobile) !important; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ height: var(--mosaic-h-desirade-mobile) !important; } } /* ========================================================= PATCH (10/02/2026) — Accueil : mosaïque "Accueil" entièrement visible sur mobile Problème : la règle "height: 100%" + conteneur à hauteur fixe + preserveAspectRatio="xMidYMid slice" recadrait le SVG et coupait des images. Solution : sur mobile, on laisse le SVG gérer sa hauteur via son ratio (height:auto). ========================================================= */ @media (max-width: 520px){ #accueil.hero > .mosaic-wrap{ height: auto !important; overflow: visible !important; /* permet aussi les rotations (éventail) sans couper */ } #accueil.hero > .mosaic-wrap .mosaic-svg{ width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ========================================================= PATCH (10/02/2026) — Atouts + Points forts Objectif : les "chips" (icon-item) passent à la ligne s'il n'y a plus de place. MAJ (11/02/2026) : largeur des chips = largeur du contenu (texte), pas de largeur mini. (Ne touche pas aux autres .icon-grid.) ========================================================= */ .icon-grid[aria-label="Atouts"], .icon-grid[aria-label="Points forts"]{ display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; } .icon-grid[aria-label="Atouts"] .icon-item, .icon-grid[aria-label="Points forts"] .icon-item{ flex: 0 0 auto; /* largeur auto = s'adapte au texte */ width: auto; max-width: 100%; /* sécurité si un item a un texte très long */ } /* Empêche le retour à la ligne *dans* un chip */ .icon-grid[aria-label="Atouts"] .icon-item span, .icon-grid[aria-label="Points forts"] .icon-item span{ white-space: nowrap; } /* ========================================================= PATCH (11/02/2026) — Adresse : texte tronqué avec "..." sur petits écrans Objectif : uniquement dans les blocs aria-label="Adresse". ========================================================= */ @media (max-width: 520px){ .icon-grid[aria-label="Adresse"] .icon-item{ overflow: hidden; /* empêche le débordement du contenu */ max-width: 100%; } .icon-grid[aria-label="Adresse"] .icon-item span{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* indispensable pour l'ellipsis dans un conteneur flex */ flex: 1 1 auto; } } /* ========================================================= PATCH (11/02/2026) — Désirade : coins arrondis visibles sur mobile - Force un conteneur "clip" (overflow hidden + border-radius) - Déplace le scroll éventuel vers .mosaic-scroll (si nécessaire) ========================================================= */ @media (max-width: 520px){ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ border-radius: 18px !important; overflow: hidden !important; /* garantit le clipping des coins */ -webkit-overflow-scrolling: auto; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-scroll{ border-radius: inherit; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-svg{ border-radius: inherit; } } /* ========================================================= PATCH (11/02/2026) — Désirade : images qui dépassent en hauteur (mobile) - Fixe la hauteur de la mosaïque - Force le SVG à suivre cette hauteur - Garde le scroll horizontal sur .mosaic-scroll ========================================================= */ @media (max-width: 520px){ /* Taille mobile demandée : Désirade légèrement plus petite */ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ height: 180px !important; max-height: 180px !important; } /* Le conteneur scroll prend toute la hauteur */ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-scroll{ height: 100% !important; padding-bottom: 0 !important; /* évite d'augmenter la hauteur utile */ box-sizing: border-box; } /* Le SVG suit exactement la hauteur du conteneur (plus de dépassement vertical) */ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-svg{ height: 100% !important; display: block; } } /* ========================================================= PATCH (11/02/2026) — Désirade mobile identique à "Mosaïque photos du gîte" - Même comportement que les mosaïques classiques en mobile : scroll horizontal sur .mosaic-wrap, taille auto, coins arrondis visibles - Cache les boutons prev/next en mobile (comme la mosaïque du gîte) ========================================================= */ @media (max-width: 520px){ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"]{ height: auto !important; max-height: none !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; padding-bottom: 6px !important; } /* Désactive le scroll interne (on scroll sur .mosaic-wrap comme pour le gîte) */ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-scroll{ overflow: visible !important; width: max-content !important; height: auto !important; padding-bottom: 0 !important; } /* Même largeur SVG que la mosaïque du gîte en mobile */ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-svg{ width: 1176px !important; max-width: none !important; height: auto !important; display: block; } /* Identique au gîte : pas de boutons en mobile */ #desirade .mosaic-wrap[data-mosaic-carousel="desirade"] .mosaic-nav{ display: none !important; } } /* ========================================================= PATCH (11/02/2026) — Présentation : scroll horizontal sur le conteneur (mobile) Objectif : "Mosaïque photos du gîte" (section Présentation) = même scroll que La Désirade. - Le scroll se fait sur .mosaic-wrap (pas sur .mosaic-scroll) - Boutons prev/next masqués en mobile ========================================================= */ @media (max-width: 520px){ /* Scroll horizontal sur le conteneur comme pour La Désirade */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; padding-bottom: 6px !important; } /* On désactive le scroll interne (le scroll est sur .mosaic-wrap) */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-scroll{ overflow: visible !important; width: max-content !important; height: 100% !important; padding-bottom: 0 !important; } /* Largeur fixe du SVG => déclenche le scroll horizontal */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-svg{ width: 1294px !important; /* même échelle mobile que les autres mosaïques (+10%) */ max-width: none !important; height: 100% !important; display: block !important; } /* Identique à La Désirade : pas de boutons en mobile */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-nav{ display: none !important; } /* Scrollbar discrète (mobile) */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]::-webkit-scrollbar{ height: 0; } } /* ========================================================= PATCH (11/02/2026) — Présentation : mosaïque alignée sur Désirade Objectif : même rendu/behaviour que la mosaïque de la section "desirade", sans impacter les autres mosaïques. - Desktop/tablette : même gabarit (largeur + hauteur) que Désirade - Mobile : même scroll (sur le conteneur), même sizing (SVG en height:auto) ========================================================= */ /* Desktop / tablette : on aligne le gabarit de Présentation sur celui de Désirade */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ width: min(1100px, 100%) !important; /* même hauteur que la mosaïque Désirade (valeur stable dans le fichier) */ height: var(--mosaic-h-desirade, 300px) !important; max-height: none !important; overflow: hidden !important; } /* Mobile : identique à Désirade (scroll horizontal + coins OK + pas de recadrage vertical) */ @media (max-width: 520px){ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"]{ height: auto !important; max-height: none !important; border-radius: 18px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; padding-bottom: 6px !important; } #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-scroll{ overflow: visible !important; width: max-content !important; height: auto !important; padding-bottom: 0 !important; } /* Même largeur que Désirade => même ratio/hauteur perçue */ #presentation .mosaic-wrap[data-mosaic-carousel="presentation"] .mosaic-svg{ width: 1176px !important; max-width: none !important; height: auto !important; display: block !important; } }