/* Base de style : fiche Refero « Swwim » (grande surface bleue avec un titre immense en capitales et une photo qui chevauche
   les lettres, bandeau défilant en bas du héros, boutons en pilule, angles droits, filets fins, un seul bleu). Le bleu est
   éclairci en bleu mer et le blanc remplacé par un crème chaud ; polices et sections recomposées pour Le Cœlacanthe. */
@font-face{font-family:Antonio;src:url(fonts/antonio.woff2?v=1) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope.woff2?v=1) format("woff2");font-weight:300 700;font-display:swap}
:root{
  --mer:#276aa0;--mer2:#1f5a89;--mer3:#194d78;--creme:#f3e8d8;--sable:#e6dac6;--encre:#1c3447;--sec:#4a5f70;--corail:#e8a37e;
  --titre:Antonio,"Arial Narrow",Impact,sans-serif;--corps:Manrope,system-ui,sans-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:400;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(--mer3);color:var(--creme);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(--mer);color:var(--creme);border-bottom:1px solid rgba(243,232,216,.25)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;width:min(100% - 40px,1360px);margin-inline:auto}
.marque{font-family:var(--titre);font-size:28px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:8px 0;color:var(--creme)}
.nav{display:none;gap:28px;margin-left:auto;margin-right:26px}
.nav a{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:var(--creme)}
.pilule{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:9999px;background:var(--creme);color:var(--mer2);font-family:var(--corps);font-size:16px;font-weight:700;text-decoration:none;border:2px solid var(--creme);transition:background .3s,color .3s}
.pilule:hover{background:transparent;color:var(--creme)}
.pilule-petite{min-height:44px;padding:0 20px;font-size:15px}
.pilule-mer{background:var(--mer);color:var(--creme);border-color:var(--mer)}
.pilule-mer:hover{background:transparent;color:var(--mer2)}
.pilule-contour{background:transparent;color:var(--mer2);border-color:var(--mer2)}
.pilule-contour:hover{background:var(--mer2);color:var(--creme)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0}
.actions-centre{justify-content:center}
.lien{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding:12px 0 4px;display:inline-block}
.lien-fonce{color:var(--mer2);margin-top:26px}
.mini{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;color:var(--creme)}
.mini-fonce{color:var(--mer2)}
h1,h2{font-family:var(--titre);font-weight:500;text-transform:uppercase;margin:0;line-height:.95;letter-spacing:.005em}
h2{font-size:clamp(38px,7vw,76px);margin-bottom:24px}
/* Héros bleu */
.hero{background:var(--mer);color:var(--creme);padding-top:52px;overflow:hidden}
.hero-in{width:min(100% - 40px,1360px);margin-inline:auto;position:relative}
h1{font-size:clamp(56px,18.6vw,260px);line-height:.88;color:var(--creme);margin:0 0 22px}
.hero-sous{font-size:19px;max-width:24em;margin:0 0 26px;color:#e9dcc7}
.hero .actions .lien{color:var(--creme)}
.hero-photo{margin:36px 0 0}
.hero-photo img{width:100%;aspect-ratio:5/4;object-fit:cover}
.marquee{margin-top:0;background:var(--mer3);overflow:hidden;white-space:nowrap;padding:16px 0}
.marquee-piste{display:inline-flex;animation:defile 42s linear infinite}
.marquee span{font-family:var(--titre);font-size:30px;letter-spacing:.06em;text-transform:uppercase;padding:0 26px;color:var(--creme)}
.marquee span::after{content:"•";margin-left:52px;color:var(--corail)}
@keyframes defile{to{transform:translateX(-50%)}}
/* Bandes */
.band{padding:96px 20px}
.band-sable{background:var(--sable)}
.band-mer{background:var(--mer);color:var(--creme)}
.carte-in{width:min(100%,1200px);margin-inline:auto;display:grid;gap:44px;align-items:center}
.plats{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(28,52,71,.3)}
.plats li{display:flex;flex-direction:column;padding:18px 0;border-bottom:1px solid rgba(28,52,71,.3)}
.plats b{font-family:var(--titre);font-weight:500;font-size:clamp(26px,3.6vw,38px);letter-spacing:.01em;text-transform:uppercase;line-height:1.05;color:var(--mer2)}
.plats span{font-size:16px;color:var(--sec);margin-top:4px}
.note{font-size:14.5px;color:var(--sec);margin:24px 0 0;max-width:46em}
.carte-photo{margin:0}
.carte-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Panorama */
.panorama{position:relative;background:#1b2b38;color:var(--creme)}
.panorama img{width:100%;height:56vw;min-height:320px;max-height:640px;object-fit:cover}
.panorama-texte{position:relative;padding:48px 20px 56px;background:var(--mer3)}
.panorama-texte h2{font-size:clamp(34px,6vw,64px);max-width:15em;margin-bottom:14px}
.panorama-texte p{max-width:36em;margin:0;color:#e9dcc7}
/* Terrasse */
.terrasse-in{width:min(100%,1200px);margin-inline:auto;display:grid;gap:40px}
.terrasse-photo{margin:0}
.terrasse-photo img{width:100%;aspect-ratio:16/8;object-fit:cover}
.terrasse h2{color:var(--creme)}
.liste{list-style:none;margin:20px 0 0;padding:0;max-width:40em}
.liste li{padding:13px 0;border-top:1px solid rgba(243,232,216,.3);font-size:16px}
.liste li:last-child{border-bottom:1px solid rgba(243,232,216,.3)}
/* Avis */
.avis{background:var(--creme)}
.avis-in{width:min(100%,1200px);margin-inline:auto}
.avis-grille{display:grid;gap:0;margin-top:14px;border-top:1px solid rgba(28,52,71,.3)}
.avis blockquote{margin:0;padding:28px 0;border-bottom:1px solid rgba(28,52,71,.3)}
.avis blockquote p{font-family:var(--titre);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:.005em;margin:0 0 12px;text-transform:none}
.avis footer{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}
/* Réservation */
.resa{text-align:center}
.resa-in{width:min(100%,780px);margin-inline:auto}
.resa-in h2{font-size:clamp(44px,9vw,96px);margin-bottom:10px}
.resa-in p{margin:0 0 26px;font-size:19px}
/* Infos */
.infos-in{width:min(100%,1200px);margin-inline:auto;display:grid;gap:72px}
.infos h2{font-size:clamp(34px,5.2vw,58px)}
.horaires{width:100%;max-width:520px;border-collapse:collapse}
.horaires th,.horaires td{text-align:left;padding:14px 0;border-bottom:1px solid rgba(28,52,71,.3);font-weight:400}
.horaires th{font-weight:700;width:30%}
.horaires tr.today{background:rgba(39,106,160,.16)}
.horaires tr.today th::after{content:" · aujourd'hui";font-weight:400;color:var(--mer2)}
address{font-style:normal;margin:0 0 22px;font-size:19px;line-height:1.7}
.venir-photo{margin:0 0 24px}
.venir-photo img{width:100%;aspect-ratio:16/8;object-fit:cover}
.pied{background:var(--mer3);color:#d9cbb6;text-align:center;padding:52px 20px 44px;font-size:14px}
.pied-marque{font-family:var(--titre);font-size:clamp(40px,8vw,76px);letter-spacing:.04em;color:var(--creme);margin:0 0 12px}
.pied p{margin:0 0 10px}.pied a{color:var(--creme);display:inline-block;padding:13px 0}
.petit{font-size:12.5px;max-width:60em;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(--creme);color:var(--mer2);font-weight:700;font-size:16px;text-decoration:none;border-top:2px solid var(--mer)}
.reveal{opacity:0;transform:translateY(22px);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}.marquee-piste{animation:none}.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{padding-top:72px}
  .hero-in{padding-bottom:84px}
  .hero-photo{position:absolute;right:0;bottom:-4px;width:36%;margin:0}
  h1{font-size:clamp(84px,11.4vw,176px)}
  .hero-photo img{aspect-ratio:1/1}
  h1{margin-bottom:26px}
  .hero-sous,.hero .actions{max-width:56%}
  .carte-in{grid-template-columns:1fr 1fr;gap:88px}
  .panorama-texte{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(25,77,120,.92) 0%,rgba(25,77,120,.6) 70%,rgba(25,77,120,0) 100%);padding:96px max(20px,calc((100vw - 1200px)/2)) 48px}
  .terrasse-in{grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
  .terrasse-photo img{aspect-ratio:4/3}
  .avis-grille{grid-template-columns:repeat(3,1fr);border-top:0;gap:36px}
  .avis blockquote{border-top:1px solid rgba(28,52,71,.3);border-bottom:0}
  .infos-in{grid-template-columns:1fr 1fr;gap:110px}
}