/* Cafe Fleuriste Hanaya · direction « Le papier ouvert ».
   Trois matières : le kraft d'emballage, le papier de soie, le feuillage.
   Un seul accent : le fuchsia du bolduc. */

:root {
  /* Matières */
  --kraft: #cdae84;
  --kraft-fonce: #b8966a;
  --kraft-clair: #e6d3b3;
  --soie: #f6f2ea;
  --feuillage: #12322a;
  --feuillage-clair: #2b5a4b;
  --encre: #18261f;
  --encre-douce: #33382a;
  --feuille-pale: #d3ddd2;
  --fuchsia: #b3107a;
  --blanc: #ffffff;
  --ombre: rgb(24 38 31 / .34);
  --ombre-legere: rgb(24 38 31 / .14);
  --lumiere: rgb(255 248 232 / .3);

  /* Tokens du socle */
  --fond: var(--kraft);
  --surface: var(--soie);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --accent: var(--fuchsia);
  --accent-texte: var(--blanc);
  --titre: 'Young Serif', Georgia, serif;
  --corps: 'Figtree', system-ui, sans-serif;
  --t-corps: 1.0625rem;
  --marge: clamp(1.25rem, 5vw, 4.5rem);

  --nav-hauteur: 3.75rem;
  --nav-fond: var(--feuillage);
  --nav-texte: var(--soie);
  --nav-bord: var(--feuillage);
  --nav-actif: var(--feuillage-clair);
  --carte-filet: var(--ombre-legere);

  --filigrane-fond: var(--soie);
  --filigrane-texte: var(--encre);
  --filigrane-bord: var(--encre);
  --filigrane-point: var(--fuchsia);

  /* Hauteur du pli au sommet de chaque partie, et du coin replié */
  --pli: clamp(38px, 9vw, 92px);
  --coin: 1.75rem;
  --fibre: url("../images/kraft.png");
}

body { background: var(--kraft); 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; }
a, button { cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* --------------------------------------------------------------------- */
/* Le bolduc : un seul dessin, en masque, coloré par l'accent.            */
/* --------------------------------------------------------------------- */
.bolduc {
  display: block;
  aspect-ratio: 150 / 360;
  background: var(--accent);
  -webkit-mask: url("../images/bolduc.svg") center / contain no-repeat;
  mask: url("../images/bolduc.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------- */
/* Premier écran : le bouquet emballé, qui s'ouvre au défilement.         */
/* --------------------------------------------------------------------- */
.depart {
  /* --r : le ruban tombe d'abord. --t : le texte part, sur 10 % de la scène.
     --o : le papier s'ouvre. */
  --r: clamp(0, calc((var(--p, 0) - .02) / .3), 1);
  --t: clamp(0, calc((var(--p, 0) - .12) / .1), 1);
  --o: clamp(0, calc((var(--p, 0) - .2) / .6), 1);
  background: var(--feuillage);
}
.depart__collant { background: var(--feuillage); }

.depart__photo { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.depart__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 86% 0;
  transform: scale(calc(1.14 - .14 * var(--o)));
  transform-origin: 80% 10%;
}
.depart__photo figcaption {
  position: absolute; top: calc(var(--nav-hauteur) + .6rem); right: .6rem;
  padding: .2rem .6rem; border-radius: .3rem;
  background: var(--soie); color: var(--encre); font-size: .78rem; font-weight: 600;
}

/* Les deux pans : le papier est découpé, l'ombre vient du parent. */
.pan {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--nav-hauteur) + 13svh);
  filter: drop-shadow(0 -5px 12px var(--ombre));
  will-change: transform;
}
.pan__papier { position: absolute; inset: 0; background-color: var(--kraft); background-image: var(--fibre); }
.pan--arriere {
  transform-origin: 100% 100%;
  transform: translate(calc(var(--o) * 86%), calc(var(--o) * 10%)) rotate(calc(var(--o) * 13deg));
}
.pan--arriere .pan__papier {
  background-color: var(--kraft-fonce);
  clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%);
}
.pan--avant {
  transform-origin: 0 100%;
  transform: translate(calc(var(--o) * -88%), calc(var(--o) * 10%)) rotate(calc(var(--o) * -13deg));
}
.pan--avant .pan__papier { clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%); }
/* Le revers du papier, sur le bord replié, et le pli qui descend vers la main. */
.pan--avant .pan__papier::before {
  content: ""; position: absolute; inset: 0;
  background: var(--kraft-clair);
  clip-path: polygon(0 0, 100% 15%, 100% 18%, 0 4.5%);
}
.pan--avant .pan__papier::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 58%, var(--ombre-legere) 61%, var(--lumiere) 61.6%, transparent 66%);
}

/* Le bolduc pend du haut du papier, le long du bord droit. */
.depart__ruban {
  position: absolute; z-index: 2;
  right: .1rem; top: calc(var(--nav-hauteur) + 13svh + 3%);
  width: 6.2rem;
  transform-origin: 50% 0;
  opacity: calc(1 - var(--r));
  transform: translate(calc(var(--r) * 22vw), calc(var(--r) * 70svh)) rotate(calc(var(--r) * 28deg));
}

.depart__texte {
  position: absolute; z-index: 3; left: var(--marge); right: var(--marge);
  bottom: calc(3.9rem + env(safe-area-inset-bottom));
  opacity: calc(1 - var(--t));
  transform: translateY(calc(var(--t) * -28px));
}
.depart__surtitre {
  display: inline-block; margin: 0 0 .55rem; padding: .15rem .6rem;
  background: var(--encre); color: var(--soie);
  font-size: .86rem; font-weight: 700; letter-spacing: .03em;
}
.depart__titre { margin: 0 0 .7rem; font-size: clamp(3rem, 15.2vw, 7rem); line-height: .96; color: var(--encre); }
.depart__titre span { display: block; }
.depart__phrase { margin: 0 0 1.05rem; max-width: 19em; font-size: 1.08rem; line-height: 1.35; font-weight: 500; color: var(--encre); }

.depart__suite {
  position: absolute; z-index: 3; left: var(--marge); right: var(--marge);
  bottom: calc(var(--pli) + .9rem); margin: 0; width: auto;
  background: var(--soie); color: var(--encre); border-color: var(--encre);
}

/* --------------------------------------------------------------------- */
/* Les parties : du papier posé sur du papier, avec un pli au sommet.     */
/* --------------------------------------------------------------------- */
.papier { position: relative; z-index: 1; padding: clamp(3rem, 8vw, 6.5rem) var(--marge) clamp(3rem, 7vw, 5.5rem); }
.papier--soie { background-color: var(--soie); --surtitre: var(--fuchsia); }
.papier--kraft { background-color: var(--kraft); background-image: var(--fibre); --surtitre: var(--encre); }
.papier--feuillage {
  background-color: var(--feuillage); color: var(--soie);
  --texte: var(--soie); --texte-doux: var(--feuille-pale); --surtitre: var(--kraft-clair);
}
.pli-haut::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--pli);
  background: inherit;
  clip-path: polygon(0 34%, 36% 100%, 100% 0, 100% 100%, 0 100%);
}

.papier h2 { margin: 0 0 1.1rem; max-width: 15em; font-size: clamp(2.2rem, 9.4vw, 4.4rem); line-height: 1.05; }
.surtitre { margin: 0 0 .6rem; color: var(--surtitre); font-size: .92rem; font-weight: 700; letter-spacing: .02em; }

/* Le coin replié, sur toutes les cartes : un revers de kraft en haut à droite. */
.coin-plie {
  --texte: var(--encre); --texte-doux: var(--encre-douce);
  position: relative; padding: 1.25rem 1.25rem 1.3rem;
  background-color: var(--kraft); background-image: var(--fibre); color: var(--encre);
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.coin-plie::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--coin); height: var(--coin);
  background: linear-gradient(to bottom left, transparent 50%, var(--kraft-clair) 50%);
  box-shadow: -2px 2px 5px var(--ombre-legere);
}
.coin-plie h3 { margin: 0 0 .35rem; padding-right: 1.5rem; font-size: 1.5rem; line-height: 1.15; }
.coin-plie p { margin: 0; line-height: 1.45; }

/* Présentation */
.lieu { display: grid; gap: 1.5rem; }
.lieu__texte p:not(.surtitre) { margin: 0 0 .9rem; max-width: 36em; }
.lieu__photo, .galerie__case { margin: 0; }
.lieu__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 30% 55%; }
figcaption { margin-top: .4rem; font-size: .84rem; color: var(--texte-doux); }
.lieu__cotes { display: grid; gap: .9rem; }

/* Carte d'exemple */
.carte__tete { margin-bottom: 1.2rem; }
.mention {
  display: flex; align-items: center; gap: .7rem; margin: 0; padding: .6rem .85rem;
  background: var(--soie); color: var(--encre); font-weight: 700; line-height: 1.3; max-width: 40em;
}
.mention__ruban { flex: none; width: 1.5rem; }
.carte-resto .carte-resto__onglets { margin-bottom: 1rem; }
.carte-resto .carte-resto__panneau {
  padding: .4rem 1.1rem .6rem; background: var(--soie);
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
/* Le coin replié coupe un contour extérieur : au clavier, le contour passe à l'intérieur. */
.carte-resto__panneau:focus-visible { outline-offset: -5px; }
.carte-resto__liste strong { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.carte-resto__liste em { flex: none; font-family: var(--titre); font-style: normal; font-weight: 400; }
.carte-resto__liste li:last-child { border-bottom: 0; }

/* Occasions */
.occasions { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-top: 1.5rem; }

/* Photos : chaque image dépasse d'une pochette de kraft, coin bas gauche. */
.galerie { display: grid; gap: 1.1rem .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.3rem; }
.galerie__case--large { grid-column: 1 / -1; }
.galerie__ouvrir { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; overflow: hidden; }
.galerie__ouvrir img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
.galerie__case--large img { aspect-ratio: 3 / 2; object-position: 50% 100%; }
.galerie__ouvrir:hover img { transform: scale(1.03); }
.galerie__ouvrir::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 34%;
  background-color: var(--kraft); background-image: var(--fibre);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.vue {
  /* display: none explicite : un navigateur sans popover afficherait sinon ces vues par-dessus la page. */
  display: none; position: fixed; inset: 0; width: 100%; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 1rem;
  border: 0; background: var(--feuillage); color: var(--soie);
}
.vue:popover-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; }
.vue img { max-width: 100%; max-height: 74svh; width: auto; height: auto; object-fit: contain; }
.vue p { margin: 0; font-size: .9rem; }
.vue button {
  min-height: 48px; padding: .6rem 1.6rem; border-radius: .6rem; border: 2px solid var(--soie);
  background: transparent; color: var(--soie); font: inherit; font-weight: 600;
}

/* Sainte-Marie */
.infos__texte { margin: 0 0 1.2rem; max-width: 34em; }
.infos__plan { padding: .6rem; background-color: var(--soie); background-image: none; }
.infos__plan iframe { display: block; width: 100%; height: clamp(280px, 60svh, 480px); border: 0; }

/* Pied de page : la phrase qui rappelle ce qu'est cette page. */
.pied {
  position: relative; z-index: 1; padding: 2.4rem var(--marge) 5.4rem;
  background: var(--feuillage); color: var(--soie);
}
.pied p { margin: 0 0 .5rem; max-width: 42em; }
.pied__petit { font-size: .88rem; color: var(--feuille-pale); }
.pied__ruban { width: 2.6rem; margin-bottom: .8rem; }

/* --------------------------------------------------------------------- */
/* Sans JavaScript ou en mouvement réduit : le bouquet reste fermé,       */
/* et la scène ne réserve plus de longueur.                               */
/* --------------------------------------------------------------------- */
html:not(.socle-actif) .depart { height: auto; --r: 0; --t: 0; --o: 0; }
html:not(.socle-actif) .depart__collant { position: relative; }
html:not(.socle-actif) .depart__suite { display: none; }

/* Tablette : le nom est long, les liens du bureau attendent d'avoir la place. */
@media (min-width: 761px) and (max-width: 960px) {
  .navigation__bureau { display: none; }
}

/* --------------------------------------------------------------------- */
/* Grand écran : le texte à gauche sur le pan avant, la photo à droite.   */
/* --------------------------------------------------------------------- */
@media (min-width: 768px) {
  .depart__photo img { object-position: 100% 0; transform: none; }
  .pan { top: var(--nav-hauteur); }
  .pan--avant .pan__papier { clip-path: polygon(0 0, 62% 0, 47% 100%, 0 100%); }
  .pan--avant .pan__papier::before { clip-path: polygon(62% 0, 60% 0, 45% 100%, 47% 100%); }
  .pan--avant .pan__papier::after { background: linear-gradient(100deg, transparent 30%, var(--ombre-legere) 33%, var(--lumiere) 33.4%, transparent 37%); }
  .pan--arriere .pan__papier { clip-path: polygon(100% 56%, 100% 100%, 22% 100%); }
  .depart__ruban { right: auto; left: 49%; top: calc(var(--nav-hauteur) + 7%); width: 9.5rem; }
  .depart__texte { right: auto; width: min(44vw, 34rem); left: var(--marge); bottom: auto; top: calc(var(--nav-hauteur) + 8svh); }
  .depart__titre { font-size: clamp(3.6rem, 7.6vw, 7rem); }
  .guide { max-width: 30rem; }
  .depart__suite { left: auto; right: var(--marge); width: auto; }

  .lieu { grid-template-columns: 1.1fr .9fr; gap: 2.5rem 4rem; align-items: start; }
  .lieu__texte { grid-column: 1; }
  .lieu__photo { grid-column: 2; grid-row: 1 / span 2; }
  .lieu__cotes { grid-column: 1; grid-template-columns: 1fr 1fr; }
  .carte-resto .carte-resto__panneau { padding: .8rem 2rem 1rem; }
  .galerie { grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: auto; }
  .galerie__case--large { grid-column: span 1; }
  .galerie__case--large:first-child { grid-column: 1 / span 2; }
  .galerie__case--large:last-child { grid-column: 2 / span 2; }
  .galerie__case:nth-child(2) { grid-column: 3; }
  .galerie__case:nth-child(3) { grid-column: 1; grid-row: 2; }
  /* Les petites cases prennent la hauteur de la grande photo de leur rangée. */
  .galerie__case:nth-child(2) img { aspect-ratio: 3 / 5; object-position: 75% 50%; }
  .galerie__case:nth-child(3) img { aspect-ratio: 8 / 7; object-position: 50% 62%; }
  .suite { margin-top: 2.5rem; }
}

/* Téléphone couché : le titre et les boutons tiennent dans la hauteur, sinon la scène collante les coupe. */
@media (max-height: 500px) and (orientation: landscape) {
  .depart__texte { top: calc(var(--nav-hauteur) + .5rem); bottom: auto; width: min(58vw, 30rem); }
  .depart__titre { font-size: 2.1rem; line-height: 1; margin-bottom: .3rem; }
  .depart__titre span { display: inline; }
  .depart__phrase { margin: 0 0 .4rem; font-size: .9rem; }
  .depart__ruban { display: none; }
  .depart__texte .guide { flex-wrap: nowrap; gap: .4rem; }
  .depart__texte .guide__bouton { width: auto; min-height: 44px; padding: .4rem .8rem; font-size: .9rem; }
}