/* =============================================================
   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-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(1.875rem, 1.5rem + 1.7vw, 3rem);
  --t-h1:     clamp(2.75rem, 1.9rem + 4vw, 5rem);

  /* --- 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;

  --ease: cubic-bezier(.16, 1, .3, 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: hidden;
  -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; }
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 { 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); }

/* ------------------------------------------------------------ boutons */
.btn {
  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;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }

.btn--solid { background: var(--vanda); color: var(--cream); }
.btn--solid:hover { background: #4A3166; }

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

.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--line-dark); }
.btn--ghost:hover { background: var(--on-dark); 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);
}
.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
   ============================================================= */
.hero {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--sp-7) var(--pad) var(--sp-8);
}
.hero__title {
  font-size: var(--t-h1); font-weight: 300; line-height: 1.02;
  letter-spacing: -.025em; margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: italic; font-weight: 300; color: var(--vanda);
  line-height: 1.12; display: inline-block; padding-bottom: .06em;
}
.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; }

.hero__figure { margin: 0; }
.hero__figure picture { display: block; overflow: hidden; }
.hero__figure img {
  width: 100%; aspect-ratio: 3 / 4; 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. */
.js .hero__figure img {
  animation: eclore 1.6s var(--ease) both;
}
@keyframes eclore {
  from { transform: scale(1.07); filter: saturate(.78); }
  to   { transform: scale(1);    filter: saturate(1); }
}

/* Legendes : le filet n'est plus gris, il 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,
.infos__shop figcaption,
.mosaic 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,
.infos__shop figcaption::before,
.mosaic 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);
}
.js .reveal:not(.is-in) figcaption::before { transform: scaleX(0); }
.atelier__figure figcaption::before { opacity: .85; }

/* =============================================================
   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 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-5);
}
.histoire__text p { max-width: 60ch; }
.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  (mosaique en colonnes + lightbox)
   ============================================================= */
.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); }

/* La galerie deborde legerement de la colonne de texte : sur grand ecran les
   photos sont l'element le plus large de la page, ce sont elles le sujet. */
.mosaic { columns: 1; column-gap: var(--sp-6); max-width: 1340px; }
.mosaic__cell { break-inside: avoid; margin-bottom: var(--sp-7); }
.mosaic figure { margin: 0; }
.shot {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden;
}
.shot picture { display: block; }
.shot img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .55s var(--ease), filter .55s var(--ease);
}
.mosaic__cell--tall .shot img { aspect-ratio: 3 / 4.4; }
.shot:hover img { transform: scale(1.04); filter: saturate(1.08); }
.shot:active img { transform: scale(1.015); }

/* La photo se developpe : le voile se leve du bas vers le haut pendant que le
   cadrage se resserre. C'est le seul mouvement appuye de la page, et il est
   reserve aux fleurs. Le decalage d'une vignette a l'autre est pose en JS. */
.js .mosaic__cell .shot picture { clip-path: inset(0 0 100% 0); }
.js .mosaic__cell.is-in .shot picture {
  animation: developpe 1.15s var(--ease) var(--retard, 0ms) both;
}
@keyframes developpe {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.09); }
  to   { clip-path: inset(0 0 0 0);    transform: scale(1); }
}

/* Au survol, la legende prend la couleur des fleurs qu'elle decrit. */
.mosaic__cell:hover figcaption,
.shot:focus-visible ~ figcaption { color: var(--fleur); }
.mosaic__cell:hover figcaption::before,
.shot:focus-visible ~ figcaption::before { height: 2px; }

/* =============================================================
   OCCASIONS  (typographie seule, sans photo : voir DECISIONS.md)
   ============================================================= */
.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; padding: var(--sp-6) 0; border-top: 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: 3.5rem; height: 2px;
  background: var(--feuille); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .85s var(--ease) calc(var(--retard, 0ms) + 200ms);
}
.occ__item.is-in::before { transform: scaleX(1); }
.occ__item dt {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.occ__item dd { color: var(--ink-muted); max-width: 58ch; }
.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 { color: var(--vanda); }

/* =============================================================
   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
   ============================================================= */
.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: 0; }
.svc__item { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.svc__ico {
  width: 26px; height: 26px; margin-bottom: var(--sp-3);
  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; }

/* =============================================================
   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);
  margin: var(--sp-4) 0 0;
}
.avis__score {
  font-family: var(--serif); font-size: 2.75rem; line-height: 1;
  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: 1.3125rem; line-height: 1.45;
  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__shop { margin-bottom: var(--sp-6); max-width: 420px; }
.infos__shop img { width: 100%; }
.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 var(--sp-5); margin-top: 0; }
.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); }

/* =============================================================
   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 .35s 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(12px); } }

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lbox {
  width: min(94vw, 900px); max-width: none; max-height: 94dvh;
  padding: 0; border: 0; border-top: 3px solid var(--fleur);
  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 .3s var(--ease) both; }
@keyframes lbox-entre { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.lbox::backdrop { background: rgba(16, 17, 14, .94); }
.lbox__fig { margin: 0; display: grid; }
.lbox__fig img {
  width: 100%; max-height: 78dvh; object-fit: contain; background: var(--ink-2);
}
.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);
}
.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(14px);
  transition: opacity .6s var(--ease) var(--retard, 0ms),
              transform .6s var(--ease) var(--retard, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* =============================================================
   DERIVE AU DEFILEMENT
   Les deux grandes photos de section bougent legerement dans leur cadre
   pendant qu'on les depasse. Anime par le defilement, hors du fil principal.
   Non pris en charge : la photo reste simplement immobile.
   ============================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .histoire__media picture,
    .atelier__figure picture { display: block; overflow: hidden; }
    .histoire__media img,
    .atelier__figure img {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes derive {
  from { transform: translateY(-3%) scale(1.08); }
  to   { transform: translateY(3%)  scale(1.08); }
}

/* =============================================================
   PALIERS
   ============================================================= */
@media (min-width: 640px) {
  .mosaic { columns: 2; }
  .avis__grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .svc { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .svc__item:nth-child(5) { grid-column: 1 / -1; }
  .occ { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .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; }
}

@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 {
    font-size: .9375rem; padding: 0; border: 0;
    text-decoration: none; color: var(--on-dark-muted);
    transition: color .2s var(--ease);
  }
  .nav a:hover { color: var(--on-dark); }
  .head__tel { display: inline-flex; margin-left: var(--sp-4); }

  .hero {
    display: grid; grid-template-columns: 1fr .95fr;
    gap: var(--sp-8); align-items: center;
    padding-block: var(--sp-8) var(--sp-9);
    min-height: calc(100dvh - var(--head-h));
  }
  .hero__text { padding-bottom: var(--sp-4); }
  .hero__figure img { max-height: 74dvh; aspect-ratio: 3 / 4; }

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

  .mosaic { columns: 3; }
  .atelier { grid-template-columns: 1fr .78fr; gap: var(--sp-9); align-items: center; }
  .atelier__figure img { max-height: 60dvh; }
  .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: 1200px) {
  .avis__grid { column-gap: var(--sp-8); }
}

/* pointeur fin : etats de survol seulement quand ils ont un sens */
@media (hover: none) {
  .shot:hover img { transform: 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; }
  .js .mosaic__cell .shot picture { clip-path: none; transform: none; }
  .js .svc__ico > * { stroke-dashoffset: 0; }
  .js .hero__figure img { transform: none; filter: none; }
  figcaption::before { transform: scaleX(1) !important; }
}