/* TAFELWIT — styles communs single/archive dossiers, alertes, publications */

/* Rubrique Actualités (page des articles WordPress standards, sans template
   enfant dédié : archive native Kadence + entry-title natif). Ces titres
   utilisent par défaut la police système et la couleur de texte generique de
   Kadence (--global-heading-font-family / palette3), plus specifiques que la
   règle globale h1/h2 du theme.json et donc prioritaires dans la cascade :
   résultat, "Actualités" et les titres d'articles détonnaient visuellement
   du reste du site (police et couleur différentes des autres titres de
   section). On aligne sur la typographie TAFELWIT (Montserrat + anthracite),
   sur la page de liste comme sur les pages individuelles d'articles. */
.archive-title,
.entry-title {
	font-family: var(--wp--preset--font-family--titre, 'Montserrat', sans-serif) !important;
	font-weight: 700 !important;
	color: #2E2E2E !important;
}
/* Position/alignement du titre "Actualités"/"News"/"Noticias"/"الأخبار" —
   corrigé une première fois (fiabilisé le centrage en RTL), mais en comparant
   avec la référence réelle du site (h1.tafelwit-section-title, utilisé par
   "Nos dossiers", "Carte des dossiers", etc.) le bug était ailleurs : CE
   titre est le SEUL de tout le site à être centré dans un bandeau plein
   largeur sans le soulignement doré — partout ailleurs, "Nos dossiers" & co.
   sont alignés au début (gauche en LTR / droite en RTL) dans une colonne
   centrée à 1200px, avec le trait doré signature de la marque. Le conteneur
   Kadence natif de ce titre est un flexbox en flex-direction:column : l'axe
   horizontal y est donc contrôlé par align-items (axe transversal), pas
   justify-content (axe principal = vertical dans une colonne) — une première
   tentative avec justify-content n'avait aucun effet visuel pour cette
   raison. align-items/text-align:start s'adaptent automatiquement au RTL
   sans règle séparée (le sens flex et la logique de texte suivent tous deux
   le dir="rtl" de l'arabe). */
header.entry-header.post-archive-title {
	align-items: flex-start !important;
}
h1.archive-title {
	text-align: start !important;
	position: relative;
	padding-bottom: 0.75rem;
}
h1.archive-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 2px;
	background-color: #C8A45A;
}
html[lang="ar"] h1.archive-title::after {
	left: auto;
	right: 0;
}
/* Espace avant/après le titre : Kadence impose min-height:200px au bandeau
   du titre d'archive, avec le h1 centré verticalement dedans (justify-content
   sur l'axe principal, vertical en flex-direction:column) — soit 70px de
   marge de chaque côté d'un titre de 60px de haut. Ramené à un bandeau plus
   resserré (110px), cohérent avec l'espacement des autres titres de section
   du site (ex. .tafelwit-archive : 3rem/48px de padding avant "Nos dossiers"). */
header.entry-header.post-archive-title {
	min-height: 110px !important;
}

/* Conteneur unifié : mêmes largeur/marges que les sections de la page d'accueil
   (.tafelwit-dossiers, .tafelwit-actualites) pour que les templates CPT custom
   (single/archive) s'alignent avec les templates Kadence natifs. */
.tafelwit-archive,
.tafelwit-dossier-single,
.tafelwit-alerte-single,
.tafelwit-publication-single,
.tafelwit-convention-single {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

.tafelwit-dossier-single__header,
.tafelwit-alerte-single__header,
.tafelwit-publication-single > header,
.tafelwit-convention-single__header {
	margin-bottom: 1.5rem;
}
.tafelwit-dossier-single__header img,
.tafelwit-convention-single__header img { border-radius: 8px; margin-bottom: 1rem; max-width: 100%; height: auto; }
.tafelwit-dossier-single__contenu,
.tafelwit-alerte-single__contenu,
.tafelwit-publication-single__contenu,
.tafelwit-convention-single__contenu { margin-bottom: 2rem; }
.tafelwit-dossier-single__publications,
.tafelwit-dossier-single__annexes,
.tafelwit-dossier-single__documents { margin-top: 2rem; }
.tafelwit-convention-single__description { font-size: 1.05rem; color: #2E2E2E; margin-bottom: 1.5rem; }

.tafelwit-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	background: #F5F1E8;
	font-size: 0.85rem;
	font-weight: 600;
}
.tafelwit-badge--alerte { background: #C0392B; color: #fff; }

.tafelwit-dossier-single__meta,
.tafelwit-alerte-single__meta,
.tafelwit-publication-single__meta,
.tafelwit-convention-single__meta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0.75rem 0 1.5rem;
	color: #2E2E2E;
}

/* Barre de filtres par type de document (archive "Conventions et documents") —
   memes codes couleur que le reste du site (vert principal / sable au repos). */
.tafelwit-conventions__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}
.tafelwit-filtre {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: #F5F1E8;
	color: #2E2E2E;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.tafelwit-filtre:hover { background: #E4C05A; }
.tafelwit-filtre.is-active { background: #0B5D3B; color: #fff; }
/* Deuxieme barre (categorie thematique) : meme composant, distinguee par une
   couleur de repli differente pour ne pas se confondre visuellement avec la
   barre "type" au-dessus — l'etat actif reste le meme vert que le reste du site. */
.tafelwit-conventions__filtres--categorie { margin-top: 0.75rem; }
.tafelwit-filtre--categorie { background: #EDEFEA; }
.tafelwit-filtre--categorie:hover { background: #E4C05A; }
.tafelwit-filtre--categorie.is-active { background: #0B5D3B; color: #fff; }
.tafelwit-badge--categorie { background: #1A3A5C; color: #fff; margin-inline-start: 0.4rem; }
.tafelwit-archive__source { margin-top: 2rem; font-size: 0.8rem; color: #777; font-style: italic; }

/* Badges de rubrique cliquables sur les pages single Actualites (mots-cles) —
   memes couleurs que .tafelwit-badge--categorie, mais sans decoration de lien
   et avec un retour visuel au survol/focus pour signaler l'interactivite. */
.tafelwit-article-single__rubriques { margin: 0.75rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tafelwit-article-single__rubriques .tafelwit-badge--categorie { margin-inline-start: 0; }
.tafelwit-badge--lien { text-decoration: none; cursor: pointer; transition: opacity 0.15s ease; }
.tafelwit-badge--lien:hover,
.tafelwit-badge--lien:focus { opacity: 0.8; }

/* Message "X resultat(s) pour ..." affiche uniquement quand une recherche est
   active (page-actualites.php), pour rendre visible que la recherche a bien
   filtre les resultats (autrement la difference visuelle seule peut sembler
   decorative si peu de resultats changent). */
.tafelwit-actualites__resultats-recherche { margin-top: 1rem; font-weight: 600; color: #1A3A5C; }

/* Boutons (déplacés depuis homepage.css — réutilisés sur single-publication.php) */
.tafelwit-btn {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.tafelwit-btn:hover { transform: translateY(-2px); }
.tafelwit-btn--plein { background: #0B5D3B; color: #fff; }
.tafelwit-btn--contour { background: transparent; color: inherit; border: 2px solid currentColor; }

/* Cartes dossier + grille (déplacées depuis homepage.css — réutilisées par archive-dossier.php) */
.tafelwit-dossiers__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}
.tafelwit-dossier-card {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	text-decoration: none;
	color: #2E2E2E;
	padding-bottom: 1rem;
}
.tafelwit-dossier-card img { width: 100%; height: 180px; object-fit: cover; }
.tafelwit-dossier-card h3, .tafelwit-dossier-card p { padding: 0 1rem; }
.tafelwit-dossier-card__badge { display: inline-block; margin: 0.75rem 1rem 0; font-size: 0.85rem; }
.tafelwit-dossier-card--action {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed #0B5D3B;
	background: transparent;
	min-height: 150px;
}

.tafelwit-alertes__liste,
.tafelwit-publications__liste {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.tafelwit-alertes__liste li,
.tafelwit-publications__liste li {
	border-bottom: 1px solid #F5F1E8;
	padding-bottom: 0.75rem;
}
.tafelwit-publications__langues {
	margin-left: 0.5rem;
	font-size: 0.85rem;
	color: #777;
}

.tafelwit-dossier-single__documents ul,
.tafelwit-dossier-single__publications ul {
	list-style: none;
	padding: 0;
}

/* Pages de contenu simples (Contact, Qui sommes-nous, ...) — titre et
   paragraphes partagent un seul conteneur centré pour rester alignés entre
   eux : avant ce correctif, le texte (rendu par le template de page
   "pleine largeur / non encadré" de Kadence) collait au bord de l'écran, et
   le titre arabe débordait carrément hors champ en RTL faute de largeur
   contrainte. .tafelwit-contact (formulaire, plus compact) et
   .tafelwit-page-content (texte courant, plus large pour la lecture)
   partagent la même logique d'alignement/RTL, avec des largeurs différentes. */
.tafelwit-contact,
.tafelwit-page-content {
	margin: 3rem auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
}
.tafelwit-contact {
	max-width: 640px;
}
.tafelwit-page-content {
	max-width: 760px;
}
.tafelwit-contact h2,
.tafelwit-page-content h1,
.tafelwit-page-content h2 {
	margin: 0 0 0.75rem;
}
.tafelwit-contact > p,
.tafelwit-page-content p {
	margin: 0 0 1.25rem;
	line-height: 1.7;
	color: #2E2E2E;
	overflow-wrap: break-word;
}
.tafelwit-page-content ul {
	margin: 0 0 1.25rem;
	padding-inline-start: 1.5rem;
	line-height: 1.7;
	color: #2E2E2E;
}
.tafelwit-page-content li {
	margin-bottom: 0.4rem;
}
/* Image d'illustration en tête de page (ex. "Qui sommes-nous") : même
   largeur que le bloc de texte (elle est dans le même conteneur centré à
   760px), centrée, jamais plus large ni plus étroite que le texte en dessous. */
.tafelwit-page-content__image {
	display: block;
	width: 30%;
	height: auto;
	margin: 0 auto 2rem;
	border-radius: 8px;
}
/* Filet de sécurité anti-débordement horizontal : certains éléments internes
   de WPForms (colonnes de champ "small"/"medium" dimensionnées par calc(),
   choix RTL) peuvent excéder la largeur de la carte sur petit écran. Scopé
   aux DESCENDANTS uniquement : sur le conteneur lui-même, ça écraserait la
   largeur voulue (640px/760px) définie plus haut, les deux règles ayant la
   même spécificité et celle-ci étant plus bas dans la cascade. */
.tafelwit-contact *,
.tafelwit-page-content * {
	max-width: 100%;
	box-sizing: border-box;
}

/* Formulaire de contact (WPForms) — harmonisé avec la charte du thème
   (palette theme.json, largeur/espacements des autres pages de contenu).
   Les propriétés custom --wpforms-* de WPForms Lite ne sont pas honorées de
   façon fiable via le JSON du formulaire (le panneau "thème personnalisé" est
   une fonctionnalité Pro) : on surcharge donc directement les styles rendus,
   ce qui fonctionne quel que soit le thème WPForms actif. Le conteneur
   n'a plus sa propre largeur/centrage : il hérite de .tafelwit-contact pour
   rester aligné avec le titre et le paragraphe au-dessus. */
.wpforms-container-full {
	max-width: 100%;
	margin: 0;
	padding: 2rem;
	background: #FFFFFF;
	border: 1px solid #F5F1E8;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}
.wpforms-container-full .wpforms-field {
	padding: 0 0 1.25rem;
}
/* Les champs de saisie n'héritent pas la police du corps de page par
   défaut (comportement natif des navigateurs sur input/textarea/button/
   select) : sans ce reset ils affichent la police système au lieu de la
   police du thème (Inter, ou Amiri en arabe via html[lang="ar"] plus bas). */
.wpforms-container-full,
.wpforms-container-full input,
.wpforms-container-full textarea,
.wpforms-container-full select,
.wpforms-container-full button {
	font-family: inherit;
}
.wpforms-container-full .wpforms-field-label {
	color: #2E2E2E;
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.wpforms-container-full .wpforms-required-label {
	color: #C0392B;
}
.wpforms-container-full input[type="text"],
.wpforms-container-full input[type="email"],
.wpforms-container-full input[type="tel"],
.wpforms-container-full input[type="url"],
.wpforms-container-full select,
.wpforms-container-full textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(46, 46, 46, 0.25) !important;
	border-radius: 4px !important;
	padding: 0.7rem 0.9rem !important;
	color: #2E2E2E;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpforms-container-full input[type="text"]:focus,
.wpforms-container-full input[type="email"]:focus,
.wpforms-container-full input[type="tel"]:focus,
.wpforms-container-full input[type="url"]:focus,
.wpforms-container-full select:focus,
.wpforms-container-full textarea:focus {
	border-color: #0B5D3B !important;
	box-shadow: 0 0 0 3px rgba(11, 93, 59, 0.15);
	outline: none;
}
.wpforms-container-full button[type="submit"],
.wpforms-container-full .wpforms-submit {
	background-color: #0B5D3B !important;
	border-color: #0B5D3B !important;
	border-radius: 4px !important;
	border-style: solid !important;
	font-weight: 600;
	padding: 0.85rem 1.75rem !important;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.wpforms-container-full button[type="submit"]:hover,
.wpforms-container-full .wpforms-submit:hover {
	background-color: #4CAF50 !important;
	border-color: #4CAF50 !important;
	transform: translateY(-2px);
}

/* Arabe (RTL) : même logique que le reste du thème (html[lang="ar"]) —
   texte et champs alignés à droite, police Amiri cohérente avec les titres. */
html[lang="ar"] .tafelwit-contact,
html[lang="ar"] .tafelwit-page-content {
	text-align: right;
	font-family: 'Amiri', serif;
}
/* Adresse e-mail : toujours lue de gauche à droite, même en contexte arabe. */
html[lang="ar"] .wpforms-container-full .wpforms-field-email input {
	direction: ltr;
	text-align: right;
}

@media (max-width: 700px) {
	.tafelwit-contact,
	.tafelwit-page-content {
		margin: 1.75rem auto;
		padding: 0 1rem;
	}
	.wpforms-container-full {
		padding: 1.25rem;
	}
}
@media (max-width: 480px) {
	/* En dessous de 480px, les colonnes "petite/moyenne" de WPForms (Nom en
	   25%, E-mail en 60%, dimensionnées par calc() côté plugin) deviennent
	   trop étroites (champ tassé) ou dépassent la carte : on les passe en
	   pleine largeur, un champ par ligne, comme le reste du formulaire. */
	.wpforms-container-full .wpforms-field,
	.wpforms-container-full .wpforms-field-small,
	.wpforms-container-full .wpforms-field-medium,
	.wpforms-container-full .wpforms-field-large {
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* Page "Actualites" modernisee (page-actualites.php) */
.tafelwit-actualites-page { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; }

.tafelwit-actualites__recherche {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
	max-width: 480px;
}
.tafelwit-actualites__recherche input[type="search"] {
	flex: 1 1 auto;
	padding: 0.6rem 0.9rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font: inherit;
}

/* Article vedette : grand format, image + contenu cote a cote sur desktop,
   empiles sur mobile (voir media query plus bas). */
.tafelwit-actu-vedette {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2rem;
	align-items: center;
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	color: #2E2E2E;
}
.tafelwit-actu-vedette__image img { width: 100%; height: 320px; object-fit: cover; border-radius: 8px; }
.tafelwit-actu-vedette__contenu h2 { font-size: 1.8rem; margin: 0.75rem 0; }
.tafelwit-actu-vedette__lecture { font-size: 0.85rem; color: #777; }
@media (max-width: 767px) {
	.tafelwit-actu-vedette { grid-template-columns: 1fr; }
	.tafelwit-actu-vedette__image img { height: 200px; }
}

/* Video YouTube integree (tafelwit_video_tala_hamza) — dossier Tala Hamza et
   page Actualites. Ratio 16:9 fluide via le "aspect-ratio" (supporte par tous
   les navigateurs cibles du site, plus simple que l'ancienne astuce
   padding-bottom:56.25%). */
.tafelwit-video-integree { margin: 2rem 0; }
.tafelwit-video-integree__cadre { aspect-ratio: 16 / 9; margin-top: 1rem; border-radius: 8px; overflow: hidden; }
.tafelwit-video-integree__cadre iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Images alignees (alignleft/alignright) dans le corps d'un article natif —
   texte qui s'enroule autour, comme attendu pour une image inseree au fil
   d'un long article (ex. "Couche d'ozone, politique et lobbies"). */
.entry-content img.alignright,
.tafelwit-dossier-single__contenu img.alignright,
.tafelwit-page-content img.alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; max-width: 45%; height: auto; border-radius: 6px; }
.entry-content img.alignleft,
.tafelwit-dossier-single__contenu img.alignleft,
.tafelwit-page-content img.alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; max-width: 45%; height: auto; border-radius: 6px; }
@media (max-width: 600px) {
	.entry-content img.alignright, .entry-content img.alignleft,
	.tafelwit-dossier-single__contenu img.alignright, .tafelwit-dossier-single__contenu img.alignleft,
	.tafelwit-page-content img.alignright, .tafelwit-page-content img.alignleft { float: none; max-width: 100%; margin: 1rem 0; }
}

.tafelwit-article-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 1rem 0; }
.tafelwit-article-card__lecture { display: block; padding: 0 1rem 1rem; font-size: 0.8rem; color: #777; }
.tafelwit-badge--nouveau { background: #C8A45A; color: #fff; }
.tafelwit-badge--externe { background: #EDEFEA; color: #1A3A5C; }
.tafelwit-image-repli { width: 100%; height: 180px; object-fit: cover; }

.tafelwit-rss-attribution {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	background: #F5F1E8;
	border-radius: 4px;
	font-size: 0.85rem;
	font-style: italic;
	color: #555;
}

.tafelwit-article-partage { margin-top: 2rem; }
.tafelwit-a-lire-aussi { margin-top: 2.5rem; }

.pagination .page-numbers,
ul.page-numbers,
.tafelwit-actualites-page .page-numbers {
	display: inline-flex;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin-top: 2rem;
}