/**
 * Julie Crepet MTC — compléments non exprimables dans theme.json.
 * Chargé en front (wp_enqueue_scripts) et dans l'éditeur (add_editor_style).
 */

/* ---------------------------------------------------------------------------
 * Base & confort de lecture
 * ------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem; /* compense le header sticky pour les ancres */
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}

/* Titres un peu plus resserrés en display */
:where(.wp-site-blocks) h1,
:where(.wp-site-blocks) h2 {
	text-wrap: balance;
}
:where(.wp-site-blocks) p {
	text-wrap: pretty;
}

/* Accessibilité : focus visible homogène */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * En-tête (header sticky translucide)
 * ------------------------------------------------------------------------- */
.jc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	background: rgba(255, 255, 255, 0.86);
	border-bottom: 1px solid rgba(51, 53, 47, 0.07);
}

/* Menu de navigation : pas de soulignement, survol terracotta */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	transition: color 0.18s ease;
}
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item {
	color: var(--wp--preset--color--terracotta);
}

/* Sous-menus : carte douce */
.wp-block-navigation .wp-block-navigation-submenu {
	--navigation-layout-submenu-side-shadow: none;
}
.wp-block-navigation__submenu-container {
	border: 1px solid rgba(51, 53, 47, 0.08) !important;
	border-radius: 14px !important;
	box-shadow: var(--wp--preset--shadow--card);
	padding: 0.4rem !important;
	background: var(--wp--preset--color--white) !important;
}

/* ---------------------------------------------------------------------------
 * Styles de blocs personnalisés
 * ------------------------------------------------------------------------- */

/* Carte */
.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(51, 53, 47, 0.07);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	height: 100%;
}
.is-style-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Carte contour (sans ombre) */
.is-style-card-outline {
	background: transparent;
	border: 1px solid rgba(51, 53, 47, 0.14);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
}

/* Surtitre / eyebrow (complément au CSS de theme.json) */
.is-style-eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
}

/* Image aux coins arrondis */
.is-style-rounded-soft img,
.is-style-rounded-soft {
	border-radius: 22px;
	overflow: hidden;
}

/* Image forme organique (blob) */
.is-style-blob img,
.is-style-blob {
	border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
	overflow: hidden;
}

/* Liste « feuille » : puces personnalisées */
.is-style-checklist {
	list-style: none;
	padding-left: 0;
}
.is-style-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.65rem;
}
.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 60% 0 60% 60%;
	transform: rotate(45deg);
	background: var(--wp--preset--color--sage);
}

/* Séparateur discret */
.is-style-leaf {
	border: none;
	height: auto;
	text-align: center;
	max-width: 120px;
}
.is-style-leaf::before {
	content: "❋";
	color: var(--wp--preset--color--sage);
	font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
 * Héros
 * ------------------------------------------------------------------------- */
.jc-hero__title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	line-height: 1.04 !important;
	letter-spacing: 0 !important;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: balance;
}

/* Le héros respire : colonne de texte confortable, image jamais écrasée */
.jc-hero .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); }
.jc-hero__title { max-width: 16ch; }
@media (max-width: 781px) {
	.jc-hero__title { max-width: none; }
}

/* Voile sur les images de couverture pour lisibilité du texte */
.jc-cover .wp-block-cover__background {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Boutons — variante secondaire (contour)
 * ------------------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 2px solid var(--wp--preset--color--sage);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
}

/* Icône « cartouche » ronde pour les sections outils */
.jc-icon-badge {
	width: 3.25rem;
	height: 3.25rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
	font-size: 1.4rem;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Pied de page
 * ------------------------------------------------------------------------- */
.jc-footer a {
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
}
.jc-footer a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Formulaire (Contact Form 7 / natif) — cohérence visuelle
 * ------------------------------------------------------------------------- */
.jc-form input[type="text"],
.jc-form input[type="email"],
.jc-form input[type="tel"],
.jc-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(51, 53, 47, 0.18);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 1rem;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--wp--preset--color--sage);
	outline: 2px solid var(--wp--preset--color--sage-soft);
}
.wpcf7 .wpcf7-submit,
.jc-form button {
	background: var(--wp--preset--color--terracotta);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease;
}
.wpcf7 .wpcf7-submit:hover,
.jc-form button:hover {
	background: var(--wp--preset--color--terracotta-dark);
}

/* ---------------------------------------------------------------------------
 * Bandes vert sauge (reprise de l'identité de l'ancien site)
 * ------------------------------------------------------------------------- */
/* Sur une bande sauge/forêt/profond : titres et textes en clair, liens lisibles */
.has-sage-background-color :where(h1,h2,h3,h4),
.has-forest-background-color :where(h1,h2,h3,h4),
.has-deep-background-color :where(h1,h2,h3,h4){ color:#fff; }
.has-sage-background-color :where(p,li){ color:rgba(255,255,255,.94); }
.has-sage-background-color a:where(:not(.wp-block-button__link)){ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.has-sage-background-color .is-style-eyebrow{ color:var(--wp--preset--color--sand); }
.has-sage-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-forest-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.has-sage-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-forest-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover{ background:#fff; color:var(--wp--preset--color--forest); border-color:#fff; }
/* Textes clairs aussi sur bande vert profond */
.has-deep-background-color a:where(:not(.wp-block-button__link)){ color:#fff; }

/* ---------------------------------------------------------------------------
 * Séparateurs ondulés décoratifs
 * ------------------------------------------------------------------------- */
.jc-wave{
	height:22px;
	max-width:150px;
	margin:0 auto var(--wp--preset--spacing--30);
	background:repeat-x center/130px 22px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='22' viewBox='0 0 130 22'%3E%3Cpath d='M0 11 Q16.25 0 32.5 11 T65 11 T97.5 11 T130 11' fill='none' stroke='%23829079' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity:.85;
}
.jc-wave.is-light{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='22' viewBox='0 0 130 22'%3E%3Cpath d='M0 11 Q16.25 0 32.5 11 T65 11 T97.5 11 T130 11' fill='none' stroke='%23EDE6B9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * Image « cadre sauge décalé » (à la manière de l'original)
 * ------------------------------------------------------------------------- */
.is-style-framed{ position:relative; isolation:isolate; }
.is-style-framed img{ position:relative; z-index:1; border-radius:18px; box-shadow:0 22px 46px rgba(43,51,39,.20); }
.is-style-framed::before{
	content:"";
	position:absolute; z-index:0;
	top:14px; left:14px; right:-14px; bottom:-14px;
	border:2px solid var(--wp--preset--color--sage);
	border-radius:18px;
}
@media (max-width:781px){
	.is-style-framed::before{ right:-8px; bottom:-8px; top:8px; left:8px; }
}

/* ---------------------------------------------------------------------------
 * Animations douces à l'apparition (respecte prefers-reduced-motion)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.jc-reveal {
		animation: jc-fade-up 0.7s both;
	}
	@keyframes jc-fade-up {
		from { opacity: 0; transform: translateY(16px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}