/* ============================================================
   DOONI — page STUDIO (couche web)
   Réutilise dooni-web.css + sections.css. Ne redéfinit que ce
   qui est propre au Studio : galerie usage, plan annoté 2D,
   table de specs fiche-technique, formules développées.
   ============================================================ */

/* ---------- 01 · EN-TÊTE STUDIO ---------- */
.studio-hero { padding: clamp(36px,5vw,80px) var(--gutter) clamp(30px,4vw,56px); }
.studio-hero .lede { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(28px,4vw,64px); align-items: end; }
.studio-hero .sub { max-width: 460px; }
.studio-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); border-left: var(--rule); }
.studio-stats .st { border-right: var(--rule); border-bottom: var(--rule); padding: clamp(18px,2.2vw,28px) clamp(20px,2.4vw,30px); }
.studio-stats .st .v { font-family: var(--font-poster); font-weight: var(--poster-weight); text-transform: uppercase; font-size: clamp(34px,4vw,58px); line-height: 0.9; color: var(--structure); }
.studio-stats .st .k { margin-top: 8px; }

/* ---------- 02 · L'ESPACE EN IMAGES (galerie usage) ---------- */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); border-top: var(--rule); border-left: var(--rule); }
.gcell { border-right: var(--rule); border-bottom: var(--rule); }
.gcell.w3 { grid-column: span 3; }
.gcell.w2 { grid-column: span 2; }
.gcell.w4 { grid-column: span 4; }
.gcell.w6 { grid-column: span 6; }
.gcell .frame { position: relative; background: var(--ink-100); }
.gcell image-slot { display: block; width: 100%; }
.gcell .cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px clamp(16px,1.8vw,22px); border-top: var(--rule); }
.gcell .cap .use { font-family: var(--font-read); font-size: 15px; line-height: 1.4; color: var(--structure); max-width: 320px; }
.gcell .cap .use b { font-weight: 700; }
.gcell .cap .ref { white-space: nowrap; }

/* ---------- 03 · MODULARITÉ (plan pleine largeur) ----------
   En-tête compact en haut, plan en pleine largeur dessous, une
   phrase de contexte. */
.modu-intro { max-width: 940px; }
.modu-intro .w-lead { margin-top: clamp(16px,2vw,26px); max-width: 780px; }
.modu-foot { margin-top: clamp(18px,2.2vw,28px); max-width: 720px; }

/* le plan : planche technique, filet noir fin, de l'air autour */
.plan-wrap { border: var(--rule); background: var(--surface); padding: clamp(20px,2.6vw,40px); margin-top: clamp(26px,3.4vw,48px); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px clamp(14px,1.6vw,20px); }
/* ------------------------------------------------------------
   LE PLAN — SVG fourni (plan-studio-dooni.svg), inliné pour garder
   le survol. Structure FIXE (pas de cloison mobile). Achromatique
   au repos ; jaune (--trace) au survol d'une zone uniquement.
   Jamais de rose ni de cyan ici.
   ------------------------------------------------------------ */
.plan-svg { width: 100%; }
.plan-svg svg { width: 100%; height: auto; display: block; }

/* zones : remplissage gris très clair, contour noir */
.plan-svg .zone rect { fill: var(--ink-100); stroke: var(--structure); stroke-width: 2; transition: fill var(--t-fast); }
.plan-svg .zone text { font-family: var(--font-tech); text-anchor: middle; }
.plan-svg .zn { fill: var(--ink-500); font-weight: 600; font-size: 14px; letter-spacing: 0.13em; transition: fill var(--t-fast); }
.plan-svg .za { fill: var(--ink-300); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; transition: fill var(--t-fast); }
/* SURVOL : la zone pointée et ses labels passent en jaune ; le reste reste gris */
.plan-svg .zone { cursor: default; }
.plan-svg .zone:hover rect { fill: var(--trace); }
.plan-svg .zone:hover .zn { fill: #000; }
.plan-svg .zone:hover .za { fill: rgba(0,0,0,0.6); }

/* portes : traits noirs épais (ouvertures dans les cloisons fixes) */
.plan-svg .door { stroke: var(--structure); stroke-width: 5; stroke-linecap: butt; }

/* légende interne : mono gris, alignée à gauche */
.plan-svg .leg { font-family: var(--font-tech); text-anchor: start; fill: var(--ink-500); font-size: 12px; letter-spacing: 0.1em; }

/* ---------- 04 · SPECS & ÉQUIPEMENT (table fiche technique) ---------- */
.specs { border-top: var(--rule); }
.spec-row { display: grid; grid-template-columns: 56px 1fr 1.2fr; align-items: baseline; gap: 18px; padding: 16px var(--gutter); border-bottom: var(--hair); }
.spec-row:hover { background: var(--ink-100); }
.spec-row .si { font-family: var(--font-tech); font-size: 12px; color: var(--ink-300); letter-spacing: 0.08em; }
.spec-row .sk { font-family: var(--font-tech); font-weight: 600; font-size: 13px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--structure); }
.spec-row .sv { font-family: var(--font-read); font-size: 16px; color: var(--ink-700); }
.spec-row .sv b { color: var(--structure); font-weight: 700; }
.specs-foot { padding: 18px var(--gutter); border-top: var(--rule); }

/* ---------- 05 · FORMULES DÉVELOPPÉES ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); border-left: var(--rule); margin-top: clamp(24px,3vw,40px); }
.tier { border-right: var(--rule); border-bottom: var(--rule); padding: clamp(24px,3vw,36px); display: flex; flex-direction: column; }
.tier.feature { background: var(--ink-100); }
.tier .t-idx { color: var(--ink-500); }
.tier .t-name { margin: 14px 0 2px; }
.tier .t-fr { font-family: var(--font-read); font-style: italic; color: var(--ink-500); font-size: 15px; }
.tier .t-price { font-family: var(--font-poster); font-weight: var(--poster-weight); font-size: clamp(40px,4.6vw,64px); line-height: 0.9; color: var(--structure); margin: 20px 0 2px; }
.tier .t-price small { font-family: var(--font-tech); font-size: 14px; letter-spacing: 0.08em; }
.tier .t-line { margin: 14px 0 18px; }
.tier .t-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tier .t-list li { display: flex; gap: 10px; font-family: var(--font-read); font-size: 15px; line-height: 1.4; color: var(--ink-700); }
.tier .t-list li .tick { color: var(--structure); font-family: var(--font-tech); }
.tier .t-list li.off { color: var(--ink-300); }
.tier .t-list li.off .tick { color: var(--ink-300); }
.tier .t-cta { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* encart pré-appel : seul endroit du site */
.precall { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,3vw,40px); align-items: center; border: var(--rule); padding: clamp(22px,3vw,34px) clamp(24px,3vw,40px); margin-top: clamp(28px,3vw,44px); }
.precall .pc-badge { width: 64px; height: 64px; border: var(--rule); display: grid; place-items: center; font-family: var(--font-tech); font-weight: 600; font-size: 12px; text-align: center; line-height: 1.1; letter-spacing: 0.06em; background: var(--action-secondary); }
.precall .pc-copy h4 { margin: 0 0 6px; }
.precall .pc-copy p { margin: 0; max-width: 520px; }

/* ---------- 06 · BANDEAU CAFÉ (réutilise footer-cta) ---------- */

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 880px) {
  .studio-hero .lede { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gcell.w3, .gcell.w2, .gcell.w4, .gcell.w6 { grid-column: span 1; }
  .tiers { grid-template-columns: 1fr; }
  .precall { grid-template-columns: 1fr; text-align: left; }
  .spec-row { grid-template-columns: 40px 1fr; }
  .spec-row .sv { grid-column: 2; }
}