/*
Theme Name: Oreel Production
Theme URI: https://www.oreel-production.com
Author: Oreel Production
Description: Thème sur mesure — production vidéo & photographie. Premium B&W.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2+
Text Domain: oreel
*/

/* ============================================
   FONT FACE — Nickel Gothic Variable
   Upload NickelGothicVariable.woff2 to /assets/fonts/
   ============================================ */
@font-face {
  font-family: 'Nickel Gothic Variable';
  src: url('assets/fonts/NickelGothicVariable.woff2') format('woff2'),
       url('assets/fonts/NickelGothicVariable.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-bg:#ffffff;
  --color-bg-alt:#f8f8f8;
  --color-surface:#f2f2f2;
  --color-text:#1a1a1a;
  --color-text-muted:#6b6b6b;
  --color-text-light:#aaaaaa;
  --color-black:#000000;
  --color-white:#ffffff;
  --color-border:rgba(0,0,0,.08);
  --color-border-dark:rgba(0,0,0,.15);
  --color-success:#16a34a;
  --color-error:#dc2626;

  --font-heading:'Nickel Gothic Variable','Helvetica Neue','Arial',sans-serif;
  --font-body:'Helvetica Neue','Arial',sans-serif;

  --space-xs:.5rem;--space-sm:1rem;--space-md:2rem;--space-lg:4rem;--space-xl:6rem;--space-2xl:10rem;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --t-fast:.2s cubic-bezier(.25,1,.5,1);
  --t-base:.4s var(--ease-out-expo);
  --t-slow:.8s var(--ease-out-expo);

  --header-height:120px;
  --logo-h:182px;
  --max-w:1400px;
  --pad:clamp(1.5rem,4vw,4rem);
}

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-weight:300;color:var(--color-text);background:var(--color-bg);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t-fast)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--color-black);color:var(--color-white)}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Typography */
h1,h2,h3,h4,.step-title,.page-hero-title,.section-title,.cta-title,.service-card-title,.pf-cat-title,.format-title{
  font-family:var(--font-heading);
}

/* ============================================
   HEADER
   ============================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-height);display:flex;align-items:center;transition:background var(--t-base),box-shadow var(--t-base)}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.site-logo{justify-self:center}
.site-logo img{height:var(--logo-h);width:auto;transition:opacity var(--t-fast)}
.site-logo:hover img{opacity:.7}
.logo-dark{display:none}
.main-nav{display:flex;align-items:center;gap:clamp(1.25rem,2.5vw,2.5rem);justify-self:start}
.main-nav a{font-family:var(--font-body);font-size:.8rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;position:relative;padding:.25rem 0}
.main-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:currentColor;transition:width var(--t-base)}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{width:100%}
.header-right{justify-self:end;display:flex;align-items:center;gap:1rem}
.header-cta{font-family:var(--font-body);font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.6rem;border:1px solid rgba(255,255,255,.45);border-radius:100px;transition:all var(--t-fast);white-space:nowrap}
.burger-menu{display:none;flex-direction:column;gap:7px;padding:10px;z-index:1300;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative}
.burger-menu span{display:block;width:26px;height:2px;border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.burger-menu.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.burger-menu.active span:nth-child(2){opacity:0}
.burger-menu.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
.burger-menu.active span{background:var(--color-text)!important}

/* Hero header */
.site-header--hero .main-nav a{color:var(--color-white)}
.site-header--hero .header-cta{color:var(--color-white);border-color:rgba(255,255,255,.45)}
.site-header--hero .header-cta:hover{background:var(--color-white);color:var(--color-black)}
.site-header--hero .burger-menu span{background:var(--color-white)}

/* Scrolled */
.site-header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--color-border)}
.site-header.scrolled .main-nav a{color:var(--color-text)}
.site-header.scrolled .header-cta{color:var(--color-white);background:var(--color-black);border-color:var(--color-black)}
.site-header.scrolled .header-cta:hover{background:transparent;color:var(--color-black)}
.site-header.scrolled .burger-menu span{background:var(--color-text)}
.site-header.scrolled .logo-white{display:none}
.site-header.scrolled .logo-dark{display:block}

/* Default (inner pages) */
.site-header--default{background:var(--color-white);box-shadow:0 1px 0 var(--color-border)}
.site-header--default .main-nav a{color:var(--color-text)}
.site-header--default .header-cta{color:var(--color-white);background:var(--color-black);border-color:var(--color-black)}
.site-header--default .header-cta:hover{background:transparent;color:var(--color-black)}
.site-header--default .burger-menu span{background:var(--color-text)}
.site-header--default .logo-white{display:none}
.site-header--default .logo-dark{display:block}

/* ============================================
   HERO
   ============================================ */
.hero{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden}
.hero-video-wrap{position:absolute;inset:0;z-index:0}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover}

.hero-sound-toggle{position:absolute;bottom:var(--space-lg);right:var(--space-md);z-index:5;display:flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;border:1px solid rgba(255,255,255,.35);border-radius:100px;color:var(--color-white);font-size:.7rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;background:rgba(0,0,0,.25);backdrop-filter:blur(10px);transition:all var(--t-fast);opacity:0;animation:fadeIn 1s var(--ease-out-expo) 1s forwards}
.hero-sound-toggle:hover{background:rgba(255,255,255,.15)}
.hero-sound-toggle .sound-bars{display:flex;align-items:center;gap:2px;height:14px}
.hero-sound-toggle .sound-bars span{display:block;width:2px;height:4px;background:var(--color-white);border-radius:1px}
.hero-sound-toggle.unmuted .sound-bars span{animation:soundBar .8s ease-in-out infinite alternate}
.hero-sound-toggle.unmuted .sound-bars span:nth-child(1){animation-delay:0s}
.hero-sound-toggle.unmuted .sound-bars span:nth-child(2){animation-delay:.15s}
.hero-sound-toggle.unmuted .sound-bars span:nth-child(3){animation-delay:.3s}

.hero-scroll-btn{position:absolute;bottom:var(--space-lg);left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--color-white);font-size:.6rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;padding:.5rem;opacity:0;animation:fadeIn 1s var(--ease-out-expo) 1.2s forwards;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-scroll-btn:hover{opacity:.7!important}
.hero-scroll-btn .scroll-arrow{width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:scrollBounce 2s ease-in-out infinite;background:rgba(0,0,0,.2);backdrop-filter:blur(4px)}
.hero-scroll-btn .scroll-arrow svg{width:18px;height:18px}

/* ============================================
   SECTIONS
   ============================================ */
.section{padding:var(--space-xl) 0}.section-large{padding:var(--space-2xl) 0}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap}
.section-label{font-family:var(--font-body);font-size:.7rem;font-weight:400;letter-spacing:.35em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.5rem}
.section-title,.page-hero-title,.step-title,.pf-cat-title,.format-title{color:var(--color-black)}
.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.section-subtitle{font-family:var(--font-body);font-size:1rem;font-weight:300;color:var(--color-text-muted);margin-top:.4rem}
.browse-all{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:400;letter-spacing:.05em;color:var(--color-text);border:1px solid var(--color-border-dark);border-radius:100px;padding:.65rem 1.5rem;transition:all var(--t-fast);white-space:nowrap}
.browse-all:hover{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}

/* ============================================
   SERVICES DUO
   ============================================ */
.services-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.service-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:var(--color-surface);transition:transform var(--t-base);display:block}
.service-card:hover{transform:translateY(-4px)}
.service-card-img{position:absolute;inset:0}
.service-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.service-card:hover .service-card-img img{transform:scale(1.05)}
.service-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 50%,transparent 100%);z-index:1}
.service-card-content{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:clamp(1.25rem,2.5vw,2rem);color:var(--color-white)}
.service-card-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;margin-bottom:.5rem}
.service-card-desc{font-size:.9rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.75);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.service-card-arrow{position:absolute;top:clamp(.75rem,2vw,1.25rem);right:clamp(.75rem,2vw,1.25rem);z-index:2;width:40px;height:40px;background:var(--color-white);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast)}
.service-card:hover .service-card-arrow{transform:translate(2px,-2px)}
.service-card-arrow svg{width:16px;height:16px;stroke:var(--color-black)}

/* ============================================
   CLIENTS SECTION — Dark bg, text left, logos right
   ============================================ */
.clients-section{background:var(--color-black);color:var(--color-white);padding:var(--space-xl) 0}
.clients-inner{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(3rem,6vw,6rem);align-items:center;max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.clients-text{max-width:400px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.clients-label{color:rgba(255,255,255,.4)}
.clients-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin-bottom:var(--space-sm)}
.clients-desc{font-family:var(--font-body);font-size:.95rem;font-weight:300;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:var(--space-md)}
.clients-cta{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-size:.75rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--color-white);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:.7rem 1.6rem;transition:all .25s ease}
.clients-cta:hover{background:var(--color-white);color:var(--color-black);border-color:var(--color-white)}

.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1vw,1rem)}
.client-logo{display:flex;align-items:center;justify-content:center;padding:clamp(1rem,2vw,1.5rem);transition:all .4s ease;aspect-ratio:auto}
.client-logo img{max-height:80px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:all .4s ease}
.client-logo:hover img{filter:grayscale(0%);opacity:1}

/* ============================================
   PORTFOLIO — CATEGORY SECTIONS + SLIDERS
   ============================================ */

/* Tabs */
.portfolio-tabs{display:flex;justify-content:center;gap:.25rem;background:var(--color-surface);border-radius:100px;padding:4px;width:fit-content;margin-left:auto;margin-right:auto}
.portfolio-tab{font-family:var(--font-body);font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);padding:.6rem 1.5rem;border-radius:100px;transition:all .25s ease;cursor:pointer}
.portfolio-tab:hover{color:var(--color-text)}
.portfolio-tab.active{background:var(--color-black);color:var(--color-white)}

/* Panels */
.portfolio-panel{display:none}
.portfolio-panel.active{display:block}

/* Category section */
.pf-category-section{padding:calc(var(--space-xl) / 2) 0;border-bottom:1px solid var(--color-border)}
.pf-category-section:last-child{border-bottom:none;padding-bottom:var(--space-xl)}

.pf-cat-header{margin-bottom:var(--space-md)}
.pf-cat-title{font-family:var(--font-heading);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:.4rem}
.pf-cat-desc{font-family:var(--font-body);font-size:clamp(.8rem,1vw,.9rem);font-weight:300;font-style:italic;color:var(--color-text-muted);max-width:600px}

/* Horizontal slider */
.pf-slider-wrap{position:relative}

.pf-slider{display:flex;gap:clamp(.75rem,1.5vw,1.25rem);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--space-sm)}
.pf-slider::-webkit-scrollbar{display:none}

/* Cards — slider context */
.pf-card{flex:0 0 auto;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:6px;background:var(--color-surface);cursor:pointer}
.pf-card--v{width:clamp(180px,20vw,240px);aspect-ratio:9/16}
.pf-card--h{width:clamp(300px,35vw,440px);aspect-ratio:16/9}

/* Thumbnail (replaces old pf-card-video for img-based cards) */
.pf-card-thumb{position:absolute;inset:0}
.pf-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.pf-card:hover .pf-card-thumb img{transform:scale(1.03)}

/* Legacy video element support */
.pf-card-video{position:absolute;inset:0}
.pf-card-video video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.pf-card:hover .pf-card-video video{transform:scale(1.03)}
.pf-card-video img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.pf-card:hover .pf-card-video img{transform:scale(1.03)}

/* Hover incite — subtle arrow + dim */
.pf-card::after{content:'';position:absolute;inset:0;z-index:3;background:rgba(0,0,0,0);transition:background .3s ease;pointer-events:none}
.pf-card:hover::after{background:rgba(0,0,0,.15)}
.pf-card-expand{position:absolute;top:50%;left:50%;z-index:4;width:44px;height:44px;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:all .3s ease;pointer-events:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.pf-card-expand svg{width:18px;height:18px;stroke:var(--color-black)}
.pf-card:hover .pf-card-expand{opacity:1;transform:translate(-50%,-50%) scale(1)}

.pf-card-name{display:block;padding:.5rem 0 0;font-family:var(--font-body);font-size:.7rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}

/* Video lightbox */
.pf-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pf-lightbox.open{opacity:1;pointer-events:all}
.pf-lightbox-close{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--color-white);cursor:pointer;z-index:2;border-radius:50%;transition:background .2s ease}
.pf-lightbox-close:hover{background:rgba(255,255,255,.1)}
.pf-lightbox-close svg{width:24px;height:24px}
.pf-lightbox-content{position:relative;width:90vw;max-width:1200px;height:80vh;max-height:85vh}
.pf-lightbox-content video{max-width:90vw;max-height:85vh;border-radius:8px;outline:none}

/* Coming soon */
.pf-coming-soon{padding:calc(var(--space-xl) / 2) 0;text-align:center}
.pf-coming-soon span{font-family:var(--font-heading);font-size:1rem;text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-muted);opacity:.35}

/* ============================================
   CTA
   ============================================ */
.cta-section{padding:var(--space-xl) 0;text-align:center;background:var(--color-black);color:var(--color-white)}
.cta-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:600;margin-bottom:var(--space-sm)}
.cta-desc{font-size:1rem;font-weight:300;color:rgba(255,255,255,.6);max-width:500px;margin:0 auto var(--space-lg)}
.cta-btn{display:inline-flex;align-items:center;gap:.75rem;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-black);background:var(--color-white);border:1px solid var(--color-white);border-radius:100px;padding:1rem 2.5rem;transition:all var(--t-base)}
.cta-btn:hover{background:transparent;color:var(--color-white)}
.cta-btn--outline{background:transparent;color:var(--color-white);border-color:var(--color-white)}
.cta-btn--outline:hover{background:var(--color-white);color:var(--color-black)}

/* ============================================
   PAGE HERO
   ============================================ */
.page-hero{padding:calc(var(--header-height) + var(--space-xl)) 0 0;text-align:center}
.page-hero::after{display:none}
.page-hero-title{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.page-hero-desc{font-family:var(--font-body);font-size:1.05rem;font-weight:300;color:var(--color-text-muted);margin-top:var(--space-sm);max-width:480px;margin-left:auto;margin-right:auto}

/* ============================================
   MULTI-STEP FORM — MODERN DIGITAL
   ============================================ */

/* Progress */
.step-progress{max-width:600px;margin:0 auto var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.step-progress-track{height:2px;background:var(--color-surface);border-radius:2px;overflow:hidden}
.step-progress-fill{height:100%;background:var(--color-black);border-radius:2px;transition:width .6s var(--ease-out-expo)}
.step-indicators{display:flex;justify-content:space-between}
.step-dot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--color-border-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.7rem;font-weight:500;color:var(--color-text-light);transition:all var(--t-fast);background:var(--color-bg)}
.step-dot.active{border-color:var(--color-black);color:var(--color-black);background:var(--color-bg)}
.step-dot.active ~ .step-dot{border-color:var(--color-border);color:var(--color-text-light)}

/* Form */
.multistep-form{max-width:720px;margin:0 auto}
.form-step{display:none}
.form-step.active{display:block;animation:stepIn .5s var(--ease-out-expo)}

.step-content{margin-bottom:var(--space-lg)}
.step-title{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.4rem}
.step-subtitle{font-family:var(--font-body);font-size:.95rem;font-weight:300;color:var(--color-text-muted)}
.required{color:var(--color-text-light)}

/* Service Checkbox Cards */
.service-selector{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:var(--space-lg)}
.service-check{cursor:pointer}
.service-check input{position:absolute;opacity:0;width:0;height:0}
.service-check-card{position:relative;border:1.5px solid var(--color-border-dark);border-radius:16px;padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.5rem);text-align:center;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.service-check-card:hover{border-color:var(--color-text-muted);background:var(--color-bg-alt)}

/* Selected state */
.service-check input:checked + .service-check-card{border-color:var(--color-black);background:var(--color-black);color:var(--color-white)}
.service-check input:checked + .service-check-card .service-check-icon svg{stroke:var(--color-white)}
.service-check input:checked + .service-check-card .service-check-desc{color:rgba(255,255,255,.5)}
.service-check input:checked + .service-check-card .service-check-indicator{opacity:1;transform:scale(1)}

/* Checkmark indicator */
.service-check-indicator{position:absolute;top:12px;right:12px;width:24px;height:24px;background:var(--color-white);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:all .2s ease}
.service-check-indicator svg{width:14px;height:14px;stroke:var(--color-black)}

.service-check-icon svg{width:36px;height:36px;stroke:var(--color-text);transition:stroke var(--t-fast)}
.service-check-name{font-family:var(--font-heading);font-size:1.1rem;font-weight:600}
.service-check-desc{font-size:.75rem;font-weight:300;color:var(--color-text-muted)}

/* Input Cards */
.step-fields{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-lg)}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.input-card{position:relative}
.input-card label{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.6rem}
.input-card input,.input-card textarea{width:100%;font-family:var(--font-body);font-size:.95rem;font-weight:300;color:var(--color-text);padding:1rem 1.2rem;background:var(--color-bg-alt);border:1.5px solid transparent;border-radius:12px;outline:none;transition:all .2s ease;appearance:none}
.input-card input:focus,.input-card textarea:focus{border-color:var(--color-black);background:var(--color-bg)}
.input-card input::placeholder,.input-card textarea::placeholder{color:var(--color-text-light)}
.input-card textarea{resize:vertical;min-height:120px}

/* Pill Selector */
.pill-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
.pill{cursor:pointer}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:400;padding:.55rem 1.2rem;border:1.5px solid var(--color-border-dark);border-radius:100px;transition:all .2s ease;color:var(--color-text-muted)}
.pill:hover span{border-color:var(--color-text-muted);color:var(--color-text)}
.pill input:checked + span{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}

/* Step Nav */
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-lg);gap:var(--space-sm)}

.btn-primary{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-body);font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:1.05rem 2.2rem;border-radius:100px;color:var(--color-white);background:var(--color-black);border:1.5px solid var(--color-black);transition:all .25s ease;cursor:pointer}
.btn-primary:hover{background:transparent;color:var(--color-black)}
.btn-primary svg{width:16px;height:16px}

.btn-ghost{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-body);font-size:.8rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:1.05rem 2rem;border-radius:100px;color:var(--color-text-muted);background:transparent;border:1.5px solid var(--color-border-dark);transition:all .25s ease;cursor:pointer}
.btn-ghost:hover{color:var(--color-text);border-color:var(--color-text)}
.btn-ghost svg{width:16px;height:16px}

/* Feedback */
.form-feedback{margin-top:var(--space-sm);text-align:center;font-size:.9rem;font-weight:400;padding:.8rem;border-radius:12px}
.form-feedback.success{color:var(--color-success);background:rgba(22,163,74,.08)}
.form-feedback.error{color:var(--color-error);background:rgba(220,38,38,.08)}

/* Contact Aside */
.contact-aside-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}
.aside-label{display:block;font-size:.65rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--color-text-light);margin-bottom:.35rem}
.aside-value{font-size:.95rem;font-weight:400;color:var(--color-text)}
a.aside-value:hover{color:var(--color-text-muted)}

/* ============================================
   FORMAT SECTION — White bg
   ============================================ */
.format-section{background:var(--color-bg);padding:var(--space-xl) 0;overflow:hidden}
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.format-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:400px;padding:var(--space-md);background:var(--color-bg)}

.format-phone{border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15);position:relative}
.format-phone video,.format-phone img{width:100%;height:100%;object-fit:cover;display:block}

.format-phone--tiktok{width:160px;aspect-ratio:9/16;z-index:1;transform:rotate(-5deg) translateX(-20px)}
.format-phone--insta{width:180px;aspect-ratio:9/16;z-index:3;margin:0 -30px;transform:translateY(-30px)}
.format-phone--yt{width:200px;aspect-ratio:16/10;z-index:2;border-radius:12px;transform:rotate(3deg) translateX(10px)}

.format-content{background:var(--color-bg)}
.format-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin-bottom:var(--space-md)}
.format-highlight{background:var(--color-black);color:var(--color-white);padding:.1em .4em;border-radius:8px;display:inline-block}
.format-desc{font-family:var(--font-body);font-size:1rem;font-weight:300;color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-sm)}
.format-cta{display:inline-flex;align-items:center;margin-top:var(--space-md);font-family:var(--font-body);font-size:.8rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text);border:1.5px solid var(--color-text);border-radius:100px;padding:.8rem 2rem;transition:all .25s ease}
.format-cta:hover{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}

/* ============================================
   FAQ
   ============================================ */
.faq-section{background:var(--color-bg-alt)}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item:first-child{border-top:1px solid var(--color-border)}

.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:1.4rem 0;font-family:var(--font-heading);font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;color:var(--color-text);text-align:left;cursor:pointer;transition:color .2s ease}
.faq-question:hover{color:var(--color-text-muted)}

.faq-icon{flex-shrink:0;transition:transform .3s ease}
.faq-item.open .faq-icon{transform:rotate(45deg)}

.faq-answer{overflow:hidden;max-height:0;transition:max-height .4s var(--ease-out-expo),padding .3s ease}
.faq-answer[hidden]{display:block!important;max-height:0;padding:0}
.faq-answer:not([hidden]){max-height:300px;padding-bottom:1.4rem}
.faq-answer p{font-family:var(--font-body);font-size:.95rem;font-weight:300;color:var(--color-text-muted);line-height:1.7}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{padding:var(--space-xl) 0 var(--space-md);border-top:1px solid var(--color-border)}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-lg);margin-bottom:var(--space-xl);align-items:start}
.footer-col--brand .footer-logo img{height:60px;width:auto;margin-bottom:var(--space-sm)}
.footer-tagline{font-size:.85rem;font-weight:300;color:var(--color-text-muted);line-height:1.6}
.footer-col h4{font-size:.65rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-sm)}
.footer-col a{display:block;font-size:.85rem;color:var(--color-text);padding:.2rem 0}
.footer-col a:hover{color:var(--color-text-muted)}
.footer-col span{display:block;font-size:.85rem;color:var(--color-text-muted);padding:.2rem 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-md);border-top:1px solid var(--color-border);font-size:.75rem;color:var(--color-text-muted);flex-wrap:wrap;gap:var(--space-sm)}
.footer-social{display:flex;gap:var(--space-sm)}
.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border-dark);border-radius:50%;color:var(--color-text);transition:all var(--t-fast)}
.footer-social a:hover{border-color:var(--color-black);background:var(--color-black);color:var(--color-white)}
.footer-social a svg{width:14px;height:14px}

/* ============================================
   OFF-CANVAS MENU
   ============================================ */
.offcanvas-backdrop{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .4s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.offcanvas-backdrop.open{opacity:1;pointer-events:all}

.offcanvas{position:fixed;top:0;right:0;bottom:0;z-index:1200;width:min(380px,85vw);background:var(--color-white);transform:translateX(100%);transition:transform .45s var(--ease-out-expo);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.1)}
.offcanvas.open{transform:translateX(0)}

.offcanvas-header{display:flex;align-items:center;padding:var(--space-sm) var(--space-md)}
.offcanvas-logo img{height:auto;width:auto;max-height:var(--logo-h)}

.offcanvas-nav{flex:1;display:flex;flex-direction:column;padding:var(--space-md) var(--space-md);gap:.5rem}
.offcanvas-nav a{font-family:var(--font-heading);font-size:clamp(1.6rem,5vw,2.2rem);font-weight:600;color:var(--color-text);padding:.5rem 0;opacity:0;transform:translateX(30px);transition:color .2s ease}
.offcanvas.open .offcanvas-nav a{opacity:1;transform:translateX(0)}
.offcanvas.open .offcanvas-nav a:nth-child(1){transition:opacity .35s ease .15s,transform .35s var(--ease-out-expo) .15s,color .2s ease}
.offcanvas.open .offcanvas-nav a:nth-child(2){transition:opacity .35s ease .22s,transform .35s var(--ease-out-expo) .22s,color .2s ease}
.offcanvas.open .offcanvas-nav a:nth-child(3){transition:opacity .35s ease .29s,transform .35s var(--ease-out-expo) .29s,color .2s ease}
.offcanvas-nav a:hover{color:var(--color-text-muted)}
.offcanvas-nav a[aria-current="page"]{color:var(--color-text-muted)}

.offcanvas-footer{padding:var(--space-md);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:.5rem}
.offcanvas-contact{font-family:var(--font-body);font-size:.85rem;color:var(--color-text-muted);transition:color .2s ease}
.offcanvas-contact:hover{color:var(--color-text)}
.offcanvas-social{display:flex;gap:.75rem;margin-top:.5rem}
.offcanvas-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-dark);border-radius:50%;color:var(--color-text);transition:all .2s ease}
.offcanvas-social a:hover{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn{to{opacity:1}}
@keyframes soundBar{0%{height:4px}100%{height:14px}}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes stepIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px){
  .clients-inner{grid-template-columns:1fr;text-align:center}
  .clients-text{max-width:100%;margin:0 auto;align-items:center}
  .clients-grid{grid-template-columns:repeat(4,1fr)}
  .contact-aside-grid{grid-template-columns:repeat(2,1fr)}
  .format-grid{grid-template-columns:1fr;text-align:center}
  .format-content{order:-1}
  .format-visual{min-height:350px;justify-content:center}
  .format-cta{margin-left:auto;margin-right:auto}
  .footer-top{grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
  .footer-col--brand{grid-column:1 / -1;margin-bottom:var(--space-sm)}
}

@media(max-width:768px){
  :root{--header-height:80px;--logo-h:100px}
  .main-nav{display:none}
  .header-inner{grid-template-columns:auto 1fr auto}
  .header-cta{display:none}
  .burger-menu{display:flex}
  .header-right{justify-self:end}

  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .client-logo img{max-height:55px}

  /* Client Logo Slider — mobile auto-scroll marquee */
  .clients-slider-wrap{position:relative;overflow:hidden;margin:0 calc(var(--pad) * -1)}
  .clients-slider-wrap::before,.clients-slider-wrap::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
  .clients-slider-wrap::before{left:0;background:linear-gradient(to right,var(--color-black) 0%,transparent 100%)}
  .clients-slider-wrap::after{right:0;background:linear-gradient(to left,var(--color-black) 0%,transparent 100%)}

  .clients-slider-track{display:flex;width:max-content;animation:clientSlide 20s linear infinite;will-change:transform}
  .clients-slider-track .client-logo{flex:0 0 auto;padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:center}
  .clients-slider-track .client-logo img{height:60px;max-height:90px;width:auto;filter:grayscale(100%);opacity:.7}

  @keyframes clientSlide{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }

  .services-duo{grid-template-columns:1fr}
  .service-card{aspect-ratio:4/5}
  .service-selector{grid-template-columns:1fr}
  .input-row{grid-template-columns:1fr}
  .contact-aside-grid{grid-template-columns:1fr}
  .format-visual{min-height:280px;padding:var(--space-sm);background:var(--color-bg)}
  .format-phone--tiktok{width:100px;transform:rotate(-5deg) translateX(-10px)}
  .format-phone--insta{width:115px;margin:0 -20px;transform:translateY(-20px)}
  .format-phone--yt{width:130px;transform:rotate(3deg) translateX(5px)}
  .pf-card--v{width:150px}
  .pf-card--h{width:280px}
  .pf-card-name{font-size:.6rem}
  .pf-lightbox-content video{max-width:95vw;max-height:80vh}
  .footer-top{grid-template-columns:repeat(2,1fr);gap:var(--space-md) var(--space-lg)}
  .footer-col--brand{grid-column:1 / -1;margin-bottom:var(--space-sm)}
  .footer-bottom{flex-direction:column;text-align:center}
  .hero-sound-toggle{bottom:var(--space-md);right:var(--space-sm)}
  .hero-scroll-btn{bottom:var(--space-md)}
}

@media(max-width:480px){
  :root{--logo-h:80px}
  .btn-primary,.btn-ghost{padding:.85rem 1.2rem;font-size:.7rem}
  .pill span{font-size:.7rem;padding:.45rem .9rem}
  .format-visual{min-height:220px;padding:var(--space-xs)}
  .format-phone--tiktok{width:80px;border-radius:12px}
  .format-phone--insta{width:95px;border-radius:12px;margin:0 -15px}
  .format-phone--yt{width:110px;border-radius:8px}
  .pf-card--v{width:130px}
  .pf-card--h{width:240px}
  .pf-card-expand{width:36px;height:36px}
  .pf-card-expand svg{width:14px;height:14px}
  .footer-top{grid-template-columns:1fr;gap:var(--space-md)}
  .footer-col--brand .footer-logo{display:flex}
}

/* ============================================
   LAZY LOAD / SHOW MORE — v2.5.1
   ============================================ */

/* Hidden cards (show more) */
.pf-card--hidden {
  display: none;
}

/* Play icon overlay on portfolio cards */
.pf-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 2;
}
.pf-card-play svg {
  width: 40px;
  height: 40px;
  color: rgba(255,255,255,.85);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.pf-card:hover .pf-card-play svg {
  transform: scale(1.15);
  color: #fff;
}
/* Hide play icon once video is loaded */
.pf-card video[data-loaded] ~ * .pf-card-play,
.pf-card:has(video[data-loaded]) .pf-card-play {
  opacity: 0;
}

/* Show more button */
.pf-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}
.pf-show-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .75rem 1.5rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pf-show-more:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.pf-show-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}
.pf-show-more:hover svg {
  transform: translateY(2px);
}

/* ============================================
   PHOTO GRID + LIGHTBOX — v2.0.0
   ============================================ */

/* ── Grille "Tous" — vrai masonry via CSS columns ── */
.pf-all-grid {
  columns: 4;
  column-gap: var(--space-xs);
}

/* Chaque item dans la grille masonry */
.pf-all-grid .pf-card,
.pf-all-grid .pf-photo-card {
  break-inside: avoid;
  margin-bottom: var(--space-xs);
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
}

/* Cartes vidéo en contexte masonry */
.pf-all-grid .pf-card {
  flex: none;
}
.pf-all-grid .pf-card .pf-card-thumb {
  position: relative;
  inset: auto;
  width: 100%;
  overflow: hidden;
}
.pf-all-grid .pf-card .pf-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ratios naturels dans le masonry */
.pf-all-grid .pf-card--v .pf-card-thumb {
  aspect-ratio: 9/16;
}
.pf-all-grid .pf-card--h .pf-card-thumb {
  aspect-ratio: 16/9;
}

/* Photo : carré */
.pf-all-grid .pf-photo-card {
  aspect-ratio: 1;
}

/* Play + expand en overlay */
.pf-all-grid .pf-card .pf-card-play {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.pf-all-grid .pf-card .pf-card-expand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
}

@media (max-width: 1024px) {
  .pf-all-grid { columns: 3; }
}

@media (max-width: 768px) {
  .pf-all-grid { columns: 2; }
}

/* Photo grid (legacy fallback) */
.pf-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}

@media (max-width: 1024px) {
  .pf-photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .pf-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Photo Slider (same as video slider) ── */
.pf-photo-slider .pf-photo-card--slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 1;
  border-radius: 6px;
}
.pf-photo-slider .pf-photo-card--slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

@media (max-width: 768px) {
  .pf-photo-slider .pf-photo-card--slide {
    width: clamp(160px, 45vw, 220px);
  }
}

.pf-photo-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--color-surface);
}
.pf-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-base);
}
.pf-photo-card:hover img { transform: scale(1.04); }

.pf-photo-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.pf-photo-card:hover .pf-photo-zoom { opacity: 1; }
.pf-photo-zoom svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

/* Photo lightbox */
.pf-photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.pf-photo-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.pf-photo-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pfPhotoLightboxImg {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
}

/* ============================================
   FOOTER — Legal links + Credit
   ============================================ */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  padding-bottom: var(--space-sm);
  margin-bottom: 0;
  font-size: .75rem;
}
.footer-legal a {
  color: var(--color-text-muted);
  transition: color var(--t-fast);
}
.footer-legal a:hover {
  color: var(--color-text);
}
.footer-cookie-btn {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.footer-cookie-btn:hover {
  color: var(--color-text);
}
.footer-credit {
  color: var(--color-text-light);
  font-size: .72rem;
}
.footer-credit a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credit a:hover {
  color: var(--color-text);
}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--color-black);
  color: var(--color-white);
  padding: clamp(1rem, 2vw, 1.5rem) var(--pad);
  display: flex;
  justify-content: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  animation: cookieSlideUp .4s var(--ease-out-expo);
}
@keyframes cookieSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.cookie-banner-inner {
  max-width: var(--max-w);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.cookie-banner-text {
  font-size: .85rem;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  flex: 1;
  min-width: 250px;
}
.cookie-banner-text a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.cookie-btn {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .7rem 1.4rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s ease;
  border: 1.5px solid transparent;
}
.cookie-btn--accept {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.cookie-btn--accept:hover {
  background: transparent;
  color: var(--color-white);
}
.cookie-btn--refuse {
  background: transparent;
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.3);
}
.cookie-btn--refuse:hover {
  color: var(--color-white);
  border-color: var(--color-white);
}

@media (max-width: 768px) {
  .cookie-banner-inner {
    flex-direction: column;
    text-align: center;
  }
  .cookie-banner-actions {
    width: 100%;
    justify-content: center;
  }
  .footer-legal {
    justify-content: center;
  }
}

/* ============================================
   LEGAL PAGES — prose styling
   ============================================ */
.page-template-default .reveal h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: .75rem;
  color: var(--color-black);
}
.page-template-default .reveal h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  color: var(--color-black);
}
.page-template-default .reveal ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: .75rem 0;
}
.page-template-default .reveal li {
  margin-bottom: .35rem;
}
.page-template-default .reveal a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-template-default .reveal a:hover {
  color: var(--color-text-muted);
}