/* Le Clos Amarante - V12.1 option 12 : plan de la maison interactif (agent D).
   VERSION TEST : charge uniquement pour les hotes connectes (voir inc/fx-plan.php).
   Sans JS : les trois etages s'affichent l'un sous l'autre (rien n'est masque).
   Avec JS : .ca-plan.is-ready -> onglets d'etage, survol, carte, lecteur. */
.ca-plan{
  --cp-ligne:rgba(74,53,32,.16);
  --cp-ligne-f:rgba(74,53,32,.3);
  --cp-blanc:#FBF8F2;
  --cp-or-pale:#E4D2A8;
  --cp-ease:cubic-bezier(.22,.61,.36,1);
  --cp-out:cubic-bezier(.16,1,.3,1);
  position:relative;
}
.ca-plan .cp-head{margin-bottom:44px}
.ca-plan .cp-intro{max-width:560px;margin:0 auto}

/* ---------- bandeau hotes (discret) ---------- */
.cp-host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;width:max-content;max-width:100%;margin:0 auto 34px;padding:7px 16px;border:1px dashed var(--or);border-radius:999px;background:rgba(201,169,106,.08);font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);text-align:center;line-height:1.5}
.cp-host svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--or);stroke-width:1.5}
.cp-host-x{flex-basis:100%;letter-spacing:.04em;text-transform:none;font-size:12px;color:var(--amarante)}

/* ---------- mise en page ---------- */
.cp-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.cp-stage{position:relative;background:var(--cp-blanc);border:1px solid var(--cp-ligne);border-radius:2px;padding:14px clamp(14px,2vw,26px) clamp(14px,2vw,22px)}
.cp-bar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--cp-ligne);margin-bottom:6px}
.cp-picto{width:34px;height:31px;flex:none;overflow:visible}
.cp-picto .pk-roof,.cp-picto .pk-ground{fill:none;stroke:var(--brun);stroke-width:1.1;stroke-linejoin:round}
.cp-picto .pk-l{fill:transparent;stroke:var(--or);stroke-width:1;transition:fill .45s var(--cp-ease),stroke .45s}
.cp-tabs{display:flex;gap:clamp(12px,2.4vw,30px);min-width:0}
.cp-tab{position:relative;background:none;border:0;padding:14px 2px 13px;margin:0;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);cursor:pointer;white-space:nowrap;transition:color .3s}
.cp-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--amarante);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--cp-out)}
.cp-tab:hover{color:var(--encre)}
.cp-tab[aria-selected="true"]{color:var(--amarante)}
.cp-tab[aria-selected="true"]::after{transform:none}
.cp-tab:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.cp-tab-s{display:none}

/* sans JS : etages empiles, titres visibles */
.cp-floor + .cp-floor{margin-top:22px;padding-top:18px;border-top:1px solid var(--cp-ligne)}
.cp-floor-t{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--brun);margin:8px 0 0}
.ca-plan:not(.is-ready) .cp-bar,.ca-plan:not(.is-ready) .cp-card{display:none}
.ca-plan:not(.is-ready) .cp-grid{grid-template-columns:1fr}

/* avec JS : un etage a la fois, meme case de grille (aucun saut de mise en page) */
.ca-plan.is-ready .cp-floors{display:grid}
.ca-plan.is-ready .cp-floor{grid-area:1/1;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s var(--cp-ease),transform .8s var(--cp-out),visibility 0s linear .45s}
.ca-plan.is-ready .cp-floor.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--cp-ease) .08s,transform .9s var(--cp-out) .04s,visibility 0s}
.ca-plan.is-ready .cp-floor.is-up{transform:translateY(-12px)}
.ca-plan.is-ready .cp-floor-t{display:none}

/* ---------- le plan (SVG) ---------- */
.cp-svg{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.cp-svg .zone{fill:var(--cp-blanc);stroke:var(--or);stroke-width:.8;transition:fill .35s var(--cp-ease)}
.cp-svg .is-out .zone{fill:rgba(239,231,216,.55)}
.cp-svg .pav{stroke:var(--or);stroke-width:.5;opacity:.45}
.cp-svg .mb{fill:none;stroke:var(--or);stroke-width:.85;stroke-linejoin:round;transition:stroke .35s}
.cp-svg .wf{fill:var(--creme-2);stroke:none}
.cp-svg .wt{stroke:var(--brun);stroke-width:1.2;stroke-linecap:round}
.cp-svg .wv{stroke:var(--brun);stroke-width:.6;opacity:.55}
.cp-svg .rail-f{fill:rgba(201,169,106,.07)}
.cp-svg .rail{stroke:var(--brun);stroke-width:.9;stroke-linecap:round}
.cp-svg .bal{stroke:var(--or);stroke-width:.6}
.cp-svg .gh{fill:none;stroke:var(--or);stroke-width:.7;stroke-dasharray:2 4;opacity:.5}
.cp-svg .st-floor{fill:var(--cp-blanc);stroke:var(--or);stroke-width:.8}
.cp-svg .st{stroke:var(--brun);stroke-width:.55;opacity:.45}
.cp-svg .st-ar{stroke:var(--or);stroke-width:.9}
.cp-svg .rue{stroke:var(--or);stroke-width:.8;stroke-dasharray:6 5}
.cp-svg .d-pente{stroke:var(--taupe);stroke-width:.8;stroke-dasharray:5 5;opacity:.7}
.cp-svg .d-poutre{stroke:var(--or);stroke-width:1.6;opacity:.55}
.cp-svg .lbl{font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;fill:var(--gris)}
.cp-svg .nl{font-family:var(--sans);font-size:9px;letter-spacing:.22em;fill:var(--taupe)}
.cp-svg .rn{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;fill:var(--brun);paint-order:stroke;stroke:var(--cp-blanc);stroke-width:3.5px;stroke-linejoin:round;transition:fill .3s,stroke .3s}
.cp-svg .rn-s{font-size:12.5px}
.cp-svg .rnum{display:none}
.cp-svg .rnum circle{fill:var(--cp-blanc);stroke:var(--or);stroke-width:1;transition:fill .3s,stroke .3s}
.cp-svg .rnum text{font-family:var(--sans);font-weight:400;font-size:21px;fill:var(--amarante)}

/* pieces : survol / selection = amarante doux */
.cp-room{cursor:pointer;outline:none}
.cp-room:hover .zone,.cp-room.is-cur .zone{fill:var(--amarante);fill-opacity:.8}
.cp-room:hover .mb,.cp-room.is-cur .mb,.cp-room:hover .pav,.cp-room.is-cur .pav{stroke:var(--cp-or-pale)}
.cp-room:focus-visible .zone{stroke:var(--or);stroke-width:3}
/* focus clavier : l'etiquette est soulignee d'or (le contour du sol est en partie cache par les murs) */
.cp-lab.is-kbd .rn{text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:1.5px;text-underline-offset:4px}
.cp-lab.is-kbd .rnum circle{stroke:var(--or);stroke-width:3}
.cp-lab.is-cur .rn{fill:var(--creme);stroke:var(--amarante)}
.cp-lab.is-cur .rnum circle{fill:var(--amarante);stroke:var(--amarante)}
.cp-lab.is-cur .rnum text{fill:var(--creme)}
/* piece sans photo : dessinee, nommee, non cliquable */
.cp-room.is-off{cursor:default}
.cp-room.is-off:hover .zone,.cp-room.is-off.is-cur .zone{fill:var(--taupe);fill-opacity:.16}
.cp-room.is-off:hover .mb,.cp-room.is-off.is-cur .mb{stroke:var(--or)}
.cp-lab.is-off .rn{fill:var(--taupe)}
.cp-lab.is-off.is-cur .rn{fill:var(--brun);stroke:var(--cp-blanc)}
.cp-lab.is-off.is-cur .rnum circle{fill:var(--cp-blanc);stroke:var(--brun)}
.cp-lab.is-off.is-cur .rnum text{fill:var(--brun)}
.cp-neutre .zone{fill:var(--cp-blanc)}

/* le pictogramme suit l'etage actif */
.ca-plan[data-f="0"] .cp-bar .pk-l[data-f="0"],.ca-plan[data-f="1"] .cp-bar .pk-l[data-f="1"],.ca-plan[data-f="2"] .cp-bar .pk-l[data-f="2"]{fill:var(--amarante);stroke:var(--amarante)}

/* ---------- carte de la piece ---------- */
.cp-card{margin:0;min-width:0}
.cp-ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--creme-2)}
.cp-ph-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .4s}
.cp-ph-ph .cp-picto{width:30%;height:auto;opacity:.75}
.cp-ph-ph .pk-l{stroke:var(--or)}
.cp-card.has-img .cp-ph-ph{opacity:0}
.cp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .5s var(--cp-ease),transform 1.1s var(--cp-out)}
.cp-img.is-show{opacity:1;transform:none}
.cp-img:not([src]){display:none}
.cp-txt{padding-top:20px}
.cp-et{display:block;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amarante)}
.cp-name{display:block;margin:8px 0 6px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.08;color:var(--encre)}
.cp-nb{display:block;font-size:13.5px;letter-spacing:.04em;color:var(--gris)}
.cp-hint{margin:12px 0 0;font-size:14px;color:var(--gris)}
.cp-open{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 0 6px;background:none;border:0;border-bottom:1px solid currentColor;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amarante);cursor:pointer}
.cp-open[hidden]{display:none}
.cp-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s var(--cp-out)}
.cp-open:hover svg{transform:translateX(4px)}
.cp-open:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.cp-txt.is-swap > *{animation:cpSwap .5s var(--cp-out) both}
.cp-txt.is-swap .cp-name{animation-delay:.04s}
.cp-txt.is-swap .cp-nb,.cp-txt.is-swap .cp-hint{animation-delay:.08s}
@keyframes cpSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- legende (telephone) ---------- */
.cp-legend{display:none;list-style:none;margin:12px 0 0;padding:0;grid-template-columns:1fr 1fr;gap:6px}
.cp-leg{width:100%;min-height:44px;display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--cp-ligne);background:var(--cp-blanc);padding:7px 10px;border-radius:2px;font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.25;color:var(--brun);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.cp-leg b{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--amarante);min-width:1em;text-align:center}
.cp-leg.is-cur{background:var(--amarante);border-color:var(--amarante);color:var(--creme)}
.cp-leg.is-cur b{color:var(--cp-or-pale)}
.cp-leg.is-off{color:var(--taupe);border-style:dashed}
.cp-leg.is-off b{color:var(--taupe)}
.cp-leg.is-off.is-cur{background:var(--creme-2);color:var(--brun);border-color:var(--cp-ligne-f)}
.cp-leg:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* ---------- tablette / telephone ---------- */
@media (max-width:900px){
  .cp-grid{grid-template-columns:1fr}
  .cp-card{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:16px;align-items:center}
  .cp-txt{padding:0}
  .cp-name{font-size:25px;margin:5px 0 4px}
  .cp-hint{font-size:13px;margin-top:6px}
  .cp-open{margin-top:8px}
}
@media (max-width:600px){
  .ca-plan .cp-head{margin-bottom:28px}
  .cp-host{font-size:9.5px;letter-spacing:.1em;padding:7px 14px;margin-bottom:24px;border-radius:14px}
  .cp-stage{padding:6px 10px 12px}
  .cp-bar{gap:10px}
  .cp-picto{width:28px;height:26px}
  .cp-tabs{gap:18px}
  .cp-tab{padding:14px 2px 12px;font-size:11px;letter-spacing:.16em}
  .cp-tab-s{display:inline;text-transform:none;letter-spacing:.06em;font-size:13.5px}
  .cp-tab-l{display:none}
  .cp-svg .rn{display:none}
  .cp-svg .rnum{display:inline}
  .cp-svg .nl{font-size:13px}
  .cp-svg .lbl{font-size:14px}
  .ca-plan .cp-legend{display:grid}
  .cp-hint{display:none}
}

/* ---------- mouvement reduit ---------- */
@media (prefers-reduced-motion:reduce){
  .ca-plan *,.ca-plan *::after{transition:none!important;animation:none!important}
  .ca-plan.is-ready .cp-floor,.ca-plan.is-ready .cp-floor.is-up{transform:none}
  .cp-img{transform:none}
}

/* V12.5 : titre de section = « Plan de la maison » en capitales espacees, agrandi (plus de sous-titre). */
.ca-plan .cp-head h2.cp-titre{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.3em;color:var(--amarante);font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.3;margin:0}
.ca-plan .cp-head h2.cp-titre::after{margin-top:22px}
/* ---- V13.23 : vue de dessus - les contours des pieces font les murs ---- */
.cp-svg .mur{fill:none;stroke:var(--brun);stroke-width:2.4;stroke-linejoin:round;pointer-events:none}
.cp-svg .mur-b{fill:none;stroke:var(--brun);stroke-width:1.2;stroke-dasharray:1 0;stroke-linejoin:round;opacity:.7;pointer-events:none}
.cp-svg .gh{stroke-dasharray:3 4}
.cp-svg .st{opacity:.6}