/* Base de style : fiche Refero « Oakâme » (une seule famille sans empattement, étiquettes minuscules très espacées face à de très
   grands mots, aucun intermédiaire ; filets d'1 px, commandes en pilule, aucune ombre, aucun dégradé décoratif). La pierre
   chaude devient un sable de lagune et l'encre un bleu nuit ; l'abricot reprend la couleur des façades de Port-Grimaud. */
@font-face{font-family:Outfit;src:url(fonts/outfit.woff2?v=1) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:YoungSerif;src:url(fonts/youngserif.woff2?v=1) format("woff2");font-weight:400;font-display:swap}
:root{
  --nuit:#17233b;--nuit2:#101a2e;--abricot:#e8a074;--abricot2:#9a4a22;--sable:#ddd1ba;--sable2:#cfc1a6;--lin:#e6dcc7;--encre:#1a2234;--sec:#44495a;
  --corps:Outfit,system-ui,sans-serif;--titre:YoungSerif,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sable);color:var(--encre);font-family:var(--corps);font-size:17px;font-weight:300;line-height:1.65;padding-bottom:64px}
img{display:block;max-width:100%;height:auto}a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.annonce{background:var(--nuit2);color:#d9cfba;text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px}
.site-header{position:sticky;top:0;z-index:30;background:var(--nuit);color:var(--lin);border-bottom:1px solid rgba(230,220,199,.2)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;width:min(100% - 40px,1360px);margin-inline:auto}
.marque{font-family:var(--titre);font-weight:400;font-size:23px;letter-spacing:0;text-decoration:none;color:var(--lin);padding:8px 0}
.nav{display:none;gap:30px;margin-left:auto;margin-right:26px}
.nav a{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:16px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:var(--abricot)}
.pilule{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:9999px;background:var(--abricot);color:var(--nuit2);font-family:var(--corps);font-size:15.5px;font-weight:500;text-decoration:none;border:1px solid var(--abricot);transition:background .3s,color .3s}
.pilule:hover{background:transparent;color:var(--abricot)}
.pilule-petite{min-height:42px;padding:0 20px;font-size:14.5px}
.pilule-nuit{background:var(--nuit);color:var(--lin);border-color:var(--nuit)}
.pilule-nuit:hover{background:transparent;color:var(--nuit)}
.pilule-contour{background:transparent;color:var(--nuit);border-color:var(--nuit)}
.pilule-contour:hover{background:var(--nuit);color:var(--lin)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:0}
.actions-centre{justify-content:center}
.lien{font-weight:500;text-decoration:none;color:var(--abricot);border-bottom:1px solid currentColor;padding:12px 0 3px;display:inline-block}
.lien-fonce{color:var(--nuit);margin-top:26px}
.mini{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px;color:var(--abricot)}
.mini-fonce{color:var(--abricot2)}
h1,h2{font-family:var(--titre);font-weight:400;margin:0;line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(36px,6.4vw,72px);margin-bottom:24px}
.legende{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9b19e;margin:20px 0 0}
/* Héros */
.hero{position:relative;background:var(--nuit2);color:var(--lin);overflow:hidden}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
.hero-voile{display:none}
.hero-in{position:relative;width:min(100% - 40px,1360px);margin-inline:auto;padding:34px 0 52px}
h1{font-size:clamp(64px,21vw,260px);font-weight:400;letter-spacing:-.02em;line-height:.95;margin:0 0 20px;color:var(--lin)}
.hero-sous{font-size:19px;max-width:26em;margin:0 0 28px;color:#d9cfba}
/* Maison */
.maison{padding:92px 20px 76px}
.maison-in{width:min(100%,1240px);margin-inline:auto}
.maison h2{font-size:clamp(50px,12.5vw,170px);letter-spacing:-.025em;margin-bottom:36px;color:var(--nuit)}
.trois{display:grid;gap:0;border-top:1px solid rgba(26,34,52,.35)}
.trois > div{padding:24px 0;border-bottom:1px solid rgba(26,34,52,.35)}
.trois p:last-child{margin:0;font-size:18px;max-width:24em}
.note{font-size:14.5px;color:var(--sec);margin:26px 0 0;max-width:46em}
/* Cité */
.cite{background:var(--nuit);color:var(--lin)}
.cite-photo{margin:0}
.cite-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cite-texte{padding:52px 20px 64px;width:min(100%,1240px);margin-inline:auto}
.cite-texte p:not(.mini):not(.legende){max-width:32em;color:#d9cfba;margin:0}
.cite h2{color:var(--lin)}
/* Table */
.table{padding:84px 20px}
.table-in{width:min(100%,1240px);margin-inline:auto;display:grid;gap:40px}
.table-photo{margin:0}
.table-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.table-photo .legende{color:var(--sec);margin:10px 0 0}
.liste{list-style:none;margin:0;padding:0;max-width:36em}
.liste li{padding:14px 0;border-top:1px solid rgba(26,34,52,.35);font-size:16.5px}
.liste li:last-child{border-bottom:1px solid rgba(26,34,52,.35)}
/* Avis */
.avis{background:var(--sable2)}
.avis-in{width:min(100% - 40px,1240px);margin-inline:auto;padding:84px 0}
.avis-grille{display:grid;margin-top:8px;border-top:1px solid rgba(26,34,52,.4)}
.avis blockquote{margin:0;padding:28px 0;border-bottom:1px solid rgba(26,34,52,.4)}
.avis blockquote p{font-family:var(--titre);font-weight:400;font-size:clamp(22px,2.5vw,28px);line-height:1.25;letter-spacing:0;margin:0 0 12px}
.avis footer{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sec)}
/* Réservation */
.resa{background:var(--abricot);color:var(--nuit2);text-align:center;padding:92px 20px}
.resa-in{width:min(100%,820px);margin-inline:auto}
.resa-in h2{font-size:clamp(46px,9.6vw,108px);margin-bottom:14px}
.resa-in p{margin:0 0 26px;font-size:19px}
/* Infos */
.infos-in{width:min(100% - 40px,1240px);margin-inline:auto;display:grid;gap:64px;padding:84px 0}
.infos h2{font-size:clamp(34px,5vw,58px)}
.horaires{width:100%;max-width:600px;border-collapse:collapse}
.horaires th,.horaires td{text-align:left;padding:13px 0;border-bottom:1px solid rgba(26,34,52,.35);font-weight:300;font-size:16px}
.horaires th{font-weight:500;width:30%}
.horaires tr.today{background:rgba(232,160,116,.28)}
.horaires tr.today th::after{content:" · aujourd'hui";font-weight:300;color:var(--abricot2)}
address{font-style:normal;margin:0 0 24px;font-size:19px;line-height:1.7}
.pied{background:var(--nuit2);color:#bdb4a0;text-align:center;padding:52px 20px 44px;font-size:14px}
.pied-marque{font-family:var(--titre);font-weight:400;font-size:clamp(46px,10vw,100px);letter-spacing:-.015em;color:var(--lin);margin:0 0 12px;line-height:.95}
.pied p{margin:0 0 10px}.pied a{color:var(--lin);display:inline-block;padding:13px 0}
.petit{font-size:12.5px;max-width:62em;margin-inline:auto!important}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;min-height:58px;background:var(--abricot);color:var(--nuit2);font-weight:500;font-size:16px;text-decoration:none}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.pilule{transition:none}}
@media (min-width:900px){
  body{padding-bottom:0}.callbar{display:none}.nav{display:flex}
  .hero{min-height:min(90vh,860px);display:flex;align-items:flex-end}
  .hero-img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .hero-voile{display:block;position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,26,46,.88) 0%,rgba(16,26,46,.45) 50%,rgba(16,26,46,.15) 100%)}
  .hero-in{padding:120px 0 64px}
  h1{font-size:clamp(110px,16vw,250px)}
  .trois{grid-template-columns:repeat(3,1fr);column-gap:40px;border-top:0}
  .trois > div{border-top:1px solid rgba(26,34,52,.35);border-bottom:0}
  .cite{display:grid;grid-template-columns:1.3fr 1fr;align-items:center}
  .cite-photo img{aspect-ratio:auto;height:100%;min-height:560px}
  .cite-texte{padding:72px max(20px,calc((100vw - 1240px)/2)) 72px 64px;width:auto}
  .table-in{grid-template-columns:1.1fr 1fr;gap:96px;align-items:center}
  .avis-grille{grid-template-columns:repeat(3,1fr);border-top:0;gap:40px}
  .avis blockquote{border-top:1px solid rgba(26,34,52,.4);border-bottom:0}
  .infos-in{grid-template-columns:1fr 1fr;gap:110px}
}