/* Café Delyssa · composants partagés entre plusieurs pages : signatures, carte VIP, avantages, adresse et horaires */

/* ===== Signatures : rangée de quatre, défilement horizontal en mobile ===== */
.signatures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.signature {
  position: relative; display: flex; flex-direction: column; color: var(--creme);
  border-top: 1px solid var(--ligne); padding-top: 22px;
}
.signature .visuel {
  position: relative; height: 260px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(81, 47, 24, .45), transparent 70%);
}
.signature .visuel img { height: 240px; width: auto; max-width: 100%; object-fit: contain; transition: transform .6s var(--courbe); filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); }
.signature:hover .visuel img { transform: translateY(-8px); }
.signature h3 { font-size: 18px; margin-top: 20px; display: flex; align-items: center; }
.signature .prix { color: var(--or); font-weight: 500; margin-top: 4px; }
.signature .mention { font-size: 12px; color: var(--texte-doux); margin-top: 6px; }
.pastille {
  position: absolute; top: 14px; left: 14px; font: 500 10px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-pale); border: 1px solid var(--ligne-forte); border-radius: var(--rayon-image); padding: 6px 12px; background: rgba(11,9,6,.7);
}
@media (max-width: 900px) { .signatures { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 600px) {
  .signatures {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--gouttiere);
    margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere);
  }
  .signatures::-webkit-scrollbar { display: none; }
  .signature { scroll-snap-align: start; }
  .signature .visuel { height: 220px; }
  .signature .visuel img { height: 200px; }
}

/* ===== VIP : titre métal et liste d'avantages ===== */
.vip-titre { font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.avantages { list-style: none; margin: 30px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--filet-vip); display: grid; gap: 12px; }
.avantages li { color: var(--creme); }
.avantages li strong { color: var(--or-clair); font-weight: 600; }

/* Carte VIP : vraie carte, ratio 1,75, retournable */
.carte-vip {
  --rx: 0deg; --ry: 0deg;
  width: 100%; max-width: 640px; aspect-ratio: 1050 / 600; margin-inline: auto;
  perspective: 1400px; cursor: pointer; background: none; border: 0; padding: 0; display: block;
}
.carte-vip .face-interieure {
  display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--retourne, 0deg)));
  transition: transform .8s var(--courbe);
}
.carte-vip.retournee { --retourne: 180deg; }
.carte-vip .face {
  position: absolute; inset: 0; border-radius: var(--rayon-image); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(224,193,81,.25);
}
.carte-vip .face img { width: 100%; height: 100%; }
.carte-vip .verso { transform: rotateY(180deg); }
/* Reflet métallique qui suit le pointeur, comme sur une carte dorée à chaud */
.carte-vip .eclat {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 238, 196, .32), transparent 42%),
    linear-gradient(115deg, transparent calc(var(--gx, 50%) - 22%), rgba(240, 210, 137, .16) var(--gx, 50%), transparent calc(var(--gx, 50%) + 22%));
  mix-blend-mode: screen;
}
.carte-vip:hover .eclat { opacity: 1; }
/* Téléphone : la carte est réduite, le marbre noir de l'image devient à peine visible ; on éclaircit l'image recto */
@media (max-width: 600px) { .carte-vip .recto img { filter: brightness(1.7) contrast(1.05); } }
.aide-carte { text-align: center; font-size: 12px; color: var(--texte-doux); margin-top: 22px; letter-spacing: .08em; }

/* ===== Adresse et horaires ===== */
.visite { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.visite address { font-style: normal; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.3; margin-top: 16px; }
.visite address span { display: block; font-size: 15px; font-weight: 400; color: var(--or-pale); margin-top: 6px; }
.coordonnees { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.horaires { width: 100%; border-collapse: collapse; font-size: 15px; }
.horaires th, .horaires td { padding: 12px 0; border-bottom: 1px solid var(--ligne); text-align: left; font-weight: 400; }
.horaires td { text-align: right; color: var(--or-pale); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--or-clair); font-weight: 600; }
.horaires .ferme { color: var(--texte-doux); }
@media (max-width: 720px) { .visite { grid-template-columns: 1fr; } }

/* ===== Bandeau de fin de page ===== */
.bandeau-vip { background: var(--noir-pur); padding: 48px 0; border-top: 1px solid var(--ligne); }
.bandeau-vip .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bandeau-vip p { font-size: clamp(17px, 2vw, 21px); }
.bandeau-vip .metal { font-weight: 700; }
.bandeau-vip .accent { font-size: clamp(19px, 2.2vw, 24px); color: var(--or-pale); }

/* ===== En-tête des pages intérieures ===== */
.entete-page { padding: calc(var(--hauteur-nav) + clamp(36px, 6vw, 72px)) 0 clamp(28px, 4vw, 44px); }
.entete-page h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1; font-weight: 700; text-transform: uppercase; margin-top: 14px; }
.entete-page p { color: var(--or-pale); margin-top: 14px; max-width: 56ch; }
.entete-page .coeur { margin: 0; }

/* Harmonisation des rayons : .signature */
.signature { border-radius: var(--rayon-carte); }

/* Signatures : le bas net des photos se fond dans le fond, sans changer la mise en page */
.signature .visuel img { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }