/**
 * Design tokens — valeurs centralisées du thème custom .pfcustom-*
 * Typographie : variables portfolio (portfolios-modules.css, style.php, headings.css).
 */

:root {
  /* ----- Palette maquettes Planitka Studios (fond noir, accent mint, texte blanc) ----- */
  --pfcustom-mockup-navy: #000000;
  --pfcustom-mockup-navy-soft: #080809;
  --pfcustom-mockup-bg: var(--pfcustom-mockup-navy);
  --pfcustom-mockup-surface: #121212;
  --pfcustom-mockup-text: #ffffff;
  --pfcustom-mockup-text-subtle: rgba(255, 255, 255, 0.88);
  --pfcustom-mockup-text-muted: #a0a0a0;
  --pfcustom-mockup-accent: #d2fbe7;
  --pfcustom-mockup-accent-alt: #b8f0d4;
  --pfcustom-mockup-accent-strong: #9ae0c0;
  --pfcustom-mockup-warm: #d4c0a8;
  --pfcustom-mockup-warm-soft: #e8dcc8;
  --pfcustom-mockup-warm-muted: #b8a088;
  --pfcustom-mockup-warm-deep: #5a4838;
  --pfcustom-mockup-warm-glow: #c9b59a;
  --pfcustom-mockup-peach: #f2b498;
  --pfcustom-mockup-peach-soft: #ffd4bc;
  --pfcustom-mockup-peach-glow: #e8a078;
  --pfcustom-mockup-peach-deep: #9a6048;
  --pfcustom-mockup-sparkle-blue: #6ec8ff;
  --pfcustom-mockup-sparkle-blue-bright: #b0e8ff;
  --pfcustom-mockup-sparkle-blue-deep: #3a8fd8;
  --pfcustom-mockup-accent-blend: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent) 58%,
    var(--pfcustom-mockup-warm-soft) 42%
  );
  --pfcustom-mockup-card-light: #f5f5f5;
  --pfcustom-mockup-pricing-grad-deep: #1a0528;
  --pfcustom-mockup-pricing-grad-end: #2d0a3d;
  --pfcustom-mockup-pricing-purple-deep: var(--pfcustom-mockup-pricing-grad-deep);
  --pfcustom-mockup-pricing-purple-end: var(--pfcustom-mockup-pricing-grad-end);

  /* ----- Échelle typo en px (seule source — PERSONNALISATION.md §5.1) -----
   * Alignée sur les proportions du backoffice (hub-structure.css : base 11px,
   * h1 1.5em, h2 1.3em, h3 1.2em), base relevée à 13px pour la lecture publique.
   */
  --pfcustom-type-2xs: 10px;
  --pfcustom-type-xs: 11px;
  --pfcustom-type-sm: 12px;
  --pfcustom-type-md: 13px;

  --pfcustom-type-h1-size: 18px;
  --pfcustom-type-h1-line: 26px;
  /*
   * Échelle hero — dédiée (§5.1), confinée à `.pfcustom-hero` / `#hero` : elle
   * ne doit jamais retomber sur un h1/h2 hors bannière. Valeurs posées en dur
   * plutôt qu'aliasées sur les tokens h1 / h2, pour que faire évoluer la typo
   * courante ne redimensionne pas la bannière (et inversement). Valeurs
   * actuelles = celles que produisaient les alias, aucun changement de rendu.
   * Seul le chapô réutilise légitimement la taille corps.
   */
  --pfcustom-type-hero-title-size: 20px;
  --pfcustom-type-hero-title-line: 28px;
  --pfcustom-type-hero-text-size: var(--pfcustom-type-body-size);
  --pfcustom-type-hero-subtitle-size: 15px;
  --pfcustom-type-h1-weight: var(--portfolios-font-weight-bold, 700);
  --pfcustom-mockup-title: #ffffff;
  /* Couleurs de titres sur fonds sombres = maquettes (texte blanc), indépendant du thème portfolio */
  --pfcustom-type-h1-color: var(--pfcustom-mockup-title);

  --pfcustom-type-h2-size: 16px;
  --pfcustom-type-h2-line: 23px;
  --pfcustom-type-h2-weight: var(--portfolios-font-weight-bold, 700);
  --pfcustom-type-h2-color: var(--pfcustom-mockup-title);

  --pfcustom-type-h3-size: 14px;
  --pfcustom-type-h3-line: 21px;
  --pfcustom-type-h3-weight: var(--portfolios-font-weight-bold, 700);
  --pfcustom-type-h3-color: var(--pfcustom-mockup-text);

  --pfcustom-type-subtle-weight: 300;
  --pfcustom-type-body-size: var(--pfcustom-type-md);
  --pfcustom-type-body-line: var(--portfolios-line-height-base, 1.55);
  --pfcustom-type-lead-line: 1.65;
  --pfcustom-type-header-size: var(--pfcustom-type-body-size);
  --pfcustom-type-header-line: var(--pfcustom-type-body-line);
  --pfcustom-type-btn-line: 1.2;
  --pfcustom-type-2xs-line: 12px;
  --pfcustom-type-kicker-line: calc(var(--pfcustom-type-caption-size) + 6px);
  --pfcustom-type-caption-size: var(--pfcustom-type-sm);
  --pfcustom-type-nav-size: var(--pfcustom-type-sm);
  --pfcustom-type-brand-size: var(--pfcustom-type-h2-size);
  --pfcustom-type-footer-brand-size: var(--pfcustom-type-body-size);
  --pfcustom-type-feature-arrow-size: var(--pfcustom-type-h3-size);
  --pfcustom-type-project-body-size: var(--pfcustom-type-sm);
  --pfcustom-type-form-heading-size: var(--pfcustom-type-h3-size);
  --pfcustom-type-footer-bottom-size: var(--pfcustom-type-xs);
  --pfcustom-type-project-headline-weight: 800;

  --pfcustom-font-family-sans: var(--portfolios-font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

  /* ----- Couleurs interface .pfcustom-* (maquettes ; surfaces figées) ----- */
  --pfcustom-bg: var(--pfcustom-mockup-bg);
  --pfcustom-bg-elevated: var(--pfcustom-mockup-surface);
  --pfcustom-form-surface-bg: var(--pfcustom-glass-block-fill);
  --pfcustom-card-bg: var(--pfcustom-glass-block-fill);
  /* Fond page hub (hub-color.css — dégradé radial discret) */
  --pfcustom-hub-bg-main: radial-gradient(circle at 15% 50%, #1d1d20, #131314 50%, #080809 100%);
  --pfcustom-hub-bg-main-fallback: #080809;
  --pfcustom-text: var(--pfcustom-mockup-text);
  --pfcustom-text-muted: var(--pfcustom-mockup-text-muted);
  --pfcustom-text-on-light: #0a0a0a;
  --pfcustom-text-on-light-muted: #333333;
  --pfcustom-text-on-featured-muted: #555555;

  /* Liens d’action, surlignage cookies, toggles actifs — mint Studios (= CTA) */
  --pfcustom-accent: var(--pfcustom-mockup-accent);
  --pfcustom-accent-strong: var(--pfcustom-mockup-accent-alt);
  --pfcustom-accent-title: color-mix(in srgb, var(--pfcustom-mockup-accent) 38%, var(--pfcustom-mockup-text-subtle) 62%);
  /* Titres d’offre sur fond clair (carte vedette) */
  --pfcustom-accent-heading-light: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent-strong) 36%,
    var(--pfcustom-text-on-light-muted) 64%
  );

  --pfcustom-color-white: #ffffff;
  --pfcustom-color-black: #000000;
  --pfcustom-color-ok: #5eead4;
  --pfcustom-color-ok-soft: #a7f3d0;
  --pfcustom-color-err: #f87171;
  --pfcustom-color-err-soft: #fecaca;
  --pfcustom-color-success-bg: rgba(16, 185, 129, 0.12);
  --pfcustom-color-success-border: rgba(16, 185, 129, 0.35);
  --pfcustom-color-error-bg: rgba(248, 113, 113, 0.1);
  --pfcustom-color-error-border: rgba(248, 113, 113, 0.35);
  --pfcustom-color-featured-card-bg: var(--pfcustom-mockup-card-light);
  --pfcustom-color-btn-light-text: var(--pfcustom-text-on-light);
  --pfcustom-color-project-light-bg: #ffffff;
  --pfcustom-color-glow-teal: #0d3d32;
  --pfcustom-color-glow-blue: #0a1f4a;
  --pfcustom-color-glow-warm: var(--pfcustom-mockup-peach-glow);
  --pfcustom-color-glow-peach: var(--pfcustom-mockup-peach-soft);

  /* Ciel de nuit — hero cosmos, contact, footer */
  --pfcustom-sky-void: #000000;
  --pfcustom-sky-deep: #03050e;
  --pfcustom-sky-mid: #0a1c40;
  --pfcustom-sky-bright: #16368c;
  --pfcustom-sky-azure: #2248b8;
  --pfcustom-sky-glow: #2f7dff;
  --pfcustom-sky-nebula: color-mix(in srgb, #1c34a0 40%, var(--pfcustom-mockup-sparkle-blue-deep) 60%);
  --pfcustom-sky-mist: color-mix(in srgb, #1e50a8 76%, var(--pfcustom-mockup-peach-deep) 24%);
  --pfcustom-sky-warm-dust: color-mix(in srgb, var(--pfcustom-mockup-peach-deep) 26%, #0a1a34 74%);
  --pfcustom-sky-peach-haze: color-mix(in srgb, var(--pfcustom-mockup-peach-glow) 28%, transparent);
  --pfcustom-sky-sparkle-bloom: color-mix(in srgb, var(--pfcustom-mockup-sparkle-blue-bright) 88%, transparent);

  /* Étoiles & aurores (patterns.css, cosmos.css) */
  --pfcustom-pattern-star-bright: rgba(255, 255, 255, 1);
  --pfcustom-pattern-star-ice: rgba(190, 225, 255, 0.98);
  --pfcustom-pattern-star-mid: rgba(60, 160, 255, 0.95);
  --pfcustom-pattern-star-dim: rgba(35, 120, 250, 0.66);
  --pfcustom-pattern-star-faint: rgba(25, 90, 230, 0.4);
  --pfcustom-pattern-star-glow: rgba(50, 150, 255, 0.92);
  --pfcustom-pattern-star-peach: rgba(255, 196, 168, 0.5);
  --pfcustom-pattern-stars-tile-size: 20rem;
  /*
   * Opacités du champ d'étoiles — source unique. Ces valeurs étaient celles du
   * hero d'accueil (surchargées sur `.pfcustom-cosmos-host`) ; elles valent
   * maintenant pour tous les ciels : accueil, /contact, footer, héros tronc.
   */
  --pfcustom-pattern-stars-opacity-main: 0.52;
  --pfcustom-pattern-stars-opacity-offset: 0.36;
  --pfcustom-pattern-glints-opacity: 0.62;
  --pfcustom-pattern-blue: #88c8f8;
  --pfcustom-pattern-blue-bright: #b8e8ff;
  --pfcustom-pattern-warm: var(--pfcustom-mockup-warm-muted);
  --pfcustom-pattern-warm-bright: var(--pfcustom-mockup-warm-soft);
  --pfcustom-pattern-peach: var(--pfcustom-mockup-peach);
  --pfcustom-pattern-peach-bright: var(--pfcustom-mockup-peach-soft);
  --pfcustom-pattern-sparkle: var(--pfcustom-mockup-sparkle-blue);
  --pfcustom-pattern-sparkle-bright: var(--pfcustom-mockup-sparkle-blue-bright);
  --pfcustom-pattern-aurora-opacity: 0.38;
  --pfcustom-pattern-aurora-warm-opacity: 0.34;
  --pfcustom-pattern-aurora-saturate: 1.22;

  --pfcustom-header-bar-bg: var(--pfcustom-glass-float-fill);
  --pfcustom-color-header-bg: var(--pfcustom-header-bar-bg);
  /* Surface header / dropdown — alignée hub-color (--arktefakt-bg-surface-secondary) */
  --pfcustom-header-surface-bg: var(--pfcustom-header-bar-bg);
  --pfcustom-color-dropdown-bg: var(--pfcustom-glass-float-fill);
  --pfcustom-color-pricing-grad-mid: var(--pfcustom-mockup-pricing-purple-deep);
  --pfcustom-color-pricing-grad-end: var(--pfcustom-mockup-pricing-purple-end);

  --pfcustom-rgba-border-on-dark: rgba(255, 255, 255, 0.06);
  --pfcustom-rgba-border-on-dark-soft: rgba(255, 255, 255, 0.08);
  --pfcustom-rgba-border-on-dark-medium: rgba(255, 255, 255, 0.1);
  --pfcustom-rgba-border-on-dark-nav: rgba(255, 255, 255, 0.12);
  --pfcustom-rgba-border-on-dark-strong: rgba(255, 255, 255, 0.14);
  --pfcustom-rgba-border-white-22: rgba(255, 255, 255, 0.22);
  --pfcustom-rgba-border-white-25: rgba(255, 255, 255, 0.25);
  --pfcustom-rgba-border-white-45: rgba(255, 255, 255, 0.45);
  --pfcustom-rgba-border-white-55: rgba(255, 255, 255, 0.55);
  --pfcustom-rgba-border-white-65: rgba(255, 255, 255, 0.65);
  --pfcustom-rgba-white-06: rgba(255, 255, 255, 0.06);
  --pfcustom-rgba-white-08: rgba(255, 255, 255, 0.08);
  --pfcustom-rgba-white-10: rgba(255, 255, 255, 0.1);
  --pfcustom-rgba-white-12: rgba(255, 255, 255, 0.12);
  --pfcustom-rgba-white-25: rgba(255, 255, 255, 0.25);
  --pfcustom-rgba-white-35: rgba(255, 255, 255, 0.35);
  --pfcustom-rgba-white-40: rgba(255, 255, 255, 0.4);
  --pfcustom-rgba-white-45: rgba(255, 255, 255, 0.45);
  --pfcustom-rgba-white-50: rgba(255, 255, 255, 0.5);
  --pfcustom-rgba-white-55: rgba(255, 255, 255, 0.55);
  --pfcustom-rgba-white-60: rgba(255, 255, 255, 0.6);
  --pfcustom-rgba-white-65: rgba(255, 255, 255, 0.65);
  --pfcustom-rgba-white-75: rgba(255, 255, 255, 0.75);
  --pfcustom-rgba-white-85: rgba(255, 255, 255, 0.85);
  --pfcustom-rgba-white-88: rgba(255, 255, 255, 0.88);
  --pfcustom-rgba-white-90: rgba(255, 255, 255, 0.9);
  --pfcustom-rgba-white-92: rgba(255, 255, 255, 0.92);
  --pfcustom-rgba-black-025: rgba(0, 0, 0, 0.25);
  --pfcustom-rgba-black-035: rgba(0, 0, 0, 0.35);
  --pfcustom-rgba-black-045: rgba(0, 0, 0, 0.45);
  --pfcustom-rgba-black-070: rgba(0, 0, 0, 0.7);
  --pfcustom-rgba-black-06-on-white: rgba(0, 0, 0, 0.06);
  --pfcustom-rgba-black-12-on-white: rgba(0, 0, 0, 0.12);
  --pfcustom-rgba-black-35-shadow: rgba(0, 0, 0, 0.35);
  --pfcustom-rgba-black-45-shadow: rgba(0, 0, 0, 0.45);
  --pfcustom-rgba-black-65-caption: rgba(0, 0, 0, 0.65);
  --pfcustom-rgba-valid-border: rgba(94, 234, 212, 0.45);
  --pfcustom-rgba-input-bg: rgba(0, 0, 0, 0.35);

  /* ----- Bordures & verre — alignés backoffice (hub-structure / hub-color / hub-tokens-base) -----
   * Trait fin (1.5px) d'une seule teinte blanche à faible dose, coques translucides
   * avec filet lumineux de 1px sur le bord haut, flou saturé sur ce qui flotte.
   * Aucune teinte de marque ici : les couleurs du site restent portées par accent / CTA.
   */
  --pfcustom-border-width: 1.5px;
  --pfcustom-border-main: rgba(255, 255, 255, 0.07);
  --pfcustom-border-soft-color: color-mix(in srgb, var(--pfcustom-border-main) 45%, transparent);
  --pfcustom-border-soft-hover-color: color-mix(in srgb, var(--pfcustom-border-main) 72%, transparent);
  --pfcustom-border-separator-color: color-mix(in srgb, var(--pfcustom-border-main) 38%, transparent);
  --pfcustom-glass-border-color: rgba(255, 255, 255, 0.035);
  --pfcustom-glass-border-color-luminous: rgba(255, 255, 255, 0.14);
  --pfcustom-glass-border: var(--pfcustom-border-width) solid var(--pfcustom-glass-border-color);
  --pfcustom-glass-border-luminous: var(--pfcustom-border-width) solid var(--pfcustom-glass-border-color-luminous);
  --pfcustom-glass-border-soft: var(--pfcustom-border-width) solid var(--pfcustom-border-soft-color);
  --pfcustom-glass-border-soft-hover: var(--pfcustom-border-width) solid var(--pfcustom-border-soft-hover-color);
  --pfcustom-border-separator: var(--pfcustom-border-width) solid var(--pfcustom-border-separator-color);
  /* Verre : lumière d'ambiance, filet haut, remplissages translucides (100 % = opaque) */
  --pfcustom-glass-rim: rgba(255, 255, 255, 0.045);
  --pfcustom-glass-light: rgba(255, 255, 255, 0.04);
  --pfcustom-glass-sheen: linear-gradient(180deg, var(--pfcustom-glass-rim) 0 1px, transparent 1px);
  --pfcustom-glass-ambient: radial-gradient(90% 70% at 15% 0%, var(--pfcustom-glass-light), transparent 70%);
  --pfcustom-glass-surface: #121214;
  --pfcustom-glass-surface-raised: #161618;
  --pfcustom-glass-pane-fill: color-mix(in srgb, var(--pfcustom-glass-surface) 86%, transparent);
  --pfcustom-glass-block-fill: color-mix(in srgb, var(--pfcustom-glass-surface-raised) 90%, transparent);
  --pfcustom-glass-float-fill: color-mix(in srgb, var(--pfcustom-glass-surface-raised) 78%, transparent);
  --pfcustom-glass-blur-filter: blur(16px) saturate(140%);
  --pfcustom-glass-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.22);
  --pfcustom-glass-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --pfcustom-glass-shadow-cta: 0 4px 14px rgba(0, 0, 0, 0.32);

  /* ----- Bordure d’interface page (alias glass — cartes, séparateurs, modales) ----- */
  --pfcustom-page-border-width: var(--pfcustom-border-width);
  --pfcustom-page-border-color: var(--pfcustom-glass-border-color);
  --pfcustom-page-border: var(--pfcustom-glass-border);
  --pfcustom-aurora-teal: color-mix(in srgb, #10c4f0 55%, var(--pfcustom-mockup-sparkle-blue) 45%);
  --pfcustom-aurora-cyan: color-mix(in srgb, var(--pfcustom-mockup-sparkle-blue) 80%, #22e0c0 20%);
  --pfcustom-aurora-violet: color-mix(in srgb, #7c3dff 64%, var(--pfcustom-mockup-sparkle-blue-deep) 36%);
  --pfcustom-border-accent: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent) 14%,
    var(--pfcustom-aurora-cyan) 8%,
    transparent
  );
  --pfcustom-border-accent-strong: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent) 24%,
    var(--pfcustom-aurora-teal) 10%,
    transparent
  );
  --pfcustom-section-bg: color-mix(in srgb, var(--pfcustom-sky-deep) 86%, var(--pfcustom-mockup-navy) 14%);
  --pfcustom-section-bg-alt: color-mix(in srgb, var(--pfcustom-sky-void) 68%, var(--pfcustom-mockup-navy-soft) 32%);
  --pfcustom-section-divider-color: color-mix(in srgb, var(--pfcustom-aurora-cyan) 22%, var(--pfcustom-aurora-violet) 8%, transparent);
  --pfcustom-section-divider: 1px solid var(--pfcustom-section-divider-color);
  --pfcustom-section-shadow: 0 16px 42px color-mix(in srgb, #000000 80%, var(--pfcustom-aurora-violet) 8%), 0 2px 12px color-mix(in srgb, #000000 90%, var(--pfcustom-aurora-teal) 5%);
  --pfcustom-section-aurora-line: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--pfcustom-aurora-teal) 42%, transparent) 22%,
    color-mix(in srgb, var(--pfcustom-aurora-cyan) 55%, transparent) 48%,
    color-mix(in srgb, var(--pfcustom-aurora-violet) 38%, transparent) 74%,
    transparent 100%
  );

  /* ----- Rayons & ombres ----- */
  --pfcustom-radius-pill: var(--portfolios-border-radius-xl, 999px);
  /* Rayons backoffice : bloc 20px, tuile 14px */
  --pfcustom-radius-card: 20px;
  --pfcustom-radius-tile: 14px;
  --pfcustom-radius-input: var(--portfolios-border-radius-m, 10px);
  --pfcustom-radius-scroll-hint: 50%;
  --pfcustom-radius-social: 50%;
  --pfcustom-shadow-dropdown: 0 12px 32px var(--pfcustom-rgba-black-45-shadow);
  --pfcustom-shadow-featured-card: 0 12px 40px var(--pfcustom-rgba-black-35-shadow);
  --pfcustom-card-shadow: var(--pfcustom-glass-shadow-sm);
  --pfcustom-card-hover-transform: translateY(-3px);
  /* Survol vignettes / cartes : neutre (surface + ombre), sans teinte accent */
  --pfcustom-card-hover-bg: color-mix(in srgb, var(--pfcustom-card-bg) 82%, var(--pfcustom-rgba-white-10) 18%);
  --pfcustom-card-hover-border-color: var(--pfcustom-glass-border-color-luminous);
  --pfcustom-card-hover-shadow: var(--pfcustom-glass-shadow-cta);
  --pfcustom-thumb-hover-filter: brightness(1.04);
  --pfcustom-vignette-category-bg: var(--pfcustom-rgba-white-08);
  --pfcustom-vignette-category-text: var(--pfcustom-text);
  --pfcustom-vignette-category-border: var(--pfcustom-rgba-border-on-dark-medium);
  --pfcustom-vignette-category-hover-bg: var(--pfcustom-header-pill-bg-hover);
  --pfcustom-vignette-category-hover-border: var(--pfcustom-glass-border-color-luminous);
  --pfcustom-vignette-category-hover-text: var(--pfcustom-mockup-title);
  --pfcustom-blog-category-heading-color: color-mix(
    in srgb,
    var(--pfcustom-mockup-accent) 52%,
    var(--pfcustom-text-muted)
  );

  /* ----- Header flottant (barre fixe, marges viewport) ----- */
  --pfcustom-header-float-inset: 0.75rem;
  /* Gouttières latérales header + main (plus larges que l’écart haut de la barre) */
  --pfcustom-page-side-gutter: clamp(1.125rem, 3vw, 2rem);
  --pfcustom-page-gutter: var(--pfcustom-page-side-gutter);
  --pfcustom-page-gutter-mobile: var(--pfcustom-page-side-gutter);
  /* Padding interne du header (:is(.pf-pl-md, .pf-pad-x-md, .pf-pad-md) = 20px) — même cadre pour le contenu */
  --pfcustom-header-inner-padding: 1.25rem;
  --pfcustom-header-float-radius: var(--pfcustom-radius-card);
  --pfcustom-header-bar-min-height: 3.5rem;
  /* Barre repliée mobile : padding interne (.pfcustom-header__inner) + hamburger 2.75rem */
  --pfcustom-header-bar-mobile-height: 4.05rem;
  --pfcustom-header-float-shadow: var(--pfcustom-glass-shadow-sm);
  /* Marge contenu sous le header (tronc commun pf-pt-lg = 45px) */
  --pfcustom-hero-content-gap: 45px;
  --pfcustom-hero-content-gap-mobile: clamp(1.75rem, 4.5vw, 2.75rem);
  /* Espace sous le header flottant — desktop : inset haut + inset bas + barre ; mobile : recalcul ≤1100px dans main.css */
  --pfcustom-header-overlap-offset: calc(
    env(safe-area-inset-top, 0px) + (var(--pfcustom-header-float-inset) * 2) + var(--pfcustom-header-bar-min-height)
  );
  --pfcustom-contact-lead-content-gap: clamp(4.5rem, 9vw, 6.5rem);
  --pfcustom-contact-lead-content-gap-mobile: clamp(3rem, 7vw, 4.25rem);

  /* ----- Mise en page & effets ----- */
  --pfcustom-blur-header: 16px;
  --pfcustom-blur-hero-bg: 3px;
  --pfcustom-blur-glow: 80px;
  --pfcustom-hero-overlay-angle: 180deg;
  --pfcustom-hero-overlay-1: rgba(0, 0, 0, 0.14);
  --pfcustom-hero-overlay-2: rgba(0, 0, 0, 0.26);
  --pfcustom-hero-overlay-3: rgba(0, 0, 0, 0.52);
  --pfcustom-hero-overlay-center-1: rgba(0, 0, 0, 0.24);
  --pfcustom-hero-overlay-center-2: rgba(0, 0, 0, 0.36);
  --pfcustom-hero-overlay-center-3: rgba(0, 0, 0, 0.48);
  --pfcustom-caption-grad-angle: 0deg;
  --pfcustom-faq-arcs-border-inset-inner: 8%;
  --pfcustom-faq-arcs-border-inset-outer: 16%;
  --pfcustom-opacity-glow-teal: 0.52;
  --pfcustom-opacity-glow-blue: 0.58;
  --pfcustom-opacity-glow-peach: 0.46;

  --pfcustom-hero-min-height: 72vh;
  --pfcustom-hero-secondary-min-height: 52vh;
  /*
   * Hauteur mini du hero des pages tronc (classe `pfcustom-hero-trunk`) :
   * garantit une bannière de même gabarit sur /blog, /legals, /sitemap,
   * /productions… quel que soit le volume de texte. Voir modules/hero-trunk.css.
   */
  --pfcustom-hero-trunk-min-height: clamp(11rem, 26vh, 18rem);

  /*
   * ----- Fond de ciel : source unique -----
   * Consommé par `.pfcustom-night-sky__void` (accueil, /contact, footer — via
   * landings/patterns.css) ET par le hero des pages tronc
   * (modules/hero-trunk.css). Un seul ciel sur tout le site : ne pas
   * réintroduire de variante par page.
   *
   * Palette héritée du hero d'accueil : aurores discrètes en périphérie sur un
   * ciel profond, et non les bleus saturés du ciel générique d'origine.
   */
  --pfcustom-cosmos-planet-blue: #3a98e0;
  --pfcustom-cosmos-planet-blue-deep: #1868b8;
  --pfcustom-cosmos-aurora-teal: color-mix(in srgb, #10c4f0 52%, var(--pfcustom-cosmos-planet-blue) 48%);
  --pfcustom-cosmos-aurora-violet: color-mix(in srgb, #7c3dff 64%, var(--pfcustom-cosmos-planet-blue-deep) 36%);
  --pfcustom-sky-void-background:
    radial-gradient(
      ellipse 88% 52% at 8% -4%,
      color-mix(in srgb, var(--pfcustom-cosmos-aurora-teal) 24%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 82% 48% at 94% 6%,
      color-mix(in srgb, var(--pfcustom-cosmos-aurora-violet) 22%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 74% 42% at 50% 102%,
      color-mix(in srgb, var(--pfcustom-cosmos-planet-blue-deep) 22%, transparent) 0%,
      transparent 54%
    ),
    radial-gradient(
      ellipse 120% 88% at 50% 42%,
      var(--pfcustom-sky-deep) 0%,
      var(--pfcustom-sky-void) 72%,
      #000000 100%
    );
  --pfcustom-showcase-max-width: 1500px;
  /* Colonne de lecture (.pf-w-content, core/layout.css = 1000px) */
  --pfcustom-content-limited-width: 1000px;
  /*
   * Largeur des héros de pages tronc. Sous thème personnalisé, le tronc n'émet
   * plus `limited-width`/`full-width` sur le conteneur du hero mais la classe
   * neutre `.hero-width` (portfolios_module_hero_width_class(), voir
   * PERSONNALISATION.md §7.3) : c'est ce token qui décide, plus le réglage
   * admin. Deux valeurs, comme le tronc : les listings et fiches gardent la
   * pleine largeur, les pages secondaires (légales, cookies, confidentialité,
   * plan du site, 404) suivent la colonne de lecture de leurs sections.
   */
  --pfcustom-hero-width: var(--pfcustom-showcase-max-width);
  --pfcustom-hero-width-secondary: var(--pfcustom-content-limited-width);

  /*
   * Layout unifié — source unique pour core/layout.css (pf-*), header, footer, main, blog, éditeur.
   * --layout-width-content / --layout-width-wide : classes tronc commun.
   */
  --layout-inner-padding: var(--pfcustom-header-inner-padding);
  --layout-width-wide: var(--pfcustom-showcase-max-width, 1500px);
  --layout-width-content: var(--pfcustom-content-limited-width, 1000px);
  --layout-page-max-width: min(
    var(--layout-width-wide),
    calc(100% - (var(--pfcustom-page-side-gutter) * 2))
  );
  /* Alias rétrocompat (landings, header.css…) */
  --pfcustom-page-content-max-width: var(--layout-page-max-width);
  --pfcustom-project-card-min-height: 280px;
  --pfcustom-project-card-image-min-height: 320px;
  --pfcustom-project-card-mobile-min-height: 220px;
  --pfcustom-contact-aside-min-height: 280px;
  --pfcustom-contact-aside-max-height: 640px;
  --pfcustom-contact-form-max-width: 52rem;

  --pfcustom-z-header: 900;
  --pfcustom-z-grain: 50;
  --pfcustom-z-hero-content: 2;
  --pfcustom-z-hero-overlay: 1;
  --pfcustom-z-hero-bg: 0;
  --pfcustom-z-scroll-hint: 3;
  --pfcustom-z-cinema-overlay: 5;

  /* Cinématographie — grain, vignette, lumière directionnelle */
  --pfcustom-cinema-grain-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --pfcustom-cinema-grain-size: 180px;
  --pfcustom-cinema-grain-opacity-global: 0.038;
  --pfcustom-cinema-grain-opacity-scene: 0.058;
  --pfcustom-cinema-vignette-strength: 0.4;
  --pfcustom-cinema-glow-mint: color-mix(in srgb, var(--pfcustom-mockup-sparkle-blue-bright) 16%, transparent);
  --pfcustom-cinema-glow-warm: color-mix(in srgb, var(--pfcustom-mockup-peach-glow) 18%, transparent);
  --pfcustom-cinema-glow-sparkle: color-mix(in srgb, var(--pfcustom-mockup-sparkle-blue) 14%, transparent);
  --pfcustom-cinema-light-x: 20%;
  --pfcustom-cinema-light-y: 9%;
  --pfcustom-cinema-light-warm-x: 78%;
  --pfcustom-cinema-light-warm-y: 88%;
  --pfcustom-cinema-title-glow:
    0 0 48px color-mix(in srgb, var(--pfcustom-mockup-sparkle-blue-bright) 22%, transparent),
    0 0 96px color-mix(in srgb, var(--pfcustom-mockup-sparkle-blue) 12%, transparent),
    0 0 72px color-mix(in srgb, var(--pfcustom-mockup-peach-soft) 8%, transparent);
  --pfcustom-cinema-transition: 0.35s ease;
  --pfcustom-cinema-card-shadow-hover:
    0 18px 48px rgba(0, 0, 0, 0.48),
    0 0 40px color-mix(in srgb, var(--pfcustom-mockup-accent) 6%, transparent),
    0 0 28px color-mix(in srgb, var(--pfcustom-mockup-warm-glow) 4%, transparent);

  --pfcustom-motion-chev-duration: 1.8s;
  --pfcustom-btn-transition: var(--pfcustom-cinema-transition);
  --pfcustom-btn-transform-duration: 0.15s ease;
  --pfcustom-accordion-chev-duration: 0.2s ease;

  --pfcustom-filter-btn-hover: brightness(1.08);
  --pfcustom-filter-btn-light-hover: brightness(0.95);
  --pfcustom-filter-btn-disabled: grayscale(0.2);

  /*
   * CTA / hub sombre — mêmes valeurs que vitrine/manage/assets/hub/css/themes/hub-color.css
   * (.pfcustom-btn--primary / secondary dans main.css du hub).
   */
  --pfcustom-hub-color-primary: #bfa3ee;
  --pfcustom-hub-glass-blur: var(--pfcustom-glass-blur-filter);
  /* Texte des boutons marketing (.pfcustom-btn*, promo visiteur) : pas de gras */
  --pfcustom-btn-font-weight: var(--portfolios-font-weight-normal, 400);
  --pfcustom-btn-font-size: var(--pfcustom-type-sm);
  --pfcustom-btn-padding-y: 0.5rem;
  --pfcustom-btn-padding-x: 1.1rem;
  --pfcustom-btn-padding: var(--pfcustom-btn-padding-y) var(--pfcustom-btn-padding-x);
  --pfcustom-btn-padding-compact: 0.42rem 0.95rem;

  /* CTA primaire Studios : mint + texte sombre (repos et survol) — cf. --pfcustom-color-button-surface* pour pastilles / réseaux */
  /* Boutons : fond de marque plein + reflet doux (dégradé haut) + filet intérieur */
  /* Reflet doux sans arête (une ligne 1px en dégradé se coupe à plat sur une pilule) */
  --pfcustom-btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50%);
  /* Filet lumineux intérieur : ombre inset, elle suit l'arrondi de la pilule */
  --pfcustom-btn-rim: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* CTA ton sur ton (repris du hub, main.css --btn-tonal) : voile blanc sur toute la hauteur,
     posé sur --pfcustom-btn-cta-bg — haut éclairci de --pfcustom-btn-cta-tonal-lift, bas en couleur pleine.
     Suit la couleur propre du site et son survol sans rien recalculer. */
  --pfcustom-btn-cta-tonal-lift: 12%;
  --pfcustom-btn-cta-sheen: linear-gradient(180deg, color-mix(in srgb, #ffffff var(--pfcustom-btn-cta-tonal-lift), transparent), transparent);
  /* Contour des boutons verre : pas de trait blanc (backoffice) — épaisseur gardée, trait transparent, la forme vient du fond + filet */
  --pfcustom-btn-border-color: transparent;
  --pfcustom-btn-border-color-hover: transparent;
  --pfcustom-btn-border: var(--pfcustom-border-width) solid var(--pfcustom-btn-border-color);
  --pfcustom-btn-border-hover: var(--pfcustom-border-width) solid var(--pfcustom-btn-border-color-hover);
  --pfcustom-btn-ghost-shadow: var(--pfcustom-btn-rim);
  --pfcustom-btn-blur-filter: none; /* fonds pleins : plus rien à flouter derrière */
  --pfcustom-btn-light-bg: var(--pfcustom-color-white);
  /* Opaque : pictos masqués (coches tarifs) qui ne supportent pas la transparence */
  --pfcustom-btn-cta-solid: var(--pfcustom-mockup-accent);
  --pfcustom-btn-cta-bg: var(--pfcustom-mockup-accent);
  --pfcustom-btn-cta-bg-hover: color-mix(in srgb, var(--pfcustom-mockup-accent) 88%, #ffffff 12%);
  --pfcustom-btn-cta-text: #303b3b;
  --pfcustom-btn-primary-text-hover: #303b3b;
  --pfcustom-btn-cta-border-color: var(--pfcustom-btn-border-color);
  --pfcustom-btn-cta-border: var(--pfcustom-border-width) solid var(--pfcustom-btn-cta-border-color);
  --pfcustom-btn-cta-shadow: var(--pfcustom-btn-rim), var(--pfcustom-glass-shadow-xs);
  --pfcustom-btn-cta-shadow-hover: var(--pfcustom-btn-rim), var(--pfcustom-glass-shadow-sm);
  /* Bouton secondaire / ghost : fond pill + bordure soft */
  --pfcustom-btn-ghost-bg: var(--pfcustom-header-pill-bg);
  --pfcustom-btn-ghost-bg-hover: var(--pfcustom-header-pill-bg-hover);
  --pfcustom-btn-ghost-border: var(--pfcustom-btn-border);

  /*
   * Formulaires hub (editor.css + hub-color.css, thème sombre).
   */
  --pfcustom-hub-color-danger: #EF9A9A;
  --pfcustom-hub-color-success: #D5FFEA;
  --pfcustom-hub-bg-success: rgba(213, 255, 234, 0.15);
  --pfcustom-form-field-bg: rgba(255, 255, 255, 0.05);
  --pfcustom-form-field-bg-focus: rgba(255, 255, 255, 0.12);
  --pfcustom-form-field-border-width: 2px;
  --pfcustom-form-field-border-color: var(--pfcustom-border-main);
  --pfcustom-form-field-radius: 10px;
  --pfcustom-form-field-padding: 12px 15px;
  --pfcustom-form-field-blur: blur(6px);
  --pfcustom-form-border-width: 2px;
  --pfcustom-form-field-bg-hover: rgba(255, 255, 255, 0.08);
  --pfcustom-form-field-border: var(--pfcustom-form-field-border-color);
  --pfcustom-form-field-border-hover: var(--pfcustom-form-field-border-color);
  --pfcustom-form-field-border-focus: var(--pfcustom-hub-color-primary);
  --pfcustom-form-field-border-valid: var(--pfcustom-hub-color-success);
  --pfcustom-form-field-border-invalid: var(--pfcustom-hub-color-danger);
  --pfcustom-form-field-shadow: none;
  --pfcustom-form-field-shadow-focus: none;
  --pfcustom-form-field-outline-focus: 2px solid color-mix(in srgb, var(--pfcustom-hub-color-primary) 45%, transparent);
  --pfcustom-form-field-font-size: var(--pfcustom-type-body-size);
  --pfcustom-form-field-label-color: #e2e2e2;
  --pfcustom-form-field-placeholder: color-mix(in srgb, var(--pfcustom-text-muted) 38%, transparent);
  --pfcustom-form-label-color: var(--pfcustom-form-field-label-color);
  --pfcustom-form-placeholder-opacity: 0.38;

  /* Alias rétrocompat (--pfcustom-field-* consommés par contact.css) */
  --pfcustom-field-bg: var(--pfcustom-form-field-bg);
  --pfcustom-field-bg-hover: var(--pfcustom-form-field-bg-hover);
  --pfcustom-field-bg-focus: var(--pfcustom-form-field-bg-focus);
  --pfcustom-field-border: var(--pfcustom-form-field-border);
  --pfcustom-field-border-hover: var(--pfcustom-form-field-border-hover);
  --pfcustom-field-border-focus: var(--pfcustom-form-field-border-focus);
  --pfcustom-field-shadow: var(--pfcustom-form-field-shadow);
  --pfcustom-field-shadow-focus: var(--pfcustom-form-field-shadow-focus);
  --pfcustom-field-label-color: var(--pfcustom-form-field-label-color);
  --pfcustom-field-placeholder: var(--pfcustom-form-field-placeholder);

  --pfcustom-scale-hero-bg: 1.04;
  --pfcustom-space-heading-split-gap: 0.35rem;
  --pfcustom-space-cta-gap: 1rem;
  --pfcustom-space-faq-actions-gap: 0.75rem;
  /* Réponses FAQ : interligne et blancs un peu plus généreux que le corps de page */
  --pfcustom-faq-answer-line-height: 1.72;
  --pfcustom-faq-answer-paragraph-gap: 0.65rem;
  --pfcustom-space-header-inner-gap: 1rem;
  --pfcustom-space-nav-gap-y: 0.25rem;
  --pfcustom-space-nav-gap-x: 0.5rem;
  --pfcustom-space-header-actions-gap: 0.65rem;

  /* Liens / boutons header — pastilles type maquette (fond discret + survol plus clair) */
  --pfcustom-color-button-surface: #353434;
  --pfcustom-color-button-surface-hover: #d2fbe7;
  --pfcustom-color-button-surface-active: #d2fbe7;
  --pfcustom-color-button-surface-text: var(--pfcustom-color-white);
  --pfcustom-color-button-surface-text-hover: #303b3b;
  --pfcustom-color-button-surface-text-active: #303b3b;
  --pfcustom-header-pill-bg: #2a2a2e;
  --pfcustom-header-pill-bg-hover: #3b3b3f;
  --pfcustom-header-pill-border: var(--pfcustom-btn-border-color);
  --pfcustom-header-pill-border-hover: var(--pfcustom-btn-border-color-hover);
  --pfcustom-header-pill-signup-bg: #2a2a2e;
  --pfcustom-header-pill-signup-bg-hover: #3b3b3f;
  --pfcustom-space-footer-brand-gap: 1.25rem;
  --pfcustom-space-footer-links-mb: 0.5rem;
  --pfcustom-space-footer-social-gap: 0.75rem;
  --pfcustom-space-form-grid-gap: 2rem;
  --pfcustom-size-scroll-hint: 2.5rem;
  --pfcustom-size-chev: 0.5rem;
  --pfcustom-size-chev-border: 2px;
  --pfcustom-size-dropdown-chev: 0.35rem;
  --pfcustom-size-social-btn: 2.25rem;
  --pfcustom-size-social-icon: 1rem;
  --pfcustom-social-icon-color: var(--pfcustom-color-white);
  --pfcustom-social-icon-color-hover: var(--pfcustom-color-white);
  --pfcustom-space-hero-padding-bottom: 3rem;
  --pfcustom-font-family-sans-fallback: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pfcustom-opacity-sidecard: 0.9;
  --pfcustom-opacity-pricing-decor: 0.55;
  --pfcustom-opacity-footer-arcs: 0.7;
  --pfcustom-opacity-faq-arcs-outer: 0.9;
  --pfcustom-opacity-dropdown-summary: 0.85;
  --pfcustom-opacity-btn-disabled: 0.45;

  --pfcustom-footer-arcs-inset-h: 10%;
  --pfcustom-footer-arcs-inset-v: -40%;
}