/**
 * Micro-site Mondial 2026 — styles spécifiques.
 *
 * Le gros des styles vient de cst-microsite.css (chargé par le loader avant ce
 * fichier), mais ce CSS partagé ne cible que .can2025-class / .can2023-class /
 * .qatar2022-class. On reproduit ici les règles équivalentes de mise en page
 * (header superposé, menu, footer, vignettes) pour .mondial2026-class.
 *
 * Couleurs/visuels à ajuster une fois la maquette XD finale exportée
 * (notamment l'image de header et le fond du footer).
 */

/* ----- Motif décoratif en filigrane sur toute la page ----- */
.mondial2026-class div#page::before { content: ""; background: url(https://s3.eu-west-1.amazonaws.com/files.lebrief.ma/uploads/2025/11/25115410/Motif.png); width: 100%; height: 100%; position: absolute; opacity: .05; }

/* ----- Sous-menus de navigation (flèches, ouverture/fermeture) ----- */
.mondial2026-class i.fas.fa-angle-down.submenu-toggle-icon { display: none !important; }
.mondial2026-class li.menu-item.has-children { position: relative; }
.mondial2026-class i.fas.fa-angle-down.submenu-toggle-icon { width: 40px; display: grid; justify-content: center; align-items: center; position: absolute; right: 0px; top: 0px; cursor: pointer; padding: 10px 20px; transition: transform .5s ease; }
.mondial2026-class ul.sub-nav.hover-style-bg.level-arrows-on.open { position: relative; visibility: visible; opacity: 1; }
.mondial2026-class .submenu-open i.fas.fa-angle-down.submenu-toggle-icon { transform: rotate(180deg); }
.mondial2026-class .author div.lines-button.x:nth-of-type(1),
.mondial2026-class div.lines-button.x:nth-of-type(1) { display: block; }

/* ----- Header : superposition de l'image et de la barre (logo + menu) ----- */
.mondial2026-class header.header-bar { display: flex; flex-direction: column; justify-content: flex-start; z-index: 9401; position: relative; }
.mondial2026-class div#myheader { background-repeat: no-repeat; background-size: 100%; z-index: 9401; position: fixed; top: 0px; width: 100%; }
.mondial2026-class header.main-header-bar { display: grid; align-items: center; justify-content: start; height: 212px; }
@media screen and (max-width: 775px) {
	.mondial2026-class header.main-header-bar { height: 109px; }
	.mondial2026-class .header-space-cst { height: 109px !important; }
}
.mondial2026-class header.main-header-bar > div.row { position: absolute; left: 16%; }

/* ----- Mobile (équiv. media query max-width:775px de cst-microsite.css) -----
   Sans ce reset, "left: 16%" (~62px) s'ajoute au "margin-left: 76px" hérité de la
   règle non scopée de cst-microsite.css, et fait déborder la barre logo+menu hors
   du viewport (vérifié : right: 425px sur un viewport de 390px). Sur CAN2025, le
   "left" calculé vaut 0px en mobile — on reproduit ce comportement ici. ----- */
@media screen and (max-width: 775px) {
	.mondial2026-class header.main-header-bar > div.row { left: 0; }
}

/* ----- Logo : taille fixe (équiv. règle globale ".Lebrief.logo img" de css-main-Lebrief.css,
   non chargée sur ce micro-site). !important nécessaire pour battre la règle non scopée
   "header.header-bar img { width: auto !important; height: 115px; }" du media query mobile
   de cst-microsite.css, qui sinon fait déborder le logo (336x115px constaté sur 390px). ----- */
.mondial2026-class .Lebrief.logo img { width: 194px !important; height: 59px !important; margin: auto; object-fit: contain; }

/* ----- Barre logo+hamburger : fond noir avec border-radius ----- */
.mondial2026-class .top-line-left.empty-widgets { background-color: black; padding: 10px 0; border-radius: 23px; }

@media screen and (max-width: 775px) {
	.mondial2026-class .top-line-left.empty-widgets { max-width: 150px; display: flex; align-items: center; padding: 0px; }
	.mondial2026-class .top-line-left.empty-widgets .Lebrief.logo img { width: auto !important; height: 30px !important; }
	.mondial2026-class .top-line-left.empty-widgets .lines-button { transform: scale(0.7); transform-origin: center; }
   .mondial2026-class .top-line-left.empty-widgets .menu-toggle { margin-left:0px !important}
}

/* ----- Menu desktop dans la barre header -----
   NB : si le widget de menu pointe encore vers le menu "menu-can-2025" dupliqué
   (id #menu-menu-can-2025), ces règles s'appliquent aussi pour ne rien casser
   visuellement le temps de basculer vers un menu propre à Mondial 2026. */
.mondial2026-class ul#menu-menu-mondial2026,
.mondial2026-class ul#menu-menu-can-2025 { border: 1px solid #d8d8d8; padding: 10px; border-radius: 50px; display: inline-flex; justify-content: space-around; width: 100%; align-items: flex-end; }
.mondial2026-class ul#menu-menu-mondial2026 li.menu-item,
.mondial2026-class ul#menu-menu-can-2025 li.menu-item { display: inline-block; }

/* ----- Footer : mise en page des widgets (logo / menu / réseaux sociaux) -----
   La structure réelle est composée de 3 widgets HTML/menu côte à côte
   (#custom_html-20 logo, #gksm-custom-menu-widget-8 menu, #custom_html-19 liens
   sociaux). On les aligne en ligne, comme sur le footer CAN2025. */
/* TEMPORAIRE : reprend l'image de fond du footer CAN2025 (comme pour header_image dans
   config.php) en attendant le visuel Mondial 2026 final (maquette XD). */
.mondial2026-class footer#footer { margin: initial; padding-bottom: 70px; color: #fff; background-image: url(https://files.lebrief.ma/uploads/2026/06/09111253/Footer_cdm2026_microsite.png); background-size: cover; background-repeat: no-repeat; background-position: center center; }
.mondial2026-class footer#footer div.wf-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; gap: 20px; padding: 30px 0; }
.mondial2026-class footer#footer div.wf-container > div.widget { flex: 1 1 30%; text-align: center; }
.mondial2026-class footer#footer .widgettitle { display: none; }

/* !important nécessaire : cst-microsite.css force "ul#menu-menu-can-2025 { display: none !important; }"
   pour masquer ce menu dupliqué sur le site CAN2025. On doit le réafficher ici pour Mondial2026. */
.mondial2026-class footer#footer ul#menu-menu-mondial2026,
.mondial2026-class footer#footer ul#menu-menu-can-2025 { display: inline-flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 15px; list-style: none; margin: 0; padding: 0; }
.mondial2026-class footer#footer ul#menu-menu-mondial2026 li,
.mondial2026-class footer#footer ul#menu-menu-can-2025 li { display: inline-block; }
.mondial2026-class footer#footer ul#menu-menu-mondial2026 li a,
.mondial2026-class footer#footer ul#menu-menu-can-2025 li a { color: #fff; }

.mondial2026-class footer#footer .social-media { display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 20px; }
.mondial2026-class footer#footer .social-media a { color: #fff; }

@media screen and (max-width: 995px) {
	.mondial2026-class footer#footer div.wf-container { flex-direction: column; }
	.mondial2026-class footer#footer div.wf-container > div.widget { flex: 1 1 100%; width: 100%; }

	.mondial2026-class .sl-element-ctn,
	.mondial2026-class .featured-sl,
	.mondial2026-class span.post-featured,
	html.mondial2026-class div#page div#first-section div.owl-carousel { aspect-ratio: 4 / 3; }
	.mondial2026-class div.col-12.col-sm-12.col-md-12.col-lg-6.col-xl-6 span.post-featured,
	.mondial2026-class div.owl-carousel { aspect-ratio: 4 / 3; }
	.mondial2026-class .ctn-elements > p,
	.mondial2026-class .ctn-elements > span { display: none; }

	/* Carrousel pleine largeur sur mobile (équiv. règle non-scopée cst-microsite.css l.348) */
	.mondial2026-class div#page div#first-section,
	.mondial2026-class div#page div.row.m-10 { margin: 0px; }

	/* Titre dans le carrousel : sans fond, texte blanc (même rendu que CAN2025) */
	.mondial2026-class div#first-section span.post-featured h2 { background: none; color: #fff; }

	/* Annule le padding Bootstrap sur les cols (équiv. règle CAN2025 cst-microsite.css l.125) */
	.mondial2026-class .col-12.col-sm-12.col-md-12 { padding-left: 0px; padding-right: 0px; }
}

/* ----- Section 4 : bandeau gris pleine largeur en arrière-plan ----- */
.mondial2026-class div#Fourth-section { position: relative; overflow: visible; }
.mondial2026-class div#Fourth-section::after { content: ''; background-color: #f2f2f2; width: 100vw; height: 100%; position: absolute; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; z-index: -1; }


/* ----- Carrousels / sliders (vignettes en rotation) ----- */
.mondial2026-class div#first-section div.owl-carousel,
html.mondial2026-class div#page div#first-section div.owl-carousel { display: block; border-radius: 20px; aspect-ratio: 16 / 8; overflow: hidden; }
.mondial2026-class .sl-element-ctn,
.mondial2026-class .featured-sl { overflow: hidden; aspect-ratio: 16 / 8; border-radius: 20px; }

@media screen and (max-width: 995px) {
	.mondial2026-class div#first-section div.owl-carousel,
	html.mondial2026-class div#page div#first-section div.owl-carousel { aspect-ratio: 4 / 3; }
	.mondial2026-class .sl-element-ctn,
	.mondial2026-class .featured-sl { aspect-ratio: 4 / 3; }
}
.mondial2026-class .featured-sl { background-size: cover; background-position: top center; background-repeat: no-repeat; }

/* ----- Titre de section ----- */
.mondial2026-class .titlesection h4 { color: #003d17; font-size: 35px; line-height: 1em; }
.mondial2026-class .titlesection { display: flex; align-items: center; grid-gap: 15px; }

/* ----- Bouton "charger plus" + dégradé de fondu au-dessus ----- */
.mondial2026-class .col-12.col-sm-12.col-md-12.col-lg-9.col-xl-9.lazy-content { position: relative; }
.mondial2026-class .col-12.col-sm-12.col-md-12.col-lg-9.col-xl-9.lazy-content::after { content: ""; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); position: absolute; bottom: 0; height: 150px; z-index: 9; width: 100%; }
.mondial2026-class .btnloadmore { color: #fff; text-decoration: none; background-color: #000000; padding: 18px 40px; font-size: 24px; line-height: 1.5em; font-weight: 800; border-radius: 20px; position: absolute; bottom: -1%; z-index: 10; }

/* ----- Tabulation (bloc coloré + mascotte en arrière-plan) -----
   TEMPORAIRE : reprend la mascotte CAN2025 en attendant le visuel Mondial 2026 final. ----- */
.mondial2026-class div#tabulation { background-color: #ffcd00; border-radius: 20px; z-index: 9; position: relative; }
.mondial2026-class div#tabulation::after { content: ""; position: absolute; bottom: -150px; width: 100%; background: url(https://files.lebrief.ma/uploads/2026/06/09111703/mascot_cdm2026.png); height: 450px; background-size: contain; background-repeat: no-repeat; z-index: 9; }

@media screen and (max-width: 995px) {
	.mondial2026-class div#tabulation::after { display: none; }
	.mondial2026-class div#tabulation { margin-top: 40px; }
}

/* ----- Boutons de partage : annule le positionnement absolu de cst-microsite.css ----- */
.mondial2026-class .addtoany_shortcode { position: static; width: auto; margin-right: 0; }

/* ----- Pub billboard header : z-index sous le header fixe (9401), margin-top sur articles ----- */
.mondial2026-class #Billboard_head { z-index: 900; }
.mondial2026-class.single #Billboard_head { margin-top: 60px; }

/* ----- Réduit l'espace entre la pub header et le breadcrumb sur mobile ----- */
@media screen and (max-width: 775px) {
	.mondial2026-class div#page div.row.m-med-top,
	.mondial2026-class div#page div.m-med-top { margin-top: -35px; }
	.mondial2026-class div#page section[aria-labelledby="articles-most-read"] div.row.m-med-top,
	.mondial2026-class div#page section[aria-labelledby="articles-most-read"] div.m-med-top { margin-top: 0; }
}

/* ----- Vignettes articles (post-featured) ----- */
.mondial2026-class div#first-section span.post-featured { aspect-ratio: 16 / 10; background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 20px; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-items: start; align-content: flex-end; }
.mondial2026-class div#first-section span.post-featured a { display: block; min-height: 60px; color: #fff; }
.mondial2026-class div#first-section span.post-featured h2 { position: relative; z-index: 5; width: 100%; padding: 10px 15px; }
.mondial2026-class div#first-section span.post-featured:before { content: ""; display: block; position: absolute; background: linear-gradient(rgb(255 255 255/0%), rgb(72 72 70/0%) 49%, rgb(0 0 0/84%) 73%); z-index: 1; height: 100%; width: 100%; }
.mondial2026-class div#Fourth-section span.post-featured { aspect-ratio: 4 / 2.5; }

/* À ajuster une fois la maquette XD finale exportée : remplacer les images temporaires
   CAN2025 (header_image dans config.php, et background-image du footer ci-dessus). */