*{box-sizing:border-box;margin:0} body{background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%;filter:saturate(.9) contrast(1.03)} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--ft);font-weight:600;letter-spacing:-.03em;margin:0;text-wrap:balance} .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} @media(max-width:900px){.wrap{padding:0 var(--gutter-sm)}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:8px;font-family:var(--ft);font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;box-shadow:none;transition:background-color .18s ease,color .18s ease} .btn--cta{background:var(--cta);color:#000} .btn--cta:hover,.btn--cta:focus-visible{background:#000;color:#fff} .btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #000;outline-offset:3px} /* Cohérence charte : tous les boutons « Réserver » (.obook, présents dans plusieurs feuilles) suivent le CTA jaune — angles 8px, sans ombre, survol par inversion noir/blanc. */ .obook{background:var(--cta)!important;color:#000!important;border-radius:8px!important;box-shadow:none!important;font-weight:600!important} .obook:hover,.obook:focus-visible{background:#000!important;color:#fff!important;transform:none!important} .obook .ar{color:currentColor!important} .obook:focus-visible{outline:2px solid #000!important;outline-offset:3px} .kicker{display:inline-flex;align-items:center;gap:13px;font-family:var(--ft);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)} .reveal{transition:opacity .9s ease,transform .9s ease} .js .reveal{opacity:0;transform:translateY(28px)} .js .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.kb{animation:none}.kbx{animation:none;transform:scaleX(-1)}} /* ============================================================ HEADER — .top, .mnav, .burger ============================================================ */ /* Chrome fixe (barre utilitaire + header). Le réserve la hauteur RÉELLE du chrome (--chrome-h, posée en JS et recalculée au resize/chargement des polices) : le contenu de N'IMPORTE quelle page — y compris une page « nue » sans hero — commence donc toujours SOUS le header, jamais dessous. Repli CSS ~92px pour éviter le saut avant l'exécution du JS. */ :root{--ubar-h:31px;--chrome-h:92px} .site-chrome{position:fixed;top:0;left:0;right:0;z-index:50} body{padding-top:var(--chrome-h)} .top{display:flex;align-items:center;gap:28px;padding:20px 54px;position:relative;color:#000;transition:background .3s ease,box-shadow .3s ease,padding .3s ease} .top .logo{font:700 15px/1 var(--ft);letter-spacing:.14em;margin-right:auto;color:#000;text-decoration:none} .top .logo b{color:#000} .top nav{display:flex;gap:28px;font:500 13.5px/1 var(--ft)} .top nav a{opacity:1;color:#000;padding:12px 0;display:inline-flex;align-items:center} .top nav a:hover{opacity:.6} .top.solid, body:not(.av-hero) .top{background:var(--secondary);box-shadow:none;padding-top:8px;padding-bottom:8px} /* Bouton « Réserver » du header : blanc sur le bandeau jaune, survol négatif */ .top .btn--cta{background:#fff;color:#000} .top .btn--cta:hover,.top .btn--cta:focus-visible{background:#000;color:#fff} .headcta{min-height:44px;white-space:nowrap;overflow:hidden;opacity:0;max-width:0;padding-left:0;padding-right:0;transition:max-width .35s ease,opacity .3s ease,padding .35s ease} .top.solid .headcta, body:not(.av-hero) .top .headcta{opacity:1;max-width:260px;padding-left:22px;padding-right:22px} @media(max-width:560px){.top.solid .headcta .hc-x{display:none}} @media(prefers-reduced-motion:reduce){.top,.headcta{transition:none}} .burger{display:none} @media(max-width:1080px){ .top{padding:18px 22px;gap:14px} .top .logo{font-size:13px;letter-spacing:.08em;white-space:nowrap} .top nav{display:none} .top.solid{padding-top:6px;padding-bottom:6px} .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer} .burger span{display:block;width:100%;height:2px;background:#000;border-radius:2px;transition:transform .3s ease,opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(prefers-reduced-motion:reduce){.burger span{transition:none}} .mnav{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--overlay) 98%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease} .mnav.open{opacity:1;visibility:visible} .mnav nav{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center} .mnav nav a{color:#fff;font:800 28px/1 var(--ft)} .mnav nav a.btn{color:var(--cta-ink);font-size:15px;margin-top:14px} @media(prefers-reduced-motion:reduce){.mnav{transition:none}} /* ============================================================ FOOTER — .ft ============================================================ */ .ft{background:var(--abyss);color:rgba(255,255,255,.78);padding:78px 0 96px} .ft .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px} .ft .lg{font:800 16px/1 var(--ft);letter-spacing:.12em;color:var(--gold);margin-bottom:14px} .ft p,.ft a{font-size:14px;line-height:1.8;color:rgba(255,255,255,.74)} .ft h3{font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 14px} .ft .tbc{font-size:11px;opacity:.6;font-weight:400;letter-spacing:.08em} /* Horaires — rendu partagé footer + blocs info (Contact / Centre) */ .av-hrs__grp{margin-top:.6em} .av-hrs__grp:first-child{margin-top:0} .av-hrs__cat{display:block;font-weight:700;margin-bottom:.12em} .av-hrs .hb__d{opacity:.85} .ft .lk2{display:flex;flex-direction:column;gap:9px} .ft .lk2 li{list-style:none;padding:0;margin:0} .ft .lk2 a{display:inline-block} .ft .lk2 a:hover{color:#fff} .ftmap{color:var(--gold)!important;font-weight:700} .ftmap:hover{color:#fff!important} .ft .bot{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px;color:rgba(255,255,255,.55)} .ft .bot a{color:rgba(255,255,255,.55)} .ft .bot a:hover{color:#fff} @media(max-width:820px){.ft .cols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.ft .cols{grid-template-columns:1fr}} /* ============================================================ PROMO BAR — .promo, .promo .x ============================================================ */ .promo{background:var(--deep);color:var(--white);padding:18px 54px;position:relative;z-index:49} .promo .wrap{display:flex;align-items:center;justify-content:center;gap:24px;font:600 16px/1 var(--fb);text-align:center} .promo a,.promo span{flex:1;display:block} .promo a:hover{text-decoration:underline} .promo .x{position:absolute;right:54px;top:50%;transform:translateY(-50%);min-height:auto;padding:8px 12px;background:none;border:none;color:var(--white);font:800 24px/1 system-ui;cursor:pointer;opacity:.9;transition:opacity .2s} .promo .x:hover{opacity:1} .promo .x:focus-visible{outline:3px solid var(--amber);outline-offset:2px} @media(max-width:900px){.promo{padding:16px 22px}.promo .wrap{gap:18px;font-size:15px}.promo .x{right:22px;padding:6px 10px;font-size:22px}} /* Section primitive partagée (offres, actu) */ .S { padding: var(--u-sect) 0; } .S h2 { font-size: var(--h2); line-height: 1.06; margin: 14px 0 0; color: var(--ink); } /* En-tête de section partagé (actu ; .amap .ahead le surcharge dans offres) */ .ahead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: var(--s5); } /* ── Chrome global : barre utilitaire + WhatsApp flottant (cf. home-heroCraft) ── */ .ubar{background:#000;color:rgba(255,255,255,.82);font:500 12.5px/1 var(--ft);display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:9px clamp(20px,5vw,84px);letter-spacing:.02em} .ubar .mut{opacity:.7} .ubar a,.ubar .mut{display:inline-flex;align-items:center;gap:6px} .ubar a{color:rgba(255,255,255,.82);text-decoration:none} .ubar a:hover{color:#fff} .ubar__ico{width:14px;height:14px;flex:0 0 auto} @media(max-width:640px){.ubar{justify-content:center;gap:12px;font-size:11.5px;flex-wrap:wrap}.ubar .mut{display:none}} .av-floaties{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;flex-direction:column;gap:12px;align-items:flex-end} .av-fbtn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;text-decoration:none;cursor:pointer;box-shadow:0 12px 30px -8px color-mix(in srgb,var(--overlay) 55%,transparent);transition:transform .3s,box-shadow .3s} .av-fbtn:hover{transform:translateY(-3px);box-shadow:0 18px 38px -10px color-mix(in srgb,var(--overlay) 60%,transparent)} .av-fbtn:focus-visible{outline:3px solid var(--wa);outline-offset:3px} .av-fbtn.wa{background:var(--wa);color:var(--wa-ink)} .av-fbtn svg{width:22px;height:22px} .av-fbtn .lbl{display:none} /* Titre de carte activité cliquable (remplace l'ancien CTA « Voir l'offre ») */ .ocard h3 a.otitle-lk{color:inherit;text-decoration:none;transition:color .2s} .ocard h3 a.otitle-lk:hover,.ocard h3 a.otitle-lk:focus-visible{color:var(--teal-ink)} .ocard h3 a.otitle-lk:focus-visible{outline:3px solid var(--amber);outline-offset:3px}