/* =============================================================
   L'Esprit des Fleurs
   Palette et typographie deduites de l'enseigne et des photos.
   Voir DA.md pour l'origine mesuree de chaque valeur.
   ============================================================= */

:root {
  /* --- couleurs : chaque valeur vient d'une mesure, voir DA.md --- */
  --ink:            #1F211B;   /* bandeau d'enseigne mesure #1D1E19        */
  --ink-2:          #2B2E26;   /* surface sombre secondaire                */
  --ink-text:       #22241E;   /* texte principal sur fond clair           */
  --ink-muted:      #55574B;   /* texte secondaire sur fond clair          */
  --cream:          #F5F1E8;   /* facade mesuree #EAE7DA                   */
  --cream-2:        #EAE4D6;   /* mur mesure #DED7C4                       */
  --line:           #D5CDBB;   /* filets                                   */
  --line-dark:      #3D4036;   /* filets sur bandeau                       */
  --vanda:          #5A3D7A;   /* orchidee Vanda mesuree #4B3265           */
  --vanda-deep:     #452E5F;   /* la meme, au survol des boutons           */
  --vanda-lift:     #A886C4;   /* la meme, remontee pour l'AA sur anthracite */
  --on-dark:        #F5F1E8;
  --on-dark-muted:  #B9B3A2;

  /* --- les deux couleurs vegetales, mesurees elles aussi (voir DA.md) ---
     Elles ne remplacent pas le violet : elles lui repondent. Le vert vient de
     l'anthurium de la photo 10, le rose des pivoines de la photo 01.          */
  --feuille:        #607625;   /* anthurium mesure #617825, ramene a l'AA    */
  --feuille-lift:   #75912D;   /* le meme, remonte pour l'anthracite         */
  --rose:           #9C3347;   /* pivoine fuchsia mesuree                     */

  /* Couleur de la photo courante. Chaque figure porte la sienne, mesuree sur
     ses propres fleurs ; a defaut, on retombe sur le violet de l'enseigne.    */
  --fleur:          var(--vanda);

  /* --- typographie --- */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Karla", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --t-body:   clamp(1.0625rem, 0.99rem + 0.31vw, 1.125rem);
  --t-small:  0.875rem;
  --t-lede:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --t-h3:     clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --t-h2:     clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --t-h1:     clamp(3.5rem, 1.5rem + 5.4vw, 7rem);

  /* --- rythme : base 4 px --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7.5rem;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --head-h: 76px;

  /* --- forme : les photos sont posees dans des cadres adoucis, comme des
     tirages, pour qu'elles se fondent dans la page au lieu de la trancher --- */
  --rayon:   clamp(1rem, .6rem + 1.4vw, 1.75rem);   /* grandes photos     */
  --rayon-s: clamp(.625rem, .45rem + .6vw, .875rem); /* vignettes galerie  */

  /* --- mouvement : une seule courbe pour tout le site --- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --z-head: 60;
  --z-fab: 70;
  --z-lbox: 100;
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h2 { text-wrap: balance; }
p { margin: 0 0 var(--sp-4); }
a { color: var(--vanda); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
li { list-style: none; }
:focus-visible {
  outline: 2px solid var(--vanda);
  outline-offset: 3px;
  border-radius: 1px;
}
.band :focus-visible, .lbox :focus-visible, .svc__item--une :focus-visible { outline-color: var(--vanda-lift); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.anchor { display: block; height: 1px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
/* le header est colle en haut : on decale les cibles d'ancre d'autant */
section[id], span[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }

.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--vanda); color: var(--cream);
  padding: var(--sp-3) var(--sp-5); font-weight: 500; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--sp-3); }

/* =============================================================
   TITRES EN LIGNES
   Chaque ligne d'un titre monte de sous son propre filet, l'une apres
   l'autre. Le masque deborde un peu pour ne couper ni les accents ni
   les jambages italiques.
   ============================================================= */
.ligne {
  display: block; overflow: hidden;
  padding: .1em .06em .14em; margin: -.1em -.06em -.14em;
}
.ligne > * { display: inline-block; }
.js .reveal .ligne > *,
.js .reveal.titre .ligne > * {
  transform: translateY(108%);
  transition: transform 1.05s var(--ease) calc(var(--retard, 0ms) + var(--l, 0) * 110ms);
}
.js .reveal.is-in .ligne > * { transform: none; }
/* le titre porte lui-meme l'animation : il ne fond pas en plus */
.js .titre.reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------ boutons */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500;
  line-height: 1; letter-spacing: .01em; white-space: nowrap;
  padding: .95em 1.4em; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  /* --ax / --ay : attraction magnetique posee en JS, a zero sinon */
  transform: translate(var(--ax, 0px), var(--ay, 0px));
  transition: color .35s var(--ease), border-color .35s var(--ease),
              transform .5s var(--ease);
}
/* Le remplissage monte du bas, comme de l'eau dans un vase. */
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; background: var(--btn-fill, transparent);
  transform: translateY(102%);
  transition: transform .5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:active { transform: translate(var(--ax, 0px), var(--ay, 0px)) scale(.97); transition-duration: .12s; }
.btn .ico { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }
/* le combine sonne quand on le survole */
.btn[href^="tel:"]:hover .ico { animation: sonne .6s var(--ease); }
@keyframes sonne {
  20% { transform: rotate(-14deg); }
  45% { transform: rotate(11deg); }
  70% { transform: rotate(-6deg); }
}

.btn--solid { background: var(--vanda); color: var(--cream); --btn-fill: var(--vanda-deep); }

.btn--line { background: transparent; color: var(--ink-text); border-color: var(--ink-text); --btn-fill: var(--ink-text); }
.btn--line:hover, .btn--line:focus-visible { color: var(--cream); }

.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--line-dark); --btn-fill: var(--on-dark); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--on-dark); }

/* =============================================================
   BANDEAU D'ENSEIGNE
   Le motif directeur du site : le bandeau noir de la devanture.
   ============================================================= */
.band { background: var(--ink); color: var(--on-dark); }
.band h2, .band h3 { color: var(--on-dark); }
.band p { color: var(--on-dark-muted); }
.band a { color: var(--on-dark); }

/* ------------------------------------------------------------ header */
.band--head {
  position: sticky; top: 0; z-index: var(--z-head);
  border-bottom: 1px solid var(--line-dark);
}

/* Jauge de lecture : un filet des couleurs relevees sur les bouquets, dans
   l'ordre ou les photos apparaissent dans la page. Pilotee par le defilement,
   sans une ligne de JavaScript. La ou l'animation liee au scroll n'existe pas,
   le filet reste a zero, donc invisible. */
.jauge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg,
    #8E58AD 0%, #C73565 18%, #607625 38%, #9C3347 54%, #513A72 68%, #7E6D32 84%, #AF7C4E 100%);
}
@supports (animation-timeline: scroll()) {
  .jauge {
    animation: jauge-avance linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes jauge-avance { to { transform: scaleX(1); } }
.band__inner {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--sp-4) var(--pad);
  transition: padding .25s var(--ease);
}
[data-head].is-stuck .band__inner { padding-block: .625rem; }

.brand { display: block; margin-right: auto; color: var(--on-dark); }
.brand__mark {
  height: 44px; width: auto; fill: currentColor;
  transition: height .25s var(--ease);
}
[data-head].is-stuck .brand__mark { height: 34px; }

.nav { display: none; }
.head__tel { display: none; }
.head__telmini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--on-dark);
  border: 1px solid var(--line-dark); border-radius: 999px;
}
.head__telmini .ico { width: 18px; height: 18px; fill: currentColor; }
.head__telmini:hover { background: var(--ink-2); }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 40px; height: 40px; padding: 0 9px;
  background: transparent; border: 1px solid var(--line-dark); border-radius: 999px;
  cursor: pointer;
}
.burger span {
  display: block; height: 1.5px; background: var(--on-dark);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.nav.is-open {
  display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink); border-bottom: 1px solid var(--line-dark);
  padding: var(--sp-2) var(--pad) var(--sp-5);
  animation: menu-ouvre .35s var(--ease) both;
}
@keyframes menu-ouvre { from { opacity: 0; transform: translateY(-8px); } }
.nav.is-open a { animation: menu-ouvre .45s var(--ease) both; }
.nav.is-open a:nth-child(2) { animation-delay: .04s; }
.nav.is-open a:nth-child(3) { animation-delay: .08s; }
.nav.is-open a:nth-child(4) { animation-delay: .12s; }
.nav a {
  font-size: 1.0625rem; padding: var(--sp-3) 0;
  text-decoration: none; border-bottom: 1px solid var(--line-dark);
}
.nav a:last-child { border-bottom: 0; }

/* =============================================================
   HERO
   Mobile : texte puis photo dans la colonne, coins adoucis. Desktop : la
   photo occupe la moitie droite de l'ecran, detachee du header et du bord
   par une marge, le texte reste aligne sur la colonne du site.
   ============================================================= */
.hero { position: relative; padding: var(--sp-6) var(--pad) var(--sp-8); }
.hero__title {
  font-size: var(--t-h1); font-weight: 300; line-height: 1;
  letter-spacing: -.03em; margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: italic; font-weight: 300; color: var(--vanda);
}
/* Le titre monte ligne a ligne des le chargement, sans attendre le JS. */
.hero__title .ligne > * {
  animation: monte 1.15s var(--ease) calc(.08s + var(--l, 0) * .12s) both;
}
@keyframes monte { from { transform: translateY(108%); } }
.intro { animation: apparait .9s var(--ease) calc(.35s + var(--i, 0) * .1s) both; }
@keyframes apparait { from { opacity: 0; transform: translateY(16px); } }

.hero__lead {
  font-size: var(--t-lede); line-height: 1.5; color: var(--ink-muted);
  max-width: 34ch; margin-bottom: var(--sp-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 519px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn, .infos__actions .btn { justify-content: center; }
  .infos__actions { flex-direction: column; align-items: stretch; }
}
.hero__state {
  font-size: var(--t-small); color: var(--ink-muted);
  margin: 0 0 var(--sp-6);
}
.hero__state b { color: var(--ink-text); font-weight: 700; }

/* Etat d'ouverture : un point reel, pas decoratif. Il ne bat que quand la
   boutique est ouverte. */
[data-open-state] b::before {
  content: ""; display: inline-block; vertical-align: .08em;
  width: .5em; height: .5em; margin-right: .45em; border-radius: 999px;
  background: currentColor;
}
.is-open-now b::before { animation: battement 2.4s var(--ease-in-out) infinite; }
@keyframes battement {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 118, 37, .45); }
  60%      { box-shadow: 0 0 0 .45em rgba(96, 118, 37, 0); }
}

.hero__figure { position: relative; margin: var(--sp-7) 0 0; }
/* clip-path plutot qu'overflow + radius : Safari laisse sinon depasser les
   coins pendant que la photo est agrandie par une animation. */
.hero__frame {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: var(--rayon); clip-path: inset(0 round var(--rayon));
}
.hero__frame picture { position: absolute; inset: 0; }
.hero__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
/* Eclosion : la photo est peinte tout de suite, elle se resserre seulement.
   Aucune opacite ni aucun masque, pour ne pas retarder l'affichage du hero. */
.hero__frame img { animation: eclore 1.8s var(--ease) both; }
@keyframes eclore {
  from { transform: scale(1.12); filter: saturate(.75); }
  to   { transform: scale(1);    filter: saturate(1); }
}
.hero__figure figcaption { margin-inline: var(--sp-2); }

/* La note Google posee sur le bouquet, en verre depoli. */
.hero__puce {
  position: absolute; z-index: 1; left: var(--sp-4); bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .55em 1em .55em .8em; border-radius: 999px;
  background: rgba(245, 241, 232, .78); color: var(--ink-text);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 20px -8px rgba(31, 33, 27, .45);
  font-size: .8125rem; line-height: 1; text-decoration: none;
  animation: apparait 1s var(--ease) 1s both;
  transition: background-color .3s var(--ease);
}
.hero__puce:hover { background: rgba(245, 241, 232, .95); }
.hero__puce b { font-weight: 700; }
.hero__etoiles svg { width: 5.2em; height: 1.04em; fill: #C9962B; }

/* Le sceau : une couronne de texte autour de l'annee de creation. */
.sceau {
  position: absolute; z-index: 2;
  width: 104px; height: 104px; top: -52px; right: var(--sp-4);
  animation: apparait 1s var(--ease) .7s both;
}
.sceau__fond { fill: var(--cream); stroke: var(--line); stroke-width: 1; }
.sceau text {
  font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-text);
}
.sceau .sceau__annee {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 40px; letter-spacing: -.02em; text-transform: none; fill: var(--vanda);
}
.sceau__couronne { transform-box: view-box; transform-origin: 50% 50%; }

/* Legendes : le filet porte la couleur relevee sur les fleurs de la photo
   qu'il souligne, et il se trace au moment ou elle apparait. */
.hero__figure figcaption,
.atelier__figure figcaption {
  position: relative;
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  transition: color .3s var(--ease);
}
.hero__figure figcaption::before,
.atelier__figure figcaption::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--fleur);
  transform: scaleX(1); transform-origin: 0 50%;
  transition: transform .9s var(--ease) calc(var(--retard, 0ms) + 360ms),
              height .25s var(--ease);
}
.hero__figure figcaption::before { animation: trace 1.2s var(--ease) .9s both; }
@keyframes trace { from { transform: scaleX(0); } }
.js .reveal:not(.is-in) figcaption::before { transform: scaleX(0); }
.atelier__figure figcaption::before { opacity: .85; }

/* =============================================================
   DEFILE DES FLEURS
   Deux rangs de noms de fleurs en sens contraire. Ils ne bougent que
   quand on defile la page : le JS (main.js) les entraine au rythme et dans
   le sens du defilement. La boucle porte trois fois le meme contenu : on
   la decale d'un tiers au plus, puis on recommence, sans couture. Aucun
   mouvement autonome, donc pas de bouton pause a prevoir (WCAG 2.2.2).
   Sans JS ou en mouvement reduit, le bandeau reste fixe.
   ============================================================= */
.defile {
  overflow: hidden; padding: var(--sp-7) 0;
  border-block: 1px solid var(--line);
  display: grid; gap: .1em;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem);
  line-height: 1.08; letter-spacing: -.02em;
}
.defile__rang {
  display: flex; gap: .5em; width: max-content; margin: 0;
  white-space: nowrap;
}
/* Le pas de la boucle doit valoir exactement un tiers de sa largeur : chaque
   nom porte donc sa propre marge (et son fleuron), au lieu d'un gap qui
   laisserait un ecart de moins entre la fin d'une copie et le debut de la suivante. */
.defile__boucle { display: flex; align-items: center; will-change: transform; }
.defile__rang--b .defile__boucle { transform: translateX(-33.3333%); }
.defile__boucle > span { display: inline-flex; align-items: center; }
.defile__boucle > span::after {
  content: "✦"; margin-inline: .55em;
  font-family: var(--sans); font-style: normal; font-size: .28em;
  color: var(--vanda); opacity: .45;
}
.defile__rang span { color: var(--ink-text); }
.defile__rang span[style] { color: var(--c); font-style: italic; }

/* =============================================================
   HISTOIRE
   ============================================================= */
.histoire {
  background: var(--cream-2);
  padding: var(--sp-8) var(--pad);
}
.histoire__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; gap: var(--sp-6);
}
.histoire__media picture,
.atelier__figure picture {
  display: block; overflow: hidden;
  border-radius: var(--rayon); clip-path: inset(0 round var(--rayon));
}
.histoire__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 45%;
}
.histoire__text h2 {
  font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--sp-6);
}
.histoire__text p { max-width: 60ch; }
/* La phrase centrale, en grand : ses mots s'allument au fil de la lecture. */
.histoire__phrase {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  line-height: 1.32; letter-spacing: -.005em; color: var(--ink-text);
  margin: var(--sp-6) 0;
}
.histoire__sign {
  font-family: var(--serif); font-size: 1.375rem; line-height: 1.35;
  color: var(--ink-text); margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
  max-width: 40ch;
}
.histoire__sign em { font-style: italic; color: var(--vanda); }

/* =============================================================
   CREATIONS  (grille + lightbox)
   Une grande photo et six petites, toutes au format 3:4, collees les unes
   aux autres. Mobile : 2 colonnes, la grande sur toute la largeur.
   Grand ecran : 5 colonnes sur 2 rangs, la grande occupe 2 x 2 cases.
   Sept photos, sept cases, aucune case vide.
   ============================================================= */
.creations { padding: var(--sp-8) 0 var(--sp-9); }
.creations h2 { font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--sp-4); }
.lede { font-size: var(--t-lede); color: var(--ink-muted); max-width: 46ch; margin-bottom: var(--sp-7); }

.galerie {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.galerie__cell--une { grid-column: 1 / -1; }
.galerie figure {
  position: relative; margin: 0; height: 100%;
  border-radius: var(--rayon-s); clip-path: inset(0 round var(--rayon-s));
}
.shot {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--cream-2);
  cursor: zoom-in; overflow: hidden;
}
.shot picture { display: block; height: 100%; }
.shot img {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 1s var(--ease), filter 1s var(--ease);
}
.galerie__cell--une .shot img { aspect-ratio: 4 / 5; }
.shot:hover img { transform: scale(1.06); filter: saturate(1.1); }
.shot:active img { transform: scale(1.02); }

/* Legende posee sur le bas de la photo, sur un degrade d'encre, avec un
   filet a la couleur relevee sur les fleurs de la photo. Sur ecran tactile
   elle reste affichee ; avec une souris, elle monte au survol ou au focus. */
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 3.5rem var(--sp-4) var(--sp-4);
  font-size: .8125rem; line-height: 1.45; color: var(--cream);
  background: linear-gradient(to top, rgba(22, 23, 19, .88) 0%, rgba(22, 23, 19, .6) 55%, rgba(22, 23, 19, 0) 100%);
}
.galerie figcaption::before {
  content: ""; display: block; width: 2.25rem; height: 2px; margin-bottom: var(--sp-2);
  background: var(--fleur); filter: brightness(1.35) saturate(1.1);
}
.galerie__cell--une figcaption { font-size: .9375rem; padding: 5rem var(--sp-5) var(--sp-5); }

@media (hover: hover) and (pointer: fine) {
  .galerie figcaption {
    opacity: 0; transform: translateY(12px);
    transition: opacity .45s var(--ease), transform .6s var(--ease);
  }
  .galerie__cell:hover figcaption,
  .shot:focus-visible + figcaption { opacity: 1; transform: none; }
}
.shot:focus-visible { outline-offset: -4px; outline-color: var(--cream); }
/* Sur telephone, les petites cases sont trop etroites pour porter un texte :
   leur legende n'est plus affichee, mais reste lue par les lecteurs d'ecran
   et s'affiche dans la visionneuse quand on agrandit la photo. */
@media (max-width: 639px) {
  .galerie__cell:not(.galerie__cell--une) figcaption {
    width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* La photo se developpe : le voile se leve du bas vers le haut pendant que le
   cadrage se resserre. Les cases qui entrent ensemble sont decalees (JS). */
.js .galerie__cell .shot picture { clip-path: inset(0 0 100% 0 round var(--rayon-s)); }
.js .galerie__cell.is-in .shot picture {
  animation: developpe 1.2s var(--ease) var(--retard, 0ms) both;
}
@keyframes developpe {
  from { clip-path: inset(0 0 100% 0 round var(--rayon-s)); transform: scale(1.12); }
  to   { clip-path: inset(0 0 0 0 round var(--rayon-s));    transform: scale(1); }
}
/* la grille entiere arrive en bloc : les cases restent la, seul le voile bouge */
.js .galerie__cell.reveal { opacity: 1; transform: none; }

/* =============================================================
   OCCASIONS  (typographie seule, sans photo : voir DECISIONS.md)
   Quatre grandes lignes. Le nom de l'occasion en titrage, le texte a cote.
   ============================================================= */
.occasions { background: var(--cream-2); padding: var(--sp-8) 0 var(--sp-9); }
.occasions h2 { font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--sp-7); }
.occ { display: grid; gap: 0; }
.occ__item {
  position: relative; display: grid; gap: var(--sp-3);
  padding: var(--sp-6) 0; border-top: 1px solid var(--line);
}
.occ__item:last-child { border-bottom: 1px solid var(--line); }
/* Un trait vert se pose sur le filet gris, a l'arrivee de chaque entree. */
.occ__item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
  background: var(--feuille); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.2s var(--ease) calc(var(--retard, 0ms) + 200ms);
}
.occ__item.is-in::before { transform: scaleX(.12); }
.occ__item:hover::before { transform: scaleX(1); transition-delay: 0ms; }
.occ__item dt {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); line-height: 1.05;
  letter-spacing: -.02em;
  transition: transform .6s var(--ease), color .4s var(--ease);
}
.occ__item:hover dt { transform: translateX(.35em); color: var(--feuille); }
.occ__item dd { color: var(--ink-muted); max-width: 52ch; }
/* Le deuil reste sobre : pas de glissement, pas de vert. */
.occ__item--grave {
  border-top-color: var(--vanda);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--vanda);
}
.occ__item--grave::before { background: var(--vanda); }
.occ__item--grave dt, .occ__item--grave:hover dt { color: var(--vanda); transform: none; }
.occ__item--grave:hover::before { transform: scaleX(.12); }

/* =============================================================
   ATELIER  (bandeau d'enseigne pleine largeur)
   ============================================================= */
.band--atelier { padding: var(--sp-9) 0; }
.atelier {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: grid; gap: var(--sp-7);
}
.atelier__text h2 { font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--sp-5); }
.atelier__text p { max-width: 52ch; }
.atelier__link a {
  font-size: var(--t-small); letter-spacing: .04em; text-transform: uppercase;
  text-decoration-color: var(--vanda-lift); text-underline-offset: .4em;
}
.atelier__figure { margin: 0; }
.atelier__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; }
.atelier__figure figcaption { color: var(--on-dark-muted); border-top-color: var(--line-dark); }

/* =============================================================
   SERVICES  (bento : cinq services, cinq cases)
   La livraison le jour meme est la case maitresse, sur le violet de
   l'enseigne. Les autres alternent le creme et le mur.
   ============================================================= */
.services { padding: var(--sp-9) 0; }
.services h2 { font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--sp-7); }
.svc { display: grid; gap: var(--sp-3); }
.svc__item {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--sp-5); border: 1px solid var(--line); background: var(--cream);
  transition: border-color .4s var(--ease);
}
.svc__item--teinte { background: var(--cream-2); border-color: transparent; }
/* Halo : une lumiere suit le pointeur dans la case survolee (JS pose --mx/--my). */
.svc__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%),
              rgba(96, 118, 37, .13), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.svc__item:hover::after { opacity: 1; }
.svc__item:hover { border-color: var(--feuille); }
.svc__ico {
  width: 30px; height: 30px; margin-bottom: var(--sp-5);
  fill: none; stroke: var(--feuille); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Les pictogrammes se tracent au lieu d'apparaitre. Chaque forme porte
   pathLength="1", la longueur est donc normalisee quelle que soit sa taille. */
.js .svc__ico > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .svc__item.is-in .svc__ico > * {
  animation: tracer 1s var(--ease) var(--retard, 0ms) both;
}
.js .svc__item.is-in .svc__ico > *:nth-child(2) { animation-delay: calc(var(--retard, 0ms) + .16s); }
.js .svc__item.is-in .svc__ico > *:nth-child(3) { animation-delay: calc(var(--retard, 0ms) + .3s); }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.svc__item h3 { font-size: var(--t-h3); font-family: var(--sans); font-weight: 700; letter-spacing: 0; margin-bottom: var(--sp-1); }
.svc__item p { color: var(--ink-muted); font-size: .9375rem; margin: 0; max-width: 44ch; }

.svc__item--une { background: var(--vanda); border-color: var(--vanda); color: var(--cream); }
.svc__item--une:hover { border-color: var(--vanda); }
.svc__item--une::after {
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%),
              rgba(245, 241, 232, .14), transparent 70%);
}
.svc__item--une .svc__ico { stroke: var(--cream); width: 44px; height: 44px; }
.svc__item--une h3 {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); line-height: 1.02;
  margin: auto 0 var(--sp-3);
}
.svc__item--une p { color: var(--cream); opacity: .88; font-size: 1rem; }
.svc__tel {
  align-self: flex-start; margin-top: var(--sp-5);
  color: var(--cream); font-weight: 700; font-size: 1.0625rem;
  text-decoration-color: rgba(245, 241, 232, .5);
  font-variant-numeric: tabular-nums;
}
.svc__tel:hover { text-decoration-color: var(--cream); }

/* =============================================================
   AVIS
   ============================================================= */
.avis { background: var(--cream-2); padding: var(--sp-9) 0; }
.avis h2 { font-size: var(--t-h2); font-weight: 300; }
.avis__head { margin-bottom: var(--sp-7); }
.avis__note {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-5) 0 0;
}
.avis__score {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(4.5rem, 3rem + 5vw, 8rem); line-height: .9; letter-spacing: -.03em;
  color: var(--rose); font-variant-numeric: tabular-nums;
}
.avis__sur { font-size: var(--t-small); color: var(--ink-muted); }
.avis__count {
  font-size: var(--t-small); color: var(--ink-muted);
  padding-left: var(--sp-3); margin-left: var(--sp-1);
  border-left: 1px solid var(--line);
}
.avis__grid { display: grid; gap: var(--sp-6); }
.avis__item {
  position: relative; border-top: 1px solid var(--line); padding-top: var(--sp-5);
}
/* meme principe que les occasions : le filet gris recoit une amorce coloree,
   ici le fuchsia des pivoines, la couleur de la section */
.avis__item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 3.5rem; height: 2px;
  background: var(--rose); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .85s var(--ease) calc(var(--retard, 0ms) + 200ms);
}
.avis__item.is-in::before { transform: scaleX(1); }
.avis__item blockquote p {
  font-family: var(--serif); font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.625rem); line-height: 1.4;
  color: var(--ink-text); margin-bottom: var(--sp-3);
}
.avis__item figcaption {
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.avis__link { margin-top: var(--sp-7); }

/* =============================================================
   INFOS PRATIQUES
   ============================================================= */
.infos { padding: var(--sp-9) 0 var(--sp-10); }
.infos h2 { font-size: var(--t-h2); font-weight: 300; margin-bottom: var(--sp-6); }
.infos__h {
  font-family: var(--sans); font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.infos__grid { display: grid; gap: var(--sp-8); }
.infos__adr { font-style: normal; margin-bottom: var(--sp-5); }
.infos__adr strong { font-weight: 700; }
.infos__adr a { font-weight: 500; }
.infos__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.infos__state { margin-bottom: var(--sp-4); font-size: .9375rem; }
.infos__state b { font-weight: 700; }
.is-open-now b { color: var(--feuille); }
.is-closed-now b { color: var(--vanda); }

.hours { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hours th, .hours td { text-align: left; padding: var(--sp-3) 0; vertical-align: top; }
.hours th { font-weight: 400; color: var(--ink-muted); width: 8.5rem; }
.hours td { font-variant-numeric: tabular-nums; }
.hours tr { border-bottom: 1px solid var(--line); }
.hours tr:last-child { border-bottom: 0; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--ink-text); font-weight: 700; }
.hours tr.is-today th { position: relative; padding-left: var(--sp-4); }
.hours tr.is-today th::before {
  content: ""; position: absolute; left: 0; top: 1.35em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--vanda);
}
.infos__map { margin-top: var(--sp-5); }

/* =============================================================
   PIED DE PAGE
   ============================================================= */
.band--foot { padding: var(--sp-8) 0 0; margin-top: 0; overflow: hidden; }
.foot {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: grid; gap: var(--sp-7);
}
.foot__mark { height: 58px; width: auto; fill: var(--on-dark); }
.foot__base {
  font-family: var(--serif); font-style: italic; font-size: 1.125rem;
  color: var(--on-dark-muted); margin: var(--sp-4) 0 0;
}
.foot__h {
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted);
  margin-bottom: var(--sp-3);
}
.foot__col p { color: var(--on-dark-muted); font-size: .9375rem; line-height: 1.7; }
.foot__col a { color: var(--on-dark); text-decoration-color: var(--line-dark); }
.foot__col a:hover { text-decoration-color: var(--vanda-lift); }
.foot__fb { display: inline-flex; align-items: center; gap: .5em; }
.foot__fb .ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

.foot__legal {
  max-width: var(--wrap); margin: var(--sp-8) auto 0; padding: var(--sp-5) var(--pad) 0;
  border-top: 1px solid var(--line-dark);
  display: grid; gap: var(--sp-2);
}
.foot__legal p { font-size: .75rem; line-height: 1.6; color: #8B8C81; margin: 0; }
.foot__rm a { color: #8B8C81; text-decoration-color: #4A4D42; }
.foot__rm a:hover { color: var(--on-dark-muted); }

/* L'enseigne en tres grand, presque ton sur ton, coupee par le bas de page. */
.foot__geant {
  width: 100%; height: auto; margin-top: var(--sp-7);
  padding-inline: var(--pad); margin-bottom: -2.5%;
  /* le trace du logotype est en currentColor : c'est color qui le teinte */
  color: #33362D;
}

/* =============================================================
   BOUTON FLOTTANT (mobile)
   ============================================================= */
.fab {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-fab);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .95em 1.35em; border-radius: 999px;
  background: var(--vanda); color: var(--cream);
  font-size: .9375rem; font-weight: 500; line-height: 1; text-decoration: none;
  box-shadow: 0 6px 22px rgba(31, 33, 27, .34);
  animation: fab-in .45s var(--ease) both;
}
.fab .ico { width: 1.05em; height: 1.05em; fill: currentColor; }
.fab[hidden] { display: none; }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lbox {
  width: min(94vw, 900px); max-width: none; max-height: 94dvh;
  padding: 0; border: 0; border-top: 3px solid var(--fleur);
  border-radius: var(--rayon);
  background: var(--ink); color: var(--on-dark);
  margin: auto; overflow: visible;
}
/* La photo agrandie porte le filet de sa propre couleur : le JS recopie le
   --fleur de la vignette cliquee sur la boite de dialogue. */
.lbox[open] { animation: lbox-entre .4s var(--ease) both; }
@keyframes lbox-entre { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.lbox::backdrop { background: rgba(16, 17, 14, .94); }
.lbox[open]::backdrop { animation: voile .4s var(--ease) both; }
@keyframes voile { from { opacity: 0; } }
.lbox__fig { margin: 0; display: grid; border-radius: inherit; overflow: hidden; }
.lbox__fig img {
  width: 100%; max-height: 78dvh; object-fit: contain; background: var(--ink-2);
}
/* changement de photo dans la visionneuse : fondu enchaine */
.lbox__fig img.is-swap { animation: fondu .45s var(--ease) both; }
@keyframes fondu { from { opacity: 0; transform: scale(.985); } }
.lbox__fig figcaption {
  font-size: .875rem; line-height: 1.5; color: var(--on-dark-muted);
  padding: var(--sp-4) var(--sp-5);
}
.lbox__close, .lbox__nav {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  background: rgba(31, 33, 27, .78); border: 1px solid var(--line-dark);
  color: var(--on-dark);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lbox__close svg, .lbox__nav svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.lbox__close:hover, .lbox__nav:hover { background: var(--fleur); border-color: var(--fleur); }
.lbox__close { top: var(--sp-3); right: var(--sp-3); }
.lbox__nav { top: 50%; transform: translateY(-50%); }
.lbox__nav--prev { left: var(--sp-3); }
.lbox__nav--next { right: var(--sp-3); }

/* =============================================================
   REVELATION AU DEFILEMENT
   ============================================================= */
/* n'est masque que si JavaScript est actif : sans JS, tout reste visible */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease) var(--retard, 0ms),
              transform .8s var(--ease) var(--retard, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* =============================================================
   ANIMATIONS LIEES AU DEFILEMENT
   Ecrites en CSS (animation-timeline), donc calculees hors du fil
   principal. La ou elles ne sont pas prises en charge, rien ne bouge
   et rien ne manque. Desactivees si l'on demande moins de mouvement.
   ============================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Hero : en sortant de l'ecran, le bouquet s'approche et le sceau tourne. */
    .hero__frame picture {
      animation: approche linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    .sceau__couronne {
      animation: tourne linear both;
      animation-timeline: scroll(root block);
    }


    /* Les grandes photos de section s'ouvrent en entrant, puis derivent. */
    .histoire__media picture,
    .atelier__figure picture {
      animation: ouvre linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .histoire__media img,
    .atelier__figure img {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    /* Les mots de la phrase s'allument a mesure qu'ils montent dans l'ecran
       (le JS les isole dans des <span class="mot">). */
    .mot {
      animation: allume linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 42%;
    }

    /* L'enseigne geante monte en arrivant en bas de page. */
    .foot__geant {
      animation: leve linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes approche { to { transform: scale(1.12) translateY(5%); } }
@keyframes tourne   { to { transform: rotate(540deg); } }
@keyframes ouvre    { from { clip-path: inset(9% round var(--rayon)); } to { clip-path: inset(0 round var(--rayon)); } }
@keyframes derive   {
  from { transform: translateY(-4%) scale(1.1); }
  to   { transform: translateY(4%)  scale(1.1); }
}
@keyframes allume   { from { color: rgba(34, 36, 30, .2); } to { color: var(--ink-text); } }
@keyframes leve     { from { transform: translateY(45%); } to { transform: none; } }

/* =============================================================
   PALIERS
   ============================================================= */
@media (min-width: 640px) {
  .avis__grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .svc { grid-template-columns: 1fr 1fr; }
  .svc__item--une { grid-column: 1 / -1; min-height: 18rem; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__legal { grid-template-columns: 1fr auto; align-items: baseline; }
  .foot__rm { text-align: right; }
  .sceau { width: 128px; height: 128px; top: -64px; }
}

@media (min-width: 900px) {
  :root { --head-h: 86px; }
  .brand__mark { height: 54px; }
  [data-head].is-stuck .brand__mark { height: 42px; }

  .burger, .head__telmini { display: none; }
  .nav {
    display: flex; gap: var(--sp-6); align-items: center;
    position: static; padding: 0; background: none; border: 0;
  }
  .nav a {
    position: relative;
    font-size: .9375rem; padding: .35em 0; border: 0;
    text-decoration: none; color: var(--on-dark-muted);
    transition: color .25s var(--ease);
  }
  /* Le filet de la section en cours glisse sous le lien. */
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--vanda-lift);
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform .5s var(--ease);
  }
  .nav a:hover, .nav a[aria-current] { color: var(--on-dark); }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }
  .head__tel { display: inline-flex; margin-left: var(--sp-4); }

  /* Hero : deux moities, la photo touche le bord droit de l'ecran.
     Le pourcentage du padding se lit sur la largeur de la cellule, soit la
     moitie de l'ecran : 100% - wrap/2 + pad aligne le texte sur la colonne. */
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch; padding: 0;
    min-height: calc(100dvh - var(--head-h));
  }
  .hero__text {
    align-self: center;
    padding: var(--sp-8) var(--sp-8) var(--sp-8) max(var(--pad), calc(100% - var(--wrap) / 2 + var(--pad)));
  }
  .hero__figure { margin: 0; display: flex; flex-direction: column; }
  .hero__frame { flex: 1; aspect-ratio: auto; min-height: 30rem; margin: var(--sp-5) var(--sp-5) 0 0; }
  .hero__figure figcaption { margin: 0; padding: var(--sp-3) var(--pad) var(--sp-4) 0; margin-left: var(--sp-6); }
  .hero__puce { left: auto; right: var(--sp-5); bottom: var(--sp-5); font-size: .875rem; }
  .hero__figure figcaption::before { left: 0; right: var(--pad); }
  .sceau { width: clamp(120px, 10vw, 160px); height: auto; top: auto; bottom: 18%; right: auto; left: 0; translate: -50% 0; }

  .histoire { padding-block: var(--sp-10); }
  .histoire__inner {
    grid-template-columns: .82fr 1fr;
    gap: var(--sp-9);
    align-items: center;
  }
  .histoire__media img { max-height: 76dvh; }

  .galerie { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .galerie__cell--une { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .galerie__cell--une .shot img { aspect-ratio: auto; }

  .occ__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: baseline; gap: var(--sp-7);
    padding-block: var(--sp-7);
  }
  .occ__item--grave { padding-left: var(--sp-6); }

  .atelier { grid-template-columns: 1fr .82fr; gap: var(--sp-9); align-items: center; }
  .atelier__figure img { max-height: 72dvh; }

  .infos__grid { grid-template-columns: 1fr .85fr; gap: var(--sp-9); }
  .foot { grid-template-columns: 1.2fr 1fr 1fr; }
  .foot__brand { grid-column: auto; }
  .fab { display: none; }
}

@media (min-width: 1000px) {
  /* Bento : la case maitresse sur deux colonnes et deux rangs. */
  .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); }
  .svc__item--une { grid-column: 1 / span 2; grid-row: span 2; min-height: 0; padding: var(--sp-6); }
}

@media (min-width: 1200px) {
  .avis__grid { column-gap: var(--sp-8); }
}

/* pointeur grossier : pas d'effet de survol qui resterait colle */
@media (hover: none) {
  .shot:hover img { transform: none; }
  .occ__item:hover dt { transform: none; color: inherit; }
  .occ__item:hover::before { transform: scaleX(.12); }
  .svc__item::after { display: none; }
}

/* =============================================================
   MOUVEMENT REDUIT
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* etats finaux poses directement, sans passer par les animations */
  .jauge { display: none; }
  .ligne > *, .js .reveal .ligne > * { transform: none; }
  .js .galerie__cell .shot picture { clip-path: none; transform: none; }
  .js .svc__ico > * { stroke-dashoffset: 0; }
  .hero__frame img { transform: none; filter: none; }
  .is-open-now b::before { animation: none; }
  .btn { transform: none; }
  figcaption::before { transform: scaleX(1) !important; }
}