/* Mayotte la 1ère — Digital Signage Styles - VERSION FINALE (20 mars 2026) */

/* ── FONTS ── */
@font-face { 
  font-family:'FTVBrown'; 
  src:url('./fonts/FranceTVBrownTT-Regular.ttf'); 
  font-weight:400; 
  font-display:optional; 
}
@font-face { 
  font-family:'FTVBrown'; 
  src:url('./fonts/FranceTVBrownTT-Bold.ttf'); 
  font-weight:700; 
  font-display:optional; 
}
@font-face { 
  font-family:'FTVBrown'; 
  src:url('./fonts/FranceTVBrownTT-Black.ttf'); 
  font-weight:900; 
  font-display:optional; 
}
@font-face { 
  font-family:'FTVBrown'; 
  src:url('./fonts/FranceTVBrownTT-Light.ttf'); 
  font-weight:300; 
  font-display:optional; 
}

:root { 
  --accent: #0082E6; 
  --dot: #F4C300; 
  --bg: #0D1B2A; 
}

* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
}

html, body {
  width:100vw; 
  height:100vh;
  overflow:hidden;
  background:#0D1B2A;
  font-family:'FTVBrown', 'Segoe UI', Arial, sans-serif;
  color:white;
}

#app {
  position:relative;
  width:1080px; 
  height:1920px;
  overflow:hidden;
  transform-origin:top left;
  background:var(--bg);
}

#app::before {
  content:'';
  position:absolute; 
  top:0; right:0; bottom:0; left:0;
  background:radial-gradient(ellipse at 50% 20%, rgba(0,130,230,0.15) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* ── HEADER ── */
.header {
  position:absolute; 
  top:0; left:0;
  width:1080px; 
  height:130px;
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding:0 44px;
  background:rgba(0,0,0,0.65);
  border-bottom:2px solid var(--accent);
  z-index:100;
}
.logo { 
  display:flex; 
  align-items:baseline; 
  gap:2px; 
}
.logo-txt { 
  font-size:36px; 
  font-weight:300; 
  letter-spacing:-0.5px; 
}
.logo-dot { 
  width:14px; 
  height:14px; 
  border-radius:50%; 
  background:var(--dot); 
  margin:0 4px; 
  position:relative; 
  top:-2px; 
}
.logo-num { 
  font-size:46px; 
  font-weight:900; 
}
.hclock { 
  text-align:right; 
}
.c-time { 
  font-size:60px; 
  font-weight:700; 
  line-height:1; 
}
.c-date { 
  font-size:18px; 
  font-weight:300; 
  color:rgba(255,255,255,0.5); 
  text-transform:capitalize; 
}

/* ── BARRE THÈME ── */
.theme-bar {
  position:absolute; 
  top:130px; 
  left:0;
  width:1080px; 
  height:70px;
  background:var(--accent);
  display:flex; 
  align-items:center; 
  padding:0 44px; 
  gap:20px; 
  z-index:90;
}
.tb-day   { 
  font-size:22px; 
  font-weight:900; 
  letter-spacing:4px; 
  text-transform:uppercase; 
}
.tb-sep   { 
  width:1px; 
  height:32px; 
  background:rgba(255,255,255,0.3); 
}
.tb-theme { 
  font-size:22px; 
  font-weight:300; 
  letter-spacing:2px; 
  text-transform:uppercase; 
}
.tb-dot   { 
  width:12px; 
  height:12px; 
  border-radius:50%; 
  background:var(--dot); 
  margin-left:auto; 
}

/* ── SLIDES CONTAINER ── */
.slides-wrap {
  position:absolute; 
  top:200px; 
  left:0;
  width:1080px; 
  height:1640px; 
  overflow:hidden;
}

.slide {
  position:absolute !important; 
  top:0; 
  left:0;
  width:1080px; 
  height:1640px;
  opacity:0; 
  transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.7s ease;
  pointer-events:none;
}
.slide.active   { 
  opacity:1;  
  transform:translateY(0);    
  pointer-events:auto; 
}
.slide.inactive { 
  opacity:0 !important; 
  transform:translateY(24px) !important; 
  pointer-events:none !important; 
}

/* ── TICKER ── */
.ticker {
  position:absolute; 
  bottom:0; 
  left:0;
  width:1080px; 
  height:80px;
  background:linear-gradient(90deg, #004cb5 0%, #0082E6 40%, #0099ff 65%, #004cb5 100%);
  box-shadow:0 -4px 24px rgba(0,130,230,0.4);
  display:flex; 
  align-items:center; 
  overflow:hidden;
}
.ticker-label {
  font-size:22px; 
  font-weight:900; 
  color:white;
  text-transform:uppercase; 
  letter-spacing:2px;
  padding:0 22px; 
  height:100%;
  display:flex; 
  align-items:center; 
  flex-shrink:0;
  border-right:2px solid rgba(255,255,255,0.2);
  gap:10px;
}
.ticker-dot { 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:var(--dot); 
}
.ticker-content { 
  flex:1; 
  overflow:hidden; 
}
.t-track { 
  display:flex; 
  align-items:center; 
  white-space:nowrap; 
  will-change:transform; 
}
.ti { 
  font-size:28px; 
  font-weight:400; 
  color:white; 
  display:inline-block; 
  margin-right:60px; 
}
.ts { 
  font-size:20px; 
  color:rgba(255,255,255,0.45); 
  display:inline-block; 
  margin-right:60px; 
}

/* ══════════════════════════════════════
   S0 — INTRO
══════════════════════════════════════ */
.intro-slide {
  position:absolute; 
  top:0; right:0; bottom:0; left:0;
  display:flex; 
  flex-direction:column;
  align-items:center; 
  justify-content:flex-start;
  background:var(--bg); 
  overflow:hidden;
}
.intro-clock-wrap {
  padding-top:80px; 
  padding-bottom:36px;
  text-align:center;
}
.intro-time {
  font-size:220px; 
  font-weight:900; 
  line-height:0.9;
  letter-spacing:-8px;
  color:#ffffff;
}
.intro-date {
  font-size:44px; 
  font-weight:300; 
  color:rgba(255,255,255,0.6);
  margin-top:14px; 
  text-transform:capitalize;
}
.intro-fete {
  display:flex; 
  align-items:center; 
  gap:12px;
  background:rgba(244,195,0,0.12);
  border:1px solid rgba(244,195,0,0.3);
  border-radius:50px;
  padding:12px 32px;
  font-size:32px; 
  color:#FFD740;
  margin-bottom:52px;
}
.intro-fete-dot { 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:#F4C300; 
  animation:pulse-dot 2s ease-in-out infinite; 
}
.intro-divider {
  width:960px; 
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
  margin-bottom:46px;
}
.intro-label {
  font-size:22px; 
  font-weight:700; 
  letter-spacing:4px; 
  text-transform:uppercase;
  color:rgba(255,255,255,0.3); 
  margin-bottom:32px;
}
.intro-topics {
  display:flex; 
  flex-wrap:wrap; 
  gap:18px;
  justify-content:center; 
  padding:0 60px;
}
.intro-chip {
  display:flex; 
  align-items:center; 
  gap:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:50px; 
  padding:14px 26px;
  font-size:28px; 
  color:rgba(255,255,255,0.75);
}

/* ══════════════════════════════════════
   MÉTÉO — VERSION CENTRÉE HAUT
══════════════════════════════════════ */
.meteo-slide {
  height: 1640px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #081428 0%, #0d1e3a 55%, #0a1828 100%);
  overflow: hidden;
}

.meteo-header {
  padding: 60px 50px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meteo-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* CENTRAGE VERS LE HAUT */
  gap: 40px;
  padding: 0 44px;
}

.meteo-icon-temp-row { 
  display: flex; 
  align-items: center; 
  gap: 30px; 
}
.meteo-big-icon { 
  font-size: 180px; 
  line-height: 1; 
}
.meteo-big-temp { 
  font-size: 220px; 
  font-weight: 900; 
  line-height: 0.85; 
  letter-spacing: -10px; 
}
.meteo-cond-txt { 
  font-size: 48px; 
  font-weight: 700; 
  text-align: center; 
  margin-top: -10px; 
}
.meteo-feels { 
  font-size: 32px; 
  font-weight: 300; 
  color: rgba(255,255,255,0.45); 
}

.meteo-details-row {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 820px;
}

.meteo-detail-pill {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 24px 18px;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
.mdp-icon { font-size: 32px; }
.mdp-val  { font-size: 38px; font-weight: 900; }
.mdp-lbl  { font-size: 16px; font-weight: 300; color:rgba(255,255,255,0.38); text-transform:uppercase; margin-top:3px; }

.meteo-forecast-strip {
  display:flex; 
  gap:10px; 
  padding:18px 44px;
  background:rgba(0,0,0,0.45);
  border-top:1px solid rgba(255,255,255,0.07);
  flex-shrink:0;
}
.mf-item {
  flex:1; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:7px;
  padding:14px 6px; 
  border-radius:12px;
  background:rgba(255,255,255,0.04); 
  border:1px solid rgba(255,255,255,0.07);
}
.mf-item.mf-next { 
  background:rgba(0,130,230,0.13); 
  border-color:rgba(0,130,230,0.28); 
}
.mf-hour { 
  font-size:16px; 
  font-weight:700; 
  color:rgba(255,255,255,0.45); 
}
.mf-icon { 
  font-size:30px; 
}
.mf-temp { 
  font-size:22px; 
  font-weight:900; 
}

.meteo-source { 
  padding:40px 44px 50px; 
  font-size:15px; 
  color:rgba(255,255,255,0.22); 
  text-align:center; 
}

/* ══════════════════════════════════════
   AUTRES SLIDES (ARS, STD, etc.)
══════════════════════════════════════ */
.inst-slide, .std-slide, .om-slide {
  padding:40px 44px; 
  display:flex; 
  flex-direction:column; 
  gap:22px; 
  height:1640px;
}

/* Garde le reste de ton CSS original pour les autres slides (radio, rdv, colocs, etc.) */