/*
Theme Name: Pixel Go
Theme URI: https://pixelgo.ca
Author: Pixel Go
Description: Thème sur mesure de Pixel Go, fidèle à la maquette « Prototype accueil Pixel Go ». Contenus gérés avec ACF Pro.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: pixel-go
*/

/* ------------------------------------------------------------------ Polices (auto-hébergées) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 100%;
  src: url(assets/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  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: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 100%;
  src: url(assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-ext-400-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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-400-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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-ext-400-italic.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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-400-italic.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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }

/* ------------------------------------------------------------------ Base (identique à la maquette) */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: #F4EFE6; color: #17261E; font-family: 'Bricolage Grotesque', sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #17261E; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #C2603A; }
::selection { background: #C2603A; color: #F4EFE6; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }
img { max-width: 100%; }
/* Connecté : le header fixe et le menu mobile se placent sous la barre d'administration */
body.admin-bar [data-hdr] { top: 32px !important; }
body.admin-bar .pg-menu { top: 32px !important; }
html:has(body.admin-bar) { scroll-padding-top: 116px; }
@media (max-width: 782px) {
  body.admin-bar [data-hdr], body.admin-bar .pg-menu { top: 46px !important; }
  html:has(body.admin-bar) { scroll-padding-top: 130px; }
}
/* Sous 600 px, la barre d'administration défile avec la page : le header revient tout en haut */
@media (max-width: 600px) {
  body.admin-bar [data-hdr] { top: 0 !important; }
  body.admin-bar .pg-menu { top: 0 !important; z-index: 100000 !important; }
  html:has(body.admin-bar) { scroll-padding-top: 84px; }
}

.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; left: 12px; top: 12px; z-index: 100; background: #17261E; color: #F4EFE6; padding: 12px 18px; text-decoration: none; }

/* Affichage ordinateur / mobile (bascule à 860 px comme la maquette) */
.pg-desk { display: contents; }
.pg-mob { display: none; }
@media (max-width: 859.98px) { .pg-desk { display: none !important; } .pg-mob { display: contents; } }

/* Grille des réalisations : décalage d'une carte sur deux sur grand écran */
@media (min-width: 1110px) { [data-stagger] { margin-top: 120px; } }

/* Menu mobile */
.pg-menu[hidden] { display: none !important; }

/* Accordéons (services, FAQ) : états piloté par la classe is-open */
.pg-acc-panel { display: grid; grid-template-rows: 0fr; }
.pg-acc-item.is-open .pg-acc-panel { grid-template-rows: 1fr; }
.pg-acc-inner { opacity: 0; }
.pg-acc-item.is-open .pg-acc-inner { opacity: 1; }
.pg-acc-icon { background: #17261E; transform: rotate(0deg); }
.pg-acc-item.is-open .pg-acc-icon { background: #C2603A; transform: rotate(45deg); }

/* Révélation de la photo en pixels */
img[data-pixel-reveal] { opacity: 0; }
.no-js img[data-pixel-reveal] { opacity: 1 !important; }

/* ------------------------------------------------------------------ Survols (style-hover de la maquette) */
.h-nav:hover { color: #8E3F20 !important; }
.h-btn:hover { background: #C2603A !important; color: #F4EFE6 !important; transform: translateY(-1px) !important; }
.h-dark:hover { background: #C2603A !important; color: #F4EFE6 !important; gap: 18px !important; }
.h-under:hover { color: #7E3A1E !important; }
.h-arrow:hover { gap: 16px !important; color: #A04B27 !important; border-color: #A04B27 !important; }
.h-fiche:hover { gap: 18px !important; color: #A04B27 !important; }
.h-opt:hover { border-color: #17261E !important; transform: translateY(-1px) !important; }
.h-back:hover { color: #A04B27 !important; }
.h-submit:hover { background: #C2603A !important; gap: 18px !important; }
.h-orange:hover { background: #A9502E !important; color: #FBF8F2 !important; transform: translateY(-2px) !important; box-shadow: 0 14px 30px -12px rgba(194,96,58,.6) !important; }
.h-foot:hover { color: #E9A27F !important; }
.h-card:hover { transform: translateY(-6px) !important; box-shadow: 0 40px 70px -30px rgba(23,38,30,.5) !important; }
a:hover .h-card-arrow { background: #C2603A !important; }
.h-row:hover { padding-left: 10px !important; color: #A04B27 !important; }
.h-mail:hover { color: #A04B27 !important; gap: 28px !important; }
.h-lift:hover { transform: translateY(-2px) !important; }
.h-stepnav:hover { color: #7E3A1E !important; }
button:disabled { cursor: default !important; }

/* Fiche réalisation : textes à gauche, photo de l'écran collante à droite (ordinateur) */
.pg-single { display: flex; flex-direction: column; gap: clamp(48px,6vw,72px); }
.pg-single-media { order: -1; }
@media (min-width: 1000px) {
  .pg-single { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(56px,6vw,104px); align-items: start; }
  .pg-single-media { order: 0; height: 100%; }
  .pg-sticky { position: sticky; top: 110px; }
  body.admin-bar .pg-sticky { top: 142px; }
}

/* Fiche réalisation : bouton lecture de la vidéo */
.pg-play:hover { background: rgba(23,38,30,.32) !important; }
.pg-play:hover .pg-play-btn { transform: scale(1.08); background: #A9502E !important; }
.pg-play:focus-visible { outline: 3px solid #C2603A; outline-offset: -3px; }

/* Fiche réalisation : photo de l'écran, invitation à visiter le site au survol */
.pg-visit .pg-visit-ov { opacity: 0; }
.pg-visit:hover .pg-visit-ov, .pg-visit:focus-visible .pg-visit-ov { opacity: 1; }
.pg-visit:hover .pg-visit-img { transform: scale(1.025); }
.pg-visit:focus-visible { outline: 3px solid #C2603A; outline-offset: 4px; }
@media (hover: none) { .pg-visit .pg-visit-ov { opacity: 1; background: linear-gradient(to top, rgba(23,38,30,.75), rgba(23,38,30,0) 55%) !important; justify-content: flex-end !important; padding-bottom: 18px; } .pg-visit .pg-visit-ov > span:first-child { font-size: 28px !important; } }

/* ------------------------------------------------------------------ Contenu libre (pages simples, mentions légales) */
.pg-prose { max-width: 760px; font-size: 18px; line-height: 1.65; color: #22342A; }
.pg-prose h2 { font-size: clamp(28px,3vw,40px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; color: #17261E; margin: 1.6em 0 .5em; }
.pg-prose h3 { font-size: 22px; letter-spacing: -0.02em; color: #17261E; margin: 1.4em 0 .4em; }
.pg-prose p, .pg-prose ul, .pg-prose ol { margin: 0 0 1em; }
.pg-prose a { color: #A04B27; }
.pg-prose ul { padding-left: 1.2em; }
.pg-prose li { margin-bottom: .35em; }
.pg-prose mark { background: #F6D9C8; color: #7E3A1E; padding: 0 .2em; }
.pg-prose .wp-block-table { margin: 1.4em 0; overflow-x: auto; }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.pg-prose th, .pg-prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(23,38,30,.15); }
.pg-prose th { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #4A5A50; border-bottom-color: rgba(23,38,30,.3); }