/* ============================================================ 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;
pointer-events: none;
/* 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) { #presentation .mosaic-wrap, #desirade .mosaic-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } #presentation .mosaic-wrap svg, #desirade .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;
}
/* =========================================================
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;
}
/* =========================================================
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;
}
/* =========================================================
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;
scrollbar-width: none;
}
/* 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;
border-radius: inherit;}
/* 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) — Contact : texte tronqué avec "..." sur petits écrans
Objectif : dans le bloc "informations de contact" (#contact.presentation)
========================================================= */
@media (max-width: 520px){
#contact.presentation .contact-info-list .icon-item{
display: flex; /* force un conteneur flex plein largeur */
align-items: center;
width: 100%;
max-width: 100%;
overflow: hidden; /* empêche le débordement horizontal */
}
#contact.presentation .contact-info-list .icon-item i{
flex: 0 0 auto;
}
#contact.presentation .contact-info-list .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;
}
}
/* =========================================================
MOSAIQUES CARROUSEL (Présentation + Désirade) — refacto (11/02/2026)
Objectifs :
- Même structure HTML dans .mosaic-wrap (mosaic-scroll + mosaic-strip)
- Mobile : miniatures portrait, 1 seule ligne, scroll horizontal fluide + boucle
- Fallback sans JS : scroll horizontal du SVG (sans boutons)
========================================================= */
/* 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) */
height: var(--mosaic-h-desirade, 300px) !important;
max-height: none !important;
overflow: hidden !important;
}
/* Miniatures (strip) — base (desktop: masqué) */
:root{
--mosaic-thumb-w: 128px;
--mosaic-thumb-h: 186px;
}
.mosaic-wrap.mosaic-carousel .mosaic-strip{
display: none;
gap: 12px;
padding: 10px 12px 12px;
align-items: stretch;
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: none;
}
.mosaic-wrap.mosaic-carousel .mosaic-strip::-webkit-scrollbar{ height: 0; }
.mosaic-wrap.mosaic-carousel .mosaic-strip img{
flex: 0 0 auto;
width: var(--mosaic-thumb-w);
height: var(--mosaic-thumb-h);
object-fit: cover;
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.55);
box-shadow: 0 12px 26px rgba(0,0,0,0.14);
background: rgba(255,255,255,0.5);
display: block;
}
/* Mobile :
- Sans JS (pas de .mosaic-strip-ready) => fallback SVG scrollable
- Avec JS => on affiche uniquement le strip (design identique entre les 2 sections)
*/
@media (max-width: 520px){
.mosaic-wrap.mosaic-carousel{
border-radius: 18px !important;
}
/* Fallback sans JS : scroll horizontal du SVG */
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready){
height: auto !important;
max-height: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px !important;
scrollbar-width: none;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready) .mosaic-scroll{
overflow: visible !important;
width: max-content !important;
height: auto !important;
padding-bottom: 0 !important;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready) .mosaic-svg{
width: 1176px !important;
max-width: none !important;
height: auto !important;
display: block !important;
border-radius: inherit;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready) .mosaic-nav{
display: none !important;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready)::-webkit-scrollbar{
height: 0;
}
/* Mode miniatures (JS prêt) */
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready{
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-nav{
display: none !important;
}
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-svg{
display: none !important;
}
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip{
display: flex !important;
flex-wrap: nowrap !important;
}
}
/* =========================================================
Header : auto-hide au scroll (mobile)
========================================================= */
.header{
transition: transform 220ms ease;
will-change: transform;
}
.header.header-hidden{
transform: translateY(-110%);
}
@media (max-width: 820px){
.header{
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
}
/* Compense le header fixed (hauteur mesurée en JS via --header-h) */
.main{
padding-top: calc(18px + var(--header-h, 86px));
}
/* Ancres : évite que le titre soit caché sous le header */
section[id]{
scroll-margin-top: calc(var(--header-h, 86px) + 18px);
}
}
/* =========================================================
Accueil : mosaïque légèrement plus petite en desktop
========================================================= */
@media (min-width: 1024px){
#accueil .mosaic-wrap:not(.mosaic-carousel){
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
}
/* =========================================================
PATCH (11/02/2026) — Scrollbar mobile/tablette + tailles mosaïque Accueil
Demandes :
- Barre de scroll horizontale (mobile + tablette) pour les mosaïques carrousel
(sections aria-label="Présentation" et aria-label="La Désirade").
- Mosaïque Accueil : +30% (mobile) / -30% (tablette + desktop).
========================================================= */
/* 1) Carrousels (Présentation + Désirade) : afficher une scrollbar sur mobile/tablette */
@media (max-width: 1024px){
/* Strip (mode JS) */
.mosaic-wrap.mosaic-carousel .mosaic-strip{
scrollbar-width: thin !important; /* Firefox */
scrollbar-color: rgba(30,30,30,0.35) rgba(30,30,30,0.12) !important;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
padding-bottom: 14px; /* laisse la place à la barre */
}
.mosaic-wrap.mosaic-carousel .mosaic-strip img{
scroll-snap-align: start;
}
.mosaic-wrap.mosaic-carousel .mosaic-strip::-webkit-scrollbar{
height: 8px !important;
}
.mosaic-wrap.mosaic-carousel .mosaic-strip::-webkit-scrollbar-thumb{
background: rgba(30,30,30,0.35);
border-radius: 999px;
}
.mosaic-wrap.mosaic-carousel .mosaic-strip::-webkit-scrollbar-track{
background: rgba(30,30,30,0.12);
border-radius: 999px;
}
/* Fallback (sans JS) : si le SVG est scrollable, garder une barre visible */
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready){
scrollbar-width: thin !important;
scrollbar-color: rgba(30,30,30,0.35) rgba(30,30,30,0.12) !important;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready)::-webkit-scrollbar{
height: 8px !important;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready)::-webkit-scrollbar-thumb{
background: rgba(30,30,30,0.35);
border-radius: 999px;
}
.mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready)::-webkit-scrollbar-track{
background: rgba(30,30,30,0.12);
border-radius: 999px;
}
}
/* Tablette : même expérience que mobile (le strip remplace le SVG + boutons) */
@media (min-width: 521px) and (max-width: 1024px){
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready{
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-nav{
display: none !important;
}
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-svg{
display: none !important;
}
.mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip{
display: flex !important;
flex-wrap: nowrap !important;
}
}
/* 2) Accueil : aperçus +30% mobile / -30% tablette + desktop */
@media (max-width: 520px){
/* +30% : on agrandit le SVG et on le recentre */
#accueil.hero > .mosaic-wrap.reveal.mosaic-reveal .mosaic-svg{
width: 130% !important;
max-width: none !important;
margin-left: -15% !important;
margin-right: 0 !important;
}
}
@media (min-width: 521px){
/* -30% : largeur + hauteur du bloc Accueil */
#accueil.hero > .mosaic-wrap.reveal.mosaic-reveal{
width: min(770px, calc(100vw - 36px)) !important; /* 1100px * 0.70 */
height: 266px !important; /* 380px * 0.70 */
}
}
/* =========================================================
PATCH 2026-02-11 — Scrollbar uniquement sur mosaïques Présentation + Désirade
- Supprime tout scroll horizontal global (page / header / icon-grid)
- Conserve le scroll horizontal uniquement dans les mosaïques ciblées
========================================================= */
html{ overflow-x: hidden; }
body{ overflow-x: hidden; }
/* Pas de scroll horizontal hors mosaïques */
.header-inner .header-actions,
.header-inner .header-phones,
.icon-grid{
overflow-x: visible !important;
-webkit-overflow-scrolling: auto !important;
}
/* Sur mobile, on autorise le retour à la ligne plutôt qu'un scroll */
@media (max-width: 820px){
.header-inner .header-actions,
.header-inner .header-phones{
flex-wrap: wrap !important;
}
}
@media (max-width: 520px){
.icon-grid{
flex-wrap: wrap !important;
padding-bottom: 0 !important;
}
}
/* =========================================================
PATCH (11/02/2026) — Défilement horizontal des photos
Sections : Présentation + La Désirade
Objectifs :
- Mobile + tablette : défilement horizontal fluide via une barre visible
- Uniquement sur les mosaïques (pas de scroll horizontal global)
- Pas de duplication d’images (strip construit sans clones en JS)
========================================================= */
@media (max-width: 1024px){
/* Tablette : miniatures un peu plus grandes */
:root{
--mosaic-thumb-w: 168px;
--mosaic-thumb-h: 244px;
}
/* Mode miniatures (JS prêt) : on affiche uniquement le strip */
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready{
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-nav,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-nav{
display: none !important;
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-svg,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-svg{
display: none !important;
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip{
display: flex !important;
flex-wrap: nowrap !important;
width: 100%;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 12px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip img,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip img{
scroll-snap-align: start;
}
/* Scrollbar (WebKit) — visible mais discret */
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar{
height: 10px;
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar-thumb,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar-thumb{
border-radius: 999px;
background: rgba(30,30,30,0.28);
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar-track,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar-track{
background: rgba(0,0,0,0.08);
border-radius: 999px;
}
/* Fallback sans JS : scroll horizontal du SVG (barre visible) */
#presentation .mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready),
#desirade .mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready){
height: auto !important;
max-height: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px !important;
-webkit-mask-image: none !important;
mask-image: none !important;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
#presentation .mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready) .mosaic-nav,
#desirade .mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready) .mosaic-nav{
display: none !important;
}
#presentation .mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready)::-webkit-scrollbar,
#desirade .mosaic-wrap.mosaic-carousel:not(.mosaic-strip-ready)::-webkit-scrollbar{
height: 10px;
}
}
/* Mobile : miniatures un peu plus compactes + scrollbar légèrement plus fine */
@media (max-width: 520px){
:root{
--mosaic-thumb-w: 150px;
--mosaic-thumb-h: 218px;
}
#presentation .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar,
#desirade .mosaic-wrap.mosaic-carousel.mosaic-strip-ready .mosaic-strip::-webkit-scrollbar{
height: 8px;
}
}
/* =========================================================
PATCH (11/02/2026) — Mobile : Contact
Objectifs :
- Les réseaux sociaux restent visibles dans le bloc "Informations de contact".
- Les textes trop longs des .icon-item (contact-info-list) affichent "...".
Note : sur mobile, le conteneur était centré (justify-items:center) => certains items
dépassaient du viewport et étaient coupés par overflow-x:hidden (sans ellipsis).
========================================================= */
@media (max-width: 899px){
/* On garde le centrage visuel, mais on étire les items pour qu'ils restent dans le viewport */
#contact.presentation .contact-info{
justify-items: stretch !important;
}
#contact.presentation .contact-info-list,
#contact.presentation .contact-social{
justify-self: stretch;
width: 100%;
max-width: 100%;
}
/* Réseaux sociaux : forcé visible (certaines configs pouvaient les rogner) */
#contact.presentation .contact-social{
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex-wrap: wrap;
justify-content: center;
}
/* Ellipsis : contact-info-list */
#contact.presentation .contact-info-list .icon-item{
width: 100%;
max-width: 100%;
overflow: hidden;
}
#contact.presentation .contact-info-list .icon-item span{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
}
}
/* =========================================================
PATCH (11/02/2026) — Mobile : Footer (Informations)
Sécurité : s'assure que les réseaux sociaux ne sont pas masqués.
========================================================= */
@media (max-width: 520px){
.footer-main .footer-social{
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* =========================================================
PATCH (11/02/2026) — Mobile/Tablet : Réseaux sociaux (Footer + Contact)
Objectif : s'assurer que les 3 icônes sont visibles sur mobile/tablette,
même si un bloc voisin (ex: carte) crée un chevauchement.
========================================================= */
@media (max-width: 899px){
/* Priorité visuelle au texte + icônes si chevauchement */
.footer-grid--map .footer-main.informations{
position: relative;
z-index: 2;
overflow: visible;
}
.footer-grid--map .footer-map-col,
.footer-grid--map .footer-map-link-img{
position: relative;
z-index: 1;
}
/* Force l'affichage des réseaux sociaux dans le footer (au-delà de 520px) */
.footer-main .footer-social{
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Même sécurité pour le bloc "Informations de contact" */
#contact.presentation .contact-social{
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* =========================================================
PATCH (11/02/2026) — Responsive : aside[aria-label="Informations de contact"]
Objectifs :
- Empêcher toute dérive de padding sur le panel gauche (image full-bleed)
- Éviter les débordements (flex/grid) => ellipsis fiable
- Assurer le wrap des icônes sociales sur petits écrans
========================================================= */
/* Le panel gauche doit rester sans padding (image collée aux bords + radius propre) */
#contact.presentation .contact-left-panel{
padding: 0 !important;
}
/* Sécurité anti-overflow (important pour l'ellipsis dans un contexte flex/grid) */
#contact.presentation .contact-info-block,
#contact.presentation .contact-info,
#contact.presentation .contact-info-list{
min-width: 0;
}
/* Les réseaux sociaux doivent pouvoir passer à la ligne si besoin */
#contact.presentation .contact-social{
flex-wrap: wrap;
}
@media (max-width: 520px){
/* Un peu moins de padding sur mobile pour éviter l'effet "étouffé" */
#contact.presentation .contact-info-block{
padding: 12px 14px;
}
}
/* =========================================================
PATCH (21/02/2026) — Contact : responsive iPhone (sans changer le visuel)
Objectif : conserver le centrage "chip" des lignes, tout en empêchant
tout débordement horizontal (iOS) et en fiabilisant l'ellipsis.
========================================================= */
@media (max-width: 899px){
/* Rétablit le centrage visuel (le patch précédent étirait les items) */
#contact.presentation .contact-info{
justify-items: center !important;
}
/* Le conteneur prend toute la largeur, les items restent centrés */
#contact.presentation .contact-info-list{
width: 100%;
max-width: 100%;
justify-items: center;
}
/* Empêche les items (grid/flex) d'imposer une largeur > viewport */
#contact.presentation .contact-info-list .icon-item{
width: auto !important; /* conserve l'effet "chip" */
max-width: 100% !important; /* mais ne déborde jamais */
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
/* Ellipsis robuste en contexte flex + iOS : le texte doit pouvoir rétrécir */
#contact.presentation .contact-info-list .icon-item span{
min-width: 0;
max-width: calc(100% - 28px); /* 16px icône + ~12px (gap/sécurité) */
flex: 0 1 auto !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 520px){
/* Neutralise le "flex:1" des anciens patchs (sinon l'alignement change) */
#contact.presentation .contact-info-list .icon-item span{
flex: 0 1 auto !important;
}
}
/* =========================================================
PATCH (21/02/2026) — Contact : icônes Réseaux sociaux visibles (iPhone)
Constat : sur certains mobiles, le panel gauche peut être "compressé" et,
avec overflow:hidden + flex, la ligne des réseaux sociaux se retrouve rognée.
Fix : laisser le bloc infos prendre sa hauteur naturelle en vue mobile.
(Visuel inchangé : uniquement un correctif de sizing.)
========================================================= */
@media (max-width: 899px){
/* Le panel gauche doit grandir avec son contenu (évite le rognage en bas) */
#contact.presentation .contact-left{
height: auto !important;
}
/* Sur mobile (layout en colonne), on n'a pas besoin de "remplir" la hauteur */
#contact.presentation .contact-info-block{
flex: 0 0 auto !important;
}
/* La rangée des réseaux sociaux ne doit jamais se retrouver aplatie */
#contact.presentation .contact-social{
min-height: 40px; /* = .social-btn */
align-items: center;
}
}
/* =========================================================
PATCH (21/02/2026) — Contact : tailles des champs du formulaire (iPhone)
Objectif : uniformiser largeur + hauteur VISUELLE des inputs (text/tel/date/number)
sans changer le design (padding/radius/couleurs inchangés).
========================================================= */
/* Anti-overflow iOS dans une grille (permet aux champs de vraiment prendre 100%) */
#contact.presentation .contact-form-panel form,
#contact.presentation .contact-form-panel .grid,
#contact.presentation .contact-form-panel .grid .field{
min-width: 0;
}
/* Largeur : tous les contrôles prennent la largeur disponible */
#contact.presentation .contact-form-panel :where(input, textarea){
box-sizing: border-box;
font: inherit;
}
#contact.presentation .contact-form-panel :where(input:not([type="checkbox"]), textarea){
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Hauteur : on évite les variations iOS (notamment input[type=date]) */
#contact.presentation .contact-form-panel :where(input:not([type="checkbox"])){
line-height: 1.2;
min-height: 38px; /* correspond au rendu des autres champs avec le padding actuel */
}
/* iOS/Safari : stabilise l'alignement interne de la valeur du champ date */
#contact.presentation .contact-form-panel input[type="date"]::-webkit-date-and-time-value{
line-height: 1.2;
}
/* FIX iOS: scroll vertical immédiat au chargement (zone SVG accueil)
Sur iOS, un geste qui commence sur un SVG peut “accrocher” et empêcher
le scroll vertical sur la première interaction. On force la pan verticale
sans changer le rendu.
*/
#accueil .mosaic-wrap,
#accueil .mosaic-svg{
touch-action: pan-y;
}
#accueil .mosaic-svg image{
-webkit-user-drag: none;
user-drag: none;
}
#accueil .mosaic-svg,
#accueil .mosaic-svg *{
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
/* (Sécurité) Autorise toujours le scroll vertical même si le geste démarre sur l'accueil */
#accueil.hero{ touch-action: pan-y; }
/* =========================================================
PATCH (21/02/2026) — garantir le scroll vertical dès l'arrivée
(sécurité : n'affecte pas le lock de la modal, qui est plus spécifique)
========================================================= */
html, body{ overflow-y: auto; }