/* ===== TFO Avocate — styles du thème enfant ===== */

/* --- Header sticky : le CTA de prise de RDV reste toujours visible --- */
.tfo-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 1px 8px rgba(5, 84, 109, 0.10);
}
body.admin-bar .tfo-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .tfo-header { top: 46px; }
}

/* Logo : pas de variante blanche disponible (dessiné en turquoise/bleu pétrole
   foncé/gris), illisible sur fond bleu plein. On le pose sur une plaque blanche
   arrondie plutôt que de créer un nouvel asset. */
.tfo-header .wp-block-site-logo {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border-radius: 14px;
	padding: 0.35rem 0.85rem;
}
.tfo-header .wp-block-site-logo img { max-height: 56px; width: auto; display: block; }

/* Logo, navigation, CTA sur une seule ligne : le CTA reste toujours à droite.
   Sans ça, le flex-wrap de la ligne complète fait passer le bouton seul sur une
   2e ligne calée à gauche dès que le menu (logo + nav + bouton) ne tient plus
   sur une seule ligne. On empêche ce wrap global et on laisse la navigation
   (seule, via son propre flex-wrap interne) se replier sur plusieurs lignes si
   besoin, sans jamais déplacer le logo ni le bouton. */
.tfo-header .wp-block-group.alignwide { flex-wrap: nowrap; }
.tfo-header .wp-block-site-logo,
.tfo-header .wp-block-buttons { flex: 0 0 auto; }
.tfo-header .wp-block-navigation { flex: 1 1 auto; min-width: 0; }

/* Menu : Caviar Dreams, blanc sur le bandeau bleu pétrole */
.tfo-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}
/* Sélecteur renforcé : le CSS coeur de core/navigation applique
   ".wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit; }"
   (classe répétée = spécificité de 3 classes), qui l'emportait sur notre règle
   précédente (2 classes + 1 élément). On égale/dépasse cette spécificité ici. */
.tfo-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	color: #fff;
}
.tfo-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.tfo-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le menu mobile s'ouvre en plein écran sur fond blanc (pas de fond bleu défini
   pour l'overlay) : on repasse les liens en bleu pétrole dans ce contexte pour
   garder un contraste correct, spécificité supérieure au bloc ci-dessus. */
.tfo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}
.tfo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.tfo-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- CTA RDV : orange, seul élément de cette couleur à l'écran --- */
.tfo-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-cta);
	color: #fff;
	padding: 0.55em 1.3em;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tfo-cta .wp-block-button__link:hover {
	background-color: #d98200;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(243, 146, 0, 0.35);
}

/* Sur très petit écran : le menu se replie, le CTA reste visible */
@media (max-width: 480px) {
	.tfo-header .wp-block-site-logo img { max-height: 42px; }
	.tfo-cta .wp-block-button__link { font-size: 0.85rem; padding: 0.5em 0.9em; }
}

/* --- Vagues séparatrices de sections --- */
.tfo-wave { display: block; width: 100%; height: clamp(48px, 8vw, 110px); line-height: 0; }
.tfo-wave svg { display: block; width: 100%; height: 100%; }
/* Déborde jusqu'aux bords de la fenêtre quel que soit le template/la
   marge du conteneur parent. Le mécanisme natif WP "alignfull" est
   inconsistant selon les pages (cf. front-page.html vs template de
   repli), et la règle cœur ".is-layout-constrained > *" impose déjà
   max-width/margin:auto en !important : on doit la surpasser ici. */
.tfo-wave-section {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* --- Sections --- */
.tfo-section-soft {
	background-color: var(--wp--preset--color--base-soft);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--base-soft);
	clip-path: inset(0 -100vmax);
}

/* Même fond clair que .tfo-section-soft, mais sans le débordement plein
   bord : pour un bloc imbriqué dans une colonne (ex. "Tout, dans le
   détail" sur Publications), qui doit rester contenu dans sa colonne. */
.tfo-detail-soft {
	background-color: var(--wp--preset--color--base-soft);
}

/* --- Page Publications : rails de navigation sticky de part et d'autre de la
   colonne centrale (sommaire à gauche, chiffres clés à droite) ---
   top = hauteur du header sticky (~72px) + marge de confort. Désactivé sous
   782px (breakpoint où wp:columns empile les colonnes) pour ne pas bloquer
   la lecture sur mobile : les rails redeviennent statiques et s'empilent
   avec la colonne centrale. */
.tfo-rail-left,
.tfo-rail-right {
	position: sticky;
	top: calc(80px + 1.5rem);
	align-self: flex-start;
}
body.admin-bar .tfo-rail-left,
body.admin-bar .tfo-rail-right { top: calc(80px + 32px + 1.5rem); }
@media (max-width: 782px) {
	.tfo-rail-left,
	.tfo-rail-right {
		position: static;
	}
	body.admin-bar .tfo-rail-left,
	body.admin-bar .tfo-rail-right { top: auto; }
}

/* Sommaire du rail gauche : liste sans puces, liens discrets */
.tfo-rail-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tfo-rail-nav li { margin: 0 0 0.6em; }
.tfo-rail-nav a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}
.tfo-rail-nav a:hover { text-decoration: underline; }

/* Mini-cartes du rail droit (chiffres clés), empilées verticalement */
.tfo-rail-card {
	background-color: var(--wp--preset--color--base-soft);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	margin-bottom: 0.8rem;
}
.tfo-rail-card p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.tfo-rail-card:last-child { margin-bottom: 0; }

/* --- Articles de blog : intertitres H2 du corps de l'article, plus petits
   que les H2 du reste du site (qui gardent la taille par défaut). Ciblage
   restreint aux H2 "bruts" du contenu (sans classe de taille explicite) pour
   ne pas toucher les H2 avec une fontSize choisie volontairement (ex. le CTA
   de fin d'article). --- */
.entry-content.wp-block-post-content h2.wp-block-heading:not([class*="has-"]) {
	font-size: var(--wp--preset--font-size--medium);
}

/* --- Footer --- */
.tfo-footer { background-color: var(--wp--preset--color--primary); color: #fff; }
.tfo-footer a { color: #cfe8ef; }
.tfo-footer a:hover { color: #fff; }
.tfo-footer .wp-block-heading, .tfo-footer h2, .tfo-footer h3 { color: #fff; }
.tfo-footer .wp-block-social-links .wp-social-link { background: rgba(255,255,255,0.12); border-radius: 8px; }

/* Pas d'espace blanc entre la vague et le footer */
.tfo-wave-footer { margin-bottom: 0 !important; }
.tfo-wave-footer + .tfo-footer { margin-top: 0 !important; }

/* Pas d'espace blanc entre la vague et le bloc de section coloré suivant */
.tfo-wave-section { margin-bottom: 0 !important; }
.tfo-wave-section + .tfo-section-soft { margin-top: 0 !important; }

/* --- Bandeau « site en construction » (accueil — à retirer à la mise en ligne) --- */
.tfo-bandeau-construction {
	background: #eaf4f7;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	padding: 0.7rem 1.2rem;
	border-top: 6px solid;
	border-bottom: 6px solid;
	border-image: repeating-linear-gradient(45deg, #2696af 0 14px, #eaf4f7 14px 28px) 6;
}

/* --- Blocs « deux cibles » (page Présentation) --- */
.tfo-cible {
	margin: 2.2rem auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(5, 84, 109, 0.10);
}
.tfo-cible__titre {
	margin: 0;
	padding: 1rem 1.6rem;
	color: #fff;
}
.tfo-cible-food .tfo-cible__titre { background: var(--wp--preset--color--secondary); }
.tfo-cible-autres .tfo-cible__titre { background: var(--wp--preset--color--primary); }
.tfo-cible__corps { padding: 1.4rem 1.6rem 1.9rem; }
.tfo-cible-food .tfo-cible__corps { background: #f2f8fa; }
.tfo-cible-autres .tfo-cible__corps { background: #fbfdfe; }
.tfo-cible__corps h3 { margin-top: 1.6rem; margin-bottom: 0.35rem; }
.tfo-cible__corps > p:first-child { margin-top: 0; }
.tfo-cible__corps h3:first-of-type { margin-top: 0.4rem; }

/* --- Pastilles numérotées (section « Comment ça se passe ») --- */
p.tfo-num {
	width: 52px; height: 52px;
	margin-left: auto; margin-right: auto;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem; font-weight: 700;
}

/* --- Frise chronologique verticale (page L'avocate, section « Mon parcours »)
   ligne turquoise, pastilles pleines bleu pétrole cerclées de blanc, dans le
   même esprit que les pastilles numérotées ci-dessus. --- */
.tfo-frise {
	--tfo-frise-axe: 0.6rem; /* position de l'axe de la ligne, relative au bord gauche de la frise */
	list-style: none;
	margin: 2rem 0 1.5rem;
	padding: 0 0 0 2.2rem;
	position: relative;
}
.tfo-frise::before {
	content: "";
	position: absolute;
	top: 0.35rem;
	bottom: 0.35rem;
	left: var(--tfo-frise-axe);
	width: 3px;
	transform: translateX(-50%);
	background: var(--wp--preset--color--secondary);
	border-radius: 2px;
}
.tfo-frise-etape {
	position: relative;
	padding: 0 0 1.6rem 1.4rem;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}
.tfo-frise-etape:last-child {
	padding-bottom: 0;
}
.tfo-frise-etape::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	/* aligné sur le même axe que la ligne, indépendamment de la largeur du
	   marqueur : translateX(-50%) centre exactement la pastille sur l'axe */
	left: calc(-2.2rem + var(--tfo-frise-axe));
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	box-sizing: content-box;
	background: var(--wp--preset--color--primary);
	border: 3px solid var(--wp--preset--color--base, #fff);
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--wp--preset--color--secondary);
}
.tfo-frise-annee {
	display: block;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	margin-bottom: 0.2rem;
}
.tfo-frise-contenu {
	min-width: 0;
}
.tfo-frise-etape p {
	margin: 0;
}
/* --- Badges logo des structures, dans les items de frise --- */
.tfo-frise-badges {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.tfo-frise-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 6px;
	box-sizing: border-box;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid rgba(5, 84, 109, 0.12);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(5, 84, 109, 0.1);
	overflow: hidden;
}
.tfo-frise-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* --- Deux frises en parallèle (Formation / Expérience) --- */
.tfo-frise-parallel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2.5rem;
	align-items: start;
}
.tfo-frise-col__titre {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 0.5rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--wp--preset--color--secondary);
}
@media (max-width: 781px) {
	.tfo-frise-parallel {
		grid-template-columns: 1fr;
		gap: 2rem 0;
	}
}
@media (max-width: 480px) {
	.tfo-frise {
		--tfo-frise-axe: 0.45rem;
		padding-left: 1.6rem;
	}
	.tfo-frise-etape {
		padding-left: 1.1rem;
		gap: 0.5rem;
	}
	.tfo-frise-etape::before {
		left: calc(-1.6rem + var(--tfo-frise-axe));
		width: 13px;
		height: 13px;
		top: 0.28rem;
	}
	.tfo-frise-logo {
		width: 28px;
		height: 28px;
		padding: 3px;
	}
}

/* --- Eyebrow + titre de section mis en valeur (ex. page Publications, section
   « Brèves ») : petite étiquette turquoise au-dessus d'un H2 agrandi avec une
   bordure d'accent, pour qu'on identifie la section au premier coup d'œil. --- */
.tfo-eyebrow {
	color: var(--wp--preset--color--secondary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.8rem;
	margin-bottom: 0.3rem;
}
h2.tfo-section-title {
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--primary);
	border-left: 4px solid var(--wp--preset--color--secondary);
	padding-left: 0.7rem;
	margin-top: 0;
}

/* --- Page Publications, section « Brèves » : badge de catégorie sur chaque
   vignette (turquoise = En clair, bleu pétrole = Coulisses) pour que le
   type de contenu se comprenne sans lire le texte. --- */
.tfo-breve-badge {
	margin-bottom: 0.35rem;
}
.tfo-breve-badge a {
	display: inline-block;
	padding: 0.2em 0.85em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: #fff;
	background-color: var(--wp--preset--color--secondary);
}
.tfo-breve-badge a[href*="/category/en-clair/"] {
	background-color: var(--wp--preset--color--secondary);
}
.tfo-breve-badge a[href*="/category/coulisses/"] {
	background-color: var(--wp--preset--color--primary);
}

/* --- Page Publications, section « Brèves » : puces de filtre (Tout /
   En clair / Coulisses), filtrage géré en JS vanilla (cf. content de la
   page). --- */
.tfo-filtre-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.6rem 0 1.3rem;
}
.tfo-filtre-pill {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.45em 1.15em;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--primary);
	background-color: #fff;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.tfo-filtre-pill:hover {
	background-color: var(--wp--preset--color--base-soft);
}
.tfo-filtre-pill.is-active {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* --- Titre H1 de page (bloc natif wp:post-title, rendu par le template de
   secours de WordPress en l'absence de templates/page.html) : aligné à
   droite plutôt que par défaut à gauche dans un conteneur centré. --- */
.wp-block-post-title {
	text-align: right;
}

/* --- Pages Honoraires et FAQ : pas d'illustration à côté du H1, on centre --- */
.page-id-16 .wp-block-post-title,
.page-id-17 .wp-block-post-title {
	text-align: center;
}

/* --- Accessibilité : focus visible cohérent --- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}