/* Anse des Cocos · aperçu. Le blanc de chaux de la case, le bleu du lagon de Grand Anse pour les
   moments forts, le jaune de l'ananas pour l'action, la terre rouge de la plantation en accent,
   le vert d'eau des murs de la case. Titres DM Serif Display, texte Nunito Sans.
   Le haut de page parle du restaurant et du lieu ; les avis ont leur section plus bas. */
@font-face { font-family: "DM Serif Display"; src: url("polices/dm-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("polices/dm-serif-italique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("polices/nunito-sans.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100%; font-display: swap; }

:root {
  --chaux: #FBF7EE;
  --chaux-2: #F3ECDD;
  --blanc: #FFFFFF;
  --encre: #15303A;
  --gris: #586A70;
  --filet: #E4DCCB;
  --lagon: #0C4757;
  --lagon-2: #0A3A47;
  --lagon-clair: #5FB7C4;
  --ananas: #F4B53A;
  --ananas-clair: #FFD27A;
  --terre: #B4531F;
  --case: #DCEBDF;
  --case-fonce: #2F6B57;
  --f-titre: "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-texte: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --gouttiere: clamp(16px, 4vw, 40px);
  --mer: clamp(84px, 9vw, 128px);
}

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

.corps { max-width: 1200px; margin-inline: auto; padding-inline: var(--gouttiere); }
.sur { font: 800 13px/1.35 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--terre); }
.sur-clair { color: var(--ananas); }
.titre { font: 400 clamp(38px, 6vw, 70px)/1.02 var(--f-titre); letter-spacing: -.01em; margin-top: 12px; }
.titre em { font-style: italic; color: var(--lagon); }
.titre-clair { color: #fff; }
.titre-clair em { color: var(--ananas-clair); }
.chapo { font-size: clamp(17px, 1.9vw, 19px); color: var(--gris); max-width: 54ch; margin-top: 16px; }
.chapo-clair { color: #BCD6DB; }
cite { display: block; margin-top: 8px; font: 800 14.5px/1.3 var(--f-texte); font-style: normal; color: var(--terre); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 22px; border-radius: 999px; background: var(--ananas); color: var(--lagon-2); font: 800 16.5px/1.2 var(--f-texte); text-align: center; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s var(--courbe), background .2s, box-shadow .2s; box-shadow: 0 12px 26px -14px rgba(180, 120, 10, .9); }
.bouton:hover { background: var(--ananas-clair); transform: translateY(-2px); }
.bouton-ligne { background: transparent; color: var(--lagon); box-shadow: inset 0 0 0 2px var(--lagon); }
.bouton-ligne:hover { background: rgba(12, 71, 87, .07); }

/* ───────── En-tête ───────── */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px var(--gouttiere); padding-top: max(10px, env(safe-area-inset-top)); transition: background .35s, box-shadow .35s; }
html:not(.js) .entete, .entete.colle { background: rgba(251, 247, 238, .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: 8px; font: 400 21px/1 var(--f-titre); text-decoration: none; white-space: nowrap; color: var(--lagon); }
.marque svg { width: 30px; height: 30px; color: var(--terre); flex: none; }
.apercu { font: 800 11px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(21, 48, 58, .3); color: var(--gris); }
.entete-tel { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--lagon); color: #fff; text-decoration: none; font: 800 15px/1 var(--f-texte); white-space: nowrap; }
.tel-court { display: none; }
@media (max-width: 420px) { .tel-long { display: none; } .tel-court { display: inline; } .marque { font-size: 19px; } .marque svg { width: 26px; height: 26px; } }

/* ───────── Haut de page ───────── */
.heros { position: relative; display: flex; flex-direction: column; gap: 0; padding: calc(84px + env(safe-area-inset-top)) var(--gouttiere) 24px;
  background: var(--chaux); }
.heros-texte { display: contents; }
.heros-sur { order: 1; }
.heros-titre { order: 2; font: 400 clamp(40px, 10.4vw, 80px)/1.02 var(--f-titre); letter-spacing: -.012em; margin-top: 12px; }
.heros-titre em { font-style: italic; color: var(--lagon); }
.heros-photo { order: 3; margin-top: 22px; }
.heros-chapo { order: 4; margin-top: 22px; font-size: clamp(17px, 1.9vw, 19.5px); color: #3F5459; max-width: 50ch; }
.heros .actions { order: 5; }
.confiance { order: 6; }
@media (min-width: 1000px) {
  .heros { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 56px; min-height: min(100svh, 920px); padding-top: 120px; padding-bottom: 80px; padding-inline: max(var(--gouttiere), calc((100vw - 1200px) / 2 + var(--gouttiere)));
    background: linear-gradient(90deg, var(--chaux) 0%, var(--chaux) 64%, var(--case) 64%, var(--case) 100%); }
  .heros-texte { display: block; }
  .heros-photo { margin-top: 0; }
}

.cadre { position: relative; border-radius: 26px; overflow: hidden; background: var(--case); box-shadow: 0 30px 60px -34px rgba(12, 71, 87, .55); }
.cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; transform: scale(1.06); transition: transform 2.6s var(--courbe); }
@media (min-width: 1000px) { .cadre img { aspect-ratio: 4 / 5; object-position: 42% 50%; } }
.heros.pret .cadre img { transform: none; }
/* Le lambrequin, la dentelle de bois des cases, tendu en haut de la photo. */
.lambrequin { position: absolute; inset: 0 0 auto; width: 100%; height: 22px; }
.lamb-fond { fill: var(--chaux); }
.lamb-trous circle { fill: var(--case); }
.js .lambrequin { transform: translateY(-100%); transition: transform 1s var(--courbe) .5s; }
.js .heros.pret .lambrequin { transform: none; }
.heros-photo figcaption { margin-top: 10px; font-size: 14.5px; color: var(--case-fonce); }
.heros-photo figcaption b { font-weight: 800; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.actions .bouton { flex: 1 1 220px; }
@media (min-width: 700px) { .actions .bouton { flex: 0 0 auto; } }
.confiance { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: #3F5459; }
.confiance li { display: inline-flex; align-items: center; gap: 8px; }
.confiance li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terre); opacity: .6; }
.etoiles-mini { display: inline-flex; gap: 2px; }
.etoiles-mini i { width: 14px; height: 14px; background: var(--ananas); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.etoiles-mini i:last-child { background: linear-gradient(90deg, var(--ananas) 50%, #D9CFBC 50%); }

/* ───────── La houle : deux rubans de vague (le trait du logo) qui roulent en sens contraire, sans fin ───────── */
/* Finition du 13 octobre : avec le script, les vagues accélèrent et se creusent quand on fait défiler la page,
   puis reprennent leur rythme (app.js) ; sans script, elles roulent en CSS comme avant. */
.houle { position: relative; height: 70px; margin-top: 18px; overflow: hidden; pointer-events: none; }
.houle i { position: absolute; left: -240px; width: calc(100% + 480px); height: 60px; background-repeat: repeat-x; background-size: 240px 60px; will-change: transform; }
.houle .houle-fond { top: 0; opacity: .7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 14C40 4 80 4 120 14S200 24 240 14L240 46C200 56 160 56 120 46S40 36 0 46Z' fill='%235FB7C4'/%3E%3C/svg%3E"); animation: houle-droite 12s linear infinite; }
.houle .houle-avant { top: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 14C40 4 80 4 120 14S200 24 240 14L240 46C200 56 160 56 120 46S40 36 0 46Z' fill='%230C4757'/%3E%3Cpath d='M0 19C40 9 80 9 120 19S200 29 240 19' fill='none' stroke='%23FFFFFF' stroke-opacity='.38' stroke-width='1.6'/%3E%3C/svg%3E"); animation: houle-gauche 8s linear infinite; }
.houle.dort i, .mer.dort i { animation-play-state: paused; }
.vagues-js .houle i, .vagues-js .mer i { animation: none; }
@keyframes houle-gauche { from { transform: translateX(240px); } to { transform: translateX(0); } }
@keyframes houle-droite { to { transform: translateX(240px); } }
@media (min-width: 1000px) { .houle { margin-top: 0; } }

/* ───────── Des produits de l'île, et du jardin ───────── */
.jardin { padding: clamp(80px, 11vw, 130px) 0; }
.jardin-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .jardin-grille { grid-template-columns: .8fr 1.2fr; gap: 64px; } }
.jardin-photo .photo-cadre { aspect-ratio: 4 / 5; border-radius: 200px 200px 26px 26px; }
@media (max-width: 959px) { .jardin-photo .photo-cadre { aspect-ratio: 4 / 3; border-radius: 26px; } .jardin-photo { order: 2; } }
.jardin-photo figcaption { margin-top: 10px; font-size: 14.5px; color: var(--gris); }
.ingredients { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ingredients button { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--filet); background: var(--blanc); color: var(--encre); font: 700 16px/1 var(--f-texte); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.ingredients button:hover { border-color: var(--lagon-clair); }
.ingredients button[aria-selected="true"] { background: var(--lagon); border-color: var(--lagon); color: #fff; }
.assiette { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; margin-top: 16px; padding: 22px; border-radius: 24px; background: var(--blanc); box-shadow: 0 1px 0 var(--filet), 0 24px 50px -36px rgba(12, 71, 87, .5); min-height: 248px; }
@media (max-width: 480px) { .assiette { grid-template-columns: 1fr; gap: 12px; padding: 20px; } }
/* L'assiette : un cercle crème, l'ingrédient tracé au trait dedans. */
.assiette-icone { width: 96px; height: 96px; padding: 10px; border-radius: 50%; background: var(--chaux-2); box-shadow: inset 0 0 0 6px var(--chaux), inset 0 0 0 7px var(--filet); fill: none; stroke: var(--terre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.assiette-icone path, .assiette-icone circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.assiette.trace .assiette-icone path, .assiette.trace .assiette-icone circle { animation: trace 1.1s var(--courbe) both; animation-delay: calc(var(--n, 0) * .12s); }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.assiette h3 { font: 400 28px/1.1 var(--f-titre); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.du-jardin { font: 800 12px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--case); color: var(--case-fonce); }
.assiette p { margin-top: 8px; color: var(--gris); }
.assiette blockquote { margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--ananas); font-size: 16.5px; font-style: italic; }
.assiette.trace h3, .assiette.trace p, .assiette.trace blockquote { animation: monte .5s var(--courbe) both; }
.assiette.trace p { animation-delay: .06s; } .assiette.trace blockquote { animation-delay: .12s; }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }

/* ───────── La route de la plage (finition du 13 octobre) ─────────
   Le bleu du lagon entre deux bords en vague figés (la même vague que la houle). Un trait descend la page
   comme la route descend vers la plage : pointillés pour le chemin, trait jaune ananas qui se dessine au
   défilement, et le soleil du logo en tête, qui se pose sur la vague à l'arrivée. */
.route { position: relative; padding: clamp(112px, 13vw, 168px) 0 clamp(124px, 14vw, 180px); background: var(--lagon); color: #E6F0F1;
  background-image: radial-gradient(60% 34% at 100% 0%, rgba(95, 183, 196, .24), transparent 70%), radial-gradient(55% 26% at 0% 100%, rgba(244, 181, 58, .10), transparent 70%); }
.route::before, .route::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; background-repeat: repeat-x; background-size: 240px 40px; pointer-events: none; }
.route::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 0H240V18C200 30 160 30 120 18S40 6 0 18Z' fill='%23FBF7EE'/%3E%3C/svg%3E"); }
.route::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 22C40 10 80 10 120 22S200 34 240 22V40H0Z' fill='%23FBF7EE'/%3E%3C/svg%3E"); }
.route-tete { max-width: 800px; }
.route-parcours { position: relative; margin-top: clamp(52px, 7vw, 96px); padding-left: 46px; }
/* Sans script, le chemin reste là en pointillés. */
.route-parcours::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; border-left: 2px dotted rgba(255, 255, 255, .32); }
.js .route-parcours::before { display: none; }
.route-trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route-pointilles { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 2; stroke-dasharray: 0 9; stroke-linecap: round; }
.route-ligne { fill: none; stroke: var(--ananas); stroke-width: 3; stroke-linecap: round; }
.route-soleil { fill: var(--ananas); stroke: rgba(244, 181, 58, .28); stroke-width: 9; transition: stroke-width .6s var(--courbe); }
.route.arrivee .route-soleil { stroke-width: 0; }
.etape { position: relative; display: grid; gap: 20px; padding-bottom: 68px; }
.etape-point { position: absolute; left: -32px; top: 26px; width: 18px; height: 18px; border-radius: 50%; background: var(--lagon); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); transition: background .45s, box-shadow .45s, transform .6s var(--courbe); }
.etape.atteinte .etape-point { background: var(--lagon-2); box-shadow: inset 0 0 0 5px var(--ananas), 0 0 0 7px rgba(244, 181, 58, .16); transform: scale(1.15); }
.etape-photo .photo-cadre { aspect-ratio: 5 / 4; border-radius: var(--forme); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6); transition: border-radius 1.4s var(--courbe); }
/* Des formes de galet, qui respirent quand le trait les atteint. */
.forme-1 { --forme: 44% 56% 40% 60% / 34% 40% 60% 66%; --forme-b: 52% 48% 46% 54% / 40% 34% 66% 60%; }
.forme-2 { --forme: 58% 42% 55% 45% / 42% 48% 52% 58%; --forme-b: 48% 52% 44% 56% / 50% 40% 60% 50%; }
.forme-3 { --forme: 40% 60% 52% 48% / 46% 38% 62% 54%; --forme-b: 50% 50% 46% 54% / 38% 46% 54% 62%; }
.js .etape.atteinte .photo-cadre { border-radius: var(--forme-b); }
.etape-texte h3 { font: 400 clamp(29px, 3.1vw, 40px)/1.08 var(--f-titre); color: #fff; }
.etape-texte blockquote { margin-top: 12px; max-width: 40ch; font-size: 17px; line-height: 1.55; font-style: italic; color: #CFE3E6; }
.etape-texte cite { color: var(--ananas-clair); }
.etape-arrivee { left: -44px; top: -2px; width: 42px; height: 42px; border-radius: 0; background: none; box-shadow: none; }
.etape.atteinte .etape-arrivee { background: none; box-shadow: none; transform: none; }
.etape-arrivee svg { width: 100%; height: 100%; overflow: visible; }
.arrivee-vague { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.js .arrivee-vague { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--courbe); }
.js .route.arrivee .arrivee-vague { stroke-dashoffset: 0; }
.etape-fin { padding-bottom: 0; padding-top: 4px; }
@media (min-width: 960px) {
  .route-parcours { padding-left: 0; }
  .route-parcours::before { left: 50%; }
  .etape { grid-template-columns: 1fr 1fr; column-gap: 200px; align-items: center; padding-bottom: 96px; }
  .etape-point { left: 50%; top: 50%; margin: -9px 0 0 -9px; }
  .etape-photo { justify-self: end; width: min(100%, 420px); }
  .etape-photo .photo-cadre { aspect-ratio: 4 / 5; }
  .etape-photo-large { width: min(100%, 480px); }
  .etape-photo-large .photo-cadre { aspect-ratio: 6 / 5; }
  .etape-texte { max-width: 430px; }
  .etape-texte blockquote { font-size: 19px; }
  .etape:nth-of-type(even) .etape-photo { order: 2; justify-self: start; }
  .etape:nth-of-type(even) .etape-texte { justify-self: end; }
  .etape-fin { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 104px; }
  .etape.etape-fin .etape-texte { max-width: 600px; justify-self: center; }
  .etape-fin blockquote { margin-inline: auto; }
  .etape-arrivee { left: 50%; top: 0; width: 72px; height: 72px; margin: 0 0 0 -36px; }
}

/* ───────── Ce que les clients remarquent ───────── */
.remarque { padding: clamp(80px, 11vw, 130px) 0; }
.remarque-grille { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .remarque-grille { grid-template-columns: 1fr 1fr; gap: 70px; } }
/* Chaque ligne compte un sujet dans les avis ; on la touche, elle s'ouvre sur l'avis d'un client qui le dit. */
.comptes { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 4px; }
.comptes li { margin: 0 -10px; padding: 0 10px; border-radius: 18px; transition: background .3s, box-shadow .3s; }
.js .comptes li:has(> .compte-ligne[aria-expanded="true"]) { background: var(--blanc); box-shadow: 0 1px 0 var(--filet), 0 18px 36px -30px rgba(12, 71, 87, .5); }
.compte-ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; width: 100%; margin: 0; padding: 12px 0; border: 0; border-radius: 0; background: transparent; color: var(--encre); text-align: left; cursor: pointer; font: 700 16px/1.3 var(--f-texte); transition: background .3s, box-shadow .3s, transform .2s var(--courbe); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .comptes li:hover { background: rgba(255, 255, 255, .6); } }
.compte-nom { display: inline-flex; align-items: center; gap: 11px; }
.compte-signe { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D6CCB8; transition: background .3s, box-shadow .3s, transform .45s var(--courbe); }
.compte-signe::before, .compte-signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--lagon); transition: transform .45s var(--courbe), background .3s; }
.compte-signe::after { transform: rotate(90deg); }
.compte-ligne[aria-expanded="true"] .compte-signe { background: var(--lagon); box-shadow: none; transform: rotate(180deg); }
.compte-ligne[aria-expanded="true"] .compte-signe::before, .compte-ligne[aria-expanded="true"] .compte-signe::after { background: #fff; }
.compte-ligne[aria-expanded="true"] .compte-signe::after { transform: rotate(0deg); }
.compte-ligne b { font: 400 24px/1 var(--f-titre); color: var(--lagon); font-variant-numeric: tabular-nums; }
.compte-barre { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--chaux-2); overflow: hidden; }
.compte-barre i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 8px; background: linear-gradient(90deg, var(--lagon), var(--lagon-clair)); transform-origin: left; transition: transform 1.2s var(--courbe) calc(var(--i) * .08s), filter .3s; }
.js .comptes:not(.vu) .compte-barre i { transform: scaleX(0); }
.compte-ligne[aria-expanded="true"] .compte-barre { background: var(--chaux); }
.compte-ligne[aria-expanded="true"] .compte-barre i { background: linear-gradient(90deg, var(--terre), var(--ananas)); }
.compte-avis { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--courbe); }
.compte-avis > div { min-height: 0; overflow: hidden; }
.compte-avis blockquote { margin: 4px 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--ananas); font-size: 16.5px; line-height: 1.55; font-style: italic; }
.js .compte-ligne[aria-expanded="false"] + .compte-avis { grid-template-rows: 0fr; }
.js .compte-ligne[aria-expanded="false"] + .compte-avis > div { visibility: hidden; transition: visibility 0s .5s; }
.photo-cadre { overflow: hidden; }
.photo-cadre img { width: 100%; height: 100%; object-fit: cover; }
.case-photo .photo-cadre { aspect-ratio: 1; border-radius: 26px; }
@media (max-width: 959px) { .case-photo .photo-cadre { aspect-ratio: 4 / 3; } }
.case-photo figcaption { margin-top: 10px; font-size: 14.5px; color: var(--gris); }
.details { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 10px; }
.details li { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--blanc); box-shadow: 0 1px 0 var(--filet); }
.details b { font: 400 22px/1.2 var(--f-titre); color: var(--lagon); }
.details span { color: var(--gris); font-size: 16px; }

/* ───────── Les avis (14 octobre) ─────────
   Sur la peau de l'ananas du jardin : la note dans l'anneau des cinq étoiles, un avis posé sur la vue de Grand Anse
   (la photo coupée en festons comme un lambrequin), une citation en grand, et une mosaïque d'avis qui glisse au doigt sur téléphone. */
.avis { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 124px) 0;
  background: radial-gradient(60% 50% at 30% 30%, rgba(255, 246, 220, .55), transparent 70%), url("img/peau-ananas.svg") 0 0 / 44px 44px, linear-gradient(165deg, #FCE3A2, #F7C95F 55%, #F2B544); }
.avis .sur { color: #8E3F14; }
.avis .titre em { color: var(--lagon); }

.avis-haut { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .avis-haut { grid-template-columns: .85fr 1.15fr; gap: 56px; } }
.note-anneau { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.anneau { position: relative; flex: none; width: 196px; height: 196px; margin: 0; border-radius: 50%; background: var(--chaux); box-shadow: 0 20px 34px -20px rgba(140, 70, 10, .7), inset 0 0 0 1px rgba(21, 48, 58, .06); }
@media (min-width: 960px) { .anneau { width: 230px; height: 230px; } }
.anneau svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transform: rotate(-90deg); }
.anneau-piste { fill: none; stroke: #EFE6D2; stroke-width: 9; }
.anneau-arc { fill: none; stroke: var(--ananas); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--courbe); }
.anneau.plein .anneau-arc { stroke-dashoffset: .219; }
.anneau figcaption { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.anneau b { font: 400 clamp(64px, 18vw, 80px)/1 var(--f-titre); color: var(--lagon); letter-spacing: -.02em; }
@media (min-width: 960px) { .anneau b { font-size: 92px; } }
.anneau figcaption > span:last-child { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--gris); }
.anneau-etoiles { display: inline-flex; gap: 3px; margin-top: 4px; }
.anneau-etoiles i { width: 15px; height: 15px; background: var(--ananas); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.anneau-etoiles i.demi { background: linear-gradient(90deg, var(--ananas) 50%, #DCCFB6 50%); }
.anneau-legende { max-width: 30ch; font-size: 16px; line-height: 1.5; color: #4A3A20; }
.anneau-legende b { font: 400 34px/1 var(--f-titre); color: var(--lagon); display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .note-anneau { gap: 16px; } .anneau { width: 168px; height: 168px; } .anneau b { font-size: 60px; } .anneau-legende { font-size: 15px; } .anneau-legende b { font-size: 28px; } }

/* La vue de Grand Anse, coupée en festons comme le lambrequin d'une varangue, et l'avis d'Amélie posé dessus. */
.vue-avis { position: relative; margin: 0; padding-bottom: 92px; }
.vue-avis-photo { overflow: hidden; border-radius: 0 0 26px 26px; aspect-ratio: 3 / 2; box-shadow: 0 30px 46px -28px rgba(110, 50, 5, .85);
  -webkit-mask: radial-gradient(circle 13px at 50% 0, #0000 97%, #000) 0 0 / 26px 100% repeat-x; mask: radial-gradient(circle 13px at 50% 0, #0000 97%, #000) 0 0 / 26px 100% repeat-x; }
.vue-avis-photo img { width: 100%; height: 100%; object-fit: cover; }
.vue-avis-bulle { position: absolute; left: 12px; right: 12px; bottom: 0; padding: 20px 22px 18px; border-radius: 24px 24px 24px 6px; background: var(--lagon); color: #EAF3F4; transform: rotate(-1.5deg); box-shadow: 0 22px 34px -20px rgba(10, 58, 71, .9); }
@media (min-width: 960px) { .vue-avis-bulle { left: -36px; right: auto; max-width: 440px; padding: 24px 28px 22px; } }
.vue-avis-bulle blockquote { font: 400 clamp(21px, 2.2vw, 26px)/1.3 var(--f-titre); }
.vue-avis-bulle em { font-style: italic; color: var(--ananas-clair); }
.vue-avis-bulle cite { color: var(--ananas-clair); }

/* Une citation en grand, et la mosaïque des autres avis. */
.avis-bas { display: grid; gap: 40px; margin-top: clamp(56px, 8vw, 96px); align-items: start; }
.avis-bas > *, .avis-haut > * { min-width: 0; }
@media (min-width: 960px) { .avis-bas { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } }
.avis-geant p { font: italic 400 clamp(34px, 4.2vw, 58px)/1.1 var(--f-titre); color: var(--lagon-2); letter-spacing: -.01em; }
.avis-geant em { font-style: italic; color: #8E3F14; background: linear-gradient(transparent 68%, rgba(255, 246, 220, .85) 68% 90%, transparent 90%); }
.avis-geant cite { margin-top: 16px; color: #8E3F14; }
.mosaique-sur { margin-bottom: 14px; }
.mosaique-doigt { display: none; }
.mosaique { list-style: none; margin: 0; padding: 0; }
.tuile { position: relative; padding: 22px 22px 20px; border-radius: 22px; font-size: 16.5px; line-height: 1.5; box-shadow: 0 16px 30px -22px rgba(110, 50, 5, .9); }
.tuile-chaux { background: var(--chaux); color: var(--encre); }
.tuile-terre { background: var(--terre); color: #FFF4EA; }
.tuile-terre cite { color: var(--ananas-clair); }
.tuile-case { background: var(--case); color: var(--encre); }
.tuile-case cite { color: var(--case-fonce); }
.tuile-lagon { background: var(--lagon); color: #EAF3F4; font-family: var(--f-titre); font-size: 19px; line-height: 1.35; }
.tuile-lagon cite { color: var(--ananas-clair); }
.t-etroite blockquote { font: 400 22px/1.3 var(--f-titre); }
@media (min-width: 960px) {
  .mosaique { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; grid-auto-flow: row dense; }
  .t-large { grid-column: span 3; }
  .t-moyenne { grid-column: span 4; }
  .t-etroite { grid-column: span 2; }
}
@media (max-width: 959px) {
  .mosaique-doigt { display: inline; }
  .mosaique { --bord: var(--gouttiere); display: flex; align-items: stretch; gap: 14px; margin: 0 calc(-1 * var(--bord)); padding: 6px var(--bord) 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); scrollbar-width: none; }
  .mosaique::-webkit-scrollbar { display: none; }
  .tuile { flex: 0 0 min(300px, 80vw); scroll-snap-align: start; }
  .t-etroite { flex-basis: min(240px, 64vw); }
}

/* ───────── Votre table ───────── */
.contact { padding: clamp(80px, 11vw, 130px) 0 calc(clamp(80px, 11vw, 130px) + var(--mer)); background: var(--case); }
.contact-grille { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .contact-grille { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.table { padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--lagon); color: #E6F0F1; box-shadow: 0 30px 60px -34px rgba(12, 71, 87, .7); }
.table .titre { font-size: clamp(34px, 4.6vw, 54px); }
.table .bouton-ligne { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.table .bouton-ligne:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--ananas); }
.table-actions { margin-top: 22px; }
/* Le message, tel qu'il partira : une bulle de SMS. */
.apercu-sms { position: relative; margin-top: 26px; max-width: 420px; padding: 16px 18px; border-radius: 20px 20px 6px 20px; background: #F2F7F7; color: var(--encre); font-size: 16px; line-height: 1.5; }
.apercu-sms::before { content: "Le message est prêt"; display: block; margin-bottom: 6px; font: 800 12px/1 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

.coordonnees { padding-top: 6px; }
.heure-reunion { display: inline-flex; align-items: center; gap: 0; padding: 10px 16px; border-radius: 999px; background: var(--chaux); font-weight: 700; }
.heure-reunion::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lagon); background: linear-gradient(var(--lagon), var(--lagon)) 50% 3px / 2px 6px no-repeat, linear-gradient(var(--lagon), var(--lagon)) 8px 50% / 4px 2px no-repeat; flex: none; margin-right: 10px; }
.heure-reunion b { margin-left: .3em; color: var(--lagon); font-variant-numeric: tabular-nums; }
.horaires-note { margin-top: 16px; color: #3F5459; }
.grand-tel { display: inline-block; margin-top: 18px; font: 400 clamp(42px, 6.6vw, 66px)/1 var(--f-titre); text-decoration: none; color: var(--lagon); border-bottom: 4px solid var(--ananas); white-space: nowrap; }
.adresse { margin-top: 20px; font-size: 17px; font-weight: 700; }
.adresse span { display: block; margin-top: 4px; font-weight: 400; color: var(--gris); font-size: 16px; }
.actions-contact { margin-top: 20px; }
.actions-contact .bouton { flex: 1 1 140px; }
.pratique { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 0; border-top: 1px solid rgba(21, 48, 58, .14); }
.pratique li { padding: 11px 0 11px 28px; border-bottom: 1px solid rgba(21, 48, 58, .14); font-size: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232F6B57' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 14px / 18px no-repeat; }

/* ───────── Pied et barre ───────── */
/* La page finit dans la mer : trois houles au bas de « Votre table », puis le nom en grand sur le bleu du lagon. */
.pied { position: relative; background: var(--lagon-2); color: #A9C8CE; padding: 18px 0 calc(112px + env(safe-area-inset-bottom)); font-size: 14.5px; }
.mer { position: relative; height: var(--mer); margin-top: calc(-1 * var(--mer) - 18px); margin-bottom: 18px; overflow: hidden; pointer-events: none; }
.mer i { position: absolute; left: calc(-1 * var(--p)); width: calc(100% + 2 * var(--p)); bottom: -1px; background-repeat: repeat-x; background-size: var(--p) 100%; will-change: transform; }
.mer .mer-1 { --p: 320px; top: 0; opacity: .55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 100' preserveAspectRatio='none'%3E%3Cpath d='M0 20C53 4 107 4 160 20S267 36 320 20V100H0Z' fill='%235FB7C4'/%3E%3C/svg%3E"); animation: mer-1 22s linear infinite; }
.mer .mer-2 { --p: 260px; top: 26%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 100' preserveAspectRatio='none'%3E%3Cpath d='M0 22C43 6 87 6 130 22S217 38 260 22V100H0Z' fill='%230C4757'/%3E%3Cpath d='M0 27C43 11 87 11 130 27S217 43 260 27' fill='none' stroke='%23FFFFFF' stroke-opacity='.3' stroke-width='1.6'/%3E%3C/svg%3E"); animation: mer-2 12s linear infinite; }
.mer .mer-3 { --p: 200px; top: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 24C33 8 67 8 100 24S167 40 200 24V100H0Z' fill='%230A3A47'/%3E%3C/svg%3E"); animation: mer-3 7s linear infinite; }
@keyframes mer-1 { to { transform: translateX(320px); } }
@keyframes mer-2 { from { transform: translateX(260px); } to { transform: translateX(0); } }
@keyframes mer-3 { to { transform: translateX(200px); } }
.pied-grille { display: grid; gap: 16px; }
.pied-nom { display: flex; align-items: flex-start; gap: .2em; margin-bottom: 10px; font: 400 clamp(52px, 9.4vw, 136px)/.95 var(--f-titre); letter-spacing: -.02em; color: #fff; }
.pied-nom svg { flex: none; width: .62em; height: .62em; margin-top: .14em; color: var(--lagon-clair); }
.pied-lieu { font-size: 16px; line-height: 1.5; color: #CFE3E6; }
.pied-lieu span { white-space: nowrap; }
.pied-tel { display: inline-block; margin-top: 6px; font: 400 26px/1.1 var(--f-titre); white-space: nowrap; text-decoration-color: var(--ananas); text-underline-offset: 5px; }
.pied a { color: #fff; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1fr 1.3fr; align-items: end; column-gap: 56px; } .pied-nom { grid-column: 1 / -1; } .pied { padding-bottom: 50px; } }
.barre { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 247, 238, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--filet); transform: translateY(110%); transition: transform .45s var(--courbe); }
.barre.visible { transform: none; }
.barre a { min-height: 52px; display: grid; place-items: center; border-radius: 999px; font: 800 16px/1 var(--f-texte); text-decoration: none; }
.barre .barre-sms { background: var(--ananas); color: var(--lagon-2); }
.barre .barre-tel { background: var(--lagon); color: #fff; }
@media (min-width: 900px) { .barre { display: none; } }

/* ───────── Apparitions ───────── */
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--courbe), transform .8s var(--courbe); transition-delay: var(--retard, 0s); }
.js .apparait.vu { opacity: 1; transform: none; }
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .08em .1em 0; margin: 0 -.08em -.1em 0; }
[data-mots] .mot > span { display: inline-block; }
.js [data-mots]:not(.vu) .mot > span { transform: translateY(112%); }
.js [data-mots] .mot > span { transition: transform .85s var(--courbe); transition-delay: calc(var(--i) * 65ms); }
.js .heros-texte > :not(.heros-titre), .js .heros-photo figcaption { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--courbe), transform .9s var(--courbe); }
.js .heros.pret .heros-texte > :not(.heros-titre), .js .heros.pret .heros-photo figcaption { opacity: 1; transform: none; }
.js .heros.pret .heros-chapo { transition-delay: .35s; } .js .heros.pret .actions { transition-delay: .5s; } .js .heros.pret .confiance { transition-delay: .65s; } .js .heros.pret .heros-photo figcaption { transition-delay: .8s; }

/* ───────── Finition du 13 octobre : le mouvement au défilement et au toucher ───────── */
/* Les photos glissent doucement dans leur cadre pendant qu'on défile : en CSS natif là où le navigateur sait le faire,
   sinon par app.js (classe parallaxe-js). Purement décoratif : sans l'un ni l'autre, la photo est simplement fixe. */
@keyframes parallaxe { from { translate: 0 -6%; } to { translate: 0 6%; } }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .parallaxe { view-timeline: --cadre block; }
    .parallaxe > img { scale: 1.14; animation: parallaxe linear both; animation-timeline: --cadre; animation-range: cover; }
  }
  .parallaxe-js .parallaxe > img { scale: 1.14; translate: 0 var(--py, 0%); }
}
/* Un appui se sent sous le doigt. */
.bouton:active, .ingredients button:active, .barre a:active, .entete-tel:active { transform: scale(.96); transition-duration: .08s; }
.compte-ligne:active { transform: scale(.985); }
.details li { transition: transform .35s var(--courbe), box-shadow .35s; }
.citations blockquote { transition: transform .35s var(--courbe), box-shadow .35s; }
@media (hover: hover) {
  .details li:hover, .citations blockquote:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--filet), 0 22px 40px -30px rgba(12, 71, 87, .45); }
}
/* La bulle du SMS se met à jour sous les yeux à chaque choix. */
@keyframes bulle { 0% { transform: scale(.985); background: #FFF3D6; } 100% { transform: none; background: #F2F7F7; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .apparait, .js .heros-texte > *, .js .heros-photo figcaption { opacity: 1 !important; transform: none !important; }
  .js [data-mots] .mot > span { transform: none !important; }
  .cadre img, .js .lambrequin { transform: none; }
  .js .comptes .compte-barre i { transform: none; }
  .js .arrivee-vague { stroke-dashoffset: 0; }
  .anneau .anneau-arc { stroke-dashoffset: .219; }
  html { scroll-behavior: auto; }
}