@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------
   Pages de classement mondial de les-sports.info
   Charge uniquement par inc/liste_classement.inc.php.
   Reprend la maquette validee le 09/09/2026, avec la charte du site
   (vert #00632c, ambre #ffba00). Aucune modification du HTML genere :
   tout s'appuie sur les classes existantes (tdcol-5 / tdcol-65 / tdcol-15).
   ------------------------------------------------------------------ */

/* ---------------------- la mise en page de la ligne ----------------------
   Mesure faite au navigateur : la colonne de pub reserve 300 px de large mais
   ne fait que 20 px de haut (elle reste vide). En la laissant a droite, le
   classement s'arretait a 950 px sur un ecran de 1440 et laissait 490 px de
   blanc : c'est ce qui donnait l'impression d'un tableau colle a gauche.
   On empile donc : la pub d'abord (mieux vue qu'en bas d'un tableau de
   5 000 px), le classement ensuite, sur toute la largeur. */
.wrapper.clearfix {
  display: flex;
  flex-direction: column;
}
.wrapper.clearfix > .col-3-4-moins {
  width: 100%;
  margin-right: 0;
  float: none;
}
.wrapper.clearfix > .col-1-4.right.last {
  order: -1;                 /* la pub passe au-dessus du classement */
  width: 100%;
  float: none;
  text-align: center;
  padding: 0 0 18px 0 !important;
}

.post h1 {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #1c2721;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 3px solid #00632c;
}

/* le chapeau explicatif */
.post .p_centre_14,
.post p {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #45514b;
}

/* la date de mise a jour : une pastille, plus un paragraphe perdu */
.post p.p_centre_14 {
  display: inline-block;
  background: #eef2ec;
  border-left: 3px solid #ffba00;
  padding: 7px 14px;
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1c2721;
  text-align: left;
}

/* ---------------------------- le tableau ---------------------------- */

.post table.table-style-2 {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 15px;
  background: #fff;
  border: 1px solid #dbe3dc;
}

.post table.table-style-2 th {
  background: #00632c;
  color: #fff;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 14px;
  text-align: left;
  border: 0;
}

.post table.table-style-2 td {
  padding: 7px 14px;
  border: 0;
  border-bottom: 1px solid #e7ece7;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.post table.table-style-2 tr:last-child td { border-bottom: 0; }

/* une ligne sur deux, tres discrete, pour suivre la ligne du regard */
.post table.table-style-2 tr:nth-child(2n+1) td { background: #fafbfa; }
.post table.table-style-2 tr:hover td { background: #e2efe6; }
.post table.table-style-2 tr:first-child:hover th { background: #00632c; }

/* le rang */
.post table.table-style-2 td.tdcol-5 {
  width: 62px;
  text-align: center;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #6d7a73;
}
/* les dix premieres nations (la 1re ligne est l'en-tete) */
.post table.table-style-2 tr:nth-child(-n+11):not(:first-child) td.tdcol-5 { color: #00632c; }
.post table.table-style-2 tr:nth-child(2) td.tdcol-5 { color: #b8860b; font-size: 24px; }

/* l equipe */
.post table.table-style-2 td.tdcol-65 { width: auto; }
.post table.table-style-2 td.tdcol-65 a {
  color: #1c2721;
  font-weight: 500;
  text-decoration: none;
}
.post table.table-style-2 td.tdcol-65 a:hover { color: #00632c; text-decoration: underline; }
.post table.table-style-2 tr:nth-child(-n+11):not(:first-child) td.tdcol-65 a { font-weight: 600; }

/* le logo de federation ou le drapeau */
/* Les drapeaux n'ont pas tous le meme rapport largeur/hauteur : on les contient
   dans une boite fixe (box-sizing compris, sinon la bordure s'ajoute a la taille
   et l'image deborde du cadre). */
.post table.table-style-2 td.tdcol-65 img.flag {
  display: inline-block;
  box-sizing: border-box;
  width: 26px;
  height: 18px;
  max-width: 26px;
  max-height: 18px;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  margin: 0 11px 0 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(28,39,33,.12);
  background: transparent;
}

/* les points */
.post table.table-style-2 td.tdcol-15 {
  width: 110px;
  text-align: right;
  font-weight: 600;
  color: #00632c;
  font-size: 15.5px;
}

/* la colonne d'evolution */
.post table.table-style-2 td.evo-up,
.post table.table-style-2 td.evo-down,
.post table.table-style-2 td.evo-flat {
  width: 96px;
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.post table.table-style-2 td.evo-up   { color: #0f7a3d; }
.post table.table-style-2 td.evo-down { color: #b03024; }
.post table.table-style-2 td.evo-flat { color: #9aa6a0; font-weight: 400; }

/* Filet de securite si un contenu large arrive un jour ; en pratique le tableau
   tient dans la largeur, y compris sur mobile (voir plus bas). */
.post { overflow-x: auto; }

/* Les blocs publicitaires sortent des petits ecrans : mesure au navigateur, des
   iframes de 640 px sur un ecran de 320. C'est ce qui provoquait le defilement
   lateral restant. On les contient dans la largeur disponible sans rien masquer. */
.post ins,
.post iframe,
.post .adsbygoogle,
.wrapper.clearfix > .col-1-4.right.last ins,
.wrapper.clearfix > .col-1-4.right.last iframe,
.wrapper.clearfix > .col-1-4.right.last .adsbygoogle {
  max-width: 100% !important;
}
.post td > ins,
.post td > div,
.wrapper.clearfix > .col-1-4.right.last { overflow-x: hidden; }

/* ---------------------------- petits ecrans ----------------------------
   Objectif : lire rang, equipe, points et evolution SANS defilement lateral.
   On fige les largeurs (table-layout) et on laisse le seul nom d'equipe
   revenir a la ligne : c'est la seule colonne dont la longueur varie. */
@media (max-width: 760px) {
  .post h1 { font-size: 28px; }

  .post table.table-style-2 {
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
  }
  .post table.table-style-2 th,
  .post table.table-style-2 td { padding: 6px 4px; }
  .post table.table-style-2 th { font-size: 12px; letter-spacing: .04em; }

  .post table.table-style-2 td.tdcol-5,
  .post table.table-style-2 th:nth-child(1) { width: 30px; font-size: 16px; }

  .post table.table-style-2 td.tdcol-65 {
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }
  .post table.table-style-2 td.tdcol-65 img.flag {
    width: 18px; height: 13px; max-width: 18px; max-height: 13px;
    margin-right: 6px;
  }

  .post table.table-style-2 td.tdcol-15,
  .post table.table-style-2 th:nth-child(3) { width: 56px; font-size: 13px; }

  .post table.table-style-2 td.evo-up,
  .post table.table-style-2 td.evo-down,
  .post table.table-style-2 td.evo-flat,
  .post table.table-style-2 th:nth-child(4) { width: 44px; font-size: 12.5px; }
}

/* Sur petit ecran, aucun element ne doit depasser la largeur de l'ecran.
   Les regies publicitaires posent des iframes de largeur fixe (336 px, 640 px)
   qui provoquaient un defilement lateral de la page entiere. Cette feuille
   n'etant chargee que sur les pages de classement, la portee reste limitee. */
@media (max-width: 760px) {
  iframe,
  ins,
  .adsbygoogle,
  embed,
  object {
    max-width: 100% !important;
  }
  /* les blocs charges apres coup par les regies peuvent encore depasser de
     quelques pixels : on coupe le defilement lateral au niveau du document */
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* tres petits ecrans : on gagne encore quelques pixels sur les colonnes fixes */
@media (max-width: 380px) {
  .post table.table-style-2 { font-size: 12px; }
  .post table.table-style-2 td.tdcol-5 { width: 26px; font-size: 14px; }
  .post table.table-style-2 td.tdcol-15 { width: 50px; }
  .post table.table-style-2 td.evo-up,
  .post table.table-style-2 td.evo-down,
  .post table.table-style-2 td.evo-flat { width: 38px; font-size: 11.5px; }
}