/* ==================================================
   FICHE QUINTÉ DU JOUR - FRÉQUENCE TURF
   ================================================== */

.ft-quinte-card {
    margin: 20px 0 30px;
    background: #ffffff;
    border: 1px solid #dce4e7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}


/* ==================================================
   EN-TÊTE
   ================================================== */

.ft-quinte-header {
    padding: 20px 22px 18px;
    background: #ffffff;
    color: #252c30;
}

.ft-quinte-surtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

.ft-quinte-label {
    display: inline-block;
    padding: 5px 9px;
    background: #007bff;
    border-radius: 4px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ft-quinte-date {
    color: #778287;
    font-size: 13px;
    line-height: 1.2;
}

/* ==================================================
   NOM DE LA COURSE
   ================================================== */

.ft-quinte-title {
    margin: 0 0 8px;
    color: #252c30;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
}


/* ==================================================
   INFOS ESSENTIELLES
   ================================================== */

.ft-quinte-infos {
    display: grid;
    grid-template-columns: 1.35fr repeat(5, 1fr);
    margin-top: 17px;
    padding: 13px 0 0;
    border-top: 1px solid #e2e8ea;
}

.ft-quinte-info {
    min-width: 0;
    padding: 0 13px;
    border-right: 1px solid #e2e8ea;
}

.ft-quinte-info:first-child {
    padding-left: 0;
}

.ft-quinte-info:last-child {
    padding-right: 0;
    border-right: 0;
}

.ft-quinte-info span {
    display: block;
    margin-bottom: 3px;
    color: #899398;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ft-quinte-info strong {
    display: block;
    color: #315A6B;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}


/* Hippodrome davantage mis en avant */

.ft-quinte-info:first-child strong {
    font-size: 16px;
    text-transform: uppercase;
}


/* ==================================================
   ZONE DES PARTANTS
   ================================================== */

.ft-quinte-partants {
    padding: 0 22px 20px;
    background: #ffffff;
    border-top: 1px solid #dce4e7;
}


/* ==================================================
   TABLEAU DES PARTANTS
   ================================================== */

.ft-quinte-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ft-quinte-table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse;
}

.ft-quinte-table th,
.ft-quinte-table td {
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid #e7ecee !important;
}

.ft-quinte-table thead th {
    background: #f6f8f9;
    color: #68767c;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ft-quinte-table tbody td {
    color: #343d41;
    font-size: 14px;
    line-height: 1.35;
}

.ft-quinte-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.ft-quinte-table tbody tr:hover {
    background: #fafbfb;
}


/* ==================================================
   NUMÉROS
   ================================================== */

.ft-quinte-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    background: #52798A;
    color: #ffffff !important;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}


/* ==================================================
   NOMS DES CHEVAUX
   ================================================== */

.ft-quinte-table tbody td:nth-child(2) strong {
    color: #315A6B;
    font-weight: 700;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 600px) {

    .ft-quinte-card {
        margin: 15px 0 25px;
    }

    .ft-quinte-header {
        padding: 16px 14px 15px;
    }

    .ft-quinte-surtitle {
        display: block;
        margin-bottom: 12px;
    }

    .ft-quinte-date {
        display: block;
        margin-top: 7px;
    }

    .ft-quinte-title {
        font-size: 21px;
    }


    /* 6 infos = 3 + 3 */

    .ft-quinte-infos {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 14px;
        padding-top: 0;
    }

    .ft-quinte-info {
        padding: 10px 8px;
        border-right: 1px solid #e2e8ea;
        border-top: 1px solid #e2e8ea;
    }

    .ft-quinte-info:first-child {
        padding-left: 8px;
    }

    .ft-quinte-info:last-child {
        padding-right: 8px;
    }

    .ft-quinte-info:nth-child(3),
    .ft-quinte-info:nth-child(6) {
        border-right: 0;
    }

    .ft-quinte-info span {
        font-size: 9px;
    }

    .ft-quinte-info strong {
        font-size: 12px;
    }

    .ft-quinte-info:first-child strong {
        font-size: 13px;
    }


    /* Tableau */

    .ft-quinte-partants {
        padding: 0 12px 17px;
    }

    .ft-quinte-table th,
    .ft-quinte-table td {
        padding: 8px 6px;
    }

    .ft-quinte-table tbody td {
        font-size: 12px;
    }

    .ft-quinte-numero {
        width: 23px;
        height: 23px;
        font-size: 11px;
    }
}

/* ==================================================
   PRONOSTIC FT - PAGE QUINTÉ DU JOUR
   ================================================== */

.ft-quinte-pronostic {
    margin: 30px 0;
}

.ft-quinte-pronostic h2 {
    margin: 0 0 12px;
}

.ft-quinte-prono-intro {
    margin: 0 0 22px;
}

.ft-quinte-prono-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 32px;
}

.ft-quinte-prono-choix {
    margin: 0;
    padding: 14px 16px;
    background: #f8fafb;
    border: 1px solid #e1e7e9;
    border-radius: 6px;
}

.ft-quinte-prono-titre {
    margin: 0 0 7px;
    color: #315A6B;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.ft-quinte-prono-cheval {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.ft-quinte-prono-cheval .ft-prono-numero {
    margin: 0 !important;
}

.ft-quinte-prono-cheval strong {
    color: #252c30;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.ft-quinte-prono-resume {
    margin: 7px 0 0;
    color: #4f585c;
    font-size: 14px;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 600px) {

    .ft-quinte-prono-liste {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

/* Pastilles du pronostic FT sur la page Quinté du jour */

.ft-quinte-prono-cheval .ft-prono-numero {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0073aa;
    color: #fff !important;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1 !important;
}

/* ==================================================
   DOSSIER COMPLET - PAGE QUINTÉ DU JOUR
   ================================================== */

.ft-quinte-dossier {
    margin: 35px 0 10px;
}

.ft-quinte-dossier h2 {
    margin: 0 0 14px;
}

.ft-quinte-dossier p {
    margin: 0 0 18px;
}

.ft-quinte-dossier-lien {
    color: #315A6B;
    font-weight: 700;
    text-decoration: none;
}

.ft-quinte-dossier-lien:hover {
    text-decoration: underline;
}

.ft-quinte-label {
    background-color: #007bff !important;
}

.ft-quinte-prono-liste .ft-quinte-prono-cheval .ft-prono-numero {
    background-color: #007bff !important;
}

==================================================
ARCHIVES DESCRIPTION
   ================================================== */

body.archive .ast-archive-description {
    padding-right: 0px;
    padding-left: 0px;
}

/* ==================================================
   PRONOSTICS QUINTÉ - FRÉQUENCE TURF
   ================================================== */

/* Blocs des sélections */

.ft-selection,
.ft-prono-lecteurs {
    display: block !important;
    margin: 10px 0 18px !important;
    padding: 0 !important;
}

/* Libellés */

.ft-selection > strong,
.ft-prono-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700;
}

/* Conteneur AJAX */

.ft-prono-ajax {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Affichage habituel hors des pages tag */

.ft-selection .ft-prono-pastilles,
.ft-prono-lecteurs .ft-prono-pastilles {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ft-selection .ft-prono-numero,
.ft-prono-lecteurs .ft-prono-numero {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    background-color: #0073aa;
    color: #fff !important;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1 !important;
    text-decoration: none;
}

.ft-selection .ft-prono-numero:last-child,
.ft-prono-lecteurs .ft-prono-numero:last-child {
    margin-right: 0 !important;
}

/* ==================================================
   PAGES TAG QUINTÉ
   ================================================== */

/* Titres des rubriques */

body.tag h2,
body.tag h2 > span[style*="color"] {
    color: #20364b !important;
}

/* Plus d'air avant le bloc de pronostic */

body.tag .ft-selection,
body.tag .ft-prono-lecteurs {
    margin: 18px 0 18px !important;
}

/* Élimine la marge des paragraphes ajoutés par WordPress */

body.tag .ft-selection > p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Libellés bleus, avec de l'espace avant les chevaux */

body.tag .ft-selection strong,
body.tag .ft-prono-lecteurs .ft-prono-label {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #007bff !important;
    font-weight: 700;
}

/* Cinq lignes verticales et rapprochées */

body.tag .ft-selection .ft-prono-pastilles,
body.tag .ft-prono-lecteurs .ft-prono-pastilles {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Une pastille et un nom par ligne */

body.tag .ft-prono-ligne {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 30px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Annule la marge des pastilles horizontales */

body.tag .ft-selection .ft-prono-numero,
body.tag .ft-prono-lecteurs .ft-prono-numero {
    flex: 0 0 30px !important;
    margin: 0 !important;
}

/* Nom du cheval, tel qu'il figure dans YOP Poll */

body.tag .ft-prono-cheval {
    color: #263646;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

/* Règles existantes conservées */

.ft-separateur {
    display: none !important;
}

.yop-poll-element:not(:has(.yop-poll-answers))
.yop-poll-question {
    display: none !important;
}

header.entry-header:not(.related-entry-header) .entry-meta,
header.entry-header:not(.related-entry-header) .entry-meta * {
    text-transform: none;
}

.dossiers-thematiques {
    font-size: 15px ;
}

#primary {
    margin-top: 5px;
}
*{
-moz-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-webkit-touch-callout: none; 
user-select: none; 
}
.paypal {
  text-align: center;
	border-style: solid;
  border-color: #d3d3d3;
	border-width: 1px;
	border-radius: 15px;
	padding: 10px;
}

.circle-container {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 4px auto 6px auto;
}

/* Pastilles */
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  font-weight: 700;
  font-size: 14px;
  color: #0F172A;

  /* Effet moderne */
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Effet tactile */
.circle:active {
  transform: scale(0.93);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Couleurs par type */
.bet-2sur4 .circle {
  border: 1px solid #60328F;
}

.bet-tierce .circle {
  border: 1px solid #00AB62;
}

.bet-quinte .circle {
  border: 1px solid #DA2032;
}

.bet-stats .circle {
  border: 1px solid #DA2032;
  margin-bottom: 20px;
}

/* ========================================
   FOND DES 4 PREMIÈRES PASTILLES
   Uniquement pour les blocs .ft-highlight
======================================== */

/* 2sur4 */
.ft-highlight.bet-2sur4 .circle:nth-child(-n+4) {
  background: #60328F;
  color: #ffffff;
}

/* Tiercé */
.ft-highlight.bet-tierce .circle:nth-child(-n+4) {
  background: #00AB62;
  color: #ffffff;
}

/* Quinté */
.ft-highlight.bet-quinte .circle:nth-child(-n+4) {
  background: #DA2032;
  color: #ffffff;
}

/* Mobile */
@media (max-width: 600px) {
  .circle {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}

.trc_rbox_header_span {
	font-size: 1.4em;
	font-weight: 800;
	font-family: 'Barlow Semi Condensed', sans-serif;
	color: #007BFF;
}

.trc_rbox_outer {
	margin-top: 15px;
}

.ast-blog-layout-5-grid .post-content {
	margin-top: 40px;
  padding-left: 0;
}

.akcelo-adunit-15398 {
        width:100%;
        height:360px;
    }
    @media (pointer:coarse) {
        .akcelo-adunit-15398 {
            width:100%;
            height:180px;
        }
    }

.tags-categorie {
    margin: 30px 0;
}

.tags-categorie strong {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.tag-btn {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #ddd;
    color: #333;
    padding: 4px 14px;
    margin: 4px 6px 4px 0;
    border-radius: 18px;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tags-title {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
}

.tag-btn:hover {
    background: #007BFF;
    color: #fff;
    border-color: #007BFF;
}

.tag-cloud-link {
    border-radius: 5px;
    border-color: #ddd;
    padding: 4px 14px;
}

.sommaire {
    margin-top: 30px;
		margin-bottom: 20px;
}

.yop-poll-container {
	margin-bottom: 40px;
}

/* padding articles pages cat. */
.ast-article-inner {
  padding: 0.6em;
	border-bottom: 1px solid #ddd;
}

/* margin top liste articles pages cat. */
.ast-blog-layout-4-grid .ast-row {
  margin-top: 30px;
}

.google-follow-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:#fefefe;
    border:1px solid #d9d9df;
    border-radius:10px;
    padding:16px 20px;
    margin-top:30px;
    width:100%;
    box-sizing:border-box;
}

.google-follow-left{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}

.google-follow-logo{
    width:32px;
    height:32px;
    flex-shrink:0;
}

.google-follow-content{
    min-width:0;
	  text-align:left;
}

.google-follow-title{
    font-size:18px;
    font-weight:700;
    color:#222222;
    margin-bottom:4px;
    line-height:1.2;
}

.google-follow-text{
    font-size:15px;
    color:#4b5563;
    line-height:1.4;
}

.google-follow-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#004bff;
    color:#fff !important;
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    padding:10px 30px;
    border-radius:999px;
    white-space:nowrap;
    transition:all .2s ease;
    flex-shrink:0;
}

.google-follow-button:hover{
    background:#16104a;
    transform:translateY(-1px);
}

@media(max-width:768px){

    .google-follow-banner{
        flex-direction:column;
        align-items:flex-start;
        padding:14px;
    }

.google-follow-left{
    align-items:flex-start;
}

    .google-follow-title{
        font-size:17px;
    }

    .google-follow-text{
        font-size:13px;
    }

    .google-follow-button{
        width:100%;
        font-size:14px;
        padding:5px;
    }

}
.grid-home{
	margin-bottom:30px;
	}



.pmu-calculator{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    max-width:1000px;
    margin:auto;
    font-family:Arial,sans-serif;
}

.pmu-header{
    text-align:center;
    margin-bottom:30px;
}

.pmu-header h2{
    margin-bottom:10px;
    color:#007BFF;
    font-size:32px;
}

.pmu-header p{
    color:#666;
    font-size:16px;
}

.pmu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:25px;
}

.pmu-field label{
    display:block;
    margin-bottom:8px;
    font-weight:700;
    color:#333;
}

.pmu-field select,
.pmu-field input{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:15px;
    background:#fff;
}

.flexi-wrapper{
    margin-bottom:30px;
}

.flexi-wrapper label{
    display:block;
    margin-bottom:10px;
    font-weight:700;
}

.flexi-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.flexi-btn{
    border:none;
    padding:12px 18px;
    border-radius:10px;
    background:#FEF9E1;
    cursor:pointer;
    font-weight:700;
    transition:0.2s;
}

.flexi-btn.active{
    background:#007BFF;
    color:#fff;
}

.results-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.result-box{
    background:#FEF9E1;
    border-radius:16px;
    padding:22px;
    text-align:center;
}

.result-box span{
    display:block;
    margin-bottom:12px;
    font-size:14px;
    color:#666;
    text-transform:uppercase;
    letter-spacing:1px;
}

#nomTicket,
#miseUnitaire,
#prixTotal{
    color:#007BFF;
    font-size:20px;
    font-weight:700;
    line-height:1.3;
}

.ticket-pari-detail{
    margin-top:2px;
}

.ticket-box{
    background:#f8f8f8;
    border-radius:16px;
    padding:25px;
}

.ticket-box h3{
    margin-top:0;
    margin-bottom:15px;
    color:#007BFF;
}

.arrondi {
    border-radius: 5px;
}
.ft-google-source{
    margin:10px 0 16px;
    text-align:left;
}

.ft-google-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:34px;
    padding:0 12px;
    background:#fff;
    border:1px solid #dadce0;
    border-radius:9999px;
    color:#3c4043 !important;
    font:500 12px/34px Arial,sans-serif;
    text-decoration:none !important;
    transition:.2s;
    box-shadow:0 1px 2px rgba(60,64,67,.15);
}

.ft-google-btn:hover{
    background:#f8f9fa;
    box-shadow:0 2px 5px rgba(60,64,67,.25);
    color:#202124 !important;
}

.ft-google-logo{
    width:18px;
    height:18px;
    display:block;
    flex:0 0 18px;
}

@media (max-width:768px){

    .ft-google-btn{
        width:auto;
        max-width:100%;
        justify-content:flex-start;
        gap:5px;
        height:30px;
        padding:0 10px;
        font-size:12px;
        line-height:30px;
    }

				.ft-google-logo{
		    width:16px;
		    height:16px;
		    flex:0 0 16px;
		}

}

.single .entry-header {
    margin-bottom: 0.5em;
}

/* =========================================================
   QUINTÉ SPOT
   ========================================================= */

.quinte-spot {
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
    box-sizing: border-box;
}

.quinte-spot *,
.quinte-spot *::before,
.quinte-spot *::after {
    box-sizing: border-box;
}


/* =========================================================
   PARAMÈTRES
   ========================================================= */

.quinte-spot-grid {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-bottom: 18px;
}

.quinte-spot-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quinte-spot-field label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}


/* LISTES DÉROULANTES */

.quinte-spot-field select {
    width: 150px;
    height: 42px;
    padding: 0 35px 0 12px;

    border: 1px solid #d5d8dc;
    border-radius: 6px;

    background-color: #fff;

    color: #222;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    outline: none;
}

.quinte-spot-field select:focus {
    border-color: #007BFF;
}


/* =========================================================
   BOUTON GÉNÉRER
   ========================================================= */

#spotGenererBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 44px;

    padding: 0 27px;

    border: 0;
    border-radius: 6px;

    background: #007BFF;
    color: #fff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color .2s ease,
        transform .1s ease;
}

#spotGenererBtn:hover {
    background: #006fe6;
}

#spotGenererBtn:active {
    transform: translateY(1px);
}


/* =========================================================
   ZONE DES RÉSULTATS
   ========================================================= */

.quinte-spot-resultats {
    width: 100%;
    max-width: 100%;
    margin-top: 25px;
}


/* =========================================================
   TICKET
   ========================================================= */

.spot-ticket {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;

    margin-bottom: 12px;
    padding: 12px 18px;

    background: #fff;

    border: 1px solid #e1e4e7;
    border-radius: 10px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.045);

    overflow: hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.spot-ticket:hover {
    border-color: #cdd2d7;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   TITRE DU TICKET
   ========================================================= */

.spot-ticket-titre {

    width: 145px;
    min-width: 145px;

    display: flex;
    align-items: center;

    color: #333;

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

    white-space: nowrap;
}


/* PETIT POINT BLEU */

.spot-ticket-titre::before {

    content: "";

    width: 8px;
    height: 8px;

    min-width: 8px;

    margin-right: 9px;

    border-radius: 50%;

    background: #007BFF;
}


/* =========================================================
   ZONE DES 5 CHEVAUX
   ========================================================= */

.spot-ticket-chevaux {

    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    padding-left: 15px;
}


/* =========================================================
   NUMÉROS DES CHEVAUX
   ========================================================= */

.spot-cheval {

    width: 46px;
    height: 46px;

    min-width: 0;

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

    background: #fff;

    border: 1px solid #cfd4d9;
    border-radius: 7px;

    color: #111;

    font-size: 17px;
    font-weight: 700;

    flex-shrink: 1;

    transition:
        border-color .2s ease,
        color .2s ease,
        background-color .2s ease;
}

.spot-cheval:hover {

    border-color: #007BFF;

    color: #007BFF;

    background: #f7fbff;
}


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

@media (max-width: 700px) {

    .quinte-spot {
        width: 100%;
        max-width: 100%;
        margin: 25px 0;
    }

    .quinte-spot-grid {
        width: 100%;
        gap: 10px;
    }

    .quinte-spot-field {
        flex: 1;
        min-width: 0;
    }

    .quinte-spot-field select {
        width: 100%;
        max-width: 100%;
    }

    #spotGenererBtn {
        width: 100%;
        max-width: 100%;
    }


    /* TICKET */

    .spot-ticket {

        width: 100%;
        max-width: 100%;

        padding: 10px 9px;

        overflow: hidden;
    }


    .spot-ticket-titre {

        width: 105px;
        min-width: 105px;

        font-size: 12px;
    }


    .spot-ticket-titre::before {

        width: 7px;
        height: 7px;

        min-width: 7px;

        margin-right: 7px;
    }


    .spot-ticket-chevaux {

        min-width: 0;

        flex: 1;

        justify-content: space-between;

        gap: 4px;

        padding-left: 5px;
        padding-right: 0;
    }


    .spot-cheval {

        width: 42px;
        height: 42px;

        max-width: 42px;

        flex: 1;

        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .quinte-spot {
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
        padding: 0;
    }


    /* PARAMÈTRES */

    .quinte-spot-grid {

        display: flex;
        flex-wrap: nowrap;

        width: 100%;

        gap: 8px;

        margin-bottom: 15px;
    }


    .quinte-spot-field {

        flex: 1 1 50%;

        width: 50%;
        min-width: 0;
    }


    .quinte-spot-field label {

        font-size: 12px;
    }


    .quinte-spot-field select {

        width: 100%;
        max-width: 100%;

        height: 40px;

        padding-left: 9px;
        padding-right: 25px;

        font-size: 13px;
    }


    /* BOUTON */

    #spotGenererBtn {

        width: 100%;
        max-width: 100%;

        height: 44px;

        font-size: 13px;
    }


    /* =====================================================
       TICKET MOBILE
       ===================================================== */

    .spot-ticket {

        width: 100%;
        max-width: 100%;
        min-width: 0;

        height: auto;
        min-height: 72px;

        padding: 9px 7px;

        margin-bottom: 10px;

        border-radius: 10px;
    }


    /* TITRE */

    .spot-ticket-titre {

        width: 92px;
        min-width: 92px;

        flex-shrink: 1;

        font-size: 11px;
    }


    .spot-ticket-titre::before {

        width: 6px;
        height: 6px;

        min-width: 6px;

        margin-right: 6px;
    }


    /* CHEVAUX */

    .spot-ticket-chevaux {

        width: auto;
        min-width: 0;

        flex: 1;

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 3px;

        padding-left: 4px;
        padding-right: 0;
    }


    /* CASES */

    .spot-cheval {

        width: 36px;
        height: 38px;

        min-width: 0;
        max-width: 38px;

        flex: 1 1 0;

        border-radius: 7px;

        font-size: 14px;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 360px) {

    .spot-ticket {

        padding-left: 5px;
        padding-right: 5px;
    }


    .spot-ticket-titre {

        width: 82px;
        min-width: 82px;

        font-size: 10px;
    }


    .spot-ticket-titre::before {

        margin-right: 5px;
    }


    .spot-ticket-chevaux {

        gap: 2px;
        padding-left: 3px;
    }


    .spot-cheval {

        width: 32px;
        height: 35px;

        max-width: 35px;

        font-size: 13px;
    }

}

		.wp-pagenavi {
        margin-bottom : 30px; 
}