/*
Theme Name: Orientation Juste
Theme URI: https://orientationjuste.fr
Description: Thème enfant de Twenty Twenty-Five pour orientationjuste.fr — orthopédagogie & méthode RADAR pour enfants et adolescents à profils atypiques (DYS, HPI, HPE, TDAH). Identité artisanale & chaleureuse (palette crème / anthracite / brique, Fraunces + Inter).
Author: Orientation Juste
Author URI: https://orientationjuste.fr
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orientationjuste
Tags: block-theme, full-site-editing, education, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images
*/

/* ================================================================
   Breadcrumbs
   ================================================================ */
.oj-breadcrumbs {
	font-size: 0.875rem;
	color: var(--wp--preset--color--texte-doux);
	line-height: 1.5;
}

.oj-breadcrumbs a {
	color: var(--wp--preset--color--texte-doux);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.oj-breadcrumbs a:hover {
	border-bottom-color: var(--wp--preset--color--brique);
	color: var(--wp--preset--color--brique);
}

.oj-breadcrumbs__sep {
	color: var(--wp--preset--color--brique);
	margin: 0 0.35em;
	opacity: 0.6;
}

.oj-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--texte);
	font-weight: 500;
}

/* ================================================================
   Category chips (navigation blog)
   ================================================================ */
.oj-category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40);
}

.oj-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--wp--preset--color--brique-sombre);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--brique);
	background: transparent;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.oj-chip:hover {
	background: var(--wp--preset--color--fond-sombre);
}

.oj-chip.is-active {
	background: var(--wp--preset--color--brique);
	color: var(--wp--preset--color--fond-clair);
	border-color: var(--wp--preset--color--brique);
}

/* ================================================================
   Style "Lead" pour paragraphe résumé en début d'article
   Usage : éditeur → Paragraphe → Styles → Résumé (lead)
   ================================================================ */
.wp-block-paragraph.is-style-oj-lead,
p.is-style-oj-lead {
	border-left: 3px solid var(--wp--preset--color--brique);
	padding: 0.35rem 0 0.35rem 1.25rem;
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--wp--preset--color--texte);
	font-weight: 400;
	margin: 2rem 0;
}

/* ================================================================
   Hero signature SVG — responsive max-width
   ================================================================ */
.hero-seal {
	max-width: 360px;
	margin-inline: auto;
}

@media (max-width: 782px) {
	.hero-seal {
		max-width: 220px;
	}
}

/* ================================================================
   Footer — espacement des liens listes
   ================================================================ */
.footer-list li {
	margin: 0.4rem 0;
	font-size: 0.9rem;
}

.footer-list a {
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.footer-list a:hover {
	border-bottom-color: var(--wp--preset--color--brique);
}

/* ================================================================
   Navigation header — submenu dropdown
   ================================================================ */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--fond-clair);
	border: 1px solid var(--wp--preset--color--fond-sombre);
	border-radius: 0.25rem;
	padding: 0.5rem 0;
	box-shadow: 0 8px 24px rgba(39, 38, 36, 0.08);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1rem;
	min-width: 220px;
}

/* ================================================================
   Header A1 — 1 rang horizontal : Logo · Nav · CTA.
   Sticky au scroll + condensé (padding et logo réduits).
   Le sticky est sur .wp-block-template-part (parent direct dans
   .wp-site-blocks) car .site-header est son unique enfant et ne
   peut pas coller à l'intérieur d'un conteneur de sa propre taille.
   ================================================================ */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	transition: box-shadow 0.25s ease, padding 0.2s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(39, 38, 36, 0.08);
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
}

/* Rang unique : logo | nav | CTA — flex space-between, nav centrée */
.site-header__row {
	width: 100%;
}

.site-header__row > .wp-block-navigation {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.site-header__row .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	justify-content: center;
}

.site-header__row .wp-block-navigation__container > .wp-block-navigation-item > a {
	color: var(--wp--preset--color--texte);
}

.site-header__cta {
	flex-shrink: 0;
}

/* Logo — taille agrandie + rétrécit quand scroll */
.site-header .wp-block-site-logo img {
	height: auto;
	max-height: 110px;
	width: auto !important;
	transition: max-height 0.2s ease;
}

.site-header.is-scrolled .wp-block-site-logo img {
	max-height: 64px;
}

/* Desktop étroit : serrer la nav */
@media (max-width: 1200px) {
	.site-header__row .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}
	.site-header .wp-block-site-logo img {
		max-height: 90px;
	}
	.site-header__row > .wp-block-navigation .wp-block-navigation-item > a {
		font-size: 0.92rem;
	}
}

/* Burger mobile activé en dessous de 900px (overlayMenu="mobile" WP) */
@media (max-width: 900px) {
	.site-header {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
	.site-header .wp-block-site-logo img {
		max-height: 80px;
	}
}

@media (max-width: 600px) {
	.site-header {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}
	.site-header .wp-block-site-logo img {
		max-height: 60px;
	}
	.site-header__cta .wp-block-button__link {
		padding: 0.5rem 0.85rem;
		font-size: 0.9rem;
	}
}

/* ================================================================
   Footer — lien WhatsApp
   ================================================================ */
.oj-whatsapp-link-wrap {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.oj-whatsapp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wp--preset--color--brique);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.oj-whatsapp-link:hover {
	color: var(--wp--preset--color--brique-sombre);
	border-bottom-color: var(--wp--preset--color--brique-sombre);
}

.oj-whatsapp-icon {
	flex-shrink: 0;
	color: #25D366;
	vertical-align: middle;
}

.oj-whatsapp-link:hover .oj-whatsapp-icon {
	color: #128C7E;
}

/* ================================================================
   Google Maps embed (shortcode [oj_map])
   ================================================================ */
.oj-map {
	max-width: 100%;
	border-radius: 0.5rem;
	box-shadow: 0 4px 16px rgba(39, 38, 36, 0.08);
	margin: 1.5rem 0;
}

/* ================================================================
   Section "Autres zones où je consulte" (pages géo)
   ================================================================ */
.oj-other-zones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30);
}

/* ================================================================
   Footer — bande Zones d'intervention
   ================================================================ */
.site-footer__zones {
	border-top: 1px solid var(--wp--preset--color--brique-sombre);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	text-align: center;
}

.site-footer__zones-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brique);
	margin-bottom: 0.5rem;
}

.site-footer__zones-list {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--wp--preset--color--texte);
}

.site-footer__zones-list a {
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.site-footer__zones-list a:hover {
	border-bottom-color: var(--wp--preset--color--brique);
}

.site-footer__zones-link {
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

.site-footer__zones-link a {
	color: var(--wp--preset--color--brique);
	font-weight: 600;
}

/* ================================================================
   Contact Form 7 — charte graphique Orientation Juste
   ================================================================ */
.wpcf7 .oj-form-grid {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.wpcf7 .oj-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media (max-width: 600px) {
	.wpcf7 .oj-form-row {
		grid-template-columns: 1fr;
	}
}

.wpcf7 .oj-form-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.925rem;
	font-weight: 600;
	color: var(--wp--preset--color--texte);
}

.wpcf7 .oj-form-field label .required {
	color: var(--wp--preset--color--brique);
}

.wpcf7 .oj-form-field label .optional {
	font-weight: 400;
	color: var(--wp--preset--color--texte-doux);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: var(--wp--preset--color--texte);
	background: var(--wp--preset--color--fond);
	border: 1.5px solid var(--wp--preset--color--fond-sombre);
	border-radius: 0.25rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brique);
	box-shadow: 0 0 0 3px rgba(163, 40, 26, 0.1);
}

.wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7 .oj-form-submit {
	margin-top: 0.5rem;
}

.wpcf7 input[type="submit"] {
	display: inline-block;
	padding: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--fond-clair);
	background: var(--wp--preset--color--brique);
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--brique-sombre);
}

.wpcf7 input[type="submit"]:active {
	transform: translateY(1px);
}

.wpcf7 .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.25rem;
	font-size: 0.925rem;
}

.wpcf7 .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--brique);
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

.wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--brique) !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #2e7d32 !important;
	background: #e8f5e9;
	color: #1b5e20;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
	border-color: var(--wp--preset--color--brique) !important;
	background: #fbe9e7;
	color: var(--wp--preset--color--brique-sombre);
}

.wpcf7 .wpcf7-spinner {
	margin-left: 1rem;
}

/* ================================================================
   Navigation — liens avec fond rempli au hover
   ================================================================ */
.site-header__row .wp-block-navigation__container > .wp-block-navigation-item > a {
	padding: 0.4rem 0.85rem;
	border-radius: 0.25rem;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.site-header__row .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
	background: var(--wp--preset--color--brique);
	color: var(--wp--preset--color--fond-clair);
}

/* ================================================================
   Liens corps de texte — soulignement glissant depuis la gauche
   ================================================================ */
.entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content),
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	text-decoration: none;
	position: relative;
}

.entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content)::after,
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content)::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: var(--wp--preset--color--brique-sombre);
	transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover::after,
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover::after {
	width: 100%;
}

.entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover,
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
	color: var(--wp--preset--color--brique-sombre);
}

/* ================================================================
   Boutons CTA — lift + ombre
   ================================================================ */
.wp-block-button__link,
.wp-element-button {
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
	box-shadow: 0 2px 8px rgba(163, 40, 26, 0.15);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(163, 40, 26, 0.25);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(163, 40, 26, 0.15);
}

/* ================================================================
   Apparition au scroll — fade up
   ================================================================ */
.oj-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.oj-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ================================================================
   Cartes — hover lift (groupes avec fond + bordure arrondie)
   ================================================================ */
.wp-block-group[style*="border-radius"].has-background,
.oj-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-group[style*="border-radius"].has-background:hover,
.oj-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(39, 38, 36, 0.1);
}

/* Colonnes brutes type etapes RADAR (h3 enfant direct, pas de groupe-carte) */
.wp-block-column:has(> h3) {
	border-radius: 0.5rem;
	padding: 1.25rem;
	border: 1px solid transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wp-block-column:has(> h3):hover {
	background-color: var(--wp--preset--color--fond-clair);
	box-shadow: 0 4px 16px rgba(39, 38, 36, 0.06);
	border-color: var(--wp--preset--color--fond-sombre);
}

/* ================================================================
   Hero — reveal progressif en cascade
   ================================================================ */
.oj-hero-reveal > * {
	opacity: 0;
	transform: translateY(20px);
	animation: ojHeroReveal 0.7s ease-out forwards;
}

.oj-hero-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.oj-hero-reveal > *:nth-child(2) { animation-delay: 0.3s; }
.oj-hero-reveal > *:nth-child(3) { animation-delay: 0.5s; }
.oj-hero-reveal > *:nth-child(4) { animation-delay: 0.7s; }
.oj-hero-reveal > *:nth-child(5) { animation-delay: 0.9s; }

@keyframes ojHeroReveal {
	to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   FAQ accordeon
   ================================================================ */
.oj-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--fond-sombre);
}

.oj-faq-question {
	width: 100%;
	background: none;
	border: none;
	padding: 1.25rem 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wp--preset--color--texte);
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: color 0.2s ease;
}

.oj-faq-question:hover {
	color: var(--wp--preset--color--brique);
}

.oj-faq-icon {
	font-size: 1.25rem;
	color: var(--wp--preset--color--brique);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	flex-shrink: 0;
	margin-left: 1rem;
}

.oj-faq-item.is-open .oj-faq-icon {
	transform: rotate(45deg);
}

.oj-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
	opacity: 0;
}

.oj-faq-item.is-open .oj-faq-answer {
	opacity: 1;
}

.oj-faq-answer-inner {
	padding: 0 0 1.25rem;
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ================================================================
   Dropdown menu — fade + slide down
   ================================================================ */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
}

.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0s;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.2s ease;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--fond);
	color: var(--wp--preset--color--brique);
	padding-left: 1.25rem;
}

/* ================================================================
   Separateur — losange central
   ================================================================ */
.oj-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--60) auto;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.oj-separator.is-visible {
	opacity: 1;
}

.oj-separator__line {
	width: 50px;
	height: 1px;
	background: var(--wp--preset--color--fond-sombre);
}

.oj-separator__diamond {
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--brique);
	transform: rotate(45deg) scale(0);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.oj-separator.is-visible .oj-separator__diamond {
	transform: rotate(45deg) scale(1);
}

/* ================================================================
   Bande CTA — pulse subtil sur le bouton
   ================================================================ */
.oj-cta-strip .wp-block-button__link {
	animation: ojCtaPulse 3s ease-in-out infinite;
}

@keyframes ojCtaPulse {
	0%, 100% { box-shadow: 0 2px 8px rgba(163, 40, 26, 0.15); }
	50% { box-shadow: 0 2px 8px rgba(163, 40, 26, 0.15), 0 0 0 6px rgba(163, 40, 26, 0.08); }
}

/* ================================================================
   Fil d'Ariane — micro-animation separateur
   ================================================================ */
.oj-breadcrumbs a {
	transition: border-color 0.15s ease, color 0.15s ease;
}

.oj-breadcrumbs__sep {
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.oj-breadcrumbs a:hover + .oj-breadcrumbs__sep {
	transform: translateX(2px);
	opacity: 0.8;
}

/* ================================================================
   Footer — fleche qui apparait au hover
   ================================================================ */
.footer-list a {
	position: relative;
	padding-left: 0;
	transition: border-color 0.15s ease, color 0.2s ease, padding-left 0.2s ease;
}

.footer-list a::before {
	content: "\2192";
	position: absolute;
	left: -1.2rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	color: var(--wp--preset--color--brique);
	font-size: 0.8rem;
}

.footer-list a:hover {
	color: var(--wp--preset--color--brique);
	padding-left: 0.4rem;
}

.footer-list a:hover::before {
	opacity: 1;
	transform: translateX(0);
}

.footer-list li {
	padding-left: 1.2rem;
}

/* ================================================================
   Details / FAQ native WordPress — ouverture animee
   ================================================================ */
.wp-block-details summary {
	cursor: pointer;
	transition: color 0.2s ease;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--brique);
}

.wp-block-details[open] > *:not(summary) {
	animation: ojDetailsOpen 0.35s ease-out;
}

@keyframes ojDetailsOpen {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}