/* ============================================================
   AUREA : couche d'interaction des plans (portée depuis la
   preview figée du 06/09). Aucune dépendance, vanilla only.
   Les tokens de base viennent de design-tokens.css. Deux tokens
   manquent : ils sont ajoutés ici, scopés à .c-plan.
   ============================================================ */

.c-plan{
  --cam-ease:cubic-bezier(.22,1,.36,1);
  --ls3:.2em;
  /* Fond clair opaque : le champ chromatique #morph (bronze puis cacao en bas
     de page) ne doit jamais passer derriere les plans. Trait --encre sur clair. */
  position:relative;
  z-index:0;
  background:var(--bg);
}

/* Titre de section (Bentham garanti, indépendant des défauts de site.css) */
.c-plan .plan-title{font-family:var(--font-title);font-weight:400;text-transform:uppercase;letter-spacing:var(--title-tracking);font-size:clamp(30px,5vw,52px);line-height:1;margin:0;color:var(--ink)}
.c-plan .plan-lead{max-width:52ch;color:var(--ink-soft);font-size:14px;margin:14px 0 0}
.c-plan .plan-intro{margin-bottom:clamp(22px,3vw,34px)}

.plan{position:relative}
/* Enveloppe scene + fiche : contexte de positionnement pour le panneau.
   Sa hauteur suit la scene (le panneau est en absolu, hors flux), mais elle
   ne rogne rien : la fiche peut donc etre plus haute que le plan sans etre coupee. */
.plan-stagewrap{position:relative}
.plan-toggle{display:inline-flex; margin:0 0 22px; padding:4px; border:1px solid var(--bronze);
  border-radius:999px; background:var(--blanc-pur)}
.plan-toggle button{appearance:none; border:0; cursor:pointer; background:transparent;
  font-family:var(--font-body); font-weight:400; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); padding:9px 18px; border-radius:999px;
  transition:background .25s ease,color .25s ease}
.plan-toggle button:hover{color:var(--ink)}
.plan-toggle button.is-sel{background:var(--bronze); color:var(--blanc-pur)}
.plan-toggle button:focus-visible{outline:2px solid var(--bronze); outline-offset:2px}

/* Scene de plan : meme gabarit pour les deux villas (calcule sur le ratio VH) */
/* La feuille du plan : fond le plus clair (plus clair que le remplissage des
   pieces --sable-clair) pour que pieces ET trait --encre ressortent nettement. */
.stage{position:relative; width:100%; aspect-ratio:1665 / 1015; max-height:min(640px,80vh); margin-inline:auto; overflow:hidden;
  background:var(--blanc-pur); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 1px 2px rgba(74,59,44,.04), 0 14px 38px rgba(74,59,44,.06)}
.level{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(1.015); transition:opacity .4s var(--cam-ease), transform .4s var(--cam-ease);
  pointer-events:none; will-change:opacity}
.level.is-shown{opacity:1; transform:scale(1); pointer-events:auto}
.level svg{height:100%; width:auto; max-width:100%; max-height:100%; display:block}

/* viewBox v2 ~2x plus petit : traits non mis a l'echelle pour garder une epaisseur constante a l'ecran. */
.level svg polygon[data-piece]{vector-effect:non-scaling-stroke;transition:fill .18s ease, stroke .18s ease, stroke-width .18s ease, opacity .25s ease}
.g-line{transition:opacity .25s ease}
/* Survol : le plan reste entierement lisible, seule la piece pointee se revele
   (remplissage beige doux + fin lisere bronze). Aucun assombrissement d'ensemble. */
.level.is-focus .g-line{opacity:1}
.level.is-focus polygon[data-piece]{opacity:1}
.level.is-focus polygon[data-piece].is-hover{opacity:1; fill:var(--beige); stroke:var(--bronze); stroke-width:1.5}
.level polygon[data-piece].is-active{fill:var(--beige); stroke:var(--bronze); stroke-width:2; opacity:1}
/* Clic (fiche ouverte) : tamisage volontaire des pieces non actives, inchange. */
.level.is-zoom .g-line{opacity:.45}
.level.is-zoom polygon[data-piece]:not(.is-active){opacity:.45}
polygon[data-piece][role="button"]:focus-visible{fill:var(--beige); stroke:var(--bronze); stroke-width:2}

.plan-hint{position:fixed; z-index:60; pointer-events:none; opacity:0;
  transform:translate(-50%,-140%); transition:opacity .15s ease; background:var(--blanc-pur);
  border:1px solid var(--line); padding:7px 12px 6px; text-align:center; white-space:nowrap}
.plan-hint.is-on{opacity:1}
.plan-hint .hint-name{display:block; font-family:var(--font-body); font-weight:500; font-size:10px;
  letter-spacing:var(--ls3); text-transform:uppercase; color:var(--ink)}
.plan-hint .hint-surf{display:block; font-size:11px; color:var(--ink-soft); margin-top:1px}

.plan-legal{margin:16px 0 0; font-family:var(--font-body); font-weight:300; font-size:11px;
  letter-spacing:var(--ls3); color:var(--ink-soft)}

/* ---- Panneau premium ---- */
/* Carte flottante, decouplee de la hauteur plafonnee de .stage : elle se
   dimensionne sur son contenu (image + texte), centree verticalement sur la
   scene, jusqu'a 90vh. Au-dela, defilement interne propre via .pl-scroll. */
.plan-panel{position:absolute; top:50%; right:0; width:440px; max-width:88vw; max-height:90vh;
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  box-shadow:-20px 0 46px rgba(74,59,44,.16), 0 12px 30px rgba(74,59,44,.10);
  transform:translate(100%,-50%);
  transition:transform .45s var(--cam-ease); z-index:50; display:flex; flex-direction:column;
  overflow:hidden; visibility:hidden}
.plan-panel.is-open{transform:translate(0,-50%); visibility:visible}
.pl-scroll{flex:1 1 auto; min-height:0; overflow-y:auto}
.pl-close{position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:2px;
  cursor:pointer; border:0; background:rgba(246,239,227,.72); color:var(--ink); display:grid;
  place-items:center; transition:background .2s ease}
.pl-close svg{width:15px; height:15px; stroke:var(--ink); stroke-width:1.4; fill:none}
.pl-close:hover{background:var(--blanc-pur)}
.pl-close:focus-visible{outline:2px solid var(--bronze); outline-offset:2px}

.pl-media{position:relative; width:100%; aspect-ratio:3 / 2; overflow:hidden; background:var(--sable-clair)}
.pl-media .shot{position:absolute; inset:0; opacity:0; transition:opacity .3s ease}
.pl-media .shot.is-active{opacity:1}
.pl-media .shot img,.pl-media .shot picture{display:block; width:100%; height:100%; object-fit:cover; filter:none}
.pl-media.enter .shot.is-active img{animation:shotin .9s var(--cam-ease) both}
.pl-media.placeholder .shot img{opacity:.85}
@keyframes shotin{from{transform:scale(1.05)} to{transform:scale(1)}}
.pl-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:2px;
  border:1px solid rgba(246,239,227,.7); background:rgba(74,59,44,.26); cursor:pointer; display:grid;
  place-items:center; transition:background .2s ease; z-index:2}
.pl-arrow:hover{background:rgba(74,59,44,.5)}
.pl-arrow:focus-visible{outline:2px solid var(--blanc-pur); outline-offset:2px}
.pl-arrow svg{width:16px; height:16px; stroke:#F6EFE3; stroke-width:1.5; fill:none}
.pl-arrow.prev{left:10px} .pl-arrow.next{right:10px}
.pl-count{position:absolute; bottom:10px; right:12px; z-index:2; font-family:var(--font-body);
  font-weight:400; font-size:11px; letter-spacing:.1em; color:#F6EFE3; background:rgba(74,59,44,.42);
  padding:3px 9px; border-radius:2px}

.pl-body{padding:26px 28px 44px}
.pl-name{font-family:var(--font-title); font-weight:400; font-size:26px; line-height:1.15;
  letter-spacing:.02em; margin:0; color:var(--encre)}
.pl-surface{font-family:var(--font-body); font-weight:400; font-size:11px; letter-spacing:var(--ls3);
  text-transform:uppercase; color:var(--encre-soft); margin:8px 0 0}
.pl-rule{border:0; border-top:1px solid var(--bronze); margin:18px 0}
.pl-ambiance{font-size:14px; color:var(--encre); margin:0}
.pl-mat-t{font-family:var(--font-body); font-weight:400; text-transform:uppercase;
  letter-spacing:var(--ls3); font-size:10.5px; color:var(--encre-soft); margin:0 0 6px}
.pl-mat{list-style:none; margin:0; padding:0}
.pl-mat li{font-size:13px; color:var(--encre); padding:8px 0; border-top:1px solid var(--line)}
.pl-mat li:first-child{border-top:0; padding-top:0}
/* apparition echelonnee */
.pl-rev{opacity:0; transform:translateY(12px); transition:opacity .5s var(--cam-ease), transform .5s var(--cam-ease)}
.pl-body.in .pl-rev{opacity:1; transform:translateY(0)}

.plan-backdrop{position:fixed; inset:0; background:rgba(74,59,44,.28); z-index:45; opacity:0;
  visibility:hidden; transition:opacity .3s ease}
.plan-backdrop.is-on{opacity:1; visibility:visible}

@media (max-width:899px){
  .plan-panel{position:fixed; top:auto; left:0; right:0; bottom:0; width:100%; max-width:100%;
    max-height:88vh; border:0; border-top:1px solid var(--line);
    border-radius:4px 4px 0 0; box-shadow:0 -12px 34px rgba(74,59,44,.18); transform:translateY(100%)}
  .plan-panel.is-open{transform:translateY(0)}
  .plan-panel::before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:42px; height:4px; border-radius:2px; background:var(--line); z-index:4}
  .pl-media{aspect-ratio:3 / 2}
  .pl-body{padding-top:22px}
}

@media (prefers-reduced-motion:reduce){
  .level,.plan-panel,.plan-backdrop,.g-line,.plan-hint,.plan-toggle button,
  .level svg polygon[data-piece],.pl-media .shot,.pl-rev,.pl-close,.pl-arrow{transition:none !important}
  .pl-media.enter .shot.is-active img{animation:none !important}
  .level{transform:none}
  .pl-rev{opacity:1; transform:none}
}