/*
Theme Name: com'ing
Theme URI: https://comingagency.com
Author: com'ing agency (build: Devon, agence com'ing-virtual)
Author URI: https://comingagency.com
Description: Thème bloc (FSE) custom et léger pour com'ing, agence de communication digitale (Tunisie). Global styles centralisés dans theme.json (couleurs, typographie, boutons, arrondis, animations). Bibliothèque de patterns réutilisables dans /patterns. Header/footer en template parts éditables dans /parts. Aucune dépendance page-builder.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coming
*/

/*
Base transversale (accessibilité, header/footer, composants hérités). La charte (couleurs, typo, boutons,
arrondis) vit dans theme.json ; la composition des sections dans assets/css/layout.css ; les animations dans
assets/css/motion.css. Ce fichier ne contient aucune valeur de charte en dur.
*/

/* Skip link (premier élément focusable) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--preset--color--white);
	padding: 0.75em 1.25em;
	border-radius: var(--wp--custom--radius--button);
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Focus visible net partout */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-900);
	outline-offset: 3px;
}

/* Tap targets >= 44x44px sur mobile */
@media (max-width: 767px) {
	.wp-block-button__link,
	.wp-block-navigation-item a,
	a.coming-filter-pill {
		min-height: 44px;
		min-width: 44px;
	}
}

/* Ancres sous le header collant */
html {
	scroll-padding-top: calc(var(--coming-header-h, 84px) + 16px);
}

/* ---------------------------------------------------------------------------
   HEADER (parts/header.html) : collant, hauteur réservée constante (pas de CLS)
   --------------------------------------------------------------------------- */
:root { --coming-header-h: 84px; }
@media (max-width: 767px) { :root { --coming-header-h: 68px; } }
/* Le bloc « partie de modèle » enveloppe l'en-tête : sticky doit etre sur l'enveloppe (sinon l'en-tête ne colle jamais : son parent a la meme hauteur que lui). */
.wp-block-template-part:has(> .coming-site-header) { position: sticky; top: 0; z-index: 50; }
.coming-site-header {
	z-index: 50;
	min-height: var(--coming-header-h);
	border-bottom: 1px solid transparent;
	background-color: color-mix(in srgb, var(--wp--preset--color--beige-050) 94%, transparent);
}
.coming-site-header .wp-block-site-logo img { height: auto; display: block; }
.coming-footer-logo img { height: auto; display: block; }
.coming-site-header .wp-block-navigation { gap: 1rem; }
.coming-site-header .wp-block-navigation-item__content { white-space: nowrap; } /* « À propos » jamais coupé sur 2 lignes (revue Theo 22/10, T3) */
.coming-site-header .wp-block-navigation-item a,
.coming-footer-nav .wp-block-navigation-item a { text-decoration: none; }
/* ---- Direction B (Farah, 2026-10-28) : navigation numerotee 01-06 (compteur CSS : renumerote tout seul), trait au survol, plein sur la page active, grand CTA ---- */
@media (min-width: 1024px) {
	.coming-site-header .wp-block-navigation__container { counter-reset: coming-nav; align-items: center; gap: 0; }
	.coming-site-header .wp-block-navigation-link { counter-increment: coming-nav; }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.75rem; color: var(--wp--preset--color--ink-900); }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content::before { content: counter(coming-nav, decimal-leading-zero); content: counter(coming-nav, decimal-leading-zero) / ""; align-self: flex-start; margin-top: 0.6rem; font: italic 300 0.75rem / 1 var(--wp--preset--font-family--accent); font-variation-settings: "opsz" 144; letter-spacing: 0.02em; color: var(--wp--preset--color--olive-700); transition: color 200ms; }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 7px; height: 1.5px; background: var(--wp--preset--color--olive-900); transform: scaleX(0); transform-origin: left center; transition: transform 400ms var(--wp--custom--motion--ease-io); }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content:hover::after,
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content[aria-current="page"]::after { transform: scaleX(1); }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content:hover::before { color: var(--wp--preset--color--ink-900); }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--wp--preset--color--ink-900); outline-offset: -2px; border-radius: 4px; }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--olive-900); font-weight: 600; }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content[aria-current="page"]::before { color: var(--wp--preset--color--olive-900); font-style: normal; font-weight: 500; }
	/* grand CTA : 52 px, fleche dans un disque (le bloc Bouton reste editable) */
	.coming-site-header .coming-cta-header .wp-block-button__link { display: inline-flex; align-items: center; gap: 1rem; min-height: 52px; padding: 0.5rem 0.5rem 0.5rem 1.5rem; font-weight: 600; white-space: nowrap; }
	.coming-site-header .coming-cta-header .wp-block-button__link::after { content: "→"; content: "→" / ""; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--beige-050); color: var(--wp--preset--color--olive-900); font-weight: 500; transition: transform 200ms var(--wp--custom--motion--ease-out); }
	.coming-site-header .coming-cta-header .wp-block-button__link:hover::after,
	.coming-site-header .coming-cta-header .wp-block-button__link:focus-visible::after { transform: translateX(3px); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content { padding: 0 0.5rem; }
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content::after { left: 0.5rem; right: 0.5rem; }
	.coming-site-header .coming-cta-header .wp-block-button__link { padding-left: 1.25rem; }
	.coming-site-header .wp-block-navigation { gap: 0.5rem; }
}
/* Telephone : seulement dans le menu ouvert (mobile / tablette), jamais numerote, sous le bouton */
.coming-site-header .coming-nav-tel { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.coming-nav-tel { display: block; counter-increment: none; border: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.coming-nav-tel > .wp-block-navigation-item__content { min-height: 56px; font-size: 1.125rem; font-weight: 500; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.coming-nav-tel > .wp-block-navigation-item__content::before { content: none; min-width: 0; }
/* Menu ouvert (mobile / tablette) : liste numerotee, numero olive-300, page active = olive-300 + trait */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { counter-reset: coming-nav; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link { counter-increment: coming-nav; width: 100%; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link:nth-last-of-type(2) { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link > .wp-block-navigation-item__content { display: flex; align-items: baseline; gap: 1rem; min-height: 64px; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link > .wp-block-navigation-item__content::before { content: counter(coming-nav, decimal-leading-zero); content: counter(coming-nav, decimal-leading-zero) / ""; min-width: 2.2rem; font: italic 300 clamp(0.875rem, 3.4vw, 1.1rem) / 1 var(--wp--preset--font-family--accent); color: var(--wp--preset--color--olive-300); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link > .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--olive-300); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link > .wp-block-navigation-item__content[aria-current="page"]::before { color: var(--wp--preset--color--white); font-style: normal; }
.wp-block-navigation__responsive-container.is-menu-open .coming-cta-header .wp-block-button__link { background: var(--wp--preset--color--white); color: var(--wp--preset--color--olive-900); min-height: 56px; justify-content: space-between; }
.wp-block-navigation__responsive-container.is-menu-open .coming-cta-header .wp-block-button__link::after { content: "→"; content: "→" / ""; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--olive-900); color: var(--wp--preset--color--white); }
@media (prefers-reduced-motion: reduce) {
	.coming-site-header .wp-block-navigation-link > .wp-block-navigation-item__content::after,
	.coming-site-header .coming-cta-header .wp-block-button__link::after { transition: none; }
}

/* Sélecteur de langue Polylang : toujours en ligne (FR / EN), jamais empilé */
.wp-block-polylang-language-switcher,
.coming-header-lang,
.coming-footer-lang {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
}
.wp-block-polylang-language-switcher li { display: inline-flex; margin: 0; padding: 0; list-style: none; }
.wp-block-polylang-language-switcher li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.6; }
.wp-block-polylang-language-switcher a { text-decoration: none; padding: 0.5rem 0.2rem; display: inline-block; }
.wp-block-polylang-language-switcher .current-lang a { text-decoration: underline; text-underline-offset: 4px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-polylang-language-switcher { justify-content: flex-start; }

/* Menu mobile plein écran sur fond sombre : liens en grand */
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem var(--wp--custom--spacing--gutter) 2rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-size: clamp(2rem, 9vw, 3.25rem); font-weight: 500; letter-spacing: -0.03em; padding: 0.3rem 0; color: var(--wp--preset--color--white); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link { width: 100%; justify-content: center; }
@media (max-width: 767px) {
	.coming-site-header .wp-block-navigation:not(.is-responsive) .coming-cta-header { display: none; }
}

/* Bouton hamburger / croix du bloc Navigation (contact-refonte.md §3.8) : icône 3 traits, sans fond ni pilule,
   cible 48 x 48 px. Les !important neutralisent l'héritage du style bouton global (fond olive, rayon 999px). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	-webkit-appearance: none;
	appearance: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0.5rem !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
}
/* Hamburger jusqu'à 1023 px (le core bascule à 600 px) : état replié forcé en CSS, sans JS (validé Farah, §3.8 d) */
@media (max-width: 1023px) {
	.coming-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-grid !important; }
	.coming-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
.wp-block-navigation__responsive-container-close { display: inline-grid; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; fill: currentColor; }
.wp-block-navigation__responsive-container-open:hover { color: var(--wp--preset--color--olive-900); }
.wp-block-navigation__responsive-container-open:focus-visible { outline: 2px solid var(--wp--preset--color--ink-900); outline-offset: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--white); }
.wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 0; }
.coming-site-header .wp-block-navigation__responsive-container-open { margin-right: -12px; } /* aligne le trait sur la gouttière */
/* Panneau ouvert (= maquette Uma) : liens alignés à gauche dans la gouttière, jamais collés au bord droit ;
   le core reprend sinon la justification « droite » du menu de bureau. */
.coming-site-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem var(--wp--custom--spacing--gutter) 2rem !important; }
.coming-site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) { align-items: flex-start !important; justify-content: flex-start !important; width: 100%; }
.coming-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons { justify-content: flex-start; width: 100%; }
/* FR / EN sur le panneau sombre : blanc (l'olive des liens serait illisible sur ink-900) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-polylang-language-switcher a { color: var(--wp--preset--color--white); }

/* ---------------------------------------------------------------------------
   FOOTER (parts/footer.html) : grille auto-fit, titres jamais coupés en plein mot
   --------------------------------------------------------------------------- */
.coming-site-footer { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.coming-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2.5rem;
	padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2.5rem;
}
.coming-footer-grid > * { margin-block: 0 !important; min-width: 0; }
.coming-footer-title {
	font-size: 0.8125rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--olive-300) !important;
	margin-bottom: 1.1rem !important;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
	white-space: nowrap;
}
.coming-site-footer a { color: inherit; text-decoration: none; }
.coming-site-footer a[href^="mailto:"] { white-space: nowrap; } /* l'e-mail tient sur une seule ligne */
.coming-site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Colonne Navigation = même texte que Coordonnées : Petit texte, graisse 400, interligne 1.5, liens rapprochés (écrase les 500 / 0.975rem du bloc Navigation de theme.json) */
.coming-footer-nav, .coming-footer-nav .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--small); font-weight: 400; line-height: 1.5; }
.coming-footer-nav .wp-block-navigation__container { gap: 0.25rem; }
.coming-footer-nav .wp-block-navigation-item__content { padding-block: 0.15rem; }
.coming-site-footer address { font-style: normal; line-height: 1.7; color: var(--wp--preset--color--ink-200); }
.coming-site-footer .wp-block-social-links .wp-social-link a { padding: 0.6rem; }
.coming-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-block: 1.5rem 2.5rem; font-size: 0.875rem; color: var(--wp--preset--color--ink-200); gap: 1rem; }
.coming-footer-bottom a { display: inline-block; padding-block: 0.6rem; }

/* ---------------------------------------------------------------------------
   PAGE CONTACT : marge gauche manquante (le contenu collait au bord) -> les templates « sans titre »
   passent en mise en page contrainte (padding global) ; ceinture de sécurité ici pour le pattern contact-intro.
   --------------------------------------------------------------------------- */
.coming-main-free .wp-block-post-content > :not(.alignfull) {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--spacing--gutter);
}

/* ---------------------------------------------------------------------------
   Composants hérités des patterns précédents (portfolio, services historiques) : conservés tant que
   les templates Réalisations / Blog n'ont pas été refondus (étape suivante).
   --------------------------------------------------------------------------- */
.coming-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1199px) { .coming-grid-3 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) { .coming-grid-3 { grid-template-columns: 1fr !important; } }
.coming-grid-lines { gap: 0 !important; }
.coming-grid-lines > * { border: 1px solid var(--wp--preset--color--ink-900); }
.coming-grid-lines--on-dark > * { border-color: var(--wp--preset--color--olive-600); }
.coming-services--dark a { color: var(--wp--preset--color--beige-100); }
.coming-service-index { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: var(--wp--preset--font-size--xx-large); color: var(--wp--preset--color--olive-300); margin-bottom: 0.25em; }
.coming-vertical-label { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; flex-shrink: 0; }
@media (max-width: 767px) { .coming-vertical-label { display: none; } }
a.coming-filter-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 1.1em; border-radius: var(--wp--custom--radius--button); border: 1.5px solid var(--wp--preset--color--olive-600); color: var(--wp--preset--color--ink-900); text-decoration: none; }
a.coming-filter-pill[aria-current="page"] { background: var(--wp--preset--color--olive-900); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--olive-900); font-weight: 600; }