/* ==========================================================================
   DirectoFutebol.com - couche responsive
   Chargee APRES css2.css (et css3.css / style.css sur les pages live).
   Ne modifie pas l'aspect sur ordinateur ; adapte la mise en page
   sur tablette (< 961px) et mobile (< 641px).
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Medias fluides (css2.css bloquait les images a 600px) */
img { max-width: 100%; height: auto; }
iframe, embed, object, video { max-width: 100%; }

/* --------------------------------------------------------------------------
   Conteneur de page (remplace <div align="center"> + largeurs fixes)
   -------------------------------------------------------------------------- */
.page-wrap {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: left;
}

/* En-tete : logo + banniere */
.site-header {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 110px;
	padding: 0 4px;
}
.site-logo { flex: 0 0 202px; }
.site-logo img { display: block; }
.site-header-ad { flex: 1 1 auto; min-width: 0; text-align: center; }

/* --------------------------------------------------------------------------
   Mise en page 2 colonnes (remplace la table width="936")
   -------------------------------------------------------------------------- */
.layout {
	display: flex;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	background: #fff;
}
.col-main {
	display: block;
	flex: 1 1 auto;
	min-width: 0;          /* indispensable pour que le contenu puisse retrecir */
}
.col-side {
	display: block;
	flex: 0 0 300px;
	width: 300px;
}

/* Les blocs de news avaient des largeurs fixes (640 / 630px) */
.flux, #fluxindex { width: auto; max-width: 100%; }
.dte, .dte2 { width: auto; max-width: 100%; }
.flux table, #fluxindex table { max-width: 100%; }

/* Pied de page (remplace la table width="1000") */
.site-footer { display: block; width: 100%; padding: 6px 8px; margin-top: 10px; }
.site-footer .sep { color: #ddd; font-family: Verdana, sans-serif; font-size: 10px; padding: 0 2px; }

/* --------------------------------------------------------------------------
   Menu : aspect ordinateur (reprend css2.css, sans la table englobante)
   -------------------------------------------------------------------------- */
.cadremenuhaut {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	min-height: 30px;
}
#dropList { width: 100%; max-width: 998px; }
.menu-toggle { display: none; }
.sub-toggle { display: none; }

/* Formulaires (page contact) */
input[type="text"], input[type="email"], textarea { max-width: 100%; }

/* Tableaux larges dans le contenu : defilement horizontal plutot que debordement */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   TABLETTE et MOBILE  (<= 960px)
   ========================================================================== */
@media (max-width: 960px) {

	/* ---- Menu burger ---- */
	.cadremenuhaut { background-size: auto 100%; }

	#dropList {
		height: auto;
		width: 100%;
		max-width: none;
		border-width: 1px 0 0 0;
		font-size: 14px;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 44px;
		padding: 0 14px;
		border: 0;
		background: transparent;
		color: #fff;
		font: bold 15px arial, verdana, sans-serif;
		cursor: pointer;
		text-align: left;
	}
	.menu-toggle-bars,
	.menu-toggle-bars::before,
	.menu-toggle-bars::after {
		display: block;
		width: 22px;
		height: 3px;
		background: #fff;
		border-radius: 2px;
		content: "";
		position: relative;
		transition: transform .2s, opacity .2s;
	}
	.menu-toggle-bars::before { position: absolute; top: -7px; }
	.menu-toggle-bars::after  { position: absolute; top: 7px; }
	.menu-open .menu-toggle-bars { background: transparent; }
	.menu-open .menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
	.menu-open .menu-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

	#dropList ul#menu {
		display: none;
		padding: 0;
		white-space: normal;
		background: #2d2d2d;
	}
	#dropList.menu-open ul#menu { display: block; }

	#dropList ul#menu li.level1-li {
		float: none;
		height: auto;
		padding: 0;
		margin: 0;
		position: relative;
		border-top: 1px solid #444;
	}

	#dropList ul#menu li.level1-li a.level1-a,
	#dropList ul#menu li.sub a.level1-a {
		float: none;
		display: block;
		height: auto;
		line-height: 44px;
		padding: 0 56px 0 16px;
		border: 0;
		color: #eee;
		background: none;
		font-size: 15px;
	}

	/* on neutralise les effets de survol prevus pour la souris */
	#dropList ul#menu li.level1-li a.level1-a:hover,
	#dropList ul#menu li.level1-li:hover a.level1-a,
	#dropList ul#menu li.sub a.level1-a:hover,
	#dropList ul#menu li.sub:hover > a.level1-a {
		height: auto;
		border: 0;
		color: #fff;
		background: #444;
	}

	/* Bouton +/- des sous-menus (ajoute par responsive-menu.js) */
	.sub-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 44px;
		border: 0;
		border-left: 1px solid #444;
		background: transparent;
		color: #fff;
		font: bold 22px/44px arial, sans-serif;
		cursor: pointer;
	}
	.sub-toggle::before { content: "+"; }
	li.sub-open > .sub-toggle::before { content: "\2212"; }

	/* Sous-menus : empiles sous leur rubrique, fermes par defaut */
	#dropList ul#menu li div.listHolder,
	#dropList ul#menu :hover div.listHolder,
	#dropList ul#menu a:hover div.listHolder {
		position: static;
		left: auto;
		top: auto;
		display: none;
		width: auto;
		border: 0;
		background: #f4f4f4;
	}
	#dropList ul#menu li.sub-open > div.listHolder { display: block; }

	#dropList ul#menu div.listHolder div.listCol {
		float: none;
		width: auto;
		padding: 4px 0;
	}
	#dropList ul#menu div.listHolder div.listCol ul li {
		line-height: 40px;
		border-bottom: 1px solid #e2e2e2;
	}
	#dropList ul#menu div.listHolder div.listCol ul li a {
		display: block;
		padding-left: 32px;
		font-size: 14px;
		background-position: 18px center;
	}

	/* ---- Mise en page : la colonne de droite passe sous le contenu ---- */
	.layout { flex-direction: column; }
	.col-main, .col-side { width: 100%; flex: 1 1 auto; }
	.col-side { padding: 10px 0; border-top: 1px solid #ddd; }

	.flux, #fluxindex { padding: 6px 8px; }
}

/* ==========================================================================
   MOBILE  (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {

	body { font-size: 15px; }

	/* En-tete : logo centre, banniere en dessous */
	.site-header {
		flex-direction: column;
		min-height: 0;
		padding: 6px 0 0;
	}
	.site-logo { flex: 0 0 auto; }
	.site-logo img { width: 160px; }
	.site-header-ad { width: 100%; }

	/* Textes des news un peu plus grands et zones cliquables plus hautes */
	.flux, .flux a, .flux h3 a,
	#fluxindex, #fluxindex a { font-size: 14px; }
	.flux a, #fluxindex a { line-height: 1.6; }
	.descri { font-size: 14px; text-align: left; }
	.flux img { padding: 6px; }
	.flux .descriIMG { width: auto; max-width: 40%; }

	/* Tableaux du contenu : pleine largeur, cellules qui passent a la ligne */
	.col-main table[width],
	.col-main td[width] { width: auto !important; }
	.col-main table { width: 100% !important; }
	.col-main td, .col-main th { word-break: break-word; }

	/* Page Parcerias : une colonne */
	#pagePartenaire,
	#pagePartenaire tbody,
	#pagePartenaire tr,
	#pagePartenaire td { display: block; width: 100% !important; }
	#pagePartenaire td:empty { display: none; }
	#pagePartenaire a { font-size: 14px; line-height: 2; }

	/* Pagination plus facile a toucher */
	div.pagination a, div.pagination span { display: inline-block; padding: 6px 10px; margin: 2px; }

	/* Formulaire de contact */
	.form-contact table { width: auto !important; }
	input[type="text"], input[type="email"], textarea { width: 100%; font-size: 16px; }

	/* Pied de page */
	.site-footer, .site-footer a, .partenaires3 a { font-size: 13px; line-height: 1.9; }

	/* Blocs de largeur fixe de la colonne droite */
	#sociaux, #sociauxPartager { max-width: 100%; }
}

/* Bloc de partage (sociaux_match_light.php) */
.leftclear { clear: left; }
.social_light { max-width: 100%; }

/* Tableaux generes par pagi21.php (accueil) */
.dte-table { width: 100%; max-width: 520px; }
.ban-images { width: 100%; max-width: 332px; }