/* La Maison Lamia Femme Berbère
   Blanc, encre, rouge à lèvres. Les couleurs d'émail des bijoux kabyles
   (cobalt, vert, safran) marquent discrètement chaque pièce. */

:root {
  --blanc: #ffffff;
  --chaux: #f6f6f4;
  --encre: #1c1517;
  --gris: #6c6265;
  --ligne: #e6e1e0;
  --rouge: #b0162e;
  --rouge-pale: #fbecee;
  --email-cobalt: #23409a;
  --email-vert: #3c8a36;
  --email-safran: #c99210;
  --email-rouge: #b0162e;
  --accent: var(--email-rouge);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mesure: 68ch;
  --gouttiere: clamp(16px, 5vw, 72px);
}

[data-accent='cobalt'] { --accent: var(--email-cobalt); }
[data-accent='vert'] { --accent: var(--email-vert); }
[data-accent='safran'] { --accent: var(--email-safran); }
[data-accent='rouge'] { --accent: var(--email-rouge); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(44px, 7vw, 92px); }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-size: 26px; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--encre); color: var(--blanc); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* Boutons et liens */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border-radius: 999px; font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid var(--encre); }
.btn-ink { background: var(--encre); color: var(--blanc); }
.btn-ink:hover { background: var(--rouge); border-color: var(--rouge); }
.btn-line { background: transparent; color: var(--encre); }
.btn-line:hover { border-color: var(--rouge); color: var(--rouge); }
.btn[disabled] { opacity: .45; cursor: not-allowed; background: var(--encre); color: var(--blanc); }
.text-link { color: var(--rouge); font-weight: 600; text-underline-offset: 4px; }

/* Le losange d'émail : repère de pièce */
.pip { display: inline-block; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); margin-right: 12px; flex: none; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3px var(--accent); }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 10px var(--gouttiere); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ligne); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand span { font-family: var(--serif); font-size: 22px; line-height: 1; }
.brand strong { font-weight: 700; }
.site-nav { display: flex; gap: 22px; font-size: 15px; }
.site-nav a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current='page'] { border-color: var(--rouge); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.alert-link { color: var(--rouge); font-weight: 600; font-size: 15px; text-decoration: none; }
.cart-button { border: 0; background: var(--encre); color: var(--blanc); border-radius: 999px; padding: 10px 16px; font: 600 14px var(--sans); cursor: pointer; }
.cart-button span { display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; background: var(--rouge); border-radius: 99px; }
.plan-link { display: none; font-weight: 600; font-size: 15px; text-decoration: none; }
@media (max-width: 1080px) { .site-nav { display: none; } .plan-link { display: inline; } }
@media (max-width: 520px) { .brand span { display: none; } .brand img { width: 44px; height: 44px; } .site-header { gap: 10px; } .header-actions { gap: 12px; } .alert-link, .plan-link { font-size: 14px; } .cart-button { padding: 8px 12px; } }
.header-actions a, .cart-button { white-space: nowrap; }

/* Le Hall */
.hall-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 6vw, 96px); align-items: center; padding: clamp(40px, 8vw, 110px) var(--gouttiere) clamp(32px, 6vw, 80px); }
.hall-copy h1 { font-size: clamp(56px, 9vw, 128px); line-height: .95; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--gris); max-width: 46ch; }
.hall-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hall-portrait { margin: 0; justify-self: center; width: min(440px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--encre); box-shadow: 0 0 0 10px var(--blanc), 0 0 0 11.5px var(--rouge); }
.hall-portrait img { width: 100%; height: 100%; object-fit: cover; }
.room-name { display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--gris); margin-bottom: 18px; }

/* Le plan */
.plan-section { padding: clamp(40px, 6vw, 80px) var(--gouttiere); background: var(--chaux); border-block: 1px solid var(--ligne); }
.plan-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.plan-intro p { color: var(--gris); max-width: 40ch; margin: 0; }
.house-plan { width: 100%; max-width: 1180px; display: block; margin: 0 auto; }
.house-wall { fill: var(--blanc); stroke: var(--encre); stroke-width: 6; }
.room-shape { fill: var(--blanc); stroke: var(--encre); stroke-width: 2; transition: fill .2s; }
.room-shape.is-court { fill: url(#tiles); }
#tiles path { fill: none; stroke: var(--ligne); stroke-width: 1.5; }
#hatch line { stroke: var(--ligne); stroke-width: 3; }
.room-hatch { fill: url(#hatch); pointer-events: none; }
.room-label { font-family: var(--serif); font-weight: 600; fill: var(--encre); pointer-events: none; }
.room-soon { font: 500 15px var(--sans); fill: var(--gris); }
.plan-room { cursor: pointer; outline: none; }
.plan-room:hover .room-shape, .plan-room:focus-visible .room-shape { fill: color-mix(in srgb, var(--accent) 14%, white); }
.plan-room:focus-visible .room-shape { stroke: var(--rouge); stroke-width: 4; }
.plan-room.is-soon { cursor: default; }
.plan-room.is-soon .room-label { fill: var(--gris); }
.door-gap { stroke: var(--blanc); stroke-width: 8; }
.door-swing { fill: none; stroke: var(--rouge); stroke-width: 2; stroke-dasharray: 5 5; }
.entree { font: 600 15px var(--sans); fill: var(--rouge); text-anchor: middle; }
.room-index { list-style: none; margin: 36px auto 0; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
.room-index a, .next-rooms a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; }
.room-index strong, .next-rooms strong { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.room-index span:not(.pip), .next-rooms span:not(.pip) { grid-column: 2; color: var(--gris); font-size: 15px; }
.room-index a:hover strong, .next-rooms a:hover strong { color: var(--rouge); }
.room-index .is-soon strong { color: var(--gris); }
@media (max-width: 720px) { .room-index { margin-top: 24px; } }

/* En ce moment */
.now-section, .room-shelf, .events { padding: clamp(40px, 6vw, 80px) var(--gouttiere); }
.now-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.now-card { border: 1px solid var(--ligne); border-top: 4px solid var(--accent); padding: 24px; background: var(--blanc); display: flex; flex-direction: column; }
.now-room { font-size: 14px; font-weight: 600; color: var(--gris); margin-bottom: 8px; }
.now-card p:not(.now-room) { color: var(--gris); }
.now-card a { margin-top: auto; color: var(--rouge); font-weight: 600; text-underline-offset: 4px; }

/* Histoire */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 6vw, 90px); align-items: center; padding: clamp(40px, 7vw, 100px) var(--gouttiere); border-top: 1px solid var(--ligne); }
.story figure { margin: 0; }
.story p { max-width: var(--mesure); font-size: 18px; }

/* Pièces */
.room-head { padding: clamp(40px, 7vw, 100px) var(--gouttiere) clamp(24px, 4vw, 48px); border-bottom: 1px solid var(--ligne); position: relative; }
.room-head::after { content: ''; position: absolute; left: var(--gouttiere); bottom: -2px; width: 120px; height: 3px; background: var(--accent); }
.room-head h1 { max-width: 16ch; }
.room-head.is-soon h1 { color: var(--gris); }
.door-ajar { max-width: 56ch; padding: 18px 22px; border: 1.5px dashed var(--accent); margin-top: 24px; }
.room-body { padding: clamp(32px, 5vw, 64px) var(--gouttiere); }
.two-col { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.prose-lead { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 31px); line-height: 1.35; max-width: 36ch; }
.side-note { background: var(--chaux); padding: 28px; border-left: 3px solid var(--accent); }
.side-note h2 { font-size: 26px; }
.side-note ul { padding-left: 20px; margin: 0 0 1.2em; }
.side-note li { margin-bottom: 6px; }
.fine { color: var(--gris); font-size: 14px; margin-top: 18px; }
.urgent { font-weight: 600; color: var(--rouge); }
.steps { padding-left: 24px; max-width: var(--mesure); }
.steps li { margin-bottom: 10px; padding-left: 6px; }
.live-card { border: 1px solid var(--ligne); border-top: 4px solid var(--accent); padding: 28px; margin-top: 24px; max-width: 560px; }
.live-when { font-weight: 600; color: var(--rouge); }
.social-list { list-style: none; padding: 0 !important; }

/* Bibliothèque, galerie */
.book-feature, .gallery-feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 90px); align-items: center; padding: clamp(32px, 5vw, 72px) var(--gouttiere); }
.book-feature figure, .gallery-feature figure { margin: 0; }
.book-feature img { max-height: 640px; width: auto; margin: 0 auto; }
.book-sub { color: var(--gris); font-size: 19px; }
blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; margin: 24px 0; padding-left: 22px; border-left: 3px solid var(--rouge); max-width: 34ch; }
blockquote cite { display: block; font: normal 500 15px var(--sans); color: var(--gris); margin-top: 10px; }
figcaption { font-size: 13px; color: var(--gris); margin-top: 8px; }

/* Produits */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; margin-top: 8px; }
.product-group { grid-column: 1 / -1; display: flex; align-items: center; font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 20px 0 0; }
.product-card { display: flex; flex-direction: column; text-decoration: none; }
.product-media { position: relative; aspect-ratio: 4 / 5; background: var(--chaux); overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-media img { transform: scale(1.03); }
.product-empty { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; font-family: var(--serif); font-size: 22px; color: var(--gris); border: 1px solid var(--ligne); }
.badge { position: absolute; top: 12px; left: 12px; background: var(--blanc); color: var(--encre); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.badge.is-sold { background: var(--encre); color: var(--blanc); }
.product-card h3 { font-size: 24px; margin: 14px 0 4px; }
.product-card:hover h3 { color: var(--rouge); }
.product-price { font-weight: 600; }
.product-price del { color: var(--gris); font-weight: 400; margin-right: 8px; }
.product-card.is-sold { opacity: .6; }
.loading, .empty { color: var(--gris); }
.empty { grid-column: 1 / -1; padding: 28px; border: 1.5px dashed var(--ligne); }

.product-page { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 5vw, 64px) var(--gouttiere); align-items: start; }
.gallery-main { margin: 0; background: var(--chaux); aspect-ratio: 4 / 5; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumbs button { width: 76px; aspect-ratio: 4 / 5; padding: 0; border: 1.5px solid transparent; background: var(--chaux); cursor: pointer; overflow: hidden; }
.gallery-thumbs button[aria-current='true'] { border-color: var(--encre); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: clamp(36px, 4.4vw, 58px); }
.product-info .product-price { font-size: 24px; margin: 8px 0 20px; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); margin: 24px 0; }
.specs div { padding: 14px; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.specs strong { display: block; font-family: var(--serif); font-size: 22px; }
.specs span { color: var(--gris); font-size: 14px; }
.back-room { display: inline-flex; align-items: center; color: var(--gris); text-decoration: none; margin-bottom: 18px; font-weight: 600; font-size: 15px; }

/* Speed dating, espace membre, alertes */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.event-card { border: 1px solid var(--ligne); border-top: 4px solid var(--rouge); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.event-date { font-weight: 600; color: var(--rouge); }
.event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.event-meta span { background: var(--chaux); padding: 4px 10px; border-radius: 99px; font-size: 14px; }
.event-card .btn { margin-top: auto; align-self: flex-start; }
.member-panel { margin: 0 var(--gouttiere) clamp(32px, 5vw, 64px); padding: clamp(24px, 4vw, 44px); background: var(--chaux); }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.auth-grid form, .report-form { display: grid; gap: 14px; background: var(--blanc); padding: 24px; border: 1px solid var(--ligne); }
.report-form { margin-top: 24px; max-width: 640px; }
label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
input, select, textarea { width: 100%; font: 16px var(--sans); padding: 12px 14px; border: 1.5px solid var(--ligne); border-radius: 10px; background: var(--blanc); color: var(--encre); }
input:focus, select:focus, textarea:focus { border-color: var(--encre); outline: none; }
.audio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-status { min-height: 1.6em; font-weight: 600; margin-top: 14px; }
.form-status.is-error { color: var(--rouge); }
.origin { padding: clamp(32px, 5vw, 72px) var(--gouttiere); border-top: 1px solid var(--ligne); }
.origin p { max-width: var(--mesure); color: var(--gris); }

/* Articles */
.article { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 100px) var(--gouttiere); }
.article h2 { margin-top: 1.4em; }
.article p { font-size: 18px; }
.article-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Continuer la visite */
.next-rooms { padding: clamp(32px, 5vw, 64px) var(--gouttiere); border-top: 1px solid var(--ligne); background: var(--chaux); }
.next-rooms ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; }

/* Panier */
.cart-overlay { position: fixed; inset: 0; background: rgba(28,21,23,.4); z-index: 60; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--blanc); z-index: 70; display: flex; flex-direction: column; padding: 24px; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.cart-drawer.is-open { transform: none; visibility: visible; transition: transform .25s ease; box-shadow: -20px 0 60px rgba(28,21,23,.15); }
.cart-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ligne); padding-bottom: 12px; }
.cart-head h2 { margin: 0; font-size: 32px; }
.cart-head button { border: 0; background: none; font: 600 15px var(--sans); cursor: pointer; text-decoration: underline; }
.cart-items { flex: 1; overflow: auto; padding: 12px 0; }
.cart-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.cart-row img { width: 64px; height: 80px; object-fit: cover; background: var(--chaux); }
.cart-row button { border: 0; background: none; color: var(--rouge); font: 600 14px var(--sans); cursor: pointer; }
.cart-foot { border-top: 1px solid var(--ligne); padding-top: 16px; display: grid; gap: 12px; }
.cart-total { display: flex; justify-content: space-between; font-size: 18px; margin: 0; }
.cart-note { font-size: 13px; color: var(--gris); margin: 0; }
body.cart-open { overflow: hidden; }

/* Pied de page */
.site-footer { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 40px; padding: clamp(40px, 6vw, 72px) var(--gouttiere); background: var(--encre); color: #efe9ea; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.site-footer nav ul { columns: 2; column-gap: 24px; }
.site-footer li { margin-bottom: 8px; break-inside: avoid; }
.site-footer small { color: #b9aeb1; }
.footer-sign { font-size: 44px; color: var(--rouge); margin: 0 0 8px; line-height: 1; }
.footer-title { font-family: var(--serif); font-size: 24px; margin-bottom: 12px; }
.footer-legal { font-size: 13px; color: #b9aeb1; margin-top: 18px; }

/* Mobile */
@media (max-width: 900px) {
  .hall-hero, .story, .two-col, .book-feature, .gallery-feature, .product-page { grid-template-columns: 1fr; }
  .hall-portrait { width: min(300px, 80%); order: -1; }
  .now-grid { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .book-feature img { max-height: 420px; }
}

/* Couvertures (live, livre) */
.live-cover { margin: -28px -28px 20px; }
.live-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.book-cover { margin: 0; }
.book-cover img { max-height: 640px; width: auto; margin: 0 auto; box-shadow: 0 18px 50px rgba(28,21,23,.18); }
.article-cover img { max-height: 520px; margin: 8px 0 28px; }

/* ================================================================ Relief et profondeur */

/* La frise : motif géométrique kabyle (triangles, losanges) aux couleurs de la Maison */
.frise { height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20'%3E%3Cpath d='M0 20L14 6L28 20Z' fill='%231c1517'/%3E%3Cpath d='M28 0L42 14L56 0Z' fill='%23b0162e'/%3E%3Cpath d='M14 0l3 3l-3 3l-3-3z' fill='%23c99210'/%3E%3Cpath d='M42 20l3-3l3 3z' fill='%2323409a'/%3E%3C/svg%3E") repeat-x center / 56px 20px; }
.frise-fine { height: 12px; background-size: 34px 12px; opacity: .9; }

/* Hall : plans superposés autour d'une arche */
.hall-hero { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 60% 70% at 85% 40%, color-mix(in srgb, var(--rouge) 7%, transparent), transparent 70%),
  linear-gradient(180deg, var(--blanc), var(--chaux)); }
.hall-stage { position: relative; justify-self: center; width: min(420px, 90%); aspect-ratio: 4 / 5; }
.hall-arch { position: absolute; inset: 0; margin: 0; border-radius: 999px 999px 18px 18px; overflow: hidden; background: var(--blanc);
  border: 1.5px solid var(--encre);
  box-shadow: 0 2px 4px rgba(28,21,23,.06), 0 30px 60px -10px rgba(28,21,23,.28), inset 0 0 0 10px var(--blanc), inset 0 0 0 11.5px var(--rouge); }
.hall-arch img { width: 100%; height: 100%; object-fit: contain; padding: 14% 8% 6%; }
.arch-shadow { position: absolute; inset: 22px -22px -22px 22px; border-radius: 999px 999px 18px 18px; background: var(--rouge); opacity: .92; }
.hall-medal { position: absolute; left: -54px; bottom: 34px; width: 38%; aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden;
  border: 6px solid var(--blanc); box-shadow: 0 0 0 1.5px var(--encre), 0 20px 40px -8px rgba(28,21,23,.35); }
.hall-medal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.hall-portrait { display: none; }

/* Le plan : sols teintés par pièce, losange d'émail, ombre portée */
.plan-section { background:
  radial-gradient(ellipse 50% 60% at 10% 0%, color-mix(in srgb, var(--email-cobalt) 6%, transparent), transparent 70%),
  radial-gradient(ellipse 50% 60% at 90% 100%, color-mix(in srgb, var(--email-safran) 8%, transparent), transparent 70%),
  var(--chaux); }
.room-shape { fill: color-mix(in srgb, var(--accent) 5%, white); }
.room-shape.is-court { fill: url(#tiles); }
.room-pip { fill: var(--accent); stroke: var(--blanc); stroke-width: 2; }
.plan-room.is-soon .room-pip { opacity: .45; }
.plan-room:hover .room-shape, .plan-room:focus-visible .room-shape { fill: color-mix(in srgb, var(--accent) 18%, white); }

/* En ce moment : section sombre, cartes en relief */
.now-section.is-dark { background: var(--encre); color: var(--blanc); position: relative; }
.now-section.is-dark h2 { color: var(--blanc); }
.now-section.is-dark .now-card { border: 0; border-top: 4px solid var(--accent); box-shadow: 0 24px 50px -16px rgba(0,0,0,.6); color: var(--encre); }

/* Cartes et produits : élévation douce */
.now-card, .event-card, .live-card { border-radius: 4px; box-shadow: 0 1px 2px rgba(28,21,23,.05), 0 14px 34px -14px rgba(28,21,23,.18); transition: transform .25s ease, box-shadow .25s ease; }
.now-card:hover, .event-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,21,23,.06), 0 24px 44px -14px rgba(28,21,23,.26); }
.product-media { border-radius: 4px; box-shadow: 0 1px 2px rgba(28,21,23,.06), 0 18px 40px -18px rgba(28,21,23,.35); }
.product-card:hover .product-media { box-shadow: 0 2px 4px rgba(28,21,23,.06), 0 28px 50px -18px rgba(28,21,23,.45); }
.gallery-main { border-radius: 4px; box-shadow: 0 30px 60px -24px rgba(28,21,23,.4); }
.side-note { box-shadow: inset 3px 0 0 var(--accent); border-left: 0; }

/* En-têtes de pièces : arche en filigrane et lumière de la pièce */
.room-head { overflow: hidden; background:
  radial-gradient(ellipse 45% 80% at 92% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
  linear-gradient(180deg, var(--blanc), var(--chaux)); border-bottom: 0; }
.room-head::after { display: none; }
.head-arch { position: absolute; right: clamp(-80px, 4vw, 80px); top: 28px; width: clamp(160px, 22vw, 300px); aspect-ratio: 3 / 4;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px 999px 0 0;
  box-shadow: 18px 18px 0 -1px color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
.room-head > *:not(.head-arch) { position: relative; }

/* Histoire : image en profondeur */
.story figure img { border-radius: 4px; box-shadow: -18px 18px 0 color-mix(in srgb, var(--rouge) 85%, transparent), 0 30px 60px -20px rgba(28,21,23,.4); }
.book-feature img, .book-cover img { box-shadow: 0 30px 60px -20px rgba(28,21,23,.45); }

@media (max-width: 900px) {
  .hall-stage { width: min(300px, 78%); order: -1; margin-left: 40px; }
  .hall-medal { left: -40px; }
  .head-arch { opacity: .5; right: -60px; }
}

.head-arch.has-image { margin: 0; overflow: hidden; border: 1.5px solid var(--encre); background: var(--blanc);
  box-shadow: 18px 18px 0 -1px color-mix(in srgb, var(--accent) 80%, transparent), 0 30px 60px -20px rgba(28,21,23,.35); top: 50%; transform: translateY(-50%); right: var(--gouttiere); width: clamp(200px, 24vw, 320px); }
.head-arch.has-image img { width: 100%; height: 100%; object-fit: cover; }
.head-arch.has-image img.is-drawing { object-fit: contain; padding: 16% 10% 8%; }
.room-head.with-image { min-height: clamp(380px, 38vw, 520px); }
.room-head.with-image h1, .room-head.with-image .lead { max-width: min(16ch, 55vw); }
.room-head.with-image .lead { max-width: min(46ch, 52vw); }
@media (max-width: 900px) {
  .head-arch.has-image { position: relative; top: auto; right: auto; transform: none; width: min(240px, 70%); margin: 0 0 28px 0; }
  .room-head.with-image { min-height: 0; display: flex; flex-direction: column; }
  .room-head.with-image h1, .room-head.with-image .lead { max-width: none; }
}

/* Formulaires de réservation, pages légales */
.check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: 14px; color: var(--gris); margin: 4px 0 12px; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--rouge); }
.check a { color: var(--encre); }
.draft-banner { background: var(--rouge-pale); color: var(--rouge); font-weight: 600; padding: 12px 16px; border-left: 3px solid var(--rouge); }
mark.todo { background: #fff3c4; color: var(--encre); padding: 0 4px; font-weight: 600; }
.legal h2 { font-size: 28px; }
.legal li { margin-bottom: 6px; }
.footer-legal a { text-decoration: underline; }

/* ================================================================ La façade, à la tombée du soir */
.house-facade { width: 100%; max-width: 1040px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.plan-section { background: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255,200,120,.10), transparent 70%), linear-gradient(180deg, #17172d 0%, #262038 55%, #34283f 100%); border-block: 0; }
.plan-section .room-index a { border-color: rgba(255,255,255,.12); }
.plan-section .room-index strong { color: #fbfaf7; }
.plan-section .room-index span:not(.pip) { color: #c9c1cf; }
.plan-section .room-index .is-soon strong { color: #9a91a3; }
.plan-section .room-index a:hover strong { color: #ffd48a; }
.plan-section .pip { box-shadow: 0 0 0 2px #262038, 0 0 0 3px var(--accent); }
.plan-section .plan-intro h2 { color: var(--blanc); }
.plan-section .plan-intro p { color: #d9d3e0; }
.f-star { fill: #fff6dc; opacity: .85; }
.f-moon { fill: #fbeccb; }
.f-wall { fill: #fbfaf7; stroke: #1c1517; stroke-width: 2; }
.f-roof { fill: #8f3b28; }
.f-tile { fill: none; stroke: #6f2c1d; stroke-width: 2; }
.f-ground { fill: #1a1528; opacity: .55; }
.f-frame { fill: #efe9df; stroke: #1c1517; stroke-width: 2.5; }
.f-light { fill: url(#f-glow); }
.f-court { fill: url(#f-court); }
.f-glass { fill: none; stroke: #1c1517; stroke-width: 2.5; }
.f-mullion { fill: none; stroke: #fbfaf7; stroke-width: 4; opacity: .85; }
.f-leaf { fill: #3c6b3a; }
.f-chain, .f-lantern line { stroke: #1c1517; stroke-width: 2; }
.f-lantern-small, .f-lantern path { fill: #f7c66b; stroke: #1c1517; stroke-width: 2; }
.f-pip { fill: var(--accent); stroke: #fbfaf7; stroke-width: 2; }
.f-label { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 21px; fill: #1c1517; }
.f-label.is-soon { fill: #8a8083; }
.f-label.is-main { font-size: 24px; fill: var(--rouge); font-style: normal; letter-spacing: .02em; }
.f-welcome { font-family: var(--serif); font-style: italic; font-size: 15px; fill: #6c6265; opacity: 0; transition: opacity .25s; }
.f-room { cursor: pointer; outline: none; }
.f-room .f-light, .f-room .f-court { transition: filter .3s; }
.f-room:hover .f-light, .f-room:focus-visible .f-light, .f-room:hover .f-court, .f-room:focus-visible .f-court { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255,200,110,.9)); }
.f-room:hover .f-welcome, .f-room:focus-visible .f-welcome { opacity: 1; }
.f-room:focus-visible .f-frame { stroke: var(--rouge); stroke-width: 4; }
.f-room.is-soon { cursor: default; }
.f-room.is-soon .f-light { filter: brightness(.9); }
.f-room.is-soon .f-welcome { opacity: .8; }
.f-shutter { fill: #6d7b8c; stroke: #1c1517; stroke-width: 2; }
.f-slat { stroke: #55606e; stroke-width: 2; }
.f-door-frame { fill: #efe9df; stroke: #1c1517; stroke-width: 2.5; }
.f-door { fill: var(--rouge); stroke: #1c1517; stroke-width: 2.5; transition: filter .3s; }
.f-door-split { stroke: #6e0d1d; stroke-width: 2.5; }
.f-knocker { fill: none; stroke: #d9a43a; stroke-width: 3; }
.f-stud { fill: #d9a43a; }
.f-door-main:hover .f-door, .f-door-main:focus-visible .f-door { filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .f-welcome, .f-room .f-light { transition: none; } }
@media (max-width: 720px) {
  .house-facade { display: block; }
  .f-label { font-size: 26px; }
}

/* Bordures tissées (tapis kabyle) et thichrad */
.f-weave { fill: none; stroke: url(#f-tapis); stroke-width: 11; }
.f-weave.is-main { stroke-width: 18; }
.f-tichrad { color: #1c1517; opacity: .62; }
.f-door-main .f-tichrad { color: var(--rouge); opacity: .9; }

/* Motifs de tapis kabyle dans les pièces (noir, blanc, ocre) */
.frise-fine { height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' viewBox='0 0 64 44'%3E%3Crect width='64' height='44' fill='%23fbfaf7'/%3E%3Crect width='64' height='6' fill='%231c1517'/%3E%3Crect y='38' width='64' height='6' fill='%231c1517'/%3E%3Cpath d='M0 6L16 22L0 38Z M64 6L48 22L64 38Z' fill='%23c8902e'/%3E%3Cpath d='M32 9L45 22L32 35L19 22Z' fill='%231c1517'/%3E%3Cpath d='M32 15L39 22L32 29L25 22Z' fill='%23c8902e'/%3E%3Cpath d='M32 19.5L34.5 22L32 24.5L29.5 22Z' fill='%23fbfaf7'/%3E%3Ccircle cx='16' cy='22' r='2' fill='%231c1517'/%3E%3Ccircle cx='48' cy='22' r='2' fill='%231c1517'/%3E%3C/svg%3E") repeat-x center / auto 30px; opacity: 1; }
.head-arch.has-image { padding: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23c8902e'/%3E%3Cpath d='M12 3L21 12L12 21L3 12Z' fill='%231c1517'/%3E%3Cpath d='M12 8L16 12L12 16L8 12Z' fill='%23fbfaf7'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23c8902e'/%3E%3Cpath d='M0 0L3 3L0 6Z M24 0L21 3L24 6Z M0 18L3 21L0 24Z M24 18L21 21L24 24Z' fill='%23fbfaf7'/%3E%3C/svg%3E") repeat center / 32px 32px; border: 1.5px solid var(--encre); }
.head-arch.has-image img { border-radius: 999px 999px 0 0; border: 1.5px solid var(--encre); background: var(--blanc); }
.side-note { position: relative; box-shadow: none; padding-left: 40px; }
.side-note::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23c8902e'/%3E%3Cpath d='M12 3L21 12L12 21L3 12Z' fill='%231c1517'/%3E%3Cpath d='M12 8L16 12L12 16L8 12Z' fill='%23fbfaf7'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23c8902e'/%3E%3Cpath d='M0 0L3 3L0 6Z M24 0L21 3L24 6Z M0 18L3 21L0 24Z M24 18L21 21L24 24Z' fill='%23fbfaf7'/%3E%3C/svg%3E") repeat-y center top / 16px 16px; }

/* ================================================================ Façade photographique interactive */
.facade { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); container-type: inline-size; }
.facade-img { width: 100%; height: auto; display: block; }
.f-spot { position: absolute; display: block; border-radius: 999px 999px 4px 4px; outline: none; }
.f-spot::before { content: ''; position: absolute; inset: -18%; border-radius: inherit; background: radial-gradient(ellipse at 50% 55%, rgba(255,214,140,.75), rgba(255,170,80,.25) 45%, transparent 72%); mix-blend-mode: screen; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.f-spot::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(12,10,24,0); transition: box-shadow .45s ease; pointer-events: none; }
.f-spot:hover::before, .f-spot:focus-visible::before { opacity: 1; }
.f-spot:hover::after, .f-spot:focus-visible::after { box-shadow: 0 0 0 2px rgba(255,222,160,.9), 0 0 24px 4px rgba(255,190,100,.55), 0 0 0 9999px rgba(12,10,24,.42); }
.f-spot:hover, .f-spot:focus-visible { z-index: 2; }
.f-spot.is-door { border-radius: 999px 999px 2px 2px; }
.f-spot.is-door::before { background: radial-gradient(ellipse at 50% 60%, rgba(255,120,110,.55), rgba(255,170,90,.2) 50%, transparent 75%); }
.f-spot.is-soon { cursor: default; }
.f-spot.is-soon::before { background: linear-gradient(90deg, transparent 44%, rgba(255,214,140,.9) 50%, transparent 56%); inset: 4% 0; }
.f-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); white-space: nowrap; background: rgba(23,20,38,.92); color: #fbfaf7; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,214,140,.5); text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 3; }
.f-tip strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.f-tip em { display: block; font-family: var(--serif); font-size: 15px; color: #f3d9a6; }
.f-spot.tip-below .f-tip { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -6px); }
.f-spot:hover .f-tip, .f-spot:focus-visible .f-tip { opacity: 1; transform: translate(-50%, 0); }
.f-spot.is-door .f-tip { background: var(--rouge); border-color: rgba(255,255,255,.4); }
.f-flame { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,140,.55), transparent 65%); mix-blend-mode: screen; pointer-events: none; animation: flicker 3.2s ease-in-out infinite; }
.f-twinkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff7df; box-shadow: 0 0 6px 2px rgba(255,247,223,.7); pointer-events: none; animation: twinkle 4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .55; transform: scale(1); } 30% { opacity: .9; transform: scale(1.06); } 55% { opacity: .65; } 75% { opacity: .95; transform: scale(1.03); } }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .f-flame, .f-twinkle { animation: none; } }
@media (max-width: 720px) {
  .facade { border-radius: 0; margin: 0 calc(-1 * var(--gouttiere)); }
  .f-tip { display: none; }
  .f-spot:active::before { opacity: 1; }
}

#plan, #member-title { scroll-margin-top: 90px; }

/* ================================================================ Hall : lumière dorée qui mène à la Maison */
.hall-hero { position: relative; overflow: hidden; padding-bottom: clamp(120px, 14vw, 200px);
  background:
    radial-gradient(ellipse 55% 50% at 72% 28%, rgba(255,244,214,.95), rgba(255,226,160,.35) 45%, transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255,170,80,.35), transparent 70%),
    linear-gradient(180deg, #fdf3d8 0%, #f6dfa6 30%, #ecc173 52%, #d79a4e 68%, #8e5a40 84%, #3a2a3f 94%, #1d1b33 100%); }
.hall-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,250,230,.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,236,180,.9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,250,230,.8) 0 1.2px, transparent 2.2px);
  background-size: 180px 160px, 240px 210px, 310px 260px;
  background-position: 20px 30px, 120px 90px, 60px 150px;
  opacity: .55; animation: poussiere 7s ease-in-out infinite alternate; }
.hall-hero::after { content: ''; position: absolute; inset: -20% -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 48%, rgba(255,240,200,.15) 52%, transparent 60%);
  mix-blend-mode: soft-light; animation: miroitement 11s ease-in-out infinite; }
.hall-hero > * { position: relative; z-index: 1; }
.hall-hero .lead { color: #5b3d22; }
.hall-hero .room-name { color: #7a5228; }
.hall-hero .btn-line { border-color: #5b3d22; color: #3e2814; background: rgba(255,248,230,.35); }
.hall-hero .btn-line:hover { color: var(--rouge); border-color: var(--rouge); }
.hall-arch { box-shadow: 0 2px 4px rgba(90,50,10,.1), 0 40px 70px -14px rgba(120,60,10,.45), inset 0 0 0 10px #fffaf0, inset 0 0 0 11.5px #c8902e; }
.arch-shadow { background: linear-gradient(160deg, #e9b65c, #b0162e); }
.hall-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #ffe2a3; text-decoration: none; font-family: var(--serif); font-style: italic; font-size: 20px; text-shadow: 0 0 18px rgba(255,190,100,.6); }
.hall-cue svg { animation: invite 2.4s ease-in-out infinite; }
.hall-cue:hover { color: #fff3d6; }
.plan-section { background: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255,200,120,.10), transparent 70%), linear-gradient(180deg, #1d1b33 0%, #262038 55%, #34283f 100%); padding-top: clamp(24px, 4vw, 48px); }
@keyframes miroitement { 0% { transform: translateX(-30%); } 50% { transform: translateX(30%); } 100% { transform: translateX(-30%); } }
@keyframes poussiere { from { opacity: .35; transform: translateY(0); } to { opacity: .7; transform: translateY(-12px); } }
@keyframes invite { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hall-hero::before, .hall-hero::after, .hall-cue svg { animation: none; } }
@media (max-width: 900px) { .hall-hero { padding-bottom: 130px; } }
/* Retouches : arche crème dorée, sans poussière en grille */
.hall-hero::before { display: none; }
.hall-arch { background: radial-gradient(ellipse at 50% 40%, #fffaf0, #fbedc9 75%); }
.hall-medal { border-color: #fff6e2; }
.hall-arch img { mix-blend-mode: multiply; }
.head-arch.has-image img.is-drawing { mix-blend-mode: multiply; }
/* Coucher de soleil sur la mer à Azeffoune : or, orange, rouge, puis la nuit */
.hall-hero {
  background:
    radial-gradient(ellipse 22% 16% at 50% 86%, rgba(255,236,170,1), rgba(255,178,90,.85) 40%, rgba(232,80,50,.0) 75%),
    radial-gradient(ellipse 70% 30% at 50% 86%, rgba(255,120,60,.55), rgba(190,40,50,.35) 50%, transparent 75%),
    radial-gradient(ellipse 55% 45% at 72% 26%, rgba(255,244,214,.9), rgba(255,226,160,.3) 45%, transparent 70%),
    linear-gradient(180deg, #fdefcd 0%, #f9dc9c 26%, #f4c172 46%, #ee9a52 62%, #e0623a 74%, #b8303a 83%, #6c2140 90.5%, #2e1f3c 96%, #1d1b33 100%);
}
/* L'horizon de la mer et le scintillement du soleil sur l'eau */
.hall-hero::before { display: block; content: ''; position: absolute; left: 0; right: 0; top: 88%; height: 9%; pointer-events: none; opacity: 1; animation: scintille 5s ease-in-out infinite alternate;
  background:
    linear-gradient(180deg, rgba(255,214,150,.55) 0 1px, transparent 1px),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255,200,120,.22) 7px 8px),
    radial-gradient(ellipse 14% 100% at 50% 0%, rgba(255,214,140,.65), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  background-size: auto, auto, auto; transform: none; }
.hall-cue { bottom: 4.5%; color: #fff1cf; text-shadow: 0 0 14px rgba(120,20,30,.8); }
@keyframes scintille { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hall-hero::before { animation: none; } }
/* Le soleil se pose sur l'horizon, l'invitation passe au-dessus de la mer */
.hall-hero {
  background:
    radial-gradient(ellipse 13% 9% at 50% 88%, rgba(255,240,190,1), rgba(255,190,100,.9) 45%, rgba(240,110,60,0) 80%),
    radial-gradient(ellipse 60% 22% at 50% 88%, rgba(255,130,60,.55), rgba(190,40,50,.3) 55%, transparent 78%),
    radial-gradient(ellipse 55% 45% at 72% 26%, rgba(255,244,214,.9), rgba(255,226,160,.3) 45%, transparent 70%),
    linear-gradient(180deg, #fdefcd 0%, #f9dc9c 26%, #f4c172 46%, #ee9a52 62%, #e0623a 74%, #b8303a 83%, #6c2140 90.5%, #2e1f3c 96%, #1d1b33 100%);
}
.hall-cue { bottom: auto; top: calc(88% - 92px); }
.hall-cue span { padding: 4px 14px; border-radius: 99px; background: rgba(60,15,30,.35); backdrop-filter: blur(2px); }
@media (max-width: 900px) {
  .hall-hero { padding-bottom: 170px; background:
    radial-gradient(ellipse 30% 5% at 50% 91%, rgba(255,240,190,1), rgba(255,190,100,.9) 45%, rgba(240,110,60,0) 80%),
    radial-gradient(ellipse 90% 12% at 50% 91%, rgba(255,130,60,.55), rgba(190,40,50,.3) 55%, transparent 78%),
    linear-gradient(180deg, #fdefcd 0%, #f9dc9c 22%, #f4c172 44%, #ee9a52 62%, #e0623a 76%, #b8303a 85%, #6c2140 92%, #2e1f3c 97%, #1d1b33 100%); }
  .hall-hero::before { top: 91%; height: 7%; }
  .hall-cue { top: calc(91% - 92px); }
}
.hall-cue span { white-space: nowrap; }
@media (max-width: 900px) { .hall-hero { padding-bottom: 200px; } .hall-cue { font-size: 18px; } }
/* ================================================================ Transition douce : soleil couchant → nuit de la façade */
:root { --nuit-photo: #0d3170; --nuit-profonde: #0a2456; }
.hall-hero, .hall-hero[class] {
  padding-bottom: clamp(220px, 22vw, 320px);
  background:
    radial-gradient(ellipse 16% 7% at 50% 80%, rgba(255,238,185,.95), rgba(255,180,95,.75) 45%, rgba(240,110,60,0) 85%),
    radial-gradient(ellipse 75% 20% at 50% 80%, rgba(255,128,64,.42), rgba(190,40,60,.22) 55%, transparent 80%),
    radial-gradient(ellipse 55% 40% at 72% 24%, rgba(255,244,214,.9), rgba(255,226,160,.3) 45%, transparent 70%),
    linear-gradient(180deg,
      #fdefcd 0%, #f9dc9c 20%, #f4c172 36%, #ee9a52 50%, #e3713f 60%, #c94a3e 68%,
      #9c3346 75%, #6e2a52 81%, #47295f 86%, #2a2e6a 91%, #16306c 96%, var(--nuit-photo) 100%);
}
.hall-hero::before { top: 80%; height: 14%;
  background: radial-gradient(ellipse 18% 100% at 50% 0%, rgba(255,214,140,.45), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.hall-cue { top: calc(80% - 96px); }
.plan-section, .plan-section[class] {
  border: 0; padding-top: clamp(8px, 2vw, 24px);
  background: linear-gradient(180deg, var(--nuit-photo) 0%, var(--nuit-profonde) 55%, #0b1d43 100%);
}
/* La photo se fond dans le ciel : bords adoucis, sans cadre */
.facade { border-radius: 0; box-shadow: none; max-width: 1180px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect; }
.f-tip { z-index: 5; }

/* Les étages */
.floors { max-width: 1180px; margin: 32px auto 0; display: grid; gap: 28px; }
.floor h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: #fff3d6; font-size: 26px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,214,140,.35); }
.floor h3 span { font-family: var(--sans); font-size: 15px; font-weight: 500; color: #e9c98a; }
.floor .room-index { margin-top: 0; }
.plan-section .room-index span:not(.pip) { color: #c5cde0; }
.plan-section .pip { box-shadow: 0 0 0 2px var(--nuit-profonde), 0 0 0 3px var(--accent); }
@media (max-width: 900px) {
  .hall-hero, .hall-hero[class] { padding-bottom: 230px;
    background:
      radial-gradient(ellipse 34% 4% at 50% 86%, rgba(255,238,185,.95), rgba(255,180,95,.75) 45%, rgba(240,110,60,0) 85%),
      linear-gradient(180deg, #fdefcd 0%, #f9dc9c 18%, #f4c172 34%, #ee9a52 50%, #e3713f 62%, #c94a3e 71%, #9c3346 78%, #6e2a52 84%, #47295f 89%, #2a2e6a 94%, var(--nuit-photo) 100%); }
  .hall-hero::before { top: 86%; height: 9%; }
  .hall-cue { top: calc(86% - 96px); }
  .facade { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
}
.floors, .floor, .floor .room-index { min-width: 0; }
.floor .room-index { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.room-index, .next-rooms ul { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

/* Précommande */
.preorder { display: grid; gap: 12px; margin-top: 20px; padding: 22px; background: var(--chaux); border: 1px solid var(--ligne); }
.preorder h2 { font-size: 28px; margin: 0; }
.preorder fieldset { border: 1px solid var(--ligne); padding: 10px 14px; margin: 0; background: var(--blanc); }
.preorder legend { font-weight: 600; padding: 0 6px; }
.preorder .check { color: var(--encre); font-size: 15px; }
.preorder .check small { color: var(--gris); }
.preorder .two { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.preorder-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.preorder-total strong { font-size: 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[data-address][hidden] { display: none; }

/* Le Patio : la cour pavée devant la Maison */
.f-spot.is-court { border-radius: 40% 40% 8px 8px / 60% 60% 8px 8px; }
.f-spot.is-court::before { inset: -30% -4%; background: radial-gradient(ellipse at 50% 70%, rgba(255,214,140,.6), rgba(255,170,80,.2) 50%, transparent 75%); }
.facade, .facade[class] {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 97%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 97%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
@media (max-width: 900px) {
  .facade, .facade[class] { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 97%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 97%, transparent 100%); }
}

/* Nouvelle façade au coucher du soleil : la transition rejoint le ciel crépusculaire */
:root { --nuit-photo: #3a3566; --nuit-profonde: #23203f; }
.hall-hero, .hall-hero[class] {
  background:
    radial-gradient(ellipse 16% 7% at 50% 80%, rgba(255,238,185,.95), rgba(255,180,95,.75) 45%, rgba(240,110,60,0) 85%),
    radial-gradient(ellipse 75% 20% at 50% 80%, rgba(255,128,64,.42), rgba(190,40,60,.22) 55%, transparent 80%),
    radial-gradient(ellipse 55% 40% at 72% 24%, rgba(255,244,214,.9), rgba(255,226,160,.3) 45%, transparent 70%),
    linear-gradient(180deg, #fdefcd 0%, #f9dc9c 20%, #f4c172 36%, #ee9a52 50%, #e3713f 60%, #c94a3e 68%, #9c3346 76%, #7a3456 83%, #5a3561 90%, #463566 96%, var(--nuit-photo) 100%);
}
.plan-section, .plan-section[class] { background: linear-gradient(180deg, var(--nuit-photo) 0%, #2c2950 50%, var(--nuit-profonde) 100%); }
.f-spot.is-pergola { border-radius: 10px; }
.f-spot.is-pergola::before { inset: -10%; background: radial-gradient(ellipse at 50% 60%, rgba(255,214,140,.55), rgba(255,170,80,.2) 50%, transparent 75%); }
.f-spot:not(.is-door):not(.is-pergola) { border-radius: 999px 999px 6px 6px; }
@media (max-width: 900px) {
  .hall-hero, .hall-hero[class] { background:
    radial-gradient(ellipse 34% 4% at 50% 86%, rgba(255,238,185,.95), rgba(255,180,95,.75) 45%, rgba(240,110,60,0) 85%),
    linear-gradient(180deg, #fdefcd 0%, #f9dc9c 18%, #f4c172 34%, #ee9a52 50%, #e3713f 62%, #c94a3e 71%, #9c3346 79%, #7a3456 86%, #5a3561 92%, var(--nuit-photo) 100%); }
}