/* Barre de navigation partagée com_toppronos -- autonome (pas de dépendance sur accueil.css/
   dashboard.css, chargée sur des pages qui n'ont pas forcément ces autres feuilles). */
.tp-navbar {
    background: #0F1E40;
    color: #fff;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.tp-navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Menu hamburger mobile (demande utilisateur 06/08/2026, teste sur iPhone 15 -- avant ce
   correctif, .tp-navbar-links passait juste a la ligne sous le logo en dessous de 640px, ce
   qui tassait les 5 liens + le bloc utilisateur sur un ecran de 390px de large). Cache par
   defaut, affiche uniquement sous le breakpoint mobile ci-dessous. */
.tp-navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.tp-navbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform .18s ease, opacity .18s ease;
}
.tp-navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tp-navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tp-navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tp-navbar-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
}

.tp-navbar-logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    white-space: nowrap;
}

.tp-navbar-logo span {
    color: #C9A84C;
}

.tp-navbar-links {
    display: flex;
    gap: 22px;
    flex: 1;
    flex-wrap: wrap;
}

.tp-navbar-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}

.tp-navbar-links a:hover {
    color: #C9A84C;
}

/* Onglet Championnat mis en avant en brillant, entre le logo et "Pronostic du jour"
   (demande utilisateur 04/08/2026) -- degrade dore anime + leger halo, pour attirer l'oeil
   sans etre agressif. */
.tp-navbar-championnat {
    background: linear-gradient(90deg, #C9A84C, #F3D98B, #C9A84C);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 700 !important;
    animation: tp-championnat-shine 3s linear infinite;
    text-shadow: 0 0 12px rgba(201,168,76,.35);
}
@keyframes tp-championnat-shine {
    to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-navbar-championnat { animation: none; }
}

.tp-navbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.tp-navbar-username {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.tp-navbar-ardoise {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    cursor: default;
}

.tp-navbar-btn,
.tp-navbar-logout-btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
}

.tp-navbar-btn:hover,
.tp-navbar-logout-btn:hover {
    border-color: #C9A84C;
    color: #C9A84C;
}

.tp-navbar-logout-form {
    margin: 0;
    display: inline;
}

/* Amélioration champ "Ville" (profil membre) -- injecté en JS par navbar.php, sur une page
   Cassiopeia native (fond clair), pas la navbar navy -- palette dédiée. */
.tp-ville-geo-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid #C9A84C;
    color: #0F1E40;
    font-size: 0.85rem;
    cursor: pointer;
}

.tp-ville-geo-btn:hover {
    background: #C9A84C;
    color: #0F1E40;
}

.tp-ville-geo-msg {
    font-size: 0.8rem;
    color: #8a6d3b;
    margin-top: 4px;
}

/* Badge (i) injecte en JS a cote du champ "Code de parrainage" a l'inscription (10/08/2026). */
.tp-info-icon { cursor: help; color: #9A7A2E; font-size: .85em; margin-left: 4px; }

/* Label "Code de parrainage" en dore sur la page profil (11/08/2026, demande utilisateur). */
body.view-profile #jform_parrainage_code-lbl { color: #C9A84C; }

/* Pages Joomla natives com_users (profil/connexion/inscription) -- restyle purement visuel du
   HTML natif genere par Joomla (fieldset#users-profile-core, dl.dl-horizontal, .control-group...),
   aucune structure ni logique PHP core modifiee. Charge partout via navbar.css deja global. */
body.com_users {
    background: #F4F6FB;
}

body.com_users .container-component {
    max-width: 760px;
    margin: 0 auto;
}

/* Vue profil (lecture seule) */
.com-users-profile fieldset {
    background: #fff;
    border: 1px solid rgba(15, 30, 64, .08);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15, 30, 64, .06);
}

.com-users-profile legend {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0F1E40;
    border: none;
    width: auto;
    padding: 0 0 4px;
    margin-bottom: 10px;
}

.com-users-profile dl.dl-horizontal {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 10px;
    column-gap: 16px;
    margin: 0;
    align-items: center;
}

.com-users-profile dl.dl-horizontal dt {
    font-weight: 600;
    color: #2A3D6A;
    font-size: .85rem;
}

.com-users-profile dl.dl-horizontal dd {
    margin: 0;
    color: #0F1E40 !important;
    font-size: .9rem;
    border: 1px solid rgba(15, 30, 64, .15);
    border-radius: 8px;
    background: #F7F9FC;
    padding: 7px 12px;
    white-space: nowrap;
    width: max-content;
}

/* Le bouton "Modifier mon profil" est en float-end natif Joomla, ce qui reduit la largeur
   dispo pour la fieldset "Profil" a cote et provoquait un debordement des valeurs dd (cf.
   colonne cote). Passe en flexbox colonne pour repositionner le bouton en bas de page (order),
   sans toucher au template core.php/profile natif -- la fieldset recupere ainsi toute la
   largeur du conteneur. */
.com-users-profile.profile {
    display: flex;
    flex-direction: column;
}

.com-users-profile__edit {
    order: 99;
    float: none;
    align-self: flex-end;
    margin-top: 4px;
    margin-bottom: 16px;
}

.com-users-profile__edit .btn-primary {
    background: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #0A0A0F !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
}

.tp-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0F1E40;
    color: #C9A84C;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Formulaires natifs com_users (edit profil / connexion / inscription) */
body.com_users fieldset {
    background: #fff;
    border: 1px solid rgba(15, 30, 64, .08);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15, 30, 64, .06);
}

body.com_users fieldset legend {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0F1E40;
    border: none;
    width: auto;
    padding: 0 0 4px;
    margin-bottom: 10px;
}

body.com_users .control-label {
    font-weight: 600;
    color: #2A3D6A;
    font-size: .85rem;
    margin-bottom: 4px;
}

body.com_users .form-control,
body.com_users input[type="text"],
body.com_users input[type="email"],
body.com_users input[type="password"] {
    border: 1px solid rgba(15, 30, 64, .18);
    border-radius: 8px;
    padding: 8px 12px;
}

body.com_users .form-control:focus {
    border-color: #C9A84C;
    box-shadow: 0 0 0 2px rgba(201, 168, 76, .25);
    outline: none;
}

body.com_users .btn-success,
body.com_users button[type="submit"].btn-primary {
    background: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #0A0A0F !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}

@media (max-width: 640px) {
    .tp-navbar-toggle { display: flex; }

    .tp-navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #0F1E40;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    .tp-navbar-menu.tp-navbar-menu-open { display: flex; }

    .tp-navbar-inner { position: relative; }

    /* flex-wrap:nowrap indispensable ici : .tp-navbar-links herite de "flex-wrap: wrap" de sa
       regle de base (pensee pour la rangee horizontale desktop) -- combine au
       flex-direction:column ci-dessous, "wrap" faisait passer les liens en colonnes multiples
       au lieu de les empiler simplement, ce qui ne laissait apparaitre que le 1er lien avant de
       laisser voir le contenu de la page en dessous (bug remonte par l'utilisateur 06/08/2026,
       capture iPhone 15 : "je ne vois plus rien, plus de menu"). */
    .tp-navbar-links {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
    }
    .tp-navbar-links a {
        padding: 14px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .tp-navbar-user {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 14px 24px;
        gap: 12px;
    }
}

/* Bandeau cookies RGPD -- fixe en bas d'écran, au-dessus de tout le reste. */
.tp-cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: #0F1E40; color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.2);
}
.tp-cookie-banner-inner {
    max-width: 1200px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: .85rem;
}
.tp-cookie-banner-btn {
    background: #C9A84C; color: #0A0A0F; border: none; border-radius: 999px;
    padding: 8px 20px; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.tp-cookie-banner-btn:hover { opacity: .88; }