<!DOCTYPE html>
<html lang="fr" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar & Lounge des Quatre Rives</title>
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap" rel="stylesheet">
<style>
:root, [data-theme="light"] {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--color-bg: #ffffff;
--color-surface: #efe5d2;
--color-surface-2: #e7dcc6;
--color-border: #dacdb7;
--color-text: #3f2d25;
--color-text-muted: #4f3a31;
--color-primary: #4a3124;
--color-primary-hover: #36231a;
--color-accent: #e8dcc3;
--shadow-md: 0 10px 25px rgba(0,0,0,0.05);
--shadow-lg: 0 18px 40px rgba(0,0,0,0.12);
--radius-lg: 18px;
--radius-full: 999px;
--font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
}
[data-theme="dark"] {
--color-bg: #171614;
--color-surface: #201d19;
--color-surface-2: #2a2621;
--color-border: #4b433a;
--color-text: #f5efe7;
--color-text-muted: #c6bbaf;
--color-primary: #f0e2c2;
--color-primary-hover: #e3d2ad;
--color-accent: rgba(240, 226, 194, 0.12);
--shadow-md: 0 10px 25px rgba(0,0,0,0.28);
--shadow-lg: 0 18px 40px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
}
img {
display: block;
max-width: 100%;
height: auto;
}
button {
font: inherit;
cursor: pointer;
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
width: 48px;
height: 48px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--color-surface);
color: var(--color-text);
display: grid;
place-items: center;
box-shadow: var(--shadow-md);
}
.section-wrap {
min-height: 100vh;
padding: clamp(var(--space-12), 8vw, 5rem) 0;
background: var(--color-bg);
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.heading {
text-align: center;
margin-bottom: var(--space-10);
}
.heading-box {
display: inline-block;
background: var(--color-accent);
padding: 26px 36px;
border-radius: var(--radius-lg);
}
.heading h1 {
margin: 0 0 10px 0;
font-size: var(--text-2xl);
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1.1;
}
.heading p {
margin: 0 auto;
max-width: 760px;
font-size: var(--text-base);
color: var(--color-text);
}
.hero-card {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 28px;
align-items: stretch;
margin-bottom: 28px;
}
.media-card,
.info-card,
.hours-card,
.cta-card {
background: #f2ecdf;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.media-card {
position: relative;
min-height: 520px;
}
.media-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.label {
position: absolute;
top: 14px;
left: 14px;
background: rgba(255,255,255,0.92);
color: #3f2d25;
padding: 6px 10px;
border-radius: 12px;
font-size: 12px;
}
.info-card {
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
.info-card h2,
.hours-card h3,
.cta-card h3 {
margin: 0 0 10px 0;
font-size: var(--text-lg);
line-height: 1.2;
}
.info-card p,
.hours-card p,
.cta-card p,
.hours-list li {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.grid-bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.hours-card,
.cta-card {
padding: 24px;
}
.hours-list {
list-style: none;
padding: 0;
margin: 14px 0 0 0;
display: grid;
gap: 8px;
}
.hours-list strong {
color: var(--color-text);
}
.reserve-btn {
margin-top: 16px;
align-self: flex-start;
background: var(--color-primary);
color: #fff;
padding: 12px 18px;
border: none;
border-radius: var(--radius-full);
min-height: 44px;
transition: transform 180ms ease, background 180ms ease;
}
[data-theme="dark"] .reserve-btn,
[data-theme="dark"] .close-btn {
color: #171614;
}
.reserve-btn:hover,
.reserve-btn:focus-visible,
.close-btn:hover,
.close-btn:focus-visible {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
justify-content: center;
align-items: center;
z-index: 9999;
padding: 20px;
}
.modal-content {
background: var(--color-bg);
color: var(--color-text);
padding: 30px;
border-radius: var(--radius-lg);
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
.modal-content h2 {
margin-top: 0;
margin-bottom: 12px;
}
.modal-content p {
margin: 0 0 12px 0;
color: var(--color-text-muted);
}
.modal-content a {
color: var(--color-text);
text-decoration: none;
}
.close-btn {
margin-top: 16px;
background: var(--color-primary);
color: #fff;
padding: 10px 20px;
border: none;
border-radius: var(--radius-full);
min-height: 44px;
}
@media (max-width: 860px) {
.hero-card,
.grid-bottom {
grid-template-columns: 1fr;
}
.media-card {
min-height: 360px;
}
.heading-box {
padding: 22px 20px;
}
}
</style>
</head>
<body>
<button class="theme-toggle" data-theme-toggle aria-label="Basculer le thème">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
<section id="page-bar-lounge" class="section-wrap">
<div class="container">
<header class="heading">
<div class="heading-box">
<h1>Le bar & lounge des Quatre Rives</h1>
<p>
Un espace chaleureux, calme et convivial où les clients peuvent se retrouver,
se détendre ou travailler dans une ambiance cosy et élégante.
</p>
</div>
</header>
<section class="hero-card" aria-label="Présentation du bar et lounge">
<article class="media-card">
<img src="./assets/https://bret01.limbmc.com/wp-content/uploads/2026/06/Gemini_Generated_Image_pf4loypf4loypf4l-2.png" alt="Mon bar lounge" width="768" height="768" loading="lazy">
<span class="label">Bar & Lounge</span>
</article>
<article class="info-card">
<div>
<h2>Un lieu pensé pour tous les rythmes</h2>
<p>
Le lounge des Quatre Rives accueille aussi bien les voyageurs d’affaires en quête d’un cadre propice aux échanges informels que les clients loisirs souhaitant profiter d’un moment de détente.
</p>
</div>
<div>
<p>
Ouvert tous les jours de 14h00 à 22h00, il propose une sélection de cafés, de thés, de boissons fraîches ainsi qu’un coin pâtisserie l’après-midi, idéal pour une pause gourmande.
</p>
</div>
<button class="reserve-btn" onclick="openModal()">Nous contacter</button>
</article>
</section>
<section class="grid-bottom">
<article class="hours-card">
<h3>Horaires & ambiance</h3>
<p>
Moderne, apaisant et accessible, cet espace prolonge l’expérience de l’hôtel avec une atmosphère douce et soignée.
</p>
<ul class="hours-list">
<li><strong>Ouverture :</strong> tous les jours</li>
<li><strong>Horaires :</strong> 14h00 – 22h00</li>
<li><strong>Service :</strong> cafés, thés, boissons fraîches</li>
<li><strong>Pause gourmande :</strong> coin pâtisserie l’après-midi</li>
</ul>
</article>
<article class="cta-card">
<h3>Un espace qui reflète l’esprit des Quatre Rives</h3>
<p>
Le bar & lounge s’adapte aux différents besoins de la clientèle avec un cadre calme, confortable et convivial, pensé pour les échanges comme pour le repos.
</p>
<button class="reserve-btn" onclick="openModal()">Demander des informations</button>
</article>
</section>
</div>
</section>
<div id="reservationModal" class="modal" aria-hidden="true">
<div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<h2 id="modalTitle">Contact</h2>
<p>
Pour toute demande concernant le bar & lounge des <strong>Quatre Rives</strong>, merci de contacter directement l’établissement.
</p>
<p>
<strong>Téléphone :</strong> (+33) 5 63 89 67 52<br>
<strong>Email :</strong> <a href="mailto:hotel@quatre-rives.com">hotel@quatre-rives.com</a>
</p>
<button class="close-btn" onclick="closeModal()">Fermer</button>
</div>
</div>
<script>
(function () {
const toggle = document.querySelector('[data-theme-toggle]');
const root = document.documentElement;
let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
root.setAttribute('data-theme', theme);
function setIcon(mode) {
toggle.innerHTML = mode === 'dark'
? '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path></svg>'
: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>';
}
setIcon(theme);
toggle.addEventListener('click', function () {
theme = theme === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', theme);
setIcon(theme);
});
})();
function openModal() {
const modal = document.getElementById('reservationModal');
modal.style.display = 'flex';
modal.setAttribute('aria-hidden', 'false');
}
function closeModal() {
const modal = document.getElementById('reservationModal');
modal.style.display = 'none';
modal.setAttribute('aria-hidden', 'true');
}
window.addEventListener('click', function (event) {
const modal = document.getElementById('reservationModal');
if (event.target === modal) {
closeModal();
}
});
</script>
</body>
</html>Le bar & lounge des Quatre Rives
Le bar & lounge des Quatre Rives est pensé comme un espace à la fois chaleureux, calme et convivial. C’est un lieu où les clients peuvent se retrouver pour échanger, se détendre ou travailler dans une ambiance cosy, loin du bruit et de l’agitation.
Ouvert tous les jours de 14h00 à 22h00, le lounge propose une sélection de cafés, thés, boissons fraîches ainsi qu’un coin pâtisserie l’après-midi, idéal pour une pause gourmande. Cet espace s’adresse aussi bien aux voyageurs d’affaires, qui recherchent un endroit propice au travail et aux échanges informels, qu’aux clients loisirs souhaitant simplement profiter d’un moment de détente.
Le bar & lounge reflète pleinement l’esprit des Quatre Rives : un lieu moderne, apaisant et accessible, qui s’adapte aux différents rythmes et besoins de la clientèle.