/* --- 1. VARIABLES & RESET --- */
:root {
	--first-color: #000000;
	--second-color: #444444;
	--black: #000000;
	--bg-light: #f4f4f4;
	--white: #ffffff;
	--grey-text: #666666;
	--shadow: 0 4px 15px rgba(0,0,0,0.08);
	--shadow-hover: 0 8px 25px rgba(0,0,0,0.15);
}

@font-face { 
	font-family: 'Russo One'; 
	src: url('/i/RussoOne-Regular.ttf'); 
	font-display: swap; 
}

* { box-sizing: border-box; }

body { 
	margin: 0; 
	font-family: 'Arial', sans-serif; 
	background-color: var(--bg-light); 
	line-height: 1.5; 
	color: #333; 
	overflow-x: hidden; 
}

h1, h2, h3 {font-family: 'Russo One', sans-serif;font-weight: normal; margin: 0; color: var(--black);}
h1{font-size:26px;line-height:30px;}
h2{font-size:26px;line-height:1.2;margin: 0 0 15px 0;}
h3{font-size:22px;line-height:26px;margin: 0 0 15px 0;}

a { text-decoration: none; color: inherit; transition: 0.2s; }

.labarre{width: 100px; height: 8px; background: var(--second-color);  margin-bottom: 50px;}
.p20{padding:20px;}
.pl10{padding-left:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}
.pr15{padding-right:15px;}
.pl15{padding-left:15px;}
.lh24{line-height:24px;}
.ttt16bl{font-size:16px;font-family:'Russo One',sans-serif;color:#FFFFFF;}
.lediv:hover { opacity: 0.7; cursor: pointer; }

/* --- 2. HEADER & NAVIGATION --- */
.header-main {
	background-color: var(--first-color);
	height: 80px;
	width: 100%;
}

.header-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex; /* Active le mode flexible */
	justify-content: space-between; /* Espace les 3 blocs (gauche, centre, droite) */
	align-items: center; /* Aligne verticalement au milieu */
	height: 100%;
	padding: 0 15px;
}

/* On s'assure que les trois zones ont une largeur flexible pour bien centrer le logo */
.menu-side {
	flex: 0; /* Prend l'espace disponible de chaque côté */
	display: flex;
	justify-content: right;
}

.logo-side {
	flex: 0; /* Le logo garde sa taille originale */
	display: flex;
	justify-content: left;
}

.social-side {
	justify-content: flex-end; /* Pousse les icônes à droite */
	gap: 10px; /* L'ESPACE DE 10PX ENTRE FB ET X */
}

.new_menu { width: 60px; height: 80px; background: url("/i/i.webp") 0 0; background-size: 285px 115px; cursor: pointer; }
.new_logo { width: 225px; height: 80px; background: url("/i/i.webp") -60px 0; background-size: 285px 115px; }
.new_facebook { width: 35px; height: 35px; background: url("/i/i.webp") 0 -80px; background-size: 285px 115px; }
.new_twitter {width:35px;height:35px;background:url("/i/i.webp") -35px -80px;background-size:285px 115px;}
.new_email{width:35px;height:35px;background:url("/i/i.webp") -70px -80px;background-size:285px 115px;}
.new_linkedin{width:35px;height:35px;background:url("/i/i.webp") -105px -80px;background-size:285px 115px;}
.lien_marqueur{color:#0F5ADC;}
.lien_marqueur:hover{color:#002288;}


.disclaimer { 
	background: var(--second-color);
	color: #fff; 
	text-align: center; 
	padding: 12px; 
	font-size: 13px; 
	letter-spacing: 0.5px; 
}

.content-container-flex { display: flex; flex-direction: column; align-items: center; }
.white-block-archive {background-color:#FFFFFF; max-width:1200px; width:100%; border:1px solid #ccc; border-radius:15px; padding:10px 20px 20px 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align:left;}

/* --- 3. GRILLE RESPONSIVE --- */
.main-wrapper { 
	max-width: 1200px; 
	margin: 20px auto; 
	padding: 0 15px; 
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	gap: 25px;
	margin-top: 20px;
}
@media (max-width: 992px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .news-grid { grid-template-columns: 1fr; } }

.news-grid-last {
	display: grid;
	grid-template-columns: repeat(2, 1fr); 
	gap: 25px;
	margin-top: 20px;
}
@media (max-width: 650px) { 
	.news-grid-last {grid-template-columns: 1fr;}
}
.grid-full {
	grid-column: 1 / -1;
	width: 100%;
}


/* --- 4. DESIGN DES CARTES --- */
.card {
	background: var(--white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
}

.card:hover { 
	transform: translateY(-7px); 
	box-shadow: var(--shadow-hover); 
}

.card img { 
	width: 100%; 
	height: 210px; 
	object-fit: cover; 
	display: block; 
	border-bottom: 3px solid var(--second-color); 
}

.card-content { 
	padding: 22px; 
	flex-grow: 1; 
	display: flex; 
	flex-direction: column; 
}

.author { 
	font-size: 16px;
	font-weight: bold;
	color: var(--second-color);
	letter-spacing: 1px;
}
.ladate { 
	font-size: 12px; 
	text-transform: uppercase;
	color: #888;
	margin-bottom: 10px;
	letter-spacing: 1px;
}
.time-sep {
	margin-left: 8px;
	color: #888;
	font-size: 13px;
}

.card-title {font-size: 24px; line-height: 1.2; }

/* --- FOOTER VERSION 2026 --- */

.site-footer {
	background-color: #000;
	padding: 50px 0 50px 0;
	border-top: 4px solid #888888;
}

.footer-top {
	margin-bottom: 20px;
}

.footer-logo a {
	font-family: 'Russo One', sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	color: #fff;
}

.footer-copyright {
	font-size: 11px;
	color: #888;
	letter-spacing: 1px;
}

/* Section Sociale */
.footer-social {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.social-btn {
	display: inline-block;
	padding: 12px 25px;
	font-family: 'Russo One', sans-serif;
	font-size: 13px;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-decoration: none;
}

/* Bouton Page : Bleu Facebook / Rangers */
.fb-page {
	background-color: transparent;
	border: 1.5px solid #fff;
	color: #fff !important;
}

.fb-page:hover {
	background-color: #fff;
	color: #000 !important;
}

/* Bouton Groupe : Accent Rouge (Action forte) */
.fb-group {
	background-color: var(--second-color);
	border: 1.5px solid var(--second-color);
	color: #fff !important;
}

.fb-group:hover {
	background-color: transparent;
	color: var(--second-color) !important;
}

/* Navigation simplifiée */
.footer-nav {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid #888;
	padding-top: 15px;
}

.footer-nav a {
	color: #888;
	font-size: 12px;
	transition: color 0.2s;
}

.footer-nav a:hover {
	color: var(--second-color);
}

/* Responsive Mobile */
@media (max-width: 650px) {
	.footer-social {
		flex-direction: column;
		align-items: center;
	}
	.social-btn {
		width: 90%;
		text-align: center;
	}
	.footer-nav {
		gap: 10px;
	}
}

.btn-more { 
	display: inline-block; 
	background: var(--black); 
	color: #fff; 
	padding: 20px; 
	border-radius: 50px; 
	font-family: 'Russo One';
	margin: 40px 0;
	cursor: pointer;
}
.btn-more:hover { 
	background: var(--second-color); 
	transform: scale(1.05); 
}

/* --- 6. PUBLICITÉS & SIDEBAR --- */
.ad-slot {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 20px 0;
	min-height: 250px; /* Réserve l'espace pour éviter le saut de page */
	background-color: #f9f9f9; /* Optionnel : un fond léger pour montrer que c'est une zone de pub */
}


/* ##################################################################################################################
	Conteneur interne de la sidebar
##################################################################################################################*/

.w3-sidebar {
	height: 100%;
	width: 100%;
	max-width: 400px;
	background: #0b0b0b;
	position: fixed;
	z-index: 2000;
	top: 0;
	/* --- CHANGEMENT ICI --- */
	right: 0; /* On l'attache à droite */
	left: auto; /* On s'assure que 'left' est désactivé */
	
	/* Animation de glissement */
	transform: translateX(100%); /* On le cache complètement à droite de l'écran */
	transition: transform 0.3s ease-out; /* Transition fluide de 0.3 secondes */
	
	display: block !important; /* On le laisse techniquement "affiché" pour l'animer */
	box-shadow: -5px 0 15px rgba(0,0,0,0.5); /* Ombre portée vers la gauche */
}

/* La classe qui sera ajoutée par le JavaScript pour ouvrir le menu */
.w3-sidebar.is-open {
	transform: translateX(0); /* On le ramène à sa position normale */
}

.sidebar-inner {
	padding: 20px;
	font-family: 'Russo One', sans-serif;
	color: #FFFFFF;
}

/* Bouton fermer */
.sidebar-close {
	text-align: right;
	margin-bottom: 10px;
}

.btn-close {
	color: red;
	font-size: 22px;
	font-weight: bold;
	background: none; border: none; cursor: pointer;
}

/* Titres de sections (ex: SEARCH, H&L MEDIA) */
.sidebar-label {
	color: #AAAAAA;
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 12px;
	margin-top: 25px;
}

/* Listes de liens */
.sidebar-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-links li {
	margin-bottom: 2px; /* L'espace que faisaient tes <br /> */
}

.sidebar-links a {
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	transition: opacity 0.2s;
	display: block;
}

.sidebar-links a:hover {
	opacity: 0.7;
}




/* 1. Le conteneur parent (Row) */
.w3-row {
	display: flex;
	flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur mobile */
	width: 100%;
	box-sizing: border-box;
}

/* Nettoyage des anciens hack "clearfix" devenus inutiles avec Flex */
.w3-row:before, .w3-row:after {
	content: none !important; 
}

/* 2. La base des colonnes */
.w3-col {
	display: block;
	width: 100%; /* Par défaut, pleine largeur (mobile-first) */
	box-sizing: border-box;
}

/* 3. Les tailles pour tablettes (Medium - min 601px) */
@media (min-width:601px) {
	.m4 { width: 33.33333%; }
	.m8 { width: 66.66666%; }
	.m12 { width: 100%; }
	/* Ajoute les autres m1..m11 si tu les utilises */
}

/* 4. Les tailles pour ordinateurs (Large - min 993px) */
@media (min-width:993px) {
	.l4 { width: 28%; }
	.l8 { width: 72%; }
}



.sidebar-content { padding: 40px; }
.sidebar-link { 
	display: block; 
	padding: 15px 0; 
	font-size: 24px; 
	font-family: 'Russo One'; 
	color: #fff; 
	border-bottom: 1px solid #222; 
}

.main-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Sidebar collante (sticky) */
.sticky-sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 10px;
	/* Assure que le sticky fonctionne si le parent n'a pas d'overflow caché */
	align-self: start; 
}

/* Conteneur principal de l'image */
.article-hero {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto; /* Centrage */
	line-height: 0; /* Évite les espaces vides sous l'image */
	background-color: #FFFFFF;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	box-sizing: border-box;
	border-radius: 20px 20px 0px 0px;
}

/* L'image elle-même */
.article-hero img {
	display: block;
	width: 100%;
	height: auto;
	/* On garde tes coins arrondis seulement en haut */
	border-radius: 20px 20px 0 0; 
}

/* Le crédit photo en overlay */
.article-hero figcaption {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.72);
	color: #ffffff;
	padding: 5px 8px;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2;
	border-radius: 3px;
}

/* Le conteneur supérieur (Titre + Fil d'Ariane) */
.article-top {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	padding: 15px 20px 5px 20px; /* On réduit le bas pour approcher du header auteur */
	box-sizing: border-box;
}

/* Style du titre H1 */
.article-top h1 {
	margin: 0; /* On gère l'espace via le conteneur */
	font-family: 'Russo one', sans-serif;
	color: #000;
}

/* Style du fil d'Ariane */
.breadcrumb {
	font-style: italic;
	color: #777;
	font-size: 14px;
	margin: 8px 0 10px 0;
	display: flex;
	flex-wrap: wrap; /* Évite que ça dépasse sur mobile */
	align-items: center;
}

/* Les séparateurs | */
.breadcrumb .sep {
	padding: 0 10px;
	color: #ccc; /* Un gris plus doux pour les barres */
	font-style: normal;
}

/* Les liens dans le fil d'Ariane */
.breadcrumb a {
	text-decoration: none;
	color: #777;
}

.breadcrumb a:hover {
	text-decoration: underline;
}


/* Layout Flex pour aligner photo et texte */
.author-flex {
	display: flex;
	align-items: center;
	padding-top:15px;
}

/* Le carré de la photo */
.author-photo {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 15px;
	border: 2px solid #fff;
	overflow: hidden;
	flex-shrink: 0;
	/* On garde l'ombre dynamique via CSS variable ou inline si nécessaire */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le bloc texte à droite */
.author-info {
	margin-left: 20px;
}

.author-name {
	font-size: 20px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.author-date {
	display: flex;
	align-items: center;
	color: #5f6368;
	font-size: 14px;
	margin-top: 4px;
}


/* Le conteneur unique centré */
.article-body {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 0 20px 15px 20px;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	box-sizing: border-box;
}

/* Style de tous les paragraphes à l'intérieur */
.article-body p {
	font-size: 20px;
	line-height: 26px;
	font-family: 'Arial', sans-serif;
	color: #000000;
	text-align: left;
	margin: 0 0 15px 0; /* Ajoute un espace naturel entre les paragraphes */
}

/* Ajoute les 15px de padding-top uniquement au premier paragraphe */
.article-body p:first-child {
	padding-top: 15px;
}

/* Zone Média (Vidéo + Pub) */
.article-media {
	margin: 30px 0; /* Espace aéré au dessus et en dessous des médias */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px; /* Espace entre la vidéo et la pub */
}

/* Container vidéo pour limiter la largeur */
.video-wrapper {
	max-width: 625px;
	width: 100%;
}

/* Container Pub */
.ad-container {
	width: 100%;
	display: flex;
	justify-content: center;
	min-height: 90px; /* Optionnel : réserve l'espace pour éviter les sauts de page au chargement */
}


/* Centrage extérieur et espacement */
.related-wrapper {
	display: flex;
	justify-content: center;
	padding: 30px 20px 10px 20px;
	width: 100%;
	box-sizing: border-box;
}

/* La boîte principale */
.related-box {
	max-width: 500px;
	width: 100%;
	background-color: #FAFAFA;
	border: 2px solid #000000; /* Ton bleu Rangers */
	border-radius: 20px;
	
	box-sizing: border-box;
}

.related-header {
	border-radius: 18px 18px 0px 0px;
	background-color: #000000;
	padding: 15px 20px;
	text-align: center;
	color: var(--white);
	border-bottom: 2px solid var(--second-color); /* Ligne rouge Rangers pour le contraste */
}

.rel-subtitle {
	display: block;
	font-size: 11px;
	letter-spacing: 2px;
	opacity: 0.8;
	margin-bottom: 4px;
	font-family: Arial, sans-serif;
}

.rel-main-title {
	font-family: 'Russo One', sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
}

/* Le titre "Previously on..." */
.related-title {
	text-align: center;
	font-size: 18px;
	font-family: 'Arial', sans-serif;
	font-weight: normal;
	padding: 10px 0;
	margin: 0;
	color: #333;
}

.related-title strong {
	font-weight: bold;
}

/* La liste de liens */
.related-list {
	padding: 10px 20px 20px 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Chaque ligne de lien avec la bordure séparatrice */
.related-list li {
	padding: 12px 0;
	border-top: 1px solid #DDDDDD; /* Remplace ton ancienne classe .btd */
}
.related-list li:first-child {
	border-top: none;
}

/* Le lien lui-même */
.related-list li a {
	display: block; /* Rend toute la zone cliquable */
	line-height: 1.4;
	font-size: 16px;
}
.related-list li:hover {
	background-color: #f0f4f8; /* Un très léger bleu au survol */
	cursor: pointer;
}


/* --- DESIGN SONDAGE RANGERS --- */
.poll-card {
	width: 100%;
	max-width: 400px;
	margin: 25px auto;
	background: #ffffff;
	border: 2px solid var(--second-color); /* Bleu Rangers */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.poll-header {
	background-color: var(--second-color); /* Bleu Rangers par défaut */
	color: #ffffff;
	text-align: center;
	font-family: 'Russo One', sans-serif;
	font-size: 26px;
	padding: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 2px solid var(--second-color);
}

.poll-content {
	padding: 20px;
}

.poll-info-box {
	background: #F8F9FA;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 20px;
	border: 1px solid #eee;
}

.poll-meta {
	font-size: 12px;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.poll-meta span { color: #666; font-size: 12px; font-weight: bold; } /* Séparateur rouge */

.poll-article-link {
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	border-top: 1px solid #ddd;
	padding-top: 10px;
	color: #0066BB;
}

.poll-question {
	font-family: 'Russo One', sans-serif;
	font-size: 22px;
	line-height: 1.2;
	text-align: center;
	margin: 15px 0 25px 0;
	color: #000;
}

/* Boutons de vote */
.poll-options {
	list-style: none;
	padding: 0;
	margin: 0;
}

.poll-options li {
	margin-top: 12px;
}

.poll-btn {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border: 1.5px solid var(--second-color);
	border-radius: 8px;
	font-size: 15px;
	color: var(--second-color);
	font-weight: bold;
	background: #fff;
	transition: all 0.2s ease;
	text-align: center;
}

.poll-btn:hover {
	background: var(--second-color);
	color: #fff;
	transform: translateY(-2px);
}

/* Résultats */
.result-row {
	display: grid;
	grid-template-columns: 1fr 40px 65px;
	align-items: center;
	border-bottom: 1px solid var(--second-color);
	border-right: 1px solid var(--second-color);
	border-left: 1px solid var(--second-color);
	padding: 12px 8px;
	font-size: 14px;
}

.result-row:first-child { border-top: 1px solid var(--second-color); }
.result-row:last-child { border-bottom: 1px solid var(--second-color); }

/* Style pour la réponse choisie par l'utilisateur */
.result-row.is-winner { 
	background: #f0f4f8; 
	font-weight: bold;
	border-left:3px solid var(--second-color);
}

.res-txt { color: #000; color: var(--second-color); font-weight: bold; }
.res-qty { color: #000; text-align: right; font-size: 12px; font-weight: 500; }
.res-pc { text-align: right; color: var(--second-color); font-size: 12px; font-weight: 500; }

/* Conteneur pour le centrage */
.poll-footer {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	padding-bottom: 15px;
}

/* Style du bouton "More Polls" */
.poll-btn-more {
	display: inline-block;
	background-color: var(--second-color); /* Bleu Rangers */
	color: #FFFFFF !important;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	border-radius: 50px; /* Forme pilule moderne */
	transition: all 0.3s ease;
	border: 2px solid var(--second-color);
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Effet au survol */
.poll-btn-more:hover {
	background-color: var(--second-color); /* Rouge Rangers au survol */
	border-color: var(--second-color);
	transform: translateY(-2px); /* Petit effet de levier */
	box-shadow: 0 6px 12px rgba(206, 17, 38, 0.2);
	color: #FFFFFF !important;
}

/* --- CTA SOCIAL DANS LE SONDAGE (POST-VOTE) --- */

.poll-voted-footer {
	margin-top: 20px;
	padding: 0 15px 15px 15px;
	background-color: #f9f9f9;
	border-radius: 8px;
	border: 1px dashed var(--second-color);
	text-align: center;
}

.poll-voted-footer .cta-text {
	font-size: 14px;
	color: #333;
	font-weight: bold;
	margin-bottom: 10px !important;
	font-family: Arial, sans-serif;
}

.btn-poll-social {
	display: inline-block;
	background-color: #1877F2; /* Bleu Facebook officiel */
	color: #ffffff !important;
	padding: 10px 15px;
	font-family: 'Russo One', sans-serif;
	font-size: 11px;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.btn-poll-social:hover {
	background-color: var(--second-color); /* Retour au bleu Rangers au survol */
	transform: scale(1.03);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* On ajuste l'espacement des résultats pour laisser de la place au CTA */
.poll-results {
	padding-bottom: 5px;
}



/* Container Pub */
.ad-container-bottom {
	padding-bottom: 20px;
	display: flex;
	justify-content: center;
}

#div_last_10 {
	min-height: 10px;
	width: 100%;
}

/* On cible l'élément généré par Twitter */
.twitter-tweet {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 25px !important;
	margin-bottom: 25px !important;
}


/* #################################################################################
	FOOTER
##################################################################################*/
/* Le fond noir qui fait 100% de la largeur */
.site-footer {
	width: 100%;
	background-color: #000000;
	margin: 0;
	padding: 30px 0; /* On met le padding vertical ici */
}

/* Le conteneur interne qui centre le texte */
.footer-container {
	width: 100%;
	max-width: 1200px; /* Aligné sur ta main-container de 1200px */
	margin: 0 auto;
	padding: 0 20px; /* Padding de sécurité sur les côtés */
	text-align: center;
	font-family: 'Russo One', sans-serif;
	color: #FFFFFF;
	box-sizing: border-box;
}

/* --- Reste des styles (inchangés mais inclus pour rappel) --- */

.footer-logo a { color: #FFFFFF; text-decoration: none; font-size: 18px; }
.footer-copyright { font-size: 14px; opacity: 0.8; margin: 10px 0 20px 0; }

.footer-nav, .footer-sub-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 10px;
}

.footer-nav a { color: #FFFFFF; text-decoration: none; font-size: 14px; }
.footer-sub-nav a { color: #888888; font-size: 12px; text-decoration: none; }

/* Séparateurs automatiques */
.footer-nav a:not(:last-child)::after, 
.footer-sub-nav a:not(:last-child)::after {
	content: "·";
	margin-left: 15px;
	color: #444;
}

/* --- COMPACT FACEBOOK SIDEBAR 2026 --- */

.fb-sidebar-container {
	width: 100%;
	padding: 0;
}

.fb-sidebar-card {
	width: 100%;
	background: var(--white);
	border: 2px solid #000000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.fb-sidebar-header {
	background-color: #000000;
	padding: 12px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	border-bottom: 3px solid var(--second-color);
}

.fb-header-text {
	text-align: left;
}

.fb-header-text span {
	display: block;
	font-size: 9px; /* Plus petit pour laisser la place au titre */
	letter-spacing: 1.5px;
	color: rgba(255,255,255,0.9);
	font-family: Arial, sans-serif;
	font-weight: bold;
}

.fb-header-text h3 {
	font-family: 'Russo One', sans-serif;
	font-size: 20px; /* On met le chiffre en avant */
	color: #fff;
	margin: 0;
	line-height: 1;
}

.fb-sidebar-content {
	padding: 15px; /* Padding réduit pour le look mince */
}

/* La rangée de boutons */
.fb-btn-row {
	display: flex;
	gap: 8px; /* Espace entre les deux boutons */
}

.fb-btn {
	flex: 1; /* Chaque bouton prend 50% de la largeur */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 5px;
	font-family: 'Russo One', sans-serif;
	font-size: 11px; /* Réduit pour éviter le retour à la ligne */
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.2s ease;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap; /* Force le texte sur une ligne */
}

.fb-btn-page {
	background: transparent;
	border: 1.5px solid var(--second-color);
	color: var(--second-color) !important;
}
.fb-btn-page:hover {
	background: var(--second-color);
	border-color: var(--second-color);
	transform: translateY(-2px);
	color: #fff !important;
}

.fb-btn-group {
	background: var(--second-color);
	border: 1.5px solid var(--second-color);
	color: #fff !important;
}

.fb-btn-group:hover {
	background: var(--second-color);
	border-color: var(--second-color);
	transform: translateY(-2px);
}


/* --- TEAM GRID & CARDS --- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	padding: 20px 0;
}

.author-card {
	background: #fff;
	border-radius: 15px;
	border: 1px solid var(--second-color);
	overflow: hidden;
	transition: all 0.3s ease;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 20px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.author-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 20px rgba(0,0,0,0.08);
	border: 1px solid var(--second-color);
}

.author-photo-wrapper {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 3px solid var(--second-color);
	padding: 5px;
	margin-bottom: 20px;
}

.author-photo-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.author-card h2 {
	font-family: 'Russo One', sans-serif;
	color: var(--second-color);
	font-size: 22px;
	margin: 10px 0 5px 0;
	text-transform: uppercase;
}

.author-role {
	font-size: 14px;
	color: var(--second-color); /* Rouge Rangers */
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.btn-view-profile {
	font-size: 12px;
	font-weight: bold;
	color: #888;
	border: 1px solid #ddd;
	padding: 8px 15px;
	border-radius: 20px;
	transition: all 0.2s;
}

.author-card:hover .btn-view-profile {
	background: var(--second-color);
	color: #fff;
	border-color: var(--second-color);
}


/* COLLABORATORS*/
.profile-container {
	background: #fff;
	border-radius: 20px;
	padding: 40px;
	margin-bottom: 40px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
}

.profile-avatar img {
	border-radius: 50%;
	border: 4px solid var(--second-color);
	padding: 5px;
	background: #fff;
	margin-bottom: 20px;
}

.profile-info h1 {
	font-family: 'Russo One', sans-serif;
	color: var(--second-color);
	margin: 0;
	font-size: 32px;
}

.profile-role {
	font-weight: bold;
	color: var(--second-color);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.profile-bio {
	max-width: 800px;
	line-height: 1.8;
	color: #444;
	text-align: left;
	font-size: 17px;
}

.profile-socials {
	display: flex;
	gap: 15px;
	margin: 20px 0;
}

.social-icon-link {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f4f8;
	border-radius: 50%;
	transition: 0.3s;
}

.social-icon-link:hover {
	background: var(--second-color);
	color: #fff;
}



/* --- SEARCH TABS NAVIGATION --- */
.search-nav-tabs {
	display: flex;
	border: 1px solid var(--second-color);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 25px;
	max-width: 500px;
	background: #fff;
}

.search-tab-item {
	flex: 1;
	text-align: center;
	padding: 12px;
	text-decoration: none;
	color: var(--second-color);
	font-weight: bold;
	font-size: 13px;
	border-right: 1px solid var(--second-color);
	transition: all 0.3s ease; /* Effet de transition fluide */
}

/* On enlève la bordure au dernier élément */
.search-tab-item:last-child {
	border-right: none;
}
.search-tab-item:hover:not(.active) {
	background: var(--second-color);
	color: #fff;
}

/* L'élément actif (KEYWORDS) */
.search-tab-item.active {
	background: var(--second-color);
	color: #fff;
	cursor: default;
}

/* Boutons de sélection de date */
.date-selector-btn, .month-selector-btn {
	display: block;
	text-align: center;
	padding: 8px 15px;
	background: #f4f7f9;
	color: var(--second-color);
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
	border-radius: 6px;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.date-selector-btn:hover, .month-selector-btn:hover {
	background: var(--second-color);
	color: #fff;
}

.date-selector-btn.active, .month-selector-btn.active {
	background: var(--second-color); /* Rouge pour l'élément sélectionné */
	color: #fff;
	cursor: default;
}


/* Ajustement pour mobile très étroit */
@media (max-width: 350px) {
	.fb-btn { font-size: 9px; }
}


/* --- MODERN RANGERS QUOTE --- */
.quote-content {
	margin: 30px 0;
	padding: 30px;
	font-size: 20px;
	line-height: 26px;
	font-family: 'Arial', sans-serif;
	color: #000000;
	text-align: left;
	background-color: #f3f3f3;
	border-left: 6px solid var(--second-color);
	border-radius: 15px;
	position: relative;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.03);
}


/* --- DIRECTORY HUB --- */
.directory-container {
	padding: 10px 0;
}

.dir-section {
	margin-bottom: 40px;
}

.dir-section-title {
	font-family: 'Russo One', sans-serif;
	font-size: 20px;
	color: var(--second-color);
	text-transform: uppercase;
	border-bottom: 2px solid var(--second-color);
	padding-bottom: 8px;
	margin-bottom: 20px;
}

.dir-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.dir-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background: #f8f9fa;
	border: 1px solid #eee;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	color: #333;
	text-decoration: none;
}

.dir-link:hover {
	background: var(--second-color);
	color: #fff !important;
	border-color: var(--second-color);
	transform: translateX(5px);
}

.dir-link .count {
	font-size: 12px;
	color: #888;
	font-weight: normal;
}

.dir-link:hover .count {
	color: rgba(255,255,255,0.8);
}

/* Style spécial pour l'élément actif */
.dir-link.active {
	background: #f0f4f8;
	border-left: 4px solid var(--second-color);
	color: var(--second-color);
	font-weight: bold;
}

/* Mise en avant des Rangers */
.rangers-highlight {
	background: var(--second-color);
	border: 1px solid var(--second-color);
	color: #fff;
}

.rangers-highlight:hover {
	background: var(--second-color);
	border-color: var(--second-color);
}


/* --- AUTHOR FOOTER BOX --- */
.author-footer-box {
	background-color: #f9f9f9;
	border: 1px solid #CCCCCC;
	border-radius: 15px;
	padding:20px;
	margin: 30px auto;
	max-width: 800px;
}
.author-footer-content {
	display: flex;
	gap: 20px;
	align-items: center;
}
.author-footer-info h3 {
	font-size: 22px;
	color: var(--second-color);
	margin-bottom: 2px;
}
.author-footer-role {
	display: block;
	font-size: 13px;
	font-weight: bold;
	color: var(--second-color);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.author-footer-info p {
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #555;
}
/* Mobile Responsive */
@media (max-width: 600px) {
	.author-footer-content { flex-direction: column; text-align: center; }
	.author-footer-links { justify-content: center; }
}


/* --- PUSHDOWN AD (EFFECT RADIO-CANADA) --- */
.pushdown-wrapper {
    width: 100%;
    background-color: #f4f4f4; /* Gris neutre */
    overflow: hidden;
    /* État initial : fermé */
    max-height: 0; 
    transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 0 solid #ddd;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Classe ajoutée par JS après le délai pour OUVRIR */
.pushdown-wrapper.is-open {
    max-height: 350px; /* Ajustez selon la hauteur de votre pub */
}

/* Classe ajoutée par JS au scroll pour FERMER */
.pushdown-wrapper.collapsed {
    max-height: 0 !important;
    border-bottom-width: 0 !important;
    margin-bottom: 0 !important;
}

.pushdown-container {
    padding: 20px 0;
    position: relative;
}


/* Responsive */
@media (max-width: 600px) {
	.dir-grid {
		grid-template-columns: 1fr 1fr; /* 2 colonnes sur mobile pour garder de la hauteur */
		gap: 8px;
	}
	.dir-link {
		font-size: 13px;
		padding: 8px 10px;
	}
}



#ppuubb_1_mobile{
	height: 300px !important;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: url('/i/ads.jpg'), #F4F4F4;
	background-position: center center;
	background-repeat: no-repeat;
}

#ppuubb_5{
	height: 620px !important;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: url('/i/ads.jpg'), #F4F4F4;
	background-position: center center;
	background-repeat: no-repeat;
}

@media(min-width:768px){
	#div-gpt-ad-3176421-OOP,
	#ppuubb_2,
	#ppuubb_3,
	#ppuubb_4 {
		height: 300px !important;
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: url('/i/ads.jpg'), #F4F4F4;
		background-position: center center;
		background-repeat: no-repeat;
	}
}
@media(max-width:768px){
	#div-gpt-ad-3176421-OOP,
	#ppuubb_2,
	#ppuubb_3,
	#ppuubb_4{
		height: 620px !important;
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: url('/i/ads.jpg'), #F4F4F4;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	#div-gpt-ad-3176421-1-mobile,
	#div-gpt-ad-3176421-2,
	#div-gpt-ad-3176421-3,
	#div-gpt-ad-3176421-4{
		position: sticky !important;
		top:10px;
	}
}

/* --- 10. OPTIMISATION MOBILE (HEADER & LCP) --- */
@media (max-width: 768px) {
	
	.header-container {	padding: 0;	}

	.new_logo {	transform: scale(0.90);}

	.new_menu {	transform: scale(0.80);	transform-origin: right center;	margin-top: -5px; margin-right:15px;}

	.disclaimer { padding: 6px 10px !important; font-size: 11px !important;	line-height: 1.2; }

	/* On cache le titre H1 redondant sur mobile (celui qui répète le nom du site) */
	/* Note : Assure-toi que c'est bien ce H1 là que tu veux cacher */
	.main-wrapper h1:first-of-type {
		line-height:26px;
	}

	/* On remonte tout le bloc de contenu pour voir l'image/article plus vite */
	.main-wrapper {
		margin-top: 15px !important;
		padding: 0 10px 0 10px !important;
	}

	.w3-col.l8 { padding-left: 0px !important; padding-right: 0px !important; }
	
	.quote-content { padding: 20px;	margin: 20px 0; }
	
	.pushdown-wrapper.is-open { max-height: 280px; }
}