/* ===========================================================================
ADOUMIN BEACH RESORT — Feuille de style
---------------------------------------------------------------------------
Palette échantillonnée directement dans le logo :
navy #0A2540 (typographie du logo)
or #FFC72C (le soleil)
lagon #1B84B0 (les vagues sous le « U »)
Design clair, tropical, jamais sombre. Le bleu profond n'intervient que
comme bloc de marque (panneau « saveurs », bannière, footer).
Sommaire
01. Tokens 06. Hero
02. Reset 07. Sections 1 → 8
03. Typographie 08. Footer
04. Utilitaires 09. Modale / lightbox / flottants
05. Navbar 10. Responsive
======================================================================== */
/* Polices auto-hébergées — générées, ne pas éditer à la main.
Variables woff2, sous-ensembles latin + latin-ext. */
/* Inter — latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/Inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Inter — latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/Inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Jost italique — latin-ext */
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(../fonts/Jost-Italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Jost italique — latin */
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(../fonts/Jost-Italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Jost — latin-ext */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/Jost-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Jost — latin */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/Jost-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ═══════════════ 01. TOKENS ═══════════════ */
/* Palette relevée au pixel dans image/maquette.png :
or antique #BA8F3E navy lagune #1B3D4D
sable #E8E0D3 crème #F8F7F5
Les valeurs de la maquette servent aux SURFACES. Pour le TEXTE, elles échouent
toutes au contraste (or sur crème = 2,8:1, blanc sur or = 3,0:1) : on garde donc
la teinte exacte (40° pour l'or, 199° pour le navy) et on descend la luminosité
jusqu'au seuil AA. Le rendu reste celui de la maquette, en lisible. */
:root{
/* — Navy lagune (teinte 199, celle de la maquette) — */
--navy-900:#10242D;
--navy-800:#1B3D4D; /* LA couleur de la maquette : footer, bloc menu */
--navy-700:#245065;
--navy-600:#2D6680;
--navy-ink:#0D1E26; /* encre sur bouton doré : 5,8:1 */
--lagoon-800:#1B3D4D;
--lagoon-700:#24606F;
--lagoon-600:#3E8DA3;
--lagoon-500:#5FA9BC;
--lagoon-300:#A8D2DD;
--lagoon-100:#E1EFF3;
--lagoon-50:#F2F9FB;
/* — Or antique (teinte 40, celle de la maquette) — */
--gold-800:#5C471F;
--gold-700:#7A5F29; /* texte : 5,6:1 sur crème — 4,6:1 sur sable */
--gold-500:#BA8F3E; /* LA couleur de la maquette : boutons, filets, icônes */
--gold-400:#D4A54E; /* texte doré sur le navy du footer : 5,1:1 (mesuré) */
/* L'or de la marque (#BA8F3E) ne fait que 3,89:1 sur le navy du footer : il passe
en aplat (bouton, filet) mais pas en petit texte. Pour du texte sur navy, ce
token — et lui seul. */
--gold-on-navy:var(--gold-400);
--gold-200:#E4D3AE;
--gold-100:#F5EEDF;
/* Alias hérités — l'ancienne échelle « soleil » pointe sur l'or de la maquette */
--sun-700:var(--gold-700);
--sun-600:var(--gold-500);
--sun-500:var(--gold-500);
--sun-400:var(--gold-500);
--sun-200:var(--gold-200);
--sun-100:var(--gold-100);
--sand-300:#DDD2BE;
--sand-200:#E8E0D3; /* sable de la maquette */
--sand-100:#F1EDE4;
--cream:#F8F7F5; /* crème de la maquette */
--white:#FFFFFF;
/* Encre */
--ink:#1B3D4D;
--ink-soft:#42606E;
--ink-muted:#4F6B77; /* 5,9:1 sur crème */
--line:#E3DDD2;
--line-soft:#EEE9E0;
/* Typo */
--f-display:"Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
--f-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Rythme */
--wrap:1280px;
--gut:clamp(1.25rem, 4vw, 3rem);
--sec-y:clamp(4.5rem, 9vw, 8.5rem);
/* Rayons */
--r-xs:8px;
--r-sm:12px;
--r:18px;
--r-lg:28px;
--r-xl:40px;
--r-pill:999px;
/* Ombres — teintées navy, jamais noires */
--sh-xs:0 1px 2px rgba(10,37,64,.05), 0 2px 6px rgba(10,37,64,.04);
--sh-sm:0 2px 6px rgba(10,37,64,.05), 0 8px 18px rgba(10,37,64,.05);
--sh:0 4px 12px rgba(10,37,64,.06), 0 16px 36px rgba(10,37,64,.08);
--sh-lg:0 12px 28px rgba(10,37,64,.09), 0 32px 72px rgba(10,37,64,.13);
--sh-gold:0 8px 24px rgba(240,165,0,.30);
/* Verre dépoli */
--glass-bg:rgba(255,255,255,.72);
--glass-brd:rgba(255,255,255,.68);
--glass-blur:saturate(180%) blur(20px);
/* Mouvement — équivalents des courbes Framer Motion */
--e-out:cubic-bezier(.22,1,.36,1);
--e-io:cubic-bezier(.65,0,.35,1);
--e-soft:cubic-bezier(.4,0,.2,1);
--t-xs:.18s;
--t-sm:.28s;
--t:.45s;
--t-lg:.85s;
--nav-h:92px; /* laisse respirer le logo de 58 px de la maquette */
}
/* ═══════════════ 02. RESET ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
font-family:var(--f-body);
font-size:1rem;
line-height:1.7;
color:var(--ink-muted);
background:var(--cream);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse}
address{font-style:normal}
:focus-visible{outline:2.5px solid var(--lagoon-600);outline-offset:3px;border-radius:4px}
::selection{background:var(--sun-200);color:var(--navy-800)}
.skip-link{
position:fixed;top:-100px;left:1rem;z-index:2000;
padding:.85rem 1.4rem;border-radius:var(--r-pill);
background:var(--navy-800);color:#fff;font-weight:600;font-size:.9rem;
transition:top var(--t-sm) var(--e-out);
}
.skip-link:focus{top:1rem}
/* ═══════════════ 03. TYPOGRAPHIE ═══════════════ */
/* Échelle relevée sur la maquette (860 px de large -> ×1,674 pour un rendu 1440) :
h2 ≈ 45 px, titre hero ≈ 95 px. Plus petit et plus léger que la première version :
c'est ce qui donne le calme éditorial du modèle. */
.h2{
font-family:var(--f-display);
font-weight:300;
font-size:clamp(1.95rem, 3.4vw, 3rem);
line-height:1.12;
letter-spacing:-.022em;
color:var(--navy-800);
}
.kicker{
font-size:.68rem;
font-weight:600;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--gold-700);
margin-bottom:1.1rem;
}
/* Sur photo, la maquette met le kicker en gris clair neutre, pas en doré :
l'or est réservé aux fonds clairs et aux blocs bleus. */
.kicker--light{color:rgba(255,255,255,.82);text-shadow:0 1px 12px rgba(13,30,38,.55)}
/* « Bienvenue » — surtitre doré. La calligraphie Cormorant a sauté avec le passage
au sans : elle jurait avec une géométrique. Jost italique léger, largement espacé,
tient le même rôle d'accroche sans casser le système. */
.script{
font-family:var(--f-display);
font-style:italic;
font-weight:300;
font-size:clamp(1.15rem, 1.7vw, 1.45rem);
line-height:1;
letter-spacing:.08em;
color:var(--gold-700);
margin-bottom:.7rem;
}
.lead{
font-size:clamp(1.05rem, 1.5vw, 1.2rem);
line-height:1.72;
color:var(--ink-soft);
}
/* Filet de la maquette : bleu acier discret (#7E96A5), pas doré. */
.rule{
width:56px;height:2px;margin:1.4rem 0;
background:var(--lagoon-500);
transform-origin:left;
}
/* ═══════════════ 04. UTILITAIRES ═══════════════ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec-y);position:relative}
.section--sand{background:var(--sand-100)}
/* Le navigateur saute la mise en page et la peinture des sections hors écran :
~1 s de Style & Layout en moins au premier rendu sur mobile. `auto` mémorise la
hauteur réellement mesurée, donc pas de saut de scroll ni de barre qui bouge.
Le hero et .intro en sont exclus : ils sont visibles d'emblée. */
.section:not(.intro), .sunset, .foot{
content-visibility:auto;
contain-intrinsic-size:auto 1200px;
}
.section__head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
/* Assez large pour que les titres centrés cassent sur les
voulus et non au
hasard ; le sous-titre, lui, reste à une longueur de ligne lisible. */
.section__head--center{max-width:min(920px, 100%);margin-inline:auto;text-align:center}
.section__head--center .section__sub{max-width:62ch;margin-inline:auto}
.section__head--split{
max-width:none;display:flex;justify-content:space-between;
align-items:flex-end;gap:2rem;flex-wrap:wrap;
}
.section__sub{margin-top:1.2rem;font-size:1.05rem;color:var(--ink-muted)}
.glass{
background:var(--glass-bg);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-brd);
}
/* — Boutons —
Maquette : rectangles à peine arrondis, capitales espacées, petite taille.
Rien de « pilule » : c'est ce qui donne le ton éditorial haut de gamme. */
.btn{
--btn-bg:var(--navy-800);
--btn-fg:#fff;
display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
padding:.9rem 1.35rem;
border-radius:var(--r-xs);
background:var(--btn-bg);color:var(--btn-fg);
font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
line-height:1;white-space:nowrap;
border:1px solid transparent;
position:relative;overflow:hidden;
transition:transform var(--t-sm) var(--e-out),
box-shadow var(--t-sm) var(--e-out),
background-color var(--t-sm) var(--e-out),
color var(--t-sm) var(--e-out),
border-color var(--t-sm) var(--e-out);
}
.btn::after{ /* balayage lumineux au survol */
content:"";position:absolute;inset:0;
background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
transform:translateX(-110%);
transition:transform .75s var(--e-out);
pointer-events:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(110%)}
.btn:active{transform:translateY(0)}
.btn__ico{width:1.15em;height:1.15em;flex:none}
/* Pastille ronde d'icône, collée à droite du libellé (chevron, lecture, flèche) */
.btn__chip{
display:grid;place-items:center;flex:none;
width:22px;height:22px;
border-radius:50%;
border:1px solid currentColor;
transition:transform var(--t-sm) var(--e-out), background-color var(--t-sm) var(--e-out);
}
.btn__chip svg{width:11px;height:11px}
.btn:hover .btn__chip{transform:translateX(2px)}
.btn__chip--solid{border-color:transparent;background:currentColor}
.btn__chip--solid svg{color:var(--btn-bg)}
.btn--outline-light .btn__chip--solid svg{color:var(--navy-900)}
/* L'or de la maquette (#BA8F3E) porte une encre foncée : 5,8:1.
Le blanc de la maquette n'y passait qu'à 3,0:1. */
.btn--gold{--btn-bg:var(--gold-500);--btn-fg:var(--navy-ink);box-shadow:0 6px 18px rgba(186,143,62,.28)}
.btn--gold:hover{--btn-bg:#A87F35;box-shadow:0 10px 26px rgba(186,143,62,.36)}
.btn--navy:hover{--btn-bg:var(--navy-700);box-shadow:var(--sh)}
/* Contour clair sur photo — le fond très légèrement teinté suffit à décoller
le bouton d'un ciel clair sans virer au « bouton de verre ». */
.btn--outline-light{
--btn-bg:rgba(13,30,38,.45);--btn-fg:#fff;
border-color:rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.btn--outline-light:hover{--btn-bg:#fff;--btn-fg:var(--navy-900);border-color:#fff}
.btn--glass{
--btn-bg:rgba(13,30,38,.42);--btn-fg:#fff;
border-color:rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(10px) saturate(150%);
backdrop-filter:blur(10px) saturate(150%);
}
.btn--glass:hover{--btn-bg:#fff;--btn-fg:var(--navy-900);border-color:#fff}
.btn--glass-light{
--btn-bg:transparent;--btn-fg:#fff;
border-color:rgba(255,255,255,.5);
}
.btn--glass-light:hover{--btn-bg:#fff;--btn-fg:var(--navy-800)}
.btn--ghost-navy{
--btn-bg:transparent;--btn-fg:var(--navy-800);
border-color:var(--line);
}
.btn--ghost-navy:hover{--btn-bg:var(--navy-800);--btn-fg:#fff}
.btn--lg{padding:1.05rem 1.7rem;font-size:.74rem}
.btn--sm{padding:.72rem 1.1rem;font-size:.65rem}
.btn--block{display:flex;width:100%}
/* — Bouton rond (navigation slider) — */
.rnd{
width:52px;height:52px;flex:none;
display:grid;place-items:center;
border-radius:50%;
border:1px solid var(--line);
background:#fff;color:var(--navy-800);
transition:background-color var(--t-sm) var(--e-out),
color var(--t-sm) var(--e-out),
transform var(--t-sm) var(--e-out),
box-shadow var(--t-sm) var(--e-out),
border-color var(--t-sm) var(--e-out);
}
.rnd svg{width:20px;height:20px}
.rnd:hover:not(:disabled){background:var(--navy-800);color:#fff;border-color:var(--navy-800);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.rnd:disabled{opacity:.32;cursor:default}
/* Flèches fines de la maquette (en-tête « Notre cuisine ») */
.rnd--sm{width:38px;height:38px;border-color:var(--gold-500);color:var(--gold-700);background:transparent}
.rnd--sm svg{width:15px;height:15px}
.rnd--sm:hover:not(:disabled){background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-ink)}
/* — Badge — */
.badge{
display:inline-flex;align-items:center;gap:.5rem;
padding:.42rem 1rem;border-radius:var(--r-pill);
font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.badge--today{background:var(--sun-400);color:var(--navy-800)}
.badge__dot{
width:6px;height:6px;border-radius:50%;
background:var(--navy-800);
animation:pulse 2.4s var(--e-io) infinite;
}
@keyframes pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.35;transform:scale(1.5)}
}
/* — Système d'apparition (équivalent Framer Motion whileInView) — */
[data-reveal]{
opacity:0;
transform:translate3d(0,30px,0);
transition:opacity var(--t-lg) var(--e-out), transform var(--t-lg) var(--e-out);
transition-delay:var(--reveal-d, 0ms);
will-change:opacity, transform;
}
[data-reveal="left"]{transform:translate3d(-38px,0,0)}
[data-reveal="right"]{transform:translate3d(38px,0,0)}
[data-reveal="zoom"]{transform:scale(1.05)}
[data-reveal="fade"]{transform:none}
[data-reveal].is-in{opacity:1;transform:none;will-change:auto}
/* ═══════════════ 05. NAVBAR ═══════════════ */
.nav{
position:fixed;inset:0 0 auto;z-index:900;
border-bottom:1px solid transparent;
transition:transform var(--t) var(--e-soft),
background-color var(--t) var(--e-soft),
box-shadow var(--t) var(--e-soft),
border-color var(--t) var(--e-soft);
}
.nav__inner{
width:100%;max-width:var(--wrap);margin-inline:auto;
padding-inline:var(--gut);
height:var(--nav-h);
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
/* état défilé : fond blanc + ombre légère */
.nav.is-scrolled{
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
box-shadow:0 1px 0 rgba(10,37,64,.06), 0 8px 30px rgba(10,37,64,.07);
border-bottom-color:rgba(231,224,213,.7);
}
.nav.is-hidden{transform:translateY(-100%)}
/* Le panneau mobile est un enfant de .nav : son z-index le placerait au-dessus du
logo et du burger (non positionnés), rendant la croix de fermeture inatteignable.
On remonte donc logo + actions au-dessus du panneau, qui réserve déjà --nav-h en
haut pour les laisser voir. */
/* Le logo de la maquette occupe 12,9 % de la largeur ; ramené à la grille de 1280,
cela fait ~165 px. Nettement plus présent que la première version (118 px). */
.nav__logo{display:block;flex:none;position:relative;z-index:2;height:58px;width:156px}
.nav__logo-img{
position:absolute;inset:0;
height:100%;width:100%;object-fit:contain;object-position:left center;
transition:opacity var(--t) var(--e-soft);
}
.nav__logo-img--light{opacity:1;filter:drop-shadow(0 2px 10px rgba(6,24,43,.45))}
.nav__logo-img--dark{opacity:0}
/* Menu mobile ouvert : le panneau est crème, le logo blanc y disparaîtrait. */
.nav.is-scrolled .nav__logo-img--light,
.nav.is-menu-open .nav__logo-img--light{opacity:0}
.nav.is-scrolled .nav__logo-img--dark,
.nav.is-menu-open .nav__logo-img--dark{opacity:1}
.nav__list{display:flex;align-items:center;gap:.35rem}
.nav__link{
position:relative;display:block;
padding:.55rem .8rem;border-radius:var(--r-xs);
font-size:.9rem;font-weight:400;letter-spacing:.01em;
color:#fff;
text-shadow:0 1px 14px rgba(13,30,38,.55);
transition:color var(--t-sm) var(--e-out), text-shadow var(--t-sm) var(--e-out);
}
/* Soulignement doré de l'onglet actif (maquette) */
.nav__link::after{
content:"";position:absolute;left:.8rem;right:.8rem;bottom:.2rem;
height:2px;background:var(--gold-500);
transform:scaleX(0);transform-origin:right;
transition:transform var(--t-sm) var(--e-out);
}
.nav__link:hover::after,
.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.nav.is-scrolled .nav__link{color:var(--ink);text-shadow:none}
.nav.is-scrolled .nav__link:hover,
.nav.is-scrolled .nav__link.is-active{color:var(--navy-800)}
.nav__actions{position:relative;z-index:2;display:flex;align-items:center;gap:.75rem;flex:none}
.nav__cta{padding:.8rem 1.6rem}
.nav__mobile-extra{display:none}
.burger{
display:none;
width:46px;height:46px;
border-radius:50%;
/* place-content:center est indispensable : sans lui les rangées auto s'étirent sur
les 46px et les barres s'écartent de ~17px — le translateY(6.8px) ci-dessous ne
les ramène pas au centre et la croix se referme en chevron. */
place-content:center;place-items:center;gap:5px;
border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
transition:background-color var(--t-sm) var(--e-out), border-color var(--t-sm) var(--e-out);
}
.burger__bar{
display:block;width:19px;height:1.8px;border-radius:2px;
background:#fff;
transition:transform var(--t-sm) var(--e-out), opacity var(--t-xs) linear, background-color var(--t) var(--e-soft);
}
.nav.is-scrolled .burger,
.nav.is-menu-open .burger{background:transparent;border-color:var(--line)}
.nav.is-scrolled .burger__bar,
.nav.is-menu-open .burger__bar{background:var(--navy-800)}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.nav__scrim{
position:fixed;inset:0;z-index:880;
background:rgba(6,24,43,.4);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity var(--t) var(--e-soft);
}
.nav__scrim.is-in{opacity:1}
/* ═══════════════ 06. HERO ═══════════════ */
.hero{
position:relative;
min-height:100svh;
display:grid;align-items:center;
padding:calc(var(--nav-h) + 3rem) 0 7rem;
overflow:hidden;
isolation:isolate;
background:var(--navy-900);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__slides{position:absolute;inset:0}
/* — Diaporama : fondu enchaîné + travelling lent (Ken Burns) —
Les plans sont superposés ; seul .is-active est opaque. `visibility` évite que
les plans masqués restent dans l'arbre d'accessibilité et interceptent le survol. */
.hslide{
position:absolute;inset:0;
opacity:0;visibility:hidden;
transition:opacity 1.6s var(--e-soft), visibility 1.6s;
}
.hslide.is-active{opacity:1;visibility:visible}
.hslide img{
width:100%;height:100%;
object-fit:cover;object-position:center;
transform:scale(1.06);
will-change:transform;
}
/* Le zoom ne tourne que sur le plan visible : pas d'animation en tâche de fond. */
.hslide.is-active img{animation:kenburns 9s linear forwards}
@keyframes kenburns{
from{transform:scale(1.02)}
to{transform:scale(1.11)}
}
/* Voile : dégradé latéral, comme la maquette — dense à gauche sous le texte,
transparent à droite pour laisser respirer la photo. */
.hero__overlay{
position:absolute;inset:0;
background:
linear-gradient(90deg, rgba(13,30,38,.86) 0%, rgba(13,30,38,.68) 34%, rgba(13,30,38,.30) 64%, rgba(13,30,38,.10) 100%),
linear-gradient(180deg, rgba(13,30,38,.50) 0%, transparent 26%, transparent 60%, rgba(13,30,38,.48) 100%);
}
.hero__content{position:relative;z-index:1;text-align:left}
/* Entrée du hero — CSS pur, déclenchée dès le premier rendu.
Ce bloc était piloté par [data-reveal] (IntersectionObserver) comme le reste de la
page. Mais il est visible d'emblée : il attendait donc l'analyse de main.js (différé),
le déclenchement de l'observer, puis 190 ms de retard et 850 ms de transition. Sur
mobile bridé le LCP tombait à 3,9 s alors que le texte était peint dès 1,5 s.
Ici, aucune dépendance à JS : le texte s'anime dès qu'il est peint. */
.hero__content > *{animation:heroIn .7s var(--e-out) both}
.hero__content > :nth-child(1){animation-delay:.02s}
.hero__content > :nth-child(2){animation-delay:.10s}
.hero__content > :nth-child(3){animation-delay:.18s}
.hero__content > :nth-child(4){animation-delay:.26s}
@keyframes heroIn{
from{opacity:0;transform:translate3d(0,22px,0)}
to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
.hero__content > *{animation:none}
}
.hero__title{
font-family:var(--f-display);
/* 300 sur une photo : la géométrique reste lisible grâce au dégradé de gauche,
et la finesse est ce qui fait le cachet d'une Futura en grand. */
font-weight:300;
font-size:clamp(2.4rem, 5.6vw, 5rem); /* mesuré sur la maquette : ~80 px à 1440 */
line-height:1.04;
letter-spacing:-.028em;
color:#fff;
text-shadow:0 2px 30px rgba(13,30,38,.45);
margin-bottom:1.5rem;
max-width:16ch;
}
.hero__line{display:block}
.hero__desc{
font-size:clamp(.98rem, 1.25vw, 1.08rem);
line-height:1.85;
color:rgba(255,255,255,.9);
text-shadow:0 1px 18px rgba(13,30,38,.5);
max-width:46ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
/* — Pastilles du diaporama —
Calées à gauche sur la grille du contenu : le chevron garde le centre. */
.hero__ui{
position:absolute;z-index:1;
left:0;right:0;bottom:2.1rem;
width:100%;max-width:var(--wrap);margin-inline:auto;
padding-inline:var(--gut);
display:flex;
}
.hero__dots{display:flex;gap:.3rem}
.hero__dot{
display:grid;place-items:center;
width:30px;height:24px; /* cible tactile 24px (WCAG 2.2) */
border-radius:var(--r-pill);
}
.hero__dot::before{
content:"";display:block;
width:22px;height:2px;border-radius:2px;
background:rgba(255,255,255,.42);
transition:background-color var(--t) var(--e-out);
}
.hero__dot:hover::before{background:rgba(255,255,255,.75)}
.hero__dot.is-active::before{background:var(--gold-500)}
.hero__scroll{
position:absolute;left:50%;bottom:1rem;z-index:1;
transform:translateX(-50%);
display:grid;place-items:center;
width:40px;height:40px;
color:rgba(255,255,255,.8);
animation:bob 2.8s var(--e-io) infinite;
}
.hero__scroll svg{width:22px;height:22px}
.hero__scroll:hover{color:#fff}
@keyframes bob{
0%,100%{transform:translate(-50%,0)}
50%{transform:translate(-50%,6px)}
}
/* ═══════════════ 07. SECTION 1 — LE LIEU ═══════════════ */
.intro__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2.5rem, 6vw, 6rem);
align-items:center;
}
.intro__text{max-width:38rem}
.intro__text > p:not(.kicker){margin-bottom:1.1rem}
.intro__facts{
display:flex;flex-wrap:wrap;gap:2.4rem;
margin:2.2rem 0;
padding-top:1.8rem;
border-top:1px solid var(--line);
}
.intro__facts li{display:grid;gap:.15rem}
.intro__facts strong{
font-family:var(--f-display);
font-size:1.35rem;font-weight:600;color:var(--navy-800);
line-height:1.2;
}
.intro__facts span{font-size:.78rem;letter-spacing:.05em;color:var(--ink-muted)}
.intro__media{position:relative}
.intro__figure{
border-radius:var(--r);
overflow:hidden;
box-shadow:var(--sh);
will-change:transform;
}
.intro__figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* ═══════════════ SECTION 2 — EXPÉRIENCES ═══════════════ */
.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.5rem;
}
/* Cartes de la maquette : photo paysage, pastille navy à cheval sur le bas de
l'image, tout le texte centré, « DÉCOUVRIR → » doré en capitales. */
.card{
position:relative;
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-xs);
overflow:hidden;
box-shadow:var(--sh-xs);
transition:transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent}
.card__media{position:relative;overflow:hidden;aspect-ratio:16/11}
.card__media img{
width:100%;height:100%;object-fit:cover;
transition:transform 1.1s var(--e-out);
}
.card:hover .card__media img{transform:scale(1.07)}
.card__scrim{
position:absolute;inset:0;
background:linear-gradient(180deg, transparent 45%, rgba(13,30,38,.42) 100%);
opacity:0;
transition:opacity var(--t) var(--e-out);
}
.card:hover .card__scrim{opacity:1}
.card__body{
position:relative;
display:flex;flex-direction:column;flex:1;
align-items:center;text-align:center;
padding:2.2rem 1.35rem 1.6rem;
}
.card__icon{
position:absolute;top:-27px;left:50%;
transform:translateX(-50%);
width:54px;height:54px;
display:grid;place-items:center;
border-radius:50%;
background:var(--navy-800);
color:#fff;
border:3px solid var(--white);
transition:transform var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.card:hover .card__icon{transform:translateX(-50%) translateY(-4px);background:var(--gold-500)}
.card:hover .card__icon svg{color:var(--navy-ink)}
.card__icon svg{width:23px;height:23px;transition:color var(--t) var(--e-out)}
.card__title{
font-family:var(--f-body);
font-size:.8rem;font-weight:700;color:var(--navy-800);
letter-spacing:.11em;text-transform:uppercase;
line-height:1.3;margin:.2rem 0 .7rem;
}
.card__desc{font-size:.8rem;line-height:1.7;flex:1}
.card__link{
display:inline-flex;align-items:center;gap:.45rem;
margin-top:1.2rem;
font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold-700);
transition:color var(--t-sm) var(--e-out), gap var(--t-sm) var(--e-out);
}
.card__link:hover{color:var(--navy-800);gap:.75rem}
.card__arrow{transition:transform var(--t-sm) var(--e-out)}
.card__link:hover .card__arrow{transform:translateX(3px)}
/* ═══════════════ SECTION 3 — MENU & CARTE ═══════════════ */
/* ── Bloc éditorial « Découvrez nos saveurs » ──────────────────────────────
Une photo, un panneau lagune. Deux moitiés franches, un seul message.
La carte Google occupait ici une 2e colonne : quatre bandes verticales pour
deux sujets sans rapport. Elle est désormais uniquement en section Contact,
là où l'on cherche à venir. */
.saveurs{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
align-items:stretch;
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--sh-lg);
background:
radial-gradient(120% 130% at 92% 4%, var(--navy-700) 0%, transparent 60%),
linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 100%);
isolation:isolate;
}
.saveurs__media{
position:relative;z-index:1;
min-height:clamp(320px, 40vw, 520px);
overflow:hidden;
}
.saveurs__media img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
transition:transform 1.4s var(--e-out);
}
.saveurs:hover .saveurs__media img{transform:scale(1.04)}
/* Fondu vers le bleu : la photo se dissout dans le panneau au lieu d'être coupée net. */
.saveurs__media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg, transparent 55%, rgba(16,36,45,.45) 82%, var(--navy-900) 100%);
}
.saveurs__body{
position:relative;z-index:1;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
padding:clamp(2.2rem, 4vw, 4rem) clamp(1.6rem, 3.4vw, 3.6rem);
}
/* Filet doré : le même signal que le .rule des autres sections, en version claire. */
.saveurs__eyebrow{
display:block;width:44px;height:2px;
background:var(--gold-500);
margin-bottom:1.5rem;
}
.saveurs__title{
font-family:var(--f-display);
font-weight:300;
font-size:clamp(2rem, 3.4vw, 3.05rem);
line-height:1.08;letter-spacing:-.025em;
color:#fff;
}
.saveurs__txt{
margin:1.2rem 0 0;
color:rgba(255,255,255,.8);
font-size:.92rem;line-height:1.8;
max-width:44ch;
}
/* Deux repères courts : on ancre la promesse sans rallonger le paragraphe. */
.saveurs__facts{
display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;
margin:1.8rem 0;padding-top:1.5rem;
border-top:1px solid rgba(255,255,255,.16);
width:100%;
}
.saveurs__facts li{display:grid;gap:.15rem}
.saveurs__facts strong{
font-family:var(--f-display);
font-size:1.05rem;font-weight:600;color:#fff;line-height:1.2;
}
.saveurs__facts span{font-size:.74rem;color:rgba(255,255,255,.62);letter-spacing:.03em}
.saveurs__cta{display:flex;flex-wrap:wrap;gap:.7rem}
/* — La carte consultable —
L'espacement était porté par .menu__top (supprimé avec la carte Google). */
.carte{margin-top:clamp(4rem, 8vw, 7rem)}
.carte__head{
display:flex;justify-content:space-between;align-items:baseline;
gap:1.5rem 2rem;flex-wrap:wrap;
margin-bottom:clamp(2rem,4vw,3rem);
padding-bottom:1.2rem;
border-bottom:1px solid var(--line);
}
.carte__title{
font-family:var(--f-display);
font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;
color:var(--navy-800);line-height:1.2;
}
/* — Façade de carte (perf + confidentialité : l'iframe ne charge qu'au clic) —
Plan stylisé façon plan de ville : terre sable, lagune bleue en diagonale,
trame de rues. Dessiné en CSS, zéro requête, zéro cookie avant le clic. */
.mapfacade{
position:absolute;inset:0;
display:grid;place-items:center;
overflow:hidden;
background:#EFEBE3;
}
/* Trame de rues */
.mapfacade__grid{
position:absolute;inset:-2px;
background-image:
linear-gradient(rgba(27,61,77,.10) 1.5px, transparent 1.5px),
linear-gradient(90deg, rgba(27,61,77,.10) 1.5px, transparent 1.5px),
linear-gradient(rgba(27,61,77,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(27,61,77,.05) 1px, transparent 1px);
background-size:96px 96px, 96px 96px, 32px 32px, 32px 32px;
}
/* La lagune : bande sinueuse en diagonale, comme sur le plan de la maquette */
.mapfacade__water{
position:absolute;inset:0;
background:
radial-gradient(120% 78% at 12% 118%, var(--lagoon-500) 0%, var(--lagoon-500) 44%, transparent 45%),
radial-gradient(96% 62% at 108% 22%, var(--lagoon-500) 0%, var(--lagoon-500) 46%, transparent 47%),
linear-gradient(118deg, transparent 38%, var(--lagoon-500) 39%, var(--lagoon-500) 62%, transparent 63%);
opacity:.9;
}
/* Berge : liseré plus clair au bord de l'eau */
.mapfacade__water::after{
content:"";position:absolute;inset:0;
background:linear-gradient(118deg, transparent 37.4%, rgba(255,255,255,.5) 38%, transparent 39.6%,
transparent 61.6%, rgba(255,255,255,.5) 62.4%, transparent 63.2%);
}
.mapfacade__pin{
position:absolute;top:42%;left:46%;
transform:translate(-50%,-50%);
color:var(--gold-500);
filter:drop-shadow(0 5px 10px rgba(13,30,38,.35));
animation:pinfloat 3.4s var(--e-io) infinite;
z-index:1;
}
.mapfacade__pin svg{width:34px;height:34px}
@keyframes pinfloat{
0%,100%{transform:translate(-50%,-50%)}
50%{transform:translate(-50%,calc(-50% - 6px))}
}
.mapfacade__btn{
position:relative;z-index:1;
display:inline-flex;align-items:center;gap:.55rem;
padding:.8rem 1.5rem;
border-radius:var(--r-pill);
background:rgba(255,255,255,.9);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.9);
color:var(--navy-800);
font-size:.83rem;font-weight:600;
box-shadow:var(--sh-sm);
transition:transform var(--t-sm) var(--e-out), box-shadow var(--t-sm) var(--e-out), background-color var(--t-sm) var(--e-out);
}
.mapfacade__btn svg{width:17px;height:17px}
.mapfacade__btn:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--sh)}
/* — La carte consultable — */
/* Plat du jour */
.daily{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
gap:0;
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--sh);
margin-bottom:clamp(2.5rem,5vw,3.5rem);
background:
linear-gradient(120deg, rgba(255,255,255,.86), rgba(255,246,223,.7)),
var(--sand-100);
}
.daily__media{position:relative;overflow:hidden;min-height:280px}
.daily__media img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
transition:opacity var(--t) var(--e-soft), transform 1.2s var(--e-out);
}
.daily:hover .daily__media img{transform:scale(1.05)}
.daily__media img.is-swapping{opacity:0}
.daily__body{
padding:clamp(1.75rem, 3.4vw, 2.9rem);
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
.daily__day{
margin-top:1.1rem;
font-size:.76rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
color:var(--ink-muted);
}
.daily__title{
font-family:var(--f-display);
font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:600;
line-height:1.15;color:var(--navy-800);
margin:.3rem 0 .7rem;
}
.daily__desc{font-size:.94rem;max-width:42ch;margin-bottom:1.2rem}
.daily__price{
font-family:var(--f-display);
font-size:1.7rem;font-weight:600;color:var(--navy-800);
margin-bottom:1.6rem;
}
.daily__cur{font-family:var(--f-body);font-size:.78rem;font-weight:600;color:var(--ink-muted);letter-spacing:.08em}
/* ── Onglets de la carte : pastilles centrées ──────────────────────────────
Le rail reste scrollable en dessous de sa largeur naturelle ; au-delà, il se
centre. `justify-content:center` seul casserait le défilement (le débord
gauche devient inatteignable) : c'est `margin-inline:auto` sur la liste qui
centre sans jamais rogner. */
.tabs__scroller{
overflow-x:auto;
overscroll-behavior-x:contain;
scrollbar-width:none;
margin-bottom:2.5rem;
padding:.3rem .25rem;
}
.tabs__scroller::-webkit-scrollbar{display:none}
/* `width:max-content` + `margin-inline:auto` : centré quand ça tient, défilant
sinon (les marges auto tombent à 0 dès que le contenu déborde).
Surtout PAS de `max-width:100%` ici — il bride la liste à la largeur du rail et
écrase les pastilles ; les libellés se retrouvent tronqués sur mobile. */
.tabs__list{
display:flex;gap:.5rem;
width:max-content;
margin-inline:auto;
}
.tabs__btn{
position:relative;
flex:none;
padding:.7rem 1.35rem;
border-radius:var(--r-pill);
border:1px solid var(--line);
background:#fff;
font-size:.84rem;font-weight:500;
color:var(--ink-muted);
white-space:nowrap;
overflow:hidden;
isolation:isolate;
transition:color var(--t-sm) var(--e-out),
border-color var(--t-sm) var(--e-out),
transform var(--t-sm) var(--e-out),
box-shadow var(--t-sm) var(--e-out);
}
/* Le fond doré grandit depuis le centre au survol, et reste au clic. */
.tabs__btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:var(--gold-500);
transform:scale(0);
border-radius:inherit;
transition:transform var(--t) var(--e-out);
}
.tabs__btn:hover{
color:var(--navy-800);
border-color:var(--gold-400);
transform:translateY(-2px);
box-shadow:var(--sh-xs);
}
.tabs__btn:active{transform:translateY(0) scale(.97)}
.tabs__btn.is-active{
color:var(--navy-900);
font-weight:600;
border-color:transparent;
box-shadow:0 6px 18px rgba(186,143,62,.32);
}
.tabs__btn.is-active::before{transform:scale(1)}
.tabs__btn.is-active:hover{transform:translateY(-2px)}
.tabs__panel[hidden]{display:none}
.tabs__panel{animation:panelin .5s var(--e-out) both}
@keyframes panelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dishes{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:.4rem 3.5rem;
}
.dish{
padding:1.05rem 0;
border-bottom:1px dashed var(--line);
transition:padding-left var(--t-sm) var(--e-out);
}
.dish:hover{padding-left:.6rem}
.dish__head{display:flex;align-items:baseline;gap:.6rem}
.dish__name{
font-family:var(--f-display);
font-size:1.08rem;font-weight:600;color:var(--navy-800);
line-height:1.35;flex:none;max-width:78%;
}
.dish__dots{
flex:1;
border-bottom:1px dotted var(--line);
transform:translateY(-4px);
min-width:1.5rem;
}
.dish__price{
flex:none;
font-family:var(--f-display);
font-size:1.05rem;font-weight:600;color:var(--sun-700);
font-variant-numeric:tabular-nums;
}
.dish__tag{
display:inline-block;
margin-left:.5rem;
padding:.15rem .5rem;
border-radius:var(--r-pill);
background:var(--lagoon-100);
color:var(--lagoon-800);
font-family:var(--f-body);
font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
vertical-align:middle;
}
.dish__desc{margin-top:.2rem;font-size:.85rem;line-height:1.6;color:var(--ink-muted);max-width:52ch}
/* ═══════════════ SECTION 4 — NOTRE CUISINE ═══════════════ */
/* Maquette : titre parfaitement centré, flèches à droite à hauteur du titre.
Les flèches sont sorties du flux, sinon elles décentreraient le titre. */
.cuisine__head{
position:relative;
margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
.cuisine__head-txt{text-align:center;max-width:none}
.cuisine__head .slider__nav{
position:absolute;right:0;bottom:.15rem;
display:flex;gap:.5rem;
}
.cuisine__title{
font-family:var(--f-display);
font-weight:400;
font-size:clamp(1.5rem,2.9vw,2.2rem);
line-height:1.25;
color:var(--navy-800);
letter-spacing:-.01em;
}
.slider{
position:relative;
/* Retrait qui aligne la 1re vignette sur la grille, tout en laissant le rail
filer jusqu'au bord de l'écran. */
--slider-pad:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.slider__track{
display:flex;gap:1.25rem;
padding-inline:var(--slider-pad);
padding-block:.5rem 1.75rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
/* Indispensable : sans scroll-padding, `mandatory` refuse scrollLeft=0 (la 1re
vignette n'y est pas alignée sur le snapport) et saute d'emblée du retrait. */
scroll-padding-inline:var(--slider-pad);
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
cursor:grab;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.slider__track.is-dragging *{pointer-events:none}
/* Maquette : vignettes paysage compactes en ligne, légende au survol seulement. */
.shot{
position:relative;flex:none;
width:clamp(200px, 21vw, 268px);
scroll-snap-align:start;
border-radius:var(--r-xs);
overflow:hidden;
background:var(--navy-900);
box-shadow:var(--sh-xs);
transition:box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.shot:hover{box-shadow:var(--sh);transform:translateY(-5px)}
.shot img{
width:100%;aspect-ratio:4/3;object-fit:cover;
transition:transform 1.1s var(--e-out), opacity var(--t) var(--e-out);
-webkit-user-drag:none;user-select:none;
}
.shot:hover img{transform:scale(1.07);opacity:.85}
.shot figcaption{
position:absolute;inset:auto 0 0;
display:grid;gap:.1rem;
padding:2.2rem .95rem .9rem;
background:linear-gradient(180deg, transparent, rgba(13,30,38,.92));
color:#fff;
opacity:0;transform:translateY(6px);
transition:opacity var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.shot:hover figcaption,
.shot:focus-within figcaption{opacity:1;transform:none}
.shot__t{font-family:var(--f-display);font-size:1rem;font-weight:600;line-height:1.3}
.shot__s{font-size:.7rem;color:rgba(255,255,255,.75);letter-spacing:.03em}
.slider__ui{
display:flex;align-items:center;justify-content:space-between;gap:2rem;
margin-top:1.25rem;
}
.slider__progress{
position:relative;flex:1;height:2px;max-width:380px;
background:var(--line);border-radius:2px;overflow:hidden;
}
.slider__bar{
position:absolute;inset:0 auto 0 0;
width:30%;
background:var(--navy-800);border-radius:2px;
transform-origin:left;
transition:transform .12s linear, width .12s linear;
}
.slider__nav{display:flex;gap:.65rem;flex:none}
.slider--gal .shot,
.slider--gal .gal{width:clamp(220px, 24vw, 320px)}
/* Galerie */
.gal{
position:relative;flex:none;
width:clamp(220px, 24vw, 320px);
scroll-snap-align:start;
border-radius:var(--r);
overflow:hidden;
background:var(--navy-800);
box-shadow:var(--sh-xs);
transition:box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.gal img{
width:100%;aspect-ratio:1/1;object-fit:cover;
transition:transform 1.1s var(--e-out), filter var(--t) var(--e-out);
-webkit-user-drag:none;user-select:none;
}
.gal:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.gal:hover img{transform:scale(1.08)}
.gal__hov{
position:absolute;inset:0;
display:grid;place-items:center;
background:rgba(10,37,64,.42);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
color:#fff;
opacity:0;
transition:opacity var(--t) var(--e-out);
}
.gal:hover .gal__hov,
.gal:focus-visible .gal__hov{opacity:1}
.gal__hov svg{width:30px;height:30px;fill:currentColor;transform:scale(.8);transition:transform var(--t) var(--e-out)}
.gal:hover .gal__hov svg{transform:scale(1)}
/* Reels */
.reels{margin-top:clamp(3rem,6vw,4.5rem)}
.reels__title{
font-family:var(--f-display);
font-size:1.5rem;font-weight:600;color:var(--navy-800);
margin-bottom:1.5rem;
}
.reels__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:720px}
.reel{
position:relative;
border-radius:var(--r);
overflow:hidden;
background:var(--navy-800);
box-shadow:var(--sh-sm);
transition:transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.reel img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform 1.1s var(--e-out), opacity var(--t) var(--e-out)}
.reel:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.reel:hover img{transform:scale(1.06);opacity:.82}
.reel__play{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:54px;height:54px;
display:grid;place-items:center;
border-radius:50%;
background:rgba(255,255,255,.92);
color:var(--navy-800);
box-shadow:var(--sh);
transition:transform var(--t) var(--e-out), background-color var(--t) var(--e-out);
}
.reel__play svg{width:22px;height:22px;margin-left:2px}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.14);background:var(--sun-400)}
.reel__label{
position:absolute;left:0;right:0;bottom:0;
padding:2rem .9rem .85rem;
background:linear-gradient(180deg,transparent,rgba(6,24,43,.85));
color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.04em;
text-align:left;
}
/* ═══════════════ SECTION 5 — COUCHER DE SOLEIL ═══════════════ */
.sunset{
position:relative;
min-height:min(88svh, 780px);
display:grid;place-items:center;
padding:var(--sec-y) var(--gut);
overflow:hidden;
isolation:isolate;
background:var(--navy-800);
}
.sunset__media{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.sunset__media img{width:100%;height:100%;object-fit:cover}
/* Le voile s'assombrit AU CENTRE, derrière le texte : le ciel de coucher de soleil
est très clair et le titre blanc s'y noyait. Les bords restent lumineux, donc
la photo respire toujours. */
.sunset__scrim{
position:absolute;inset:0;z-index:-1;
background:
radial-gradient(72% 58% at 50% 47%, rgba(6,24,43,.60) 0%, rgba(6,24,43,.34) 52%, rgba(6,24,43,.05) 82%),
linear-gradient(180deg, rgba(6,24,43,.34) 0%, rgba(6,24,43,.08) 42%, rgba(6,24,43,.5) 100%);
}
.sunset__inner{text-align:center;max-width:900px}
.sunset__title{
font-family:var(--f-display);
font-weight:300;
font-size:clamp(2.4rem, 6.4vw, 5.2rem);
line-height:1.06;letter-spacing:-.03em;
color:#fff;
text-shadow:0 2px 44px rgba(6,24,43,.55);
margin-bottom:2.2rem;
}
/* ═══════════════ SECTION 6 — ÉVÉNEMENTS ═══════════════ */
/* Maquette : plus de cartes — 5 icônes dorées au trait alignées, libellé dessous,
et un seul bouton « EN SAVOIR PLUS » sous la rangée. */
.events__grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:1rem;
max-width:880px;margin-inline:auto;
}
.evt{
position:relative;
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:.85rem;
padding:1rem .5rem;
border-radius:var(--r-xs);
transition:transform var(--t) var(--e-out);
}
.evt:hover{transform:translateY(-4px)}
.evt__ico{
display:grid;place-items:center;
width:52px;height:52px;
color:var(--gold-500);
transition:color var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.evt__ico svg{width:100%;height:100%;stroke-width:1.1}
.evt:hover .evt__ico{color:var(--navy-800);transform:scale(1.08)}
.evt__t{
font-family:var(--f-body);
font-size:.78rem;font-weight:500;color:var(--ink-muted);
line-height:1.35;letter-spacing:.01em;
transition:color var(--t) var(--e-out);
}
.evt:hover .evt__t{color:var(--navy-800)}
/* La maquette ne montre pas les descriptions : on les garde dans le flux pour le
SEO et les lecteurs d'écran, masquées visuellement. Elles ne sont pas focusables,
contrairement à un lien — les liens par carte, eux, ont été retirés du HTML
(un lien invisible mais atteignable au clavier est un piège au focus). */
.evt__d{
position:absolute;
width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.events__cta{display:flex;justify-content:center;margin-top:2.2rem}
/* Agenda */
.agenda{
margin-top:clamp(3rem,6vw,4.5rem);
padding:clamp(1.75rem,3.5vw,2.75rem);
border-radius:var(--r-lg);
background:linear-gradient(150deg, var(--lagoon-50), var(--sand-100));
border:1px solid var(--line-soft);
}
.agenda__head{
display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
flex-wrap:wrap;margin-bottom:1.5rem;
}
.agenda__title{font-family:var(--f-display);font-size:1.5rem;font-weight:600;color:var(--navy-800)}
.agenda__note{font-size:.78rem;color:var(--ink-muted)}
.agenda__list{display:grid;gap:.6rem}
.agenda__item{
display:grid;
grid-template-columns:88px 1fr auto;
align-items:center;gap:1.25rem;
padding:1rem 1.25rem;
border-radius:var(--r);
background:rgba(255,255,255,.75);
border:1px solid transparent;
transition:transform var(--t-sm) var(--e-out), box-shadow var(--t-sm) var(--e-out), border-color var(--t-sm) var(--e-out);
}
.agenda__item:hover{transform:translateX(5px);box-shadow:var(--sh-xs);border-color:var(--line-soft)}
.agenda__when{
display:grid;justify-items:center;gap:.1rem;
padding-right:1.25rem;
border-right:1px solid var(--line);
}
.agenda__d{font-family:var(--f-display);font-size:1.15rem;font-weight:600;color:var(--navy-800);line-height:1}
.agenda__h{font-size:.7rem;color:var(--ink-muted);letter-spacing:.04em}
.agenda__body{display:grid;gap:.1rem}
.agenda__body strong{font-size:.95rem;font-weight:600;color:var(--navy-800)}
.agenda__body span{font-size:.82rem;color:var(--ink-muted)}
.agenda__tag{
padding:.32rem .8rem;border-radius:var(--r-pill);
background:var(--lagoon-100);color:var(--lagoon-800);
font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
white-space:nowrap;
}
.agenda__tag--gold{background:var(--sun-100);color:var(--sun-700)}
/* ═══════════════ AVIS ═══════════════ */
.rating{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-top:1.4rem;flex-wrap:wrap}
.rating__stars{display:flex;gap:.15rem;color:var(--sun-400)}
.rating__stars svg{width:20px;height:20px}
.rating__txt{font-size:.9rem;color:var(--ink-muted)}
.rating__txt strong{font-family:var(--f-display);font-size:1.3rem;color:var(--navy-800);font-weight:600}
/* ── Cartes d'avis ─────────────────────────────────────────────────────────
Même langage que les vignettes Instagram : rail horizontal, carte arrondie,
ombre douce, décollement au survol. Le carrousel en fondu d'avant n'affichait
qu'un avis à la fois et masquait le volume ; ici on voit qu'il y en a d'autres. */
.slider--rev .slider__track{align-items:stretch}
.rev{
position:relative;flex:none;
display:flex;flex-direction:column;
width:clamp(280px, 30vw, 380px);
padding:clamp(1.5rem, 2.2vw, 2rem);
scroll-snap-align:start;
border-radius:var(--r);
background:#fff;
border:1px solid var(--line-soft);
box-shadow:var(--sh-xs);
transition:transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out),
border-color var(--t) var(--e-out);
}
.rev:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent}
.rev__stars{display:flex;gap:.15rem;color:var(--gold-500);margin-bottom:1rem}
.rev__stars svg{width:16px;height:16px;fill:currentColor}
.rev__stars svg.is-off{color:var(--line);}
.rev__quote{flex:1}
.rev__quote p{
font-family:var(--f-display);
font-size:1rem;line-height:1.65;
color:var(--navy-800);
}
.rev__quote p::before{content:"« "}
.rev__quote p::after{content:" »"}
.rev__foot{
display:flex;align-items:center;gap:.8rem;
margin-top:1.5rem;padding-top:1.2rem;
border-top:1px solid var(--line-soft);
}
.rev__avatar{
flex:none;
display:grid;place-items:center;
width:40px;height:40px;
border-radius:50%;
background:var(--lagoon-100);
color:var(--lagoon-800);
font-family:var(--f-display);
font-size:1.05rem;font-weight:600;
transition:background-color var(--t) var(--e-out), color var(--t) var(--e-out);
}
.rev:hover .rev__avatar{background:var(--gold-500);color:var(--navy-900)}
.rev__who{display:grid;gap:.1rem;min-width:0}
.rev__who strong{font-size:.88rem;font-weight:600;color:var(--navy-800)}
.rev__who span{font-size:.75rem;color:var(--ink-muted);letter-spacing:.03em}
/* ═══════════════ SECTION 8 — CONTACT ═══════════════ */
.contact__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2rem,4vw,3.5rem);
align-items:start;
}
.infos{display:grid;gap:1.6rem}
.info{display:flex;gap:1.1rem;align-items:flex-start}
.info__ico{
flex:none;
display:grid;place-items:center;
width:44px;height:44px;
border-radius:var(--r-sm);
background:#fff;
color:var(--lagoon-700);
border:1px solid var(--line-soft);
}
.info__ico svg{width:21px;height:21px}
.info__t{
font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-muted);margin-bottom:.35rem;
}
.info__v{font-size:.95rem;color:var(--navy-800);line-height:1.65}
.info__v a{transition:color var(--t-xs) var(--e-out)}
.info__v a:hover{color:var(--sun-700)}
.hours{font-size:.92rem;color:var(--navy-800)}
.hours th{
font-weight:400;text-align:left;
padding:.15rem 1.5rem .15rem 0;color:var(--ink-muted);
}
.hours td{font-weight:600;font-variant-numeric:tabular-nums;padding:.15rem 0}
.hours tr.is-today th{color:var(--navy-800);font-weight:600}
.hours tr.is-today td{color:var(--sun-700)}
/* ── Encart « ouvert / fermé » en direct ────────────────────────────────────
Calculé sur les horaires réels à chaque chargement (js/main.js § 12), au niveau
de l'adresse : la question qu'on se pose avant de venir, c'est « c'est ouvert ? ».
Reste masqué tant que le JS n'a pas tranché — mieux vaut rien qu'un statut faux. */
.livecard{
display:grid;gap:.3rem;
padding:1.15rem 1.35rem;
margin-bottom:2rem;
border-radius:var(--r);
border:1px solid var(--line-soft);
background:#fff;
box-shadow:var(--sh-xs);
}
.livecard__state{
display:flex;align-items:center;gap:.6rem;
font-family:var(--f-display);
font-size:1.15rem;font-weight:500;
color:var(--navy-800);
line-height:1.2;
}
.livecard__dot{
flex:none;
width:9px;height:9px;border-radius:50%;
background:var(--ink-muted);
position:relative;
}
/* Halo pulsé uniquement quand c'est ouvert : un point fixe suffit sinon. */
.livecard.is-open .livecard__dot{background:#1A7F45}
.livecard.is-open .livecard__dot::after{
content:"";position:absolute;inset:0;
border-radius:50%;background:#1A7F45;
animation:livepulse 2.6s var(--e-io) infinite;
}
@keyframes livepulse{
0%{transform:scale(1);opacity:.6}
70%,100%{transform:scale(2.6);opacity:0}
}
.livecard.is-closed .livecard__dot{background:var(--ink-muted)}
.livecard__detail{font-size:.85rem;color:var(--ink-muted);line-height:1.5}
.livecard__today{
margin-top:.5rem;padding-top:.6rem;
border-top:1px solid var(--line-soft);
font-size:.78rem;color:var(--ink-muted);
}
.livecard__today b{color:var(--navy-800);font-weight:600;font-variant-numeric:tabular-nums}
/* ── Bandeau carte, pleine largeur, juste avant le pied de page ── */
.mapband{
position:relative;
height:clamp(300px, 42vw, 460px);
background:var(--sand-100);
overflow:hidden;
}
.mapband__frame{position:absolute;inset:0}
.mapband__frame iframe{width:100%;height:100%;border:0;display:block}
/* Encart flottant : l'adresse reste lisible même une fois l'iframe chargée. */
.mapband__card{
position:absolute;top:50%;left:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
transform:translateY(-50%);
z-index:1;
display:grid;gap:.1rem;justify-items:start;
padding:1.6rem 1.8rem;
border-radius:var(--r);
box-shadow:var(--sh-lg);
max-width:min(340px, calc(100vw - var(--gut) * 2));
}
.mapband__addr{
font-family:var(--f-display);
font-size:1.15rem;font-weight:400;line-height:1.45;
color:var(--navy-800);
margin-bottom:1.1rem;
}
/* Formulaire */
.form{
padding:clamp(1.6rem,3vw,2.5rem);
border-radius:var(--r-lg);
box-shadow:var(--sh);
}
.form__title{
font-family:var(--f-display);
font-size:1.5rem;font-weight:600;color:var(--navy-800);
}
.form__sub{font-size:.85rem;color:var(--ink-muted);margin:.4rem 0 1.75rem}
.field{margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field__lbl{
display:block;margin-bottom:.45rem;
font-size:.78rem;font-weight:600;letter-spacing:.06em;
color:var(--navy-800);
}
.field__lbl span{color:var(--sun-600)}
.field__in{
width:100%;
padding:.85rem 1.05rem;
border-radius:var(--r-sm);
border:1px solid var(--line);
background:rgba(255,255,255,.9);
color:var(--ink);
font-size:.92rem;
transition:border-color var(--t-sm) var(--e-out), box-shadow var(--t-sm) var(--e-out), background-color var(--t-sm) var(--e-out);
}
.field__in::placeholder{color:#9AAABA}
.field__in:focus{
outline:none;
border-color:var(--lagoon-500);
background:#fff;
box-shadow:0 0 0 4px rgba(42,159,207,.14);
}
.field__in--area{resize:vertical;min-height:96px;line-height:1.6}
select.field__in{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6076' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right .9rem center;
background-size:16px;
padding-right:2.5rem;
}
.field__in.is-invalid{border-color:#D14343;box-shadow:0 0 0 4px rgba(209,67,67,.1)}
.field__err{
min-height:0;font-size:.75rem;color:#C0392B;
margin-top:.3rem;
opacity:0;transform:translateY(-3px);
transition:opacity var(--t-xs) var(--e-out), transform var(--t-xs) var(--e-out);
}
.field__err.is-shown{opacity:1;transform:none}
.form__note{margin-top:1rem;font-size:.72rem;color:var(--ink-muted);text-align:center;line-height:1.5}
.form__ok{
margin-top:1rem;padding:.9rem 1.1rem;
border-radius:var(--r-sm);
background:#E7F6EC;color:#166534;
font-size:.85rem;font-weight:500;text-align:center;
}
/* ── Formulaire de réservation en étapes ───────────────────────────────────
L'ordre des étapes suit la conversation d'un maître d'hôtel : le motif, puis la
date, puis les coordonnées. On ne réclame le téléphone qu'une fois la demande
formulée — l'inverse fait abandonner. */
.stepform{display:grid}
/* Fil d'étapes */
.steps{
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
gap:.5rem;
margin-bottom:1.75rem;
}
.steps__i{
display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5rem;
padding-top:.7rem;
border-top:2px solid var(--line);
transition:border-color var(--t) var(--e-out);
}
.steps__i.is-current,
.steps__i.is-done{border-top-color:var(--gold-500)}
.steps__n{
display:grid;place-items:center;
width:20px;height:20px;
border-radius:50%;
background:var(--line);
color:var(--ink-muted);
font-size:.66rem;font-weight:700;
transition:background-color var(--t) var(--e-out), color var(--t) var(--e-out);
}
.steps__i.is-current .steps__n{background:var(--gold-500);color:var(--navy-900)}
.steps__i.is-done .steps__n{background:var(--navy-800);color:#fff}
/* L'étape franchie affiche une coche à la place de son numéro. */
.steps__i.is-done .steps__n{font-size:0}
.steps__i.is-done .steps__n::after{content:"✓";font-size:.62rem;line-height:1}
.steps__t{
font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-muted);
transition:color var(--t) var(--e-out);
}
.steps__i.is-current .steps__t{color:var(--navy-800)}
/* Panneaux */
.step{border:0;padding:0;margin:0;min-width:0}
.step[hidden]{display:none}
.step:focus{outline:none}
.step.is-current{animation:stepin .42s var(--e-out) both}
@keyframes stepin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.step__lg{
padding:0;margin-bottom:1.25rem;
font-family:var(--f-display);
font-size:1.15rem;font-weight:500;
color:var(--navy-800);
line-height:1.3;
}
/* Choix du motif : de vraies cartes cliquables, pas un