/*
 * Somaliland.ch Design éditorial v1.2.0
 * Phase 1 de la refonte « journal de référence ».
 *
 * Tout est rattaché à body.somch-ds, une classe que l'extension n'ajoute que
 * lorsque le design est actif (aperçu administrateur ou publié). Sans cette
 * classe, aucune de ces règles ne s'applique : le site reste exactement tel
 * qu'il est aujourd'hui.
 *
 * Périmètre volontairement réduit à deux choses :
 *   1. les typographies (titres et lecture en Newsreader, interface en IBM Plex Sans) ;
 *   2. le fond papier de la page.
 * Couleurs de marque, mises en page, logo et mot-symbole (Playfair Display)
 * ne sont PAS touchés dans cette version.
 */

/* ---------- 1. Jetons ---------- */

body.somch-ds {
	--somch-ds-paper: #f6f4ee;
	--somch-ds-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
	--somch-ds-font-reading: "Newsreader", Charter, Georgia, serif;
	--somch-ds-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Fond de page du Media Design System (somaliland-smart-editorial-visuals),
	   défini sur :root à #f4f6f8 : redéfini ici, les cartes (--somch-paper,
	   blanc) restent blanches et se détachent du fond papier. */
	--somch-canvas: var(--somch-ds-paper);
}

/* Variables typographiques des articles (somaliland-publication-quality),
   définies sur body.somch-professional-article : redéfinies avec une
   spécificité supérieure, sans toucher aux règles de l'extension. */
body.somch-ds.somch-professional-article {
	--somch-article-display: var(--somch-ds-font-display);
	--somch-article-reading: var(--somch-ds-font-reading);
	--somch-article-ui: var(--somch-ds-font-ui);
}

/* ---------- 2. Fond papier ---------- */

/* somaliland-legacy-site-css impose « html, body { background: #f5f7f9 !important } » :
   ce sélecteur est plus spécifique et l'emporte. Le mode sombre des articles
   (body.somch-reading-dark) est exclu pour qu'il reste intact. */
html:has(> body.somch-ds:not(.somch-reading-dark)),
html body.somch-ds:not(.somch-reading-dark) {
	background: var(--somch-ds-paper, #f6f4ee) !important;
}

/* ---------- 3. Interface : IBM Plex Sans ---------- */

body.somch-ds,
body.somch-ds button,
body.somch-ds input,
body.somch-ds select,
body.somch-ds textarea {
	font-family: var(--somch-ds-font-ui);
}

/* ---------- 4. Titres : Newsreader ---------- */

/* :where() garde une spécificité basse : toute règle plus précise d'une autre
   extension (par exemple la saga Histoire) continue de primer. Le mot-symbole
   SOMALILAND.CH de l'en-tête est exclu et garde Playfair Display. */
body.somch-ds :where(h1, h2, h3, h4, .entry-title, .page-title):where(:not(.main-title, .site-branding *)) {
	font-family: var(--somch-ds-font-display);
	letter-spacing: -0.005em;
}

/* Corps des articles et des pages : lecture en Newsreader. La page d'accueil
   est exclue : ses extraits et libellés de cartes restent en sans-serif. */
body.somch-ds:where(.single, .page:not(.home)) :where(.entry-content) :where(p, li, blockquote) {
	font-family: var(--somch-ds-font-reading);
}

/* Les éléments d'interface placés dans le contenu (boutons, formulaires,
   légendes, tableaux) restent en sans-serif. */
body.somch-ds:where(.single, .page:not(.home)) :where(.entry-content) :where(button, input, select, textarea, label, figcaption, table, .wp-block-button__link) {
	font-family: var(--somch-ds-font-ui);
}

/* v1.0.1 — Blocs d'interface insérés dans le corps de l'article par
   somaliland-publication-quality : le sommaire « Dans cet article »
   (nav.somch-pro-article__toc) et la ligne légende / crédit photo
   (.somch-pro-article__lead). Ils restent en sans-serif, comme toute
   navigation insérée dans le contenu. */
body.somch-ds:where(.single, .page:not(.home)) :where(.entry-content) :where(nav, .somch-pro-article__toc, .somch-pro-article__lead) :where(p, li, a, span, small) {
	font-family: var(--somch-ds-font-ui);
}

/* =====================================================================
 * Phase 2 (v1.1.0) — En-tête façon journal, sur ordinateur uniquement.
 *
 * Tout est rattaché à body.somch-ds-header (réglage séparé, aperçu
 * administrateur par défaut). Sous 901px, rien ne change : l'en-tête
 * mobile du Media Design System (logo + menu hamburger) reste tel quel.
 *
 * Le Media Design System (somaliland-smart-editorial-visuals) pose ses
 * règles d'en-tête avec !important sur body.somch-media-design-v3 : les
 * règles ci-dessous ajoutent body.somch-ds-header pour être plus
 * spécifiques, avec !important uniquement là où c'est nécessaire.
 * ===================================================================== */

/* Barre utilitaire : masquée par défaut (mobile), affichée sur ordinateur. */
.somch-ds-topbar {
	display: none;
}

@media (min-width: 901px) {
	body.somch-ds-header .somch-ds-topbar {
		display: block;
		border-bottom: 1px solid #d9d4c7;
		background: var(--somch-ds-paper, #f6f4ee);
		font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
		font-size: 13px;
		line-height: 1.4;
		color: #555049;
	}

	body.somch-ds-header .somch-ds-topbar__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 24px;
		width: min(100% - 40px, 1240px);
		margin: 0 auto;
		padding: 8px 0;
	}

	body.somch-ds-header .somch-ds-topbar__date {
		font-weight: 600;
		color: #141414;
	}

	body.somch-ds-header .somch-ds-topbar__links {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 22px;
	}

	body.somch-ds-header .somch-ds-topbar__links a {
		color: #555049;
		text-decoration: none;
	}

	body.somch-ds-header .somch-ds-topbar__links a:hover,
	body.somch-ds-header .somch-ds-topbar__links a:focus-visible {
		color: #0a6b3b;
		text-decoration: underline;
	}

	/* En-tête : fond papier, plus de bordure (les filets du menu la remplacent). */
	/* v1.1.1 : !important nécessaire, legacy-site-css impose un fond blanc
	   « background: #fff !important » sur .site-header. */
	body.somch-ds-header.somch-media-design-v3 .site-header {
		background: var(--somch-ds-paper, #f6f4ee) !important;
		border-bottom: 0 !important;
	}

	/* Logo centré au-dessus du menu. */
	body.somch-ds-header.somch-media-design-v3 .site-header .inside-header {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 18px !important;
		min-height: 0;
		padding-top: 24px;
		padding-bottom: 0;
	}

	body.somch-ds-header.somch-media-design-v3 .site-branding {
		display: flex;
		justify-content: center;
	}

	body.somch-ds-header.somch-media-design-v3 .site-branding .main-title a {
		font-size: 36px !important;
		gap: 4px !important;
	}

	body.somch-ds-header.somch-media-design-v3 .site-branding .main-title a::before,
	body.somch-ds-header.somch-media-design-v3 .site-logo + .site-branding .main-title a::before {
		width: 64px !important;
		height: 64px !important;
		flex-basis: 64px !important;
	}

	/* Menu pleine largeur, encadré d'un double filet en haut et d'un filet en bas. */
	body.somch-ds-header.somch-media-design-v3 nav.main-navigation.nav-align-right {
		width: 100% !important;
		margin-left: 0 !important;
		border-top: 3px double #141414;
		border-bottom: 1px solid #141414;
		background: transparent;
	}

	body.somch-ds-header.somch-media-design-v3 .main-navigation .inside-navigation {
		width: 100% !important;
		justify-content: center !important;
	}

	/* v1.1.1 : legacy-site-css impose « gap: 1px !important » et
	   « flex-wrap: nowrap !important » sur le menu, ce qui collait les
	   rubriques entre elles. L'espacement s'adapte à la largeur de l'écran,
	   et le menu peut passer sur deux lignes sur un petit écran d'ordinateur
	   plutôt que de déborder. */
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul {
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 0 clamp(12px, 1.7vw, 26px) !important;
	}

	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a {
		min-height: 46px;
		padding: 0 2px !important;
		border-radius: 0 !important;
		border-bottom: 3px solid transparent;
		background: transparent !important;
		color: #141414 !important;
		font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
		font-size: 14px !important;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a:hover,
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a:focus-visible {
		color: #0a6b3b !important;
	}

	/* Rubrique en cours : soulignée en vert (remplace la pastille rose). */
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li.current-menu-item > a,
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li.somch-current-menu-item > a {
		border-bottom-color: #0a6b3b;
		background: transparent !important;
		color: #141414 !important;
	}

	/* v1.1.1 : l'extension mu « Active menu highlight » dessine une pastille
	   (::before) et un soulignement rouge (::after) sur la rubrique en cours et
	   au survol : masqués ici, le soulignement vert ci-dessus les remplace.
	   Les flèches des éventuels sous-menus (::after) sont conservées. */
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a::before,
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li:not(.menu-item-has-children) > a::after {
		display: none !important;
	}

	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li:not(.menu-item-has-children) > a:hover {
		border-bottom-color: #c9c3b4;
	}

	/* « Soutenir » : seul bouton plein du menu. */
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a[href*="nous-soutenir"] {
		align-self: center;
		min-height: 34px;
		padding: 0 14px !important;
		border-bottom: 0 !important;
		background: #0a6b3b !important;
		color: #ffffff !important;
	}

	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a[href*="nous-soutenir"]:hover,
	body.somch-ds-header.somch-media-design-v3 .main-navigation .main-nav > ul > li > a[href*="nous-soutenir"]:focus-visible {
		background: #074d2a !important;
		color: #ffffff !important;
	}
}

/* =====================================================================
 * Phase 3a (v1.2.0) — Page d'accueil façon journal.
 *
 * Rattaché à body.somch-ds-home, classe ajoutée uniquement sur la page
 * d'accueil quand la phase 3a est active (réglage séparé, aperçu par
 * défaut). CSS uniquement : le contenu de la page et l'extension
 * « Accueil éditorial » (choix de la Une) ne sont pas modifiés.
 * ===================================================================== */

/* 1. Ordre de journal : la Une et le fil d'actualité (bloc .somch-dynamic-home
      de l'extension Accueil éditorial) passent juste après la bande
      d'introduction ; « Événements importants » vient ensuite. Les autres
      blocs gardent leur ordre d'origine. */
body.somch-ds-home .entry-content {
	display: flex;
	flex-direction: column;
}

body.somch-ds-home .entry-content > * {
	order: 10;
}

body.somch-ds-home .entry-content > .somch-hero {
	order: 1;
}

body.somch-ds-home .entry-content > .somch-dynamic-home {
	order: 2;
}

body.somch-ds-home .entry-content > .somch-hot-events {
	order: 3;
}

/* 2. Pastilles de rubriques : doublon du menu principal, masquées. Le titre
      « Dernières publications » au-dessus de la Une est masqué aussi : le fil
      d'actualité garde son lien « Toutes les actualités ». */
body.somch-ds-home .entry-content > .somch-topline,
body.somch-ds-home .entry-content > .somch-section:has(> .somch-section__bar) {
	display: none !important;
}

/* 3. Bande d'introduction : le grand bandeau bordeaux devient une fine bande
      éditoriale sur fond papier, encadrée de filets. Même texte. */
body.somch-ds-home.somch-media-design-v3 .entry-content > .somch-hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
	gap: 16px 40px;
	align-items: center;
	min-height: 0 !important;
	margin: 6px 0 28px;
	padding: 22px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #d9d4c7 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #141414 !important;
	overflow: visible;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero__main {
	padding: 0 !important;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero__main > p:first-child {
	display: none;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero h1 {
	max-width: none;
	margin: 0 0 8px !important;
	color: #141414 !important;
	font-family: "Newsreader", Georgia, serif;
	font-size: clamp(24px, 2.4vw, 32px) !important;
	font-weight: 500 !important;
	font-style: italic;
	line-height: 1.2 !important;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero .somch-lede,
body.somch-ds-home.somch-media-design-v3 .somch-hero__main > p:not(:first-child) {
	max-width: 760px;
	margin: 0 !important;
	color: #555049 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero .somch-actions {
	display: none;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero__brief {
	align-self: center !important;
	margin: 0 !important;
	padding: 4px 0 4px 22px !important;
	border: 0 !important;
	border-left: 3px solid #0a6b3b !important;
	border-radius: 0 !important;
	background: transparent !important;
	backdrop-filter: none !important;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero__brief .somch-badge {
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #0a6b3b;
	font-size: 12px;
	letter-spacing: 0.1em;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero__brief h2 {
	margin: 6px 0 4px !important;
	color: #141414 !important;
	font-size: 19px !important;
}

body.somch-ds-home.somch-media-design-v3 .somch-hero__brief p {
	margin: 0;
	color: #555049 !important;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 900px) {
	body.somch-ds-home.somch-media-design-v3 .entry-content > .somch-hero {
		grid-template-columns: 1fr;
		padding: 18px 0 !important;
	}
}