/* Extrait du bloc <style> inline de header.php (thème WordPress cauxtt).
   Voir CLAUDE.md "Conservation du design existant" : les styles spécifiques
   à un template ne doivent plus être écrits en dur dans le HTML/PHP, donc
   sortis ici plutôt que reconduits en inline dans ui/layout.htm.
   Le sélecteur '.home .site-header .main-nav a[href="/"]' et les classes
   ".current-menu-item"/".current_page_item" (mise en avant du lien actif)
   ne sont pas encore alimentés côté F3 (voir ui/layout.htm) — sans effet
   pour l'instant, conservés pour brancher cette mise en avant plus tard. */

    /* Lien cliquable autour du logo */
    .site-logo-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      border-radius: 16px;
      text-decoration: none;
      cursor: pointer;
      position: relative;
      transition: transform 0.09s ease, box-shadow 0.09s ease;
    }

    .site-logo-link:focus-visible {
      outline: 2px solid rgba(79,216,255,0.9);
      outline-offset: 3px;
    }

    /* Logo carré avec bords arrondis dans le header */
    .site-logo {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at top, rgba(79,216,255,0.12), rgba(3,8,15,0.98));
      border: 1px solid rgba(79,216,255,0.7);
      box-shadow:
        0 0 4px  rgba(79,216,255,0.7),
        0 0 10px rgba(79,216,255,0.45),
        0 0 18px rgba(79,216,255,0.35);
      transition: box-shadow 0.09s ease, border-color 0.09s ease;
    }

    .site-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 12px;
    }

    .site-logo-link:hover .site-logo {
      box-shadow:
        0 0 5px  rgba(79,216,255,0.9),
        0 0 14px rgba(79,216,255,0.6),
        0 0 22px rgba(79,216,255,0.45);
      border-color: rgba(79,216,255,0.9);
    }

    .site-logo-link:active {
      transform: translateY(2px);
    }

    .site-logo-link:active .site-logo {
      box-shadow:
        0 0 2px rgba(79,216,255,0.8),
        0 0 6px rgba(79,216,255,0.5),
        inset 0 0 14px rgba(0,0,0,0.9);
      border-color: rgba(79,216,255,1);
    }

    .site-header .main-nav .current-menu-item > a,
    .site-header .main-nav .current_page_item > a {
      color: #021018 !important;
      background: linear-gradient(135deg, var(--accent-light), var(--accent-strong)) !important;
      border-color: rgba(79,216,255,1) !important;
      box-shadow:
        0 0 4px rgba(79,216,255,0.7),
        0 0 10px rgba(79,216,255,0.4);
    }

    .home .site-header .main-nav a[href="/"] {
      color: #021018 !important;
      background: linear-gradient(135deg, var(--accent-light), var(--accent-strong)) !important;
      border-color: rgba(79,216,255,1) !important;
      box-shadow:
        0 0 4px rgba(79,216,255,0.7),
        0 0 10px rgba(79,216,255,0.4);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Burger au-dessus du menu */
    .burger {
      position: relative;
      z-index: 30;
    }

    .site-header .main-nav {
      position: relative;
      z-index: 10;
    }

    /* Menu principal (desktop) */
    .site-header .main-nav > ul {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      padding: 0;
      list-style: none;
      white-space: nowrap;
    }

    /* Sous-menus : comportement normal */
    .site-header .main-nav .submenu {
      white-space: normal;
    }

    .site-header .main-nav > ul > li > a {
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
    }

    /* === RÉSULTATS : style type LIVE / HelloAsso mais vert === */
    .site-header .main-nav li.menu-resultats > a,
    .site-header .main-nav a.menu-resultats {
      color: #a9ffcf !important;
      border-color: rgba(72,255,155,0.7) !important;
      background: radial-gradient(circle at top, rgba(72,255,155,0.18), rgba(5,10,15,0.98)) !important;
      box-shadow:
        0 0 3px rgba(72,255,155,0.6),
        0 0 8px rgba(72,255,155,0.4);
      font-weight: 600;
      text-transform: uppercase;
      text-shadow: 0 0 4px rgba(0,0,0,0.85);
    }

    .site-header .main-nav li.menu-resultats > a:hover,
    .site-header .main-nav a.menu-resultats:hover {
      color: #c6ffe1 !important;
      border-color: rgba(150,255,200,0.95) !important;
      background: radial-gradient(circle at top, rgba(120,255,190,0.26), rgba(5,10,15,1)) !important;
      box-shadow:
        0 0 5px rgba(150,255,200,0.85),
        0 0 12px rgba(72,255,155,0.6);
      text-decoration: none;
      transform: translateY(-1px);
    }

    .site-header .main-nav li.menu-resultats > a:active,
    .site-header .main-nav a.menu-resultats:active {
      transform: translateY(1px);
      box-shadow:
        0 0 4px rgba(120,255,190,0.7),
        0 0 10px rgba(72,255,155,0.5),
        inset 0 0 8px rgba(0,0,0,0.9);
    }

    /* === TOURNOI PICAUX : style type LIVE / HelloAsso mais violet === */
    .site-header .main-nav li.menu-picaux > a,
    .site-header .main-nav a.menu-picaux {
      color: rgba(174, 105, 253, 1) !important;
      border-color: rgba(177,122,255,0.75) !important;
      background: radial-gradient(circle at top, rgba(177,122,255,0.2), rgba(5,10,15,0.98)) !important;
      box-shadow:
        0 0 3px rgba(190,140,255,1),
        0 0 8px rgba(160,110,255,1);
      font-weight: 600;
      text-transform: uppercase;
      text-shadow: 0 0 4px rgba(0,0,0,0.85);
    }

    .site-header .main-nav li.menu-picaux > a:hover,
    .site-header .main-nav a.menu-picaux:hover {
      color: rgba(174, 105, 253, 1) !important;
      border-color: rgba(210,170,255,0.98) !important;
      background: radial-gradient(circle at top, rgba(210,170,255,0.32), rgba(5,10,18,1)) !important;
      box-shadow:
        0 0 5px rgba(210,170,255,0.9),
        0 0 12px rgba(177,122,255,0.7);
      text-decoration: none;
      transform: translateY(-1px);
    }

    .site-header .main-nav li.menu-picaux > a:active,
    .site-header .main-nav a.menu-picaux:active {
      transform: translateY(1px);
      box-shadow:
        0 0 4px rgba(200,160,255,0.8),
        0 0 10px rgba(177,122,255,0.55),
        inset 0 0 8px rgba(0,0,0,0.9);
    }

    /* Suppression du cadre rouge autour du titre */
    .site-header .site-title {
      background: none !important;
      box-shadow: none !important;
      border: none !important;
      padding: 0 !important;
    }

    .site-header .site-title::before {
      content: none !important;
      border: none !important;
      box-shadow: none !important;
      background: none !important;
    }

    /* Lien PingPocket (icône externe) */
    .site-header .main-nav a.menu-pingpocket::after {
      content: "↗";
      margin-left: 4px;
      font-size: 0.75em;
      vertical-align: middle;
    }

    /* ========================= */
    /*   MODE MOBILE (< 900px)   */
    /* ========================= */
    @media (max-width: 900px) {

      .site-header {
        position: relative;
        z-index: 40;
      }

      .site-header .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
      }

      /* Bloc texte à la même hauteur (65px ici, à mettre à 70 si tu veux) */
      .header-left > div {
        height: 65px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .header-left > div .site-title {
        height: 65px;
        display: flex;
        align-items: center;
        margin: 0;
      }

      /* NAV en overlay sous le header */
      .site-header .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #05070b;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease;
      }

      .site-header .main-nav.open {
        max-height: 80vh;   /* hauteur déroulée */
        opacity: 1;
      }

      /* Menu principal en colonne */
      .site-header .main-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
        white-space: normal;
      }

      .site-header .main-nav > ul > li {
        width: 100%;
      }

      .site-header .main-nav > ul > li > a {
        display: flex;
        width: 100%;
        justify-content: flex-start;
      }

      /* Sous-menus dans le flux de cette colonne */
      .site-header .main-nav .submenu {
        position: static;
        margin-top: 4px;
      }

      /* Légère réduction du glow sur mobile */
      .main-nav a.menu-resultats,
      .main-nav a.menu-picaux {
        box-shadow:
          0 0 2px rgba(0,0,0,0.85),
          0 0 6px rgba(79,216,255,0.18);
      }
    }