/*
Theme Name: LoumKit (Blocksy)
Theme URI: https://loumkit.fr/
Description: Thème enfant de Blocksy pour LoumKit : polices locales de la maquette et finitions. Les couleurs, la typographie, l'en-tête et le pied de page se règlent dans Apparence > Personnaliser. Versionné dans max-icosi/loumkit-site, monté en lecture seule.
Author: LoumKit
Template: blocksy
Version: 0.21.1
Requires at least: 6.7
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loumkit-blocksy
*/

/* Ici, seulement ce que l'outil de personnalisation ne sait pas exprimer. Couleurs : palette Blocksy
   (1 bleu LoumKit, 2 bleu profond, 3 texte, 4 titres, 5 pointillés, 6 rose, 7 poudre, 8 blanc, 9 jaune…). */

/* Lissage des polices par défaut du navigateur, comme la maquette (Blocksy impose « antialiased », plus maigre sur Mac). */
body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

:focus-visible { outline: 3px solid var(--theme-palette-color-1); outline-offset: 3px; border-radius: 6px; }

/* ---------- En-tête (maquette : .site-header) ---------- */
/* Menu : trait rose soutenu sous le lien survolé ou courant. */
.ct-header [data-id="menu"] > ul > li > a { border-bottom: 3px solid transparent; }
.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a { border-bottom-color: var(--theme-palette-color-10); }

/* Compte : cercle cerclé de bleu (maquette : bouton compte). Le burger se règle dans Personnaliser (style « Plein »). */
.ct-header .ct-header-account .ct-account-item {
	width: 48px; height: 48px; border-radius: 50%;
	display: inline-grid; place-items: center;
	box-shadow: inset 0 0 0 2px var(--theme-palette-color-1);
	transition: background .15s;
}
.ct-header .ct-header-account .ct-account-item:hover { background: var(--theme-palette-color-1); --theme-icon-color: #fff; --theme-icon-hover-color: #fff; }

/* Panier (B4.1) : rond bleu plein, pastille jaune du nombre d'articles (maquette : .cart-btn, .cart-count).
   Couleurs de l'icône et de la pastille : Personnaliser > En-tête > Panier. */
.ct-header .ct-header-cart .ct-cart-item {
	position: relative; width: 48px; height: 48px; border-radius: 50%;
	display: inline-grid; place-items: center;
	background: var(--theme-palette-color-1); transition: background .15s;
}
.ct-header .ct-header-cart .ct-cart-item:hover { background: var(--theme-palette-color-2); }
/* 10 px entre les ronds (maquette : .header-actions { gap: 10px }). Blocksy met 10 px de chaque côté des éléments
   (#header [data-items] > * { margin: var(--margin, 0 10px) }) : la variable --margin est son réglage prévu pour cela. */
.ct-header [data-id="account"], .ct-header [data-id="cart"] { --margin: 0 0 0 10px; }
/* La pastille se place par rapport au rond, pas au petit conteneur de l'icône. */
.ct-header .ct-header-cart .ct-icon-container { position: static; }
.ct-header .ct-header-cart .ct-dynamic-count-cart {
	position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px;
	border-radius: 999px; font: 700 13px/24px "Bricolage Grotesque", system-ui, sans-serif; text-align: center;
	transform: none; inset-inline-start: auto;
}
.ct-header .ct-header-cart .ct-dynamic-count-cart[data-count="0"] { display: none; }

/* Panneau mobile : liens séparés par des pointillés (maquette : .main-nav en mobile). */
#offcanvas .mobile-menu a { font-size: 20px; }
#offcanvas .mobile-menu li { border-bottom: 2px dashed var(--theme-palette-color-5); }

/* ---------- Pied de page (maquette : .site-footer) ---------- */
.ct-footer { position: relative; overflow: hidden; }
/* Fleur : à 22 % du bord droit du conteneur de 1200 px, comme dans la maquette. */
.ct-footer::before {
	content: ""; position: absolute; right: max(22%, calc(50% - 336px)); top: -180px; width: 360px; height: 360px;
	background: url("assets/img/fleur-pied.svg") no-repeat center / contain; pointer-events: none;
}
.ct-footer > [data-row] { position: relative; }
.ct-footer .widget-title { font-family: "Bagel Fat One", "Bricolage Grotesque", system-ui, sans-serif; font-weight: 400; letter-spacing: 0; }
.ct-footer .widget_nav_menu ul { display: flex; flex-direction: column; gap: 10px; }
.ct-footer .widget_nav_menu li { margin: 0; }
.ct-footer .widget_media_image img { width: 240px; height: auto; display: block; }
#footer [data-column="widget-area-1"] .textwidget { --theme-font-size: 17px; } /* texte de marque (maquette : 17 px) */
.ct-footer a { text-decoration: none; }
.ct-footer a:hover { text-decoration: underline; }

/* Colonnes du bas : la marque prend la place d'une colonne et demie (maquette : 1fr 1.6fr). */
@media (min-width: 1000px) {
	.ct-footer [data-row*="middle"] > .ct-container { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (max-width: 760px) {
	.ct-header .ct-header-account .ct-account-item { width: 44px; height: 44px; }
	.ct-header .ct-header-cart .ct-cart-item { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Boutique (B4.2) : la page « Boutique » est servie comme une archive de WooCommerce (data-prefix="woo_categories") ;
   Blocksy n'y active pas la pleine largeur des blocs, comme sur les pages ([data-prefix="single_page"]). */
body.woocommerce-shop [class*="ct-container"] > article[class*="post"] { --has-boxed: var(--false); --has-wide: var(--true); }