/**
 * Internet Création — habillage global du site.
 * Étend les gabarits Astra (article, archives, recherche, 404, pages,
 * commentaires, pagination, WooCommerce) avec la palette et la typo du magazine.
 * Chargé sur TOUTES les pages. L'accueil ajoute par-dessus assets/home.css.
 *
 * Tout est bâti sur des classes Astra / WordPress / WooCommerce stables et
 * préfixé/scopé pour limiter les effets de bord (surtout via #content).
 */

/* =========================================================================
 *  1. Jetons (mêmes valeurs que .ic-home dans home.css)
 * ===================================================================== */
:root {
	--ic-ink:         #211f1c;
	--ic-body:        #55514b;
	--ic-accent:      #e0562d;
	--ic-accent-dark: #c0431f;
	--ic-accent-tint: #fff3ec;
	--ic-blue:        #046bd2;
	--ic-green:       #2e9e6b;
	--ic-plum:        #8a4f9e;
	--ic-line:        #ece6db;
	--ic-paper:       #ffffff;
	--ic-cream:       #fbf4e9;
	--ic-panel:       #eef3fb;
	--ic-radius:      10px;
	--ic-read:        44rem;   /* largeur de lecture confort */
	--ic-serif:       "Fraunces", Georgia, "Times New Roman", serif;
	--ic-shadow:      0 1px 2px rgba(20, 18, 15, 0.04), 0 14px 30px -14px rgba(20, 18, 15, 0.14);
}

/* =========================================================================
 *  2. Base
 * ===================================================================== */
/* Astra peint le fond de page en bleu froid (--ast-global-color-4) via sa CSS
 * dynamique chargée tardivement : on impose un blanc chaud. */
body {
	background-color: #fdfbf7 !important;
	color: var(--ic-body);
}

/* Titres en serif sur tout le contenu (hors en-tête / pied de site). */
#content :is(h1, h2, h3, h4),
.entry-title,
.ast-archive-title,
.page-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.related.products > h2,
.cross-sells > h2,
.cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.comment-reply-title,
.comments-title,
#secondary .widget-title,
.footer-widget-area .widget-title {
	font-family: var(--ic-serif);
	font-optical-sizing: auto;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ic-ink);
}

/* Liens dans le corps de texte. */
#content .entry-content a:not(.button):not(.wp-block-button__link):not(.wp-element-button),
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--ic-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

#content .entry-content a:not(.button):not(.wp-block-button__link):not(.wp-element-button):hover {
	color: var(--ic-accent-dark);
}

/* =========================================================================
 *  3. Boutons (Astra + Gutenberg + recherche + WooCommerce)
 * ===================================================================== */
#content .wp-block-button__link,
#content .wp-element-button,
.ast-button,
.menu-toggle,
input[type="submit"],
.wp-block-search__button,
.search-form .search-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: inline-block;
	background: var(--ic-accent) !important;
	color: #fff !important;
	border: 1px solid var(--ic-accent) !important;
	border-radius: 8px;
	padding: 0.72rem 1.4rem;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.4;
	transition: background 0.15s ease, transform 0.15s ease;
}

#content .wp-block-button__link:hover,
#content .wp-element-button:hover,
.ast-button:hover,
input[type="submit"]:hover,
.wp-block-search__button:hover,
.search-form .search-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--ic-accent-dark) !important;
	transform: translateY(-1px);
}

/* Bouton secondaire WooCommerce (ex. « Mettre à jour le panier »). */
.woocommerce button[name="update_cart"],
.woocommerce .button.wc-backward {
	background: transparent !important;
	color: var(--ic-ink) !important;
	border-color: var(--ic-ink) !important;
}

/* =========================================================================
 *  4. Champs de formulaire
 * ===================================================================== */
#content input[type="text"],
#content input[type="email"],
#content input[type="url"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="password"],
#content input[type="search"],
#content textarea,
#content select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single {
	border: 1px solid var(--ic-line);
	border-radius: 8px;
	background: #fff;
	padding: 0.6rem 0.75rem;
}

#content input:focus,
#content textarea:focus,
#content select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: 2px solid var(--ic-accent);
	outline-offset: 1px;
	border-color: var(--ic-accent);
}

/* =========================================================================
 *  5. Article seul
 * ===================================================================== */
/* La « feuille » blanche de l'article se resserre autour du texte,
 * le fond chaud de la page respire autour. */
.single-post .ast-article-single,
.page:not(.page-template-front-page) .ast-article-single {
	max-width: 52rem;
	margin-inline: auto;
	border: 1px solid var(--ic-line);
	border-radius: var(--ic-radius);
}

.single-post .entry-header {
	max-width: var(--ic-read);
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--ic-accent);
}

.single-post .entry-title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.15;
}

.single-post .entry-meta {
	margin-top: 0.9rem;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ic-body);
}

.single-post .entry-meta a {
	color: var(--ic-accent-dark);
	text-decoration: none;
}

/* Largeur de lecture : on contraint le texte, pas les images / blocs larges. */
.single-post .entry-content > :where(p, ul, ol, h2, h3, h4, h5, blockquote, pre, dl, .wp-block-list, .wp-block-quote) {
	max-width: var(--ic-read);
	margin-inline: auto;
}

.single-post .entry-content h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-top: 2.4em;
}

.single-post .entry-content h3 {
	font-size: 1.3rem;
	margin-top: 2em;
}

.entry-content blockquote {
	border-left: 3px solid var(--ic-accent);
	margin-left: 0;
	padding-left: 1.25rem;
	font-family: var(--ic-serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--ic-ink);
}

.entry-content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--ic-line);
	max-width: var(--ic-read);
	margin-inline: auto;
}

.entry-content figcaption,
.wp-caption-text {
	font-size: 0.82rem;
	color: var(--ic-body);
	opacity: 0.8;
}

/* Navigation article précédent / suivant */
.post-navigation {
	max-width: var(--ic-read);
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	border-top: 1px solid var(--ic-line);
	padding-top: 1.25rem;
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.post-navigation a {
	color: var(--ic-accent-dark);
	text-decoration: none;
	font-weight: 600;
}

/* Commentaires */
.comments-area {
	max-width: var(--ic-read);
	margin-inline: auto;
}

/* =========================================================================
 *  6. Archives / blog / catégories / recherche
 * ===================================================================== */
.ast-archive-description {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--ic-accent);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	padding-bottom: 1rem;
}

.ast-archive-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.ast-archive-description .ast-archive-description-content {
	margin-top: 0.75rem;
	max-width: 60ch;
}

/* Boucle : grille de cartes façon accueil */
.blog .site-main .ast-row,
.archive .site-main .ast-row,
.search-results .site-main .ast-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0;
}

.blog .site-main .ast-article-post.ast-full-width,
.archive .site-main .ast-article-post.ast-full-width,
.search-results .site-main .ast-article-post.ast-full-width {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.ast-article-post {
	background: var(--ic-paper);
	border: 1px solid var(--ic-line);
	border-top: 3px solid var(--ic-accent);
	border-radius: var(--ic-radius);
	overflow: hidden;
}

.ast-article-post:nth-child(4n + 2) { border-top-color: var(--ic-blue); }
.ast-article-post:nth-child(4n + 3) { border-top-color: var(--ic-green); }
.ast-article-post:nth-child(4n + 4) { border-top-color: var(--ic-plum); }

.ast-article-post .ast-article-inner {
	padding: 1.5rem 1.4rem;
}

/* Vignette absente → on masque l'emplacement */
.ast-article-post .post-thumb:empty,
.ast-article-post .ast-blog-featured-section:empty {
	display: none;
}

.ast-article-post .post-thumb img {
	display: block;
	width: 100%;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.ast-article-post .entry-title {
	font-size: 1.3rem;
	line-height: 1.3;
	margin-top: 0;
}

.ast-article-post .entry-title a {
	color: var(--ic-ink);
	text-decoration: none;
}

.ast-article-post .entry-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ast-article-post .cat-links,
.ast-article-post .ast-taxonomy-container {
	display: inline-block;
	margin-bottom: 0.55rem;
	border: 0;
	padding: 0;
}

.ast-article-post .cat-links a,
.ast-article-post .ast-taxonomy-container a {
	background: var(--ic-accent-tint);
	color: var(--ic-accent-dark);
	border-radius: 6px;
	padding: 0.28rem 0.6rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.ast-article-post .entry-meta {
	font-size: 0.8rem;
	color: var(--ic-body);
	opacity: 0.8;
}

.ast-article-post .entry-meta a {
	color: inherit;
}

.ast-article-post .ast-excerpt-container {
	margin-top: 0.6rem;
	font-size: 0.93rem;
	line-height: 1.55;
}

.ast-article-post .ast-read-more-container a {
	color: var(--ic-accent-dark);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Pagination */
.ast-pagination .page-numbers,
.paging-navigation .page-numbers {
	display: inline-block;
	border: 1px solid var(--ic-line);
	border-radius: 6px;
	padding: 0.5rem 0.8rem;
	color: var(--ic-ink);
	text-decoration: none;
}

.ast-pagination .page-numbers.current {
	background: var(--ic-accent);
	color: #fff;
	border-color: var(--ic-accent);
}

.ast-pagination a.page-numbers:hover {
	border-color: var(--ic-accent);
}

/* Recherche : aucun résultat + 404 */
.no-results.not-found,
.ast-404-layout-1 {
	max-width: var(--ic-read);
	margin-inline: auto;
	text-align: center;
}

.ast-404-layout-1 .page-title {
	font-size: clamp(2.5rem, 8vw, 5rem);
	color: var(--ic-accent);
}

/* =========================================================================
 *  7. Pages statiques
 * ===================================================================== */
.page:not(.page-template-front-page) .entry-content > :where(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: var(--ic-read);
}

.page .entry-header .entry-title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--ic-accent);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* =========================================================================
 *  8. Widgets / barres latérales
 * ===================================================================== */
#secondary .widget-title,
.footer-widget-area .widget-title {
	font-size: 1.1rem;
	border-bottom: 2px solid var(--ic-accent);
	padding-bottom: 0.4rem;
	margin-bottom: 0.9rem;
}

/* =========================================================================
 *  9. WooCommerce
 * ===================================================================== */
.woocommerce-breadcrumb {
	font-size: 0.8rem;
	color: var(--ic-body);
}

.woocommerce-products-header__title,
.woocommerce div.product .product_title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

/* Grille boutique — cartes cohérentes avec le blog */
.woocommerce ul.products li.product {
	background: var(--ic-paper);
	border: 1px solid var(--ic-line);
	border-top: 3px solid var(--ic-accent);
	border-radius: var(--ic-radius);
	padding: 1rem;
}

.woocommerce ul.products li.product:nth-child(4n + 2) { border-top-color: var(--ic-blue); }
.woocommerce ul.products li.product:nth-child(4n + 3) { border-top-color: var(--ic-green); }
.woocommerce ul.products li.product:nth-child(4n + 4) { border-top-color: var(--ic-plum); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ic-serif);
	font-size: 1.1rem;
	color: var(--ic-ink);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ic-accent-dark);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--ic-body);
	font-weight: 400;
}

.woocommerce span.onsale {
	background: var(--ic-accent);
	color: #fff;
	border-radius: 999px;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--ic-accent);
}

/* Onglets fiche produit */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 8px 8px 0 0;
	border-color: var(--ic-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--ic-paper);
	border-bottom-color: var(--ic-paper);
}

/* Tableaux panier / commande */
.woocommerce table.shop_table {
	border: 1px solid var(--ic-line);
	border-radius: var(--ic-radius);
}

.woocommerce table.shop_table th {
	background: var(--ic-cream);
	font-family: var(--ic-serif);
	color: var(--ic-ink);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table tfoot th {
	border-top: 1px solid var(--ic-line);
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--ic-panel);
	border: 1px solid var(--ic-line);
	border-radius: var(--ic-radius);
	padding: 1.25rem;
}

/* Messages WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-width: 3px;
	border-radius: 0 0 8px 8px;
}

.woocommerce-message { border-top-color: var(--ic-green); background: #eaf6f0; }
.woocommerce-info    { border-top-color: var(--ic-blue);  background: var(--ic-panel); }
.woocommerce-error   { border-top-color: var(--ic-accent); background: var(--ic-accent-tint); }

.woocommerce-message::before { color: var(--ic-green); }
.woocommerce-info::before    { color: var(--ic-blue); }
.woocommerce-error::before   { color: var(--ic-accent); }

/* Compte client */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	border: 1px solid var(--ic-line);
	border-radius: 8px;
	margin-bottom: 0.4rem;
}

.woocommerce-MyAccount-navigation li.is-active {
	border-color: var(--ic-accent);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.9rem;
	color: var(--ic-ink);
	text-decoration: none;
}

/* =========================================================================
 *  10. Responsive
 * ===================================================================== */
@media (max-width: 768px) {
	.blog .site-main .ast-row,
	.archive .site-main .ast-row,
	.search-results .site-main .ast-row {
		grid-template-columns: 1fr;
	}
}