/* =====================================================================================
   WEBILLARD - CSS CONSOLIDÉ (MERGE COMPLET)
   Base: ton CSS #1 (le plus à jour) + ajouts utiles du #2
   Nettoyages:
   - Fusion des 2 blocs body
   - Correction de règles invalides (ul.a / ol.b / style="..." dans CSS, etc.)
   - Réorganisation par sections + commentaires
   - Nettoyage de quelques coquilles (altx media queries, althorizontal, etc.)
   - Ajout de table.pad1 (vient du CSS #2)
   ===================================================================================== */


/* =====================================================================================
   01) BASE GLOBAL (page entière)
   ===================================================================================== */

:root{
  /* Taille texte principale du menu */
  --nav-fs: clamp(14px, 2.2vw, 24px);

  /* Padding des items (tactile) */
  --nav-py: clamp(8px, 1.2vw, 12px);
  --nav-px: clamp(8px, 1.6vw, 16px);

  /* Dropdown */
  --dd-fs: clamp(13px, 2.0vw, 20px);
  --dd-py: clamp(10px, 1.3vw, 16px);
  --dd-px: clamp(10px, 1.6vw, 14px);

  /* Hauteur estimée du menu (pour ton spacer) */
  --nav-h: calc(var(--nav-fs) + (var(--nav-py) * 2) + 10px);
}

html {
  scroll-behavior: smooth;
}

/* NOTE: garde outline seulement pour debug, sinon commente la ligne */
body {
  margin: 0;
  padding: 0;

  /* DEBUG (à retirer quand fini) */
  outline: 1px solid red !important;

  background-color: hsl(222, 8%, 25%);
  color: hsl(222, 8%, 95%);
  font-size: calc(12pt + .4vw);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.4;

  background-image: url('../images/background.jpg');
  background-repeat: repeat-y;
  background-position: center;
}

/* Sécurité: si certaines pages forcent des polices dans les cellules */
body td,
body th {
  font-family: Arial, Helvetica, sans-serif;
}

/* Liens (plus logique ici que "text-decoration" sur body) */
a:link,
a:visited {
  text-decoration: none;
}

hr {
  border: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 4px;
  left: 5%;
  right: 5%;
  width: 90%;
  background-image: linear-gradient(to right, transparent, rgb(255,255,255), transparent);
}


/* =====================================================================================
   02) WRAPPER DE PAGE (marges écran fluides)
   -> Tu as déjà ajouté <div class="page-pad"> partout
   ===================================================================================== */

.page-pad {
  max-width: 1800px;
  margin: 0 auto;                       /* centre le bloc */
  padding-inline: clamp(8px, 3vw, 80px);/* marge interne fluide */
}


/* =====================================================================================
   03) TABLE PRINCIPALE "GLOBAL" (conteneur principal)
   -> IMPORTANT: comme .page-pad gère les marges écran, table.global ne doit plus
      gérer le padding gauche/droite "écran". On garde seulement du padding interne
      sur les TD (padding-inline).
   ===================================================================================== */

/* =========================
   TABLE "GLOBAL" (canonique)
   - largeur max 1800px
   - marges internes fluides (gauche/droite) même en <table>
   - compatible border-collapse: collapse
   ========================= */

/* TABLE CENTRÉE + LARGEUR MAX */
table.global{
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;

  background-color: hsl(222, 6%, 50%);
  border-collapse: collapse;

  font-weight: 400;
  line-height: 1.2;
}
/* MARGE HORIZONTALE "INTÉRIEURE" (appliquée aux cellules) */
table.global th,
table.global td{
  padding-left: clamp(6px, 1.5vw, 20px) !important;
  padding-right: clamp(6px, 1.5vw, 20px) !important;
  box-sizing: border-box;
}

/* OPTIONNEL : si tu veux aussi un peu d'air vertical */
table.global td{
  padding-top: clamp(8px, 1.2vw, 16px);
  padding-bottom: clamp(8px, 1.2vw, 16px);
  font-size: calc(8pt + .5vw);
  line-height: 1.5;
}

table.global th{
  padding-top: clamp(30px, 4vw, 65px);
  padding-bottom: calc(20px + 0.2vw);
  text-transform: uppercase;
  color: hsl(50, 90%, 90%);
  text-shadow: 0 0 12px rgba(0,0,0,0.8);
  font-weight: 600;
  font-size: calc(14pt + .5vw);
  line-height: 1.3;
}




/* Variantes GLOBAL spécifiques */
table.globaltdf {
  background-color: #787C87;
}

/* CP9 / CP10PZ: version "à plat" (pas de padding interne global) */
table.globalcp9 {
  background-image: linear-gradient(to bottom, #2222CC, #80224c);
}
table.globalcp9 td {
  font-size: calc(8pt + .5vw);
  padding-inline: 0;
  line-height: 1.3;
}

table.globalcp10pz {
  background-image: linear-gradient(to bottom, #6e33b6, #8400cc);
}
table.globalcp10pz td {
  font-size: calc(8pt + .5vw);
  padding-inline: 0;
  line-height: 1.3;
}

/* Variantes "serrées" */
table.globalclassement td,
table.globalResTournois td {
  padding-inline: 2px;
}
table.globalpad0 td { padding-inline: 0; }
table.globalpad5 td { padding-inline: 5px; }
table.globalpad10 td { padding-inline: 10px; }

/* Max width utilitaire */
table.maxwidth {
  width: 0*;
  max-width: 1500px;
}
table.maxwidth td {
  padding-right: 30px;
  padding-left: 30px;
}


/* =====================================================================================
   04) MENU (navbar)
   ===================================================================================== */




/* =====================================================================================
   05) PIED DE PAGE (footer fixe)
   ===================================================================================== */

ul.p {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: hsl(222, 8%, 35%);
  position: fixed;
  bottom: 0;
  width: 100%;
}

li.p {
  float: right;
  display: block;
  font-size: calc(12px + .3vw);
  font-weight: 600;
  color: #ceccca;
  text-align: center;
  padding: 8px 6px; /* hauteur / largeur */
}

li.p a:hover:not(.active) {
  color: #ffffbb;
  text-shadow: 0px 0px 10pt rgba(0, 0, 0, 1);
}

li.p a:visited {
  color: #ceccca;
}


/* =====================================================================================
   06) LISTES (nettoyé)
   ===================================================================================== */

/* (Ton CSS avait "list-style-type: list-style-type: circle" -> invalide) */
ul.a { list-style-type: circle; }

/* (Ton CSS avait "number" -> mieux: decimal) */
ol.b {
  list-style-type: decimal;
  color: #000000;
  line-height: 1.2;
  width: 100%;
  margin-left: 0em;
}


/* =====================================================================================
   07) TABLEAUX ALT (alternance de lignes)
   ===================================================================================== */

table.alt {
  border-collapse: collapse;
  background-color: #F3F3F3;
  color: #000000;
  font-weight: 500;
  line-height: normal;
  margin-inline: auto;
  border-spacing: 0px;
}

table.alt th {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
  font-weight: 700;
  color: #f7f4e6;
  text-shadow: 0px 0px 8px #3f445f;
  background-image: linear-gradient(hsl(230, 25%, 80%), hsl(230, 25%, 60%));
}

table.alt td {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
}

table.alt tr:nth-child(even) { background-color: #E7E7E7; }
table.alt tr:nth-child(odd)  { background-color: #F3F3F3; }

table.altrouge th {
  background-image: linear-gradient(hsl(0, 25%, 80%), hsl(0, 25%, 60%));
}

/* Responsive alt */
@media only screen and (max-width: 374px) {
  table.alt { width: 100%; }
  table.alt th { font-family: "Abel"; font-size: 12px; padding: 2px 2px; }
  table.alt td { font-family: "Abel" !important; font-size: 12px; padding: 2px 2px; }
}
@media only screen and (min-width: 375px) and (max-width: 576px) {
  table.alt { width: 100%; }
  table.alt th { font-family: "Abel"; font-size: 14px; padding: 2px 4px; }
  table.alt td { font-family: "Abel" !important; font-size: 14px; padding: 2px 2px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  table.alt { width: 99%; }
  table.alt th { font-family: "Abel"; font-size: 14px; padding: 2px 8px; }
  table.alt td { font-size: 12px; padding: 3px 3px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  table.alt { width: 98%; }
  table.alt th { font-family: "Abel"; font-size: 16px; padding: 3px 15px; }
  table.alt td { font-size: 14px; padding: 3px 4px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  table.alt { width: 97%; }
  table.alt th { font-size: 18px; padding: 3px 20px; }
  table.alt td { font-size: 16px; padding: 3px 3px; }
}
@media only screen and (min-width: 1200px) {
  table.alt { width: 96%; }
  table.alt th { font-size: 20px; padding: 3px 25px; }
  table.alt td { font-size: 18px; padding: 3px 3px; }
}

/* Alternance VERTICALE optionnelle */
table.altvertical tr td:nth-child(even) {
  background-color: rgba(0, 0, 255, 0.05);
}


/* =====================================================================================
   08) TABLEAUX CLASSEMENT
   ===================================================================================== */

table.classement {
  border-collapse: collapse;
  background-color: #F3F3F3;
  color: #ff0000;
  font-weight: 500;
  line-height: normal;
  margin-inline: auto;
  border-spacing: 0px;
  width: 100% !important;
}

table.classement th {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
  font-weight: 700;
  color: #f7f4e6;
  text-shadow: 0px 0px 8px #3f445f;
  background-image: linear-gradient(hsl(230, 25%, 80%), hsl(230, 25%, 60%));
}

table.classement td {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
}

table.classement tr:nth-child(even) { background-color: #E7E7E7; }

/* Si tu veux nowrap sur certaines colonnes, fais-le via une classe, pas via "style=" dans CSS */
.nowrap { white-space: nowrap; }

/* Responsive classement */
@media only screen and (max-width: 374px) {
  table.classement { width: 100%; }
  table.classement th { font-family: "Abel"; font-size: 12px; padding: 1px 1px; }
  table.classement td { font-family: "Abel" !important; font-size: 12px; padding: 1px 1px; }
}
@media only screen and (min-width: 375px) and (max-width: 576px) {
  table.classement { width: 100%; }
  table.classement th { font-family: "Abel"; font-size: 14px; padding: 1px 1px; }
  table.classement td { font-family: "Abel" !important; font-size: 12px; padding: 1px 1px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  table.classement { width: 100%; }
  table.classement th { font-family: "Abel"; font-size: 14px; padding: 1px 1px; }
  table.classement td { font-family: "Abel" !important; font-size: 12px; padding: 1px 1px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  table.classement { width: 99%; }
  table.classement th { font-family: "Abel"; font-size: 16px; padding: 1px 1px; }
  table.classement td { font-size: 12px; padding: 1px 1px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  table.classement { width: 98%; }
  table.classement th { font-size: 18px; padding: 1px 1px; }
  table.classement td { font-size: 16px; padding: 1px 1px; }
}
@media only screen and (min-width: 1200px) {
  table.classement { width: 97%; }
  table.classement th { font-size: 20px; padding: 1px 1px; }
  table.classement td { font-size: 18px; padding: 1px 1px; }
}


/* =====================================================================================
   09) TABLEAUX ALTX (variante ALT)
   ===================================================================================== */

table.altx {
  border-collapse: collapse;
  width: 0*;
  background-color: #F3F3F3;
  color: #000000;
  font-weight: 500;
  line-height: normal;
  margin-inline: auto;
  border-spacing: 0px;
}

table.altx th {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
  font-weight: 700;
  font-size: 18px;
  padding: 2px 8px;
  color: #f7f4e6;
  text-shadow: 0px 0px 8px #3f445f;
  background-image: linear-gradient(hsl(230, 25%, 80%), hsl(230, 25%, 60%));
}

table.altx td {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
}

table.altx tr:nth-child(even) { background-color: #E7E7E7; }

/* Responsive altx (nettoyé: on enlève "table.altx table.altx th") */
@media only screen and (max-width: 374px) {
  table.altx th { font-family: "Abel"; font-size: 12px; padding: 2px 2px; }
  table.altx td { font-family: "Abel" !important; font-size: 12px; padding: 2px 2px; }
}
@media only screen and (min-width: 375px) and (max-width: 576px) {
  table.altx th { font-family: "Abel"; font-size: 14px; padding: 2px 4px; }
  table.altx td { font-family: "Abel" !important; font-size: 14px; padding: 2px 2px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  table.altx th { font-family: "Abel"; font-size: 14px; padding: 2px 8px; }
  table.altx td { font-size: 12px; padding: 3px 3px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  table.altx th { font-family: "Abel"; font-size: 16px; padding: 3px 15px; }
  table.altx td { font-size: 14px; padding: 3px 4px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  table.altx th { font-size: 18px; padding: 3px 20px; }
  table.altx td { font-size: 16px; padding: 3px 3px; }
}
@media only screen and (min-width: 1200px) {
  table.altx th { font-size: 20px; padding: 3px 25px; }
  table.altx td { font-size: 18px; padding: 3px 3px; }
}


/* =====================================================================================
   10) LARGEURS UTILITAIRES
   ===================================================================================== */

table.altt100 { width: 100%; margin-inline: auto; }

@media only screen and (max-width: 374px) { table.altt100 { width: 100%; } }
@media only screen and (min-width: 375px) and (max-width: 576px) { table.altt100 { width: 100%; } }
@media only screen and (min-width: 576px) and (max-width: 767px) { table.altt100 { width: 96%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) { table.altt100 { width: 94%; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { table.altt100 { width: 92%; } }
@media only screen and (min-width: 1200px) { table.altt100 { width: 90%; max-width: 1600px; } }


/* =====================================================================================
   11) TABLEAUX "GW" (gagnants / team)
   ===================================================================================== */

table.altgw {
  border-collapse: collapse;
  background-color: hsl(222, 18%, 50%);
  color: #fff;
  line-height: normal;
  margin-inline: auto;
  border-spacing: 0px;
}

table.altgw th {
  border-bottom: 1px solid #9c9c9c;
  border-top: 1px solid #9c9c9c;
  color: #f7f4e6;
  text-shadow: 0px 0px 8px #3f445f;
  background-image: linear-gradient(hsl(230, 25%, 80%), hsl(230, 25%, 60%));
}

table.altgw td {
  border-bottom: 0px solid #fff;
  border-top: 0px solid #fff;
}

table.altgw tr:nth-child(odd)  { background-color: hsl(150, 18%, 50%); }
table.altgw tr:nth-child(even) { background-color: hsl(150, 18%, 45%); }

table.w50  { width: 50% !important;  max-width: 1550px !important; }
table.w60  { width: 60% !important;  max-width: 1550px !important; }
table.w70  { width: 70% !important;  max-width: 1550px !important; }
table.w90  { width: 90%;             max-width: 1450px !important; }
table.w95  { width: 95%;             max-width: 1500px !important; }
table.w100 { width: 98% !important;  max-width: 1550px !important; }
table.team { width: 100% !important; max-width: 1650px !important; }


/* =====================================================================================
   12) TABLE HORIZONTAL (cards)
   ===================================================================================== */

table.althorizontal {
  width: 90%;
  max-width: 1400px;
  min-width: 400px;
  background-color: hsl(222, 8%, 60%);
  border-collapse: collapse;
  box-shadow: 0px 0px 15px #555555;
  line-height: 150%;
  margin-inline: auto;
}

table.althorizontal td {
  padding: 15px;
  border: 2px hsl(222, 8%, 45%) solid;
  font-size: calc(8px + 0.6vw);
  text-align: center;
}

table.althorizontal p {
  line-height: 1.2;
  margin-top: 10px;
  margin-bottom: 0;
}

table.althorizontal tr:nth-child(even) {
  background-color: hsl(222, 8%, 55%);
}


/* =====================================================================================
   13) STICKY
   ===================================================================================== */

table.sticky {
  position: sticky;
  top: -1;
  overflow: auto;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  background-color: #ff5566;
  top: calc(42px + .6vw);
  padding: 10px;
  font-size: 20px;
}


/* =====================================================================================
   14) BONUS (scab_a_propos.asp)
   ===================================================================================== */

table.bonus {
  border-collapse: collapse;
  min-width: 0px;
  max-width: 1600px;
  background-color: #ffffff;
}

table.bonus th {
  text-align: center;
  line-height: 130%;
  background-color: hsla(220, 30%, 65%, 1);
  color: #FFFFFF;
  text-shadow: 0px 0px 8px #003355;
  text-transform: uppercase;
  font-weight: 600;
  border: solid 0px #9C9C9C;
  border-bottom: 2px solid hsl(219, 45%, 35%);
  border-top: 0px solid #9c9c9c;
}

table.bonus tr { line-height: 200%; }

/* Alternances */
table.bonus tr:nth-child(2) {
  background-color: rgba(180, 200, 250, 0.7) !important;
  text-align: center;
  color: #0000;
  font-weight: 600;
}

table.bonus tr:nth-child(even) {
  background-color: rgba(200, 210, 230, 0.6);
  color: #000000;
  text-align: center;
}

table.bonus tr:nth-child(odd) {
  background-color: rgba(220, 230, 240, 0.6);
  color: #000000;
  text-align: center;
}

table.bonus td:nth-of-type(1) {
  background: rgba(150, 220, 150, 0.5);
  color: #000000;
  text-align: center;
}

table.bonus td:nth-child(even) {
  background-color: rgba(200, 210, 220, 0.5);
  color: #000000;
}

/* Responsive bonus */
@media only screen and (max-width: 374px) {
  table.bonus { width: 100%; }
  table.bonus th { font-size: 12px; padding: 2px 2px; }
  table.bonus td, table.bonus tr { font-size: 10px; padding: 6px 2px; }
}
@media only screen and (min-width: 375px) and (max-width: 576px) {
  table.bonus { width: 100%; }
  table.bonus th { font-size: 14px; padding: 4px 2px; }
  table.bonus td, table.bonus tr { font-size: 12px; padding: 6px 2px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  table.bonus { width: 100%; }
  table.bonus th { font-size: 16px; padding: 4px 2px; }
  table.bonus td, table.bonus tr { font-size: 14px; padding: 8px 2px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  table.bonus { width: 95%; }
  table.bonus th { font-size: 18px; padding: 4px 2px; }
  table.bonus td, table.bonus tr { font-size: 16px; padding: 8px 2px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  table.bonus { width: 90%; }
  table.bonus th { font-size: 20px; padding: 4px 2px; }
  table.bonus td, table.bonus tr { font-size: 18px; padding: 8px 2px; }
}
@media only screen and (min-width: 1200px) {
  table.bonus { width: 85%; }
  table.bonus th { font-size: 24px; padding: 4px 2px; }
  table.bonus td, table.bonus tr { font-size: 20px; padding: 8px 2px; }
}


/* =====================================================================================
   15) COÛTS
   ===================================================================================== */

table.couts {
  border-collapse: collapse;
  text-align: center;
  color: #000000;
  width:auto;
}

table.couts th {
  text-align: center;
  line-height: 130%;
  color: #ffffff;
  text-shadow: 0px 0px 8px #003355;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px;
  border: solid 0px #9C9C9C;
  border-bottom: 2px solid hsl(219, 45%, 35%);
  border-top: 0px solid #9c9c9c;
  background-color: hsla(220, 30%, 30%, 1);
}

table.couts td {
  line-height: 130%;
  color: #000;
  padding: 10px 5px !important;
  font-weight: 500;
}

/* Rangées spécifiques */
table.couts tr:nth-child(2){ background-color: hsla(220, 30%, 50%, 1) !important; }
table.couts tr:nth-child(3){ background-color: hsla(50, 60%, 75%, 1) !important; }
table.couts tr:nth-child(4){ background-color: hsla(100, 60%, 75%, 1) !important; font-weight: 800; }
table.couts tr:nth-child(5){ background-color: hsla(150, 60%, 75%, 1) !important; font-weight: 800; }
table.couts tr:nth-child(6){ background-color: hsla(200, 60%, 75%, 1) !important; font-weight: 800; }
table.couts tr:nth-child(7){ background-color: hsla(250, 60%, 75%, 1) !important; font-weight: 900; }
table.couts tr:nth-child(8){ background-color: hsla(300, 60%, 75%, 1) !important; font-weight: 900; }
table.couts tr:nth-child(9){ background-color: hsla(220, 30%, 50%, 1) !important; font-weight: 800; }

/* Responsive coûts */
@media only screen and (max-width: 374px) {
  table.couts { width: 100%; padding: 2pt !important;}
  table.couts th { font-size: 12px; }
  table.couts td { font-size: 10px; }
}
@media only screen and (min-width: 375px) and (max-width: 576px) {
  table.couts { width: 100%; padding: 2pt; !important }
  table.couts th { font-size: 14px; }
  table.couts td { font-size: 12px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  table.couts { width: 95%; padding: 2pt; !important }
  table.couts th { font-size: 16px; }
  table.couts td { font-size: 14px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  table.couts { width: 80%; padding: 2pt !important; font-size: 16px; }
  table.couts th { font-size: 16px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  table.couts { width: 70%; padding: 2pt !important; font-size: 20px; }
  table.couts th { font-size: 16px; }
}
@media only screen and (min-width: 1200px) {
  table.couts { width: 60%; padding: 2pt !important; font-size: 20px !important; }
  table.couts td { font-size: 20px !important; padding: 8pt 2pt; }
  table.couts th { font-size: 16px; }
}

table.coutsw95 {
  width: 99%;
  font-size: 20px !important;
  padding: 1pt;
  line-height: 100%;
}
table.coutsw95 th {
  border-radius: 30px 30px 0 0 !important;
}


/* =====================================================================================
   16) CHESS
   ===================================================================================== */

table.chess {
  width: 95%;
  max-width: 1600px;
  min-width: 400px;
  background-color: hsl(222, 8%, 60%);
  border-collapse: collapse;
  box-shadow: 0px 0px 15px #555555;
  margin-inline: auto;
}

table.chess th { padding: 5px; }

table.chess td {
  padding: 10px;
  font-size: calc(10px + 0.6vw);
  text-align: center;
}

table.chess p {
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}


/* =====================================================================================
   17) UTILITAIRES PADDING TABLES (unifiés + ajout pad1 du CSS #2)
   ===================================================================================== */

table.pad0 td  { padding-top: 0px !important; padding-bottom: 0px !important; }
table.pad1 td  { padding: 0 !important; } /* vient du CSS #2, pratique pour tout annuler */

table.pad2 td  { padding-top: 2px !important; padding-bottom: 2px !important; }

table.pad5 td  { padding-top: 5px !important; padding-bottom: 5px !important; }
table.pad5h td { padding-left: 5px !important; padding-right: 5px !important; }
table.pad5hv td{ padding: 5px !important; }
table.pad5p td { padding: 0.5% !important; }

table.pad10 td  { padding-top: 10px !important; padding-bottom: 10px !important; }
table.pad10h td { padding-left: 10px !important; padding-right: 10px !important; }
table.pad10hv td{ padding: 10px !important; }

table.pad15 td  { padding-top: 15px !important; padding-bottom: 15px !important; }
table.pad15h td { padding-left: 15px !important; padding-right: 15px !important; }
table.pad15b td { padding-left: 15px !important; padding-right: 15px !important; }

table.pad20 td  { padding-top: 20px !important; padding-bottom: 20px !important; }


/* =====================================================================================
   18) ARTICLES
   ===================================================================================== */

table.Articles {
  width: 99%;
  max-width: 1900px;
  background-color: hsl(222, 6%, 50%);
  border-left: solid 0px #808080;
  border-right: solid 0px #808080;
  margin-inline: auto;
  border-spacing: 0px;
  border-collapse: collapse;
  font-size: calc(12px + .5vw);
  font-weight: 400;
}

table.Articles th {
  padding-top: calc(55px + .6vw);
  padding-bottom: calc(20px + .2vw);
  padding-inline: 1%;
  text-align: center;
  font-size: calc(20px + .5vw);
  color: hsl(50, 70%, 80%);
  text-transform: uppercase;
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8);
  font-weight: 700;
}

table.Articles td {
  padding: 1% 1%;
  line-height: 1.5;
}

table.Articles td p {
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

table.Articles th p {
  line-height: 1.5;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}


/* =====================================================================================
   19) DIVERS (coins ronds, ombres, etc.)
   ===================================================================================== */

table.coinsronds { border-radius: calc(10px + .8vw); }

table.ombre {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.lignevtd td { border-right: solid 1px #bbbbcc; }
.lignevth th { border-right: solid 1px #bbbbcc; }

table.noborder {
  border-bottom: 1px solid #ff0000 !important;
  border-top: 1px solid #00ff00 !important;
}

.radius {
  border: 4px solid #445;
  padding: 1px;
  border-radius: 25px;
}

span.spamprotection { display: none; }


/* =====================================================================================
   20) SHOW / HIDE (responsive utilitaires)
   ===================================================================================== */

/* CACHER / UNHIDE (600px) */
@media (max-width: 600px) { .hide600 { display: none; } }
@media (min-width: 601px) { .unhide600 { display: none; } }

/* Ajouts utiles si tu les utilises déjà dans des pages (vient du CSS #2) */
@media (max-width: 371px) { .hideA { display: none; } }
@media (min-width: 372px) { .unhideA { display: none; } }

/* Mobile-first: caché par défaut */
.show-600-down { display: none; }
@media (max-width: 600px) { .show-600-down { display: inherit; } }

/* Desktop-first: visible par défaut, caché en dessous de 372px */
.show-372-up { display: inherit; }
@media (max-width: 371px) { .show-372-up { display: none; } }

/* Swap label (full/short) */
.swap-label .short { display: none; }
@media (max-width: 600px) {
  .swap-label .full  { display: none; }
  .swap-label .short { display: inline; }
}


/* =====================================================================================
   21) POLICES (classes utilitaires)
   ===================================================================================== */

/* Évite d’avoir des sélecteurs "BenchNine{...}" sans point: ça cible une balise <BenchNine> inexistante.
   On garde uniquement les classes .BenchNine, .Teko, .Abel, etc. */

.BenchNine { font-family: 'BenchNine', sans-serif; }
.Teko      { font-family: 'Teko', sans-serif; }
.Abel      { font-family: 'Abel', sans-serif; }

.Bungee       { font-family: 'Bungee Inline', cursive !important; }
.Faster       { font-family: 'Faster One', cursive; }
.Fredericka   { font-family: 'Fredericka the Great', cursive; }
.Frijole      { font-family: 'Frijole', cursive; }


/* =====================================================================================
   22) TEXTE AJUSTABLE (clamp)
   ===================================================================================== */

.ajustable {
  /* fallback simple */
  font-size: 18px;

  /* empêche certains redimensionnements automatiques de texte sur mobile */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;

  /* clamp si supporté */
  font-size: clamp(16px, 4vw, 48px);
}