/*
Theme Name: O+ Olga Ustabashieva
Theme URI: https://olgaustabashieva.com
Author: Olga Ustabashieva
Author URI: https://olgaustabashieva.com
Description: Thème du portfolio O+ d'Olga Ustabashieva : accueil, projets, à propos et pages projet, avec leurs transitions, la matière du + et les GIF.
Version: 1.5.10
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: oplus
*/

/* Polices auto-hébergées (licence OFL) : Host Grotesk et Raleway (pages L'Index). */
@font-face {
	font-family: 'Host Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 300 800;
	src: url('assets/fonts/host-grotesk-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Host Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 300 800;
	src: url('assets/fonts/host-grotesk-latin-wght-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/raleway-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/raleway-latin-wght-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ou-board { background: #0c0c0c; }
#ou-app { min-height: 100vh; }

body.admin-bar.ou-board header[style*="position: fixed"] { top: 52px !important; }
@media screen and (max-width: 782px) { body.admin-bar.ou-board header[style*="position: fixed"] { top: 66px !important; } }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* --- Safari : moins de fusions « différence » à recomposer pendant le défilement --- */
/* Menu, légende et rail des pages projet : recolorés par ou-safari-fix.js (classe html.ou-ink posée par le script).
   data-ou-blend : passage sur un GIF animé ou un très grand texte, l'inversion d'origine est gardée. */
html.ou-ink body.ou-board header[style*="position: fixed"][style*="mix-blend-mode: difference"]:not([data-ou-blend]),
html.ou-ink body.ou-board div[style*="position: fixed"][style*="mix-blend-mode: difference"]:not([data-ou-blend]) { mix-blend-mode: normal !important; }
html.ou-ink body.ou-board header:not([data-ou-blend]) nav > [data-ou-ink="dark"],
html.ou-ink body.ou-board header:not([data-ou-blend]) nav > [data-ou-ink="dark"] * { color: #0c0c0c !important; }
html.ou-ink body.ou-board header:not([data-ou-blend]) nav > a[data-ou-ink="dark"] img { filter: none !important; }
html.ou-ink body.ou-board div[style*="position: fixed"][data-ou-ink="dark"]:not([data-ou-blend]) { color: #0c0c0c !important; }
html.ou-ink body.ou-board div[style*="position: fixed"][style*="width: 1px"][data-ou-ink="dark"]:not([data-ou-blend]) { background: #a5a5a5 !important; }
html.ou-ink body.ou-board div[style*="position: fixed"][style*="width: 1px"][data-ou-ink="dark"]:not([data-ou-blend]) > div { background: #0c0c0c !important; }
/* Hero : l'inversion du texte sur le O et le + reste, mais calculée dans le seul hero (pas sur toute la page) */
body.ou-board section[style*="touch-action: pan-y"] { isolation: isolate; }
/* Matière du + : couleur grise lisible sur fond clair comme sombre, sans fusion ; dessin limité à son calque */
body.ou-board div[style*="z-index: 40"][style*="mix-blend-mode: difference"] { mix-blend-mode: normal !important; contain: paint; }
body.ou-board div[style*="z-index: 40"][style*="mix-blend-mode: difference"] > span { color: #8f8f8f !important; }
body.ou-board div[style*="grid-auto-rows: 15vw"] > a { isolation: isolate; }
/* Calques plein écran (bandes de transition, intro) : hauteur de l'écran visible sur mobile (barre d'adresse comprise) */
body.ou-board div[style*="position: fixed"][style*="height: 100vh"] { height: 100vh !important; height: 100dvh !important; }

/* Pages projet : la présentation et le texte sous le titre défilant s'alignent sur « Mission » */
@media (min-width: 768px) {
  body.ou-board section[style*="1.4vw 3vw"][style*="gap: 1.4vw"] { gap: 0.7vw !important; }
  body.ou-board div[style^="display: flex; margin-top: 4vw"] > div[style^="width: 50%"]:empty { width: calc(50% + 0.7vw) !important; flex: none; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body.ou-board section[style*="1.4vw 3vw"][style*="gap: 1.4vw"] > div[style*="width: 40%"],
  body.ou-board div[style^="display: flex; margin-top: 4vw"] > p[style*="width: 40%"] { width: calc(50% - 0.7vw) !important; flex: none; }
}

/* Mobile et tablette : le O et le + côte à côte occupent 75 % de la largeur de l'écran
   (55 % de la hauteur au plus, pour les tablettes à l'horizontale) */
@media (max-width: 1100px) {
  body.ou-board section[style*="touch-action: pan-y"] > div[aria-hidden="true"][style*="aspect-ratio"] { height: min(55%, calc(37.5vw - 3px)) !important; }
}

body.ou-board div[style*="repeat(45"][style*="line-height: 23.8px"] { height: clamp(285.6px, 30vw, 520px); }

/* Accueil : le hero fait la hauteur de l'écran sur ordinateur aussi ; le O et le + s'arrêtent au bord bas */
body.ou-board section[style*="height: 900px"][style*="touch-action: pan-y"] { height: 100vh !important; height: 100svh !important; }
body.ou-board section[style*="touch-action: pan-y"] p[style*="top: 774px"] { top: auto !important; bottom: 28px !important; }

/* Version HTML statique (pour les moteurs de recherche), remplacée dès que la page s'anime. */
#ou-app > .ou-snap { visibility: hidden; }

body.ou-plain { background: #f8f8f8; color: #0c0c0c; font-family: 'Host Grotesk', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; }
.ou-plain-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 1.4vw; font-size: 12px; text-transform: uppercase; }
.ou-plain-head a { color: inherit; text-decoration: none; }
.ou-plain-head img { width: 42px; height: auto; display: block; }
.ou-plain-main { max-width: 760px; margin: 0 auto; padding: 8vh 1.4vw 12vh; }
.ou-plain-main h1 { font-size: clamp(36px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -2px; text-transform: uppercase; margin: 0 0 6vh; }
.ou-plain-main a { color: #FF5200; }
.ou-plain-main img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Page 404 : la mire en plein écran, « OOPS » défile en continu (moitié de piste = une boucle).
   Mêmes réglages que le bandeau « PROJETS » de l'accueil : 378 px (150 px sur mobile), graisse 800, même vitesse. */
body.ou-404 { margin: 0; background: #0c0c0c; color: #ffffff; font-family: 'Host Grotesk', Helvetica, Arial, sans-serif; overflow: hidden; }
.ou-404-screen { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.ou-404-gif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ou-404-head, .ou-404-marquee { mix-blend-mode: difference; color: #ffffff; }
/* menu : mêmes positions que sur les autres pages (Projets, À propos, logo, Chambéry et l'heure) */
.ou-404-head { position: absolute; top: 20px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; }
.ou-404-head nav { width: 97%; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 400; line-height: 1.4; text-transform: uppercase; }
.ou-404-head a { color: inherit; text-decoration: none; }
.ou-404-logo { display: block; width: 3%; line-height: 0; }
.ou-404-logo img { width: 100%; height: auto; display: block; filter: invert(1); }
.ou-404-clock { display: inline-block; width: 50px; text-align: right; }
@media (max-width: 1100px) {
  .ou-404-head nav { justify-content: flex-start; }
  .ou-404-head nav > a:nth-child(1) { flex: 0 0 calc(33.333vw - 1.5vw); }
  .ou-404-head nav > a:nth-child(2) { flex: 0 0 33.333vw; }
  .ou-404-head nav > span { margin-left: auto; }
}
@media (max-width: 767px) {
  .ou-404-head nav { font-size: 11px; }
  .ou-404-logo { width: 26px; }
  .ou-404-head nav > span { font-size: 0; }
  .ou-404-head nav > span > span { font-size: 11px; width: auto; }
}
.ou-404-marquee { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; white-space: nowrap; pointer-events: none; }
.ou-404-track { display: inline-flex; animation: ou404 21s linear infinite; }
.ou-404-track span { font-size: 378px; font-weight: 800; line-height: 0.9em; letter-spacing: -2px; text-transform: uppercase; padding-right: 0.3em; }
@media (max-width: 767px) { .ou-404-track span { font-size: 150px; } }
@keyframes ou404 { to { transform: translateX(-50%); } }
.ou-404-head a:focus-visible { outline: 2px solid #FF5200; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ou-404-track { animation: none; } }