/* Cafe Fleuriste Hanaya · « La fleur versée ». Table crème, café, un seul accent fuchsia. */
:root {
  --table: #efe4d0;
  --bol: #f9f4ea;
  --cafe: #1e100a;
  --lait: #f7efdf;
  --caramel: #9e6535;
  --ombre: rgb(30 16 10 / .22);

  --fond: var(--table);
  --surface: var(--bol);
  --texte: var(--cafe);
  --texte-doux: #55402f;
  --accent: #d81b69;
  --accent-texte: #fff;

  --titre: "Gloock", Georgia, serif;
  --corps: "Hanken Grotesk", system-ui, sans-serif;
  --t-corps: 1.0625rem;
  --marge: 20px;

  --nav-hauteur: 58px;
  --nav-fond: var(--cafe);
  --nav-texte: var(--lait);
  --nav-bord: rgb(247 239 223 / .22);
  --nav-actif: rgb(247 239 223 / .16);
  --carte-filet: rgb(30 16 10 / .16);

  --filigrane-fond: var(--cafe);
  --filigrane-texte: var(--lait);
  --filigrane-bord: rgb(247 239 223 / .3);
  --filigrane-point: var(--accent);
}

body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: var(--t-corps); line-height: 1.55; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; margin: 0; }
h2 { font-size: clamp(2.1rem, 8.4vw, 3.6rem); line-height: 1.06; text-wrap: balance; }
.planche-svg { position: absolute; }

/* Parties sombres : mêmes tokens, autres valeurs. La fin de la plongée y arrive sans raccord. */
.sombre {
  --fond: var(--cafe);
  --surface: #2b1810;
  --texte: var(--lait);
  --texte-doux: #d3bfa6;
  --carte-filet: rgb(247 239 223 / .18);
  --nav-bord: rgb(247 239 223 / .4);
  background: var(--fond);
  color: var(--texte);
}
.cadre { max-width: 1080px; margin: 0 auto; padding: clamp(3.5rem, 11vw, 6.5rem) var(--marge); }
.surtitre { margin: 0 0 .5rem; font-size: .84rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-doux); }

/* ---- Premier écran ---------------------------------------------------- */
.accueil { background: var(--table); }
.scene__collant { background: var(--table); }
.accueil__texte { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .3s ease, transform .3s ease; }
.accueil__libre { position: relative; flex: 1 1 auto; min-height: 0; margin-top: var(--nav-hauteur); }
.accueil__bas { position: relative; padding: .5rem var(--marge) 74px; }
.nom { font-size: clamp(2.7rem, 12.2vw, 5.6rem); line-height: 1; }
.nom span { display: block; }
.accueil__phrase { margin: .6rem 0 1rem; max-width: 34ch; color: var(--texte-doux); line-height: 1.4; }
.accueil .guide { flex-wrap: nowrap; }
.accueil .guide__bouton { flex: 1 1 0; width: auto; min-width: 0; padding-inline: .5rem; text-align: center; white-space: nowrap; }

/* La scène est passée quand le texte s'en va : plus rien de focalisable. */
.socle-actif .scene.est-partie .accueil__texte { opacity: 0; transform: translateY(-16px); visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }

.temps {
  display: none;
  font-family: var(--titre); font-size: clamp(1.6rem, 6.6vw, 2.6rem); line-height: 1.12;
  margin: 0; padding: 1rem 1.2rem;
  background: var(--cafe); color: var(--lait);
}
.socle-actif .scene .temps {
  display: block; position: absolute; left: var(--marge); right: var(--marge); bottom: 142px; max-width: 26ch;
  transform: translateY(16px); visibility: hidden; transition: transform .2s ease;
}
.socle-actif .scene.est-plaque .temps { transform: none; visibility: visible; }
/* La scène se libère : plus de toile, seulement le café de la partie suivante. */
.socle-actif .scene.est-sortie .scene__collant { background: var(--cafe); }
.socle-actif .scene.est-sortie .toile { visibility: hidden; }

.accueil__passer { display: none; }
.socle-actif .scene .accueil__passer {
  display: flex; position: absolute; left: var(--marge); bottom: 72px; width: auto; margin: 0;
  background: var(--cafe); color: var(--lait); border-color: var(--lait);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s;
}
.socle-actif .scene.est-partie:not(.est-finie) .accueil__passer { opacity: 1; visibility: visible; transition: opacity .25s ease; }

/* Repli : même tasse, même place que dans la toile. */
.repli-webgl { position: absolute; left: 62%; top: 46%; width: 155.5%; height: 145.2%; transform: translate(-50%, -50%); }
.repli-anse { fill: var(--bol); }
.repli-bol { fill: var(--bol); }
.repli-cafe { fill: var(--cafe); }
.repli-tige { fill: none; stroke: var(--lait); stroke-width: 2.5; stroke-linecap: round; }
.repli-fleur { fill: var(--lait); stroke: var(--caramel); stroke-width: 1.4; }
.coeur-rosette { fill: var(--caramel); stroke: none; }
/* La toile verse la fleur elle-même : le repli ne la montre que si la toile renonce. */
.socle-actif .scene:not([data-repli]) .repli-fleur { display: none; }

/* Sans WebGL ou appareil trop lent : même scène, la tasse dessinée se rapproche. */
.scene[data-repli] .repli-webgl { transform: translate(-50%, -50%) scale(calc(1 + var(--p, 0) * var(--p, 0) * 8)); }
.scene[data-repli].est-finie .repli-webgl { visibility: hidden; }
.scene[data-repli].est-finie .scene__collant { background: var(--cafe); }

/* Sans JavaScript ou en mouvement réduit : une page normale. */
html:not(.socle-actif) .scene { height: auto; }
html:not(.socle-actif) .scene__collant { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
html:not(.socle-actif) .accueil__texte { position: relative; flex: 1 1 auto; min-height: 92svh; }
html:not(.socle-actif) .temps { display: block; }

/* ---- Listes à prix fictifs -------------------------------------------- */
.entete { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; }
.exemple { display: flex; gap: .65rem; align-items: center; margin: 1.5rem 0; padding: .75rem .9rem; border: 1px solid var(--carte-filet); background: var(--surface); font-weight: 600; font-size: .96rem; line-height: 1.35; }
.rosette { flex: none; width: 34px; height: 34px; fill: var(--accent); stroke: var(--fond); stroke-width: 3; }
.carte-resto__liste { list-style: none; margin: 0; padding: 0; }
.carte-resto__liste li { position: relative; padding-right: 4.8rem; }
.carte-resto__liste strong { font-family: var(--titre); font-weight: 400; font-size: 1.28rem; }
.prix { position: absolute; top: 1rem; right: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.carte-resto__categorie { font-size: 1.5rem; margin: 1.4rem 0 .3rem; }
.carte-resto__onglets button { min-height: 44px; }

/* ---- Photos posées comme des tasses vues de dessus -------------------- */
.tasses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2rem 0 .5rem; }
.tasse { position: relative; margin: 0; }
.tasse img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 7px solid var(--bol); box-shadow: 4px 7px 14px var(--ombre); box-sizing: border-box; }
.tasse figcaption { margin-top: .5rem; font-size: .76rem; text-align: center; color: var(--texte-doux); line-height: 1.25; }
.tasse--petite { width: 112px; }
.tasses .tasse:first-child { grid-column: 1 / -1; width: 72%; justify-self: center; }
.tasses .tasse:not(:first-child) { grid-column: span 1; }
.tasses { grid-template-columns: 1fr 1fr; }

/* ---- Offrir les deux ---------------------------------------------------- */
.trois { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.trois li { padding-top: 1rem; border-top: 2px solid var(--accent); }
.trois h3 { font-size: 1.45rem; line-height: 1.15; }
.trois p { margin: .4rem 0 0; color: var(--texte-doux); }

/* ---- Sainte-Marie : la fleur se verse une fois à l'arrivée -------------- */
.rosette-versee { display: block; width: min(58vw, 220px); height: auto; margin-bottom: 1.6rem; stroke: var(--caramel); stroke-width: 1.4; fill: var(--lait); }
.rosette-versee .disque { fill: var(--cafe); stroke: var(--bol); stroke-width: 4; }
.rosette-versee .anneau { transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), fill .9s ease; transition-delay: calc(var(--i) * .22s), 1.5s; }
.rosette-versee .coeur-rosette { transition: fill .9s ease 1.5s; }
.socle-actif .rosette-versee .anneau { transform: scale(.02); }
.socle-actif .rosette-versee.versee .anneau { transform: none; fill: var(--accent); }
.socle-actif .rosette-versee.versee { stroke: var(--cafe); }
.socle-actif .rosette-versee.versee .coeur-rosette { fill: var(--cafe); }
.infos__texte { margin: .8rem 0 0; color: var(--texte-doux); max-width: 34ch; }
.infos__grille { display: grid; gap: 1.8rem; align-items: center; }
.plan { display: block; width: 100%; height: 340px; border: 0; background: var(--surface); }

/* ---- Pied de page ------------------------------------------------------ */
.pied { background: var(--cafe); color: var(--lait); --texte: var(--lait); --nav-bord: rgb(247 239 223 / .4); }
.pied .cadre { padding-bottom: 104px; }
.pied__nom { margin: 0 0 .6rem; font-family: var(--titre); font-size: 1.7rem; line-height: 1.1; }
.pied p { max-width: 60ch; }
.ns { white-space: nowrap; }

.infos__suite { margin-top: 0; }

/* Le nom reste lisible dans la barre au téléphone, quand la place le permet. */
@media (min-width: 360px) and (max-width: 760px) {
  .navigation__nom { display: inline-flex; font-family: var(--titre); font-weight: 400; font-size: 1.02rem; white-space: nowrap; }
  .navigation__liens { display: none; }
}

/* ---- Bureau ------------------------------------------------------------ */
@media (min-width: 900px) {
  :root { --marge: 40px; }
  .accueil__texte { flex-direction: row-reverse; }
  .accueil__libre { flex: 1 1 56%; }
  .accueil__bas { flex: 1 1 44%; align-self: center; padding: var(--nav-hauteur) 0 0 var(--marge); }
  .accueil .guide { max-width: 26rem; }
  .temps, .socle-actif .scene .temps { bottom: 150px; }
  .tasses { grid-template-columns: repeat(3, 1fr); }
  .tasses .tasse:first-child { grid-column: auto; width: auto; }
  .trois { grid-template-columns: repeat(3, 1fr); }
  .carte-resto__liste { column-gap: 3rem; }
  .fleurs .carte-resto__liste { display: grid; grid-template-columns: 1fr 1fr; }
  .infos__grille { grid-template-columns: 1fr 1.2fr; }
  .plan { height: 420px; }
  .infos__suite { grid-column: 1 / -1; justify-self: start; }
  .tasse--petite { width: 160px; }
}

/* Repli sans WebGL : la tasse dessinée reste à l'écran pendant toute la scène et se rapproche ; seul le texte s'en va. */
.socle-actif .scene[data-repli].est-partie:not(.est-finie) .accueil__texte { opacity: 1; visibility: visible; transform: none; }
.socle-actif .scene[data-repli].est-partie .accueil__bas { opacity: 0; visibility: hidden; }

/* Téléphone couché : texte sur un fond plein à gauche, au-dessus du filigrane ; la tasse reste à droite. */
@media (max-height: 500px) and (orientation: landscape) {
  .accueil__texte { justify-content: flex-start; }
  .accueil__libre { position: absolute; inset: var(--nav-hauteur) 0 0 50%; margin: 0; overflow: hidden; }
  .accueil__bas { width: 50%; min-height: 100%; padding: calc(var(--nav-hauteur) + .4rem) var(--marge) 56px; background: var(--table); }
  .nom { font-size: 1.9rem; }
  .nom span { display: inline; }
  .accueil__phrase { margin: .3rem 0 .5rem; font-size: .85rem; }
  .accueil .guide__bouton { min-height: 44px; padding-block: .3rem; font-size: .85rem; }
}
@media (max-height: 340px) and (orientation: landscape) {
  .accueil__phrase { display: none; }
}