/* =========================================================
   TENNIS TRACKER — STYLE "TABLEAU DE SCORE"
   Un panneau d'affichage de stade rétro (façon Solari / split-flap) :
   fond papier chaleureux, et des tuiles de scores vert sombre à
   chiffres ambre pour tout ce qui affiche un nombre.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Space+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'IBM Plex Sans',Arial,sans-serif;
    -webkit-tap-highlight-color:transparent;
}


html{

    touch-action:manipulation;

}


:root{

    /* panneau de stade (zones scores) */
    --pine-ink:#0f2318;
    --pine-mid:#1c3a27;
    --pine-line:#2e4d38;

    /* accent lumineux */
    --amber:#f2a71b;
    --amber-dim:#c7860f;

    /* accent secondaire (défaites / alertes) */
    --clay:#b5482f;

    /* papier / neutres */
    --paper:#f7f2e7;
    --card:#ffffff;
    --ink:#182018;
    --ink-soft:#5b6b5f;
    --line:#e2dccd;

    --radius:16px;
    --radius-sm:10px;
}



html{

    overflow-x:hidden;

}


/* BODY */

body {
    overflow-x:hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(15,35,24,.05) 1px, transparent 0) 0 0/22px 22px,
        linear-gradient(
            rgba(250,250,240,.85),
            rgba(250,250,240,.85)
        ),
        url("images/body2.jpeg");

    background-size: 22px 22px, auto, cover;
    background-position: 0 0, center, center;
    background-attachment: fixed;

    color: var(--ink);
}


/* HEADER */

.header {
    background:
        linear-gradient(
            135deg,
            rgba(15,35,24,.8),
            rgba(30,70,45,.8)
        ),
        url("images/header3.jpeg");

    background-size: cover;
    background-position: center;

    color: var(--paper);

    padding: 22px 35px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-shadow: 0 6px 24px rgba(15,35,24,.35);

    border-bottom: 3px solid var(--amber);
}



.logo{

    font-family:'Big Shoulders Display',sans-serif;

    font-size:30px;

    font-weight:800;

    letter-spacing:.03em;

    text-transform:uppercase;

    color:var(--paper);

}


.logo::before{

    content:"● ";

    color:var(--amber);

}



/* NAVIGATION */

.navigation{

    display:flex;

    gap:8px;

}


.navigation a{

    color:var(--paper);

    text-decoration:none;

    padding:10px 16px;

    border-radius:50px;

    font-weight:600;

    font-size:15px;

    border:1px solid rgba(247,242,231,.25);

    transition:.2s;

}


.navigation a:hover{

    background:var(--amber);

    color:var(--pine-ink);

    border-color:var(--amber);

}



/* CONTENU */

main{

    width:95%;

    max-width:1400px;

    margin:40px auto;

}



.container{

    width:100%;

}



/* TITRES */

h1{

    font-family:'Big Shoulders Display',sans-serif;

    font-size:38px;

    font-weight:800;

    color:var(--pine-ink);

    text-transform:uppercase;

    letter-spacing:.02em;

    margin-bottom:20px;

    border-left:6px solid var(--amber);

    padding-left:16px;

}



h2{

    font-family:'Big Shoulders Display',sans-serif;

    font-weight:700;

    font-size:20px;

    color:var(--amber);

    letter-spacing:.02em;

    text-transform:uppercase;

    background:linear-gradient(135deg,var(--pine-ink),var(--pine-mid));

    padding:14px 24px;

    margin:-30px -30px 20px -30px;

    border-radius:var(--radius) var(--radius) 0 0;

}


h3{

    font-family:'Big Shoulders Display',sans-serif;

    font-weight:700;

    color:var(--pine-ink);

}



/* CARTES */

.card{

    background:var(--card);

    padding:30px;

    border-radius:var(--radius);

    border:1px solid var(--line);

    box-shadow:
    0 10px 30px rgba(15,35,24,.08);

    margin-bottom:25px;

}



/* FORMULAIRE */

label{

    display:block;

    margin-bottom:8px;

    margin-top:15px;

    font-weight:600;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.04em;

    color:var(--ink-soft);

}



select,
input{

    width:100%;

    padding:13px;

    min-height:48px;

    border-radius:var(--radius-sm);

    border:2px solid var(--line);

    background:var(--paper);

    font-family:'IBM Plex Sans',sans-serif;

    font-size:16px;

    color:var(--ink);

}



select:focus,
input:focus{

    outline:none;

    border-color:var(--amber);

}


/* les champs de score prennent l'allure d'un afficheur numérique */

input[type="number"]{

    font-family:'Space Mono',monospace;

    font-weight:700;

    font-size:22px;

    text-align:center;

    background:var(--pine-ink);

    color:var(--amber);

    border-color:var(--pine-ink);

}


input[type="number"]:focus{

    border-color:var(--amber);

}


/* SETS (ajouter-match.php) : une seule carte, une ligne compacte par set */

.set-row{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px 24px;

    padding:14px 0;

    border-bottom:1px solid var(--line);

}


.set-row:last-child{

    border-bottom:none;

}


.set-number{

    font-family:'Big Shoulders Display',sans-serif;

    font-weight:700;

    font-size:16px;

    text-transform:uppercase;

    color:var(--pine-ink);

    min-width:56px;

    flex-shrink:0;

}


.set-inputs{

    display:flex;

    flex-wrap:wrap;

    gap:12px 24px;

    flex:1;

    min-width:0;

}


.set-input-group{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

}


.set-input-group label{

    margin:0;

    width:78px;

    flex:0 0 78px;

    font-size:13px;

    font-weight:500;

    text-transform:none;

    letter-spacing:normal;

    color:var(--ink-soft);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


input[type="number"].score_set{

    width:52px;

    flex-shrink:0;

    padding:8px 0;

    font-size:18px;

}



/* =========================================================
   TABLEAU DE SCORE (stats.php)
   Chaque cellule de chiffre = une tuile de panneau à volets
   ========================================================= */


.stats-table{

    width:calc(100% + 60px);

    margin:0 -30px -30px -30px;

    border-collapse:collapse;

    border:none;

    border-radius:0 0 var(--radius) var(--radius);

    overflow:hidden;

}


.stats-table thead th{

    font-family:'Big Shoulders Display',sans-serif;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:var(--ink-soft);

    text-align:center;

    padding:14px 10px;

    background:transparent;

    border-bottom:1px solid var(--line);

}


.stats-table thead th:first-child{

    text-align:left;

}


.stats-table tbody tr{

    background:transparent;

}


.stats-table td{

    padding:14px 16px;

    border-bottom:1px solid var(--line);

}


.stats-table tbody tr:last-child td{

    border-bottom:none;

}


.stats-table td:first-child{

    font-weight:600;

    color:var(--ink);

}


/* la tuile à volets : fond vert de panneau, chiffre ambre, pli au milieu */

.stats-table td:not(:first-child){

    text-align:center;

}


/* la tuile à volets : fond vert de panneau, chiffre ambre, pli au milieu */

.tile{

    display:inline-block;

    min-width:64px;

    padding:9px 16px;

    background:#eceae4;

    color:var(--pine-ink);

    font-family:'Big Shoulders Display',sans-serif;

    font-weight:800;

    font-size:22px;

    letter-spacing:.02em;

    border:2px solid var(--line);

    border-radius:10px;

    position:relative;

    box-shadow:0 2px 6px rgba(15,35,24,.06);

}


.stats-table tbody tr:hover td{

    border-color:var(--amber);

}


/* HISTORIQUE DES MATCHS (match-history.php) */

.badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:50px;

    font-weight:700;

    font-size:14px;

    letter-spacing:.01em;

}


.badge-win{

    background:#cfe8cf;

    color:#1f5c28;

}


.badge-lose{

    background:#f2d9d1;

    color:#7a2c1a;

}


/* MEILLEURES VICTOIRES */

.meilleures-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));

    gap:16px;

}


.meilleure-victoire{

    background:var(--paper);

    border:1px solid var(--line);

    border-radius:var(--radius-sm);

    padding:16px 18px;

}


.meilleure-victoire-defaite{

    border-left:4px solid #b5482f;

}


.meilleure-titre{

    font-weight:700;

    font-size:14px;

    color:var(--pine-ink);

    margin-bottom:4px;

}


.meilleure-adversaire{

    font-size:13px;

    color:var(--ink-soft);

    margin-bottom:10px;

}


.score-cell{

    font-family:'Space Mono',monospace;

    font-weight:700;

    text-align:center;

    color:var(--pine-ink);

    letter-spacing:.02em;

}


.score-sets{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:4px 10px;

}


.set-score{

    white-space:nowrap;

    display:inline-flex;

    align-items:center;

    gap:5px;

}


.set-tag{

    display:inline-block;

    font-family:'IBM Plex Sans',sans-serif;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.02em;

    color:var(--ink-soft);

    background:var(--paper);

    border:1px solid var(--line);

    border-radius:4px;

    padding:1px 5px;

}


/* GRAPHIQUES (graphiques.php) */

.legende-joueurs{

    display:flex;

    gap:24px;

    margin-top:4px;

}


.profil-puces{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:14px;

}


.profil-puce{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:var(--paper);

    border:1px solid var(--line);

    border-radius:50px;

    padding:8px 16px;

    font-size:14px;

    color:var(--ink-soft);

}


.profil-puce strong{

    color:var(--pine-ink);

    font-family:'Big Shoulders Display',sans-serif;

    font-size:16px;

}


/* FORME RÉCENTE */

.forme-nom{

    font-weight:600;

    font-size:14px;

    color:var(--ink-soft);

    margin:14px 0 8px;

}


.forme-nom:first-of-type{

    margin-top:0;

}


.forme-ligne{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}


.forme-badge{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border-radius:8px;

    font-family:'Space Mono',monospace;

    font-weight:700;

    font-size:14px;

    cursor:default;

}


.legende-item{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    font-size:14px;

    color:var(--ink-soft);

}


.legende-puce{

    width:14px;

    height:14px;

    border-radius:50%;

    display:inline-block;

}


.legende-j1{

    background:var(--amber);

}


.legende-j2{

    background:var(--clay);

}


.graph-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}


.graph-grid > *{

    min-width:0;

}


.graph-card-large{

    grid-column:1 / -1;

}


.graph-card h2{

    font-size:16px;

    padding:12px 20px;

    margin:-30px -30px 20px -30px;

}


.chart-box{

    position:relative;

    height:280px;

    min-width:0;

    max-width:100%;

}


.chart-box canvas{

    max-width:100%;

}


.chart-box-small{

    height:220px;

}


@media(max-width:800px){

    .graph-grid{

        grid-template-columns:1fr;

    }

    .chart-box{

        height:240px;

    }

}


/* comparaison entre les 2 joueurs : plus faible en rouge, plus fort en vert */

.tile-low{

    background:#f8e2dc;

    border-color:#b5482f;

    color:#7a2c1a;

}


.tile-high{

    background:#e3f3e4;

    border-color:#2f7638;

    color:#1f5c28;

}



/* SCORE (cartes "vs" utilisées dans le formulaire) */

.score{

    display:flex;

    gap:20px;

}



.score div{

    flex:1;

}


.score div select{

    background:var(--card);

    border-color:var(--line);

}



/* BOUTONS */

.btn{

    background:var(--amber);

    color:var(--pine-ink);

    border:none;

    padding:14px 30px;

    min-height:52px;

    border-radius:50px;

    font-family:'Big Shoulders Display',sans-serif;

    font-size:16px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.03em;

    cursor:pointer;

    transition:.15s;

}



.btn:hover{

    background:var(--amber-dim);

    transform:translateY(-1px);

}



/* CONNEXION (index.php) */

.login-body{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.login-wrap{

    width:100%;

    max-width:360px;

    margin:0 auto;

}


.login-card{

    background:var(--card);

    padding:36px 30px;

    border-radius:var(--radius);

    border:1px solid var(--line);

    box-shadow:0 16px 40px rgba(15,35,24,.16);

    text-align:center;

}


.login-badge{

    width:56px;

    height:56px;

    margin:0 auto 16px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--pine-ink),var(--pine-mid));

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

}


.login-marque{

    font-family:'Big Shoulders Display',sans-serif;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--ink-soft);

    margin-bottom:6px;

}


/* on neutralise complètement le style "bannière" du h1 global (bordure ambre, gros texte, etc.)
   pour ce titre-ci : ici il doit juste être un titre de carte, centré et sobre */
h1.login-title{

    font-family:'Big Shoulders Display',sans-serif;

    font-size:24px;

    font-weight:700;

    color:var(--pine-ink);

    text-transform:none;

    letter-spacing:normal;

    border-left:none;

    padding-left:0;

    margin:0 0 24px;

    text-align:center;

}


.login-erreur{

    background:#f2d9d1;

    color:#7a2c1a;

    font-weight:600;

    font-size:14px;

    padding:10px 14px;

    border-radius:var(--radius-sm);

    margin-bottom:16px;

    text-align:center;

}


.login-form{

    text-align:left;

    display:flex;

    flex-direction:column;

    gap:4px;

}


.login-form label{

    margin-top:16px;

    font-size:13px;

}


.login-form label:first-child{

    margin-top:0;

}


.login-form input{

    font-size:15px;

    padding:12px;

}


.login-btn{

    width:100%;

    margin-top:24px;

}



/* MENTIONS LÉGALES */

.mentions-maj{

    text-align:center;

    font-size:13px;

    color:var(--ink-soft);

    margin-top:10px;

}



/* FOOTER */

.footer{

    margin-top:60px;

    padding:30px;

    text-align:center;

    background:var(--pine-ink);

    color:var(--paper);

    border-top:3px solid var(--amber);

    font-size:14px;

}



/* MOBILE */

@media(max-width:800px){


    body{

        /* le fond fixe fait ramer le scroll sur Chrome Android : on le laisse défiler normalement */
        background-attachment:scroll;

        /* place pour la barre de navigation fixe en bas + la zone de gestes Android */
        padding-bottom:calc(64px + env(safe-area-inset-bottom));

    }


    .header{

        padding:16px 20px;

        justify-content:center;

    }


    .logo{

        font-size:22px;

    }


    /* la nav du haut disparaît : elle devient une barre d'onglets fixe en bas de l'écran,
       qui défile horizontalement si tous les onglets ne tiennent pas sur l'écran */
    .navigation{

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        z-index:100;

        display:flex;

        justify-content:flex-start;

        align-items:stretch;

        gap:4px;

        width:100%;

        overflow-x:auto;

        overflow-y:hidden;

        -webkit-overflow-scrolling:touch;

        scroll-snap-type:x proximity;

        scrollbar-width:none;

        background:var(--pine-ink);

        border-top:2px solid var(--amber);

        padding:6px max(4px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));

        box-shadow:0 -6px 20px rgba(15,35,24,.35);

    }


    .navigation::-webkit-scrollbar{

        display:none;

    }


    .navigation a{

        flex:0 0 auto;

        scroll-snap-align:start;

        width:74px;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:2px;

        padding:6px 2px;

        border:none;

        border-radius:10px;

        text-align:center;

        min-height:48px;

    }


    .navigation a:active{

        background:rgba(242,167,27,.18);

    }


    .navigation a:hover{

        background:none;

        color:var(--paper);

        border-color:transparent;

    }


    .nav-icon{

        display:block;

        font-size:20px;

        line-height:1;

    }


    .nav-label{

        display:block;

        font-size:10px;

        font-weight:600;

        line-height:1.1;

        white-space:normal;

    }


    h1{

        font-size:28px;

    }


    .score{

        flex-direction:column;

    }


    /* le tableau de stats devient une pile de lignes : plus besoin de slider latéral */

    .stats-table{

        display:block;

        border-collapse:collapse;

    }


    .stats-table thead{

        display:block;

    }


    .stats-table thead tr{

        display:flex;

        padding:10px 12px;

        border-bottom:2px solid var(--line);

    }


    .stats-table thead th:first-child{

        display:none;

    }


    .stats-table thead th:not(:first-child){

        flex:1 1 0;

        text-align:center;

        padding:0;

    }


    .stats-table tbody{

        display:block;

    }


    .stats-table tr{

        display:flex;

        flex-wrap:wrap;

        align-items:center;

        column-gap:10px;

        row-gap:8px;

    }


    .stats-table td{

        display:block;

    }


    .stats-table td:first-child{

        flex:1 1 100%;

        font-size:14px;

    }


    .stats-table td:not(:first-child){

        flex:1 1 0;

    }


    /* historique-table (match-history.php) : 4 colonnes avec un score potentiellement large
       (étiquettes 1er/2e/3e/TB). Sur mobile, plutôt qu'un tableau large à faire défiler
       latéralement, chaque match devient une petite carte empilée verticalement :
       Date, puis Toi, puis Score, puis Adversaire, chacun sur sa propre ligne. */
    .table-scroll{

        overflow-x:visible;

    }


    .stats-table.historique-table thead{

        display:none;

    }


    .stats-table.historique-table tbody{

        display:block;

    }


    .stats-table.historique-table tr{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:8px;

        padding:14px 12px;

        border-bottom:1px solid var(--line);

    }


    .stats-table.historique-table tr:last-child{

        border-bottom:none;

    }


    .stats-table.historique-table td{

        display:block;

        width:100%;

        flex:none;

        white-space:normal;

        padding:0;

        border:none;

    }


    .stats-table.historique-table td:first-child{

        font-size:13px;

        color:var(--ink-soft);

        font-weight:600;

    }


    .stats-table.historique-table .score-sets{

        justify-content:center;

    }


    .tile{

        min-width:48px;

        font-size:18px;

        padding:8px 10px;

    }


    .set-row{

        gap:6px 16px;

    }


    .set-number{

        width:100%;

        min-width:0;

    }


    .set-inputs{

        gap:10px 16px;

    }


    .set-input-group label{

        width:56px;

        flex:0 0 56px;

        font-size:12px;

    }


    .btn{

        width:100%;

    }


}
.section-title td {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding: 18px 10px;
}