/*
Theme Name: Christine Quach
Theme URI: https://christinequach.com
Author: Christine Quach
Description: Thème bloc sur mesure pour le site de Christine Quach, psychopraticienne Gestalt. Toutes les pages sont construites avec l'éditeur de blocs et restent modifiables depuis l'administration.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: christinequach
*/

/*
 * Ce fichier ne contient que ce que theme.json ne sait pas exprimer :
 * en-tête collant, menu mobile, motif décoratif, arche, filets de listes et de colonnes,
 * couleurs d'accent selon le fond, formulaire, ajustements mobiles.
 */

/* --------------------------------------------------------------------------
 * 1. Couleurs contextuelles (accent des titres, sur-titres, filets)
 * ----------------------------------------------------------------------- */

:root,
.is-style-section-lavande {
	--cq-accent: var(--wp--preset--color--azur);
	--cq-surtitre: var(--wp--preset--color--lilas-clair);
	--cq-accroche: currentColor;
	--cq-filet: rgba(255, 245, 236, 0.35);
}

.is-style-section-beige {
	--cq-accent: var(--wp--preset--color--magenta);
	--cq-surtitre: var(--wp--preset--color--lavande);
	--cq-accroche: var(--wp--preset--color--lavande);
	--cq-filet: #e4d5c8;
}

.is-style-section-bleu-gris {
	--cq-accent: var(--wp--preset--color--magenta);
	--cq-surtitre: #3b4462;
	--cq-accroche: currentColor;
	--cq-filet: rgba(34, 40, 58, 0.25);
}

.is-style-section-magenta {
	--cq-accent: currentColor;
	--cq-surtitre: #e6b9cf;
	--cq-accroche: currentColor;
	--cq-filet: rgba(255, 245, 236, 0.35);
}

.cq-footer {
	--cq-accent: var(--wp--preset--color--magenta);
	--cq-surtitre: #55696f;
	--cq-filet: rgba(47, 64, 70, 0.25);
}

/* Format « Accent » : italique semi-gras coloré, dans les titres et phrases d'accroche. */
:is(h1, h2, h3, h4, h5, h6, .is-style-accroche, .is-style-intro-italique) em,
.accent {
	font-style: italic;
	font-weight: 600;
	color: var(--cq-accent);
}

h1, h2, h3, h4, h5, h6,
.is-style-accroche,
.is-style-intro-italique {
	text-wrap: pretty;
}

.is-style-sur-titre {
	color: var(--cq-surtitre);
}

.is-style-accroche,
.is-style-intro-italique {
	color: var(--cq-accroche);
}

/* Longueur de ligne confortable pour le texte courant. */
.is-layout-flow > p:not([class*="is-style-"]):not(.has-text-align-center) {
	max-width: 68ch;
}

/* --------------------------------------------------------------------------
 * 2. Structure générale
 * ----------------------------------------------------------------------- */

.wp-site-blocks > * + *,
.cq-main > * + *,
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

[class*="is-style-section-"] {
	position: relative;
	overflow: hidden;
}

[class*="is-style-section-"] > :not(.is-style-decor) {
	position: relative;
	z-index: 1;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * 3. En-tête collant et navigation
 * ----------------------------------------------------------------------- */

.cq-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.cq-header {
	color: var(--wp--preset--color--gris-menu);
	padding: 14px 36px;
	border-bottom: 1px solid #ebdfd6;
	gap: 24px;
}

.cq-header .custom-logo {
	width: 28px;
	height: auto;
}

.cq-marque .wp-block-site-title {
	white-space: nowrap;
}

.cq-marque .wp-block-site-title a:hover {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--magenta);
	text-decoration: none;
}

.cq-nav-principale .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Page active : pastille magenta avant le libellé. */
.cq-nav-principale .wp-block-navigation-item__content[aria-current="page"]::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin-right: 7px;
	border-radius: 999px;
	background: var(--wp--preset--color--magenta);
}

.cq-header-cta .wp-block-button__link {
	padding: 13px 22px;
	font-size: 13px;
	letter-spacing: 0.13em;
	white-space: nowrap;
}

/* Lien « Prendre rendez-vous » du menu : visible seulement dans le menu mobile ouvert. */
.cq-nav-cta {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .cq-nav-cta {
	display: flex !important;
}

/* Burger et croix magenta. */
.cq-nav-principale .wp-block-navigation__responsive-container-open,
.cq-nav-principale .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--magenta);
}

.cq-nav-principale .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

/* Menu mobile ouvert : panneau beige, liens empilés séparés par des filets. */
.cq-nav-principale .wp-block-navigation__responsive-container.is-menu-open {
	padding: 18px 24px 32px;
}

.cq-nav-principale .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px !important;
	align-items: stretch !important;
}

.cq-nav-principale .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}

.cq-nav-principale .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #f0e4d9;
	font-size: 14px;
	letter-spacing: 0.1em;
}

.cq-nav-principale .is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 0 !important;
}

.cq-nav-principale .is-menu-open .cq-nav-cta {
	margin-top: 18px;
	border-bottom: 0;
}

.cq-nav-principale .is-menu-open .cq-nav-cta .wp-block-navigation-item__content {
	justify-content: center;
	padding: 15px 20px !important;
	border-radius: 999px;
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--beige);
	font-size: 13px;
	letter-spacing: 0.12em;
}

/* Le menu passe en burger sous 900 px (le bloc Navigation bascule nativement à 600 px). */
@media (min-width: 600px) and (max-width: 900px) {
	.cq-nav-principale .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cq-nav-principale .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * 4. Motif décoratif « lignes » (bloc Image, style « Décor »)
 * ----------------------------------------------------------------------- */

.wp-block-image.is-style-decor {
	position: absolute;
	z-index: 0;
	width: min(720px, 60vw);
	max-width: none !important;
	margin: 0 !important;
	float: none;
	opacity: 0.4;
	pointer-events: none;
}

.wp-block-image.is-style-decor img {
	width: 100%;
	height: auto;
}

.wp-block-image.is-style-decor.alignright {
	right: -60px;
	bottom: -80px;
}

.wp-block-image.is-style-decor.alignleft {
	left: -120px;
	top: 40px;
	width: min(560px, 50vw);
	opacity: 0.35;
}

.wp-block-image.is-style-decor.aligncenter,
.wp-block-image.is-style-decor:not(.alignleft):not(.alignright) {
	left: 50%;
	bottom: -120px;
	transform: translateX(-50%);
	opacity: 0.3;
}

/* --------------------------------------------------------------------------
 * 5. Images en arche
 * ----------------------------------------------------------------------- */

.wp-block-image.is-style-arche img {
	width: 100%;
	height: var(--wp--custom--arche-hauteur);
	object-fit: cover;
	border-radius: 999px 999px 0 0;
}

.cq-hero-colonnes.are-vertically-aligned-top .wp-block-image.is-style-arche {
	margin-top: 34px;
}

.cq-hero-colonnes.are-vertically-aligned-bottom .wp-block-image.is-style-arche img {
	height: clamp(300px, 38vw, 520px);
}

/* --------------------------------------------------------------------------
 * 6. Paragraphes : trait, lien souligné
 * ----------------------------------------------------------------------- */

.is-style-trait {
	position: relative;
	max-width: calc(48ch + 80px);
	padding-left: 80px;
}

.is-style-trait::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0;
	width: 48px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.is-style-lien a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
	text-underline-offset: 7px;
}

.is-style-lien a:hover {
	text-decoration-color: currentColor;
}

.cq-entete-section {
	align-items: baseline !important;
	row-gap: 16px;
}

/* --------------------------------------------------------------------------
 * 7. Colonnes à filets, liste numérotée, séparateur
 * ----------------------------------------------------------------------- */

.wp-block-columns.is-style-filets {
	gap: 0 !important;
}

.wp-block-columns.is-style-filets > .wp-block-column {
	padding: 38px 30px;
}

.wp-block-columns.is-style-filets > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--cq-filet);
}

.wp-block-columns.is-style-filets > .wp-block-column > * + * {
	margin-block-start: 13px;
}

/* Titres de même hauteur pour aligner les textes. */
.wp-block-columns.is-style-filets h3 {
	min-height: 2.5em;
	font-size: 22px;
	font-weight: 500;
}

ol.is-style-numerotee {
	margin-inline: 0;
	margin-bottom: 0;
	padding: 0 !important;
	list-style: none;
	counter-reset: cq-numero;
	border-bottom: 1px solid var(--cq-filet);
	line-height: 1.6;
}

ol.is-style-numerotee > li {
	counter-increment: cq-numero;
	margin: 0;
	padding: 24px 0 24px 56px;
	text-indent: -56px;
	border-top: 1px solid var(--cq-filet);
}

ol.is-style-numerotee > li::before {
	content: counter(cq-numero, decimal-leading-zero);
	display: inline-block;
	width: 56px;
	text-indent: 0;
	font-family: var(--wp--custom--font-titres);
	font-size: 1.24em;
	line-height: 1;
	color: var(--wp--preset--color--magenta);
}

.wp-block-separator {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--cq-filet);
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * 8. Cartes et tarifs
 * ----------------------------------------------------------------------- */

.is-style-carte h3 {
	font-weight: 400;
}

.is-style-carte > * + * {
	margin-block-start: 14px;
}

.cq-annulation {
	align-items: baseline !important;
}

/* --------------------------------------------------------------------------
 * 9. Boutons
 * ----------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.wp-block-button__link:hover {
	opacity: 0.88;
}

.wp-block-button.is-style-plein-clair .wp-block-button__link:hover {
	opacity: 1;
	background-color: #ffffff;
}

.wp-block-button.is-style-contour .wp-block-button__link:hover {
	opacity: 1;
	background-color: rgba(255, 245, 236, 0.12);
}

/* --------------------------------------------------------------------------
 * 10. Formulaire de contact (Contact Form 7)
 * ----------------------------------------------------------------------- */

.cq-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cq-form__ligne {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.cq-form__champ {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lavande);
}

.cq-form input:is([type="text"], [type="email"], [type="tel"]),
.cq-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #e4d5c8;
	border-radius: 0;
	background: #fffaf4;
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
}

.cq-form textarea {
	resize: vertical;
	min-height: 170px;
}

.cq-form input:focus,
.cq-form textarea:focus {
	border-color: var(--wp--preset--color--lavande);
	outline: 2px solid var(--wp--preset--color--lavande);
	outline-offset: 0;
}

.cq-form ::placeholder {
	color: #9a8f98;
	opacity: 1;
}

.cq-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--magenta);
}

.cq-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--magenta);
}

.cq-form__consentement {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
}

.cq-form__consentement .wpcf7-list-item {
	margin: 0;
}

.cq-form__consentement label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.cq-form__consentement input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--wp--preset--color--magenta);
}

.cq-form__envoi {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cq-form .wpcf7-submit {
	padding: 17px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--beige);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 14px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	cursor: pointer;
}

.cq-form .wpcf7-submit:hover {
	opacity: 0.88;
}

.cq-form .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cq-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--magenta);
	outline-offset: 3px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid currentColor;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--magenta);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--magenta);
}

/* --------------------------------------------------------------------------
 * 11. Pied de page
 * ----------------------------------------------------------------------- */

.cq-footer {
	padding-top: 64px;
	padding-bottom: 34px;
}

.cq-footer .custom-logo {
	width: 26px;
	height: auto;
}

.cq-footer .wp-block-site-title {
	font-size: 20px;
}

.cq-footer .wp-block-site-title a,
.cq-footer a,
.cq-footer .wp-block-navigation-item__content {
	color: inherit;
}

.cq-footer .is-style-sur-titre {
	font-size: 12px;
	letter-spacing: 0.2em;
}

.cq-footer .cq-lien-rdv a {
	color: var(--wp--preset--color--magenta);
}

.cq-footer .wp-block-column > * + * {
	margin-block-start: 12px;
}

.cq-nav-pied {
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0;
	text-transform: none;
}

.cq-legal {
	padding-top: 22px;
	border-top: 1px solid var(--cq-filet);
	letter-spacing: 0.06em;
	color: #55696f;
}

.cq-legal p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * 12. Mobile et tablette (point de rupture principal : 900 px)
 * ----------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cq-header {
		padding: 12px 20px;
	}

	.cq-header .custom-logo {
		width: 22px;
	}

	.cq-header .wp-block-site-title {
		font-size: 15px;
		letter-spacing: 0.15em;
	}

	.cq-header .cq-header-cta {
		display: none;
	}

	/* Toutes les grilles passent sur une colonne. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
		row-gap: 32px !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.cq-grille-cartes {
		grid-template-columns: 1fr !important;
	}

	.cq-grille-cartes > * {
		grid-column: auto !important;
	}

	.cq-hero-colonnes {
		row-gap: 30px !important;
	}

	.cq-hero-colonnes.are-vertically-aligned-top .wp-block-image.is-style-arche {
		margin-top: 0;
	}

	.cq-hero-colonnes .wp-block-image.is-style-arche {
		max-width: 420px;
	}

	.cq-hero-colonnes .wp-block-image.is-style-arche img,
	.cq-hero-colonnes.are-vertically-aligned-bottom .wp-block-image.is-style-arche img {
		height: 300px;
	}

	.is-style-trait {
		padding-top: 24px;
		padding-left: 0;
	}

	.is-style-trait::before {
		top: 0;
		width: 44px;
	}

	.wp-block-image.is-style-decor,
	.wp-block-image.is-style-decor.alignleft {
		width: 330px;
	}

	.wp-block-columns.is-style-filets {
		row-gap: 20px !important;
	}

	.wp-block-columns.is-style-filets > .wp-block-column {
		padding: 20px 0 0;
		border-top: 1px solid var(--cq-filet);
	}

	.wp-block-columns.is-style-filets > .wp-block-column + .wp-block-column {
		border-left: 0;
	}

	.wp-block-columns.is-style-filets h3 {
		min-height: 0;
	}

	ol.is-style-numerotee > li {
		padding: 18px 0 18px 44px;
		text-indent: -44px;
	}

	ol.is-style-numerotee > li::before {
		width: 44px;
	}

	/* Boutons pleine largeur. */
	.cq-main .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.cq-main .wp-block-button,
	.cq-main .wp-block-button__link {
		width: 100%;
	}

	.cq-main .wp-block-button__link {
		padding: 17px 24px;
		font-size: 13px;
		letter-spacing: 0.1em;
		text-align: center;
	}

	.cq-form__ligne {
		grid-template-columns: 1fr;
	}

	.cq-form .wpcf7-submit {
		width: 100%;
	}

	.cq-footer {
		padding-top: 44px;
		padding-bottom: 32px;
	}

	.cq-legal {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 12px !important;
	}
}

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