/* La case a nona · aperçu. Le lin clair du midi, le bleu de la façade et de la mer, le citron de
   Sicile, un peu de terre cuite. Titres Playfair Display, texte Jost. Le haut de page parle du
   restaurant et du lieu ; les avis ont leur section plus bas. */
@font-face { font-family: "Playfair Display"; src: url("polices/playfair.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("polices/playfair-italique.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("polices/jost.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --lin: #F8F3E7;
  --lin-fonce: #EFE6D2;
  --blanc: #FFFFFF;
  --mer: #1D4F91;
  --mer-sombre: #12345F;
  --mer-nuit: #0C2444;
  --azur: #4C9BE0;
  --azur-pale: #E3EFFA;
  --citron: #F2C94C;
  --citron-fonce: #B8860B;
  --terre: #C8552E;
  --encre: #182233;
  --gris: #58667A;
  --filet: #DDD5C4;
  --f-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-texte: "Jost", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --gouttiere: clamp(18px, 4vw, 40px);
  --rayon: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lin); color: var(--encre); font: 17px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--f-titre); font-weight: 600; }
p, blockquote, figure, ul, ol, fieldset, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azur); outline-offset: 3px; border-radius: 8px; }

.corps { max-width: 1180px; margin-inline: auto; padding-inline: var(--gouttiere); }
.sur { font: 700 13px/1.3 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--terre); }
.sur-clair { color: var(--citron); }
.titre { font-size: clamp(34px, 5.2vw, 62px); line-height: 1.06; letter-spacing: -.01em; margin-top: 12px; }
.titre em { font-style: italic; font-weight: 500; color: var(--mer); }
.titre-clair { color: var(--blanc); }
.titre-clair em { color: var(--citron); }
.titre-petit { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.chapo { font-size: clamp(17px, 2vw, 20px); color: var(--gris); max-width: 58ch; margin-top: 18px; }
.chapo-clair { color: #C7D6EA; }
cite { display: block; margin-top: 10px; font: 700 14px/1.3 var(--f-texte); font-style: normal; color: var(--encre); }
.lien { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--mer); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--citron); text-decoration-thickness: 2px; }

.bouton { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 0 22px; border-radius: 999px; background: var(--mer); color: var(--blanc); font: 700 16px/1.2 var(--f-texte); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s var(--courbe), background .2s, box-shadow .2s; box-shadow: 0 14px 28px -16px rgba(29, 79, 145, .8); }
.bouton:hover { background: var(--mer-sombre); transform: translateY(-2px); }
.bouton-contour { background: transparent; color: var(--mer); box-shadow: inset 0 0 0 2px var(--mer); }
.bouton-contour:hover { background: var(--azur-pale); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.actions .bouton { flex: 1 1 200px; }
@media (min-width: 700px) { .actions .bouton { flex: 0 0 auto; } }

.etoiles { display: inline-flex; gap: 2px; color: var(--citron-fonce); }
.etoiles svg { width: 16px; height: 16px; fill: currentColor; }

/* ───────── En-tête ───────── */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px var(--gouttiere); padding-top: max(10px, env(safe-area-inset-top)); transition: background .35s, box-shadow .35s; }
.entete.colle { background: rgba(248, 243, 231, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--filet); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--f-titre); white-space: nowrap; color: var(--encre); }
.marque img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--lin), 0 0 0 3.5px var(--mer); }
.apercu { font: 700 11px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--gris); color: var(--gris); }
.entete-tel { margin-left: auto; min-height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--mer); color: var(--blanc); text-decoration: none; font: 700 15px/1 var(--f-texte); white-space: nowrap; }
.entete-tel-court { display: none; }
@media (max-width: 420px) {
  .marque span { display: none; }
  .entete-tel-numero { display: none; }
  .entete-tel-court { display: inline; }
}

/* ───────── Haut de page ───────── */
.heros { position: relative; display: grid; gap: 20px; align-content: center; min-height: 100svh; padding: calc(88px + env(safe-area-inset-top)) var(--gouttiere) 48px; max-width: 1180px; margin-inline: auto; }
.heros-texte { display: contents; }
.heros-sur { order: 1; }
.heros-titre { order: 2; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.04; letter-spacing: -.012em; margin-top: 4px; }
.heros-titre em { font-style: italic; font-weight: 500; color: var(--mer); }
.heros-visuel { order: 3; width: min(78%, 320px); margin: 4px auto 0; }
.heros-chapo { order: 4; font-size: clamp(17px, 2vw, 20px); color: var(--gris); max-width: 54ch; }
.direct { order: 5; display: inline-flex; align-items: center; gap: 10px; align-self: start; justify-self: start; padding: 10px 16px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--filet); font-weight: 600; font-size: 15px; }
.direct-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #A3ADBB; }
.direct.ouvert .direct-point { background: #2E9E5B; box-shadow: 0 0 0 0 rgba(46, 158, 91, .5); animation: pouls 2s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgba(46, 158, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); } }
.heros .actions { order: 6; margin-top: 4px; }
.confiance { order: 7; display: flex; align-items: center; gap: 10px; color: var(--gris); font-size: 15px; }
.confiance b { color: var(--encre); font-weight: 700; }
@media (min-width: 1000px) {
  .heros { grid-template-columns: 1.15fr .85fr; grid-template-rows: auto auto auto auto auto auto; column-gap: 56px; align-items: center; padding-top: calc(110px + env(safe-area-inset-top)); }
  .heros-texte > * { grid-column: 1; }
  .heros-visuel { grid-column: 2; grid-row: 1 / -1; width: min(100%, 420px); margin: 0 0 0 auto; }
  .heros-sur { grid-row: 1; } .heros-titre { grid-row: 2; } .heros-chapo { grid-row: 3; } .direct { grid-row: 4; } .heros .actions { grid-row: 5; } .confiance { grid-row: 6; }
}

/* La scène dans l'arche : le soleil se lève, les vagues se dessinent, le bar se dresse, une fois. */
.scene { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(29, 79, 145, .18)); }
.js .scene .sc-soleil { transform: translateY(70px); opacity: 0; transition: transform 1.6s var(--courbe), opacity 1s; }
.js .scene .sc-vague { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--courbe); }
.js .scene .sc-pose { transform: translateY(26px); opacity: 0; transition: transform .8s var(--courbe), opacity .6s; transition-delay: calc(.9s + var(--k) * .18s); }
.js .scene .sc-bassin { opacity: 0; transition: opacity 1s .6s; }
.js .scene.pret .sc-soleil { transform: none; opacity: 1; }
.js .scene.pret .sc-vague { stroke-dashoffset: 0; }
.js .scene.pret .sc-vague:nth-of-type(2) { transition-delay: .25s; }
.js .scene.pret .sc-vague:nth-of-type(3) { transition-delay: .5s; }
.js .scene.pret .sc-pose { transform: none; opacity: 1; }
.js .scene.pret .sc-bassin { opacity: 1; }

/* ───────── Titres mot par mot et apparitions ───────── */
.js [data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .14em .08em; margin: 0 -.14em -.08em; }
.js [data-mots] .mot > span { display: inline-block; transform: translateY(110%); transition: transform .7s var(--courbe); transition-delay: calc(var(--i) * 55ms); }
.js [data-mots].vu .mot > span { transform: none; }
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--courbe), transform .7s var(--courbe); transition-delay: var(--retard, 0ms); }
.js .apparait.vu { opacity: 1; transform: none; }

/* ───────── La carte ───────── */
.carte { background: var(--mer); color: var(--blanc); padding: clamp(60px, 9vw, 110px) 0; position: relative; }
.carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(90deg, var(--citron) 0 24px, transparent 24px 36px); opacity: .9; }
.carte-grille { display: grid; gap: 32px; margin-top: 36px; }
@media (min-width: 1000px) { .carte-grille { grid-template-columns: 1fr 360px; align-items: start; gap: 48px; } }
.carte-texte { display: grid; gap: 22px; align-content: start; }
.carte-texte .chapo { margin-top: 0; }
.carte-texte .bouton { justify-self: start; }
.plats h3 { display: flex; align-items: center; gap: 10px; font-size: 24px; color: var(--citron); padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pictos { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plats ul { margin-top: 14px; display: grid; gap: 10px; }
.plats li { font-size: 16px; line-height: 1.45; color: #D9E4F3; padding-left: 16px; position: relative; }
.plats li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--citron); }
.plats li b { color: var(--blanc); font-weight: 600; }
.ardoise { max-width: 360px; margin: 0 auto; }
.ardoise img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); transform: rotate(-1.5deg); }
.ardoise figcaption { margin-top: 16px; text-align: center; font-size: 14px; color: #C7D6EA; }

/* ───────── Ce que les clients remarquent ───────── */
.remarques { padding: clamp(60px, 9vw, 110px) 0; }
.remarques-grille { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 700px) { .remarques-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .remarques-grille { grid-template-columns: repeat(3, 1fr); } }
.remarque { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 24px; display: grid; gap: 10px; align-content: start; }
.js .remarque { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--courbe), transform .7s var(--courbe); }
.js .remarque.vu { opacity: 1; transform: none; }
.dessin { width: 64px; height: 64px; fill: none; stroke: var(--mer); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js .dessin path, .js .dessin circle, .js .dessin ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--courbe) .2s; }
.js .remarque.vu .dessin path, .js .remarque.vu .dessin circle, .js .remarque.vu .dessin ellipse { stroke-dashoffset: 0; }
.remarque h3 { font-size: 23px; line-height: 1.15; }
.remarque p { color: var(--gris); font-size: 16px; }
.remarque blockquote { margin-top: 6px; padding: 14px 16px; border-left: 3px solid var(--citron); background: var(--lin); border-radius: 0 12px 12px 0; font-size: 16px; line-height: 1.5; }
.remarque blockquote cite { margin-top: 6px; }

/* ───────── Les avis (14 octobre) ─────────
   Un imprimé de citrons de Sicile sur un fond lin citronné, la note posée sur une assiette en faïence,
   une citation en grand, une carte postale, et les autres avis sur des carreaux qui glissent au doigt. */
.avis { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 8vw, 100px);
  background: radial-gradient(70% 60% at 50% 40%, #FDF8E8 0 40%, transparent 75%), linear-gradient(180deg, #FBF1D2, #F7E7BC); }
.avis::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; z-index: 1; background: repeating-linear-gradient(90deg, var(--mer) 0 14px, transparent 14px 20px, var(--citron) 20px 30px, transparent 30px 36px); opacity: .85; }
.avis-citrons { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("img/citrons.svg") 0 0 / 260px 260px; opacity: .5;
  -webkit-mask-image: radial-gradient(85% 70% at 50% 45%, transparent 28%, #000 78%); mask-image: radial-gradient(85% 70% at 50% 45%, transparent 28%, #000 78%); }
@media (max-width: 699px) { .avis-citrons { background-size: 200px 200px; opacity: .42; } }

.avis-tete { display: grid; gap: 28px; justify-items: center; }
@media (min-width: 900px) { .avis-tete { grid-template-columns: auto 1fr; gap: 64px; align-items: center; justify-items: stretch; } }

/* La note sur une assiette en faïence, avec sa frise bleue et citron. */
.assiette { position: relative; width: min(250px, 70vw); aspect-ratio: 1; filter: drop-shadow(0 22px 26px rgba(12, 36, 68, .22)); }
@media (min-width: 900px) { .assiette { width: 330px; } }
.assiette-plat { position: absolute; inset: 0; width: 100%; height: 100%; }
.assiette-frise { transform-origin: 150px 150px; }
.js .assiette .assiette-frise { transform: rotate(-40deg); transition: transform 1.8s var(--courbe); }
.js .assiette.vu .assiette-frise { transform: none; }
.assiette-centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.assiette-google { font: 700 10.5px/1 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--terre); }
.assiette-centre b { font: 600 clamp(54px, 16vw, 88px)/1 var(--f-titre); letter-spacing: -.02em; color: var(--mer); font-variant-numeric: tabular-nums; margin-top: 4px; }
.assiette-centre .etoiles-grandes svg { width: 17px; height: 17px; }
@media (min-width: 900px) { .assiette-centre b { font-size: 100px; } .assiette-centre .etoiles-grandes svg { width: 22px; height: 22px; } .assiette-sur { font-size: 14px; } .assiette-google { font-size: 11.5px; } }
.assiette-sur { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
.etoiles-grandes { position: relative; display: inline-grid; margin-top: 4px; }
.etoiles-grandes > span { grid-area: 1 / 1; display: inline-flex; gap: 3px; }
.etoiles-fond { color: var(--filet); }
.etoiles-plein { color: var(--citron-fonce); clip-path: inset(0 calc((1 - var(--part)) * 100%) 0 0); }

.avis-mots { width: 100%; }
.avis-mots .titre { font-size: clamp(32px, 4.6vw, 54px); }
.barres-titre { margin-top: 22px; font: 700 13px/1.3 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--mer-sombre); }
.barres { margin-top: 12px; display: grid; gap: 4px 28px; }
@media (min-width: 700px) { .barres { grid-template-columns: 1fr 1fr; } }
.barres li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; font-size: 14.5px; }
@media (min-width: 700px) { .barres { gap: 8px 28px; } .barres li { font-size: 15px; gap: 3px 12px; } }
.barres li span { font-weight: 600; }
.barres li i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: rgba(29, 79, 145, .12); overflow: hidden; position: relative; }
.barres li i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--azur), var(--mer)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--courbe); transition-delay: calc(var(--i) * 90ms); }
.barres.vu li i::after, html:not(.js) .barres li i::after { transform: none; }
.barres li b { grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; color: var(--mer); }
.barres-note { margin-top: 12px; font-size: 14px; color: var(--gris); }
.barres-note .lien { margin-top: 6px; }

/* Une citation en grand, et une carte postale posée de travers à côté. */
.avis-scene { display: grid; gap: 40px; margin-top: clamp(48px, 7vw, 84px); align-items: center; }
@media (min-width: 1000px) { .avis-scene { grid-template-columns: 1.08fr .92fr; gap: 44px; } }
.avis-geant p { font: italic 500 clamp(34px, 4.8vw, 68px)/1.06 var(--f-titre); letter-spacing: -.015em; color: var(--mer-nuit); text-wrap: balance; }
.avis-geant em { font-weight: 700; color: var(--terre); }
.avis-geant cite { margin-top: 16px; font-size: 15px; color: var(--mer); }

.postale { position: relative; display: grid; background: #FFFCF3; color: var(--encre); border-radius: 6px; padding: 18px; transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 26px 40px -22px rgba(12, 36, 68, .55);
  background-image: linear-gradient(rgba(29, 79, 145, .05) 1px, transparent 1px); background-size: 100% 28px; }
.postale::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(29, 79, 145, .25); border-radius: 3px; pointer-events: none; }
.postale-entete { font: 700 11px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--terre); }
.postale-message blockquote { margin-top: 12px; font: italic 400 19px/1.45 var(--f-titre); }
.postale-message cite { margin-top: 12px; font: italic 600 20px/1.2 var(--f-titre); color: var(--mer); }
.postale-adresse { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed rgba(29, 79, 145, .3); color: var(--mer); }
.timbre { grid-column: 2; grid-row: 1; position: relative; width: 88px; height: 104px; transform: rotate(3deg); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25));
  background: radial-gradient(circle at 0 0, transparent 2.6px, #fff 3px) 0 0 / 8px 8px; }
.timbre-dedans { position: absolute; inset: 4px; display: grid; justify-items: center; align-content: center; gap: 5px; background: #fff; }
.timbre img { width: 66px; height: 66px; object-fit: cover; border: 2px solid var(--mer); }
.timbre span { font: 700 8.5px/1.1 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--mer); text-align: center; }
.cachet { position: absolute; right: 26px; top: 50px; width: 84px; height: 84px; transform: rotate(-14deg); opacity: .5; color: var(--mer-sombre); font-family: var(--f-texte); font-weight: 700; pointer-events: none; }
.obliteration { position: absolute; right: -10px; top: 74px; width: 100px; opacity: .45; color: var(--mer-sombre); pointer-events: none; }
.postale-lignes { grid-column: 1; grid-row: 1; display: grid; gap: 2px; padding-top: 6px; font: italic 500 15px/1.9 var(--f-titre); color: var(--encre); white-space: nowrap; }
.postale-lignes span { border-bottom: 1px solid rgba(29, 79, 145, .3); }
@media (min-width: 640px) {
  .postale { grid-template-columns: 1.15fr .85fr; padding: 26px; }
  .postale-message { padding-right: 22px; border-right: 1.5px dashed rgba(29, 79, 145, .3); }
  .postale-adresse { grid-template-columns: 1fr; margin-top: 0; padding: 0 0 0 22px; border-top: 0; align-content: space-between; }
  .timbre { grid-column: 1; justify-self: end; }
  .postale-lignes { grid-row: 2; align-self: end; padding-top: 70px; }
  .cachet { right: 58px; top: 30px; width: 96px; height: 96px; }
  .obliteration { right: -12px; top: 56px; width: 120px; }
}
.js .postale.apparait { transform: translateY(26px) rotate(-6deg); }
.js .postale.apparait.vu { transform: rotate(-2deg); }

/* Les autres avis : des carreaux de faïence qui glissent au doigt, flèches sur ordinateur. */
.carreaux-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(48px, 7vw, 80px); }
.carreaux-tete .sur { color: var(--mer-sombre); }
.fleches { display: none; gap: 10px; }
@media (min-width: 900px) and (pointer: fine) { .fleches { display: flex; } }
.fleche { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--mer); color: var(--blanc); cursor: pointer; transition: background .2s, transform .2s var(--courbe), opacity .2s; }
.fleche:hover { background: var(--mer-sombre); transform: translateY(-2px); }
.fleche:disabled { opacity: .3; cursor: default; transform: none; }
.fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carreaux { display: flex; gap: 16px; align-items: stretch; --bord: calc((100vw - min(1180px, 100vw)) / 2 + var(--gouttiere)); margin: 16px calc(-1 * var(--bord)) 0; padding: 8px var(--bord) 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); scrollbar-width: none; }
.carreaux::-webkit-scrollbar { display: none; }
.carreaux:focus-visible { outline-offset: -3px; }
.carreau { --fond: #FFFDF6; --trait: var(--mer); --coin: var(--citron); --texte: var(--encre); --nom: var(--mer);
  flex: 0 0 min(290px, 78vw); scroll-snap-align: start; position: relative; display: grid; align-content: start; gap: 12px; padding: 32px 28px 30px; border-radius: 3px; color: var(--texte);
  background: var(--fond); box-shadow: 0 16px 26px -18px rgba(12, 36, 68, .6); }
.carreau::before { content: ""; position: absolute; inset: 8px; border: 1.5px solid var(--trait); pointer-events: none; }
.carreau::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, var(--coin) 0 20px, var(--trait) 20px 23px, transparent 23.5px),
    radial-gradient(circle at 100% 0, var(--coin) 0 20px, var(--trait) 20px 23px, transparent 23.5px),
    radial-gradient(circle at 0 100%, var(--coin) 0 20px, var(--trait) 20px 23px, transparent 23.5px),
    radial-gradient(circle at 100% 100%, var(--coin) 0 20px, var(--trait) 20px 23px, transparent 23.5px); }
.carreau-bleu { --fond: var(--mer); --trait: #9CC3EC; --coin: var(--citron); --texte: #F3F7FD; --nom: var(--citron); }
.carreau-azur { --fond: var(--azur-pale); --trait: var(--terre); --coin: #FFFDF6; --nom: var(--terre); }
.carreau-etoiles { font-size: 15px; letter-spacing: .12em; color: var(--citron-fonce); }
.carreau-bleu .carreau-etoiles { color: var(--citron); }
.carreau blockquote { font: 400 18px/1.5 var(--f-titre); }
.carreau cite { margin-top: 12px; color: var(--nom); }

/* ───────── La table, en un SMS ───────── */
.table { padding: clamp(60px, 9vw, 110px) 0; background: var(--azur-pale); }
.table-grille { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 900px) { .table-grille { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } }
.table-contact .chapo { margin-top: 0; }
.table-numero { display: block; margin-top: 18px; font: 700 clamp(34px, 9vw, 56px)/1.05 var(--f-titre, Georgia, serif); color: var(--mer); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.table-numero:hover { color: var(--azur); }
.table-message { background: var(--blanc); border-radius: var(--rayon); padding: 22px; border: 1px solid var(--filet); }
.table-message-titre { font: 700 13px/1.3 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.bulle { margin-top: 12px; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: var(--lin); font-size: 16px; line-height: 1.5; }
.table-message .actions { margin-top: 18px; }
.table-message .actions .bouton { flex: 1 1 100%; }
@media (min-width: 420px) { .table-message .actions .bouton { flex: 1 1 140px; } }
.table-note { margin-top: 14px; font-size: 14px; color: var(--gris); }

/* ───────── Horaires et contact ───────── */
.infos { padding: clamp(60px, 9vw, 110px) 0; }
.infos-grille { display: grid; gap: 40px; }
@media (min-width: 900px) { .infos-grille { grid-template-columns: 1fr 1fr; gap: 64px; } }
.horaires { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 16px; }
.horaires th, .horaires td { padding: 12px 0; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.horaires th { font-weight: 600; width: 40%; }
.horaires td { font-variant-numeric: tabular-nums; color: var(--gris); }
.horaires td span { display: block; }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--mer); font-weight: 700; }
.horaires tr.aujourdhui th::after { content: "aujourd'hui"; display: block; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--terre); }
.horaires-note { margin-top: 14px; font-size: 15px; color: var(--gris); }
.adresse { margin-top: 18px; font-size: 18px; line-height: 1.5; }
.pratique { margin-top: 24px; display: grid; gap: 10px; }
.pratique li { padding-left: 26px; position: relative; font-size: 16px; color: var(--gris); }
.pratique li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: var(--citron); box-shadow: inset 0 0 0 3px var(--lin); }

/* ───────── Pied ───────── */
.pied { background: var(--mer-nuit); color: #C7D6EA; padding: 40px 0 calc(40px + 70px); font-size: 15px; }
.pied-marque { display: flex; align-items: center; gap: 14px; }
.pied-marque img { width: 56px; height: 56px; border-radius: 50%; }
.pied b { color: var(--blanc); font-family: var(--f-titre); font-size: 22px; font-weight: 600; }
.pied-ligne { margin-top: 14px; }
.pied a { color: var(--blanc); }
.pied-note { margin-top: 18px; font-size: 14px; display: block; max-width: 70ch; line-height: 1.6; }
@media (min-width: 700px) { .pied { padding-bottom: 40px; } }

/* ───────── La barre d'appel collante, sur téléphone ───────── */
.barre { position: fixed; inset: auto 0 0; z-index: 40; display: flex; gap: 8px; padding: 10px var(--gouttiere); padding-bottom: max(10px, env(safe-area-inset-bottom)); background: rgba(248, 243, 231, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--filet); transform: translateY(110%); transition: transform .35s var(--courbe); }
.barre.visible { transform: none; }
.barre-bouton { flex: 1; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font: 700 16px/1 var(--f-texte); text-decoration: none; }
.barre-appel { background: var(--blanc); color: var(--mer); box-shadow: inset 0 0 0 2px var(--mer); }
.barre-sms { background: var(--mer); color: var(--blanc); }
@media (min-width: 700px) { .barre { display: none; } }

/* ───────── La bande qui défile et le fond de la carte (retouches du 12 octobre) ───────── */
/* Un ruban citron incliné entre le haut de page et la carte, qui défile sans arrêt. */
.bande { position: relative; z-index: 3; margin: -23px -6%; padding: 13px 0; transform: rotate(-2deg); background: var(--citron); color: var(--mer-nuit); border-block: 2px solid var(--mer-sombre); overflow: hidden; box-shadow: 0 16px 30px -16px rgba(12, 36, 68, .6); }
.bande-piste { display: flex; width: max-content; animation: bande 40s linear infinite; }
.bande-moitie { display: flex; flex: none; align-items: center; }
.bande span { padding: 0 18px; font: 700 15px/1 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.bande svg { flex: none; width: 24px; height: 15px; fill: var(--mer); }
@keyframes bande { to { transform: translateX(-50%); } }
@media (min-width: 1000px) { .bande { transform: rotate(-1.2deg); } }

/* La carte : un carrelage sicilien en traits clairs qui glisse lentement en diagonale, sur un bleu nuancé. */
.carte { overflow: hidden; isolation: isolate; background: radial-gradient(70% 55% at 88% 12%, rgba(76, 155, 224, .38), transparent 70%), radial-gradient(60% 50% at 5% 95%, rgba(12, 36, 68, .55), transparent 70%), var(--mer); }
.carte-fond { position: absolute; inset: -120px 0 0 -120px; z-index: -1; opacity: .2; pointer-events: none; animation: carreaux 36s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M60 0L120 60L60 120L0 60Z' stroke='%2393C2EE' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='20' stroke='%2393C2EE' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='0' r='20' stroke='%2393C2EE' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='120' r='20' stroke='%2393C2EE' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='120' r='20' stroke='%2393C2EE' stroke-width='1.5'/%3E%3Cpath d='M60 14C70 28 70 38 60 45C50 38 50 28 60 14ZM60 106C70 92 70 82 60 75C50 82 50 92 60 106ZM14 60C28 50 38 50 45 60C38 70 28 70 14 60ZM106 60C92 50 82 50 75 60C82 70 92 70 106 60Z' stroke='%23F2C94C' stroke-width='2'/%3E%3Ccircle cx='60' cy='60' r='9' stroke='%23F2C94C' stroke-width='2'/%3E%3Ccircle cx='60' cy='60' r='2.5' fill='%23F2C94C'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px; }
@keyframes carreaux { to { transform: translate3d(120px, 120px, 0); } }
.bande.pause .bande-piste, .carte.pause .carte-fond { animation-play-state: paused; }

/* ───────── Moins de mouvement ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .scene .sc-soleil, .js .scene .sc-pose, .js .scene .sc-bassin { transform: none; opacity: 1; transition: none; }
  .js .scene .sc-vague { stroke-dashoffset: 0; transition: none; }
  .js [data-mots] .mot > span { transform: none; transition: none; }
  .js .apparait, .js .remarque { opacity: 1; transform: none; transition: none; }
  .js .dessin path, .js .dessin circle, .js .dessin ellipse { stroke-dashoffset: 0; transition: none; }
  .barres li i::after { transform: none !important; transition: none; }
  .direct.ouvert .direct-point { animation: none; }
  .bouton, .barre { transition: none; }
  .bande-piste, .carte-fond { animation: none; }
  .js .assiette .assiette-frise { transform: none; transition: none; }
  .js .postale.apparait { transform: rotate(-2deg); transition: none; }
  .carreaux { scroll-behavior: auto; }
}