/* Police FranceTVBrownTT - Chargement local */
    @font-face {
      font-family: 'FranceTVBrownTT-Regular';
      src: url('fonts/FranceTVBrownTTRegularsubset.woff2') format('woff2'),
           url('fonts/FranceTVBrownTTRegularsubset.woff') format('woff'),
           url('fonts/FranceTVBrownTTRegularsubset.ttf') format('truetype'),
           url('fonts/FranceTVBrownTTRegularsubset.eot') format('embedded-opentype'),
           url('fonts/FranceTVBrownTTRegularsubset.svg') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    
    /* Améliore la compatibilité emoji sur Windows */
    html,
    body,
    .emoji,
    .flag,
    .clock-emoji {
      font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', 'Twemoji Mozilla', sans-serif;
    }

    /* Améliore spécifiquement l'affichage des drapeaux */
    .flag-emoji {
      font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', 'Twemoji Mozilla', 'Arial Unicode MS', sans-serif;
      font-size: 1.1em;
      display: inline-block;
      margin-right: 4px;
    }

    @font-face {
      font-family: 'MiniSystem';
      src: url('fonts/minisystem.ttf') format('truetype');
    }

    @font-face {
      font-family: '14 Segment LED Regular';
      src: url('fonts/14 Segment LED Regular.ttf') format('truetype');
    }

    @font-face {
      font-family: 'LedRegular';
      src: url('fonts/LedRegular.ttf') format('truetype');
    }

    /* DOTMATRI font disabled: DOTMATRI.TTF was causing browser font parse errors
     (bad table directory). If you want to re-enable, convert the font to
     woff/woff2 and provide multiple formats, e.g.:
     @font-face { font-family: 'DOTMATRI'; src: url('fonts/DOTMATRI.woff2') format('woff2'), url('fonts/DOTMATRI.woff') format('woff'); }
   */

    @font-face {
      font-family: 'dot_digital-7';
      src: url('fonts/dot_digital-7.ttf') format('truetype');
    }

    @font-face {
      font-family: 'digital-7';
      src: url('fonts/digital-7.ttf') format('truetype');
    }

    @font-face {
      font-family: 'digital-7-italic';
      src: url('fonts/digital-7 (italic).ttf') format('truetype');
    }

    @font-face {
      font-family: 'digital-7-mono';
      src: url('fonts/digital-7 (mono).ttf') format('truetype');
    }

    @font-face {
      font-family: 'digital-7-mono-italic';
      src: url('fonts/digital-7 (mono italic).ttf') format('truetype');
    }

    @font-face {
      font-family: 'LEDDotMatrix';
      src: url('fonts/LED-Dot-Matrix.ttf') format('truetype');
    }

    @font-face {
      font-family: 'scoreboard';
      src: url('fonts/scoreboard.ttf') format('truetype');
    }

    @font-face {
      font-family: 'digitalcomputer';
      src: url('fonts/digitalcomputer.ttf') format('truetype');
    }

    @font-face {
      font-family: 'DS-Digital';
      src: url('fonts/ds-digital.ttf') format('truetype');
    }

    @font-face {
      font-family: 'DS-DIGI';
      src: url('fonts/DS-DIGI.TTF') format('truetype');
    }

    @font-face {
      font-family: 'DS-DIGIB';
      src: url('fonts/DS-DIGIB.TTF') format('truetype');
    }

    @font-face {
      font-family: 'DS-DIGII';
      src: url('fonts/DS-DIGII.TTF') format('truetype');
    }

    @font-face {
      font-family: 'DS-DIGIT';
      src: url('fonts/DS-DIGIT.TTF') format('truetype');
    }

    /* Fixed-width digit variants (generated from the originals: digits share the
       widest advance so centered clock text does not wobble as digits change).
       Used automatically by the clock renderer via CLOCK_FONT_RENDER_MAP. */
    @font-face {
      font-family: 'DS-Digital-tab';
      src: url('fonts/ds-digital-tab.ttf') format('truetype');
    }
    @font-face {
      font-family: 'DS-DIGI-tab';
      src: url('fonts/DS-DIGI-tab.ttf') format('truetype');
    }
    @font-face {
      font-family: 'DS-DIGIB-tab';
      src: url('fonts/DS-DIGIB-tab.ttf') format('truetype');
    }
    @font-face {
      font-family: 'DS-DIGII-tab';
      src: url('fonts/DS-DIGII-tab.ttf') format('truetype');
    }
    @font-face {
      font-family: 'DS-DIGIT-tab';
      src: url('fonts/DS-DIGIT-tab.ttf') format('truetype');
    }
    @font-face {
      font-family: 'FranceTVBrownTT-tab';
      src: url('fonts/FranceTVBrownTT-tab.ttf') format('truetype');
    }

    html,
    body {
      margin: 0;
      padding: 0;
      background: transparent;
      overflow: hidden;
      font-family: 'FranceTVBrownTT-Regular', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #eee;
    }
    
    /* Appliquer FranceTVBrownTT partout sauf les horloges SVG */
    /* Les horloges SVG utilisent leur propre font-family via setAttribute('font-family', font) */
    /* Donc elles ne sont pas affectées par cette règle CSS */
    div, span, p, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea, label, li, ul, ol, td, th, table, 
    #settings-popup, #info-popup, #stats-popup, #devlog-popup, .ticker-item, .ticker-header, .news-card-title, 
    .news-card-description, .news-card-date-time, .ticker-title, .ticker-excerpt {
      font-family: 'FranceTVBrownTT-Regular', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      transition: cursor 0.5s;
    }

    /* ===== APP CONTROLS TOOLBAR (responsive) ===== */
    :root {
      --app-header-h: clamp(52px, 9vh, 96px);
      --app-ctrl-size: clamp(44px, 7vw, 60px);
      --app-controls-gap: 0px;
      --settings-panel-width: min(500px, 92vw);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
    }

    #app-controls {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 100;
      display: flex;
      flex-direction: row-reverse;
      align-items: stretch;
      height: calc(var(--app-header-h) + var(--safe-top));
      padding-top: var(--safe-top);
      padding-right: var(--safe-right);
      max-width: min(100vw, 100%);
      box-sizing: border-box;
      pointer-events: none;
      transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    #app-controls #settings-btn,
    #app-controls #fullscreen-btn,
    #app-controls #info-btn,
    #app-controls #stats-btn,
    #app-controls #devlog-btn {
      position: relative;
      top: auto;
      right: auto;
      height: 100%;
      width: var(--app-ctrl-size);
      min-width: 44px;
      min-height: 44px;
      background: rgba(255, 255, 255, 0.05);
      border: none;
      color: #ff0000;
      cursor: pointer;
      padding: 0;
      margin: 0;
      line-height: 1;
      user-select: none;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    #app-controls #settings-btn svg,
    #app-controls #fullscreen-btn svg,
    #app-controls #info-btn svg,
    #app-controls #stats-btn svg,
    #app-controls #devlog-btn svg {
      width: clamp(20px, 3.5vw, 28px);
      height: clamp(20px, 3.5vw, 28px);
      stroke: currentColor;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
      transition: filter 0.3s ease;
      pointer-events: none;
    }

    #app-controls #settings-btn:hover,
    #app-controls #fullscreen-btn:hover,
    #app-controls #info-btn:hover,
    #app-controls #stats-btn:hover,
    #app-controls #devlog-btn:hover {
      color: #0ff;
      background: rgba(0, 255, 255, 0.15);
      border-left-color: rgba(0, 255, 255, 0.3);
    }

    #app-controls #settings-btn:active,
    #app-controls #fullscreen-btn:active,
    #app-controls #info-btn:active,
    #app-controls #stats-btn:active,
    #app-controls #devlog-btn:active {
      transform: scale(0.95);
    }

    #app-controls #devlog-btn {
      display: none !important;
    }

    #app-controls #settings-btn.visible,
    #app-controls #fullscreen-btn.visible,
    #app-controls #info-btn.visible,
    #app-controls #stats-btn.visible,
    #app-controls #devlog-btn.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Touch devices: keep controls discoverable */
    @media (hover: none), (pointer: coarse) {
      #app-controls #settings-btn,
      #app-controls #fullscreen-btn,
      #app-controls #info-btn,
      #app-controls #stats-btn {
        opacity: 0.55;
        pointer-events: auto;
      }
      #app-controls #settings-btn.visible,
      #app-controls #fullscreen-btn.visible,
      #app-controls #info-btn.visible,
      #app-controls #stats-btn.visible {
        opacity: 1;
      }
    }

    @media (max-width: 480px) {
      :root {
        --app-ctrl-size: 44px;
        --app-header-h: clamp(48px, 10vh, 64px);
      }
    }

    @media (min-width: 481px) and (max-width: 1024px) {
      :root {
        --app-ctrl-size: clamp(46px, 6vw, 56px);
        --app-header-h: clamp(56px, 8vh, 80px);
      }
    }

    label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      font-size: 15px;
    }

    label span {
      flex-grow: 1;
      padding-right: 15px;
    }

    input[type="color"],
    select {
      border-radius: 6px;
      background: #111;
      color: #0ff;
      border: 1px solid #0ff;
      padding: 4px;
    }

    #close-settings,
    #reset-settings {
      display: block;
      margin: 10px auto;
      padding: 10px 0;
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      background: #f00;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      color: #000;
      transition: background-color 0.3s ease;
    }

    #close-settings:hover,
    #reset-settings:hover {
      background-color: #0cc;
    }

    text {
      text-anchor: middle;
      dominant-baseline: middle;
    }

    #sync-message,
    #tz-display {
      color: red;
      font-size: 0.8em;
      text-align: center;
      line-height: 15px;
    }

    #sync-message {
      z-index: 25;
      text-align: center;
    }

    #tz-display {
      position: fixed;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 25;
      font-weight: bold;
      pointer-events: none;
      font-family: MiniSystem;
    }

    .blink {
      animation: blink 2s infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.3;
      }
    }

    /* Compact color row */
    .color-row {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      align-items: center;
      justify-content: space-between;
    }

    .color-row label {
      margin-bottom: 0;
      flex: 1 1 0;
      font-size: 13px;
      padding-right: 0;
      justify-content: flex-start;
      gap: 4px;
    }

    .color-row input[type="color"] {
      margin-left: 4px;
      min-width: 32px;
      width: 32px;
      padding: 0;
      border-radius: 6px;
      border: 1px solid #0ff;
      background: #111;
    }

    /* App shell: header | tickers | clocks (1fr) | bottom ticker | footer */
    #app-layout {
      position: fixed;
      inset: 0;
      width: 100vw;
      max-width: 100%;
      height: 100vh;
      height: 100dvh;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto auto auto;
      grid-template-areas:
        "header"
        "ticker-top"
        "main"
        "studio-timers"
        "studio-text"
        "studio-info"
        "ticker-bottom"
        "studio-leds"
        "footer";
      overflow: hidden;
      box-sizing: border-box;
      padding-top: var(--safe-top, 0px);
      padding-bottom: var(--safe-bottom, 0px);
      padding-left: var(--safe-left, 0px);
      padding-right: var(--safe-right, 0px);
    }

    #logo-container { grid-area: header; }
    #news-ticker-container { grid-area: ticker-top; }
    #clocks-container { grid-area: main; }
    #studio-timers { grid-area: studio-timers; }
    #studio-text-lines { grid-area: studio-text; }
    #studio-info-row { grid-area: studio-info; }
    #bottom-ticker-container { grid-area: ticker-bottom; }
    #studio-leds { grid-area: studio-leds; }
    #ec-status-footer { grid-area: footer; }


    /* Adaptation des horloges pour le conteneur rouge */
    .dual-clocks {
      position: relative !important;
      display: grid !important;
      width: 100% !important;
      height: 100% !important;
      top: auto !important;
      left: auto !important;
      margin: 0 !important;
    }

    /* Dynamic clocks layout - adapts to number of clocks */
    .clock-svg-third {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 0;
      min-width: 0;
      transition: opacity 0.3s, visibility 0.3s, flex 0.4s;
      overflow: hidden;
      position: relative;
    }

    .clock-svg-third.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      flex: 0 0 0 !important;
      padding: 0 !important;
      width: 0 !important;
    }

    /* SVG s'adaptent parfaitement à leur conteneur */
    .clock-svg-third svg {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: block;
      margin: auto;
    }

    /* Responsive grid layout for multiple clocks - columns calculated dynamically */
    #dual-clock-container {
      display: grid !important;
      grid-auto-rows: 1fr !important;
      grid-auto-flow: row !important;
      align-items: center;
      justify-items: center;
      gap: 10px;
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      /* grid-template-columns sera défini dynamiquement par JavaScript */
    }

    /* Clock containers fill their grid cell */
    .clock-svg-third {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 0;
    }

    /* Sections de réglages pour chaque horloge */
    .settings-section {
      display: none;
    }

    .settings-section.active {
      display: block;
    }

    /* City autocomplete styles */
    .city-suggestions {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .city-suggestion-item {
      padding: 8px 12px;
      cursor: pointer;
      color: #ffffff;
      font-size: 12px;
      transition: background-color 0.2s;
    }

    .city-suggestion-item:hover {
      background-color: #374151;
    }

    .city-suggestion-item.selected {
      background-color: #06b6d4;
    }

    .half-settings-btn {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 40;
      background: rgba(0, 0, 0, 0.6);
      color: #0ff;
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }

    #fragment.shifted,
    #fragment2.shifted,
    #fragment3.shifted {
      transform: scale(0.75);
      transition: transform 0.5s cubic-bezier(.77, 0, .18, 1.01);
    }

    #fragment,
    #fragment2,
    #fragment3 {
      transition: transform 0.5s cubic-bezier(.77, 0, .18, 1.01);
      width: 100%;
      height: 100%;
    }

    #bbc_france_switch:checked+span {
      background: #0ff;
    }

    #bbc_france_switch:checked+span+span {
      left: 25px !important;
      background: #ff0033;
    }

    #preset-name {
      display: none;
    }

    #splash {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 1s ease;
      font-size: 18px;
    }

    #splash img {
      width: 800px;
      height: auto;
      margin-bottom: 30px;
    }

    #splash p {
      font-size: 24px;
      margin: 10px 0;
    }

    #splash .splash-title {
      font-size: 42px;
      font-weight: 700;
      margin: 10px 0 15px 0;
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    #splash .splash-description {
      font-size: 18px;
      color: #aaa;
      margin: 0 0 20px 0;
      font-style: italic;
      max-width: 600px;
      text-align: center;
      line-height: 1.5;
    }

    /* Security badges container */
    #splash .security-badges {
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: 16px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 25px;
      margin-bottom: 0;
    }

    /* Security badge item */
    #splash .security-badges .badge-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      transition: transform 0.3s ease, opacity 0.3s ease;
      position: relative;
    }

    #splash .security-badges .badge-item:hover {
      transform: translateY(-3px) scale(1.05);
      opacity: 0.9;
    }

    /* Security badges links */
    #splash .security-badges a {
      display: inline-block;
      line-height: 0;
      text-decoration: none;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #splash .security-badges a:hover {
      transform: translateY(-2px);
      opacity: 0.85;
    }

    /* Security badges images */
    #splash .security-badges img {
      border: 0;
      height: 32px;
      display: block;
      margin: 0;
      width: auto;
      max-width: none;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 255, 255, 0.2);
      transition: box-shadow 0.3s ease;
    }

    #splash .security-badges a:hover img {
      box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
    }

    /* Badge avec score personnalisé */
    #splash .security-badges .badge-custom {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 6px;
      background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 200, 255, 0.1));
      border: 1px solid rgba(0, 255, 255, 0.3);
      text-decoration: none;
      transition: all 0.3s ease;
      font-family: 'FranceTVBrownTT-Regular', Arial, sans-serif;
    }

    #splash .security-badges .badge-custom:hover {
      background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 255, 0.2));
      border-color: rgba(0, 255, 255, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
    }

    #splash .security-badges .badge-custom .badge-name {
      font-size: 12px;
      font-weight: 600;
      color: #0ff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    #splash .security-badges .badge-custom .badge-grade {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      padding: 2px 8px;
      border-radius: 4px;
      background: rgba(0, 255, 0, 0.2);
    }

    #splash .security-badges .badge-custom .badge-score {
      font-size: 11px;
      color: #aaa;
      margin-top: 2px;
    }

    /* Couleurs selon le grade */
    #splash .security-badges .badge-custom.grade-a-plus .badge-grade {
      background: rgba(0, 255, 0, 0.3);
      color: #0f0;
    }

    #splash .security-badges .badge-custom.grade-a .badge-grade {
      background: rgba(0, 200, 0, 0.3);
      color: #0c0;
    }

    #splash .security-badges .badge-custom.grade-b .badge-grade {
      background: rgba(255, 255, 0, 0.3);
      color: #ff0;
    }

    #splash .security-badges .badge-custom.grade-c .badge-grade {
      background: rgba(255, 165, 0, 0.3);
      color: #fa0;
    }

    #splash h1 {
      font-size: 48px;
      margin-bottom: 30px;
    }

    .loadbar {
      width: 400px;
      height: 12px;
      background-color: #333;
      border-radius: 6px;
      overflow: hidden;
      margin-top: 30px;
    }

    .progress {
      height: 100%;
      width: 0%;
      background-color: #0099ff;
      transition: width 0.3s ease;
    }
    
    /* Animation fadeIn pour les copyrights */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===== APP HEADER / LOGO ZONE (responsive inside header row) ===== */
    #logo-container.logo-container-responsive,
    #logo-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(4px, 1vw, 12px);
      min-height: var(--app-header-h);
      height: var(--app-header-h);
      max-height: var(--app-header-h);
      position: relative;
      box-sizing: border-box;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      padding-left: 8px;
      padding-right: 8px;
      overflow: hidden;
      width: 100%;
      min-width: 0;
      flex-shrink: 0;
      transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #logo-container .logo-side {
      display: flex;
      align-items: center;
      height: 100%;
      flex: 0 0 auto;
      min-width: 0;
      max-width: 22%;
      overflow: hidden;
    }

    #logo-container .logo-side-right {
      width: min(calc(var(--app-ctrl-size, 40px) * 4 + 110px), 46%);
      max-width: 46%;
      flex: 0 0 auto;
      pointer-events: none;
    }

    #logo-container .logo-watermark {
      height: min(70%, calc(var(--app-header-h) - 12px));
      max-height: 48px;
      width: auto;
      display: block;
      object-fit: contain;
      opacity: 0.2;
      max-width: 100%;
    }

    /* Exact page center (viewport/header), not middle of the flex gap between sides */
    #center-logos-group {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: max-content;
      max-width: calc(100% - 24px);
      flex: 0 0 auto;
      min-width: 0;
      gap: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    #center-logos-group > *,
    #center-logos-group .center-logos-inner {
      pointer-events: auto;
    }

    #center-logos-group .center-logos-inner {
      display: flex;
      align-items: center;
      height: 100%;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }

    #logo-container .logo-responsive {
      height: min(72%, calc(var(--app-header-h) - 10px));
      max-height: 52px;
      width: auto;
      display: block;
      object-fit: contain;
      max-width: min(140px, 22vw);
      flex-shrink: 1;
    }

    #logo-container .logo-margin-responsive {
      margin-right: clamp(4px, 1.2vw, 16px);
    }

    #logo-container .logo-separator-responsive {
      width: clamp(2px, 0.5vw, 6px);
      height: min(60%, calc(var(--app-header-h) - 16px));
      max-height: 44px;
      background: white;
      border-radius: 2px;
      margin-right: clamp(4px, 1.2vw, 16px);
      box-shadow: 0 0 6px 1px #0002;
      flex-shrink: 0;
    }

    #ftv_logo_text_display {
      color: white;
      font-size: clamp(11px, 1.8vw, 18px);
      font-weight: bold;
      margin-right: clamp(4px, 1.2vw, 16px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: min(28vw, 280px);
      display: none;
      line-height: 1;
      padding: 0;
      flex-shrink: 1;
      min-width: 0;
    }

    #shared_logo {
      max-width: min(120px, 18vw);
      flex-shrink: 1;
    }

    @media (max-width: 640px) {
      #logo-container .logo-watermark {
        display: none;
      }
      #logo-container .logo-side-left {
        width: 0;
        max-width: 0;
        overflow: hidden;
      }
      #logo-container .logo-side-right {
        width: min(calc(var(--app-ctrl-size, 40px) * 3 + 72px), 42%);
      }
      #ftv_logo_text_display {
        max-width: min(28vw, 120px);
        font-size: clamp(10px, 2.8vw, 14px);
      }
      #logo-container .logo-responsive {
        max-width: min(96px, 24vw);
        height: min(70%, 36px);
      }
      #logo-container .logo-separator-responsive {
        display: none;
      }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
      #ftv_logo_text_display {
        max-width: min(30vw, 200px);
      }
    }

    /* Style personnalisé pour la barre de défilement de la popup chronologie */
    #events-timeline-content {
      /* Firefox */
      scrollbar-width: thin;
      scrollbar-color: #06b6d4 #374151;
    }

    #events-timeline-content::-webkit-scrollbar {
      width: 8px;
    }

    #events-timeline-content::-webkit-scrollbar-track {
      background: #374151;
      border-radius: 4px;
    }

    #events-timeline-content::-webkit-scrollbar-thumb {
      background: #06b6d4;
      border-radius: 4px;
      border: 1px solid #1f2937;
    }

    #events-timeline-content::-webkit-scrollbar-thumb:hover {
      background: #0891b2;
    }

    /* Animation fluide pour le défilement */
    #events-timeline-content {
      scroll-behavior: smooth;
    }

    /* Padding pour les logos FTV et preset */
    #ftv-logo {
      padding: 6px;
    }

    #shared_logo {
      padding: 6px;
    }

    /* ===== STYLES TICKER RSS (top: under header, above clocks) ===== */
    #news-ticker-container {
      backdrop-filter: blur(15px);
      overflow: hidden;
      position: relative;
      width: 100%;
      min-width: 0;
      height: clamp(22px, 3.2vh, 28px);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      border-radius: 0;
      border-right: none;
      border-left: none;
      box-sizing: border-box;
      z-index: 2;
      /* Les couleurs seront définies dynamiquement par JavaScript en fonction du preset */
    }

    .ticker-header {
      background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
      color: white;
      padding: 0 20px;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
      min-width: 140px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 11px 0 0 11px;
      box-shadow:
        2px 0 10px rgba(255, 0, 0, 0.3),
        inset -1px 0 0 rgba(255, 255, 255, 0.2);
      position: relative;
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
    }

    .ticker-header::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    }

    .ticker-content {
      flex: 1;
      height: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
    }

    .ticker-track {
      display: flex;
      align-items: center;
      white-space: nowrap;
      animation: ticker-scroll 120s linear infinite;
      height: 100%;
    }

    .ticker-item {
      color: #ffffff;
      font-size: 13px;
      font-weight: 500;
      padding: 0 30px;
      display: flex;
      align-items: center;
      height: 100%;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      letter-spacing: 0.3px;
      line-height: 1.2;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
    }

    .ticker-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #00ffff;
      transform: scale(1.02);
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }

    .ticker-item .emoji {
      margin-right: 8px;
      font-size: 16px;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    }

    .ticker-time {
      color: #00e6ff;
      font-size: 11px;
      font-weight: 600;
      margin-left: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(0, 230, 255, 0.1);
      border: 1px solid rgba(0, 230, 255, 0.3);
    }

    /* Animation du défilement */
    @keyframes ticker-scroll {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    /* Gradient de masquage sur les bords - DÉSACTIVÉ pour éviter les zones colorées */
    .ticker-content::before,
    .ticker-content::after {
      display: none;
    }

    /* Indicateur de statut discret */
    .ticker-status {
      position: absolute;
      top: 50%;
      right: 8px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(0, 255, 0, 0.6);
      transform: translateY(-50%);
      z-index: 10;
      opacity: 0.7;
    }

    .ticker-status.error {
      background: rgba(255, 68, 68, 0.6);
    }

    /* ===== RSS BAS: sits under #clocks-container, above #ec-status-footer ===== */
    #bottom-ticker-container {
      --rss-h: clamp(48px, 9vh, 80px);
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      width: 100%;
      min-width: 0;
      height: var(--rss-h);
      min-height: var(--rss-h);
      max-height: var(--rss-h);
      flex-shrink: 0;
      /* Background color is set dynamically by updateBottomTickerColors() using color_minutes with 0.05 opacity */
      z-index: 2;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .bottom-ticker-scroll {
      width: 100%;
      min-width: 0;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      font-family: 'Arial', 'Helvetica', sans-serif;
      overflow: hidden;
    }

    .bottom-ticker-item {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      padding: 0 clamp(8px, 2vw, 20px);
      box-sizing: border-box;
      gap: clamp(8px, 1.5vw, 20px);
      overflow: hidden;
      min-width: 0;
    }

    .bottom-ticker-item-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: clamp(6px, 1.2vw, 15px);
      flex-shrink: 0;
      height: 100%;
      max-height: 100%;
    }

    .bottom-ticker-item-time {
      height: calc(100% - 8px);
      width: auto;
      aspect-ratio: 1;
      max-width: min(80px, 18vw);
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(2px, 0.6vw, 6px);
      box-sizing: border-box;
      flex-shrink: 0;
      font-family: 'Arial', 'Helvetica', sans-serif;
      overflow: hidden;
    }

    .bottom-ticker-item-time .time-display {
      font-size: clamp(9px, 1.4vw, 16px);
      font-weight: 600;
      color: #a78989;
      line-height: 1.15;
      white-space: nowrap;
      margin-bottom: 1px;
    }

    .bottom-ticker-item-time .date-display {
      font-size: clamp(7px, 1vw, 11px);
      font-weight: 400;
      color: #ffffffba;
      line-height: 1.15;
      white-space: nowrap;
      opacity: 0.8;
    }

    .bottom-ticker-item-thumbnail {
      height: calc(100% - 8px);
      width: auto;
      aspect-ratio: 1;
      max-width: min(80px, 18vw);
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
      background: #f0f0f0;
    }

    .bottom-ticker-item-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .bottom-ticker-item-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      height: 100%;
    }

    .bottom-ticker-item.active {
      opacity: 1;
    }

    .bottom-ticker-item.fade-out {
      opacity: 0;
    }

    .bottom-ticker-item.fade-in {
      opacity: 1;
    }

    .bottom-ticker-item-content .ticker-title {
      color: #ffe6e6;
      font-size: clamp(11px, 1.8vw, 20px);
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 clamp(1px, 0.4vh, 6px) 0;
      text-transform: uppercase;
      letter-spacing: clamp(0.2px, 0.05vw, 0.5px);
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .bottom-ticker-item-content .ticker-excerpt {
      color: #9a6767;
      font-size: clamp(9px, 1.3vw, 14px);
      font-weight: 400;
      line-height: 1.25;
      margin: 0;
      width: 100%;
      max-width: 100%;
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-wrap: break-word;
    }

    /* ===== RESPONSIVE RSS BAS (height + content scale with viewport) ===== */
    @media (max-width: 1000px) {
      #bottom-ticker-container {
        --rss-h: clamp(44px, 8.5vh, 70px);
      }
    }

    @media (max-width: 800px) {
      #bottom-ticker-container {
        --rss-h: clamp(40px, 8vh, 60px);
      }
      .bottom-ticker-item-content .ticker-excerpt {
        -webkit-line-clamp: 1;
      }
    }

    @media (max-width: 600px) {
      #bottom-ticker-container {
        --rss-h: clamp(36px, 7.5vh, 50px);
      }
      .bottom-ticker-item-time .date-display {
        display: none;
      }
      .bottom-ticker-item-content .ticker-excerpt {
        display: none;
      }
      .bottom-ticker-item-thumbnail {
        display: none;
      }
    }

    @media (max-width: 400px) {
      #bottom-ticker-container {
        --rss-h: 34px;
      }
      .bottom-ticker-item-time {
        display: none;
      }
    }

    /* ===== CARTE ACTUALITÉS INTÉGRÉE DANS LA GRILLE ===== */
    #news-card-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      box-sizing: border-box;
      padding: 10px;
      position: relative;
    }
    
    /* Clocks stay strictly inside main grid row — never under header/footer */
    #clocks-container {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }

    #clocks-container #dual-clock-container {
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;
    }

    .news-card {
      background: #000;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      height: 100%;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      pointer-events: auto;
      opacity: 1;
      transition: opacity 0.8s ease-in-out;
    }

    .news-card.fade-out {
      opacity: 0;
    }

    .news-card.fade-in {
      opacity: 1;
    }

    .news-card-image-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }

    .news-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.85;
      transition: opacity 0.8s ease-in-out;
    }

    .news-card-emoji {
      font-size: 64px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.3;
      z-index: 2;
    }

    /* Overlay sombre en bas pour la lisibilité du texte */
    .news-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
      z-index: 2;
      pointer-events: none;
    }

    .news-card-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
      transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    }

    .news-card.fade-out .news-card-content {
      opacity: 0;
      transform: translateY(10px);
    }

    .news-card.fade-in .news-card-content {
      opacity: 1;
      transform: translateY(0);
    }

    .news-card-title {
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
      line-height: 1.3;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      letter-spacing: 0.3px;
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
    }

    .news-card-description {
      font-size: 14px;
      color: #ffffff;
      margin: 0;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
      opacity: 0.95;
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
    }

    .news-card-footer {
      display: none; /* Masquer le footer */
    }

    .news-card-date-time {
      font-size: 12px;
      color: #ffffff;
      margin: 0 0 8px 0;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
      opacity: 0.9;
      font-weight: 500;
      letter-spacing: 0.5px;
      font-family: 'FranceTVBrownTT-Regular', 'Arial', 'Helvetica', sans-serif;
    }

    .news-card-time {
      display: none; /* Masquer l'heure (ancien élément) */
    }

    .news-card-link {
      display: none !important; /* Masquer le lien */
    }

    .news-card-close {
      display: none !important; /* Masquer le bouton de fermeture */
    }

    /* Logo du flux RSS en haut à gauche */
    .news-card-feed-logo {
      position: absolute;
      top: 12px;
      left: 12px;
      width: 50px;
      height: 50px;
      z-index: 5;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      box-sizing: border-box;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .news-card-feed-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .news-card-feed-logo .feed-emoji {
      font-size: 28px;
      line-height: 1;
    }

    @media (max-width: 768px) {
      #news-card-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        width: auto;
      }

      .news-card-title {
        font-size: 18px;
      }

      .news-card-description {
        font-size: 13px;
      }

      .news-card-content {
        padding: 16px;
      }
    }

    /* Responsive pour le ticker */
    @media (max-width: 768px) {
      .ticker-header {
        min-width: 100px;
        font-size: 12px;
        padding: 0 15px;
      }

      .ticker-item {
        font-size: 12px;
        padding: 0 20px;
      }

      #news-ticker-container {
        height: 45px;
        margin: 8px;
      }
    }

    @media (max-width: 480px) {
      .ticker-header {
        min-width: 80px;
        font-size: 11px;
        padding: 0 10px;
      }

      .ticker-item {
        font-size: 11px;
        padding: 0 15px;
      }

      #news-ticker-container {
        height: 40px;
        margin: 5px;
      }
    }

    /* Tooltip pour les événements */
    .event-tooltip {
      cursor: pointer;
    }

    /* Tooltip pour les rectangles dynamiques */
    .event-tooltip.dynamic-event {
      position: relative;
    }

    /* Tooltip pour les zones d'événements (nouvelle classe) */
    .event-tooltip.zone-event {
      position: relative;
    }

    .event-tooltip.zone-event::after {
      content: "Cliquez pour voir la chronologie complète dans ce fuseau horaire";
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(calc(-50% + var(--tooltip-offset, 0px)));
      background-color: #dc2626;
      color: white;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 9999;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      pointer-events: none;
      min-width: 320px;
      text-align: center;
      line-height: 1.4;
    }

    .event-tooltip.zone-event::before {
      content: "";
      position: absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(calc(-50% + var(--tooltip-offset, 0px)));
      border: 8px solid transparent;
      border-top-color: #dc2626;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 9999;
      pointer-events: none;
    }

    .event-tooltip.zone-event:hover::after,
    .event-tooltip.zone-event:hover::before {
      opacity: 1;
      visibility: visible;
    }

    /* Tooltip position alternative pour les zones */
    .event-tooltip.zone-event.tooltip-bottom::after {
      bottom: auto;
      top: calc(100% + 10px);
    }

    .event-tooltip.zone-event.tooltip-bottom::before {
      bottom: auto;
      top: calc(100% + 4px);
      border-top-color: transparent;
      border-bottom-color: #dc2626;
    }

    .event-tooltip.dynamic-event::after {
      content: "Cliquez pour voir la chronologie complète dans ce fuseau horaire";
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(calc(-50% + var(--tooltip-offset, 0px)));
      background-color: #dc2626;
      color: white;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 9999;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      pointer-events: none;
      min-width: 320px;
      text-align: center;
      line-height: 1.4;
    }

    /* Tooltip alternative qui s'affiche en bas si pas de place en haut */
    .event-tooltip.dynamic-event.tooltip-bottom::after {
      bottom: auto;
      top: calc(100% + 10px);
    }

    .event-tooltip.dynamic-event::before {
      content: "";
      position: absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(calc(-50% + var(--tooltip-offset, 0px)));
      border: 8px solid transparent;
      border-top-color: #dc2626;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 9999;
      pointer-events: none;
    }

    /* Flèche alternative pour tooltip en bas */
    .event-tooltip.dynamic-event.tooltip-bottom::before {
      bottom: auto;
      top: calc(100% + 4px);
      border-top-color: transparent;
      border-bottom-color: #dc2626;
    }

    .event-tooltip.dynamic-event:hover::after,
    .event-tooltip.dynamic-event:hover::before {
      opacity: 1;
      visibility: visible;
    }

    /* Tooltip pour les événements principaux - sans position relative */
    .event-tooltip.main-event {
      position: static;
      /* Préserver le positionnement original */
    }

    /* Animation shimmer pour les cartes d'événements */
    @keyframes shimmer {
      0% {
        left: -100%;
      }

      100% {
        left: 100%;
      }
    }

    /* Animation pulse pour les flèches */
    @keyframes pulse {

      0%,
      100% {
        opacity: 0.6;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.1);
      }
    }

    /* Styles pour le ticker d'actualités sportives - Design centré avec fade */
    .news-ticker-container {
      width: 100%;
      height: 35px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ticker-header {
      display: none;
      /* Suppression du cartouche */
    }

    .ticker-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .news-ticker-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: relative;
    }

    .news-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: clamp(11px, 1.5vw, 15px);
      color: #ffffff;
      font-weight: 400;
      text-align: center;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 clamp(8px, 2vw, 20px);
      box-sizing: border-box;
      min-width: 0;
      gap: 6px;
    }

    .news-item.active {
      opacity: 1;
    }

    .news-emoji {
      margin-right: 0;
      font-size: clamp(11px, 1.4vw, 13px);
      flex-shrink: 0;
    }

    .news-time {
      color: white;
      font-weight: 500;
      margin-right: 0;
      font-size: clamp(9px, 1.1vw, 10px);
      padding: 1px 4px;
      border-radius: 2px;
      background: rgba(0, 255, 255, 0.05);
      border: 1px solid rgba(0, 255, 255, 0.1);
      flex-shrink: 0;
    }

    .news-title {
      min-width: 0;
      max-width: 100%;
      flex: 1 1 auto;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    /* Animation de fade pour les actualités */
    @keyframes fadeInOut {
      0% {
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    /* Animation de clignotement pour l'indicateur LIVE */
    @keyframes live-blink {

      0%,
      50% {
        opacity: 1;
      }

      51%,
      100% {
        opacity: 0.3;
      }
    }

    .live-indicator {
      animation: live-blink 2s infinite;
      color: #ff4444;
      font-weight: 700;
    }

    /* Style sobre pour les cartes d'événements */
    .event-card {
      position: relative;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .event-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 6px;
      pointer-events: none;
    }

    /* Effet hover discret pour les cartes principales */
    .event-card-main:hover {
      background: rgba(0, 0, 0, 0.6) !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
      transform: none !important;
      box-shadow: none !important;
    }

    /* Force le masquage du logo-container quand la classe logo-hidden est présente */
    #logo-container.logo-hidden {
      display: none !important;
    }

    /* Disable ALL hover effects on Pickr color picker - only allow click and drag */
    #static-color-picker,
    #static-color-picker *,
    #static-color-picker *::before,
    #static-color-picker *::after {
      transition: none !important;
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -o-transition: none !important;
    }
    
    /* Disable hover effects on all Pickr elements - comprehensive override */
    #static-color-picker .pcr-button:hover,
    #static-color-picker .pcr-interaction:hover,
    #static-color-picker .pcr-swatch:hover,
    #static-color-picker .pcr-palette:hover,
    #static-color-picker .pcr-slider:hover,
    #static-color-picker .pcr-hue:hover,
    #static-color-picker .pcr-opacity:hover,
    #static-color-picker .pcr-result:hover,
    #static-color-picker .pcr-last-color:hover,
    #static-color-picker button:hover,
    #static-color-picker input:hover,
    #static-color-picker label:hover,
    #static-color-picker div:hover,
    #static-color-picker span:hover,
    #static-color-picker *:hover {
      background-color: inherit !important;
      background: inherit !important;
      border-color: inherit !important;
      border: inherit !important;
      color: inherit !important;
      opacity: 1 !important;
      transform: none !important;
      -webkit-transform: none !important;
      filter: none !important;
      -webkit-filter: none !important;
      box-shadow: inherit !important;
      outline: none !important;
      text-decoration: none !important;
    }
    
    /* Ensure click and drag work with crosshair cursor */
    #static-color-picker .pcr-palette,
    #static-color-picker .pcr-hue,
    #static-color-picker .pcr-opacity {
      cursor: crosshair !important;
    }
    
    /* Keep pointer events enabled for interaction */
    #static-color-picker * {
      pointer-events: auto !important;
    }
    
    /* Disable any active/focus states that might look like hover */
    #static-color-picker *:active,
    #static-color-picker *:focus {
      outline: none !important;
      box-shadow: none !important;
    }

/* ===== SETTINGS PANEL — phone / tablet / desktop / Mac ===== */
#settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 65;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.settings-open #settings-overlay {
  display: block;
  opacity: 1;
}

#settings-popup {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--settings-panel-width);
  height: 100dvh;
  max-height: 100dvh;
  z-index: 70;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-panel, rgba(242, 242, 247, 0.98));
  color: var(--color-text-primary, #000);
  box-shadow: -8px 0 28px var(--color-shadow, rgba(0, 0, 0, 0.12));
  border-left: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.06));
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
  padding-right: var(--safe-right);
}

#settings-popup.visible {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

#settings-popup .settings-panel-header {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--color-titlebar-from, rgba(242, 242, 247, 0.96)), var(--color-titlebar-to, rgba(242, 242, 247, 0.96)));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.08));
  padding: 12px 16px 10px;
  padding-top: max(12px, var(--safe-top));
}

#settings-popup .settings-drag-handle {
  display: none;
  width: 36px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 3px;
  background: var(--color-border-secondary, rgba(0, 0, 0, 0.2));
}

#settings-popup .settings-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#settings-popup .settings-panel-header h3,
#settings-popup #settings-panel-title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--color-text-primary, #000) !important;
  text-align: left !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
}

#settings-popup #close-settings {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--color-border-primary, rgba(0,0,0,0.12)) !important;
  border-radius: var(--radius-chrome, 2px) !important;
  background: var(--chip-bg, rgba(120, 120, 128, 0.16)) !important;
  color: var(--color-text-secondary, #000) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

#settings-popup #close-settings:hover {
  background: var(--color-accent-dim, rgba(120, 120, 128, 0.28)) !important;
  color: var(--color-accent, #c2410c) !important;
  border-color: var(--color-accent, #c2410c) !important;
}

#settings-popup .settings-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px calc(28px + var(--safe-bottom)) !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--color-bg-panel, transparent) !important;
}

#settings-popup .border-b {
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.85)) !important;
  border-radius: var(--radius-panel, 4px) !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
  border: 1px solid var(--color-border-primary, transparent) !important;
}

#settings-popup .text-xs {
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  color: var(--color-text-primary, #000) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

#settings-popup .grid {
  gap: 12px !important;
}

#settings-popup .flex {
  gap: 8px !important;
}

#settings-popup .space-y-2 > * + * {
  margin-top: 12px !important;
}

#settings-popup input[type="text"],
#settings-popup input[type="range"],
#settings-popup select {
  background: var(--input-bg, rgba(255, 255, 255, 0.9)) !important;
  border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1)) !important;
  border-radius: var(--radius-chrome, 2px) !important;
  color: var(--color-text-primary, #000) !important;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  max-width: 100%;
  box-sizing: border-box;
}

#settings-popup input[type="checkbox"] {
  width: 40px !important;
  height: 22px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--switch-off, rgba(120, 120, 128, 0.28)) !important;
  border-radius: 11px !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  border: none !important;
  outline: none !important;
  flex-shrink: 0;
}

#settings-popup input[type="checkbox"]:checked {
  background: var(--switch-on, #34C759) !important;
}

#settings-popup input[type="checkbox"]::before {
  content: '' !important;
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  top: 2px !important;
  left: 2px !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

#settings-popup input[type="checkbox"]:checked::before {
  transform: translateX(18px) !important;
}

#settings-popup input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 3px !important;
  background: var(--color-border-primary, rgba(120, 120, 128, 0.16)) !important;
  border-radius: 2px !important;
  outline: none !important;
  width: 100%;
}

#settings-popup input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--color-accent, #ff9d2f) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border: none !important;
}

#settings-popup input[type="range"]::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--color-accent, #ff9d2f) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border: none !important;
}

#settings-popup button {
  background: var(--chip-bg, rgba(0, 122, 255, 0.1)) !important;
  color: var(--color-text-primary, #007AFF) !important;
  border: 1px solid var(--color-border-primary, transparent) !important;
  border-radius: var(--radius-chrome, 2px) !important;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  cursor: pointer;
}

#settings-popup button:hover {
  background: var(--color-accent-dim, rgba(0, 122, 255, 0.2)) !important;
  color: var(--color-accent, #c2410c) !important;
  border-color: var(--color-accent, #c2410c) !important;
}

#settings-popup #preset-list-1 option {
  color: var(--color-text-primary, #111) !important;
  background-color: var(--color-bg-elevated, #fff) !important;
}

#logo-container,
#news-ticker-container,
#clocks-container,
#dual-clock-container,
#bottom-ticker-container {
  transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1), right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Desktop / large laptop / Mac: side panel + content push */
@media (min-width: 1025px) {
  body.settings-open #settings-overlay {
    display: none;
  }

  body.settings-open #logo-container,
  body.settings-open #news-ticker-container,
  body.settings-open #clocks-container,
  body.settings-open #dual-clock-container {
    margin-right: var(--settings-panel-width) !important;
  }

  body.settings-open #bottom-ticker-container {
    right: var(--settings-panel-width) !important;
    left: 0 !important;
  }

  body.settings-open #info-popup,
  body.settings-open #stats-popup,
  body.settings-open #devlog-popup {
    right: calc(var(--settings-panel-width) + 16px) !important;
  }

  body.settings-open #app-controls {
    right: var(--settings-panel-width);
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --settings-panel-width: min(420px, 40vw);
  }
}

/* Tablet: centered modal */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --settings-panel-width: min(640px, 92vw);
  }

  body.settings-open #settings-overlay {
    display: block;
  }

  #settings-popup {
    top: 50%;
    left: 50%;
    right: auto;
    width: var(--settings-panel-width);
    height: min(88dvh, 900px);
    max-height: min(88dvh, 900px);
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
  }

  #settings-popup.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  #settings-popup .settings-panel-body {
    padding: 20px 20px 36px !important;
  }

  #settings-popup .text-xs {
    font-size: 14px !important;
  }

  #settings-popup input[type="text"],
  #settings-popup select,
  #settings-popup button {
    min-height: 44px !important;
    font-size: 15px !important;
  }

  body.settings-open #logo-container,
  body.settings-open #news-ticker-container,
  body.settings-open #clocks-container,
  body.settings-open #dual-clock-container {
    margin-right: 0 !important;
  }

  body.settings-open #bottom-ticker-container {
    right: 0 !important;
  }

  body.settings-open #app-controls {
    right: 0;
  }
}

/* Phone / small tablet portrait: bottom sheet */
@media (max-width: 768px) {
  body.settings-open #settings-overlay {
    display: block;
  }

  #settings-popup {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: min(92dvh, 100%);
    max-height: min(92dvh, 100%);
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
    transform: translateY(105%);
    padding-bottom: var(--safe-bottom);
  }

  #settings-popup.visible {
    transform: translateY(0);
  }

  #settings-popup .settings-drag-handle {
    display: block;
  }

  #settings-popup .settings-panel-header {
    padding: 10px 14px 8px;
  }

  #settings-popup .settings-panel-body {
    padding: 14px 14px calc(28px + var(--safe-bottom)) !important;
  }

  #settings-popup .border-b {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  #settings-popup .text-xs {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  #settings-popup input[type="text"],
  #settings-popup select {
    min-height: 44px !important;
    padding: 12px 14px !important;
    font-size: 16px !important; /* iOS zoom prevention */
  }

  #settings-popup button:not(#close-settings):not(.settings-tab) {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  #settings-popup label {
    min-height: 44px;
    padding: 6px 0;
  }

  #settings-popup input[type="range"] {
    height: 6px !important;
    margin: 14px 0 !important;
  }

  #settings-popup input[type="range"]::-webkit-slider-thumb {
    width: 32px !important;
    height: 32px !important;
  }

  #settings-popup input[type="range"]::-moz-range-thumb {
    width: 32px !important;
    height: 32px !important;
  }

  /* Clock config rows stack on narrow phones */
  #settings-popup #clocks-list > label {
    flex-wrap: wrap;
    gap: 8px;
  }

  #settings-popup #clocks-list .relative {
    max-width: 100% !important;
    flex: 1 1 100%;
    margin-left: 0 !important;
  }

  body.settings-open #logo-container,
  body.settings-open #news-ticker-container,
  body.settings-open #clocks-container,
  body.settings-open #dual-clock-container {
    margin-right: 0 !important;
  }

  body.settings-open #bottom-ticker-container {
    right: 0 !important;
  }

  body.settings-open #app-controls {
    right: 0;
  }

  body.settings-open #info-popup,
  body.settings-open #stats-popup,
  body.settings-open #devlog-popup {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 16px !important;
  }
}

@media (max-width: 380px) {
  #settings-popup {
    height: min(94dvh, 100%);
    max-height: min(94dvh, 100%);
  }

  #settings-popup .settings-panel-header h3,
  #settings-popup #settings-panel-title {
    font-size: 18px !important;
  }

  #app-controls #stats-btn {
    display: none;
  }

  #logo-container .logo-side-right {
    width: calc(var(--app-ctrl-size) * 3);
  }
}

/* Landscape phones: keep sheet usable */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #settings-popup {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: min(420px, 70vw);
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    transform: translateX(105%);
  }

  #settings-popup.visible {
    transform: translateX(0);
  }

  #settings-popup .settings-drag-handle {
    display: none;
  }
}

/* Info / stats popups: basic responsive shell (not clock core) */
@media (max-width: 768px) {
  #info-popup,
  #stats-popup,
  #devlog-popup {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
}