/*
Theme Name: DOMI – Le Blog
Theme URI: https://domi.com
Author: Domi
Author URI: https://domi.com
Description: Thème bloc (Full Site Editing / Gutenberg) sur mesure pour DOMI – Le Blog. Design sombre, accents rouges, dédié à un blog éditorial BDSM (guides, conseils, sécurité, témoignages).
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domi
Tags: blog, full-site-editing, block-styles, custom-colors, dark, editor-style, one-column, two-columns, news
*/

/* Tout le style est piloté par theme.json ; ce fichier complète les cas que theme.json ne couvre pas. */

/* Logo du site (en-tête) + libellé "Le Blog" */
.wp-block-site-logo { line-height: 0; margin: 0; }
.wp-block-site-logo img { height: 52px; width: auto; max-width: none; }
.domi-blog-tag {
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-left: 12px;
	border-left: 1px solid var(--wp--preset--color--border);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.domi-blog-tag { display: none; }
	.wp-block-site-logo img { height: 44px; }
}

/* Effet de survol sur les cartes d'articles */
.domi-card {
	transition: transform .18s ease, border-color .18s ease;
}
.domi-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary) !important;
}

/* Rangée de cartes catégories (icônes) */
.domi-cat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}
.domi-cat-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.domi-cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary);
	background-color: #1d1d20;
}
.domi-cat-card .domi-icon { flex-shrink: 0; display: flex; }
.domi-cat-card .domi-icon svg { display: block; }
.domi-cat-card > span:last-child { flex: 1 1 auto; min-width: 0; }

/* Badge catégorie sur image */
.domi-thumb { position: relative; }
.domi-badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
}

/* Liens de navigation : soulignement rouge animé */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: #ffffff;
}

/* Liste articles populaires */
.domi-popular .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
.domi-popular .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

/* Tag cloud personnalisé */
.wp-block-tag-cloud a,
.domi-tags a {
	display: inline-block;
	font-size: 13px !important;
	padding: 6px 12px;
	margin: 0 6px 8px 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: all .15s ease;
}
.wp-block-tag-cloud a:hover,
.domi-tags a:hover {
	border-color: var(--wp--preset--color--primary);
	color: #fff;
	background: var(--wp--preset--color--primary);
}

/* Champ email newsletter */
.domi-newsletter input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: #0e0e10;
	color: #fff;
	font-size: 14px;
}
.domi-newsletter input[type="email"]::placeholder { color: #6b6b73; }
.domi-newsletter button {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.domi-newsletter button:hover { background: var(--wp--preset--color--primary-hover); }

/* Méta articles (date / commentaires) */
.domi-meta { color: var(--wp--preset--color--muted); font-size: 13px; }
.domi-meta a { color: var(--wp--preset--color--muted); }

/* Badge catégorie en pastille rouge (post-terms) */
.domi-pill {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 11px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.domi-pill a,
.domi-pill { color: #fff !important; text-decoration: none; }
.domi-pill a:hover { color: #fff !important; }

/* Lisibilité du texte par-dessus les images du hero (ombre portée de sécurité) */
.domi-card.wp-block-cover .wp-block-cover__inner-container h1,
.domi-card.wp-block-cover .wp-block-cover__inner-container h2,
.domi-card.wp-block-cover .wp-block-cover__inner-container h3,
.domi-card.wp-block-cover .wp-block-cover__inner-container p,
.domi-card.wp-block-cover .wp-block-cover__inner-container a,
.domi-card.wp-block-cover .wp-block-post-title a {
	text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.8);
}
/* La pastille de catégorie a déjà un fond plein : pas d'ombre */
.domi-card.wp-block-cover .domi-pill,
.domi-card.wp-block-cover .domi-pill a { text-shadow: none; }
/* Le texte de couverture reste blanc même si WordPress applique "is-dark" */
.domi-card.wp-block-cover .wp-block-cover__inner-container { color: #fff; }

/* Lien "Lire l'article" rouge (read-more sans fond) */
.is-style-domi-link .wp-block-read-more,
.is-style-domi-link {
	color: var(--wp--preset--color--primary) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	font-weight: 600;
	text-decoration: none;
}

/* "Lire l'article" bouton plein (read-more dans le hero principal) */
.wp-block-read-more.has-primary-background-color {
	text-decoration: none;
	display: inline-block;
}

/* Méta articles récents : ligne date + commentaires */
.domi-card .wp-block-post-date,
.domi-card .domi-meta { color: var(--wp--preset--color--muted); font-size: 13px; }

/* ---- Cartes d'articles : image pleine largeur, marges resserrées ---- */
.domi-article-card {
	overflow: hidden;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}
.domi-article-card .domi-thumb { padding: 0 !important; margin: 0; }
.domi-article-card .wp-block-post-featured-image,
.domi-article-card .wp-block-post-featured-image a {
	margin: 0 !important;
	border-radius: 0 !important;
	height: auto !important;   /* annule le height:160px inline qui faisait déborder l'image sur le titre */
	display: block;
}
.domi-article-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	height: auto !important;
	display: block;
	border-radius: 0 !important;
}
/* Bloc texte sous l'image : padding compact */
.domi-article-card > .wp-block-group:last-child {
	padding: 0.9rem 1rem 1.05rem !important;
	display: flex;
	flex-direction: column;
	gap: 0.4rem !important;
}
.domi-article-card .wp-block-post-title {
	font-size: 1rem !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}
.domi-article-card .wp-block-post-excerpt {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.5;
}
.domi-article-card .wp-block-post-excerpt__excerpt { margin: 0; }
.domi-article-card .wp-block-post-date { margin: 0 !important; }

/* Espacement des grilles d'articles (query) un peu resserré */
.wp-block-query .wp-block-post-template.is-layout-grid { gap: 1.25rem !important; }

/* Newsletter : champ et bouton bien contenus dans la carte */
.domi-newsletter,
.domi-newsletter form { max-width: 100%; }
.domi-newsletter input[type="email"],
.domi-newsletter button {
	box-sizing: border-box;
	max-width: 100%;
}

/* ----------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

/* Tablette : la barre latérale passe sous le contenu principal */
@media (max-width: 1024px) {
	main .wp-block-columns.alignwide {
		flex-wrap: wrap !important;
		gap: 2rem !important;
	}
	main .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Petits écrans : marges et hauteurs réduites */
@media (max-width: 781px) {
	main.wp-block-group { padding-top: 1.25rem !important; }
	.wp-block-columns { gap: 1.25rem !important; }
	/* le hero principal moins haut sur mobile */
	.domi-card.wp-block-cover { min-height: 300px !important; }
}

@media (max-width: 600px) {
	.domi-card.wp-block-cover { min-height: 240px !important; }
	/* En-tête mobile épuré : logo à gauche, menu (hamburger) à droite ; recherche + CTA masqués */
	header .wp-block-buttons,
	header .wp-block-search { display: none; }
	header .wp-block-navigation:not(.is-menu-open) { order: 3; }
	header .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center; }
}

/* ======================================================================
   NAVIGATION (sous-menus desktop + menu mobile)
   ====================================================================== */

/* --- Sous-menus déroulants (desktop) --- */
/* On bat la règle core qui force un fond BLANC sur les sous-menus (sélecteur :not(.has-background)) */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #161618 !important;
	color: #fff !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
	padding: 7px;
	min-width: 248px;
	margin-top: 12px;
	z-index: 60;
}
/* pont invisible : couvre l'espace parent↔sous-menu pour ne pas perdre le survol */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
	background: transparent;
}
/* petit triangle qui relie le sous-menu à son parent */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 22px;
	width: 11px;
	height: 11px;
	background: #161618;
	border-left: 1px solid var(--wp--preset--color--border);
	border-top: 1px solid var(--wp--preset--color--border);
	transform: rotate(45deg);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--surface-2);
	color: #fff;
	padding-left: 18px;
}
/* 1er élément du sous-menu ("Toutes les pratiques" / "Tous les conseils") mis en avant */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	color: #fff;
	font-weight: 600;
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 8px 8px 0 0;
	margin-bottom: 3px;
}

/* --- Bouton hamburger (ouvrir) --- */
.wp-block-navigation__responsive-container-open {
	color: #fff !important;
	padding: 4px;
}
.wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; fill: #fff; }

/* --- Overlay mobile ouvert --- */
/* On bat la règle core qui force fond blanc + texte noir sur l'overlay */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0b0b0d !important;
	color: #fff !important;
	padding: 22px 24px 40px;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	margin-top: 60px;
	padding-top: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 15px 2px;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}
/* sous-menus dans l'overlay : indentés, discrets, sans encadré */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 6px 16px;
	margin: 0;
	min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	padding: 11px 2px;
	border-bottom: 0;
}
/* bouton fermer (croix) */
.wp-block-navigation__responsive-container-close {
	color: #fff !important;
	top: 24px;
	right: 24px;
}
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; fill: #fff; }

/* --- Desktop : menu en ligne (masque le hamburger, déplie le conteneur) --- */
@media (min-width: 782px) {
	header .wp-block-navigation__responsive-container-open { display: none !important; }
	header .wp-block-navigation__responsive-container.hidden-by-default,
	header .wp-block-navigation__responsive-container {
		display: block !important;
		position: relative !important;
		inset: auto !important;
		width: auto !important;
		background-color: transparent !important;
		padding: 0 !important;
		z-index: auto !important;
		visibility: visible !important;
	}
	header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close { display: none !important; }
	header .wp-block-navigation__responsive-dialog { position: static !important; }
	header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: 1rem;
		align-items: center;
	}
	/* en ligne : annule le style "overlay" sur les items */
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
		border-bottom: 0;
		padding: 0;
		font-size: 11.5px;
		text-transform: uppercase;
	}
}

/* Pagination : style cohérent avec le thème */
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	color: var(--wp--preset--color--muted);
}
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--primary); font-weight: 700; }

/* S'assurer que les images de couverture des cartes gardent un ratio constant */
.domi-card .wp-block-post-featured-image img { border-radius: 10px; }

/* ======================================================================
   Page Contact + Formulaire (Contact Form 7)
   ====================================================================== */

/* Bande d'infos de contact (au-dessus du formulaire) */
.domi-contact-strip { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 2rem; }
.domi-contact-chip {
	display: flex; align-items: center; gap: 12px;
	flex: 1 1 200px;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
}
.domi-contact-chip:hover { border-color: var(--wp--preset--color--primary); }
.domi-contact-chip .ico {
	flex-shrink: 0;
	width: 40px; height: 40px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(216,35,42,.12);
}
.domi-contact-chip strong { display: block; font-size: 14px; color: #fff; line-height: 1.2; }
.domi-contact-chip span { font-size: 12.5px; color: var(--wp--preset--color--muted); }

/* Carte qui contient le formulaire */
.domi-form-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 2rem 2.2rem 2.2rem !important;
	box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
@media (max-width: 600px) { .domi-form-card { padding: 1.4rem !important; } }

.wpcf7-form .domi-form-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.wpcf7-form .domi-form-row > label { flex: 1 1 220px; }
.wpcf7-form label {
	display: block;
	margin-bottom: 1.3rem;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.wpcf7-form .domi-req { color: var(--wp--preset--color--primary); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	margin-top: 9px;
	padding: 13px 16px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border);
	background: #0e0e10;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: #6b6b73; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(216,35,42,.18);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}
.wpcf7-form select option { color: #111; }

/* Case de consentement */
.wpcf7-form .wpcf7-acceptance {
	display: block;
	margin: .2rem 0 1.6rem;
	font-size: 0; /* neutralise l'inline */
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0;
	font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	width: 18px; height: 18px; margin-top: 1px;
	accent-color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

/* Bouton d'envoi */
.wpcf7-form .wpcf7-submit {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	padding: 14px 34px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(216,35,42,.32);
}
.wpcf7-spinner { margin: 0 0 0 12px; }

/* Validation / réponse */
.wpcf7-form .wpcf7-not-valid-tip { color: #ff8a8a; font-size: 12px; font-weight: 600; margin-top: 6px; text-transform: none; letter-spacing: normal; }
.wpcf7-form .wpcf7-not-valid { border-color: #ff6b6b !important; }
.wpcf7 .wpcf7-response-output {
	border-radius: 10px;
	padding: 13px 16px;
	margin: 1.4rem 0 0;
	font-size: 14px;
	border-width: 1px;
}

/* ======================================================================
   Page « À propos »
   ====================================================================== */
.domi-about-hero .wp-block-cover__inner-container { max-width: 760px; margin: 0 auto; }
.domi-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); line-height: 1.7; }
.domi-checklist { list-style: none; margin: 0; padding: 0; }
.domi-checklist li { position: relative; padding-left: 34px; margin: 0 0 13px; line-height: 1.55; }
.domi-checklist li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
	background-color: rgba(216,35,42,.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d8232a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
}
.domi-feature-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 1.7rem !important;
	height: 100%;
	transition: transform .18s ease, border-color .18s ease;
}
.domi-feature-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--primary); }
.domi-feature-emoji { font-size: 30px; line-height: 1; margin: 0 0 .55rem !important; }
.domi-about-img img { border-radius: 16px; display: block; width: 100%; height: auto; object-fit: cover; }
.domi-cta-banner {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 2.6rem 2rem !important;
	background: radial-gradient(circle at 50% 0, rgba(216,35,42,.20), transparent 62%), var(--wp--preset--color--surface);
}
@media (max-width: 600px) { .domi-cta-banner { padding: 1.8rem 1.3rem !important; } }