/* ============================================================
   Scopetonic, outil declinaisons-video, style.css
   Couche specifique a l'outil. Le reset, les variables, les
   boutons, la carte cliquable (.card), la section SEO, la FAQ
   et les utilitaires viennent de base.css. Le commun du site
   vient de theme.css. Rien du commun n'est redefini ici.

   Couleurs de famille : portees par data.json (champ couleur,
   valant var(--family-*)) et appliquees en inline par app.js.
   Ce fichier ne reference aucune couleur de famille, il ne
   gere que la forme et le layout.
   ============================================================ */


/* ── Selecteur de type ────────────────────────────────────── */
/* Markup injecte par app.js :
   <button class="card type-card [active]" type="button" data-type-id="...">
     <span class="card-label">Libelle type</span>
   </button>
   Le visuel de carte (fond, bordure, radius, hover, etat actif)
   vient de .card et .card.active du commun. type-card ne fait
   que le layout dans la grille. */

.type-selector {
  margin-bottom: 2rem;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.type-card {
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
}


/* ── Hero : total, dispositif, mosaique ───────────────────── */
/* Markup injecte par app.js :
   #count   -> <span class="hero__count-number">N</span>
               <span class="hero__count-unit">livrables</span>
   #dispositif -> texte du dispositif du type
   #mosaic  -> N cellules .mosaic-cell, une par unite de livrable,
               couleur de famille en inline. Le nombre de cellules
               egale le compteur. */

.hero-section {
  margin-bottom: 2.5rem;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem 1.5rem;
}

.hero__count {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--primary);
}

.hero__count-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

.hero__count-unit {
  font-size: 1.125rem;
  font-weight: 600;
}

.hero__dispositif {
  font-size: 1.125rem;
  color: var(--muted);
  line-height: 1.6;
}

.hero__note {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 32rem;
  margin-top: 0.25rem;
}

.hero__mosaic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  max-width: 30rem;
}

.mosaic-cell {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  flex-shrink: 0;
}


/* ── Arborescence des livrables ───────────────────────────── */
/* Markup injecte par app.js :
   <div class="tree">
     <div class="tree__root">Libelle du tournage</div>
     <div class="tree__family">
       <div class="tree__family-header">
         <span class="tree__family-medallion" style="background: var(--family-*)"></span>
         <span class="tree__family-name">Nom famille</span>
         <span class="tree__family-count">N</span>
       </div>
       <div class="tree__cards">
         <article class="deliverable-card" data-id="...">
           <div class="deliverable-card__head">
             <span class="deliverable-card__name">Nom livrable</span>
             <span class="deliverable-card__qty">x4</span>            (si quantite > 1)
             <span class="deliverable-card__live">En direct</span>     (si live)
           </div>
           <div class="deliverable-card__meta">
             <span class="deliverable-card__meta-item">...</span> x4
           </div>
         </article>
       </div>
     </div>
   </div>
   La carte livrable porte un modificateur futur deliverable-card--off
   en V2. Aucun CSS d'etat eteint au palier 2. */

.tree-section {
  margin-bottom: 2.5rem;
}

.tree__root {
  font-size: 1rem;
  font-weight: 600;
  color: var(--light);
  text-align: center;
  padding: 0.75rem 1rem;
  background-color: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.tree__family {
  margin-bottom: 1.5rem;
}

.tree__family-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.tree__family-medallion {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tree__family-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--light);
  line-height: 1.3;
}

.tree__family-count {
  font-size: 0.875rem;
  color: var(--muted);
}

.tree__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.deliverable-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.deliverable-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.deliverable-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--light);
  line-height: 1.3;
}

.deliverable-card__qty {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.deliverable-card__live {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
}

.deliverable-card__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
}

.deliverable-card__meta-item {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}

.deliverable-card__meta-item strong {
  font-weight: 600;
  color: var(--light);
}


/* ── Apparition en cascade (palier 3) ─────────────────────── */
/* Reutilise @keyframes fadeIn de base.css (opacity 0->1, translateY 8px->0).
   Delai par element court et plafonne, cascade totale rapide. La cascade
   rejoue a chaque changement de type, les elements etant reinjectes. */

.mosaic-cell {
  animation: fadeIn 0.3s ease both;
}

.mosaic-cell:nth-child(1) { animation-delay: 0ms; }
.mosaic-cell:nth-child(2) { animation-delay: 25ms; }
.mosaic-cell:nth-child(3) { animation-delay: 50ms; }
.mosaic-cell:nth-child(4) { animation-delay: 75ms; }
.mosaic-cell:nth-child(5) { animation-delay: 100ms; }
.mosaic-cell:nth-child(6) { animation-delay: 125ms; }
.mosaic-cell:nth-child(7) { animation-delay: 150ms; }
.mosaic-cell:nth-child(8) { animation-delay: 175ms; }
.mosaic-cell:nth-child(n+9) { animation-delay: 200ms; }

.deliverable-card {
  animation: fadeIn 0.3s ease both;
}

.deliverable-card:nth-child(1) { animation-delay: 0ms; }
.deliverable-card:nth-child(2) { animation-delay: 40ms; }
.deliverable-card:nth-child(3) { animation-delay: 80ms; }
.deliverable-card:nth-child(n+4) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .mosaic-cell,
  .deliverable-card {
    animation: none;
  }
}


/* ── Responsive desktop (>768px) ──────────────────────────── */

@media (min-width: 769px) {
  .type-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tree__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}