/*
Theme Name: Vernay
Template: twentytwentyfive
Description: Thème enfant de Twenty Twenty-Five pour la vitrine personnelle de Yoann Vernay.
Version: 1.0.0
Text Domain: vernay
*/

/* ---- Base ---- */
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); }
a { text-underline-offset: 0.2em; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 3px; }

/* ---- En-tête ---- */
/* Le flou est porté par un pseudo-élément : un backdrop-filter sur l'en-tête lui-même
   en ferait le cadre des éléments « fixed », et le menu mobile plein écran resterait
   enfermé dans la hauteur de l'en-tête (constaté sur Safari). */
.vy-header { border-bottom: 1px solid var(--wp--preset--color--accent-4); position: sticky; top: 0; z-index: 20; }
.vy-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Menu mobile ouvert : plein écran, aux couleurs du site. */
.vy-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important;
  padding: var(--wp--preset--spacing--50) !important; }
.vy-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; }
.vy-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-size: 1.5rem; }
.vy-header .wp-block-site-title a { text-decoration: none; }
.vy-header .wp-block-site-title a::before { content: "~/"; color: var(--wp--preset--color--accent-1);
  font-family: var(--wp--preset--font-family--fira-code); margin-right: .15em; }
.vy-header .wp-block-navigation a { text-decoration: none; }
.vy-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-1); }
/* Page en cours : turquoise et soulignée d'un trait (les liens du menu pointent
   vers les pages elles-mêmes, WordPress pose donc aria-current). */
.vy-header .wp-block-navigation .current-menu-item > a,
.vy-header .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--accent-1);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }

/* ---- Éléments récurrents ---- */
.vy-kicker { font-family: var(--wp--preset--font-family--fira-code); font-size: .85rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wp--preset--color--accent-1); margin-bottom: .5rem !important; }
.vy-lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--wp--preset--color--accent-3); line-height: 1.6; }
.vy-muted { color: var(--wp--preset--color--accent-3); }
.vy-section { margin-top: clamp(3rem, 6vw, 5.5rem) !important; }

.vy-card { background: var(--wp--preset--color--accent-2); border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 14px; padding: clamp(1.25rem, 3vw, 1.75rem) !important; height: 100%; box-sizing: border-box;
  transition: border-color .2s ease; }
.vy-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 55%, var(--wp--preset--color--accent-4)); }
.vy-card > :first-child { margin-top: 0; }
.vy-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.vy-card p, .vy-card li { color: var(--wp--preset--color--accent-3); }
.vy-card ul { padding-left: 1.1rem; }
.vy-card li + li { margin-top: .35rem; }

.wp-block-columns.vy-grid { gap: 1.25rem; }
.wp-block-columns.vy-grid > .wp-block-column { display: flex; flex-direction: column; }

/* Chiffres clés */
.vy-stats { gap: 1rem !important; }
.vy-stat { border-left: 2px solid var(--wp--preset--color--accent-1); padding-left: 1rem !important; }
.vy-stat-num { font-family: var(--wp--preset--font-family--fira-code); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  color: var(--wp--preset--color--contrast); margin: 0 !important; line-height: 1.1; }
.vy-stat-label { color: var(--wp--preset--color--accent-3); font-size: .95rem; margin-top: .3rem !important; }

/* Étiquettes */
.vy-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 !important; list-style: none; }
.vy-tags li { font-family: var(--wp--preset--font-family--fira-code); font-size: .8rem; padding: .3rem .65rem;
  border: 1px solid var(--wp--preset--color--accent-4); border-radius: 999px; color: var(--wp--preset--color--contrast);
  margin: 0 !important; }

/* Accueil */
.vy-hero { padding-top: clamp(2rem, 8vw, 6rem) !important; padding-bottom: clamp(1rem, 4vw, 3rem) !important; }
.vy-hero h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.vy-hero h1 .vy-accent, .vy-accent { color: var(--wp--preset--color--accent-1); }
.vy-prompt { font-family: var(--wp--preset--font-family--fira-code); font-size: .95rem; color: var(--wp--preset--color--accent-3); }
.vy-prompt::before { content: "$ "; color: var(--wp--preset--color--accent-1); }

/* Frise du parcours */
.vy-timeline { border-left: 1px solid var(--wp--preset--color--accent-4); padding-left: 1.5rem !important; margin-left: .35rem; }
.vy-timeline > .wp-block-group { position: relative; margin-top: 2rem !important; }
.vy-timeline > .wp-block-group::before { content: ""; position: absolute; left: calc(-1.5rem - 5px); top: .45rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--wp--preset--color--accent-1); box-shadow: 0 0 0 4px var(--wp--preset--color--base); }
.vy-when { font-family: var(--wp--preset--font-family--fira-code); font-size: .85rem; color: var(--wp--preset--color--accent-1); margin: 0 !important; }
.vy-timeline h3 { margin: .25rem 0 .5rem; font-size: 1.15rem; }
.vy-timeline ul { color: var(--wp--preset--color--accent-3); padding-left: 1.1rem; }

/* Couches de sécurité */
.vy-layers { counter-reset: layer; }
.vy-layers > .wp-block-group { counter-increment: layer; position: relative; padding-left: 3.4rem !important; }
.vy-layers > .wp-block-group::before { content: counter(layer, decimal-leading-zero); position: absolute; left: 1.25rem; top: clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--wp--preset--font-family--fira-code); color: var(--wp--preset--color--accent-1); font-size: .9rem; }
.vy-layers > .wp-block-group + .wp-block-group { margin-top: 1rem !important; }

/* Schéma */
.vy-diagram { background: var(--wp--preset--color--accent-2); border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 14px; padding: clamp(.75rem, 2vw, 1.5rem); overflow-x: auto; }
.vy-diagram svg { display: block; width: 100%; min-width: 560px; height: auto; }

/* Encadré */
.vy-note { border: 1px dashed var(--wp--preset--color--accent-4); border-radius: 14px; padding: 1.25rem 1.5rem !important; }

/* Pied de page */
.vy-footer { border-top: 1px solid var(--wp--preset--color--accent-4); color: var(--wp--preset--color--accent-3); font-size: .9rem; }
.vy-footer a { color: var(--wp--preset--color--accent-3); }
.vy-footer a:hover { color: var(--wp--preset--color--accent-1); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Alignement : tout part du bord gauche de la zone large ---- */
.vy-section > *, .vy-hero > * { margin-left: 0 !important; margin-right: auto !important; }
.vy-hero h1 { max-width: 980px; }
.vy-diagram { max-width: 980px; }
.vy-timeline { max-width: 820px; }
main > .wp-block-post-excerpt { max-width: var(--wp--style--global--wide-size) !important; }
main > .wp-block-post-excerpt p { max-width: 760px; }

/* ---- Hiérarchie dans les cartes et la frise ---- */
.vy-card h3, .vy-timeline h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.vy-card p, .vy-card li, .vy-timeline li { font-size: 1.02rem; line-height: 1.6; }
.vy-card .vy-kicker { font-size: .8rem; }
.vy-section h2 { margin-top: .25rem; margin-bottom: 1.5rem; }

/* Focus dans le menu : pas de cadre au focus posé par le script d'ouverture,
   repère turquoise seulement pour la navigation au clavier. */
.vy-header .wp-block-navigation a:focus:not(:focus-visible) { outline: none; }
.vy-header .wp-block-navigation a:focus-visible,
.vy-header .wp-block-navigation button:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; border-radius: 4px; }