/* ============================================================
   LIVE SHOPPING refonte V2.5 — fashioncurvyshop.com (03/08/2026, refonte-code)
   Déployé dans : wp-content/themes/enfold-child/refonte-live.css (STAGING)
   Source de vérité : maintenance-fcs/ux/refonte-live.css
   Enfilé par : functions.php (enfold-child), hook wp_enqueue_scripts, prio 999
   Chargé UNIQUEMENT sur is_page(48124) — aucun octet ailleurs.

   Contenu stylé :
   - Compte à rebours "prochain live" (composant du handoff maquette
     `composant-live-countdown.html`, remis à la charte V2.5 : ce composant
     était resté à l'ANCIENNE charte depuis la V1 — police "Inclusive Sans"
     + hex en dur #f1919c/#f2a2ad/#d0707a/#2a1620/#c7a4b1. Remplacés ici par
     les polices/variables --fcs-* actuelles du socle (refonte-socle.css).
     Classes préfixées fcl- (conservées telles quelles du handoff) pour
     rester un composant autonome, documenté, sans dépendance.
   - Cartes info rapides (mardi/vendredi 21h, FB/YouTube, commande "HT",
     expédition 48h, replays) : synthèse de texte DÉJÀ présent dans le
     contenu réel de la page (aucune donnée inventée).
     ============================================================ */

/* ---------- Wrapper injecté par le_content juste après le H1 --------------- */
.fcs-live-hero-extra {
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   Compte à rebours "prochain live" (préfixe fcl-, cf. en-tête)
   ============================================================ */
/* Fond ROSE PÂLE demandé par la gérante (09/08/2026 — l'ancien fond prune
   était jugé peu lisible). Textes passés en prune : 9,9:1 sur --fcs-rose-clair
   (AAA) ; les nuances blanches deviennent des nuances de prune. */
.fcl-widget {
  background: var(--fcs-rose-clair, #f5b8c9);
  border-radius: var(--fcs-radius-lg);
  padding: 26px 30px;
  font-family: var(--fcs-font-text);
  color: var(--fcs-prune, #2a1620);
}
.fcl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.fcl-label {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* prune (pas framboise : 2,97:1 sur rose-clair, sous le seuil AA 4,5:1) */
  color: var(--fcs-prune, #2a1620);
  font-weight: 600;
  margin: 0 0 6px;
}
/* Chiffres : gros, Marcellus (traitement display), fondu au changement de
   minute — opacity uniquement, 0 CLS (largeur du bloc jamais recalculée). */
.fcl-count {
  font-family: var(--fcs-font-title);
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.1;
  font-weight: 400;
  transition: opacity var(--fcs-duration-fast) ease;
  margin: 0 0 4px;
}
.fcl-sub { font-size: 13px; color: rgba(42, 22, 32, .75); margin: 0; } /* ≈5,4:1 sur rose-clair, AA */
.fcl-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.fcl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--fcs-radius-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fcs-duration-fast) var(--fcs-ease-out),
              background var(--fcs-duration-fast) var(--fcs-ease-out),
              color var(--fcs-duration-fast) var(--fcs-ease-out);
}
/* Sur fond rose pâle : bord/texte prune (le rose décoratif disparaîtrait). */
.fcl-btn--plain { border: 1.5px solid var(--fcs-prune, #2a1620); color: var(--fcs-prune, #2a1620); background: transparent; }
.fcl-btn--plain:hover,
.fcl-btn--plain:focus-visible { background: var(--fcs-prune, #2a1620); color: var(--fcs-white); }
/* CTA primaire : même traitement que .fcs-btn-rose (refonte-home.css) —
   framboise = couleur CTA de la charte, jamais le rose décoratif en aplat. */
.fcl-btn--pink { background: var(--fcs-framboise); color: var(--fcs-white); }
.fcl-btn--pink:hover,
.fcl-btn--pink:focus-visible { transform: translateY(-2px); background: #8f3a55; color: var(--fcs-white); }
.fcl-btn--fb { background: #1877f2; color: var(--fcs-white); }
.fcl-btn--fb:hover,
.fcl-btn--fb:focus-visible { transform: translateY(-2px); }
.fcl-btn--yt { background: #ff0000; color: var(--fcs-white); }
.fcl-btn--yt:hover,
.fcl-btn--yt:focus-visible { transform: translateY(-2px); }
/* Pastille "en direct" : pulsation transform/opacity uniquement (box-shadow
   animé accepté ici — hérité tel quel du composant validé, pas de layout
   affecté, 0 CLS, coupé par prefers-reduced-motion comme tout le reste). */
.fcl-dot {
  width: 14px; height: 14px; border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise); flex: none;
  animation: fcl-ring 2s ease-out infinite;
}
@keyframes fcl-ring {
  0% { box-shadow: 0 0 0 0 rgba(176, 77, 107, .55); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(176, 77, 107, 0); }
}
.fcl-live-title { font-family: var(--fcs-font-title); font-size: clamp(20px, 5vw, 30px); font-weight: 400; margin: 0; }
.fcl-tiktok-note { font-size: 12.5px; color: rgba(42, 22, 32, .75); align-self: center; }
/* Les 3 états (countdown/live/tiktok) occupent le même conteneur : un seul
   affiché à la fois → 0 décalage de mise en page au changement d'état. */
[data-fcl-live],
[data-fcl-tiktok] { display: none; }
@media (max-width: 480px) {
  .fcl-row { flex-direction: column; align-items: stretch; }
  .fcl-ctas { flex-direction: column; }
  .fcl-btn { width: 100%; }
}

/* ============================================================
   Grille "Vu au live" — injectée par refonte-live.js UNIQUEMENT si
   l'endpoint fcs-refonte/v1/live-catalogue renvoie au moins 1 article
   (dégradation gracieuse : jamais de section vide dans le DOM).
   ============================================================ */
.fcs-live-catalogue { margin: 28px 0; }
.fcs-live-catalogue-title {
  font-family: var(--fcs-font-text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fcs-framboise, #b04d6b);
  margin: 0 0 14px;
}
.fcs-live-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fcs-live-catalogue-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  border: 1px solid var(--fcs-border-light);
  border-radius: var(--fcs-radius-md);
  padding: 10px;
  background: var(--fcs-white);
  transition: box-shadow var(--fcs-duration-fast) var(--fcs-ease-out);
}
.fcs-live-catalogue-card:hover,
.fcs-live-catalogue-card:focus-visible { box-shadow: var(--fcs-shadow-md); }
.fcs-live-catalogue-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--fcs-radius-sm);
  background: var(--fcs-bg-soft);
}
.fcs-live-catalogue-name { font-family: var(--fcs-font-text); font-size: 13px; color: var(--fcs-prune); line-height: 1.35; }
.fcs-live-catalogue-price { font-family: var(--fcs-font-text); font-size: 13px; font-weight: 700; color: var(--fcs-framboise); }
@media (max-width: 900px) { .fcs-live-catalogue-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Cartes info rapides
   ============================================================ */
.fcs-live-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fcs-live-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--fcs-bg-soft);
  border: 1px solid var(--fcs-border-light);
  border-radius: var(--fcs-radius-md);
  padding: 16px 18px;
  min-height: 44px;
}
.fcs-live-fact-icon { font-size: 20px; line-height: 1; }
.fcs-live-fact-label { font-size: 13.5px; color: var(--fcs-prune); font-weight: 600; line-height: 1.35; }
@media (max-width: 900px) {
  .fcs-live-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fcs-live-facts { grid-template-columns: 1fr; }
}

/* ============================================================
   Formulaire Klaviyo — emplacement posé, plugin désactivé sur staging
   (mandat : ne pas le câbler). Simple encadré pour que le futur embed
   Klaviyo (activé en prod) tombe dans un conteneur déjà cohérent avec la
   charte, sans qu'aucun texte de remplacement visible ne soit ajouté (le
   conteneur reste visuellement neutre/vide si le formulaire ne se charge
   pas, comme n'importe quel embed tiers en attente de consentement).
   ============================================================ */
.fcs-live-klaviyo {
  border: 1px dashed var(--fcs-border-light);
  border-radius: var(--fcs-radius-md);
  padding: 4px;
  min-height: 0;
}
.fcs-live-klaviyo:empty,
.fcs-live-klaviyo:has(> .klaviyo-form-SgsSnN:empty) { border-color: transparent; padding: 0; }

/* ============================================================
   FAQ (3 questions, converties en <details> par refonte-live.js)
   Native <details>/<summary> : ouvertes par défaut (aucun décalage visuel
   au chargement, cf. commentaire JS) — le clic permet de refermer.
   Aucune transition d'ouverture/fermeture (comportement natif du
   navigateur) : conforme à la règle motion (rien à animer = rien à casser).
   ============================================================ */
.fcs-live-faq { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 28px; }
.fcs-live-faq-item {
  border: 1px solid var(--fcs-border-light);
  border-radius: var(--fcs-radius-md);
  background: var(--fcs-white);
  padding: 4px 20px;
}
.fcs-live-faq-q {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-family: var(--fcs-font-text);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fcs-prune);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.fcs-live-faq-q::-webkit-details-marker { display: none; }
.fcs-live-faq-q::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--fcs-framboise);
  border-bottom: 2px solid var(--fcs-framboise);
  transform: rotate(45deg);
  transition: transform var(--fcs-duration-fast) var(--fcs-ease-out);
}
.fcs-live-faq-item[open] .fcs-live-faq-q::after { transform: rotate(-135deg); }
.fcs-live-faq-a { padding: 0 0 18px; color: var(--fcs-text-secondary); line-height: 1.7; }
.fcs-live-faq-a p:first-child { margin-top: 0; }

/* ============================================================
   Typographie générale de la page (H1/H2/H3 du contenu existant, jamais
   réécrit — uniquement la police/couleur appliquées).
   ============================================================ */
#top.page-id-48124 .avia_textblock h1 {
  font-family: var(--fcs-font-title);
  color: var(--fcs-prune);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 400;
  margin: 0 0 8px;
}
#top.page-id-48124 .avia_textblock h2 {
  font-family: var(--fcs-font-title);
  color: var(--fcs-prune);
  font-weight: 400;
  margin-top: 40px;
}
#top.page-id-48124 .avia_textblock h3 { font-family: var(--fcs-font-text); color: var(--fcs-prune); }
#top.page-id-48124 .avia_textblock p,
#top.page-id-48124 .avia_textblock li { font-family: var(--fcs-font-text); color: var(--fcs-text-secondary); line-height: 1.7; }
#top.page-id-48124 .avia_textblock a { color: var(--fcs-framboise); }
#top.page-id-48124 .avia_textblock a:hover { color: var(--fcs-framboise, #b04d6b); }

/* Les CTA du widget #fcl et les cartes catalogue sont des <a> DANS
   .avia_textblock : la règle de liens ci-dessus (1,3,1) et le soulignement
   du socle (#top #main.all_colors …, 2,3,1) battent les classes fcl-/fcs-
   (0,1,0) — constaté au contrôle du 09/08 : « Être prévenue » framboise sur
   framboise (invisible depuis l'étude 3 du 06/08), bouton agenda réduit à un
   lien souligné sans bordure, boutons FB/YT au texte framboise. Ces
   composants ne sont PAS des liens de texte : ré-affirmation à spécificité
   (2,3+,1), après le socle dans l'ordre de chargement. */
#top #main.all_colors .avia_textblock a.fcl-btn,
#top #main.all_colors .avia_textblock a.fcs-live-catalogue-card {
  text-decoration: none;
}
#top #main.all_colors .avia_textblock a.fcl-btn--plain {
  border: 1.5px solid var(--fcs-prune, #2a1620);
  color: var(--fcs-prune, #2a1620);
}
#top #main.all_colors .avia_textblock a.fcl-btn--plain:hover,
#top #main.all_colors .avia_textblock a.fcl-btn--plain:focus-visible {
  background: var(--fcs-prune, #2a1620);
  color: var(--fcs-white);
}
#top #main.all_colors .avia_textblock a.fcl-btn--pink,
#top #main.all_colors .avia_textblock a.fcl-btn--pink:hover,
#top #main.all_colors .avia_textblock a.fcl-btn--pink:focus-visible,
#top #main.all_colors .avia_textblock a.fcl-btn--fb,
#top #main.all_colors .avia_textblock a.fcl-btn--fb:hover,
#top #main.all_colors .avia_textblock a.fcl-btn--yt,
#top #main.all_colors .avia_textblock a.fcl-btn--yt:hover {
  color: var(--fcs-white);
}

/* Vidéo (av_video natif) : coins arrondis, ombre légère cohérente charte. */
#top.page-id-48124 .av_video_section,
#top.page-id-48124 .av-video-section,
#top.page-id-48124 .avia-video-container {
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  box-shadow: var(--fcs-shadow-md);
  margin-top: 12px;
}

/* ==================================================================
   CORRECTIF 03/08/2026 — même bug Enfold (birthstone 80/70/40px) sur la
   page live : H1 + titres de sections ALB nus (sans classe). Cette feuille
   ne charge QUE sur la page live (48124) : le h1 page-wide est sans risque
   (le footer n'a pas de h1 ; ses h3 sont déjà repris par refonte-footer.css
   qui charge APRÈS dans l'ordre d'enqueue — pas d'écrasement croisé, les h3
   ci-dessous sont scopés .entry-content-wrapper). Réf. maquette frames `live`.
   ================================================================== */
#top #main.all_colors h1 {
  font-family: var(--fcs-font-title);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}
#top #main.all_colors .entry-content-wrapper h2 {
  font-family: var(--fcs-font-title);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
}
#top #main.all_colors .entry-content-wrapper h3 {
  font-family: var(--fcs-font-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
@media only screen and (max-width: 767px) {
  #top #main.all_colors h1 { font-size: 26px !important; }
  #top #main.all_colors .entry-content-wrapper h2 { font-size: 21px !important; }
}

/* ============================================================
   H1 — application de la maquette V2.5 (décision gérante 04/08/2026)

   Enfold pose TROIS propriétés sur tout h1 du thème, pas une :
     #top #wrap_all .all_colors h1 { font-family: birthstone;
                                     font-size: 80px;        (sous @media desktop)
                                     line-height: 0.7em }
   La passe d'interligne n'en neutralisait qu'UNE. Les règles de gabarit
   ci-dessous étaient sous 2 ID et perdaient donc sur les deux autres.
   Corrigé au niveau `#top #wrap_all #main` (3 ID, convention validée par
   refonte-compat), les trois propriétés traitées d'un coup. L'interligne
   passe par --fcs-hn-lh, posée SUR LE TITRE (la règle sitewide à 3 ID de
   refonte-socle.css bat toute redéclaration de line-height).

   ⚠️ NE PAS UNIFORMISER : la maquette ne veut PAS la même chose partout.
   faq/contact/livraison/presse/entretien/live = Birthstone 76 px ;
   a-propos = Marcellus. Valeurs relevées frame par frame dans le prototype.
   ============================================================ */
/* Maquette « live » : Birthstone 76 px desktop / 48 px mobile, lh 1.
   Cette feuille ne charge QUE sur la page live (48124) : le sélecteur sur
   `h1` nu y est sans risque (le footer n'a pas de h1). */
#top #wrap_all #main h1 {
  font-family: var(--fcs-font-script), cursive;
  font-size: 76px;
  font-weight: 400;
  --fcs-hn-lh: 1;
  line-height: 1;
}

/* ⚠️ `!important` OBLIGATOIRE ET BORNÉ AU MOBILE — mesuré, pas supposé.
   Enfold pose, sous @media (max-width:767px) :
     #top #wrap_all .all_colors h1, .main-title .entry-title
       { font-size: 35px !important }
   (relevé par getPropertyPriority sur la page réelle). Aucune spécificité,
   si haute soit-elle, ne bat un !important : les 3 ID ci-dessus suffisent
   pour la POLICE et l'INTERLIGNE (règles Enfold en priorité normale) mais
   PAS pour la taille en mobile. En desktop la règle adverse (80px) est en
   priorité normale : aucun !important n'y est nécessaire, et il n'y en a pas. */
@media only screen and (max-width: 767px) {
  #top #wrap_all #main h1 { font-size: 48px !important; }
}

/* ============================================================
   INTERLIGNE DES H1 BIRTHSTONE EN MOBILE — écart ASSUMÉ à la maquette
   (arbitrage manager 04/08/2026, documenté comme tel).

   La maquette impose `line-height: 1`. Or Birthstone est une police script
   à longs jambages : une ligne a besoin d'environ **1,37 fois le corps**
   pour ne pas empiéter sur la précédente (mesuré : 48 px de hauteur
   naturelle pour un corps de 35 px). À ratio 1, deux lignes se chevauchent
   donc NÉCESSAIREMENT — la maquette n'a pas prévu le cas d'un H1 sur deux
   lignes.

   Sans conséquence tant que le titre tient sur UNE ligne : c'est le cas de
   tous ces H1 en DESKTOP, où l'interligne 1 de la maquette est conservé.
   En MOBILE, la largeur disponible chute et un titre un peu long bascule
   sur 2 lignes (constaté sur /live/ à 375 px) : l'interligne y est porté à
   1,4, au-dessus du seuil de 1,37. Appliqué à TOUS les H1 Birthstone en
   mobile, et pas seulement à celui qui casse aujourd'hui : le défaut est
   latent partout, il ne dépend que de la longueur du titre — un simple
   changement de libellé le réveillerait ailleurs.

   Pourquoi relever l'interligne plutôt que réduire la taille : réduire
   rendrait le titre chétif sur la page qui porte l'activité la plus
   rentable de la boutique. On troquerait un défaut visible contre un
   défaut discret.
   ============================================================ */
@media only screen and (max-width: 767px) {
  #top #wrap_all #main h1 { --fcs-hn-lh: 1.4; line-height: 1.4; }
}

/* ============================================================
   LOT LIVE — couche d'intégration V2.5 (04/08/2026, refonte-code)
   Chapô sous le H1 + accroche du bloc d'alerte Klaviyo.
   Éléments injectés par refonte-live.js (aucune écriture dans le
   post_content : la page porte le [av_video] où la gérante colle
   son lien de diffusion — on ne s'en approche pas).

   Spécificité : préfixe `#top #main.all_colors` (2 ID) + classe de
   composant, motif validé du projet. Suffisant face à Enfold
   (`#top .main_color p` = 1 ID) ET face au Quick CSS, qui est servi
   APRÈS nos feuilles : seule la spécificité protège, jamais l'ordre.

   Une SEULE règle par propriété, en clamp() : deux règles jumelles
   (desktop + variante mobile) sont le défaut récurrent du projet —
   celle du bas gagne en silence.

   AUCUNE variable nouvelle : on ne pose pas de quasi-jumelle à côté
   d'une variable qui existe.
   ============================================================ */

#top #main.all_colors .fcs-live-chapo {
  font-family: var(--fcs-font-text, inherit);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  color: var(--fcs-text-secondary, #555);
  max-width: 46em;
  margin: 0 0 1.4em;
}

/* Titre + accroche du bloc « Ne manquez plus aucun live ». */
#top #main.all_colors .fcs-live-alerte-titre {
  font-family: var(--fcs-font-title, inherit);
  font-size: clamp(21px, 2.05vw, 28px);
  line-height: 1.25;
  color: var(--fcs-prune, #222);
  margin: 1.8em 0 0.25em;
}

#top #main.all_colors .fcs-live-alerte-sous {
  font-family: var(--fcs-font-text, inherit);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
  color: var(--fcs-text-secondary, #555);
  margin: 0 0 0.9em;
}

/* Jamais de titre orphelin au-dessus d'un formulaire vide.
   Le bloc Klaviyo neutralise déjà son propre cadre quand le
   formulaire est vide (règle `:has(> .klaviyo-form-SgsSnN:empty)`
   plus haut dans ce fichier) : on applique la MÊME condition au
   titre et à l'accroche, via `:has(~ …)`. Cas nominal visé : la
   visiteuse n'a pas encore donné son consentement, Klaviyo n'est
   pas chargé, le conteneur est vide — le titre doit disparaître
   avec lui, pas flotter au-dessus du vide.
   Navigateur sans `:has()` : le titre reste affiché (dégradation
   visuelle mineure, jamais de page cassée). */
#top #main.all_colors .fcs-live-alerte-titre:has(~ .fcs-live-klaviyo > .klaviyo-form-SgsSnN:empty),
#top #main.all_colors .fcs-live-alerte-sous:has(~ .fcs-live-klaviyo > .klaviyo-form-SgsSnN:empty) {
  display: none;
}

/* ============================================================
   Anti-CLS du widget #fcl (05/08/2026) — mesure du 04/08 :
   état A (compte à rebours) = 176 px, états B/C (bandeau) =
   100 px → saut de 76 px à l'allumage du bandeau pour une
   visiteuse déjà sur la page (spec §5 : la zone réserve sa
   hauteur dans les trois états). Le conteneur garde la hauteur
   de l'état le plus haut ; la ligne visible se centre dedans.
   La valeur mobile est mesurée sur le rendu réel 375 px.
   ============================================================ */
.fcl-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 176px;
}

/* ============================================================
   Lecteur du DIRECT en façade (état B regardable, 05/08/2026,
   spec §3.6 + maquette §4) — inséré par refonte-live.js sous le
   bandeau, dans le widget. Ratio 9/16 (lives filmés à la
   verticale, 07/08/2026) réservé AVANT tout chargement : la
   façade et l'iframe occupent exactement la même boîte, le clic
   ne décale rien. Rien ne se charge avant le clic (Complianz).
   Largeur bornée : un 9/16 pleine largeur serait démesuré.
   ============================================================ */
.fcl-player {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  margin: 18px auto 0;
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  background: #000;
}
.fcl-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.fcl-player-facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--fcs-prune), var(--fcs-framboise));
  color: var(--fcs-white);
  font-family: var(--fcs-font-text);
}
.fcl-player-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fcs-white);
  color: var(--fcs-prune);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding-left: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform var(--fcs-duration-fast) var(--fcs-ease-out);
}
.fcl-player-facade:hover .fcl-player-play,
.fcl-player-facade:focus-visible .fcl-player-play { transform: scale(1.08); }
.fcl-player-label { font-size: 16px; font-weight: 600; }
.fcl-player-note { font-size: 12px; color: rgba(255, 255, 255, .72); }

/* ============================================================
   Replays — 4 vignettes en façade (05/08/2026, maquette §1-2,
   rendu serveur : functions.php fcs_refonte_live_replays_html).
   Vignette = image LOCALE (jamais chargée depuis Google) ou
   dégradé de charte en repli. Le clic remplace la façade par
   l'iframe youtube-nocookie dans la MÊME boîte 9/16 (0 CLS —
   lives filmés à la verticale, passage 16/9 → 9/16 le 07/08/2026).
   ============================================================ */
.fcs-live-replays { margin: 48px 0 8px; }
.fcs-live-replays-title {
  font-family: var(--fcs-font-text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fcs-framboise, #b04d6b);
  margin: 0 0 4px;
}
.fcs-live-replays-note {
  font-size: 12.5px;
  color: var(--fcs-prune);
  opacity: .65;
  margin: 0 0 16px;
}
.fcs-live-replays-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fcs-live-replay { display: flex; flex-direction: column; gap: 0; }
.fcs-live-replay-facade {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  padding: 0;
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, var(--fcs-prune), var(--fcs-framboise));
  background-size: cover;
  background-position: center;
  transition: box-shadow var(--fcs-duration-fast) var(--fcs-ease-out);
}
.fcs-live-replay-facade:hover,
.fcs-live-replay-facade:focus-visible { box-shadow: var(--fcs-shadow-md); }
.fcs-live-replay-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--fcs-prune);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  padding-left: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  transition: transform var(--fcs-duration-fast) var(--fcs-ease-out);
}
.fcs-live-replay-facade:hover .fcs-live-replay-play,
.fcs-live-replay-facade:focus-visible .fcs-live-replay-play { transform: scale(1.1); }
.fcs-live-replay-playerbox {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  background: #000;
}
.fcs-live-replay-playerbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.fcs-live-replay-name {
  font-family: var(--fcs-font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--fcs-prune);
  line-height: 1.35;
  margin: 10px 0 0;
}
.fcs-live-replay-date {
  font-size: 12px;
  color: var(--fcs-prune);
  opacity: .6;
  margin: 2px 0 0;
}
.fcs-live-replay-facade--soon {
  background: var(--fcs-bg-soft, rgba(0, 0, 0, .05));
  cursor: default;
  color: var(--fcs-prune);
  opacity: .55;
  font-size: 13px;
  text-align: center;
  padding: 0 10px;
}
@media (max-width: 900px) {
  .fcs-live-replays-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  /* Maquette §1 : les 4 replays restent atteignables sur téléphone.
     En 9/16 (07/08/2026), 1 colonne pleine largeur donnerait 4 cartes
     de ~610 px de haut : 2 colonnes gardent les 4 replays visibles
     en un écran et demi. */
  .fcs-live-replays-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Anti-CLS, volet mobile : sous 480 px les lignes du widget passent en
   colonne et l'état A mesure 306 px (mesure réelle 375 px du 05/08/2026,
   contre 237 px pour l'état B) — on réserve la hauteur de l'état le plus
   haut, comme sur ordinateur. */
@media (max-width: 480px) {
  .fcl-widget { min-height: 306px; }
}