/* ==========================================================================
 * Soléa Studio V20.37 L67 — Accordéons panel Toiture
 * --------------------------------------------------------------------------
 * Refonte UX bug L67 (P1) : remplace les 4 sous-tabs horizontaux du panel
 * toiture (Forme/Matériau/Détails/Ouvertures) par des accordéons <details>
 * verticaux. Sidebar étroite → tabs débordaient + scroll horizontal pénible
 * → accordéons = lecture verticale naturelle, mutex un seul ouvert à la fois.
 *
 * Compat : les inner-div [data-studio-rooftab-content] gardent leur attribut
 * `hidden` (rétrocompat studio-roof-extended.js qui le toggle), mais on force
 * leur affichage via :not([hidden]) impossible — donc on override via CSS sur
 * le wrapper <details[open]> qui retire le `hidden` quand l'accordéon ouvre.
 * ========================================================================== */

/* Wrapper des 4 accordéons */
.studio-roof-acc-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

/* Accordéon parent */
.studio-roof-acc {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(168, 120, 68, 0.18);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.2s;
}

.studio-roof-acc:hover {
  border-color: rgba(199, 154, 109, 0.45);
}

.studio-roof-acc[open] {
  border-color: #c79a6d;
  background: rgba(168, 120, 68, 0.06);
  box-shadow: 0 2px 12px rgba(168, 120, 68, 0.08);
}

.studio-roof-acc summary {
  padding: 10px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(244, 240, 232, 0.92);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  transition: background 0.15s;
}

.studio-roof-acc summary::-webkit-details-marker { display: none; }
.studio-roof-acc summary::marker { display: none; }

.studio-roof-acc summary:hover {
  background: rgba(199, 154, 109, 0.06);
}

.studio-roof-acc summary:focus-visible {
  outline: 2px solid #c79a6d;
  outline-offset: -2px;
}

/* Caret chevron qui pivote */
.studio-roof-acc summary::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(244, 240, 232, 0.55);
  border-bottom: 1.5px solid rgba(244, 240, 232, 0.55);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s;
  flex-shrink: 0;
  margin-left: 4px;
}

.studio-roof-acc[open] > summary::after {
  transform: rotate(-135deg);
  border-color: #c79a6d;
}

.studio-roof-acc-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.studio-roof-acc-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.studio-roof-acc-hint {
  font-size: 10px;
  color: rgba(244, 240, 232, 0.45);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

/* Contenu visible quand l'accordéon est ouvert.
 * Le HTML conserve le `hidden` interne sur [data-studio-rooftab-content] pour
 * la rétrocompat avec studio-roof-extended.js (bindSubTabs qui toggle ce
 * `hidden`), mais cette règle force la visibilité quand le parent <details>
 * est ouvert (le `hidden` interne ne s'applique alors plus visuellement). */
.studio-roof-acc[open] > .studio-roof-section,
.studio-roof-acc[open] > [data-studio-rooftab-content] {
  display: block !important;
  padding: 0 12px 12px 12px;
}

/* Variante alternative : si le studio-roof-extended.js bind le tab et set
 * `hidden=true`, on neutralise visuellement quand on est dans un accordion ouvert. */
.studio-roof-acc[open] > [data-studio-rooftab-content][hidden] {
  display: block !important;
}

/* Quand l'accordéon est fermé, contenu invisible (default <details>) */
.studio-roof-acc:not([open]) > * {
  /* :not(summary) -- mais summary est traité par <details> natif */
}

/* Cacher complètement la nav sous-tabs legacy (déjà hidden, ceinture+bretelles) */
.studio-subtabs-roof-legacy {
  display: none !important;
}

/* Responsive : sur très petit écran, hint masqué */
@media (max-width: 480px) {
  .studio-roof-acc-hint {
    display: none;
  }
  .studio-roof-acc summary {
    padding: 9px 10px;
    font-size: 11.5px;
  }
}