/*
Theme Name:   Ludovic Arnal (TT5)
Theme URI:    https://webdesign.ludovicarnal.com
Description:  Thème enfant FSE de Twenty Twenty-Five pour webdesign.ludovicarnal.com — direction « tech lumineux ».
Author:       Ludovic Arnal
Author URI:   https://webdesign.ludovicarnal.com
Template:     twentytwentyfive
Version:      0.3.0
Requires at least: 6.7
Requires PHP: 8.0
Text Domain:  webdesign-la-tt5
*/

/* Règle version : Bug → +0.0.1 / Fonctionnalité → +0.1.0 / Changement cassant → +1.0.0 */

/* Les réglages visuels vivent dans theme.json ; ici seulement ce que theme.json ne sait pas faire. */

/* ── Général ──────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

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

/* Les ancres de l'accueil ne passent pas sous l'en-tête collant */
[id] { scroll-margin-top: 5.5rem; }

/* TT5 ajoute un espace (blockGap) entre en-tête, contenu et pied de page :
   on le supprime, chaque section gère ses propres marges */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }

::selection { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--contrast); }

/* ── Focus propre : anneau uniquement au clavier ─────────────── */

a, button, summary, input, textarea, select,
.wp-block-button__link {
	outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Sur le bloc bleu (contact) : anneau jaune */
.wlt5-bleu :focus-visible { outline-color: var(--wp--preset--color--accent-2) !important; }

/* ── Boutons ──────────────────────────────────────────────── */

/* Contour : même bordure 1px et même padding que le bouton plein
   → même hauteur au repos et au survol */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	padding: 0.85em 1.5em;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-6);
	border-color: var(--wp--preset--color--contrast);
}

/* ── Éléments communs ─────────────────────────────────────── */

/* Étiquette mono au-dessus des titres : « 01 — Réalisations » */
.wlt5-etiquette {
	margin: 0 0 .75rem;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
	color: var(--wp--preset--color--accent-1);
}

/* Chapô / texte secondaire */
.wlt5-chapo {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--accent-3);
}

.wlt5-gris { color: var(--wp--preset--color--accent-3); }

/* Surlignage jaune : un mot par titre, pas plus */
.wlt5-surligne {
	background: linear-gradient(transparent 62%, var(--wp--preset--color--accent-2) 62%);
	padding: 0 .12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Grille de points (fond du héro, cadre du portrait) */
.wlt5-points {
	background-image: radial-gradient(#C9D1DE 1px, transparent 1px);
	background-size: 22px 22px;
}

/* Puces « stack » en mono */
.wlt5-puces { gap: .6rem !important; }

.wlt5-puces > p {
	margin: 0;
	padding: .3rem .65rem;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
	line-height: 1.4;
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 6px;
}

.wlt5-puces > p.wlt5-puces__titre {
	background: none;
	border: 0;
	padding-left: 0;
	color: var(--wp--preset--color--accent-3);
}

/* Carte blanche à filet (savoir-faire, encarts) */
.wlt5-carte {
	background: var(--wp--preset--color--accent-6);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 12px;
}

.wlt5-carte > *:first-child { margin-top: 0; }

.wlt5-numero {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
	color: var(--wp--preset--color--accent-1);
}

/* ── En-tête ──────────────────────────────────────────────── */

/* Collant en haut de la fenêtre ; se réduit au défilement (classe posée par assets/js/front.js) */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.wlt5-entete {
	background: rgba(247, 248, 250, .92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	transition: padding .3s ease, box-shadow .3s ease;
}

.wlt5-entete .wp-block-site-title,
.wlt5-entete .wp-block-button__link {
	transition: font-size .3s ease, padding .3s ease;
}

.wlt5-colle .wlt5-entete {
	padding-top: .55rem !important;
	padding-bottom: .55rem !important;
	box-shadow: 0 10px 24px -18px rgba(18, 24, 38, .45);
}

.wlt5-colle .wlt5-entete .wp-block-site-title { font-size: 1.15rem; }
.wlt5-colle .wlt5-entete .wp-block-button__link { padding: .45em 1em; }

@media (prefers-reduced-motion: reduce) {
	.wlt5-entete,
	.wlt5-entete .wp-block-site-title,
	.wlt5-entete .wp-block-button__link { transition: none; }
}

/* Barre d'admin WordPress non fixe sur petit écran : l'en-tête colle au bord */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}

.wlt5-signature {
	display: flex;
	align-items: baseline;
	gap: .5rem;
}

.wlt5-signature .wp-block-site-title { margin: 0; }

.wlt5-signature__suffixe {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
	color: var(--wp--preset--color--accent-1);
}

.wlt5-entete .wp-block-button__link { padding: .6em 1.1em; font-size: .95rem; }

/* ── Accueil : héro ───────────────────────────────────────── */

.wlt5-dispo {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: .35rem .9rem;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
	color: var(--wp--preset--color--accent-3);
	background: var(--wp--preset--color--accent-6);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 999px;
}

.wlt5-dispo::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1F9D6B;
}

.wlt5-hero__titre {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.04;
	letter-spacing: -.03em;
}

/* Carte « theme.json » (décorative) */
.wlt5-code {
	position: relative;
	background: var(--wp--preset--color--accent-6);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 14px;
	box-shadow: 0 24px 48px -24px rgba(18, 24, 38, .18);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .84rem;
	line-height: 1.9;
}

.wlt5-code__entete {
	display: flex;
	justify-content: space-between;
	padding: .7rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
	font-size: .75rem;
	color: var(--wp--preset--color--accent-3);
}

.wlt5-code__entete span:last-child { color: #1F7A55; }

.wlt5-code__corps { margin: 0; padding: 1.2rem 1.4rem; list-style: none; }

.wlt5-code__corps li { display: flex; align-items: center; gap: .6rem; }

.wlt5-code__corps .i { padding-left: 1.25rem; }

.wlt5-code .cle { color: var(--wp--preset--color--accent-1); }
.wlt5-code .val { color: #9A5B00; }
.wlt5-code .com { color: var(--wp--preset--color--accent-3); }

.wlt5-code .pastille {
	width: 14px;
	height: 14px;
	flex: none;
	border-radius: 4px;
	border: 1px solid #D5DBE5;
}

.wlt5-code__badge {
	position: absolute;
	left: -1.25rem;
	bottom: -1.4rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .9rem;
	border-radius: 10px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-6);
	font-size: .78rem;
	line-height: 1.3;
}

@media (max-width: 781px) {
	.wlt5-code__badge { left: .75rem; }
}

/* Chiffres sous le héro */
.wlt5-chiffres > .wp-block-group { padding-top: 1.5rem; border-top: 1px solid #D5DBE5; }

.wlt5-chiffre {
	margin: 0;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* ── Accueil : méthode ────────────────────────────────────── */

.wlt5-etapes { border-top: 2px solid var(--wp--preset--color--contrast); }

.wlt5-etape__tete {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
	color: var(--wp--preset--color--accent-3);
}

.wlt5-etape__tete mark {
	margin-right: .6rem;
	padding: .1rem .5rem;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
}

.wlt5-etape--fin .wlt5-etape__tete mark { background: var(--wp--preset--color--accent-2); }

/* ── Accueil : à propos ───────────────────────────────────── */

.wlt5-fiche-perso { padding: 0; overflow: hidden; }

.wlt5-fiche-perso dl { margin: 0; }

.wlt5-fiche-perso dl > div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
	padding: .9rem 1.4rem;
	border-top: 1px solid var(--wp--preset--color--accent-4);
}

.wlt5-fiche-perso dl > div:first-child { border-top: 0; }

.wlt5-fiche-perso dt {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .78rem;
	color: var(--wp--preset--color--accent-3);
	padding-top: .15rem;
}

.wlt5-fiche-perso dd { margin: 0; font-weight: 500; }

/* Portrait (À propos, Contact) */
.wlt5-portrait { margin: 0; flex: none; }

.wlt5-portrait img {
	display: block;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--accent-6);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-4);
}

.wlt5-fiche-perso__tete {
	gap: 1.1rem !important;
	padding: 1.4rem 1.4rem 1.2rem;
	background-color: var(--wp--preset--color--accent-5);
	background-image: radial-gradient(#C9D1DE 1px, transparent 1px);
	background-size: 22px 22px;
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.wlt5-fiche-perso__nom {
	margin: 0;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.wlt5-fiche-perso dl > div:first-child { border-top: 0; }

/* Contact : « C'est moi qui vous réponds » */
.wlt5-moi p { margin: 0; color: #E6EBFF; line-height: 1.4; }
.wlt5-moi .wlt5-portrait img { border-color: var(--wp--preset--color--accent-6); box-shadow: none; }

/* ── Bloc bleu (contact) ──────────────────────────────────── */

.wlt5-bleu a:not(.wp-block-button__link) { color: var(--wp--preset--color--accent-6); }
.wlt5-bleu a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--accent-2); }

.wlt5-bleu .wlt5-etiquette { color: var(--wp--preset--color--accent-2); }

.wlt5-bleu .wlt5-chapo { color: #E6EBFF; }

/* Formulaire (plugin Arsenal Contact) dans sa carte blanche */
.wlt5-formulaire {
	background: var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
	border-radius: 14px;
}

.wlt5-formulaire input:not([type="checkbox"]):not([type="radio"]),
.wlt5-formulaire textarea {
	border: 1px solid #C9D1DE;
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	padding: .75rem .9rem;
	font: inherit;
}

.wlt5-formulaire button[type="submit"],
.wlt5-formulaire .wp-element-button {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-6);
}

.wlt5-formulaire button[type="submit"]:hover,
.wlt5-formulaire .wp-element-button:hover {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

/* ── Pied de page ─────────────────────────────────────────── */

.wlt5-pied {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .78rem;
	color: var(--wp--preset--color--accent-3);
}

.wlt5-pied a { color: inherit; }
.wlt5-pied a:hover { color: var(--wp--preset--color--accent-1); }

/* ── Fiche réalisation (template du plugin) ───────────────── */

.wlr-fiche__retour,
.wlr-fiche__surtitre {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: .8125rem;
}

.wlr-fiche__retour a { text-decoration: none; }

.wlr-fiche__surtitre { margin: 0 0 .75rem; color: var(--wp--preset--color--accent-1); }

.wlr-fiche__titre { font-size: var(--wp--preset--font-size--xx-large); }

.wlr-fiche__mission { font-size: 1.0625rem; }

.wlr-fiche__mission > p:first-child {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
}

/* Mobile : le visuel passe au-dessus du texte, sans prendre toute la largeur */
@media (max-width: 781px) {
	.wlr-fiche__media { max-width: 420px; }
}

/* ── 404 ──────────────────────────────────────────────────── */

.wlt5-404__code {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: clamp(4rem, 12vw, 8rem);
	line-height: 1;
	color: var(--wp--preset--color--accent-4);
}