/*
Theme Name: Blocksy Child – MOMKIN Éditions
Theme URI: https://momkin-editions.com/
Description: Thème enfant personnalisé pour le site web de la maison d'édition MOMKIN – développé par OukiWeb & SifoAgency
Author: OukiWeb & SifoAgency
Author URI: https://oukiweb.com/ | https://sifoagency.com/
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child-momkin
*/

/* ============================
🎨 STYLES GÉNÉRAUX
============================ */

/* Définir la police des sections personnalisées */
.ct-payment-methods {
	font-family: 'Montserrat', sans-serif;
}

:root {
	/* --- Couleurs LIGHT --- */
	--theme-palette-color-1: #343399;
	/* Accent principal */
	--theme-palette-color-2: #ff6600;
	/* Accent hover */
	--theme-palette-color-3: #747474;
	/* Texte principal */
	--theme-palette-color-4: #D0BFDF;
	/* Titres / sous-titres */
	--theme-palette-color-5: #f3f3f3;
	/* Diviseurs */
	--theme-palette-color-6: #f2f2f2;
	/* Fond subtil */
	--theme-palette-color-7: #fefefe;
	/* Fond principal */
	--theme-palette-color-8: #ffffff;
	/* Fond clair alternatif */
	--theme-palette-color-9: #E65C00;
	/* Hover bouton */
	--theme-palette-color-10: #E0E0E0;
	/* Bordures */
	--theme-palette-color-11: #4d4dc2;
	/* Hover FAQ */
	--theme-palette-color-12: #fefefe;
	/* Blog unique title bg */

	/* --- Typographies --- */
	--font-heading: 'Montserrat', sans-serif;
	--font-heading-weight-regular: 400;
	--font-heading-weight-medium: 600;
	--font-heading-weight-bold: 700;
	--font-body: 'Inter', sans-serif;
	
	/* === TAILLES RESPONSIVE === */
	/* Desktop (défaut 1024px+) */
	--font-size-xs: 0.75rem;      /* 12px */
	--font-size-sm: 0.875rem;     /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-lg: 1.125rem;     /* 18px */
	--font-size-xl: 1.25rem;      /* 20px */
	--font-size-2xl: 1.5rem;      /* 24px */
	--font-size-3xl: 1.875rem;    /* 30px */
	--font-size-4xl: 2.25rem;     /* 36px */
	
	/* Titres hiérarchiques */
	--font-size-h1: var(--font-size-4xl);
	--font-size-h2: var(--font-size-3xl);
	--font-size-h3: var(--font-size-2xl);
	--font-size-h4: var(--font-size-xl);
	--font-size-h5: var(--font-size-lg);
	--font-size-h6: var(--font-size-base);
}

:root.blocksy-dark-skin {
	--theme-palette-color-1: #8B80F6;
	--theme-palette-color-2: #FF6600;
	--theme-palette-color-3: #EAEAEA;
	--theme-palette-color-4: #3A3050;
	--theme-palette-color-5: #1F1F2B;
	--theme-palette-color-6: #1C1C24;
	--theme-palette-color-7: #1A1A1A;
	--theme-palette-color-8: #121212;
	--theme-palette-color-9: #E65C00;
	--theme-palette-color-10: #2A2A2A;
	--theme-palette-color-11: #AFA3FF;
	--theme-palette-color-12: #AFA3FF;
}



/* ============================
🎨 TYPOGRAPHIE RESPONSIVE - HIÉRARCHIE OPTIMISÉE
============================ */

/* Configuration de base */
html {
	font-size: 100%; /* Respecte les préférences utilisateur */
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Hiérarchie des titres */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight-medium);
	line-height: 1.3;
	margin-bottom: 1rem;
}

h1 { 
	font-size: var(--font-size-h1); 
	font-weight: var(--font-heading-weight-bold);
}
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* Classes utilitaires de taille */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* ============================
🛒 STYLES WOOCOMMERCE
============================ */


/* ---------- 🎟️ COUPONS ---------- */

/* Bouton "Appliquer un coupon" – état normal */
.coupon .button {
	background-color: #d0bfdf !important;
	color: white !important;
}

/* Bouton "Appliquer un coupon" – survol */
.coupon .button:hover {
	background-color: #ff6600 !important;
}


/* ---------- 👤 MON COMPTE ---------- */

/* Onglet actif dans "Mon compte" */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active a {
	background-color: #343399;
	color: white;
}

/* Onglet au survol */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a:hover {
	background-color: #d0bfdf;
	color: #1a1a1a;
}

/* Style général des onglets */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	letter-spacing: 0.00625rem; /* 0.1px converti */
}


/* ---------- 💳 PAIEMENT ---------- */

/* Conteneur des méthodes de paiement */
ul.wc_payment_methods {
	background-color: #f5f5f5;
	border-radius: 1rem; /* 16px converti */
	padding: 1.5rem;
	border: 0.0625rem solid #ddd; /* 1px converti */
}

/* Méthodes individuelles */
.wc_payment_method {
	margin-bottom: 1rem;
	padding: 1rem;
	border-radius: 0.75rem; /* 12px converti */
	background-color: #ffffff;
	border: 0.0625rem solid #ccc; /* 1px converti */
	transition: border-color 0.3s ease;
}

/* Sélection ou hover d'une méthode */
.wc_payment_method:hover,
.wc_payment_method input:checked+label {
	border-color: #0073aa;
	background-color: #f0f8ff;
}

/* Label des moyens de paiement */
.wc_payment_method label {
	font-size: var(--font-size-base);
	font-weight: 600;
	color: #747474;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Logos des moyens de paiement */
.wc_payment_method img {
	height: 1.5rem; /* 24px converti */
}

/* Icônes Stripe (cartes) */
.wc-stripe-card-icons-container img {
	height: 1.25rem; /* 20px converti */
	margin-left: 0.3125rem; /* 5px converti */
}

/* Contenu dynamique de chaque méthode (ex: infos PayPal) */
.payment_box {
	margin-top: 1rem;
	padding: 1rem;
	background: #f9f9f9;
	border-left: 0.25rem solid #0073aa; /* 4px converti */
	color: #222;
	font-size: var(--font-size-sm);
}

/* Texte dans les boîtes de paiement */
.payment_box p,
.payment_box label {
	color: #747474 !important;
}

/* Texte CGV */
.woocommerce-terms-and-conditions-checkbox-text {
	color: #222;
	font-size: var(--font-size-sm);
}

/* Bouton principal "Commander" */
#place_order {
	background-color: #ff6600;
	color: white;
	border: none;
	padding: 1rem 2rem;
	font-size: var(--font-size-lg);
	border-radius: 3.125rem; /* 50px converti */
	cursor: pointer;
	transition: background 0.3s ease;
}

/* Hover du bouton "Commander" */
#place_order:hover {
	background-color: #e65c00;
}


/* ---------- 🧾 FORMULAIRES CHECKOUT ---------- */

/* Champs de formulaire (input, textarea, select) */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: #f2f2f2;
	border: 0.0625rem solid #ccc; /* 1px converti */
	border-radius: 0.75rem; /* 12px converti */
	padding: 0.7rem;
	font-size: var(--font-size-base);
}

/* Style du placeholder */
.woocommerce form .form-row ::placeholder {
	color: #777;
	opacity: 1;
}

/* Focus des champs : UX améliorée */
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: #0073aa;
	background-color: #ffffff;
	outline: none;
}

/* ==========================================================================
🚚 CHECKOUT — Méthodes de livraison stylisées avec logos
========================================================================== */

/* Masquer les radios mais les garder fonctionnels */
ul#shipping_method input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Conteneur des méthodes */
ul#shipping_method {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* 12px converti */
}

/* Chaque option */
ul#shipping_method li {
	margin: 0;
}

/* Label stylisé */
ul#shipping_method label {
	display: flex;
	align-items: center;
	gap: 0.75rem; /* 12px converti */
	padding: 0.75rem 1rem; /* 12px 16px converti */
	border: 0.125rem solid var(--theme-palette-color-10); /* 2px converti */
	/* bordure subtile */
	border-radius: 0.5rem; /* 8px converti */
	background-color: var(--theme-palette-color-6);
	/* fond subtil */
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--theme-palette-color-3);
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.04); /* 1px 4px converti */
	position: relative;
	box-sizing: border-box;
}

/* Hover */
ul#shipping_method label:hover {
	background-color: var(--theme-palette-color-5);
	border-color: var(--theme-palette-color-2);
	color: var(--theme-palette-color-1);
}

/* Méthode sélectionnée */
ul#shipping_method input[type="radio"]:checked+label {
	border-color: var(--theme-palette-color-1);
	background-color: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
	box-shadow: 0 0 0 0.125rem var(--theme-palette-color-1) inset; /* 2px converti */
}

/* Icônes des transporteurs */
ul#shipping_method label::before {
	content: "";
	display: inline-block;
	width: 1.5rem; /* 24px converti */
	height: 1.5rem; /* 24px converti */
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* Message promotionnel */
ul#shipping_method label::after {
	font-style: italic;
	font-weight: 700;
	font-size: var(--font-size-xs);
	margin-left: auto;
	color: var(--theme-palette-color-2);
	box-sizing: border-box;
}

/* Prix toujours aligné à droite */
ul#shipping_method label span.woocommerce-Price-amount {
	margin-left: auto;
	font-weight: 600;
}

/* --- MONDIAL RELAY --- */
ul#shipping_method label[for="shipping_method_0_boxtal_connect1"]::before {
	background-image: url('https://momkineditions.com/wp-content/uploads/2025/icons-transport/Mondial_Relay.svg');
}

ul#shipping_method label[for="shipping_method_0_boxtal_connect1"]::after {
	content: "Offert dès 59€ d'achat";
}

/* --- UPS POINT RELAIS --- */
ul#shipping_method label[for="shipping_method_0_boxtal_connect3"]::before {
	background-image: url('https://momkineditions.com/wp-content/uploads/2025/icons-transport/ups-icon.svg');
}

/* --- SHOP2SHOP --- */
ul#shipping_method label[for="shipping_method_0_boxtal_connect4"]::before {
	background-image: url('https://momkineditions.com/wp-content/uploads/2025/icons-transport/shop2shop.svg');
}

ul#shipping_method label[for="shipping_method_0_boxtal_connect4"]::after {
	content: "Offert dès 59€ d'achat";
}

/* --- CHRONOPOST --- */
ul#shipping_method label[for="shipping_method_0_boxtal_connect6"]::before {
	background-image: url('https://momkineditions.com/wp-content/uploads/2025/icons-transport/chronopost.svg');
}

/* --- COLISSIMO DOMICILE --- */
ul#shipping_method label[for="shipping_method_0_boxtal_connect5"]::before {
	background-image: url('https://momkineditions.com/wp-content/uploads/2025/icons-transport/colissimo-logo.svg');
}

/* ==========================================================================
📱 Responsive — Adaptation mobile
========================================================================== */
@media screen and (max-width: 48rem) { /* 768px converti */
	ul#shipping_method label {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0.5rem; /* 8px converti */
	}

	ul#shipping_method label::after {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-top: 0.25rem; /* 4px converti */
	}
}


/* ---------- 🛍️ MINI PANIER (OFF-CANVAS / HEADER) ---------- */

/* Bouton "Commander" dans le mini-panier */
.woocommerce-mini-cart__buttons .checkout {
	background-color: #ff6600;
	color: white;
	border: 0.125rem solid #ff6600; /* 2px converti */
	border-radius: 3.125rem; /* 50px converti */
	padding: 0.6rem 1.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

/* Hover "Commander" */
.woocommerce-mini-cart__buttons .checkout:hover {
	background-color: #e65c00;
	border-color: #e65c00;
}

/* Bouton "Voir le panier" – style contour */
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout) {
	background-color: transparent;
	color: #ff6600;
	border: 0.125rem solid #ff6600; /* 2px converti */
	border-radius: 3.125rem; /* 50px converti */
	padding: 0.6rem 1.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

/* Hover "Voir le panier" */
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout):hover {
	background-color: #ff6600;
	color: white;
}

/* ---------- 🛍️ En réapprovisionnement ---------- */

/* Quantité des stock fiche produit */
.woocommerce div.product p.stock.available-on-backorder {
	color: var(--theme-palette-color-13);
	font-weight: 500;
}




/* ============================
Bandeau cookies – Visibilité & contraste corrigés
============================ */

.cookie-notification[data-type="type-1"] .container {
	border: 0.0625rem solid rgba(255, 255, 255, 0.08); /* 1px converti */
	/* Bordure discrète */
	border-radius: 1.125rem !important; /* 18px converti */
	padding: 1.5rem;
	max-width: 46.25rem; /* 740px converti */
	margin: 1rem auto;
	box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.05); /* 4px 10px converti */
	color: var(--theme-palette-color-8);
	/* Texte par défaut */
}

/* Texte général */
.cookie-notification .ct-cookies-content p {
	margin: 0;
	line-height: 1.6;
	color: var(--theme-palette-color-7);
}

/* Texte accentué */
.cookie-notification .ct-cookies-content strong,
.cookie-notification .ct-cookies-content b {
	color: var(--theme-palette-color-6);
	font-weight: 600;
}

/* Groupe de boutons */
.cookie-notification .ct-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Tous les boutons */
.cookie-notification .ct-button {
	padding: 0.4rem 1.2rem;
	font-size: var(--font-size-sm);
	font-weight: 500;
	border-radius: 1.25rem; /* 20px converti */
	font-family: inherit;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

/* Bouton Accepter */
.cookie-notification .ct-cookies-accept-button {
	background-color: var(--theme-palette-color-2);
	color: white;
}

.cookie-notification .ct-cookies-accept-button:hover {
	background-color: var(--theme-palette-color-9);
}

/* Bouton Refuser */
.cookie-notification .ct-cookies-decline-button {
	background-color: transparent;
	border: 0.0625rem solid var(--theme-palette-color-3); /* 1px converti */
	color: var(--theme-palette-color-3);
}

.cookie-notification .ct-cookies-decline-button:hover {
	background-color: var(--theme-palette-color-3);
	color: white;
}

/* === Mode sombre === */
html.blocksy-dark-skin .cookie-notification[data-type="type-1"] .container {
	background-color: #1A1A1A;
	/* Fond plus neutre */
	color: #EAEAEA;
	border-color: rgba(255, 255, 255, 0.06);
}

html.blocksy-dark-skin .cookie-notification .ct-cookies-content p {
	color: #EAEAEA;
}

html.blocksy-dark-skin .cookie-notification .ct-cookies-content strong,
html.blocksy-dark-skin .cookie-notification .ct-cookies-content b {
	color: #8B80F6;
	/* Accent en dark */
}

/* ============================
📩 FORMULAIRE NEWSLETTER – Momkin
============================ */

/* Champ email – style principal */
.ct-newsletter-subscribe-form-elements input[type="email"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 0.0625rem solid rgba(0, 0, 0, 0.05); /* 1px converti */
	/* encadrement presque invisible */
	border-radius: 0.25rem; /* 4px converti */
	background-color: var(--theme-palette-color-7);
	color: var(--theme-palette-color-3);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Focus : halo + encadrement accentué */
.ct-newsletter-subscribe-form-elements input[type="email"]:focus {
	border-color: var(--theme-palette-color-1);
	/* bleu Momkin */
	box-shadow: 0 0 0 0.125rem rgba(52, 51, 153, 0.2); /* 2px converti */
	/* halo doux */
	outline: none;
}

/* Placeholder stylé et lisible */
.ct-newsletter-subscribe-form-elements input[type="email"]::placeholder {
	color: rgba(116, 116, 116, 0.7);
	opacity: 1;
}

/* Responsive : ajustement des titres */
@media (max-width: 48rem) { /* 768px converti */
	.wp-block-heading.widget-title {
		font-size: var(--font-size-xl) !important;
	}
}

@media (max-width: 30rem) { /* 480px converti */
	.wp-block-heading.widget-title {
		font-size: var(--font-size-lg) !important;
	}
}

/* ============================
📱 RESPONSIVE BREAKPOINTS - MOBILE FIRST
============================ */

/* === TABLETTE (768px - 1023px) === */
@media screen and (min-width: 48rem) and (max-width: 63.9375rem) {
	:root {
		/* Ajustement des tailles pour tablette */
		--font-size-xs: 0.8125rem;    /* 13px */
		--font-size-sm: 0.9375rem;    /* 15px */
		--font-size-base: 1.0625rem;  /* 17px */
		--font-size-lg: 1.1875rem;    /* 19px */
		--font-size-xl: 1.3125rem;    /* 21px */
		--font-size-2xl: 1.625rem;    /* 26px */
		--font-size-3xl: 2rem;        /* 32px */
		--font-size-4xl: 2.25rem;     /* 36px */
	}
}

/* === MOBILE (320px - 767px) === */
@media screen and (max-width: 47.9375rem) {
	:root {
		/* Optimisation mobile */
		--font-size-xs: 0.875rem;     /* 14px */
		--font-size-sm: 0.9375rem;    /* 15px */
		--font-size-base: 1.0625rem;  /* 17px - évite zoom iOS */
		--font-size-lg: 1.1875rem;    /* 19px */
		--font-size-xl: 1.25rem;      /* 20px */
		--font-size-2xl: 1.5rem;      /* 24px */
		--font-size-3xl: 1.75rem;     /* 28px */
		--font-size-4xl: 2rem;        /* 32px */
	}
	
	/* Boutons tactiles optimisés */
	#place_order,
	.woocommerce-mini-cart__buttons .checkout,
	.woocommerce-mini-cart__buttons .wc-forward,
	.cookie-notification .ct-button {
		min-height: 2.75rem; /* 44px minimum tactile */
		font-size: 1.0625rem !important; /* 17px - évite zoom iOS */
	}
	
	/* Champs de formulaire mobile */
	.woocommerce form .form-row .input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.ct-newsletter-subscribe-form-elements input[type="email"] {
		font-size: 1rem !important; /* 16px minimum pour éviter zoom iOS */
		min-height: 2.75rem;
	}
}

/* === TRÈS PETITS ÉCRANS (320px - 480px) === */
@media screen and (max-width: 30rem) {
	:root {
		/* Tailles encore plus compactes */
		--font-size-3xl: 1.625rem;    /* 26px */
		--font-size-4xl: 1.875rem;    /* 30px */
	}
	
	/* Espacement réduit */
	ul#shipping_method {
		gap: 0.5rem;
	}
	
	ul#shipping_method label {
		padding: 0.625rem 0.875rem;
		gap: 0.5rem;
	}
}