/* =========================================================
VARIABLES
========================================================= */

:root {


--primary-color: #004080;
--secondary-color: #1976d2;

--success-color: #2e7d32;
--warning-color: #fbc02d;
--danger-color: #d32f2f;
--orange-color: #ef6c00;

--light-color: #f4f4f4;
--white: #ffffff;

--gray: #dddddd;
--light-gray: #f1f6fb;

--text-color: #333333;
--text-light: #777777;

--box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.10);

--box-shadow-hover:
    0 6px 15px rgba(0, 0, 0, 0.16);

--font-family:
    Arial,
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;


}

/* =========================================================
RESET
========================================================= */

* {
  box-sizing: border-box;
  }

/* =========================================================
PAGE
========================================================= */

body {


margin: 0;

font-family: var(--font-family);

background: var(--light-color);

color: var(--text-color);


}

/* =========================================================
HEADER
========================================================= */

header {


background: var(--white);

padding: 5px 12px;

position: sticky;

top: 0;

z-index: 100;

box-shadow: var(--box-shadow);


}

header h1 {


margin: 2px 0 4px;

color: var(--primary-color);

font-size: 20px;

text-align: center;

}

#compteur {


font-size: 13px;

color: #c00000;

margin-bottom: 3px;

text-align: center;

}

/* =========================================================
GALERIE
========================================================= */

#galerie {


width: 100%;

padding: 15px;


}

/* =========================================================
CONTENEUR TABLEAU
========================================================= */

.tableau-container {
    width: 100%;
    max-height: calc(100vh - 150px);
    overflow: auto;

    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--box-shadow);

    position: relative;
}


/* =========================================================
TABLEAU
========================================================= */

.tableau-billets {


width: 100%;

min-width: 1250px;

border-collapse: collapse;

background: var(--white);


}

/* =========================================================
   EN-TÊTES
   ========================================================= */

.tableau-billets thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 20;

    height: 38px;
    padding: 8px;

    background: var(--primary-color);
    color: var(--white);

    font-size: 13px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

/* =========================================================
   LIGNE DES FILTRES
   ========================================================= */

.tableau-billets .ligne-filtres th {
    position: sticky;
    top: 38px;
    z-index: 19;

    height: 40px;
    padding: 5px;

    background: #e8f0f8;
    border-bottom: 1px solid var(--gray);
}

/* Les listes restent bien accessibles */
.tableau-billets .ligne-filtres select {
    position: relative;
    z-index: 21;
}


/* =========================================================
LISTES DÉROULANTES
========================================================= */

.ligne-filtres select {


width: 100%;

min-width: 70px;

height: 30px;

padding: 4px 7px;

border: 1px solid #c8d2dc;

border-radius: 20px;

background: var(--white);

color: var(--text-color);

font-family: var(--font-family);

font-size: 12px;

cursor: pointer;

outline: none;


}

.ligne-filtres select:hover {


border-color: var(--secondary-color);


}

.ligne-filtres select:focus {


border-color: var(--secondary-color);

box-shadow:
    0 0 0 2px rgba(25, 118, 210, 0.12);


}

/* =========================================================
CELLULES
========================================================= */

.tableau-billets td {


padding: 7px 8px;

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

text-align: center;

font-size: 13px;

white-space: nowrap;


}

/* =========================================================
LIGNES
========================================================= */

.tableau-billets tbody tr {


cursor: pointer;

transition:
    background-color 0.15s ease;


}

.tableau-billets tbody tr:hover {


background: var(--light-gray);


}

/* =========================================================
IMAGE DU BILLET
========================================================= */

.image-billet {

width: 50px;

height: 26px;

object-fit: contain;

display: block;

margin: 0 auto;

border: 0;

border-radius: 0;

background: transparent;


}

/* =========================================================
DRAPEAUX
========================================================= */

.drapeau {


width: 32px !important;

height: 20px !important;

min-width: 32px;

min-height: 20px;

object-fit: cover;

display: inline-block;

vertical-align: middle;

margin-right: 7px;

border: none !important;

border-radius: 0 !important;


}

.cellule-pays {


text-align: left !important;

min-width: 180px;


}

/* =========================================================
VALEURS IMPORTANTES
========================================================= */

.tableau-billets td:nth-child(1) {


color: var(--primary-color);

font-weight: bold;


}

.tableau-billets td:nth-child(3) {


color: var(--primary-color);

font-weight: bold;


}

.tableau-billets td:nth-child(6) {


font-weight: bold;


}

.tableau-billets td:nth-child(12) {


color: var(--primary-color);

font-weight: bold;

}

/* =========================================================
MESSAGE D'ERREUR
========================================================= */

.erreur {


background: var(--white);

color: #c00000;

padding: 20px;

margin: 20px 0;

border-radius: 12px;

box-shadow: var(--box-shadow);

text-align: center;


}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 700px) {


header {

    padding: 5px 10px;
}

header h1 {

    font-size: 18px;
}

#galerie {

    padding: 8px;
}

.tableau-billets {

    min-width: 1150px;
}

.tableau-billets td {

    font-size: 12px;
}


}

#reset {
    margin: 5px 15px 10px;
    padding: 7px 16px;
    border: 1px solid #004080;
    border-radius: 20px;
    background: #ffffff;
    color: #004080;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

#reset:hover {
    background: #004080;
    color: #ffffff;
}

/* ============================================
   VISIONNEUSE
============================================ */

.visionneuse {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 9999;

    background: rgba(0, 0, 0, 0.85);

    align-items: center;
    justify-content: center;

    cursor: zoom-out;
}

.visionneuse img {
    max-width: 90vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    cursor: default;
}

#fermerVisionneuse {
    position: absolute;

    top: 15px;
    right: 25px;

    color: white;

    font-size: 45px;
    font-weight: bold;

    cursor: pointer;

    z-index: 10000;
}

#fermerVisionneuse:hover {
    opacity: 0.7;
}


/* Photo dans le tableau */

.image-billet {
    cursor: zoom-in;
}

/* =========================================================
   HOLOGRAMME CLIQUABLE
   ========================================================= */

.hologramme-cliquable {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ffffff;

    font-weight: bold;
    font-size: 13px;

    cursor: zoom-in;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


/* =========================================================
   A = VERT
   ========================================================= */

.hologramme-A {

    color: #2e7d32;

    border: 2px solid #2e7d32;
}


/* =========================================================
   B = ROUGE
   ========================================================= */

.hologramme-B {

    color: #d32f2f;

    border: 2px solid #d32f2f;
}


/* =========================================================
   SURVOL
   ========================================================= */

.hologramme-cliquable:hover {

    transform: scale(1.12);

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.08);
}



/* =========================================================
   SIGNATURES BCE
   ========================================================= */

.signature-wrapper {

    display: inline-flex;

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

    width: 175px;
    height: 35px;

    gap: 6px;

    padding: 3px 7px 3px 10px;

    border-radius: 25px;

    background: #ffffff;

    box-sizing: border-box;
}



/* Photo à droite, intégrée au contour */

.image-signature {

    width: 22px;
    height: 27px;

    object-fit: cover;

   

    flex-shrink: 0;

}


/* =========================================================
   COULEURS DU CONTOUR
   ========================================================= */

.signature-duisenberg {

    color: #245c18;

    border: 2px solid #245c18;

}


.signature-trichet {

    color: #78370A;

    border: 2px solid #78370A;

}


.signature-draghi {

    color: #305496;

    border: 2px solid #305496;

}


.signature-lagarde {

    color: #BC5F26;

    border: 2px solid #BC5F26;

}

css
/* =========================================================
   EN-TÊTES ET FILTRES FIXES
   ========================================================= */

/* Ligne des titres */
.tableau-billets thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 20;

    background: var(--primary-color);
    color: var(--white);
}

/* Ligne des filtres */
.tableau-billets thead .ligne-filtres th {
    position: sticky;
    top: 37px;
    z-index: 19;

    background: #e8f0f8;
}

/* Les listes déroulantes restent au-dessus du tableau */
.tableau-billets thead select {
    position: relative;
    z-index: 21;
}

/* =========================================================
   CODE COURT
   ========================================================= */

.code-court {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 85px;
    height: 30px;

    padding: 3px 8px;

    box-sizing: border-box;

    border: 2px solid var(--primary-color);
    border-radius: 20px;

    background: #ffffff;

    color: var(--primary-color);

    font-weight: bold;

    white-space: nowrap;
}