/*
Theme Name: T.INGER.TEC
Theme URI: https://t-inger-tech.com
Description: Thème enfant de Twenty Twenty-Three pour le site biographique et documentaire de Pape Aliou Dieye. Blocs WordPress natifs, polices hébergées localement, aucune dépendance externe (ni Spectra, ni ZIP AI, ni API d'IA).
Author: ET J'AI CRIÉ
Author URI: https://etjaicrie.com
Template: twentytwentythree
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tinger-tec
*/

/* ==========================================================================
   Styles centralisés T.INGER.TEC
   Couleurs, polices et tailles : voir theme.json (Apparence > Éditeur > Styles).
   Ce fichier ne gère que la mise en forme graphique des motifs.
   ========================================================================== */

:root {
	--tinger-marine: var(--wp--preset--color--marine, #0F2747);
	--tinger-aviation: var(--wp--preset--color--aviation, #4F7EA8);
	--tinger-ciel: var(--wp--preset--color--ciel, #A9CFEA);
	--tinger-argent: var(--wp--preset--color--argent, #C0C7CF);
	--tinger-mono: var(--wp--preset--font-family--plex-mono, ui-monospace, monospace);
	--tinger-hairline: 1px solid color-mix(in srgb, var(--tinger-argent) 70%, transparent);
	--tinger-ease: cubic-bezier(.2, .7, .2, 1);
}

:root {
	--wp--style--root--padding-left: clamp(1rem, 5vw, 4rem);
	--wp--style--root--padding-right: clamp(1rem, 5vw, 4rem);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Ancres : compenser l'en-tête collant */
:where(.wp-site-blocks) [id] { scroll-margin-top: 5.5rem; }

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

::selection { background: var(--tinger-ciel); color: var(--tinger-marine); }

:focus-visible { outline: 2px solid var(--tinger-aviation); outline-offset: 3px; }
.has-marine-background-color :focus-visible { outline-color: var(--tinger-ciel); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part:has(.tinger-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.tinger-header {
	border-bottom: 1px solid rgba(192, 199, 207, .18);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	background-color: rgba(15, 39, 71, .94) !important;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.tinger-header) { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part:has(.tinger-header) { top: 0; } }

/* Landing : sections bord à bord, sans espace entre elles */
.wp-site-blocks > main.tinger-landing,
.wp-site-blocks > main.tinger-landing + footer { margin-block-start: 0 !important; }
.tinger-landing .wp-block-post-content > * { margin-block: 0 !important; }
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

.tinger-header .wp-block-site-title a { color: inherit; }
.tinger-header .wp-block-site-title a::before {
	content: "";
	display: inline-block;
	width: .55em; height: .55em;
	margin-right: .7em;
	border: 1px solid var(--tinger-ciel);
	transform: rotate(45deg) translateY(-.1em);
}
.tinger-header .wp-block-navigation-item__content { padding-block: .35rem; position: relative; }
.tinger-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--tinger-ciel); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--tinger-ease);
}
.tinger-header .wp-block-navigation-item__content:hover::after,
.tinger-header .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); }
.tinger-header .wp-block-navigation a { text-decoration: none; }
.tinger-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--tinger-marine) !important; color: #fff !important;
	padding: 2rem clamp(1rem, 5vw, 4rem);
}
.tinger-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.5rem; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Surtitre technique (style de paragraphe « Surtitre technique »)
   -------------------------------------------------------------------------- */
.is-style-tinger-surtitre {
	font-family: var(--tinger-mono) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.is-style-tinger-surtitre::before {
	content: ""; flex: 0 0 2.5rem; height: 1px; background: currentColor; opacity: .7;
}
.is-style-tinger-surtitre.has-text-align-center { justify-content: center; }

/* --------------------------------------------------------------------------
   Quadrillage technique (style de groupe « Quadrillage technique »)
   -------------------------------------------------------------------------- */
.is-style-tinger-quadrillage {
	--grid-c: rgba(79, 126, 168, .09);
	background-image:
		linear-gradient(var(--grid-c) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
	background-size: 48px 48px;
	background-position: -1px -1px;
}
.has-marine-background-color.is-style-tinger-quadrillage { --grid-c: rgba(169, 207, 234, .07); }

/* --------------------------------------------------------------------------
   Filet argent (style de séparateur)
   -------------------------------------------------------------------------- */
.wp-block-separator.is-style-tinger-filet {
	border: 0 !important; height: 1px !important; width: 100%; max-width: none;
	background: linear-gradient(90deg, var(--tinger-argent), color-mix(in srgb, var(--tinger-argent) 15%, transparent)) !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Section 1 — Accueil
   -------------------------------------------------------------------------- */
.tinger-hero { overflow: hidden; isolation: isolate; }
.tinger-hero .wp-block-cover__inner-container { width: 100%; }
.tinger-hero h1 {
	font-stretch: 112%;
	text-wrap: balance;
	margin-block: 0;
	max-width: 11ch;
}
.tinger-hero .tinger-hero__signature {
	font-family: var(--tinger-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.tinger-hero .tinger-hero__intro { max-width: 34rem; }
/* Échelle d'instrument, bord droit */
.tinger-hero::after {
	content: "";
	position: absolute; z-index: 1;
	top: 12%; bottom: 12%; right: clamp(.75rem, 2.5vw, 2.5rem);
	width: 22px;
	background:
		repeating-linear-gradient(to bottom, rgba(192,199,207,.55) 0 1px, transparent 1px 72px) right / 22px 100% no-repeat,
		repeating-linear-gradient(to bottom, rgba(192,199,207,.4) 0 1px, transparent 1px 14.4px) right / 10px 100% no-repeat;
	pointer-events: none;
}
.tinger-hero .wp-block-cover__image-background { object-position: 70% 50%; }
@media (max-width: 781px) {
	.tinger-hero::after { display: none; }
	.tinger-hero .wp-block-cover__image-background { object-position: 62% 50%; }
}

/* Coordonnées / légende technique sous le nom */
.tinger-meta {
	border-top: 1px solid rgba(192, 199, 207, .35);
	padding-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Section 2 — Domaines
   -------------------------------------------------------------------------- */
.tinger-domaine {
	border-top: 1px solid var(--tinger-marine);
	padding-top: 1.5rem;
	position: relative;
}
.tinger-domaine::before {
	content: ""; position: absolute; top: -4px; left: 0;
	width: 7px; height: 7px; background: var(--tinger-marine);
}
.tinger-domaine__numero {
	font-family: var(--tinger-mono);
	font-size: 1.5rem !important;
	letter-spacing: .06em;
	color: var(--tinger-aviation);
	margin: 0 0 2rem;
}
.tinger-domaine h3 { font-stretch: 108%; }
@media (min-width: 782px) {
	.tinger-domaines > .wp-block-column:nth-child(2) { margin-top: 4rem; }
	.tinger-domaines > .wp-block-column:nth-child(3) { margin-top: 8rem; }
}

/* --------------------------------------------------------------------------
   Section 3 — Parcours (chronologie)
   -------------------------------------------------------------------------- */
@media (min-width: 782px) {
	.tinger-collant { position: sticky; top: 7rem; }
}
.tinger-chronologie { position: relative; }
.tinger-etape {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .5rem;
	padding: 2rem 0 2rem 2.25rem;
	border-left: 1px solid rgba(192, 199, 207, .35);
	position: relative;
	margin-block-start: 0 !important;
}
.tinger-etape::before {
	content: ""; position: absolute; left: -5px; top: 2.65rem;
	width: 9px; height: 9px; border: 1px solid var(--tinger-ciel);
	background: var(--tinger-marine); transform: rotate(45deg);
}
.tinger-etape:last-child::before { background: var(--tinger-ciel); }
.tinger-etape > * { margin-block: 0 !important; }
.tinger-etape__date {
	font-stretch: 112%;
	font-weight: 500 !important;
	letter-spacing: -.02em;
	line-height: 1 !important;
}
.tinger-etape p { max-width: 36rem; }
@media (min-width: 1000px) {
	.tinger-etape { grid-template-columns: 20rem minmax(0, 1fr); gap: 2.5rem; align-items: baseline; }
}

/* --------------------------------------------------------------------------
   Section 4 — Archives
   -------------------------------------------------------------------------- */
.tinger-document {
	border: var(--tinger-hairline);
	padding: 1.75rem;
	background: #fff;
	transition: border-color .3s var(--tinger-ease);
}
.tinger-document:hover { border-color: var(--tinger-aviation); }
.tinger-document > * { margin-block: 0; }
.tinger-document .is-style-tinger-surtitre::before { display: none; }

.tinger-note {
	border-left: 2px solid var(--tinger-aviation);
	padding-left: 1.25rem;
}

/* --------------------------------------------------------------------------
   Section 5 — Contact
   -------------------------------------------------------------------------- */
.tinger-email {
	font-stretch: 110%;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.05 !important;
}
.tinger-email a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
	transition: background-size .4s var(--tinger-ease), color .2s;
	padding-bottom: .08em;
}
.tinger-email a:hover, .tinger-email a:focus-visible { background-size: 0 1px; color: var(--tinger-aviation); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.tinger-footer a { text-decoration: none; }
.tinger-footer a:hover, .tinger-footer a:focus-visible { text-decoration: underline; }
.tinger-footer .wp-block-site-title a::before { display: none; }

/* --------------------------------------------------------------------------
   Boutons : variante contour
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; border: 1px solid currentColor;
}
.wp-element-button .tinger-fleche, .wp-block-button__link { transition: background-color .25s, color .25s; }

/* --------------------------------------------------------------------------
   Apparition au défilement — discrète, CSS uniquement,
   désactivée si l'utilisateur préfère réduire les animations.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.tinger-apparition > * {
			animation: tinger-apparition linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
	.tinger-hero .wp-block-cover__inner-container > * {
		animation: tinger-entree .9s var(--tinger-ease) both;
	}
	.tinger-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: .08s; }
	.tinger-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: .16s; }
	.tinger-hero .wp-block-cover__inner-container > *:nth-child(n+4) { animation-delay: .24s; }
}
@keyframes tinger-apparition {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
@keyframes tinger-entree {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
/* Dans l'éditeur : tout reste visible */
.editor-styles-wrapper .tinger-apparition > *,
.editor-styles-wrapper .tinger-hero .wp-block-cover__inner-container > * { animation: none !important; }

/* Éditeur : titre de page à taille raisonnable */
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .wp-block-post-title.editor-post-title__input {
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.1 !important;
	font-stretch: 100%;
}

/* Lien « Espace privé » (phase 2) : ajouter un lien de navigation avec la classe tinger-prive */
.tinger-header .tinger-prive > .wp-block-navigation-item__content {
	border: 1px solid rgba(169, 207, 234, .55);
	padding: .45rem .85rem;
	color: var(--tinger-ciel);
}
.tinger-header .tinger-prive > .wp-block-navigation-item__content::after { display: none; }

/* Impression */
@media print {
	.tinger-header, .tinger-hero::after { display: none; }
	.tinger-hero { min-height: auto !important; }
}