/* TAFELWIT — styles page d'accueil (8 sections) */

#tafelwit-home { overflow-x: hidden; }

/* Section 1 : Hero */
.tafelwit-hero {
	position: relative;
	/* Plein ecran a l'arrivee sur le site. */
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Couleur de repli neutre tant que la video charge (ou si elle echoue) — pas de vert. */
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	padding: 1.7rem 2rem;
}
.tafelwit-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.tafelwit-hero__content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	width: 100%;
	/* Decale de 30% de sa propre hauteur sous le centrage vertical du hero
	   (le parent .tafelwit-hero reste centre, voir align-items:center) —
	   translateY en % est relatif a la hauteur de l'element lui-meme, donc
	   stable quel que soit l'ecran. Reste au-dessus de l'indicateur de
	   scroll (voir .tafelwit-scroll-cue, ancre en bas du hero). */
	animation: tafelwit-fade-in 1.1s ease-out forwards;
}
.tafelwit-hero__badge {
	display: inline-block;
	font-size: 1.5rem;
	margin-bottom: 1rem;
	letter-spacing: 0.15em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.5);
}
.tafelwit-hero__titre {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	/* Le minimum (0.8rem) est volontairement bas : sur un très petit écran,
	   le slogan reste sur une seule ligne (voir white-space ci-dessous)
	   plutôt que de forcer un corps de texte trop grand pour la largeur. */
	font-size: clamp(0.65rem, 4.2vw, 3.5rem);
	margin: 0 0 1rem;
	color: #FFFFFF;
	white-space: nowrap;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 16px rgba(0, 0, 0, 0.5);
}
.tafelwit-hero__sous-titre {
	font-size: 1.1rem;
	margin-bottom: 2rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 2px 12px rgba(0, 0, 0, 0.55);
}
.tafelwit-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@keyframes tafelwit-fade-in {
	from { opacity: 0; transform: translateY(calc(30% + 20px)); }
	to { opacity: 1; transform: translateY(30%); }
}

/* Desktop uniquement : 20% de decalage supplementaire (30% -> 50% de la
   hauteur propre du bloc), le mobile garde les 30% ci-dessus. */
@media (min-width: 768px) {
	.tafelwit-hero__content {
		animation-name: tafelwit-fade-in-desktop;
	}
	@keyframes tafelwit-fade-in-desktop {
		from { opacity: 0; transform: translateY(calc(50% + 20px)); }
		to { opacity: 1; transform: translateY(50%); }
	}
}

/* Mobile uniquement (le desktop garde le comportement ci-dessus) :
   - les deux CTA restent cote a cote au lieu de s'empiler (elles depassaient
     la largeur disponible sur un ecran de 390px et retombaient a la ligne) ;
   - le decalage vertical du bloc est reduit (30% -> 18%) pour garantir un
     espace libre entre les boutons et l'indicateur de scroll anime, ancre
     en bas du hero (voir .tafelwit-scroll-cue). */
@media (max-width: 767px) {
	.tafelwit-hero__content {
		animation-name: tafelwit-fade-in-mobile;
	}
	@keyframes tafelwit-fade-in-mobile {
		from { opacity: 0; transform: translateY(calc(18% + 20px)); }
		to { opacity: 1; transform: translateY(18%); }
	}
	.tafelwit-hero__cta {
		flex-wrap: nowrap;
		gap: 0.6rem;
	}
	.tafelwit-hero__cta .tafelwit-btn {
		flex: 1 1 0;
		padding: 0.65rem 0.5rem;
		font-size: 0.82rem;
		white-space: nowrap;
		text-align: center;
	}
}

/* Indicateur de scroll (souris + molette qui descend en boucle), pose
   par-dessus la video en bas du hero. Pointe vers #apres-hero (section 3) —
   le smooth-scroll est deja gere par kadence/assets/js/navigation.min.js
   (initAnchorScrollTo), pas besoin de JS supplementaire ici. */
.tafelwit-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.tafelwit-scroll-cue:hover,
.tafelwit-scroll-cue:focus-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(-2px);
}
.tafelwit-scroll-cue__mouse {
	position: relative;
	width: 26px;
	height: 42px;
	border: 2px solid #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.tafelwit-scroll-cue__wheel {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	animation: tafelwit-scroll-wheel 1.8s ease-in-out infinite;
}
.tafelwit-scroll-cue__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	transform: rotate(45deg);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
	animation: tafelwit-scroll-chevron 1.8s ease-in-out infinite;
}
@keyframes tafelwit-scroll-wheel {
	0%   { opacity: 1; top: 7px; }
	70%  { opacity: 0; top: 22px; }
	100% { opacity: 0; top: 22px; }
}
@keyframes tafelwit-scroll-chevron {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
	50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tafelwit-scroll-cue__wheel,
	.tafelwit-scroll-cue__chevron {
		animation: none;
	}
}

/* .tafelwit-btn* : voir content.css (partagé avec single-publication.php) */
.tafelwit-hero__cta .tafelwit-btn--plein,
.tafelwit-hero__cta .tafelwit-btn--contour {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tafelwit-hero__cta .tafelwit-btn--contour {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Header flottant transparent (voir _kad_post_transparent sur la page d'accueil) :
   la video reste visible derriere le menu/logo, la lisibilite passe uniquement
   par une couleur de texte claire + une ombre portee, jamais par un voile sur
   la video. Scope a .transparent-header pour ne pas affecter les autres pages. */
.transparent-header .site-branding .site-title,
.transparent-header .site-branding .site-description,
.transparent-header .tafelwit-lang-switcher__toggle {
	color: #FFFFFF;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a,
.mobile-transparent-header .mobile-toggle-open-container .menu-toggle-open,
.transparent-header .search-toggle-open-container .search-toggle-open {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Le menu deroulant de langue garde un fond blanc plein : on y restaure les
   couleurs habituelles (sinon le texte blanc devient illisible dessus). */
.transparent-header .tafelwit-lang-switcher.is-open .tafelwit-lang-switcher__toggle {
	color: #1A3A5C;
	text-shadow: none;
}
/* Header colle au scroll (voir header_sticky theme mod, fond blanc) : le
   switcher est un element autonome hors de #masthead (voir
   inc/language-switcher.php), donc pas touche par les couleurs "sticky" de
   Kadence — on bascule nous-memes en texte sombre des que body.header-is-fixed
   est pose par kadence/assets/js/navigation.min.js (initStickyHeader). */
body.header-is-fixed.transparent-header .tafelwit-lang-switcher__toggle {
	color: #1A3A5C;
	text-shadow: none;
}

/* Fond du header au scroll : Kadence bascule .item-is-fixed des la hauteur du header
   lui-meme (bien trop tot) — on neutralise son fond blanc natif et on le remplace par
   notre propre seuil (50% de la hauteur du hero, cf. header-scroll.js), a 80% d'opacite. */
body:not(.tafelwit-header-bg-visible) #masthead,
body:not(.tafelwit-header-bg-visible) #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
body:not(.tafelwit-header-bg-visible) #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: transparent !important;
}
body.tafelwit-header-bg-visible #masthead,
body.tafelwit-header-bg-visible #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
body.tafelwit-header-bg-visible #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: rgba(255, 255, 255, 0.8) !important;
}

/* Section 3 : Chiffre cle (mis en avant seul) */
/* Hauteur réduite de 15% (4rem -> 3.4rem de padding vertical). */
.tafelwit-chiffres { background: #F5F1E8; padding: 3.4rem 1.5rem; }
.tafelwit-chiffres__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.tafelwit-chiffres__grille--seul {
	max-width: 420px;
}
.tafelwit-chiffre__nombre {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 3rem;
	color: #0B5D3B;
}
.tafelwit-chiffre__label { color: #2E2E2E; }

/* Section 3 (v2) : bandeau texte "gestion responsable de notre environnement" + video */
.tafelwit-mission__contenu {
	max-width: 800px;
	margin: 0 auto;
	text-align: start;
	color: #2E2E2E;
}
.tafelwit-mission__contenu h2 {
	font-family: var(--wp--preset--font-family--titre, 'Montserrat', sans-serif);
	font-weight: 700;
	color: #2E2E2E;
	margin: 0 0 1.25rem;
}
.tafelwit-mission__contenu p {
	line-height: 1.7;
	margin: 0 0 1.25rem;
}
.tafelwit-mission__contenu blockquote {
	margin: 1.25rem 0;
	padding: 0.75rem 1.5rem;
	border-inline-start: 3px solid #C8A45A;
	background: #fff;
	font-style: italic;
	color: #0B5D3B;
}
.tafelwit-mission__contenu blockquote p {
	margin: 0;
}
.tafelwit-mission__contenu .entry-content-asset.videofit {
	border-radius: 8px;
	overflow: hidden;
	margin-top: 1.5rem;
}
html[lang="ar"] .tafelwit-mission__contenu {
	text-align: right;
	font-family: 'Amiri', serif;
}
html[lang="ar"] .tafelwit-mission__contenu blockquote {
	border-inline-start: none;
	border-inline-end: 3px solid #C8A45A;
}

/* Section 4 : Dossiers */
.tafelwit-dossiers { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; }
/* .tafelwit-dossiers__grille, .tafelwit-dossier-card* : voir content.css (partagé avec archive-dossier.php) */

/* Section 5 : Actualites — carrousel (voir assets/carousel.js). Defilement
   natif via overflow-x + scroll-snap : swipe tactile et RTL fonctionnent sans
   JS specifique, le script ne pilote que les fleches/points/autoplay/clavier. */
.tafelwit-actualites { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.tafelwit-carousel {
	position: relative;
	margin: 1rem 0 0.5rem;
}
.tafelwit-carousel__track {
	--tafelwit-carousel-visible: 3;
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.25rem 1rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tafelwit-carousel__track::-webkit-scrollbar { display: none; }
.tafelwit-carousel__slide {
	flex: 0 0 calc((100% - (var(--tafelwit-carousel-visible) - 1) * 1.5rem) / var(--tafelwit-carousel-visible));
	scroll-snap-align: start;
	min-width: 0;
}
@media (max-width: 1023px) { .tafelwit-carousel__track { --tafelwit-carousel-visible: 2; } }
@media (max-width: 767px)  { .tafelwit-carousel__track { --tafelwit-carousel-visible: 1; } }

.tafelwit-carousel__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	color: #1A3A5C;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.tafelwit-carousel__arrow:hover,
.tafelwit-carousel__arrow:focus-visible {
	background: #0B5D3B;
	color: #fff;
}
.tafelwit-carousel__arrow--prev { left: -10px; }
.tafelwit-carousel__arrow--next { right: -10px; }
:dir(rtl) .tafelwit-carousel__arrow--prev { left: auto; right: -10px; }
:dir(rtl) .tafelwit-carousel__arrow--next { right: auto; left: -10px; }
:dir(rtl) .tafelwit-carousel__arrow span { display: inline-block; transform: scaleX(-1); }
@media (max-width: 767px) {
	/* Sur mobile, le swipe tactile natif suffit ; les fleches chevaucheraient
	   les cartes sur un ecran etroit avec une seule carte visible. */
	.tafelwit-carousel__arrow { display: none; }
}

.tafelwit-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.tafelwit-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #EDEFEA;
	cursor: pointer;
}
.tafelwit-carousel__dot.is-active { background: #0B5D3B; }
.tafelwit-carousel__dot:focus-visible { outline: 2px solid #0B5D3B; outline-offset: 2px; }

.tafelwit-article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: #2E2E2E;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	padding: 1.25rem;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tafelwit-article-card img,
.tafelwit-article-card .tafelwit-image-repli {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 0.75rem;
}
.tafelwit-article-card:hover,
.tafelwit-article-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.tafelwit-article-card__badge {
	display: inline-block;
	align-self: flex-start;
	background: #C8A45A;
	color: #fff;
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	margin-bottom: 0.4rem;
}
/* Indice visuel de clic : flèche après le titre (cohérent avec les liens
   "Nos dossiers →", "Toutes les actualités →", etc. ailleurs sur le site)
   + soulignement au survol/focus, la carte entière restant cliquable. */
.tafelwit-article-card h3 {
	margin: 0;
}
.tafelwit-article-card h3::after {
	content: " →";
	display: inline-block;
	transition: transform 0.2s ease;
}
.tafelwit-article-card:hover h3,
.tafelwit-article-card:focus-visible h3 {
	text-decoration: underline;
}
.tafelwit-article-card:hover h3::after,
.tafelwit-article-card:focus-visible h3::after {
	transform: translateX(4px);
}
html[lang="ar"] .tafelwit-article-card h3::after {
	content: " ←";
}
html[lang="ar"] .tafelwit-article-card:hover h3::after,
html[lang="ar"] .tafelwit-article-card:focus-visible h3::after {
	transform: translateX(-4px);
}
.tafelwit-actualites__liens {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Section 6 : Carte */
.tafelwit-carte { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; }
/* isolation + z-index : cree un contexte d'empilement propre a la carte, pour que ses
   controles/popups Leaflet (z-index internes jusqu'a 1000) ne puissent jamais passer
   au-dessus du header sticky (z-index 1200 une fois fixe au scroll). */
#tafelwit-map { height: 450px; border-radius: 8px; position: relative; isolation: isolate; z-index: 0; }
.tafelwit-carte__placeholder { color: #777; font-style: italic; }

/* Encart de marque colle dans le coin superieur gauche de la carte (voir
   map-init.js : seul occupant du coin "topleft", boutons de zoom deplaces en
   "topright" — aucun chevauchement possible). margin:0 !important annule la
   marge par defaut que Leaflet applique a tout .leaflet-control (10px), pour
   un alignement top:0/left:0 parfaitement colle au cadre de la carte. Le
   coin superieur gauche de l'encart est de toute facon rogne par le
   border-radius + overflow:hidden de #tafelwit-map ; seul le coin oppose
   (bas-droit, "vers l'interieur" de la carte) est arrondi ici. */
.tafelwit-map-brand {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	background: rgba(255, 255, 255, 0.9);
	color: #1A3A5C;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.55rem;
	margin: 0 !important;
	border-radius: 0 0 6px 0;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}
.tafelwit-map-brand svg { display: block; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }

.tafelwit-map-marker__ping {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #C0392B;
	box-shadow: 0 0 0 rgba(192, 57, 43, 0.6);
	animation: tafelwit-ping 1.8s infinite;
}
@keyframes tafelwit-ping {
	0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.6); }
	70%  { box-shadow: 0 0 0 12px rgba(192, 57, 43, 0); }
	100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

/* Section 7 : Newsletter */
.tafelwit-newsletter {
	background: #1A3A5C;
	color: #fff;
	padding: 4rem 1.5rem;
	text-align: center;
}
/* Le style global du thème (Kadence) impose une couleur sombre à tous les
   h2 (--global-palette3), qui l'emporte sur le "color:#fff" hérité de la
   section : sans cette surcharge explicite, le titre devient illisible sur
   le fond bleu foncé. */
.tafelwit-newsletter .tafelwit-section-title {
	color: #fff;
}
/* Le trait doré (::after) de la signature visuelle est positionné en
   "left:0" par défaut, ce qui suppose un titre aligné à gauche : ici le
   titre est centré (text-align:center), donc le trait doit l'être aussi,
   sinon il se retrouve plaqué au bord gauche de la section au lieu d'être
   sous le texte. */
.tafelwit-newsletter .tafelwit-section-title::after,
html[lang="ar"] .tafelwit-newsletter .tafelwit-section-title::after {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.tafelwit-newsletter__placeholder { opacity: 0.8; font-style: italic; }

/* Formulaire Brevo (plugin mailin, shortcode [sibwp_form]) : dependTheme=1
   cote formulaire (voir setup DB), donc aucun CSS du plugin n'est injecte —
   le style vient entierement d'ici, pour rester coherent avec la charte de
   cette section (fond bleu marine #1A3A5C, texte blanc, accent dore). */
.tafelwit-newsletter-form { max-width: 480px; margin: 1.75rem auto 0; }
.tafelwit-newsletter-form .sib_signup_form { width: 100%; }
.tafelwit-newsletter-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}
.tafelwit-newsletter-form__input {
	flex: 1 1 220px;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	color: #2E2E2E;
	background: #FFFFFF;
}
.tafelwit-newsletter-form__input::placeholder { color: #6b7280; }
.tafelwit-newsletter-form__submit {
	flex: 0 0 auto;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 4px;
	background: #C8A45A;
	color: #1A3A5C;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.tafelwit-newsletter-form__submit:hover { background: #d9b876; }
/* Messages de succes/erreur (.sib-alert-message-*) : le plugin les stylise
   toujours lui-meme (fonds pastel auto-contrastes, voir
   mailin/form/css/default-form-message.css, injecte meme avec
   dependTheme=1) — on ajoute juste l'espacement pour les detacher du champ. */
.tafelwit-newsletter-form p.sib-alert-message { margin-top: 0.75rem; }

@media (max-width: 480px) {
	#tafelwit-map { height: 280px; }
}