/*
Theme Name: nk26
Theme URI: https://www.nakan.ch/
Description: nk26
Author: Grégory Chanez
Author URI: https://www.nakan.ch
Template: color-blog
Version: 1.0.64
Text Domain: nk26
*/

/* Force le style "solid" pour toutes les icônes Font Awesome */
.fa:not(.fa-brands):not(.fa-regular) {
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900; /* Style "solid" */
}

/* Correction pour les icônes de marques (ex: YouTube, Facebook, Twitter) */
.fa-youtube:before,
.fa-facebook:before,
.fa-facebook-official:before,
.fa-instagram:before,
.fa-reddit:before,
.fa-mastodon:before,
.fa-bluesky:before {
    font-family: "Font Awesome 7 Brands" !important;
    font-weight: 400;
}

/* Corrige spécifiquement les icônes problématiques */
.fa-long-arrow-right:before {
    content: "\f178"; /* Code Unicode pour la flèche vers la droite */
}

/***
NK26 - Change in base theme layout 
***/

/* Agrandir les icones sociales dans le menu supérieur */
#top-navigation ul li a {
  font-size: 20px;
  color: #fff;
  transition: color 0.3s ease;
}
#top-navigation ul li a:hover {
  color: #C1DDF5 !important;
}

/* Top header bleu */
#top-header {
  background-color: #1E73BE;
}

/* Changer la largeur des articles et du contenu pour faire correspondre la largeur de contenu 2040/1020 de nakan.ch original */
.mt-container {
  width: 1020px; 
}

/* Agrandir la taille de police de base */
p {
  font-size: 100%;
}
li {
  font-size: 100%;
}

/* Ajouter de l'espace au-dessus des titres */
h1, h2, h3, h4, h5, h6 {
  margin-top: 35px;
}

/* Ajoute un espace au-dessous des images */
.wp-block-image {
  margin-bottom: 30px;
}

/* Ajoute de l'espace au-dessous des galeries */
.wp-block-gallery {
  margin-bottom: 30px;  
}

/* Ne pas afficher le bandeau gris qui duplique le titre des articles */
.custom-header.no-bg-img {
  display: none;
}

/* Style des captions d'images */
figcaption {
  font-style: italic;
  color: #666;
  text-align: center;
}

/* Ne pas afficher le box d'auteur sous les articles */
.mt-author-box {
  display: none;
}

/* Forcer le menu par-dessus le reste */
#site-navigation ul li .sub-menu, #site-navigation ul li .children {
  z-index: 9999;
}

/* Embeed YouTube */
/* Cible spécifiquement les vidéos YouTube dans les blocs Gutenberg */
figure.wp-block-embed-youtube,
figure.wp-block-embed.is-type-video.is-provider-youtube {
    width: 100% !important; /* Pleine largeur */
    max-width: 100% !important; /* Évite le débordement */
    margin-left: auto !important; /* Centre horizontalement */
    margin-right: auto !important; /* Centre horizontalement */
    display: block !important; /* Assure le centrage */
}
/* Force le conteneur de l'iframe à prendre toute la largeur */
figure.wp-block-embed-youtube .wp-block-embed__wrapper,
figure.wp-block-embed.is-type-video.is-provider-youtube .wp-block-embed__wrapper {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 (9/16 = 0.5625) */
    height: 0 !important; /* Réinitialise la hauteur */
    overflow: hidden !important;
}
/* Ajuste l'iframe pour qu'elle remplisse son conteneur */
figure.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
figure.wp-block-embed.is-type-video.is-provider-youtube .wp-block-embed__wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}
/* Optionnel : Ajoute une marge verticale pour aérer */
figure.wp-block-embed-youtube,
figure.wp-block-embed.is-type-video.is-provider-youtube {
    margin: 1.5em 0 !important; /* Espacement vertical */
}

/* Override TablePress */
.tablepress {
  --head-bg-color: #C1DDF5 !important;
}
.tablepress thead th, .tablepress tfoot th {
  background-color: #C1DDF5 !important;
  font-size: 13px !important;
}
.tablepress tbody td {
  font-size: 13px !important;
}

/* Custom toc */
.ez-toc-list, .ez-toc-list-level-3, .ez-toc-list-level-4 {
	list-style-type: none;
}
.ez-toc-page-1, .ez-toc-heading-level-2, .ez-toc-list-level-3, .ez-toc-list-level-4 {
	padding-top: 6px;
}
.ez-toc-link {
	padding-top: 4px;
  font-weight: bold;
}
.ez-toc-title {
  /* h2 values */
  margin-top: 35px;
  clear: both;
  font-size: 30px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #3d3d3d;
  font-weight: 700;
}

/* Home page bouton "tous les articles" */
.nkhpcenter {
  text-align: center;
  margin-top: 20px;
}
.nkhpbtn {
  background-color: #000;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  padding: 10px 25px 10px 25px;
  margin-top: 6px !important;
  font-size: 14px;
  line-height: 26px !important;
}
.nkhpbtn:hover {
  background-color: rgba(119,119,119,1);
  color: #fff;
}

/* Text formatting */
blockquote.nkn-info:before,
blockquote.nkn-info:after,
blockquote.nkn-warn:before,
blockquote.nkn-warn:after,
blockquote.nkn-warnbox:before,
blockquote.nkn-warnbox:after,
blockquote.nknrs-facebook:before,
blockquote.nknrs-facebook:after,
blockquote.nknrs-youtube:before,
blockquote.nknrs-youtube:after,
blockquote.nknrs-instagram:before,
blockquote.nknrs-instagram:after
 {
    display: none !important;
    content: none !important;
}
.nkn-info {
  font-size: 100%;
  padding-left: 20px;
  margin-left: 40px;
  margin-bottom: 30px;
  quotes: none;
  border-left: 5px solid #666;
}
.nkn-warn {
  font-size: 100%;
  padding-left: 20px;
  margin-left: 40px;
  margin-bottom: 30px;
  quotes: none;
  border-left: 5px solid #ff6f00;
}
.nkn-warnbox {
  font-size: 100%;
  padding-left: 20px;
  margin-left: 40px;
  margin-bottom: 30px;
  quotes: none;
  border-left: 5px solid #b80000;  
}
a.warnBox,a.warnBox:link,a.warnBox:active,a.warnBox:hover,a.warnBox:focus,a.warnBox:visited {
  color: #1E73BE;
  font-size: 100%;
	text-decoration: none;
}
.nknrs-facebook {
  font-size: 100%;
  padding-left: 70px;
  margin-left: 40px;
  margin-bottom: 30px;
  quotes: none;
  border-left: 5px solid #2e78be;; 
  background: #ffffff url('https://www.nakan.ch/wp/wp-content/uploads/2018/03/facebook.png') no-repeat; 
}
.nknrs-youtube {
  font-size: 100%;
  padding-left: 70px;
  margin-left: 40px;
  margin-bottom: 30px;
  quotes: none;
  border-left: 5px solid #ff0000; 
  background: #ffffff url('https://www.nakan.ch/wp/wp-content/uploads/2018/03/youtube.png') no-repeat; 
}
.nknrs-instagram {
  font-size: 100%;
  padding-left: 70px;
  margin-left: 40px;
  margin-bottom: 30px;
  quotes: none;
  border-left: 5px solid #a73ca7; 
  background: #ffffff url('https://www.nakan.ch/wp/wp-content/uploads/2018/03/instagram.png') no-repeat; 
}
/** ELEMENTS CUSTOM nknplugin **/

/* Boutons */
.btn {
	text-decoration: none;
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	background-image: none;
	border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
	white-space: nowrap;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.btn-success {
	background-color: #1E73BE;
	border-color: #0A253E;
}
.btn-warning {
	background-color: #f0ad4e;
	border-color: #eea236;
}
.btn-info {
	background-color: #31b0d5;
	border-color: #269abc;
}
.btn-primary {
	background-color: #3071a9;
	border-color: #285e8e;
}
a.btn {
	text-decoration: none;
	color: #fff;
	font-family: "Open Sans", sans-serif;
}
a.btn:link,a.btn:visited,a.btn:visited {
	color: #fff;
}
a.btn:hover {
	color: #fff;
}

/* Section header en-dessus des tests */
/* Part for 3-4 blocks */
.headPromoRow {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #C1DDF5;
  border: 1px solid #1E73BE;
  border-radius: 12px;
  padding: 5px 5px 5px 5px;
  justify-items: stretch;
}
@media (min-width: 380px) {
  .headPromoRow { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .headPromoRow { grid-template-columns: repeat(4, 1fr); }
}
/* Part for 1-2 blocks */
.headPromoRowDuo {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #C1DDF5;
  border: 1px solid #1E73BE;
  border-radius: 12px;
  padding: 5px 5px 5px 5px;
  justify-items: stretch;
}
@media (min-width: 380px) {
  .headPromoRowDuo { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 900px) {
  .headPromoRowDuo { grid-template-columns: repeat(2, 1fr); }
}
.headPromoHeaderImage {
    text-align: center;
}
.headPromoColumn {
    border: 1px solid #ccc;
    padding: 10px 4px 10px 4px;
    border-radius: 10px;
    background-color: #fff;
    transition: box-shadow .4s;
    cursor: pointer; 
    
}
.headPromoColumn:hover {
    box-shadow: 0 5px 15px #ccc;
}
.headPromoTitle {
    font-weight: bold;
    text-align: center;
    font-size: 80%;
}
.headPromoDescriptionIcon {
    vertical-align: middle;
}
.headPromoDescription {
    text-align: center;
    font-size: 75%;
    color: #444;
    padding: 3px 3px 3px 3px;
}
a.headPromoLink,a.headPromoLink:link,a.headPromoLink:active,a.headPromoLink:hover,a.headPromoLink:focus,a.headPromoLink:visited {
    color: #333;
}

/* Section des sponsors + boxes de podcast */
.sponsorRow,.podcastRow {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  grid-gap: 1rem;
  margin-top: 15px;
  margin-bottom: 15px;
  justify-items: center;
}
.sponsorRow,.podcastRow {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  grid-gap: 1rem;
  margin-top: 15px;
  margin-bottom: 15px;
  justify-items: center;
}
@media (min-width: 390px) {
  .sponsorRow,.podcastRow { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .sponsorRow,.podcastRow { grid-template-columns: repeat(4, 1fr); }
}
.sponsorHeaderImage,.podcastHeaderImage {
    text-align: center;
}
.sponsorColumn,.podcastColumn {
    padding: 6px 4px 6px 4px;
    transition: box-shadow .4s;
    cursor: pointer; 
}
.sponsorIrunImage {
    box-shadow: 0 5px 15px #ccc;
    cursor: pointer; 
}
.sponsorIrunImage:hover {
    box-shadow: 0 5px 15px #142c3a;
}
.sponsorColumnIRUN,.sponsorColumnIRUN1 {
    background-color: #eefceb;
}
.sponsorColumnIRUN:hover,.sponsorColumnIRUN1:hover,.sponsorColumnIRUN2:hover,.sponsorColumnIRUN4:hover {
    box-shadow: 0 5px 15px #142c3a;
}
.sponsorColumnIRUN2 {
    background-color: #eefceb;
}
.sponsorColumnIRUN4 {
    background-color: #eefceb;
}
.sponsorColumnIRUN:hover {
    box-shadow: 0 5px 15px #142c3a;
}
.podcastColumnSPOTIFY {
  background-color: #eefceb;
}
.podcastColumnSPOTIFY:hover {
    box-shadow: 0 5px 15px #142c3a;
}
.sponsorColumnAMAZON,.sponsorColumnAMAZON1,.podcastColumnPADDICT {
    background-color: #fcfbeb;
}
.sponsorColumnAMAZON:hover,.sponsorColumnAMAZON1:hover,.sponsorColumnAMAZON2:hover,.podcastColumnPADDICT:hover {
    box-shadow: 0 5px 15px #f7cf3e;
}
.sponsorColumnAMAZON2 {
    background-color: #fcfbeb;
}
.sponsorColumnAMAZON:hover {
    box-shadow: 0 5px 15px #f7cf3e;
}
.sponsorColumnDecathlon {
    background-color: #ebf8fc;
}
.sponsorColumnDecathlon:hover {
    box-shadow: 0 5px 15px #43bafa;
}
.sponsorColumnCOROSBox,.podcastColumnAPPLE,.sponsorColumnCOROS {
    background-color: #ffc0bc;
}
.sponsorColumnCOROSBox:hover,.podcastColumnAPPLE:hover,.sponsorColumnCOROS:hover {
    box-shadow: 0 5px 15px #f55a54;
}

.sponsorColumnZWIFT {
    background-color: #fad1bb;
}
.sponsorColumnZWIFT:hover {
    box-shadow: 0 5px 15px #a34310;
}
.sponsorColumnSUUNTO {
    background-color: #000;
    color: #ccc;
}
.sponsorColumnSUUNTO:hover {
    box-shadow: 0 5px 15px #999;
}
.sponsorColumnSUUNTOlight {
    background-color: #ccc;
}
.sponsorColumnSUUNTOlight:hover {
    box-shadow: 0 5px 15px #999;
}
.sponsorDescription,.podcastDescription {
    padding-top: 5px;
    text-align: center;
    font-size: 70%;
    color: #444;
    padding: 8px 3px 3px 3px;
}
.sponsorDescriptionSUUNTO {
  color: #fff;
}
.socialsColumn {
  padding: 6px 4px 6px 4px;
  cursor: pointer; 
}

/* Products Links */
.productLinkRow,.modelsFunctionRow {
  max-width: 1000px;
  display: grid;
  grid-gap: 0.5rem;
  margin-top: 10px;
  margin-bottom: 10px;
  
}
.productLinkRowCollapsable {
  max-width: 1000px;
  margin-top: 10px;
  margin-bottom: 10px;
  
}
@media (min-width: 380px) {
  .productLinkRow { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .productLinkRow { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 380px) {
  .modelsFunctionRow { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .modelsFunctionRow { grid-template-columns: repeat(4, 1fr); }
}
.productLinkHeaderImage,.modelsFunctionHeaderImage {
    text-align: center;
}
.productLinkColumn,.modelsFunctionColumn {
    border: 1px solid #ccc;
    padding: 10px 4px 10px 4px;
    transition: box-shadow .4s;
}

.productLinkColumn:hover,.promo30LinkColumn:hover {
    box-shadow: 0 5px 15px #ccc;
}
.promo30LinkColumn {
    border: 1px solid #ABFF96;
    padding: 10px 4px 10px 4px;
    transition: box-shadow .4s;
}
a.productLinkMainLink,a.productLinkMainLink:link,a.productLinkMainLink:active,a.productLinkMainLink:hover,a.productLinkMainLink:focus,a.productLinkMainLink:visited {
    color: #333;
}
a.modelsFunctionMainLink,a.modelsFunctionMainLink:link,a.modelsFunctionMainLink:active,a.modelsFunctionMainLink:hover,a.modelsFunctionMainLink:focus,a.modelsFunctionMainLink:visited {
    color: #333;
}
.productLinkTitle,.modelsFunctionTitle {
    font-weight: bold;
    text-align: center;
    font-size: 90%;
}
.productLinkDescriptionIcon {
    vertical-align: middle;
}
.productLinkDescription {
    padding-top: 5px;
    font-size: 85%;
    color: #444;
    padding: 8px 3px 3px 3px;
}

/* Brand info box */
.brandRowDuo {
  max-width: 100%;
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
  background-color: #c1ddf5;
}
.brand_card_general {
  width: 95%;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
}
.brand_card_ratings {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}
.brand_description {
    text-align: justify;
}
.brand_info_box {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    margin-top: 2px;
}
.brand_info_content {
    font-size: 14px;
    padding: 5px 5px 5px 5px;
    background-color: #fff;
}
.brand_info_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
}
.brand_rating_box {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    margin-top: 4px;
}
.brand_rating_content {
    padding: 16px 16px 20px;
    background-color: #fff;
}
.brand_rating_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
}
.brand_rating_title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background-color: #fff;
}
.brand_rating_info {
    display: flex;
    gap: 8px;
    align-items: center;
    background-color: #fff;
}
.brand_rating_text {
    font-size: 14px;
    font-weight: 500;
    color: #4CAF50;
}
.brand_rating_number {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.brand_rating_bar_container {
    width: 100%;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}
.brand_rating_bar {
    height: 100%;
    border-radius: 5px;
}

/* Accessories table */ 
.accessoriesRow {
  max-width: 1000px;
  margin: 0 auto;
  display: none;
  grid-gap: 1rem;
}
@media (min-width: 600px) {
  .accessoriesRow { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .accessoriesRow { grid-template-columns: repeat(3, 1fr); }
}
.accessoriesHeaderImage {
    text-align: center;
}
.accessoriesTitle {
    background-color: #1E73BE;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
a.accessoriesMainLink,a.accessoriesMainLink:link,a.accessoriesMainLink:active,a.accessoriesMainLink:hover,a.accessoriesMainLink:focus,a.accessoriesMainLink:visited {
    color: #fff;
}
.accessoriesDescription {
    font-size: 80%;
    color: #444;
    padding: 3px 3px 3px 3px;
}
ul.accessoriesPriceList {
    list-style-type: none;
    padding-left: 0px;
}
li.accessoriesPrice {
    font-size: 80%;
    font-weight: bold;  
}