/* ═══════════════════════════════════════════════════════════════════════════
   habillage.css - L'INTERFACE DES RÉSEAUX, RECONSTITUÉE

   Le style de `js/habillage.js`. Volontairement dans son propre fichier : il
   ne sert qu'à l'aperçu en situation, et le jour où un réseau change son
   interface, on sait exactement où aller.

   Rien ici ne porte de couleur de marque. L'habillage montre une PLACE
   occupée, pas une identité. Du blanc à différentes opacités sur les formats
   plein écran, les couleurs de surface du produit sur les formats en carte.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────── PIÈCES COMMUNES ─────────────────────────── */

/* Une barre remplace un texte. Jamais de nom inventé : un faux compte finit
   toujours par ressembler à quelqu'un. */
.h-barre {
  display: block;
  height: 9px;
  border-radius: var(--rayon-rond);
  background: currentColor;
  opacity: 0.9;
}
.h-barre-claire { opacity: 0.5; }

.h-rond {
  display: block;
  flex: none;
  border-radius: var(--rayon-rond);
  background: currentColor;
  opacity: 0.55;
}

.h-lignes { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }

.h-ligne { display: flex; align-items: center; gap: var(--espace-2); }
.h-a-droite { margin-left: auto; display: flex; align-items: center; }

.h-icone {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}


/* ─────────────────── FORMATS PLEIN ÉCRAN : STORY, REEL ───────────────────

   L'interface se pose SUR le visuel. Les bandes prennent exactement la part du
   gabarit annoncée par platforms.js : ce qu'on voit ici est la mesure qui sert
   au diagnostic, pas une illustration approchante.                          */

.h-scene {
  position: relative;
  /* Le dégradé des bandes doit s'arrêter au bord de l'image, pas déborder. */
  overflow: hidden;
  border-radius: var(--rayon-moyen);
  color: #FFFFFF;
}

.h-bande {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espace-2);
  padding: var(--espace-3);
  pointer-events: none;
}

/* Les vrais réseaux posent un dégradé sombre derrière leur interface, sinon
   leurs propres icônes deviendraient illisibles sur une image claire. Sans ce
   dégradé, l'aperçu mentirait sur ce que l'utilisateur verra. */
.h-bande-haut {
  top: 0;
  justify-content: flex-start;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.h-bande-bas {
  bottom: 0;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}
.h-bande-legende { justify-content: flex-end; align-items: flex-start; }

/* Sur les formats plein écran, la légende n'occupe que deux lignes avant
   d'être repliée : un long texte ne doit pas déborder sur la vidéo. */
.h-legende {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Les retours à la ligne de la légende comptent : ils sont gardés. */
.h-legende, .h-legende-fil { white-space: pre-line; }

.h-jauge { display: flex; gap: 3px; }
.h-jauge-segment {
  flex: 1;
  height: 3px;
  border-radius: var(--rayon-rond);
  background: currentColor;
  opacity: 0.35;
}
.h-jauge-segment.actif { opacity: 1; }

.h-champ {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 9px var(--espace-3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--rayon-rond);
}

.h-ligne-bas { align-items: center; }

/* La colonne d'actions d'un reel : elle occupe la droite, et c'est la seule
   zone masquée latérale de tout le produit. */
.h-colonne {
  position: absolute;
  right: 0;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-4);
  padding: var(--espace-2);
  color: #FFFFFF;
  pointer-events: none;
}

.h-action { display: flex; flex-direction: column; align-items: center; gap: 5px; }


/* ─────────────────── FORMATS EN CARTE : FIL, LIEN, MINIATURE ───────────────────

   Ici l'interface ENTOURE le visuel. Rien n'est recouvert, mais la place
   occupée dans le fil change la façon dont le visuel est vu, et c'est
   précisément ce que l'utilisateur vient vérifier.                          */

.h-carte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  width: 100%;
  max-width: 420px;
  padding: var(--espace-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-grand);
  background: var(--surface);
  color: var(--texte-fort);
}

.h-carte .apercu { align-self: center; }

.h-carte-entete { display: flex; align-items: center; gap: var(--espace-3); }

.h-carte-actions {
  display: flex;
  gap: var(--espace-5);
  padding-top: var(--espace-2);
  border-top: 1px solid var(--bordure);
  color: var(--texte-faible);
}

.h-lien { display: flex; flex-direction: column; }
.h-lien .apercu { border-radius: var(--rayon-moyen) var(--rayon-moyen) 0 0; }

.h-lien-texte {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-top: none;
  border-radius: 0 0 var(--rayon-moyen) var(--rayon-moyen);
  background: var(--surface-haute);
}

.h-duree {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: var(--rayon-petit);
  background: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
}

.h-pilule {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 8px 14px;
  border-radius: var(--rayon-rond);
  background: var(--probleme);
  color: #FFFFFF;
}

.h-carte-miniature .h-carte-entete { align-items: flex-start; }

/* Les deux pastilles posées sur l'image doivent rester au-dessus d'elle. */
.h-duree, .h-pilule { z-index: 1; }


/* Sur petit écran, la carte prend toute la largeur disponible. */
@media (max-width: 860px) {
  .h-carte { max-width: 100%; padding: var(--espace-3); }
}