/*
Theme Name: Beurre Noisette
Theme URI:
Description: Thème enfant de Blocksy pour Beurre Noisette. Charge les typographies de la marque et applique la charte aux éléments du thème. Le header et le pied de page sont construits avec les outils de Blocksy.
Author: Beurre Noisette
Template: blocksy
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: beurre-noisette
*/

/**
 * La palette n'est PAS redéfinie ici.
 *
 * Elle vit dans le plugin — assets/css/blocks.css — pour une raison précise :
 * cette feuille est chargée à l'identique côté public et dans l'éditeur de
 * blocs, ce qui garantit que ce que le client voit en rédigeant est ce qui sera
 * publié. Un style.css de thème, lui, n'entre pas dans l'éditeur.
 *
 * Ce fichier ne fait donc que deux choses : appliquer les typographies, et
 * accorder les éléments propres au thème — liens, boutons, formulaires,
 * WooCommerce — à la charte déjà définie.
 *
 * Les valeurs de repli après la virgule permettent au thème de rester correct
 * si le plugin est désactivé.
 */

body,
button,
input,
select,
textarea {
	font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	line-height: 1.65;
}

body {
	background: var( --bn-creme, #f5ede3 );
	color: var( --bn-chocolat, #3d2b1f );
}

h1,
h2,
h3,
h4,
.entry-title,
.woocommerce-loop-product__title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

a {
	color: var( --bn-noisette, #a6703e );
}

/* Boutons du thème et de WooCommerce ---------------------------------------- */

.button,
button,
input[type='submit'],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var( --bn-caramel, #d99a4e );
	color: var( --bn-chocolat, #3d2b1f );
	border: none;
	border-radius: 0;
	padding: 17px 30px;
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0.05em;
	transition: 0.18s;
	min-height: 48px;
}

.button:hover,
button:hover,
input[type='submit']:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var( --bn-noisette, #a6703e );
	color: var( --bn-creme, #f5ede3 );
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var( --bn-caramel, #d99a4e );
	color: var( --bn-chocolat, #3d2b1f );
}

/* Champs de formulaire ------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='search'],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: 1px solid rgba( 61, 43, 31, 0.25 );
	border-radius: 0;
	background: #fff;
	padding: 12px 14px;
	/* Sous 16 px, Safari sur iPhone zoome à la mise au point du champ : le
	   tunnel de commande devient pénible à remplir au doigt. */
	font-size: 16px;
	min-height: 48px;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var( --bn-noisette, #a6703e );
	outline-offset: 1px;
}

/* WooCommerce : accorder ce qui dépasse -------------------------------------- */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var( --bn-sauge, #8a9a7b );
	background: var( --bn-creme-2, #ede1d2 );
}

.woocommerce-error {
	border-top-color: var( --bn-framboise, #9b4a46 );
	background: var( --bn-creme-2, #ede1d2 );
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var( --bn-sauge, #8a9a7b );
}

.woocommerce-error::before {
	color: var( --bn-framboise, #9b4a46 );
}

.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var( --bn-noisette, #a6703e );
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
}

/* Le tunnel de commande occupe toute la largeur utile : c'est un formulaire,
   pas un article. */
.woocommerce-checkout .entry-content > .bn-funnel,
.woocommerce-checkout form.checkout {
	max-width: 46rem;
	margin-inline: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	* {
		transition: none !important;
	}
}