/* =====================================================
   LES CAFGES DE MAXENCE - PROGRAMME FIDELITE
   Beige  : #A8977B
   Taupe   : #7F715C
   Gris    : #3F4245
   Blanc   : #FFFFFF
===================================================== */

/* RESET */
* {
    box-sizing: border-box;
}

body {
    margin:20px auto;
    padding:0;
    background:#FFFFFF;
    color:#3F4245;
    font-family:
    Arial,
    Helvetica,
    sans-serif;
    font-size:18px;
}

body {
    background:red !important;
}

/* =====================================================
   EN-TETE
===================================================== */
.header {
    background:#7F715C;
    color:#FFFFFF;
    margin: 20px auto;
	padding:20px;
    text-align:center;
    font-size:30px;
    font-weight:bold;
}

/* =====================================================
   CONTENEUR GENERAL
===================================================== */
.container {
    width:95%;
    max-width:900px;
    margin-top: 50px;
}



/* =====================================================
   CARTES D'AFFICHAGE
===================================================== */


.card {

    background:#FFFFFF;

    border-radius:18px;

    padding:25px;

    margin-bottom:25px;


    box-shadow:

    0 3px 12px rgba(0,0,0,0.15);

}



/* =====================================================
   TITRES
===================================================== */


h1 {

    color:#7F715C;

    font-size:34px;

}


h2 {

    color:#3F4245;

    font-size:28px;

}


h3 {

    color:#7F715C;

    font-size:24px;

}



/* =====================================================
   BOUTONS
===================================================== */


.btn {

    display:block;

    width:100%;

    padding:20px;

    margin:15px 0;

    border-radius:15px;

    background:#A8977B;

    color:#FFFFFF;

    text-align:center;

    text-decoration:none;

    font-size:24px;

    font-weight:bold;

    border:none;

    cursor:pointer;

}



.btn:hover {

    background:#7F715C;

}



/* bouton secondaire */

.btn-dark {


    background:#3F4245;


}



/* =====================================================
   FORMULAIRES
===================================================== */


label {

    display:block;

    margin-bottom:10px;

    font-weight:bold;

}


.input,
select,
input[type="number"],
input[type="text"] {


    width:100%;

    padding:18px;

    font-size:24px;

    border-radius:12px;

    border:

    2px solid #A8977B;

    color:#3F4245;

    background:#FFFFFF;

}




input:focus,
select:focus {

    outline:none;

    border-color:#7F715C;

}



/* =====================================================
   COMPTEURS FIDELITE
===================================================== */


.compteur {


    font-size:42px;

    font-weight:bold;

    color:#7F715C;

}



/* =====================================================
   JAUGE DE FIDELITE
===================================================== */


.progress {

    width:100%;

    height:30px;

    background:#EEEEEE;

    border-radius:20px;

    overflow:hidden;

    margin:15px 0;

}



.progress-bar {


    height:100%;

    background:#7F715C;

}



/* =====================================================
   ALERTES
===================================================== */


.alert {


    padding:20px;

    border-radius:15px;

    background:#A8977B;

    color:#FFFFFF;

    font-size:24px;

    font-weight:bold;

    text-align:center;

}



/* =====================================================
   HISTORIQUE
===================================================== */


.history-item {


    padding:15px 0;

    border-bottom:

    1px solid #DDDDDD;


}



/* =====================================================
   BOUTONS CAFE / THE
===================================================== */


.category {


    display:flex;

    gap:20px;

}



.category a {


    flex:1;

}

table {

width:100%;

border-collapse:collapse;

margin-top:20px;

}


th {

background:#7F715C;

color:white;

padding:12px;

font-size:18px;

}


td {

padding:12px;

border-bottom:1px solid #ddd;

text-align:center;

}



.alert {

background:#A8977B;

color:white;

padding:15px;

border-radius:12px;

font-size:22px;

font-weight:bold;

text-align:center;

margin-top:20px;

}


.compteur {

color:#7F715C;

font-size:32px;

font-weight:bold;

}

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


@media screen and (min-width:900px)
{
.container {
	margin: 50px, auto;
	padding: 10px;
    max-width:1000px;
}

.btn {
    font-size:28px;
}
}