/* Accueil « porte du riad » : la porte s'ouvre sur les biens. S'ajoute à visite.css.
   Ornements : assets/ornaments/ (tools/make_ornaments.py et tools/make_porte.py). */

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --night: #060b24;
  --night-2: #0c1745;
  --ivory: #f3ead6;
  --zellige: url(zellige/fond-fes.jpg); /* vrai zellige de Fès (photo CC BY 2.0, crédits en pied de page) */
  --porte: url(ornaments/arche-brisee.svg);
  --gold-grad: linear-gradient(100deg, #b98a2f 18%, #fff3c4 38%, #d9a441 50%, #b98a2f 78%);
}
body { background: var(--night); }

/* Arc en fer à cheval des cartes : cadre safran (.arch) et photo (.arch-in) découpés avec le même masque */
.arch, .arch-in { -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.arch { position: relative; aspect-ratio: var(--ratio, 4 / 5); background: linear-gradient(165deg, #f1cd7b, var(--gold) 45%, #a8761d); }
.arch-in { position: absolute; inset: 2.4% 3.4% 0; overflow: hidden; background: var(--cobalt-deep); }
.arch-in img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ───────── Bandeau d'ouverture ───────── */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 72% 42%, #1d3585 0%, var(--night-2) 46%, var(--night) 100%);
  color: var(--ivory);
  --mx: 72%;
  --my: 42%;
}
/* Zellige polychrome : assombri, puis révélé en couleurs sous le « projecteur » (souris ou balayage automatique) */
/* fond-fes.jpg = photo + ses reflets (2 x 2) : se répète sans raccord, comme les symétries du zellige */
.zel { position: absolute; inset: 0; z-index: -3; background: var(--zellige) center / 1500px auto repeat; pointer-events: none; }
@media (max-width: 700px) { .zel { background-size: 820px auto; } }
.zel-dim { opacity: .16; filter: saturate(.55) brightness(.7); }
.zel-lit {
  opacity: .92;
  -webkit-mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 72%);
  mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 72%);
}
.hero-vignette { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6, 11, 36, .9) 0%, rgba(6, 11, 36, .55) 42%, transparent 72%), linear-gradient(0deg, var(--night), transparent 22%); pointer-events: none; }
[dir="rtl"] .hero-vignette { background: linear-gradient(270deg, rgba(6, 11, 36, .9) 0%, rgba(6, 11, 36, .55) 42%, transparent 72%), linear-gradient(0deg, var(--night), transparent 22%); }
.dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.hero-inner {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(48px, 7vw, 88px);
  min-height: min(860px, calc(100svh - var(--topbar) - var(--frieze)));
}
.hero-text { text-align: start; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.kicker [lang="ar"] { font: 700 24px/1 "Reem Kufi", serif; letter-spacing: 0; text-transform: none; }
.kicker::before { content: ""; width: 38px; height: 1px; background: var(--gold); }
.hero h1 { margin: 0; color: #fff; font-size: clamp(38px, 6.2vw, 76px); line-height: 1.04; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.hero h1 .w { display: inline-block; }
.js .hero h1 .w { opacity: 0; filter: blur(14px); translate: 0 .35em; animation: word .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--k) * 110ms + 250ms); }
@keyframes word { to { opacity: 1; filter: none; translate: 0 0; } }
.lead { max-width: 33em; margin: 22px 0 34px; color: rgba(243, 234, 214, .86); font-size: clamp(16px, 2.2vw, 19px); }

/* Bouton or : balayage de lumière et attraction vers le curseur */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 34px;
  overflow: hidden;
  border: 1px solid #f1cd7b;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1cd7b, var(--gold) 55%, #b98a2f);
  color: #2a1a05;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(217, 164, 65, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%); translate: -120% 0; animation: sweep 4.5s ease-in-out 1.5s infinite; }
@keyframes sweep { 0%, 55% { translate: -120% 0; } 100% { translate: 120% 0; } }
.btn:hover { box-shadow: 0 16px 40px -8px rgba(217, 164, 65, .8), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* ───────── La porte ───────── */
.gate-wrap { justify-self: center; width: min(470px, 86vw); container-type: inline-size; }
.gate-tilt { perspective: 1400px; }
.gate {
  position: relative;
  aspect-ratio: 100 / 134;
  padding: 3.4cqw;
  border-radius: 1.4cqw;
  background: url(ornaments/gebs.svg) 0 0 / 6.4cqw;
  box-shadow: 0 0 0 1px rgba(217, 164, 65, .55), 0 0 0 .8cqw rgba(138, 95, 18, .45), 0 5cqw 9cqw -2cqw rgba(0, 0, 0, .75), 0 0 14cqw rgba(255, 170, 60, .16);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  --leaf-open: 0deg;
}
.gate[data-open="true"] { --leaf-open: 84deg; }
.gate-wall {
  position: absolute;
  inset: 3.4cqw;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f3e9d0, #e4d3ad);
  box-shadow: inset 0 0 6cqw rgba(138, 95, 18, .35);
}

/* Cadre sculpté (gebs) -> filet d'or -> intérieur : trois arcs brisés emboîtés */
.arch-frame, .arch-gold, .arch-inner { -webkit-mask: var(--porte) center / 100% 100% no-repeat; mask: var(--porte) center / 100% 100% no-repeat; }
.arch-frame { position: absolute; inset: 4% 14.5% 7%; background: url(ornaments/gebs.svg) 0 0 / 5.4cqw; filter: drop-shadow(0 0 0 transparent); }
.arch-gold { position: absolute; inset: 5.6% 12% 0; background: linear-gradient(160deg, #f6d98c, var(--gold) 45%, #8a5f12); }
.arch-inner { position: absolute; inset: 3.4% 6.2% 0; overflow: hidden; background: #1a0f05; }

/* Pièce derrière la porte : les couvertures des biens défilent à la lumière des lanternes */
.salon-view { position: absolute; inset: 0; }
.salon-view a { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.salon-view a.on { opacity: 1; pointer-events: auto; }
.salon-view img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.1; transition: scale 9s linear; }
.salon-view a.on img { scale: 1; }
.salon-view::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 62%, rgba(255, 190, 90, .38), transparent 62%), linear-gradient(0deg, rgba(40, 18, 0, .5), transparent 40%); mix-blend-mode: soft-light; pointer-events: none; }

/* Vantaux : charnières sur les bords, ils s'ouvrent vers l'intérieur */
.leaves { position: absolute; inset: 0; display: flex; direction: ltr; perspective: 150cqw; pointer-events: none; } /* charnières à l'extérieur, même en arabe */
.leaf { position: relative; width: 50%; height: 100%; transition: transform 3s cubic-bezier(.7, 0, .15, 1), filter 3s; }
.leaf b { position: absolute; inset: 0; background: url(ornaments/porte-vantail.svg) 0 0 / 100% 100%; }
.leaf-l { transform-origin: 0 50%; transform: rotateY(var(--leaf-open)); }
.leaf-r { transform-origin: 100% 50%; transform: rotateY(calc(var(--leaf-open) * -1)); }
.leaf-r b { transform: scaleX(-1); }
.gate[data-open="true"] .leaf { filter: brightness(.6); }
/* poignées et anneaux de laiton */
.leaf::after { content: ""; position: absolute; top: 52%; width: 9cqw; aspect-ratio: 1; border-radius: 50%; border: .9cqw solid #d9a441; background: radial-gradient(circle, transparent 55%, rgba(0, 0, 0, .25)); box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .5), inset 0 0 .5cqw rgba(255, 240, 190, .8); }
.leaf-l::after { right: 4cqw; }
.leaf-r::after { left: 4cqw; }

/* Panneaux de zellige de chaque côté, lanternes, marches */
.panel { position: absolute; bottom: 7%; width: 12.4%; height: 44%; background: url(zellige/panneau-fes.jpg) center top / 100% auto repeat-y; border: .7cqw solid var(--ivory); outline: .3cqw solid var(--gold); box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .35), inset 0 0 2cqw rgba(0, 0, 0, .35); }
.panel-l { left: 1.8%; }
.panel-r { right: 1.8%; }
/* Vraies lanternes en laiton de Fès (photos détourées, crédits en pied de page) */
.lantern { position: absolute; pointer-events: none; transform-origin: 50% 0; animation: sway 6s ease-in-out infinite; filter: drop-shadow(0 0 2.4cqw rgba(255, 176, 70, .75)) drop-shadow(0 1.2cqw 1cqw rgba(60, 30, 0, .35)); }
.lantern img { display: block; width: 100%; height: auto; }
.lantern-s { top: 13%; width: 10.6%; animation-delay: -2s; }
.lantern-l { left: 2.6%; }
.lantern-r { right: 2.6%; animation-delay: -4s; }
.lantern-c { top: -1%; left: 50%; width: 19%; margin-left: -9.5%; z-index: 4; animation-duration: 7s; }
@keyframes sway { 0%, 100% { rotate: -2.4deg; } 50% { rotate: 2.4deg; } }
.halo { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 96, .55), rgba(255, 150, 40, .18) 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; animation: flicker 3.4s steps(1) infinite; }
.halo-l { left: -6%; top: 6%; width: 36%; aspect-ratio: 1; }
.halo-r { right: -6%; top: 6%; width: 36%; aspect-ratio: 1; animation-delay: -1.3s; }
.halo-c { left: 28%; top: -4%; width: 44%; aspect-ratio: 1; z-index: 3; animation-delay: -2.1s; }
@keyframes flicker { 0%, 100% { opacity: .95; scale: 1; } 18% { opacity: .78; scale: .97; } 36% { opacity: 1; scale: 1.03; } 52% { opacity: .85; } 71% { opacity: .98; scale: 1.01; } }
/* Lumière projetée à travers le métal ajouré : un semis d'étoiles qui s'estompe autour de chaque lanterne */
.ajours { position: absolute; aspect-ratio: 1; border-radius: 50%; background: url(ornaments/star-gold.svg) 0 0 / 1.9cqw; mix-blend-mode: multiply; opacity: .3; rotate: 17deg; pointer-events: none; -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: flicker 3.4s steps(1) infinite; }
.ajours-l { left: -10%; top: 4%; width: 40%; }
.ajours-r { right: -10%; top: 4%; width: 40%; animation-delay: -1.3s; }
.ajours-c { left: 22%; top: -8%; width: 56%; animation-delay: -2.1s; }
.steps { position: absolute; inset: auto 0 0; height: 7%; display: grid; grid-template-rows: repeat(3, 1fr); }
.steps i { background: conic-gradient(var(--c) 25%, var(--ivory) 0 50%, var(--c) 0 75%, var(--ivory) 0) 0 0 / 3.2cqw 3.2cqw; box-shadow: inset 0 .25cqw .4cqw rgba(0, 0, 0, .3); }
.steps i:nth-child(1) { --c: #1f4fb0; }
.steps i:nth-child(2) { --c: #17130f; }
.steps i:nth-child(3) { --c: #c4262d; }
.gate-reflect { position: absolute; inset: auto -4% -9cqw; height: 9cqw; background: radial-gradient(ellipse at 50% 0, rgba(255, 170, 60, .35), transparent 70%); filter: blur(1.2cqw); pointer-events: none; }

.gate-toggle {
  display: block;
  margin: 28px auto 0;
  padding: 7px 18px;
  border: 1px solid rgba(217, 164, 65, .6);
  border-radius: 999px;
  background: rgba(15, 34, 80, .55);
  color: var(--gold);
  font: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s, color .25s;
}
.gate-toggle:hover { background: var(--gold); color: var(--cobalt-deep); }
.arch-caption { margin: 14px 0 0; min-height: 2.8em; color: rgba(243, 234, 214, .85); font-size: 14px; text-align: center; }
.arch-caption a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

@media (min-width: 980px) {
  .hero-inner { grid-template-columns: 1.1fr .9fr; }
}
@media (max-width: 979px) {
  .hero-text, .kicker { text-align: center; justify-content: center; }
  .kicker::before { display: none; }
  .lead { margin-inline: auto; }
}

/* ───────── Bande de zellige qui défile ───────── */
.band { position: relative; height: 82px; overflow: hidden; border-block: 3px double var(--gold); background: var(--night); }
/* bande-fes.jpg = bandeau + son miroir : affichée sur 76 px de haut, une période mesure 620 px */
.band-track { width: calc(100% + 620px); height: 100%; background: url(zellige/bande-fes.jpg) 0 50% / auto 100% repeat-x; animation: drift 38s linear infinite; }
@keyframes drift { to { translate: -620px 0; } }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night), transparent 6%, transparent 94%, var(--night)); pointer-events: none; }

/* ───────── Les biens ───────── */
.listings-wrap { position: relative; background: radial-gradient(ellipse at 50% 0, rgba(29, 53, 133, .55), transparent 60%), var(--night); }
.listings-wrap::before { content: ""; position: absolute; inset: 0; background: var(--zellige) center top / 1500px auto repeat; opacity: .06; pointer-events: none; }
.listings { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 32px) 88px; }
.listings-head { max-width: 560px; margin: 0 auto 48px; text-align: center; }
.listings-head h2 { margin: 0 0 16px; font-size: clamp(34px, 5vw, 52px); color: transparent; background: var(--gold-grad) 0 0 / 220% auto; -webkit-background-clip: text; background-clip: text; animation: shine 7s linear infinite; }
@keyframes shine { to { background-position: 220% 0; } }
.cards { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 22px;
  border: 1px solid rgba(217, 164, 65, .35);
  border-radius: 6px;
  background: linear-gradient(180deg, #fffaf0, #f6ecd6);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  color: var(--ink);
  text-decoration: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out, box-shadow .4s ease, translate .4s ease;
}
.card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(217, 164, 65, .6); border-radius: 3px; pointer-events: none; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--px, 50%) var(--py, 30%), rgba(255, 214, 120, .36), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover { translate: 0 -8px; box-shadow: 0 34px 60px -20px rgba(0, 0, 0, .9), 0 0 36px -6px rgba(217, 164, 65, .45); }
.card:hover::after { opacity: 1; }
.beam { position: absolute; inset: -1px; padding: 2px; border-radius: 7px; pointer-events: none; opacity: 0; transition: opacity .4s; background: conic-gradient(from var(--a), transparent 0 68%, #f1cd7b 80%, #fff6cf 86%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: beam 3.6s linear infinite; }
.card:hover .beam { opacity: 1; }
@keyframes beam { to { --a: 360deg; } }
.card .arch-in img { transition: scale .9s ease; }
.card:hover .arch-in img { scale: 1.08; }
.card-top { position: relative; margin: 4px 6px 0; }
.ribbon { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); padding: 5px 18px; border: 1px solid var(--gold); background: var(--cobalt); color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5); }
.card .body { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 30px 8px 0; text-align: center; }
.card h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.2; color: var(--cobalt); }
.card .place { margin: 0; color: var(--muted); font-size: 15px; }
.card .price { margin: 10px 0 2px; font-size: 26px; white-space: nowrap; }
.card .meta { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.chips li { padding: 2px 11px; border: 1px solid rgba(138, 95, 18, .38); border-radius: 999px; color: var(--gold-deep); font-size: 12.5px; }
.go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 24px; border-radius: 999px; background: var(--cobalt); color: #fff; font-weight: 600; letter-spacing: .03em; transition: background .25s; }
.go::after { content: "→"; color: var(--gold); transition: transform .25s; }
:lang(ar) .go::after { content: "←"; }
.card:hover .go { background: var(--accent); }
.card:hover .go::after { transform: translateX(4px); }
:lang(ar) .card:hover .go::after { transform: translateX(-4px); }

/* Pied de page */
.site-footer { padding: 42px 16px 50px; background: #040819; color: rgba(243, 234, 214, .78); text-align: center; font-size: 14px; }
.site-footer .brand { justify-content: center; margin-bottom: 14px; }
.site-footer p { max-width: 36em; margin: 0 auto 12px; }
.site-footer a { color: var(--gold); text-underline-offset: 3px; }
.frieze-night { background-color: var(--cobalt-deep); }

/* Apparition au défilement (translate / opacity : n'écrasent pas l'inclinaison 3D des cartes) */
.js .reveal { opacity: 0; translate: 0 34px; transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.js .reveal.in { opacity: 1; translate: 0 0; }
.js .hero-text > :not(h1) { animation: rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.js .hero-text > :nth-child(1) { animation-delay: .05s; }
.js .hero-text > :nth-child(3) { animation-delay: .7s; }
.js .hero-text > :nth-child(4) { animation-delay: .9s; }
.js .gate-wrap { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
@keyframes rise { from { opacity: 0; translate: 0 28px; } }

@media (prefers-reduced-motion: reduce) {
  .leaf, .gate, .card, .card .arch-in img, .btn, .go::after { transition: none; }
  .lantern, .halo, .ajours, .band-track, .listings-head h2, .btn::after, .beam { animation: none; }
  .js .hero h1 .w, .js .reveal, .js .hero-text > *, .js .gate-wrap { animation: none; opacity: 1; filter: none; translate: 0 0; }
  .js .reveal { transition: none; }
}