/*
Theme Name: Loriod — Variante C
Theme URI: https://www.valentin-loriod.com/
Author: Refonte FSE — Variante C
Description: Thème FSE autonome pour valentin-loriod.com (phase 3, refonte graphique). Design sombre/crème, angles vifs, sans ombre, typographies Bricolage Grotesque + Source Sans 3 auto-hébergées. Indépendant du thème « Valentin Loriod — FSE ».
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.3
Text Domain: loriod-variante-c
*/

/* ==========================================================================
   0. Alias de tokens
   Les couleurs sont exposées par theme.json (--wp--preset--color--*).
   On ajoute des alias courts + les deux survols hors palette.
   ========================================================================== */
:root {
	--dark:            var(--wp--preset--color--bleu-nuit);
	--dark2:           var(--wp--preset--color--bleu-nuit-clair);
	--cream:           var(--wp--preset--color--creme);
	--cream2:          var(--wp--preset--color--creme-texte);
	--muted:           var(--wp--preset--color--gris-sourd);
	--amber:           var(--wp--preset--color--bleu-accent);
	--amber-hover:     oklch(0.80 0.135 252);
	--amber-deep:      var(--wp--preset--color--bleu-profond);
	--amber-deep-hover: oklch(0.33 0.14 258);
	--rule-dark:       var(--wp--preset--color--filet-sombre);
	--rule-light:      var(--wp--preset--color--filet-clair);
	--ink:             var(--wp--preset--color--encre);
	--ink2:            var(--wp--preset--color--encre-douce);

	/* Géométrie */
	--marge-laterale:  clamp(20px, 5vw, 72px);
	--gouttiere-corps: clamp(32px, 5vw, 88px);
}

/* ==========================================================================
   1. Base
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	text-wrap: pretty;
}

/* Ancres : décalage sous l'en-tête collant (110px) */
:where(.loriod-corps) h2[id],
:where(.loriod-corps) h3[id] {
	scroll-margin-top: 110px;
}

/* Optique variable de Bricolage : laisser le navigateur choisir l'opsz */
h1, h2, h3,
.loriod-brand__name,
.loriod-footer__name {
	font-optical-sizing: auto;
}

/* Focus visible sur tous les éléments interactifs */
:focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Coller le contenu sous l'en-tête (supprime le blockGap racine au-dessus du main) */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* ==========================================================================
   2. En-tête — collant, fond pleine largeur, contenu 1320
   ========================================================================== */
.loriod-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--rule-dark);
}

/* La rangée interne : logo à gauche, navigation + CTA à droite */
.loriod-header__row {
	min-height: 78px;
	gap: clamp(16px, 3vw, 40px);
}

/* Logotype (deux lignes) */
.loriod-brand {
	text-decoration: none;
	line-height: 1.1;
}
.loriod-brand:hover { text-decoration: none; }

.loriod-brand__name {
	display: block;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--cream);
}
.loriod-brand__name a {
	color: var(--cream);
	text-decoration: none;
}
.loriod-brand__name a:hover { color: var(--cream); }

.loriod-brand__sub {
	display: block;
	margin: 3px 0 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.loriod-header__cluster {
	gap: clamp(12px, 1.8vw, 26px);
}

/* ==========================================================================
   3. Navigation — 15px, survol/actif ambre, repli burger < 1100px
   ========================================================================== */
.loriod-nav .wp-block-navigation__container {
	gap: clamp(12px, 1.8vw, 26px);
}

.loriod-header .loriod-nav .wp-block-navigation-item__content {
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	color: var(--cream);
	padding: 10px 2px;
	line-height: 1.25;
}
.loriod-header .loriod-nav .wp-block-navigation-item__content:hover,
.loriod-header .loriod-nav .wp-block-navigation-item__content:focus {
	color: var(--amber);
}

/* Entrée active (page courante) : ambre + soulignement épais */
.loriod-header .loriod-nav .current-menu-item > .wp-block-navigation-item__content,
.loriod-header .loriod-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.loriod-header .loriod-nav .current_page_item > .wp-block-navigation-item__content {
	color: var(--amber);
	box-shadow: inset 0 -2px 0 0 var(--amber);
}

/* --- Repli burger : on repousse le point de bascule du bloc Navigation à 1100px ---
   Le bloc core/navigation bascule en menu plat dès 600px. On réactive l'overlay
   entre 600 et 1099px pour obtenir le burger jusqu'à 1100px. */
@media (min-width: 600px) and (max-width: 1099.98px) {
	.loriod-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.loriod-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.loriod-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Bouton burger : couleur claire sur fond sombre */
.loriod-header .wp-block-navigation__responsive-container-open,
.loriod-header .wp-block-navigation__responsive-container-close {
	color: var(--cream);
}

/* Overlay ouvert : fond bleu nuit */
.loriod-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--dark);
}
.loriod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--cream);
	font-size: 20px;
}

/* Bouton « Contacter le cabinet » dans l'en-tête (plus compact que le bouton principal) */
.loriod-btn-header .wp-block-button__link {
	font-size: 15px;
	font-weight: 600;
	min-height: 48px;
	padding: 14px 20px;
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   4. Boutons — angles vifs, cible 56px pour le bouton principal
   ========================================================================== */
.wp-block-button__link {
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
}

/* ==========================================================================
   5. Hero de traitement
   ========================================================================== */
.loriod-hero {
	position: relative;
	overflow: hidden;
}

/* Conteneur relatif (1320) qui sert de référence à l'illustration absolue */
.loriod-hero__wrap {
	position: relative;
}

/* -- Illustration de fond -- */
.loriod-hero__illus {
	position: absolute;
	top: calc(-1 * clamp(48px, 5vw, 76px));
	right: 0;
	bottom: calc(-1 * clamp(56px, 6vw, 88px));
	width: min(64%, 960px);
	pointer-events: none;
	z-index: 0;
}

/* Cadre au ratio natif, centré verticalement */
.loriod-hero__illus .wp-block-image {
	position: absolute;
	top: 50%;
	right: 0;
	width: 100%;
	margin: 0;
	aspect-ratio: 1672 / 940;
	transform: translateY(-50%);
}

.loriod-hero__illus .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	filter: contrast(1.08) saturate(1.03) brightness(1.02);

	-webkit-mask-image:
		radial-gradient(76% 84% at 56% 44%, #000 0%, #000 40%, rgba(0,0,0,0.5) 70%, transparent 100%),
		linear-gradient(to left,   rgba(0,0,0,0) 0%, #000 15%),
		linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 14%),
		linear-gradient(to top,    rgba(0,0,0,0) 0%, #000 12%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12%);
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(76% 84% at 56% 44%, #000 0%, #000 40%, rgba(0,0,0,0.5) 70%, transparent 100%),
		linear-gradient(to left,   rgba(0,0,0,0) 0%, #000 15%),
		linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 14%),
		linear-gradient(to top,    rgba(0,0,0,0) 0%, #000 12%),
		linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12%);
	mask-composite: intersect;
}

/* Trois voiles bleu-nuit par-dessus l'image (ordre CSS = du dessus vers le dessous) */
.loriod-hero__illus .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg,   var(--dark) 0%, var(--dark) 20%, transparent 40%),
		linear-gradient(90deg,  var(--dark) 0%, var(--dark) 30%, transparent 62%),
		radial-gradient(78% 88% at 56% 44%, transparent 0%, transparent 44%, var(--dark) 100%);
}

/* Option : hero sans illustration */
.loriod-hero--sans-illustration .loriod-hero__illus,
.loriod-hero .loriod-hero__illus.\--sans-illustration {
	display: none;
}

/* -- Fil d'Ariane -- */
.loriod-hero__breadcrumb {
	position: relative;
	z-index: 1;
	margin: 0 0 clamp(28px, 3.5vw, 48px);
	font-size: 15px;
	color: var(--muted);
}
.loriod-hero__breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}
.loriod-hero__breadcrumb a:hover { color: var(--amber); }
.loriod-hero__breadcrumb .sep { padding: 0 8px; }
.loriod-hero__breadcrumb .courant { color: var(--cream2); }

/* -- Colonne de texte (bornée à 640) -- */
.loriod-hero__textcol {
	position: relative;
	z-index: 1;
	max-width: min(100%, 640px);
}
.loriod-hero__textcol h1 {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(36px, 4.6vw, 72px);
	color: var(--cream);
}
.loriod-hero__accroche {
	margin: clamp(24px, 3vw, 36px) 0 0;
	max-width: 48ch;
	font-size: clamp(18px, 1.35vw, 21px);
	line-height: 1.65;
	color: var(--cream2);
}

/* -- Barre de repères -- */
.loriod-hero__reperes {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: clamp(36px, 4vw, 56px);
	border-top: 1px solid var(--rule-dark);
}
.loriod-hero__repere {
	padding: 22px clamp(24px, 3vw, 48px) 0;
	border-right: 1px solid var(--rule-dark);
}
.loriod-hero__repere:first-child { padding-left: 0; }
.loriod-hero__repere:last-child  { padding-right: 0; border-right: 0; }
.loriod-hero__repere-val {
	margin: 0;
	font-size: 19px;
	color: var(--cream);
}

/* Sur-titre partagé (repères hero + libellés footer) */
.loriod-surtitre {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   6. Grille contenu — sommaire 220 / corps 1fr
   ========================================================================== */
.contenu-traitement {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	column-gap: var(--gouttiere-corps);
	padding-block: clamp(56px, 6vw, 100px) clamp(72px, 8vw, 120px);
}

.loriod-corps {
	min-width: 0;
	/* espacement maîtrisé par les marges d'éléments ci-dessous */
	--wp--style--block-gap: 0;
}

/* ==========================================================================
   7. Sommaire « Sur cette page » + scrollspy
   ========================================================================== */
.loriod-sommaire {
	position: sticky;
	top: 96px;
	align-self: start;
}
.loriod-sommaire__label {
	margin: 0 0 18px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink2);
}
.loriod-sommaire__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 1px solid var(--rule-light);
}
.loriod-sommaire__list li {
	margin: 0;
	padding: 0;
}
.loriod-sommaire__list a {
	display: block;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	color: var(--ink2);
	padding: 9px 0 9px 16px;
}
.loriod-sommaire__list a:hover { color: var(--amber-deep); }
.loriod-sommaire__list a.is-active {
	color: var(--ink);
	border-left: 2px solid var(--amber);
	margin-left: -1px;
}

/* ==========================================================================
   8. Corps rédactionnel (typographie contextuelle)
   ========================================================================== */
.loriod-corps > h2 {
	margin: clamp(48px, 5vw, 72px) 0 20px;
	padding-top: 14px;
	border-top: 2px solid var(--amber);
}
.loriod-corps > h2:first-of-type { margin-top: 0; }

.loriod-corps h3 {
	margin: 28px 0 12px;
}

.loriod-corps p {
	margin: 0 0 22px;
	font-size: 20px;
	line-height: 1.68;
}

.loriod-corps a {
	color: var(--amber-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.loriod-corps a:hover { color: var(--amber-deep-hover); }

/* Listes : pas de puce, tiret ambre en ::before, filet bas */
.loriod-corps ul {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.loriod-corps ul li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule-light);
	font-size: 20px;
	line-height: 1.6;
}
.loriod-corps ul li::before {
	content: "—";
	color: var(--amber-deep);
}

/* Citation mise en avant */
.loriod-corps .wp-block-quote {
	margin: clamp(36px, 4vw, 52px) 0;
	padding: 0 0 0 clamp(20px, 3vw, 36px);
	border: 0;
	border-left: 1px solid var(--rule-light);
	font-style: normal;
}
.loriod-corps .wp-block-quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 400;
	font-size: clamp(22px, 2.1vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.loriod-corps .wp-block-quote cite { display: none; }

/* Figures (emplacements photo) */
.loriod-corps figure.wp-block-image {
	margin: clamp(36px, 4vw, 52px) 0;
}
.loriod-corps figure.wp-block-image:first-child {
	margin-top: 0;
	margin-bottom: clamp(40px, 4.5vw, 60px);
}
.loriod-corps figure.wp-block-image figcaption {
	margin-top: 12px;
	font-size: 16px;
	color: var(--ink2);
}

/* ==========================================================================
   9. Tableau de tarifs
   ========================================================================== */
.loriod-tarifs {
	border-top: 1px solid var(--rule-light);
	margin-bottom: 20px;
}
.loriod-tarifs__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule-light);
}
.loriod-tarifs__row p { margin: 0; font-size: 19px; }
.loriod-tarifs__amount {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	white-space: nowrap;
}
.loriod-tarifs__legal {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink2);
}

/* ==========================================================================
   10. FAQ (core/details restylé)
   ========================================================================== */
.loriod-faq { border-top: 1px solid var(--rule-light); }
.loriod-faq .wp-block-details {
	border-bottom: 1px solid var(--rule-light);
}
.loriod-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 22px 0;
	min-height: 48px;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 500;
	font-size: clamp(19px, 1.6vw, 23px);
	letter-spacing: -0.01em;
}
.loriod-faq summary::-webkit-details-marker { display: none; }
.loriod-faq summary::after {
	content: "+";
	color: var(--amber-deep);
	font-size: 22px;
	font-family: var(--wp--preset--font-family--texte);
	line-height: 1;
}
.loriod-faq .wp-block-details p {
	margin: 0 0 24px;
	font-size: 19px;
	line-height: 1.65;
	max-width: 64ch;
	color: var(--ink2);
}

/* ==========================================================================
   11. Encart rendez-vous
   ========================================================================== */
.loriod-encart {
	margin-top: clamp(56px, 6vw, 88px);
	padding: clamp(32px, 4vw, 48px);
}
.loriod-encart h2 {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.12;
	color: var(--cream);
	max-width: 26ch;
}
.loriod-encart__intro {
	margin: 16px 0 28px;
	font-size: 19px;
	line-height: 1.65;
	color: var(--cream2);
	max-width: 56ch;
}
.loriod-encart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}
.loriod-encart__tel {
	margin: 0;
	font-size: 17px;
	color: var(--muted);
}
.loriod-encart__tel a {
	color: var(--muted);
	text-decoration: none;
}
.loriod-encart__tel a:hover { color: var(--amber); }

/* ==========================================================================
   12. Pied de page
   ========================================================================== */
.loriod-footer {
	border-top: 1px solid var(--rule-dark);
}
.loriod-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 56px);
	border-bottom: 1px solid var(--rule-dark);
	padding-bottom: clamp(32px, 4vw, 52px);
}
.loriod-footer__name {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 19px;
	font-weight: 500;
	color: var(--cream);
}
.loriod-footer .loriod-surtitre { margin-bottom: 14px; }
.loriod-footer p { margin: 0; font-size: 17px; line-height: 1.6; }
.loriod-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.loriod-footer__links p { line-height: 1.4; }
.loriod-footer__links a {
	color: var(--cream2);
	text-decoration: none;
}
.loriod-footer__links a:hover { color: var(--amber); }
.loriod-footer__contact a { color: var(--amber); text-decoration: none; }
.loriod-footer__contact a:hover { text-decoration: underline; }
.loriod-footer__mention {
	margin: 24px 0 0;
	font-size: 15px;
	color: var(--muted);
	max-width: 80ch;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.contenu-traitement {
		grid-template-columns: 1fr;
		row-gap: clamp(32px, 6vw, 48px);
	}
	.loriod-sommaire {
		position: static;
	}
	.loriod-hero__illus { display: none; }
}

@media (max-width: 640px) {
	.loriod-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}