/* Poppins, servie en local (mêmes graisses que lapetiteplagegolfe.fr) */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/poppins-300i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/poppins-300i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/poppins-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/poppins-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Le Petit Patio · même famille visuelle que La Petite Plage :
   Poppins léger, blanc cassé, pêche, et le vert sauge propre au Patio. */

:root {
  --creme: #FBF7F1;
  --creme-2: #F4EEE4;
  --sauge: #A2B190;
  --sauge-profond: #5E6C52;
  --peche: #FF9D69;
  --terre: #C4563A;
  --encre: #22231F;
  --encre-douce: #5B5C55;

  --gouttiere: clamp(1rem, 4vw, 3.5rem);
  --section: clamp(6.5rem, 15vw, 13rem);
  --courbe: cubic-bezier(.2, .7, .1, 1);
  --courbe-forte: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 300 1rem/1.7 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
figure, h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--peche); color: #fff; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.masque, .evitement:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.evitement:focus { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .6rem 1rem; background: var(--encre); color: #fff; }

.marque { display: block; width: 100%; height: auto; overflow: visible; }
.mono, .soleil { display: block; width: 100%; height: auto; }

.surtitre {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sauge-profond);
}

/* ---------- Écran d'arrivée ---------- */

.chargement {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--sauge);
  color: var(--creme);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--courbe-forte);
}
.chargement__mono { width: clamp(3.6rem, 7vw, 5.4rem); clip-path: inset(100% 0 0 0); animation: monte 1.1s .15s var(--courbe) forwards; }
.est-pret .chargement { clip-path: inset(0 0 100% 0); }
.sans-chargement .chargement { display: none; }
html:not(.js) .chargement { display: none; }
@keyframes monte { to { clip-path: inset(0 0 0 0); } }

/* ---------- Navigation ---------- */

.nav {
  position: fixed; z-index: 40; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.35rem var(--gouttiere);
  color: var(--encre);
  transition: color .5s var(--courbe), transform .7s var(--courbe);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--creme) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .5s var(--courbe);
}
.nav.a-fond::before { opacity: 1; }
.nav.est-clair { color: var(--creme); }
.nav.est-clair::before { background: color-mix(in srgb, var(--sauge) 70%, transparent); }
.nav.est-cachee { transform: translateY(-110%); }
.menu-ouvert .nav { color: var(--creme); transform: none; }
.menu-ouvert .nav::before { opacity: 0; }

.nav__menu { justify-self: start; display: inline-flex; align-items: center; gap: .9rem; height: 2.4rem; }
.nav__menu span { display: block; width: 1.6rem; height: 1px; background: currentColor; transition: transform .5s var(--courbe-forte); }
.nav__menu span + span { margin-left: -2.5rem; transform: translateY(7px); }
.nav__menu span:first-child { transform: translateY(-1px); }
.nav__menu em { font-style: normal; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; margin-left: .2rem; }
.menu-ouvert .nav__menu span:first-child { transform: translateY(3px) rotate(32deg); }
.menu-ouvert .nav__menu span + span { transform: translateY(3px) rotate(-32deg); }

.nav__marque { width: clamp(9rem, 15vw, 12.5rem); opacity: 0; transform: translateY(-.4rem); transition: opacity .6s var(--courbe), transform .6s var(--courbe); }
.a-quitte-heros .nav__marque, .menu-ouvert .nav__marque { opacity: 1; transform: none; }
.nav__reserver {
  justify-self: end;
  font-size: .7rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  padding: .7rem 0 .7rem 1.1rem;
  position: relative;
}
.nav__reserver::after { content: ""; position: absolute; left: 1.1rem; right: 0; bottom: .45rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--courbe); }
.nav__reserver:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 640px) {
  .nav { padding: 1rem var(--gouttiere); }
  .nav__menu em { display: none; }
  .nav__marque { width: 8.6rem; }
}

/* ---------- Menu plein écran ---------- */

.menu {
  position: fixed; inset: 0; z-index: 35;
  display: grid; grid-template-rows: 1fr auto;
  padding: 7rem var(--gouttiere) 2.2rem;
  background: var(--sauge); color: var(--creme);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--courbe-forte);
  visibility: hidden;
  overflow: hidden;
}
.menu-ouvert .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu.se-ferme { visibility: visible; }
.menu__soleil { position: absolute; right: -8vw; top: 50%; width: min(58vw, 46rem); translate: 0 -50%; opacity: .16; color: var(--creme); animation: tourne 80s linear infinite; pointer-events: none; }
.menu__liens { align-self: center; display: grid; gap: .2rem; }
.menu__liens a {
  display: flex; align-items: baseline; gap: 1.2rem;
  font-size: clamp(2rem, min(6.4vw, 8.6svh), 5.6rem); line-height: 1.12; letter-spacing: -.03em;
  opacity: 0; transform: translateY(1.2rem);
  transition: opacity .6s var(--courbe), transform .8s var(--courbe), font-style 0s;
  width: fit-content;
}
.menu__liens a small { font-size: .7rem; letter-spacing: .25em; opacity: .75; transform: translateY(-1.6em); }
.menu__liens a:hover { font-style: italic; }
.menu-ouvert .menu__liens a { opacity: 1; transform: none; }
.menu-ouvert .menu__liens a:nth-child(1) { transition-delay: .25s; }
.menu-ouvert .menu__liens a:nth-child(2) { transition-delay: .31s; }
.menu-ouvert .menu__liens a:nth-child(3) { transition-delay: .37s; }
.menu-ouvert .menu__liens a:nth-child(4) { transition-delay: .43s; }
.menu-ouvert .menu__liens a:nth-child(5) { transition-delay: .49s; }
.menu-ouvert .menu__liens a:nth-child(6) { transition-delay: .55s; }
.menu__liens .menu__reserver { font-style: italic; }
.menu__pied { display: flex; flex-wrap: wrap; gap: 1.2rem 3.5rem; font-size: .85rem; line-height: 1.7; }
.menu__pied a { border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }

/* ---------- Ouverture : l'arche s'ouvre sur le jardin ---------- */

.heros { position: relative; height: 230svh; }
.heros__scene { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.heros__soleil {
  position: absolute; left: 50%; top: 44%;
  width: min(84vw, 56rem);
  color: var(--sauge);
  translate: -50% -50%;
  opacity: calc(.24 * (1 - var(--p, 0)));
  pointer-events: none;
}
.heros__soleil .soleil { animation: tourne 90s linear infinite; }
@keyframes tourne { to { rotate: 360deg; } }

.heros__fenetre {
  position: absolute; inset: 0;
  clip-path: inset(var(--haut, 13svh) var(--cote, 35vw) var(--bas, 25svh) var(--cote, 35vw) round var(--rayon, 50vw) var(--rayon, 50vw) 0 0);
  will-change: clip-path;
}
.heros__fenetre img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  transform: scale(var(--zoom, 1.1));
  will-change: transform;
}
.heros__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 16, .28), rgba(20, 22, 16, .06) 40%, rgba(20, 22, 16, .34)); opacity: var(--voile, 0); pointer-events: none; }

.heros__lieu {
  position: absolute; left: 0; right: 0; top: calc(var(--haut, 13svh) - 2.4rem);
  text-align: center;
  font-size: .7rem; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--sauge-profond);
  opacity: calc(1 - var(--p, 0) * 3);
}
.heros__lieu i { font-style: normal; padding: 0 .5em; color: var(--peche); }

.heros__marque {
  position: absolute; left: 50%; bottom: 7svh;
  width: min(88vw, 72rem);
  color: var(--sauge-profond);
  translate: -50% calc(var(--p, 0) * 10svh);
  opacity: calc(1 - var(--p, 0) * 3.4);
}
.heros__marque .lt { transform-box: fill-box; transform-origin: 50% 100%; }

.heros__accroche {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  color: #fff;
  opacity: var(--accroche, 0);
  transform: translateY(calc((1 - var(--accroche, 0)) * 2rem));
  pointer-events: none;
}
.heros__titre { font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.1; letter-spacing: -.02em; }
.heros__sous { margin-top: .9rem; font-size: clamp(.95rem, 1.4vw, 1.2rem); }

.heros__indice {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 5svh;
  background: color-mix(in srgb, var(--sauge-profond) 30%, transparent);
  overflow: hidden; opacity: calc(1 - var(--p, 0) * 4);
}
.heros__indice::after { content: ""; position: absolute; inset: 0; background: var(--sauge-profond); animation: indice 2.2s var(--courbe-forte) infinite; }
@keyframes indice { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* Entrée de l'ouverture, une fois l'écran d'arrivée levé */
.js .heros__marque .lt { opacity: 0; transform: translateY(40%) rotate(4deg); }
.js .heros__fenetre img { scale: 1.12; }
.js .heros__lieu { translate: 0 .8rem; }
.est-entre .heros__marque .lt { opacity: 1; transform: none; transition: opacity .9s var(--courbe), transform 1.2s var(--courbe); }
.est-entre .heros__fenetre img { scale: 1; transition: scale 2.2s var(--courbe); }
.est-entre .heros__lieu { translate: 0 0; transition: translate 1.2s .3s var(--courbe); }
.js:not(.est-entre) .heros__lieu { opacity: 0; }

@media (max-width: 640px) {
  .heros { height: 200svh; }
  .heros__marque { bottom: 9svh; }
}

/* ---------- Cadres photo ---------- */

.cadre { position: relative; }
.cadre__img { overflow: hidden; background: var(--creme-2); }
.cadre__img img { width: 100%; height: 100%; object-fit: cover; scale: 1.14; }
.cadre--arche .cadre__img { border-radius: 999px 999px 0 0; }
.cadre figcaption {
  margin-top: .9rem;
  font-style: italic; font-size: .85rem;
  color: var(--encre-douce);
}

[data-revele] { opacity: 0; transform: translateY(2.2rem); transition: opacity 1.1s var(--courbe), transform 1.3s var(--courbe); }
[data-revele].vu { opacity: 1; transform: none; }
.cadre[data-revele] .cadre__img { clip-path: inset(18% 0 0 0); transition: clip-path 1.5s var(--courbe); }
.cadre[data-revele].vu .cadre__img { clip-path: inset(0 0 0 0); }
html:not(.js) [data-revele] { opacity: 1; transform: none; }
html:not(.js) .cadre[data-revele] .cadre__img { clip-path: none; }

/* Texte qui monte ligne par ligne */
.ligne { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ligne > span { display: block; transform: translateY(105%); transition: transform 1.2s var(--courbe); }
.vu .ligne > span, .ligne.vu > span { transform: none; }

/* ---------- La maison ---------- */

.maison {
  padding: var(--section) var(--gouttiere) calc(var(--section) * .8);
  display: grid; justify-items: center; text-align: center;
}
.maison__texte {
  margin-top: 2.2rem;
  max-width: 24ch;
  font-size: clamp(1.9rem, 4.4vw, 4.1rem); line-height: 1.16; letter-spacing: -.025em;
}
.maison__sous { margin-top: 2.2rem; max-width: 34ch; color: var(--encre-douce); font-size: clamp(.98rem, 1.2vw, 1.1rem); }

.maison__photos {
  width: 100%; max-width: 78rem;
  margin-top: clamp(4.5rem, 9vw, 8rem);
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: start;
  text-align: left;
}
.maison__a { grid-column: 2 / span 5; }
.maison__a .cadre__img { aspect-ratio: 3 / 4; }
.maison__b { grid-column: 8 / span 4; margin-top: 38%; }
.maison__b .cadre__img { aspect-ratio: 3 / 4; }

@media (max-width: 900px) {
  .maison__photos { grid-template-columns: repeat(6, 1fr); row-gap: 3rem; }
  .maison__a { grid-column: 1 / span 5; }
  .maison__b { grid-column: 3 / span 4; margin-top: 0; }
}

/* ---------- Du matin au soir ---------- */

.moments { position: relative; background: var(--creme-2); }
.moments__scene { overflow: hidden; }
.moments__piste { display: flex; flex-direction: column; gap: 5rem; padding: var(--section) var(--gouttiere); }

.moment { display: grid; gap: 1.8rem; width: 100%; max-width: 34rem; }
.moment--large { max-width: 52rem; }
.moment--ouverture, .moment--dimanche { max-width: none; }
.moment__img .cadre__img { aspect-ratio: 3 / 4; }
.moment--large .moment__img .cadre__img { aspect-ratio: 1309 / 843; }
.moment__num { font-size: .72rem; letter-spacing: .3em; font-weight: 400; color: var(--sauge-profond); }
.moment__num i { font-style: italic; letter-spacing: 0; font-weight: 300; font-size: .95rem; padding-left: .8rem; color: var(--peche); }
.moment h3 { margin-top: .5rem; font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.1; }
.moment__texte p:last-child { margin-top: .7rem; max-width: 28ch; color: var(--encre-douce); }

.moment--ouverture { align-content: center; }
.moment__grand { margin-top: 1.6rem; font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.12; letter-spacing: -.03em; max-width: 13ch; }
.moment__fleche { display: none; }

.moment--dimanche { position: relative; display: grid; place-items: center; min-height: 70svh; }
.moment__soleil { position: absolute; width: min(80vw, 34rem); color: var(--peche); opacity: .55; }
.moment__soleil .soleil { animation: tourne 60s linear infinite; }
.moment__dimanche { position: relative; text-align: center; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.1; letter-spacing: -.03em; }
.moment__dimanche em { font-style: italic; color: var(--terre); }

@media (min-width: 900px) {
  .moments.est-epinglee .moments__scene { position: sticky; top: 0; height: 100svh; }
  .moments.est-epinglee .moments__piste {
    flex-direction: row; align-items: center; gap: 0;
    height: 100%; width: max-content; padding: 0;
    will-change: transform;
  }
  .est-epinglee .moment { max-width: none; width: 34vw; padding: 0 3vw; grid-template-rows: auto auto; align-content: center; }
  .est-epinglee .moment--large { width: 46vw; }
  .est-epinglee .moment--ouverture { width: 50vw; padding-left: var(--gouttiere); padding-right: 6vw; }
  .est-epinglee .moment--dimanche { width: 58vw; min-height: 100svh; }
  .est-epinglee .moment__img .cadre__img { height: 58svh; aspect-ratio: auto; }
  .est-epinglee .moment--large .moment__img .cadre__img { height: 46svh; }
  .est-epinglee .moment:nth-child(odd):not(.moment--ouverture):not(.moment--dimanche) { translate: 0 4svh; }
  .est-epinglee .moment__fleche {
    display: block; margin-top: 3rem; width: 7rem; height: 1px; background: var(--encre); position: relative;
  }
  .est-epinglee .moment__fleche::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid var(--encre); border-right: 1px solid var(--encre); rotate: 45deg; }
  .est-epinglee [data-glisse] img { scale: 1.2; }
}

/* ---------- Pâtisserie ---------- */

.patisserie { background: var(--sauge); color: var(--creme); padding: calc(var(--section) * .75) 0 var(--section); overflow: hidden; }
.patisserie .surtitre { color: var(--creme); opacity: .85; }
.patisserie .cadre figcaption { color: color-mix(in srgb, var(--creme) 85%, transparent); }
.patisserie .cadre__img { background: color-mix(in srgb, var(--sauge-profond) 30%, var(--sauge)); }

.defile { white-space: nowrap; overflow: hidden; }
.defile__rang { display: inline-flex; align-items: center; gap: clamp(1.4rem, 3vw, 3rem); will-change: transform; }
.defile__rang span { font-size: clamp(3.4rem, 10.5vw, 10.5rem); line-height: 1.15; letter-spacing: -.04em; }
.defile__rang span:nth-of-type(even) { font-style: italic; }
.defile__rang i { display: block; width: clamp(1.8rem, 3.6vw, 3.4rem); color: var(--peche); }

.patisserie__grille {
  max-width: 82rem; margin: clamp(4rem, 8vw, 7rem) auto 0; padding: 0 var(--gouttiere);
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; row-gap: 4rem;
}
.patisserie__a { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.patisserie__a .cadre__img { aspect-ratio: 4 / 5; }
.patisserie__texte { grid-column: 8 / span 5; padding-top: 4rem; }
.patisserie__texte h2 { margin-top: 1.6rem; font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.7rem); line-height: 1.12; letter-spacing: -.03em; }
.patisserie__texte p:last-child { margin-top: 1.6rem; max-width: 30ch; opacity: .9; }
.patisserie__b { grid-column: 9 / span 4; }
.patisserie__b .cadre__img { aspect-ratio: 3 / 4; }
.patisserie__c { grid-column: 1 / -1; margin-top: 1rem; }
.patisserie__c .cadre__img { aspect-ratio: 2 / 1; }
.patisserie__c .cadre__img img { object-position: 60% 45%; }

@media (max-width: 900px) {
  .patisserie__grille { grid-template-columns: repeat(6, 1fr); row-gap: 3rem; }
  .patisserie__texte { grid-column: 1 / -1; grid-row: 1; padding-top: 0; }
  .patisserie__a { grid-column: 1 / -1; grid-row: auto; }
  .patisserie__b { grid-column: 3 / span 4; }
  .patisserie__c { margin-top: 0; }
  .patisserie__c .cadre__img { aspect-ratio: 4 / 3; }
}

/* ---------- Avis ---------- */

.avis { position: relative; display: grid; place-items: center; text-align: center; padding: var(--section) var(--gouttiere); overflow: hidden; }
.avis__soleil { position: absolute; width: min(76vw, 30rem); color: var(--sauge); opacity: .55; top: 50%; left: 50%; translate: -50% -50%; }
.avis__note { position: relative; display: flex; align-items: baseline; justify-content: center; line-height: 1; }
.avis__note span { font-size: clamp(6rem, 17vw, 14rem); letter-spacing: -.06em; }
.avis__note small { font-size: clamp(1.4rem, 2.6vw, 2.2rem); margin-left: .4rem; color: var(--encre-douce); }
.avis__texte { position: relative; margin-top: 1.4rem; font-style: italic; color: var(--encre-douce); }

/* ---------- Nous trouver ---------- */

.infos {
  padding: calc(var(--section) * .6) var(--gouttiere) var(--section);
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; column-gap: 1.5rem; row-gap: 4rem;
  max-width: 86rem; margin: 0 auto;
}
.infos__col { grid-column: 1 / span 6; }
.infos h2 { margin-top: 1.6rem; font-weight: 300; font-size: clamp(2rem, 4vw, 3.9rem); line-height: 1.12; letter-spacing: -.03em; max-width: 14ch; }
.infos__liste { margin-top: 3rem; display: grid; gap: 1.6rem; }
.infos__liste div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.infos__liste dt { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; color: var(--sauge-profond); padding-top: .25rem; }
.infos__liste dd span { color: var(--encre-douce); font-size: .92rem; }
.infos__liste a { border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.infos__actions { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.4rem; }

.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.6rem; padding: 0 2.2rem; border-radius: 999px;
  background: var(--encre); color: var(--creme);
  font-size: .72rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
}
.bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--peche); border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--courbe); }
.bouton:hover::before { transform: none; }
.lien { font-size: .72rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; padding: .4rem 0; position: relative; }
.lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--courbe); }
.lien:hover::after { transform: scaleX(0); }

.infos__arche {
  grid-column: 8 / span 5;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 0 0;
  background: var(--sauge); color: var(--creme);
  display: grid; place-content: center; justify-items: center; gap: 2.4rem;
  text-align: center;
}
.infos__mono { width: clamp(5rem, 10vw, 8.5rem); }
.infos__arche p { font-style: italic; line-height: 1.6; }
.infos__arche a { font-style: normal; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); }

@media (max-width: 900px) {
  .infos__col, .infos__arche { grid-column: 1 / -1; }
  .infos__arche { width: min(100%, 24rem); justify-self: center; }
  .infos__liste div { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---------- Pied de page : le pêche de La Petite Plage ---------- */

.pied { background: var(--peche); color: #fff; padding: clamp(4rem, 8vw, 6.5rem) var(--gouttiere) 1.6rem; overflow: hidden; }
.pied__haut { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 1.6fr; gap: 2.4rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
.pied__mono { width: 3.2rem; }
.pied__haut ul { display: grid; gap: .9rem; align-content: start; }
.pied__haut a { position: relative; }
.pied__haut ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--courbe); }
.pied__haut ul a:hover::after { transform: scaleX(1); transform-origin: left; }
.pied__adresse { text-transform: none; letter-spacing: .02em; font-size: .9rem; font-weight: 300; line-height: 1.8; }
.pied__marque { margin-top: clamp(4rem, 9vw, 8rem); }
.pied__bas { margin-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; }
.pied__bas span:last-child { font-style: italic; }

@media (max-width: 900px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__mono { grid-column: 1 / -1; }
  .pied__adresse { grid-column: 1 / -1; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .heros { height: auto; }
  .heros__scene { position: relative; }
  [data-revele], .ligne > span { opacity: 1 !important; transform: none !important; }
}