@import url("fontstack.css");
/* Découpe maintenance : polices locales dans `fontstack.css` ; ce fichier = tokens + composants. */

:root {
  /* Fond sombre relevé (moins « noir pur »), cartes et footer hiérarchisés */
  --bg: #1e2026;
  --bg-elevated: #26282f;
  --bg-card: #2e3038;
  --bg-muted: #3c3e48;
  --accent: #ff6a00;
  --accent-strong: #e45f00;
  /* Signal froid secondaire (UI / halos), complémentaire à l’orange */
  --accent-2: #5dd4c8;
  --accent-2-dim: rgba(93, 212, 200, 0.2);
  --accent-2-glow: rgba(93, 212, 200, 0.35);
  --accent-dim: rgba(255, 106, 0, 0.25);
  --accent-hover: rgba(255, 106, 0, 0.7);
  --btn-bg: #c94f00;
  --btn-bg-hover: #ab4200;
  --btn-border: #c94f00;
  --btn-text: #ffffff;
  --btn-focus: rgba(201, 79, 0, 0.34);
  --text: #e6e8ed;
  --text-secondary: #9ca3af;
  /* Message de succès formulaire contact (mailto) — mode sombre */
  --contact-success: #88d498;
  --line-subtle: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.15);
  --header-bg: #1e2026;
  --footer-bg: #1a1c21;
  /* Bandeau pierre / beige (footer + header en mode clair) */
  --footer-beige: #e4d9c5;
  --footer-beige-deep: #d4c7b0;
  --footer-gradient-end: #c9b89a;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --container-max: 94rem;
  /* Largeur max du contenu (desktop) — alignée header + sections */
  --layout-max: min(94vw, var(--container-max));
  --pad-x: clamp(0.75rem, 2.5vw, 1.25rem);
  /* Smartphone serré (~10–12 px) — voir @media (max-width: 767px) */
  --pad-x-mobile: clamp(0.625rem, 2.8vw, 0.75rem);
  /* Largeur mini d’une colonne vignette projet (grille auto-fit tablette) */
  --project-card-col-min: 17.5rem;
  --grid-projects-gap: 1.25rem;
  /* Rail horizontal unique: header, body, footer */
  --content-rail-pad: var(--pad-x);
  --header-h: 4.5rem;
  /* Hauteur unique des contrôles dans la barre sticky (desktop) : thème, langue, nav, CTA */
  --header-bar-ctrl-h: 2.5rem;
  /* Puces header (nav, CTA, tiroir) — thème home */
  --header-chip-border: color-mix(in srgb, var(--btn-border) 78%, var(--accent-2) 22%);
  --header-chip-border-hover: color-mix(in srgb, var(--accent-dim) 38%, var(--accent-2) 62%);
  --header-chip-border-active: color-mix(in srgb, var(--accent) 36%, var(--btn-border) 64%);
  --header-chip-bg: transparent;
  --header-chip-bg-hover: color-mix(in srgb, var(--bg-card) 90%, transparent);
  --header-chip-shadow-hover:
    0 3px 14px color-mix(in srgb, var(--accent-2-dim) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent);
  --header-chip-shadow-active:
    0 2px 14px color-mix(in srgb, var(--accent-2-dim) 34%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 26%, transparent);
  --font-h: "Orbitron", sans-serif;
  /* Titres « Matrix » : géométrique futuriste ; repli Orbitron */
  --font-matrix-display: "Audiowide", "Orbitron", sans-serif;
  --font-matrix-mono: "Share Tech Mono", ui-monospace, monospace;
  /* Sous-titres / UI (cartes h3, nav, boutons) — inchangé vs titres de section Orbitron */
  --font-sub: "Syne", sans-serif;
  /* Corps de texte : géométrique lisible, léger côté futuriste ; repli Inter Local (self-host) */
  --font-body: "Space Grotesk", "Inter Local", ui-sans-serif, system-ui, sans-serif;
  /* Textes courants / descriptifs (+~6 %) — titres h1–h2, h3–h6 et eyebrows de zone inchangés */
  --copy-scale: 1.0625;
  --body-font-size: calc(1rem * var(--copy-scale));
  --body-line-height: 1.72;
  /* Filtre hero : 3 fonctions (vs 4) — saturate après grayscale peu rentable GPU */
  --hero-filter: grayscale(0.38) contrast(0.9) brightness(0.69);
  --hero-overlay-top: rgba(30, 32, 38, 0.5);
  --hero-overlay-bottom: rgba(30, 32, 38, 0.66);
  --hero-text: #e8eaef;
  --hero-text-secondary: #c8ccd4;
  /* Bloc CTA final home (DESIGNNAS) */
  --final-cta-border: color-mix(in srgb, var(--accent) 42%, transparent);
  --final-cta-glow: rgba(255, 106, 0, 0.22);
  --featured-overlay-top: rgba(26, 28, 34, 0.22);
  --featured-overlay-bottom: rgba(26, 28, 34, 0.78);
  /* Logo — équivalent fixe de color-mix(text/white) pour moins de recalculs */
  --logo-brand-mix: #e9eaef;
  /* Bandes alternées home — beige / gris chaud (pas de bleu) */
  --section-stripe-a: var(--bg);
  --section-stripe-b: color-mix(in srgb, var(--bg-card) 44%, var(--bg) 56%);
  /* Interactions : transitions courtes, pas de « 50 ms » ressenti — même rendu, moins de travail par frame */
  --ui-duration: 0.1s;
  --ui-ease: ease;
  /* Accueil / entrées : courbe type « choregraphie » */
  --ease-choreography: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 0.65s;
  --weight-section-display: 800;
  --tracking-tight-display: -0.035em;
  --tracking-body-copy: 0.022em;
  /* Ascenseur site (viewport + panneaux scroll) — noir brillant */
  --scrollbar-viewport-size: 12px;
  --scrollbar-viewport-track: #12141a;
  --scrollbar-viewport-track-edge: rgba(255, 255, 255, 0.07);
  --scrollbar-viewport-thumb: #08080a;
  --scrollbar-viewport-thumb-mid: #1a1a1f;
  --scrollbar-viewport-thumb-highlight: rgba(255, 255, 255, 0.22);
  --scrollbar-viewport-thumb-border: rgba(255, 255, 255, 0.14);
}

:root,
html,
body,
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-viewport-thumb) var(--scrollbar-viewport-track);
}

html {
  color-scheme: dark;
  scroll-behavior: auto;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

:root::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--scrollbar-viewport-size);
  height: var(--scrollbar-viewport-size);
}

:root::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-viewport-track) 88%, #fff 12%) 0%,
    var(--scrollbar-viewport-track) 42%,
    color-mix(in srgb, var(--scrollbar-viewport-track) 92%, #000 8%) 100%
  );
  border-inline-start: 1px solid var(--scrollbar-viewport-track-edge);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

:root::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-viewport-thumb-mid) 55%, #fff 45%) 0%,
    var(--scrollbar-viewport-thumb) 38%,
    color-mix(in srgb, var(--scrollbar-viewport-thumb) 85%, #000 15%) 100%
  );
  border: 1px solid var(--scrollbar-viewport-thumb-border);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 var(--scrollbar-viewport-thumb-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 6px rgba(0, 0, 0, 0.45);
  min-height: 2.5rem;
}

:root::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-viewport-thumb-mid) 62%, #fff 38%) 0%,
    color-mix(in srgb, var(--scrollbar-viewport-thumb) 78%, var(--scrollbar-viewport-thumb-mid) 22%) 45%,
    var(--scrollbar-viewport-thumb) 100%
  );
}

:root::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: var(--scrollbar-viewport-track);
}

html[data-theme="light"] {
  color-scheme: light;
  /* Taupe / crème assombri — moins d’éclat qu’un blanc café trop clair */
  --bg: #e0d6c8;
  --bg-elevated: #e6e0d4;
  --bg-card: #eae3d8;
  --bg-muted: #d2c9bb;
  --text: #231f18;
  --text-secondary: #423c34;
  --line-subtle: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.12);
  /* Bandeau header/footer : pierre / café lait (définir avant --header-bg) */
  --footer-beige: #d8cfc0;
  --footer-beige-deep: #cdc2b0;
  --footer-gradient-end: #b8a995;
  --header-bg: var(--footer-beige);
  --footer-bg: #d5cdc0;
  --accent-dim: rgba(255, 106, 0, 0.22);
  --accent-hover: rgba(255, 106, 0, 0.65);
  --accent-strong: #d75800;
  --btn-bg: #b54600;
  --btn-bg-hover: #963900;
  --btn-border: #b54600;
  --btn-text: #ffffff;
  --btn-focus: rgba(150, 57, 0, 0.3);
  --hero-filter: grayscale(0.24) contrast(0.86) brightness(0.73);
  --hero-overlay-top: rgba(220, 214, 204, 0.58);
  --hero-overlay-bottom: rgba(220, 214, 204, 0.76);
  --hero-text: #231f18;
  --hero-text-secondary: #3d3830;
  --featured-overlay-top: rgba(230, 224, 214, 0.22);
  --featured-overlay-bottom: rgba(200, 192, 180, 0.82);
  --logo-brand-mix: #2a261f;
  --section-stripe-a: var(--bg);
  --section-stripe-b: color-mix(in srgb, var(--bg-elevated) 52%, var(--bg-muted) 48%);
  --accent-2: #0f7668;
  --accent-2-dim: rgba(15, 118, 104, 0.16);
  --accent-2-glow: rgba(15, 118, 104, 0.28);
  /* Même confirmation, ton assourdi (évite le vert « néon » sur fond crème) */
  --contact-success: color-mix(in srgb, var(--accent-2) 36%, var(--text-secondary) 64%);
  --scrollbar-viewport-track: #d5cdc0;
  --scrollbar-viewport-track-edge: rgba(0, 0, 0, 0.08);
  --scrollbar-viewport-thumb: #0a0a0c;
  --scrollbar-viewport-thumb-mid: #1f1f24;
  --scrollbar-viewport-thumb-highlight: rgba(255, 255, 255, 0.35);
  --scrollbar-viewport-thumb-border: rgba(255, 255, 255, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: 0.01em;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typo */
.font-h1,
h1 {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.font-h2,
h2 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.font-h3,
h3 {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0 0 0.75rem;
}

.font-h1,
.font-h2,
.font-h3 {
  width: 100%;
  max-width: none;
  text-wrap: wrap;
}

.section p {
  max-width: none;
}

h4,
h5,
h6 {
  font-family: var(--font-sub);
  margin: 0 0 0.5rem;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-accent {
  color: var(--accent);
}

.text-accent-2 {
  color: var(--accent-2);
}

.font-matrix-mono {
  font-family: var(--font-matrix-mono);
}

/* Layout — centré, jamais déporté : 100% + gouttières sur mobile/tablette, cap 90vw sur desktop */
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--content-rail-pad);
}

@media (max-width: 1024px) {
  .container {
    max-width: 100%;
  }
}

/* ==========================================================================
   Smartphone (≤767 px) — gouttières serrées + contrat anti-débordement fiches
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --content-rail-pad: var(--pad-x-mobile);
    --pad-x: var(--pad-x-mobile);
  }

  /*
   * Fiches projet / plateforme / RS (hors accueil) — grilles hero et texte
   * minmax(0, 1fr) évite le débordement horizontal en grid/flex.
   */
  body:not(.page-home) [class*="__hero-grid"] {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.page-home) [class*="__hero-copy"],
  body:not(.page-home) [class*="__hero-media"],
  body:not(.page-home) [class*="__hero-showcase"] {
    min-width: 0;
  }

  body:not(.page-home) [class*="__hero-title"] {
    font-size: clamp(1.65rem, 6vw + 0.5rem, 2.35rem);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body:not(.page-home) [class*="__micro"],
  body:not(.page-home) [class*="__ia-mono"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body:not(.page-home) [class*="__hero"] {
    padding-top: clamp(0.85rem, 2.5vw, 1.25rem);
    padding-bottom: clamp(1.25rem, 4vw, 2rem);
  }
}

/* Tables specs projet — empilage une colonne sur très petit écran */
@media (max-width: 640px) {
  [class*="__specs-row"] {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  [class*="__specs-key"] {
    border-inline-end: none;
    border-bottom: 1px solid var(--border);
  }
}

/* Liserés diagonaux / horizontaux */
.diagonal-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.diagonal-lines__line {
  position: absolute;
  height: 1px;
  width: 180%;
  left: -40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.08),
    transparent
  );
}

/* Intro : la dérive n’est active que pendant la fenêtre dp-ambient-anim */
html.dp-ambient-anim .diagonal-lines__line {
  animation: lineDrift 28s ease-in-out infinite;
}

.diagonal-lines__line:nth-child(1) {
  top: 22%;
  transform: rotate(12deg);
  animation-delay: 0s;
}

.diagonal-lines__line:nth-child(2) {
  top: 48%;
  transform: rotate(-6deg);
  opacity: 0.7;
  animation-delay: -8s;
}

.diagonal-lines__line:nth-child(3) {
  top: 72%;
  transform: rotate(4deg);
  opacity: 0.5;
  animation-delay: -14s;
}

@keyframes lineDrift {
  0%,
  100% {
    opacity: 0.35;
    transform: rotate(12deg) translateX(0);
  }
  50% {
    opacity: 0.55;
    transform: rotate(12deg) translateX(2%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.dp-ambient-anim .diagonal-lines__line {
    animation: none;
  }
}

.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  opacity: 0.85;
  border: none;
  margin: 0;
}

/* Header — gouttières sur la barre, pas sur l’inner (évite débordement / déport à droite) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-sizing: border-box;
  min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-dim) 74%, var(--accent-2) 26%);
  box-shadow:
    0 1px 0 rgba(255, 106, 0, 0.12),
    0 0 28px color-mix(in srgb, var(--accent-2-dim) 35%, transparent);
  isolation: isolate;
  background-color: var(--header-bg);
  background-image:
    radial-gradient(ellipse 88% 95% at 100% -8%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 72% 88% at -6% 108%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 50%);
}

/* Mode clair : même dégradé que .site-footer */
html[data-theme="light"] .site-header {
  background-color: var(--footer-beige);
  background-image:
    radial-gradient(ellipse 92% 100% at 100% 0%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 52%),
    radial-gradient(ellipse 75% 90% at 0% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 48%),
    linear-gradient(
      165deg,
      var(--footer-beige) 0%,
      var(--footer-beige-deep) 55%,
      var(--footer-gradient-end) 100%
    );
  border-bottom: 1px solid color-mix(in srgb, rgba(0, 0, 0, 0.14) 78%, var(--accent-2) 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 20px color-mix(in srgb, var(--accent-2-dim) 25%, transparent);
}

html[data-theme="light"] .nav-drawer {
  background: linear-gradient(
    165deg,
    var(--footer-beige) 0%,
    var(--footer-beige-deep) 55%,
    var(--footer-gradient-end) 100%
  );
}

.site-header__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-block: 0;
  padding-inline: var(--content-rail-pad);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Header — barre + nav + actions (hors logo, déjà « 4 vecteurs »).
   Typo contrastée, signal froid, entrées échelonnées, transitions choregraphiées.
   -------------------------------------------------------------------------- */
@keyframes dp-header-strip-in {
  from {
    opacity: 0;
    transform: translateY(-0.38rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header .nav-desktop > * {
  animation: dp-header-strip-in 0.5s var(--ease-choreography) both;
}

.site-header .nav-desktop > *:nth-child(1) {
  animation-delay: 0.06s;
}

.site-header .nav-desktop > *:nth-child(2) {
  animation-delay: 0.12s;
}

.site-header .nav-desktop > *:nth-child(3) {
  animation-delay: 0.18s;
}

.site-header .nav-desktop > *:nth-child(4) {
  animation-delay: 0.24s;
}

.site-header .header-actions > * {
  animation: dp-header-strip-in 0.5s var(--ease-choreography) both;
}

.site-header .header-actions > *:nth-child(1) {
  animation-delay: 0.2s;
}

.site-header .header-actions > *:nth-child(2) {
  animation-delay: 0.26s;
}

.site-header .header-actions > *:nth-child(3) {
  animation-delay: 0.32s;
}

.site-header .header-actions > *:nth-child(4) {
  animation-delay: 0.38s;
}

.site-header .theme-switch {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  border-color: var(--header-chip-border);
  transition:
    background 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    color 0.28s var(--ease-choreography),
    transform 0.22s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
}

.site-header .theme-switch:hover {
  border-color: var(--header-chip-border-hover);
  background: var(--header-chip-bg-hover);
  box-shadow: var(--header-chip-shadow-hover);
  color: var(--text);
}

.site-header .lang-dropdown .lang-dropdown__toggle {
  border-color: var(--header-chip-border);
  transition:
    background 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    color 0.28s var(--ease-choreography),
    transform 0.22s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
}

.site-header .lang-dropdown .lang-dropdown__toggle:hover,
.site-header .lang-dropdown .lang-dropdown__toggle:focus-visible {
  border-color: var(--header-chip-border-hover);
  background: var(--header-chip-bg-hover);
  box-shadow: var(--header-chip-shadow-hover);
  color: var(--text);
}

.site-header .lang-dropdown .lang-dropdown__flag-wrap {
  border-color: color-mix(in srgb, var(--accent-dim) 68%, var(--accent-2) 32%);
}

.site-header .lang-dropdown__code {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.site-header .lang-dropdown__en {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.site-header .header-actions .btn--ghost.hidden-mobile-cta,
.site-header .nav-toggle {
  font-weight: var(--weight-section-display);
  letter-spacing: 0.055em;
  border: 1px solid var(--header-chip-border);
  background: var(--header-chip-bg);
  color: var(--text-secondary);
  box-shadow: none;
  transition:
    transform 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography),
    border-color 0.25s var(--ease-choreography),
    background 0.25s var(--ease-choreography),
    color 0.25s var(--ease-choreography);
}

.site-header .header-actions .btn--ghost.hidden-mobile-cta:hover,
.site-header .header-actions .btn--ghost.hidden-mobile-cta:focus-visible,
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus-visible {
  color: var(--text);
  border-color: var(--header-chip-border-hover);
  background: var(--header-chip-bg-hover);
  box-shadow: var(--header-chip-shadow-hover);
  transform: translateY(-1px);
}

.site-header .header-actions .btn--ghost.hidden-mobile-cta.is-current {
  color: var(--text);
  border-color: var(--header-chip-border-active);
  box-shadow: var(--header-chip-shadow-active);
}

.site-header .header-actions .btn--ghost.hidden-mobile-cta.is-current:hover,
.site-header .header-actions .btn--ghost.hidden-mobile-cta.is-current:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--btn-border) 56%);
  box-shadow:
    0 4px 18px color-mix(in srgb, var(--accent-2-dim) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 30%, transparent);
  transform: translateY(-1px);
}

.site-header .nav-toggle__bar {
  background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-desktop > *,
  .site-header .header-actions > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (min-width: 1400px) {
  /* Même rail que `.container` : évite logo / contact collés aux bords du viewport quand le corps est centré sur --layout-max */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    justify-content: unset;
    max-width: var(--layout-max);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .site-header .logo:not(.logo--drawer) {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  /* Desktop : air avant Accueil (padding nav — margin sur le logo ne décale pas la colonne 1fr). */
  .site-header .nav-desktop {
    grid-column: 2;
    justify-self: center;
    flex: none;
    min-width: 0;
    max-width: 100%;
    gap: 0.4rem;
    padding-inline-start: clamp(1.75rem, 2.8vw, 3.25rem);
  }

  /* Puces nav desktop — même forme Accueil / Projets / Tarifs (thème home, aligné Contact) */
  .site-header .nav-desktop > .nav-link,
  .site-header .nav-desktop .nav-dropdown--projects > .nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--header-bar-ctrl-h);
    height: var(--header-bar-ctrl-h);
    padding-block: 0;
    padding-inline: 0.75rem;
    line-height: 1.2;
    box-sizing: border-box;
    border: 1px solid var(--header-chip-border);
    border-radius: var(--radius-sm);
    background: var(--header-chip-bg);
    font-family: var(--font-sub);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition:
      transform 0.25s var(--ease-choreography),
      box-shadow 0.25s var(--ease-choreography),
      border-color 0.25s var(--ease-choreography),
      background 0.25s var(--ease-choreography),
      color 0.25s var(--ease-choreography);
  }

  .site-header .nav-desktop > .nav-link::after {
    display: none;
    content: none;
  }

  .site-header .nav-desktop > .nav-link:hover,
  .site-header .nav-desktop > .nav-link:focus-visible,
  .site-header .nav-desktop .nav-dropdown--projects > .nav-dropdown__toggle:hover,
  .site-header .nav-desktop .nav-dropdown--projects > .nav-dropdown__toggle:focus-visible {
    color: var(--text);
    border-color: var(--header-chip-border-hover);
    background: var(--header-chip-bg-hover);
    box-shadow: var(--header-chip-shadow-hover);
    transform: translateY(-1px);
  }

  .site-header .nav-desktop > .nav-link.is-active,
  .site-header .nav-desktop .nav-dropdown--projects.is-current > .nav-dropdown__toggle {
    color: var(--text);
    font-weight: var(--weight-section-display);
    letter-spacing: 0.035em;
    border-color: var(--header-chip-border-active);
    background: var(--header-chip-bg-hover);
    box-shadow: var(--header-chip-shadow-active);
  }

  .site-header .nav-desktop > .nav-link.is-active:hover,
  .site-header .nav-desktop > .nav-link.is-active:focus-visible,
  .site-header .nav-desktop .nav-dropdown--projects.is-current > .nav-dropdown__toggle:hover,
  .site-header .nav-desktop .nav-dropdown--projects.is-current > .nav-dropdown__toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--btn-border) 56%);
    box-shadow:
      0 4px 18px color-mix(in srgb, var(--accent-2-dim) 40%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent-2) 30%, transparent);
    transform: translateY(-1px);
  }

  .site-header .header-actions {
    grid-column: 3;
    justify-self: end;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
  }

  .site-header .header-actions .theme-switch {
    width: var(--header-bar-ctrl-h);
    height: var(--header-bar-ctrl-h);
    min-width: var(--header-bar-ctrl-h);
    min-height: var(--header-bar-ctrl-h);
    flex-shrink: 0;
  }

  .site-header .header-actions .lang-dropdown .lang-dropdown__toggle {
    min-height: var(--header-bar-ctrl-h);
    height: var(--header-bar-ctrl-h);
    padding-block: 0;
    padding-inline: 0.55rem 0.65rem;
    box-sizing: border-box;
  }

  .site-header .header-actions .btn--ghost.hidden-mobile-cta {
    min-height: var(--header-bar-ctrl-h);
    padding-block: 0;
    padding-inline: 1rem 1.2rem;
    border-width: 1px;
    font-size: 0.8125rem;
    line-height: 1.2;
    flex-shrink: 0;
  }

  /* Moins de marge sous le logo : le bloc se centre mieux avec la rangée de contrôles */
  .site-header .logo:not(.logo--drawer) {
    padding-bottom: 0.52rem;
  }
}

/* Logo #DreamprojectAI — orange = même famille que bouton FR actif (--btn-bg-hover) */
.logo {
  --logo-cluster-bg: var(--btn-bg-hover);
  --logo-cluster-bg-opacity: 0.14;
  --logo-fade-stop-start: 18%;
  --logo-fade-stop-end: 44%;
  --logo-ai-bg: var(--btn-bg-hover);
  --logo-ai-color: #ffffff;
  --logo-line-1: var(--btn-bg-hover);
  --logo-line-1-h: 2px;
  --logo-line-1-opac: 0.9;
  --logo-line-2: rgba(255, 255, 255, 0.42);
  --logo-line-2-h: 1px;
  --logo-line-2-opac: 1;
  --logo-hash-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-family: var(--font-matrix-display);
  font-weight: 400;
  font-size: clamp(1rem, calc(var(--header-h) * 0.5), 2.25rem);
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  text-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-bottom: 0.68rem;
}

/* Fond uni masqué : invisible près du #, opaque vers AI (pas de dégradé multi-couleurs) */
.logo__cluster {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.03em;
  margin: 0;
  padding: 0.1em 0.36em 0.08em;
  border: none;
  background: transparent;
  transition: filter 0.2s ease;
}

.logo__cluster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--logo-cluster-bg);
  opacity: var(--logo-cluster-bg-opacity);
  pointer-events: none;
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 var(--logo-fade-stop-start),
    #fff var(--logo-fade-stop-end),
    #fff 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 var(--logo-fade-stop-start),
    #fff var(--logo-fade-stop-end),
    #fff 100%
  );
}

.logo:hover .logo__cluster,
.logo:focus-visible .logo__cluster {
  filter: brightness(1.03);
}

/* Double soulignement sur toute la ligne du logo (traits pleins, pas de dégradé) */
.logo::before,
.logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.logo::before {
  bottom: 0.42rem;
  height: var(--logo-line-1-h);
  background: var(--logo-line-1);
  opacity: var(--logo-line-1-opac);
}

.logo::after {
  bottom: 0.22rem;
  height: var(--logo-line-2-h);
  background: var(--logo-line-2);
  opacity: var(--logo-line-2-opac);
}

.logo__hash {
  display: inline;
  font-weight: 700;
  transform: skewX(-9deg);
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
  text-shadow: var(--logo-hash-shadow);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.logo:hover .logo__hash,
.logo:focus-visible .logo__hash {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* DREAM + PROJECT : un cran plus petit que le # et le badge AI (hauteur de caractères réduite) */
.logo__brand {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  color: var(--logo-brand-mix);
  font-weight: 600;
  font-style: normal;
  /* Inclinaison « inverse » de l’italique : vers la gauche (skew négatif) */
  transform: skewX(-7deg);
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.logo:hover .logo__brand,
.logo:focus-visible .logo__brand {
  color: #ffffff;
}

.logo__d {
  text-transform: uppercase;
  font-style: normal;
}

/* AI : couleur unie — bord gauche courbe (% de largeur du badge, pas em : sinon effet invisible) */
.logo__ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 0.14em;
  padding: 0.09em 0.38em 0.08em 0.22em;
  border: none;
  font-weight: 700;
  font-size: 1em;
  font-style: italic;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: none;
  color: var(--logo-ai-color);
  text-transform: uppercase;
  background-color: var(--logo-ai-bg);
  box-shadow: none;
  /* Coin haut-gauche arrondi (Q) + bord gauche courbe (C), plus d’angle à (0,0) */
  clip-path: path("M 10% 0 L 100% 0 L 100% 100% L 0 100% C 12% 86%, 10% 26%, 0 12% Q 0 0 10% 0 Z");
  -webkit-clip-path: path("M 10% 0 L 100% 0 L 100% 100% L 0 100% C 12% 86%, 10% 26%, 0 12% Q 0 0 10% 0 Z");
  transition: filter 0.2s ease;
}

.logo:hover .logo__ai,
.logo:focus-visible .logo__ai {
  filter: brightness(1.05);
}

.logo:focus-visible {
  outline: 2px solid var(--btn-bg-hover);
  outline-offset: 5px;
}

/* ——— Préréglages logo (engine/config/config.php → logo.active_preset) ——— */
.logo.logo--preset-p1 {
  --logo-cluster-bg-opacity: 0.07;
  --logo-fade-stop-start: 24%;
  --logo-fade-stop-end: 52%;
  --logo-ai-bg: var(--btn-bg-hover);
  --logo-ai-color: #ffffff;
  --logo-line-1-opac: 0.82;
  --logo-line-2: rgba(255, 255, 255, 0.38);
}

.logo.logo--preset-p2 {
  --logo-cluster-bg-opacity: 0.16;
  --logo-fade-stop-start: 14%;
  --logo-fade-stop-end: 40%;
  --logo-ai-bg: var(--btn-bg);
  --logo-ai-color: #ffffff;
  --logo-line-1: var(--accent);
  --logo-line-2: rgba(255, 255, 255, 0.22);
  --logo-line-2-h: 2px;
}

.logo.logo--preset-p3 {
  --logo-cluster-bg-opacity: 0.12;
  --logo-fade-stop-start: 18%;
  --logo-fade-stop-end: 44%;
  --logo-ai-bg: var(--btn-bg-hover);
  --logo-ai-color: #ffffff;
  --logo-line-1: var(--btn-bg-hover);
  --logo-line-2: rgba(255, 255, 255, 0.45);
}

.logo.logo--preset-p4 {
  --logo-cluster-bg-opacity: 0.06;
  --logo-fade-stop-start: 20%;
  --logo-fade-stop-end: 48%;
  --logo-ai-bg: #1e2026;
  --logo-ai-color: var(--accent);
  --logo-line-1: var(--btn-bg-hover);
  --logo-line-2: rgba(255, 255, 255, 0.2);
}

.logo.logo--preset-p5 {
  --logo-cluster-bg-opacity: 0.035;
  --logo-fade-stop-start: 30%;
  --logo-fade-stop-end: 58%;
  --logo-ai-bg: var(--btn-bg-hover);
  --logo-ai-color: #ffffff;
  --logo-line-1-h: 3px;
  --logo-line-2-h: 2px;
  --logo-line-1-opac: 0.95;
  --logo-line-2: rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .logo__brand {
  color: var(--logo-brand-mix);
}

html[data-theme="light"] .logo:hover .logo__hash,
html[data-theme="light"] .logo:focus-visible .logo__hash {
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .logo:hover .logo__brand,
html[data-theme="light"] .logo:focus-visible .logo__brand {
  color: var(--text);
}

html[data-theme="light"] .logo.logo--preset-p2 {
  --logo-line-2: rgba(13, 15, 18, 0.4);
}

html[data-theme="light"] .logo.logo--preset-p4 {
  --logo-ai-bg: #0d0f12;
  --logo-line-2: rgba(13, 15, 18, 0.35);
}

html[data-theme="light"] .logo.logo--preset-p5 {
  --logo-line-2: rgba(13, 15, 18, 0.38);
}

/* --------------------------------------------------------------------------
   Logo barre du header uniquement — 4 vecteurs (typo extrême, signal froid,
   entrée échelonnée, calque mesh derrière le cluster). Pas le .logo--drawer.
   -------------------------------------------------------------------------- */
@keyframes dp-logo-hash-in {
  from {
    opacity: 0;
    transform: translateY(0.32em) skewX(-9deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(-9deg);
  }
}

@keyframes dp-logo-brand-in {
  from {
    opacity: 0;
    transform: translateY(0.28em) skewX(-7deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(-7deg);
  }
}

@keyframes dp-logo-ai-in {
  from {
    opacity: 0;
    transform: translateY(0.24em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header .logo:not(.logo--drawer) .logo__cluster {
  transition:
    filter 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
}

/* Fond atmosphérique derrière le masque existant (::before = z-index -1) */
.site-header .logo:not(.logo--drawer) .logo__cluster::after {
  content: "";
  position: absolute;
  inset: -0.12em -0.08em;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 130% at 92% 40%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 75% 110% at 6% 60%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%);
  opacity: 0.9;
}

/* Typo : # léger mono vs marques Syne 800 vs badge display dense */
.site-header .logo:not(.logo--drawer) .logo__hash {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  animation: dp-logo-hash-in 0.58s var(--ease-choreography) both;
  animation-delay: 0.06s;
}

.site-header .logo:not(.logo--drawer) .logo__brand {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: 0.05em;
}

.site-header .logo:not(.logo--drawer) .logo__brand--dream {
  animation: dp-logo-brand-in 0.58s var(--ease-choreography) both;
  animation-delay: 0.12s;
}

.site-header .logo:not(.logo--drawer) .logo__brand--project {
  animation: dp-logo-brand-in 0.58s var(--ease-choreography) both;
  animation-delay: 0.2s;
}

.site-header .logo:not(.logo--drawer) .logo__ai {
  font-family: var(--font-matrix-display);
  font-weight: 400;
  letter-spacing: 0.14em;
  /* clip-path du badge masque box-shadow : halo via drop-shadow */
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--accent-2) 38%, transparent))
    drop-shadow(0 6px 20px var(--accent-2-dim));
  animation: dp-logo-ai-in 0.62s var(--ease-choreography) both;
  animation-delay: 0.28s;
}

.site-header .logo:not(.logo--drawer):hover .logo__ai,
.site-header .logo:not(.logo--drawer):focus-visible .logo__ai {
  filter: brightness(1.06) drop-shadow(0 0 1px color-mix(in srgb, var(--accent-2) 48%, transparent))
    drop-shadow(0 8px 24px var(--accent-2-dim));
}

/* Soulignements : liseré froid sur le trait fin */
.site-header .logo:not(.logo--drawer)::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent-2) 45%, var(--logo-line-2)) 35%,
    var(--logo-line-2) 100%
  );
}

.site-header .logo:not(.logo--drawer):hover::before,
.site-header .logo:not(.logo--drawer):focus-visible::before {
  box-shadow: 0 0 14px var(--accent-2-dim);
}

html[data-theme="light"] .site-header .logo:not(.logo--drawer):hover .logo__hash,
html[data-theme="light"] .site-header .logo:not(.logo--drawer):focus-visible .logo__hash {
  color: var(--accent-2);
  text-shadow: 0 0 12px var(--accent-2-dim);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .logo:not(.logo--drawer) .logo__hash,
  .site-header .logo:not(.logo--drawer) .logo__brand--dream,
  .site-header .logo:not(.logo--drawer) .logo__brand--project,
  .site-header .logo:not(.logo--drawer) .logo__ai {
    animation: none !important;
    opacity: 1 !important;
  }

  .site-header .logo:not(.logo--drawer) .logo__hash {
    transform: skewX(-9deg);
  }

  .site-header .logo:not(.logo--drawer) .logo__brand--dream,
  .site-header .logo:not(.logo--drawer) .logo__brand--project {
    transform: skewX(-7deg);
  }

  .site-header .logo:not(.logo--drawer) .logo__ai {
    transform: none;
  }
}

/* Header ≥1400px : logo moins large (letter-spacing / cluster) ; font-size barre — règles dédiées plus bas */
@media (min-width: 1400px) {
  .site-header .logo:not(.logo--drawer) {
    letter-spacing: 0.045em;
  }

  .site-header .logo:not(.logo--drawer) .logo__cluster {
    gap: 0.02em;
    padding: 0.1em 0.26em 0.08em;
  }

  .site-header .logo:not(.logo--drawer) .logo__brand {
    letter-spacing: 0.055em;
  }

  .site-header .logo:not(.logo--drawer) .logo__ai {
    margin-left: 0.1em;
    letter-spacing: 0.075em;
    padding: 0.09em 0.3em 0.08em 0.18em;
  }
}

/* Logo barre desktop (≥1400px) : taille resserrée sur tout l’éventail largeur ; pas le tiroir (.logo--drawer) */
@media (min-width: 1400px) {
  .site-header .logo:not(.logo--drawer) {
    font-size: clamp(0.78rem, calc(var(--header-h) * 0.31), 1.48rem);
  }
}

@media (min-width: 2560px) {
  .site-header .logo:not(.logo--drawer) {
    font-size: clamp(0.86rem, calc(var(--header-h) * 0.36), 1.68rem);
  }
}

/* Nav desktop — structure ; puces unifiées sous .site-header @media ≥1400px */
.nav-desktop {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.25rem;
}

@media (min-width: 1400px) {
  .nav-desktop {
    display: flex;
  }
}

/* Dropdown Projets + langue (header-actions) */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border: 1px solid var(--btn-border);
  background: transparent;
  font: inherit;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.nav-dropdown__toggle:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  border-color: var(--accent-dim);
  transform: translateY(-1px);
}

.nav-dropdown__toggle:focus-visible {
  outline: 2px solid var(--btn-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--btn-focus);
}

.nav-dropdown__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s;
}

.nav-dropdown.is-open .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown.is-current > .nav-dropdown__toggle {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  border-color: var(--accent-dim);
}

/* Méga-menu Projets : puces unifiées — neutralise le fond générique is-current */
.site-header .nav-desktop .nav-dropdown--projects.is-current > .nav-dropdown__toggle {
  background: var(--header-chip-bg-hover);
  border-color: var(--header-chip-border-active);
}

.nav-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  min-width: 220px;
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  padding: 0.5rem 0;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 20;
}

.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0.35rem);
}

.nav-dropdown__panel:not(.nav-dropdown__panel--mega) a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.nav-dropdown__panel:not(.nav-dropdown__panel--mega) a:hover {
  background: rgba(255, 106, 0, 0.08);
  color: var(--accent);
}

@media (min-width: 1400px) {
  /*
   * L’entrée animée du header applique transform sur .nav-desktop > * (dont ce dropdown).
   * Un ancêtre avec transform ≠ none casse position:fixed : le méga se cale sur la largeur
   * du toggle (~100px). On neutralise uniquement ce nœud en barre desktop.
   */
  .site-header .nav-desktop > .nav-dropdown--projects {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .nav-dropdown--projects .nav-dropdown__panel--mega {
    position: fixed;
    left: 50%;
    right: auto;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    --dp-mega-panel-w: clamp(54rem, 60vw, 62rem);
    --dp-mega-panel-h: min(76vh, 34rem);
    width: var(--dp-mega-panel-w);
    max-width: var(--dp-mega-panel-w);
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0;
    max-height: var(--dp-mega-panel-h);
    overflow: hidden;
    padding: 0;
    border-radius: clamp(0.8rem, 1.2vw, 1.1rem);
    border: 1px solid var(--accent-dim);
    background: var(--bg-elevated);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    z-index: 999;
    transform: translateX(-50%) translateY(0.5rem);
  }

  .nav-dropdown--projects.is-open .nav-dropdown__panel--mega {
    transform: translateX(-50%) translateY(0.35rem);
  }

  .projects-mega-menu {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: var(--dp-mega-panel-h);
    height: var(--dp-mega-panel-h);
    position: relative;
    isolation: isolate;
    contain: layout;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    padding-inline: var(--content-rail-pad);
    background: linear-gradient(
      150deg,
      color-mix(in srgb, var(--bg-elevated) 92%, #111 8%) 0%,
      color-mix(in srgb, var(--bg-card) 92%, #000 8%) 100%
    );
  }

  .projects-mega-menu__puzzle {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    pointer-events: none;
  }

  .projects-mega-menu__puzzle[hidden] {
    display: none;
  }

  .projects-mega-menu__puzzle-tile {
    margin: 0;
    padding: 0;
    opacity: 0;
    background-repeat: no-repeat;
    transition: opacity 0.22s ease;
  }

  .projects-mega-menu__puzzle[data-puzzle-mode="open"] .projects-mega-menu__puzzle-tile::after,
  .projects-mega-menu__puzzle[data-puzzle-mode="close"] .projects-mega-menu__puzzle-tile::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      145deg,
      color-mix(in srgb, #ff8f1f 26%, transparent) 0%,
      color-mix(in srgb, #ff6a00 22%, transparent) 100%
    );
  }

  .projects-mega-menu__tabs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    min-height: 4.25rem;
    box-sizing: border-box;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-dim) 64%, transparent);
    background: color-mix(in srgb, var(--bg-muted) 72%, transparent);
    width: 100%;
    overflow: hidden;
  }

  .projects-mega-menu__tabs {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: start;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .projects-mega-menu__tab-quicklinks {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-self: end;
    white-space: nowrap;
    gap: 0.45rem;
  }

  .projects-mega-menu__all-projects-cta,
  .projects-mega-menu__hashtags-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--accent-dim) 45%);
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 18%, var(--bg-card) 82%) 0%,
      color-mix(in srgb, var(--bg-elevated) 88%, var(--accent) 12%) 100%
    );
    color: var(--text);
    font-family: var(--font-sub);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    min-width: max-content;
    visibility: visible;
    opacity: 1;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    transition:
      border-color 0.15s ease,
      background 0.15s ease,
      color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .projects-mega-menu__all-projects-cta:hover,
  .projects-mega-menu__hashtags-cta:hover {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--accent-dim) 28%);
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 28%, var(--bg-card) 72%) 0%,
      color-mix(in srgb, var(--bg-elevated) 82%, var(--accent) 18%) 100%
    );
    color: var(--text);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent);
  }

  .projects-mega-menu__all-projects-cta:focus-visible,
  .projects-mega-menu__hashtags-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Libellé i18n : éviter l’effondrement de largeur si cloak / inline. */
  .projects-mega-menu__all-projects-cta > span,
  .projects-mega-menu__hashtags-cta > span {
    display: inline-block;
    max-inline-size: none;
    min-inline-size: min-content;
  }

  .projects-mega-menu__tab {
    display: grid;
    gap: 0.25rem;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--accent-dim) 70%, transparent);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    color: var(--text);
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .projects-mega-menu__tab:hover,
  .projects-mega-menu__tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--accent-dim) 44%);
    background: color-mix(in srgb, var(--bg-card) 80%, var(--accent) 20%);
  }

  .projects-mega-menu__tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .projects-mega-menu__tab-chip {
    display: inline-block;
    width: fit-content;
    font-size: 0.73rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--accent);
    font-family: var(--font-sub);
    font-weight: 700;
  }

  .projects-mega-menu__tab-label {
    font-size: clamp(0.88rem, 0.42vw + 0.72rem, 1rem);
    font-family: var(--font-sub);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .projects-mega-menu__panels {
    position: relative;
    min-height: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .projects-mega-menu__panel {
    display: none;
    grid-template-columns: minmax(11.5rem, auto) minmax(16rem, max-content);
    align-items: stretch;
    justify-self: stretch;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .projects-mega-menu__panel.is-active {
    display: grid;
  }

  .projects-mega-menu__panel--no-thumb {
    grid-template-columns: minmax(16rem, max-content);
  }

  .projects-mega-menu__thumb {
    position: relative;
    min-height: 100%;
    max-height: clamp(12rem, 30vh, 17.5rem);
    max-width: 22rem;
    border-right: 1px solid color-mix(in srgb, var(--accent-dim) 60%, transparent);
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-card) 90%, #000 10%);
  }

  .projects-mega-menu__thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    opacity: 0.92;
    transition: transform 0.2s ease;
  }

  .projects-mega-menu__thumb:hover img,
  .projects-mega-menu__thumb:focus-visible img {
    transform: scale(1.01);
  }

  .projects-mega-menu__thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .projects-mega-menu__content {
    display: grid;
    align-content: start;
    grid-auto-rows: min-content;
    gap: 0.52rem;
    padding: 0.62rem 0.78rem 0.68rem;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .projects-mega-menu__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem 0.85rem;
    flex-wrap: wrap;
    padding-block-start: 0;
    margin-block-start: 0;
  }

  .projects-mega-menu__headline {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    flex: 1 1 12rem;
  }

  .projects-mega-menu__head .projects-mega-menu__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-start;
    gap: 0.5rem 0.65rem;
    padding-top: 0;
    flex: 0 1 auto;
  }

  .projects-mega-menu__head .projects-mega-menu__cta {
    box-sizing: border-box;
    min-width: 9.75rem;
    min-height: 2.35rem;
  }

  .projects-mega-menu__kicker {
    margin: 0;
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .projects-mega-menu__title {
    margin: 0;
    font-size: clamp(1.04rem, 0.58vw + 0.74rem, 1.36rem);
    font-family: var(--font-sub);
    line-height: 1.22;
  }

  .projects-mega-menu__desc {
    margin: 0;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text) 12%);
    line-height: 1.42;
    font-size: clamp(0.8rem, 0.24vw + 0.7rem, 0.9rem);
    max-width: 62ch;
    overflow: hidden;
    line-clamp: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .projects-mega-menu__footer {
    display: grid;
    gap: 0.48rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    padding: 0.58rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--accent-dim) 62%, transparent);
    border-radius: 0.8rem;
    background:
      linear-gradient(132deg, color-mix(in srgb, var(--bg-card) 90%, transparent) 0%, color-mix(in srgb, var(--bg-muted) 72%, transparent) 100%);
    overflow: hidden;
  }

  .projects-mega-menu__insights {
    display: grid;
    gap: 0.38rem;
  }

  .projects-mega-menu__status {
    margin: 0;
    font-size: clamp(0.68rem, 0.18vw + 0.62rem, 0.78rem);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 74%, var(--text-secondary) 26%);
    font-weight: 700;
  }

  .projects-mega-menu__highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.22rem;
  }

  .projects-mega-menu__highlights li {
    font-size: clamp(0.72rem, 0.18vw + 0.66rem, 0.82rem);
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--text) 18%);
    line-height: 1.32;
    padding-left: 0.9rem;
    position: relative;
  }

  .projects-mega-menu__highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 0.1rem;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--accent) 76%, var(--accent-dim) 24%);
  }

  .projects-mega-menu__mini-carousel {
    border-radius: 0.72rem;
    overflow: hidden;
    min-height: 4.35rem;
    max-height: 4.75rem;
    border: 1px solid color-mix(in srgb, var(--accent-dim) 64%, transparent);
    background: color-mix(in srgb, var(--bg-muted) 82%, transparent);
  }

  .projects-mega-menu__mini-track {
    position: relative;
    min-height: 4.35rem;
    max-height: 4.75rem;
  }

  .projects-mega-menu__mini-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .projects-mega-menu__mini-slide.is-active {
    opacity: 1;
  }

  .projects-mega-menu__mini-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .projects-mega-menu__cta {
    box-sizing: border-box;
    min-width: 9.75rem;
    min-height: 2.35rem;
    justify-content: center;
  }

  .projects-mega-menu__cta--demo {
    min-width: 9.75rem;
    min-height: 2.35rem;
  }

  .projects-mega-menu__panel--showcase .projects-mega-menu__footer {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    background:
      linear-gradient(130deg, color-mix(in srgb, var(--accent) 15%, var(--bg-card) 85%) 0%, color-mix(in srgb, var(--bg-muted) 82%, transparent) 100%);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--accent-dim) 60%);
  }

  .projects-mega-menu__panel--showcase .projects-mega-menu__status {
    color: color-mix(in srgb, var(--accent) 85%, var(--text) 15%);
  }

  .projects-mega-menu__panel--showcase .projects-mega-menu__highlights li::before {
    border-radius: 999px;
  }

  .projects-mega-menu__panel--narrative .projects-mega-menu__footer {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.88rem;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, transparent) 0%, color-mix(in srgb, var(--accent-dim) 24%, transparent) 100%);
  }

  .projects-mega-menu__panel--narrative .projects-mega-menu__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem 0.86rem;
  }

  .projects-mega-menu__panel--narrative .projects-mega-menu__highlights li::before {
    width: 0.38rem;
    height: 0.6rem;
    border-radius: 0.04rem;
  }

  .projects-mega-menu__panel--utility .projects-mega-menu__footer {
    gap: 0.68rem;
    border-style: dashed;
    background:
      linear-gradient(116deg, color-mix(in srgb, var(--bg-muted) 84%, transparent) 0%, color-mix(in srgb, var(--bg-card) 92%, transparent) 100%);
  }

  .projects-mega-menu__panel--utility .projects-mega-menu__highlights {
    grid-template-columns: 1fr;
  }

  .projects-mega-menu__panel--utility .projects-mega-menu__highlights li {
    border: 1px solid color-mix(in srgb, var(--accent-dim) 56%, transparent);
    border-radius: 0.48rem;
    padding: 0.4rem 0.55rem 0.4rem 1.2rem;
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  }

  .projects-mega-menu__panel--utility .projects-mega-menu__highlights li::before {
    border-radius: 0.02rem;
    width: 0.34rem;
    height: 0.66rem;
    left: 0.48rem;
  }

  @media (max-width: 1430px) {
    .projects-mega-menu__tabs {
      grid-template-columns: repeat(4, auto);
    }

    .projects-mega-menu__tab-label {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .projects-mega-menu__thumb {
      max-height: clamp(11rem, 28vh, 15rem);
    }

    .projects-mega-menu__footer {
      grid-template-columns: 1fr;
    }

    .projects-mega-menu__head .projects-mega-menu__actions {
      width: 100%;
      justify-content: flex-start;
    }

    .projects-mega-menu__mini-carousel,
    .projects-mega-menu__mini-track {
      min-height: 4.25rem;
      max-height: 4.6rem;
    }
  }
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang-switch {
  display: flex;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 600;
}

.lang-switch button {
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  transition: background 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.lang-switch button:hover {
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  color: var(--text);
}

.lang-switch button.is-active {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  filter: brightness(1.08);
}

/* Sélecteur langue (menu déroulant, carte continents, codes ISO, EN + natif) */
.lang-dropdown .lang-dropdown__toggle {
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(14rem, 42vw);
}

.lang-dropdown .lang-dropdown__flag-wrap {
  width: 2rem;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg-card) 88%, var(--text) 12%);
  border: 1px solid var(--accent-dim);
}

.lang-dropdown .lang-dropdown__flag-wrap > .lang-dropdown__flag {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-dropdown .lang-dropdown__flag {
  font-size: 1.15rem;
  line-height: 1;
}

.lang-dropdown .lang-dropdown__flag--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lang-dropdown__toggle-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  text-align: start;
}

.lang-dropdown__code {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--text);
  text-transform: uppercase;
}

.lang-dropdown__en {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-secondary);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-dropdown .nav-dropdown__panel,
.lang-dropdown .lang-dropdown__panel {
  min-width: min(22rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 1.5rem));
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Barre desktop : ancrage au bord fin logique du toggle (LTR → droite, RTL → gauche) pour rester dans le viewport */
.header-actions .lang-dropdown .nav-dropdown__panel,
.header-actions .lang-dropdown .lang-dropdown__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateY(0.5rem);
}

.header-actions .lang-dropdown.is-open .nav-dropdown__panel,
.header-actions .lang-dropdown.is-open .lang-dropdown__panel {
  transform: translateY(0.35rem);
}

.lang-dropdown__list {
  padding: 0.35rem 0;
  overflow-y: auto;
  max-height: min(52vh, 22rem);
}

/* Desktop : liste des langues sur deux colonnes (barre du header uniquement) */
@media (min-width: 1400px) {
  .header-actions .lang-dropdown .nav-dropdown__panel,
  .header-actions .lang-dropdown .lang-dropdown__panel {
    min-width: min(38rem, calc(100vw - 2rem));
    max-width: min(42rem, calc(100vw - 1.5rem));
    max-height: none;
    overflow: visible;
  }

  .header-actions .lang-dropdown .lang-dropdown__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.35rem;
    row-gap: 0;
    padding: 0.35rem 0.25rem;
    max-height: none;
    overflow: visible;
  }

  .header-actions .lang-dropdown .lang-dropdown__option {
    width: auto;
    min-width: 0;
    padding: 0.5rem 0.65rem;
  }
}

.lang-dropdown__option {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  text-align: start;
  padding: 0.55rem 1rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lang-dropdown__option:hover,
.lang-dropdown__option:focus-visible {
  background: rgba(255, 106, 0, 0.08);
  color: var(--accent);
}

.lang-dropdown__option.is-active {
  color: var(--accent);
  font-weight: 600;
}

.lang-dropdown__opt-flag-wrap {
  width: 2.35rem;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  background: color-mix(in srgb, var(--bg-card) 88%, var(--text) 12%);
  border: 1px solid var(--accent-dim);
}

.lang-dropdown__opt-flag {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.lang-dropdown__opt-flag-wrap > .lang-dropdown__opt-flag--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lang-dropdown__opt-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 0.65rem;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.lang-dropdown__opt-code {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: uppercase;
}

.lang-dropdown__opt-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
}

.lang-dropdown__opt-en {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.lang-dropdown__opt-native {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

/* Theme switch (dans le header, avant FR/EN) */
.theme-switch {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--btn-border);
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch:hover {
  transform: translateY(-1px);
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  color: var(--text);
}

.theme-switch:active {
  transform: translateY(0);
}

.theme-switch:focus-visible {
  outline: 2px solid var(--btn-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--btn-focus);
}

.theme-switch__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.theme-switch.is-active {
  background: color-mix(in srgb, var(--btn-bg-hover) 90%, transparent);
  color: var(--btn-text);
  border-color: color-mix(in srgb, var(--btn-bg-hover) 60%, var(--btn-border));
}

.btn-project-cta {
  line-height: 1.15;
  white-space: normal;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background var(--ui-duration) var(--ui-ease),
    color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease);
  text-align: center;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-border);
}

.btn--primary:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  border-color: var(--btn-bg-hover);
}

.btn--ghost {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-border);
}

.btn--ghost:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  border-color: var(--btn-bg-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--btn-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--btn-focus);
}

.btn--offset-inline {
  margin-left: 0.75rem;
}

/* Hamburger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 1002;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.nav-toggle:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  transform: translateY(-1px);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--btn-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--btn-focus);
}

@media (min-width: 1400px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--btn-text);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}

body.nav-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body.nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Voile derrière le tiroir (≤1399px, même logique que le header compact) */
.nav-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 10, 14, 0.52);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

html[data-theme="light"] .nav-drawer-backdrop {
  background: rgba(20, 18, 16, 0.38);
}

@media (max-width: 1399px) {
  .nav-drawer-backdrop {
    display: block;
  }

  body.nav-open .nav-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--bg);
  /* Sous la zone sûre uniquement : le tiroir est au-dessus du header ; pas doubler header-h (évite bande vide « noire » en tête) */
  padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) var(--pad-x) 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

body.nav-open .nav-drawer {
  opacity: 1;
  visibility: visible;
}

.nav-drawer > a,
.nav-drawer .nav-drawer__sub a,
.nav-drawer button.nav-drawer__link {
  display: block;
  width: 100%;
  text-align: start;
  padding: 1rem 0;
  font-family: var(--font-h);
  font-size: 1.25rem;
  border-bottom: 1px solid var(--line-subtle);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-family: var(--font-h);
}

.nav-drawer__link--muted {
  pointer-events: none;
  opacity: 0.7;
}

.nav-drawer__cta {
  margin-top: 1rem;
  text-align: center;
}

.nav-drawer__brand {
  width: 100%;
  text-align: start;
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--line-subtle);
}

.nav-drawer__brand .logo.logo--drawer {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: start;
  align-items: center;
  white-space: nowrap;
  /* Smartphone : logo tiroir (réduit encore une fois) */
  font-size: clamp(0.65rem, min(6.1vw, 8.2vmin), 2.1rem);
  letter-spacing: 0.035em;
  line-height: 1.05;
}

/* Logo réduit : plage tablette / header compact (768–1399px) */
@media (min-width: 768px) and (max-width: 1399px) {
  body {
    --dp-logo-tablet-header-fs: clamp(0.98rem, calc(var(--header-bar-ctrl-h) * 0.58), 1.36rem);
  }
  .site-header .logo:not(.logo--drawer) {
    font-size: var(--dp-logo-tablet-header-fs);
    letter-spacing: 0.058em;
    padding-bottom: 0;
    max-width: 100%;
    min-height: calc(var(--header-bar-ctrl-h) * 1.16);
    height: calc(var(--header-bar-ctrl-h) * 1.16);
  }
  .nav-drawer__brand .logo.logo--drawer {
    font-size: calc(var(--dp-logo-tablet-header-fs) * 0.88);
    letter-spacing: 0.04em;
  }
}

.nav-drawer__sub {
  padding-inline-start: 1rem;
  margin-bottom: 0.5rem;
}

.nav-drawer__sub a {
  font-size: 1rem;
  font-family: var(--font-body);
  padding: 0.6rem 0;
  color: var(--text-secondary);
}

.nav-drawer__prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--line-subtle);
}

.nav-drawer__prefs .theme-switch {
  flex-shrink: 0;
}

.nav-drawer__prefs .lang-dropdown {
  flex-shrink: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-drawer__prefs .lang-dropdown .nav-dropdown__panel,
.nav-drawer__prefs .lang-dropdown .lang-dropdown__panel {
  left: 0;
  right: auto;
  transform: translateY(0.5rem);
}

.nav-drawer__prefs .lang-dropdown.is-open .nav-dropdown__panel,
.nav-drawer__prefs .lang-dropdown.is-open .lang-dropdown__panel {
  transform: translateY(0.35rem);
}

html[dir="rtl"] .nav-drawer__prefs .lang-dropdown .nav-dropdown__panel,
html[dir="rtl"] .nav-drawer__prefs .lang-dropdown .lang-dropdown__panel {
  left: auto;
  right: 0;
}

@media (min-width: 1400px) {
  .nav-drawer {
    display: none;
  }
}

/* Sections */
.section {
  position: relative;
  padding: 4rem 0;
}

.section--hero {
  /* Pleine largeur écran (le contenu .container reste centré en dessous) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  overflow-x: clip;
  min-height: clamp(22rem, 52vh, 36rem);
  display: flex;
  align-items: center;
  padding: 1.75rem 0 2.5rem;
}

/* Hero page d’accueil uniquement : plus d’air vertical, ancrage visuel */
body.page-home .section--hero {
  min-height: clamp(24rem, 58vh, 42rem);
  padding-block: clamp(2rem, 5vh, 3rem);
  isolation: isolate;
}

/*
 * Empilement accueil (desktop ≥1200px, dans main.page-main isolé) — ordre du fond vers l’avant :
 *   -1  main::before          grain viewport (fixed)
 *    1  .dp-home-grid-fixed    quadrillage
 *    3  section.section        fonds stripe / hero (z-index 3 sur la boîte section)
 *    4  .dp-home-wave-fixed    ondes : au-dessus des fonds pour rester visibles
 *    5  contenu utile des sections home + footer home
 *  Hors main (body) : .site-header 1000, .nav-drawer 1001.
 */
body.page-home main.page-main > section {
  position: relative;
  z-index: 3;
}

.section--alt {
  background: var(--bg-elevated);
}

/* Fiches projet funnel : pas de bande de fond sur le corps (aligné Prompt / lecture sobre) */
body.page-meteodog .section.section--alt,
body.page-koinkoinsuite .section.section--alt,
body.page-promptdemerde .section.section--alt,
body.page-transcriptit .section.section--alt {
  background: transparent;
}

/* Accueil — alternance de bandes (classe émise par index.php) + halo mesh discret */
body.page-home .section.section--stripe-a {
  background:
    radial-gradient(ellipse 85% 42% at 50% 0%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 52%),
    var(--section-stripe-a);
}

body.page-home .section.section--stripe-b {
  background:
    radial-gradient(ellipse 80% 40% at 12% 88%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 48%),
    var(--section-stripe-b);
}

/* Grain viewport (accueil) ; ondes + quadrillage : `engine/css/wave.css`. */
body.page-home main.page-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.052;
  /* Grain CSS pur : évite feTurbulence SVG (coût GPU au scroll) — équivalent perçu au grain overlay */
  mix-blend-mode: normal;
  background-image:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(255, 106, 0, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 48% 92%, rgba(0, 0, 0, 0.14) 0%, transparent 48%),
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.018) 0px,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 3px
    );
}

.section--community-relax {
  border-block: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.section--community-relax .section-eyebrow {
  color: var(--accent);
  font-family: var(--font-sub);
  font-weight: 600;
}

.section--community {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-muted) 50%, var(--bg-elevated) 100%);
}

.section--community.section--stripe-a {
  background: linear-gradient(180deg, var(--section-stripe-a) 0%, var(--bg-muted) 50%, var(--section-stripe-b) 100%);
}

.section--community.section--stripe-b {
  background: linear-gradient(180deg, var(--section-stripe-b) 0%, var(--bg-muted) 50%, var(--section-stripe-a) 100%);
}

/* Alignement début de ligne (gauche LTR / droite RTL) — home communauté */
.section--community .hashtag-xl,
.section--community h2.font-h2 {
  text-align: start;
  margin-inline: 0;
}

/* Bandeau final accueil — services premium (rail vertical, pas de cartes) */
.section--premium-services {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-muted) 55%, var(--bg) 100%);
  padding-block: clamp(2rem, 5vw, 3rem);
}

.premium-services-rail {
  display: grid;
  gap: 1.25rem;
  max-width: 56rem;
  margin-inline: auto;
  align-items: stretch;
}

@media (min-width: 720px) {
  .premium-services-rail {
    grid-template-columns: minmax(11rem, 13.5rem) 1fr;
    gap: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bg-card) 82%);
    box-shadow: 0 12px 36px color-mix(in srgb, #000 20%, transparent);
  }
}

.premium-services-rail__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bg-card) 86%);
  border-radius: 0.65rem;
  padding: 0.35rem;
}

@media (min-width: 720px) {
  .premium-services-rail__sidebar {
    border-radius: 0;
    border: none;
    border-inline-end: 1px solid color-mix(in srgb, var(--accent) 16%, var(--bg-card) 84%);
    padding: 0.5rem;
  }
}

.premium-services-rail__tab {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sub);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.75rem 0.85rem;
  margin: 0;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.premium-services-rail__tab:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.premium-services-rail__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.premium-services-rail__tab.is-active {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-card) 78%);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-theme="light"] .premium-services-rail__tab.is-active {
  background: color-mix(in srgb, var(--accent) 14%, #fff 86%);
}

.premium-services-rail__stage {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--bg-card) 88%);
  border-radius: 0.65rem;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1.1rem, 2.8vw, 1.5rem);
  min-height: 7rem;
  display: flex;
  align-items: center;
}

@media (min-width: 720px) {
  .premium-services-rail__stage {
    border: none;
    border-radius: 0;
    min-height: 9rem;
  }
}

.premium-services-rail__panel {
  width: 100%;
}

.premium-services-rail__panel[hidden] {
  display: none !important;
}

.premium-services-rail__lead {
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.55;
}

/* Accueil — citation finale & signature (après #CommercifyForever / communauté) */
.section--founder-quote {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
  background: radial-gradient(
      ellipse 120% 80% at 50% 100%,
      color-mix(in srgb, var(--accent) 14%, var(--bg) 86%) 0%,
      var(--bg) 62%
    ),
    linear-gradient(165deg, var(--bg-muted) 0%, var(--bg) 45%, color-mix(in srgb, var(--bg) 82%, #000 18%) 100%);
  border-block-start: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.section--founder-quote.section--stripe-a {
  background: radial-gradient(
      ellipse 120% 80% at 50% 100%,
      color-mix(in srgb, var(--accent) 14%, var(--section-stripe-a) 86%) 0%,
      var(--section-stripe-a) 62%
    ),
    linear-gradient(165deg, var(--bg-muted) 0%, var(--section-stripe-a) 45%, color-mix(in srgb, var(--section-stripe-b) 82%, #000 18%) 100%);
}

.section--founder-quote.section--stripe-b {
  background: radial-gradient(
      ellipse 120% 80% at 50% 100%,
      color-mix(in srgb, var(--accent) 14%, var(--section-stripe-b) 86%) 0%,
      var(--section-stripe-b) 62%
    ),
    linear-gradient(165deg, var(--bg-muted) 0%, var(--section-stripe-b) 45%, color-mix(in srgb, var(--section-stripe-a) 82%, #000 18%) 100%);
}

html[data-theme="light"] .section--founder-quote {
  background: radial-gradient(
      ellipse 110% 90% at 50% 108%,
      color-mix(in srgb, var(--accent) 10%, var(--bg-card) 90%) 0%,
      var(--bg) 55%
    ),
    linear-gradient(165deg, var(--bg-elevated) 0%, var(--bg-muted) 100%);
  border-block-start-color: color-mix(in srgb, var(--accent) 28%, #c9c2b8);
}

html[data-theme="light"] .section--founder-quote.section--stripe-a {
  background: radial-gradient(
      ellipse 110% 90% at 50% 108%,
      color-mix(in srgb, var(--accent) 10%, var(--bg-card) 90%) 0%,
      var(--section-stripe-a) 55%
    ),
    linear-gradient(165deg, var(--section-stripe-b) 0%, var(--bg-muted) 100%);
  border-block-start-color: color-mix(in srgb, var(--accent) 28%, #c9c2b8);
}

html[data-theme="light"] .section--founder-quote.section--stripe-b {
  background: radial-gradient(
      ellipse 110% 90% at 50% 108%,
      color-mix(in srgb, var(--accent) 10%, var(--bg-card) 90%) 0%,
      var(--section-stripe-b) 55%
    ),
    linear-gradient(165deg, var(--section-stripe-a) 0%, var(--bg-muted) 100%);
  border-block-start-color: color-mix(in srgb, var(--accent) 28%, #c9c2b8);
}

.founder-quote-atmosphere {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.founder-quote-atmosphere__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.52;
}

.founder-quote-atmosphere__orb--a {
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  top: -18%;
  left: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
}

.founder-quote-atmosphere__orb--b {
  width: min(42vw, 22rem);
  height: min(42vw, 22rem);
  bottom: -12%;
  right: -6%;
  background: radial-gradient(circle, color-mix(in srgb, #c9a227 35%, var(--accent) 25%, transparent) 0%, transparent 72%);
  opacity: 0.4;
}

.founder-quote-atmosphere__grain {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  /* Grain SVG feTurbulence = très coûteux GPU ; même rendu « grain léger » en CSS pur */
  background-image:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(255, 106, 0, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 48% 92%, rgba(0, 0, 0, 0.16) 0%, transparent 48%),
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 4px
    );
  /* normal : évite un calque de fusion overlay (coûteux au scroll) */
  mix-blend-mode: normal;
  pointer-events: none;
}

.section--founder-quote .container {
  position: relative;
  z-index: 1;
}

/* Citations : flèches | dicton (+ lien profil) | portrait + légende sous le portrait */
.founder-trio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(11rem, 15rem) auto;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: stretch;
}

.founder-trio:focus-visible {
  outline: none;
}

.founder-trio__arrow {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50%;
  cursor: pointer;
  color: color-mix(in srgb, var(--accent) 90%, var(--text) 10%);
  background: color-mix(in srgb, var(--bg-card) 85%, var(--accent) 15%);
  box-shadow: 0 6px 20px color-mix(in srgb, #000 30%, transparent);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.founder-trio__arrow svg {
  width: 26px;
  height: 26px;
}

.founder-trio__arrow:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card) 82%);
  transform: scale(1.05);
}

.founder-trio__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.founder-trio__arrow:active {
  transform: scale(0.98);
}

html[data-theme="light"] .founder-trio__arrow {
  background: var(--bg-card);
  border-color: color-mix(in srgb, var(--accent) 22%, #c9c2b8);
  box-shadow: 0 4px 14px color-mix(in srgb, #3d2800 12%, transparent);
}

@media (max-width: 960px) {
  .founder-trio {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .founder-trio__arrow--prev {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .founder-trio__arrow--next {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .founder-trio__center-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: auto;
  }

  .founder-trio__side {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 16rem;
    margin-inline: auto;
    min-height: auto;
  }

  .founder-trio__panel-inner {
    min-height: 14rem;
  }
}

.founder-trio__badge {
  text-align: center;
}

/* Nom d’auteur sous le liseré (ordre : citation → trait → signature) */
.founder-trio__badge--tail {
  margin-top: clamp(0.85rem, 2.2vw, 1.25rem);
}

.founder-trio__badge-pill {
  display: inline-block;
}

.founder-trio__badge-pill span {
  display: inline-block;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  font-family: var(--font-matrix-display);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Fondateur : accent orange sur le cadre, texte lisible (pas orange sur orange) */
.founder-trio__panel[data-founder-kind="own"] .founder-trio__badge-pill span {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--bg-card) 45%);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

html[data-theme="light"] .founder-trio__panel[data-founder-kind="own"] .founder-trio__badge-pill span {
  color: #2a2218;
  background: var(--bg-card);
  border-color: color-mix(in srgb, var(--accent) 45%, #c9c2b8);
}

/* Externe : tons pierre / gris chaud (cohérent avec le thème, pas de bleu) */
.founder-trio__panel[data-founder-kind="external"] .founder-trio__badge-pill span {
  color: color-mix(in srgb, #f2ebe3 95%, var(--text) 5%);
  background: color-mix(in srgb, #3a3228 52%, var(--bg-card) 48%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--bg-muted) 68%);
}

html[data-theme="light"] .founder-trio__panel[data-founder-kind="external"] .founder-trio__badge-pill span {
  color: #3a3228;
  background: color-mix(in srgb, #d4c8b8 78%, var(--bg-card) 22%);
  border-color: color-mix(in srgb, var(--accent) 30%, #9a9288 70%);
}

/* Colonne centrale : cadre citation + lien profil sous le dicton */
.founder-trio__center-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.5vw, 1rem);
  min-width: 0;
}

.founder-trio__center {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: min(28rem, 72vh);
}

.founder-trio__panel[hidden] {
  display: none !important;
}

.founder-trio__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.founder-trio__panel-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-height: min(26rem, 68vh);
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.75rem);
  border-radius: 1rem;
  text-align: center;
  /* Fond opaque : évite backdrop-filter (très coûteux au scroll) — rendu proche du mix précédent */
  background: var(--bg-card);
  border: 1px solid rgba(255, 106, 0, 0.16);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .founder-trio__panel-inner {
  background: var(--bg-card);
  border: 1px solid rgba(201, 194, 184, 0.85);
  box-shadow: 0 16px 36px rgba(61, 40, 0, 0.09);
}

/*
 * Contre-effet navigation : le portrait « pulse » en scale (radial) ;
 * le bloc citation glisse en translation X + légère fade — contraste de mouvement, transform + opacity seulement.
 */
@keyframes founder-citation-snap-next {
  from {
    opacity: 0.82;
    transform: translateX(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes founder-citation-snap-prev {
  from {
    opacity: 0.82;
    transform: translateX(-0.65rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.founder-trio__panel-inner.is-founder-citation-snap.is-founder-citation-snap--next {
  animation: founder-citation-snap-next 0.4s cubic-bezier(0.22, 0.88, 0.38, 1) forwards;
}

.founder-trio__panel-inner.is-founder-citation-snap.is-founder-citation-snap--prev {
  animation: founder-citation-snap-prev 0.4s cubic-bezier(0.22, 0.88, 0.38, 1) forwards;
}

/* Citations : même typo que le hero « Design Your Digital » (.hero-title), non gras, taille unique */
.founder-trio__dicton {
  font-family: var(--font-matrix-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.08rem, 1.95vw, 1.3rem);
  line-height: 1.55;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--text);
}

/* Chevrons « » : une seule paire sur tout le bloc citation (FR + EN), pas sur le <p> */
.founder-trio__dicton > .founder-trio__dicton--quoted::before {
  content: '\00ab';
  font-weight: 400;
  color: color-mix(in srgb, var(--accent) 75%, var(--text) 25%);
  margin-right: 0.12em;
}

.founder-trio__dicton > .founder-trio__dicton--quoted::after {
  content: '\00bb';
  font-weight: 400;
  color: color-mix(in srgb, var(--accent) 75%, var(--text) 25%);
  margin-left: 0.12em;
}

.founder-trio__panel[data-founder-kind='external'] .founder-trio__dicton > .founder-trio__dicton--quoted::before,
.founder-trio__panel[data-founder-kind='external'] .founder-trio__dicton > .founder-trio__dicton--quoted::after {
  color: color-mix(in srgb, #7eb8ff 65%, var(--text) 35%);
}

/* Slogan dans la citation : soulignement uniquement (pas de guillemets / cotes sur le span) */
.founder-trio__dicton-nested {
  color: color-mix(in srgb, var(--accent) 18%, var(--text) 82%);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.founder-trio__rule {
  width: min(12rem, 70%);
  height: 2px;
  margin: 0 auto clamp(0.65rem, 1.8vw, 1rem);
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 70%, transparent),
    transparent
  );
}

/* Colonne photo : portrait + nom / rôle sous l’image */
.founder-trio__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: min(28rem, 72vh);
}

.founder-trio__side-profile-wrap {
  width: 100%;
  max-width: 14rem;
  text-align: center;
  margin-top: 0.35rem;
}

.founder-trio__side-profile-wrap[hidden] {
  display: none !important;
}

.founder-trio__side-profile-link {
  color: var(--accent) !important;
  border-bottom-color: var(--accent-dim) !important;
}

.founder-trio__side-profile-link:hover,
.founder-trio__side-profile-link:focus-visible {
  color: var(--accent-strong) !important;
  border-bottom-color: var(--accent-hover) !important;
}

.founder-trio__about-link {
  font-family: var(--font-sub);
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 88%, var(--text) 12%);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 0.1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.founder-trio__about-link:hover,
.founder-trio__about-link:focus-visible {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 75%, transparent);
}

.founder-trio__about-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
  border-radius: 2px;
}

.founder-trio__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  text-align: center;
  width: 100%;
  max-width: 14rem;
  min-height: 5.5rem;
}

.founder-trio__caption-name {
  font-family: var(--font-matrix-display);
  font-size: clamp(0.88rem, 1.45vw, 1rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1.3;
}

.founder-trio__caption-line2,
.founder-trio__caption-context {
  font-family: var(--font-matrix-display);
  font-size: clamp(0.88rem, 1.45vw, 1rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 92%, var(--accent) 8%);
  margin: 0;
}

.founder-trio__caption-line2.is-empty,
.founder-trio__caption-context.is-empty {
  display: none;
}

/* Crédit photo (ex. CC BY-SA) sous la légende portrait */
.founder-trio__photo-credit {
  font-family: var(--font-sub);
  font-size: clamp(0.62rem, 0.95vw, 0.7rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 72%, var(--accent) 28%);
  margin: 0.35rem 0 0;
  max-width: 14rem;
  text-wrap: balance;
}

.founder-trio__photo-credit.is-empty {
  display: none;
}

/* Citations externes (Earl Nightingale, Karin Viard) : années + métiers en capitales serrées — ne s’applique pas au fondateur */
body.page-home .founder-trio__caption--author-profile .founder-trio__caption-line2:not(.is-empty) {
  font-size: clamp(0.78rem, 1.12vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
}

body.page-home .founder-trio__caption--author-profile .founder-trio__caption-context:not(.is-empty) {
  font-family: var(--font-sub);
  font-size: clamp(0.7rem, 1.02vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, #7eb8ff 22%);
}

/*
 * Portrait : hauteur fixe par ratio (réf. portrait fondateur 598×1024)
 */
.founder-trio__photo-frame {
  position: relative;
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 598 / 1024;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--bg-card) 55%);
  box-shadow: 0 12px 34px color-mix(in srgb, #000 38%, transparent);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--bg) 12%);
  transform-origin: center center;
}

/* Navigation citations : léger « snap » sur le portrait (transform seulement, une fois par clic) */
@keyframes founder-photo-frame-snap {
  0% {
    transform: scale(0.93);
  }
  55% {
    transform: scale(1.025);
  }
  100% {
    transform: scale(1);
  }
}

.founder-trio__photo-frame.is-founder-photo-snap {
  animation: founder-photo-frame-snap 0.42s cubic-bezier(0.33, 1.12, 0.52, 1) forwards;
}

.founder-trio__photo-frame--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
  opacity: 0.35;
  transition: opacity 0.45s ease;
  z-index: 1;
}

.founder-trio__photo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform 0.35s ease;
  z-index: 0;
}

.founder-trio__photo-img[hidden] {
  display: none !important;
}

.founder-trio__photo-frame--has-image:hover .founder-trio__photo-img {
  transform: scale(1.035);
}

.founder-trio__photo-frame--has-image:active .founder-trio__photo-img {
  transform: scale(1.02);
}

/* Earl / Karin (citations externes) : portrait assombri au repos, rendu d’origine au survol */
.founder-trio__photo-frame.is-photo-dim-idle .founder-trio__photo-img {
  filter: brightness(0.6);
  transition: transform 0.35s ease, filter 0.4s ease;
}

.founder-trio__photo-frame.is-photo-dim-idle:hover .founder-trio__photo-img,
.founder-trio__photo-frame.is-photo-dim-idle:focus-within .founder-trio__photo-img,
.founder-trio__photo-frame.is-photo-dim-idle:active .founder-trio__photo-img {
  filter: none;
}

/* Fondateur (citations « own », ex. Stéphane) : rendu légèrement voilé au repos, couleurs plus vives au survol — filter + opacity (::after), pas de JS */
.founder-trio__photo-frame.is-founder-portrait-fx .founder-trio__photo-img {
  filter: brightness(0.92);
  transition: transform 0.35s ease, filter 0.45s cubic-bezier(0.22, 0.88, 0.35, 1);
}

.founder-trio__photo-frame.is-founder-portrait-fx:hover .founder-trio__photo-img,
.founder-trio__photo-frame.is-founder-portrait-fx:focus-within .founder-trio__photo-img {
  filter: brightness(1.05);
}

.founder-trio__photo-frame.is-founder-portrait-fx:hover::after,
.founder-trio__photo-frame.is-founder-portrait-fx:focus-within::after {
  opacity: 0.16;
}

/* Cadre vide — auteurs externes (pas d’image sans autorisation) */
.founder-trio__photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: clamp(0.75rem, 2vw, 1.1rem);
  text-align: center;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bg-card) 94%, #4a3d2e 6%) 0%,
    color-mix(in srgb, var(--bg-card) 88%, var(--text) 12%) 100%
  );
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--bg-muted) 62%);
}

.founder-trio__photo-frame.is-external {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--bg-muted) 65%);
}

.founder-trio__photo-placeholder[hidden] {
  display: none !important;
}

.founder-trio__photo-placeholder__icon {
  display: flex;
  color: color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
  opacity: 0.85;
}

.founder-trio__photo-placeholder__text {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 82%, var(--accent) 18%);
  line-height: 1.35;
  max-width: 11rem;
}

html[data-theme="light"] .founder-trio__photo-placeholder {
  background: linear-gradient(160deg, #ebe4d8 0%, #ded8ce 100%);
  border-color: color-mix(in srgb, var(--accent) 28%, #a8a098 72%);
}

html[data-theme="light"] .founder-trio__photo-placeholder__text {
  color: #4a4540;
}

html[data-theme="light"] .founder-trio__photo-placeholder__icon {
  color: color-mix(in srgb, var(--accent) 55%, #5c564e 45%);
}

@media (prefers-reduced-motion: reduce) {
  .founder-trio__arrow,
  .founder-trio__photo-img {
    transition: none;
  }

  .founder-trio__photo-frame.is-founder-photo-snap {
    animation: none !important;
  }

  .founder-trio__panel-inner.is-founder-citation-snap {
    animation: none !important;
  }

  .founder-trio__photo-frame--has-image:hover .founder-trio__photo-img,
  .founder-trio__photo-frame--has-image:active .founder-trio__photo-img {
    transform: none;
  }

  .founder-trio__arrow:hover,
  .founder-trio__arrow:active {
    transform: none;
  }
}

.section--social-hub {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.section--social-hub.section--stripe-a {
  background: linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

.section--social-hub.section--stripe-b {
  background: linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

.social-hub__hashtag {
  text-align: left;
  margin-top: 0;
}

.social-hub-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .social-hub-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.social-hub-youtube {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.social-hub-youtube__hook {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.social-hub-youtube__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-sub);
  font-weight: 700;
}

.social-hub-youtube__thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  background: var(--bg);
}

.social-hub-youtube__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.social-hub-youtube__thumb:hover img,
.social-hub-youtube__thumb:focus-visible img {
  transform: scale(1.02);
  opacity: 1;
}

.social-hub-youtube__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.social-hub-youtube__cta {
  width: 100%;
}

.social-hub-networks {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .social-hub-networks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.social-network-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 5rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%);
  padding: 1rem 1.05rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.social-network-card:hover {
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.08);
}

.social-network-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.social-network-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 106, 0, 0.55);
  background: rgba(255, 106, 0, 0.1);
  color: var(--accent);
}

.social-network-card__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.social-network-card__label {
  font-family: var(--font-sub);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 700;
  color: var(--text);
}

html[data-theme="light"] .social-network-card {
  background: color-mix(in srgb, var(--bg-card) 97%, #111 3%);
}

/* Section communication — Discord / GitHub / Reddit / X (ordre alphabétique) : zone resserrée, icônes plus grandes */
#communication .social-hub-networks {
  gap: 0.6rem;
}

#communication .social-network-card {
  min-height: 0;
  padding: 0.55rem 0.75rem;
  gap: 0.62rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--bg-card) 93%, var(--bg) 7%) 0%,
    color-mix(in srgb, var(--bg-card) 90%, var(--accent) 5%) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 14px rgba(0, 0, 0, 0.14);
  border-color: color-mix(in srgb, var(--accent-dim) 75%, transparent);
}

#communication .social-network-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(255, 106, 0, 0.14);
}

#communication .social-network-card__icon {
  width: 3.2rem;
  height: 3.2rem;
  border-width: 1.5px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 160, 80, 0.28), transparent 62%),
    rgba(255, 106, 0, 0.12);
  box-shadow:
    0 0 0 1px rgba(255, 106, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#communication .social-network-card__icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

#communication .social-network-card__label {
  font-size: clamp(0.9rem, 1.3vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

html[data-theme="light"] #communication .social-network-card {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--bg-card) 98%, #fff 2%) 0%,
    color-mix(in srgb, var(--bg-card) 94%, var(--accent) 4%) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 4px 16px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] #communication .social-network-card__icon {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 140, 60, 0.2), transparent 62%),
    rgba(255, 106, 0, 0.08);
}

/* Cartes réseaux « rich » (Reddit, GitHub, X, Discord) — recto centré ; verso overlay / flux */
#communication .social-network-card--rich {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

#communication .social-network-card__badge {
  position: absolute;
  top: 0.4rem;
  inset-inline-end: 0.4rem;
  z-index: 2;
  pointer-events: none;
}

#communication .social-network-card__badge > span {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--accent-dim) 35%, transparent);
  color: color-mix(in srgb, var(--fg) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-dim) 45%, transparent);
}

/* Pied GitHub — pseudo propriétaire du dépôt (@…), pill monospace + survol carte */
#communication .social-network-card__badge--github-foot {
  top: auto;
  bottom: 0.42rem;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
}

#communication .social-network-card__badge--github-foot > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 7%, var(--bg-card) 93%);
  color: color-mix(in srgb, var(--fg) 90%, #2ea043 10%);
  border: 1px solid color-mix(in srgb, #2ea043 22%, var(--accent-dim) 78%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

#communication .social-network-card--rich:hover .social-network-card__badge--github-foot > span,
#communication .social-network-card--rich:focus-within .social-network-card__badge--github-foot > span {
  color: var(--text);
  background: color-mix(in srgb, #2ea043 14%, var(--bg-card) 86%);
  border-color: color-mix(in srgb, #2ea043 55%, var(--accent-dim) 45%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #2ea043 28%, transparent),
    0 6px 20px color-mix(in srgb, #2ea043 22%, transparent);
  transform: translateY(-2px) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  #communication .social-network-card__badge--github-foot > span {
    transition: none;
  }

  #communication .social-network-card--rich:hover .social-network-card__badge--github-foot > span,
  #communication .social-network-card--rich:focus-within .social-network-card__badge--github-foot > span {
    transform: none;
  }
}

#communication .social-network-card--rich .social-network-card__surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: clamp(6.25rem, 15vw, 8.5rem);
  gap: 0.45rem;
  padding: 0.55rem 0.5rem 0.45rem;
}

/* Rectos un peu plus hauts (GitHub / X / Discord) — taglines plus denses ; Reddit inchangé */
#communication .social-network-card--rich.social-network-card--tall-recto .social-network-card__surface {
  min-height: clamp(6.75rem, 16vw, 9.25rem);
}

#communication .social-network-card--rich.social-network-card--github-foot .social-network-card__surface {
  padding-bottom: 1.75rem;
}

#communication .social-network-card--rich .social-network-card__icon {
  width: 3.55rem;
  height: 3.55rem;
  flex-shrink: 0;
}

#communication .social-network-card--rich .social-network-card__icon svg {
  width: 1.68rem;
  height: 1.68rem;
}

#communication .social-network-card--rich .social-network-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  text-align: center;
}

#communication .social-network-card--rich .social-network-card__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  outline-offset: 3px;
}

#communication .social-network-card--rich .social-network-card__primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#communication .social-network-card--rich .social-network-card__tagline-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

#communication .social-network-card__tagline-shell[data-dp-tagline-expanded="0"] {
  max-height: 6.25em;
  overflow: hidden;
}

#communication .social-network-card__tagline-shell[data-dp-tagline-expanded="0"] .social-network-card__tagline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

#communication .social-network-card__tagline-shell[data-dp-tagline-expanded="1"] {
  max-height: none;
  overflow: visible;
}

#communication .social-network-card__tagline-shell[data-dp-tagline-expanded="1"] .social-network-card__tagline {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#communication .social-network-card__tagline-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0.05rem 0 0;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: color-mix(in srgb, var(--text-secondary) 92%, #2ea043 8%);
  border: 1px solid color-mix(in srgb, #2ea043 32%, var(--accent-dim) 68%);
  background: color-mix(in srgb, var(--fg) 5%, var(--bg-card) 95%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

#communication .social-network-card__tagline-toggle:hover {
  border-color: color-mix(in srgb, #2ea043 48%, var(--accent-dim) 52%);
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 4px 14px color-mix(in srgb, #2ea043 18%, transparent);
}

#communication .social-network-card__tagline-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#communication .social-network-card__tagline-toggle__chev {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.12rem;
  pointer-events: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}

#communication .social-network-card__tagline-toggle[aria-expanded="true"] .social-network-card__tagline-toggle__chev {
  margin-top: 0.12rem;
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  #communication .social-network-card__tagline-toggle,
  #communication .social-network-card__tagline-toggle__chev {
    transition: none;
  }
}

html[data-theme="light"] #communication .social-network-card__tagline-toggle {
  background: color-mix(in srgb, var(--bg-card) 97%, #fff 3%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 8px rgba(0, 0, 0, 0.06);
}

#communication .social-network-card--rich .social-network-card__label {
  font-size: clamp(1.12rem, 2.4vw, 1.38rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

#communication .social-network-card--rich .social-network-card__tagline {
  font-size: clamp(0.75rem, 1.15vw, 0.88rem);
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-line;
  text-align: center;
  text-wrap: balance;
}

#communication .social-network-card__detail {
  margin-top: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-dim) 55%, transparent);
  width: 100%;
}

#communication .social-network-card__detail-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-dim) 48%, transparent);
  flex-shrink: 0;
}

#communication .social-network-card__icon--detail {
  width: 2.85rem;
  height: 2.85rem;
  flex-shrink: 0;
}

#communication .social-network-card__icon--detail svg {
  width: 1.48rem;
  height: 1.48rem;
}

#communication .social-network-card__label--detail {
  font-size: clamp(0.95rem, 1.65vw, 1.12rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--text);
}

#communication .social-network-card__detail-inner {
  font-size: clamp(0.72rem, 1.05vw, 0.8rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-line;
}

/* Par defaut: uniquement le recto sur tous les viewports. */
#communication .social-network-card--rich .social-network-card__detail {
  display: none;
}

/* Verso uniquement sur desktop avec souris (hover fiable + pointeur fin). */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #communication .social-network-card__detail {
    display: block;
    position: absolute;
    inset: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    width: auto;
    z-index: 2;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.65rem 0.75rem;
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.22s ease,
      visibility 0.22s ease;
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 96%, var(--bg) 4%) 0%,
      color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%) 100%
    );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-dim) 40%, transparent);
  }

  #communication .social-network-card--rich:hover .social-network-card__detail,
  #communication .social-network-card--rich:focus-within .social-network-card__detail {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #communication .social-network-card__detail-inner {
    color: var(--text);
    font-size: clamp(0.68rem, 1vw, 0.78rem);
  }

  html[data-theme="light"] #communication .social-network-card__detail {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 98%, #fff 2%) 0%,
      color-mix(in srgb, var(--bg-card) 92%, var(--accent) 6%) 100%
    );
  }
}

/* Section services — grille de cartes (avant crowdfunding) */
.section--services {
  background: var(--bg);
}

.services-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-card {
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%);
  padding: clamp(1rem, 1.8vw, 1.3rem);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.08);
}

.service-card h3 {
  margin: 0 0 0.55rem;
}

.services-cta-row {
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

html[data-theme="light"] .service-card {
  background: color-mix(in srgb, var(--bg-card) 97%, #111 3%);
}

.section--crowdfunding {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.section--crowdfunding.section--stripe-a {
  background: linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

.section--crowdfunding.section--stripe-b {
  background: linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

.crowdfunding-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .crowdfunding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.crowdfunding-card {
  border: 1px solid color-mix(in srgb, var(--accent-dim) 72%, rgba(255, 255, 255, 0.14) 28%);
  border-radius: var(--radius-md);
  /* Fond opaque : évite backdrop-filter (coût scroll) — rendu proche du mix précédent */
  background: color-mix(in srgb, var(--bg-card) 88%, rgba(255, 255, 255, 0.06) 12%);
  padding: clamp(1rem, 1.8vw, 1.3rem);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.crowdfunding-card:hover {
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.08);
}

.crowdfunding-card h3 {
  margin: 0 0 0.55rem;
}

html[data-theme="light"] .crowdfunding-card {
  background: color-mix(in srgb, var(--bg-card) 94%, rgba(255, 255, 255, 0.06) 6%);
  border-color: color-mix(in srgb, var(--accent-dim) 55%, rgba(0, 0, 0, 0.06) 45%);
}

.crowdfunding-donation {
  --crowdfunding-donate-green: #3ecf8e;
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(0.75rem, 1.8vw, 1rem) clamp(1rem, 2.2vw, 1.35rem);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent-dim) 48%, rgba(255, 255, 255, 0.1) 52%);
  background: color-mix(in srgb, var(--bg-card) 86%, rgba(255, 255, 255, 0.05) 14%);
}

.crowdfunding-donation__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.2rem;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-sub);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.crowdfunding-donation__btn:hover,
.crowdfunding-donation__btn:focus-visible {
  background: color-mix(in srgb, var(--crowdfunding-donate-green) 88%, #062a1c 12%);
  border-color: color-mix(in srgb, var(--crowdfunding-donate-green) 72%, #c8ffe8 28%);
  color: #f4fffa;
  transform: translateY(-1px);
  outline: none;
}

.crowdfunding-donation__btn:focus-visible {
  box-shadow: 0 0 0 4px var(--btn-focus);
}

.crowdfunding-donation__icon {
  display: inline-flex;
  align-items: center;
}

.crowdfunding-donation__note {
  margin: 0;
  font-size: calc(0.74rem * var(--copy-scale));
  font-weight: 500;
  color: color-mix(in srgb, var(--btn-bg) 85%, var(--text) 15%);
  text-align: center;
}

html[data-theme="light"] .crowdfunding-donation__note {
  color: color-mix(in srgb, var(--btn-bg) 88%, #000 12%);
}

html[data-theme="light"] .crowdfunding-donation {
  --crowdfunding-donate-green: #2fb87a;
  background: color-mix(in srgb, var(--bg-card) 64%, rgba(255, 255, 255, 0.46) 36%);
  border-color: color-mix(in srgb, var(--accent-dim) 42%, rgba(0, 0, 0, 0.06) 58%);
}

/* Section Commercify — entre crowdfunding et mécène */
.section--commercify-platform {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
  border-block: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.section--commercify-platform.section--stripe-a {
  background: linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

.section--commercify-platform.section--stripe-b {
  background: linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

.commercify-platform-panel {
  /* Charte Commercify.online (fond #030303, orange #ff6a00 / #ffb870) */
  --cf-online-bg: #030303;
  --cf-online-orange: #ff6a00;
  --cf-online-orange-soft: #ffb870;
  --cf-online-orange-hover: #ffd4a8;
  --cf-online-border: rgba(255, 184, 112, 0.34);
  --cf-online-border-hover: rgba(255, 210, 170, 0.52);
  --cf-online-fill: rgba(255, 106, 0, 0.09);
  --cf-online-fill-hover: rgba(255, 106, 0, 0.2);
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.commercify-platform-panel::before {
  content: none;
}

.commercify-platform-panel .font-h2 {
  position: relative;
  z-index: 1;
}

.commercify-platform-panel__hashtag {
  margin: -0.25rem 0 1.1rem;
  position: relative;
  z-index: 1;
}

.commercify-platform-panel__hashtag-link {
  font-size: calc(0.95rem * var(--copy-scale));
  font-weight: 400;
}

.commercify-platform-panel__hero-wrap {
  max-width: none;
  margin-bottom: 1.35rem;
}

.commercify-platform-panel__hero {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: var(--bg);
  box-shadow: none;
}

.commercify-platform-panel__hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Carrousel mosaïque — section Commercify (flèches et tuiles sous la zone vidéo pilote) */
.commercify-hero-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Une seule slide (bannière i18n) : pas de navigation prev/next */
.commercify-hero-carousel--single .commercify-hero-carousel__btn {
  display: none !important;
}

/* Même emprise que commercifybanner*.jpg (1024×560) : l’image est étirée dans ce cadre */
.commercify-hero-carousel__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1024 / 560;
  overflow: hidden;
  line-height: 0;
}

.commercify-hero-carousel__base.commercify-platform-panel__hero-img,
.commercify-hero-carousel__under.commercify-platform-panel__hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: center;
}

.commercify-hero-carousel__base.commercify-platform-panel__hero-img {
  z-index: 1;
}

.commercify-hero-carousel__under.commercify-platform-panel__hero-img {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.commercify-hero-carousel__mosaic {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.commercify-hero-carousel__mosaic[hidden] {
  display: none;
}

.commercify-hero-carousel__tile {
  position: relative;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 0.32s ease;
}

/* Voile légèrement orangé sur chaque carreau (aligné charte #ff8f1f / #ff6a00) */
.commercify-hero-carousel__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ff8f1f 32%, transparent) 0%,
    color-mix(in srgb, #ff6a00 26%, transparent) 100%
  );
}

.commercify-hero-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(0.2rem, 1.2vw, 0.55rem);
  border: none;
  border-radius: 0;
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6a00 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.35);
  line-height: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.commercify-hero-carousel__btn:hover,
.commercify-hero-carousel__btn:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.42);
  outline: none;
}

.commercify-hero-carousel__btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 143, 31, 0.55), 0 6px 18px rgba(255, 106, 0, 0.42);
}

.commercify-hero-carousel__btn:active {
  transform: translateY(-50%) scale(0.97);
}

.commercify-hero-carousel__btn--prev {
  left: clamp(0.35rem, 2vw, 1rem);
}

.commercify-hero-carousel__btn--next {
  right: clamp(0.35rem, 2vw, 1rem);
}

.commercify-hero-carousel__btn svg {
  display: block;
  width: clamp(2.25rem, 8vw, 4.25rem);
  height: clamp(2.25rem, 8vw, 4.25rem);
}

@media (max-width: 520px) {
  .commercify-hero-carousel__btn svg {
    width: clamp(1.75rem, 10vw, 2.75rem);
    height: clamp(1.75rem, 10vw, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .commercify-hero-carousel__tile {
    transition: none !important;
  }

  .projects-mega-menu__puzzle-tile {
    transition: none !important;
  }

  .commercify-hero-carousel__btn {
    transition: none;
  }
}

/* Zone vidéo : translucide discret (rgba — effet moins flashy) */
.commercify-platform-panel__video-zone {
  position: absolute;
  z-index: 4;
  left: clamp(0.65rem, 2.8vw, 1.15rem);
  top: clamp(0.65rem, 2.8vw, 1.15rem);
  width: auto;
  max-width: min(84%, 28rem);
  min-height: 2.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.58rem 0.95rem;
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6a00 100%);
  border: 1px solid rgba(255, 143, 31, 0.95);
  border-radius: 0;
  color: #fff;
  text-decoration: none;
  font-size: calc(0.9rem * var(--copy-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.commercify-platform-panel__video-zone:hover,
.commercify-platform-panel__video-zone:focus-visible {
  background: linear-gradient(135deg, #ffa43b 0%, #ff7b1a 100%);
  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.35);
  transform: translateY(-1px);
  outline: none;
}

.commercify-platform-panel__video-zone:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 143, 31, 0.5), 0 10px 22px rgba(255, 106, 0, 0.35);
}

.commercify-platform-panel__video-zone-icon {
  flex-shrink: 0;
  opacity: 0.95;
}

.commercify-platform-panel__video-zone-label {
  line-height: 1.2;
  text-align: start;
}

@media (max-width: 520px) {
  .commercify-platform-panel__video-zone {
    left: 0.5rem;
    top: 0.5rem;
    max-width: calc(100% - 1rem);
    font-size: calc(0.78rem * var(--copy-scale));
    padding: 0.5rem 0.7rem;
  }
}

/* Carrousel : le badge pilote YouTube ne s’affiche que sur la 1re slide (voir commercify.js). */
.commercify-platform-panel__video-zone[hidden] {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

.commercify-platform-panel__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.commercify-platform-panel__youtube-call {
  margin-top: 1.1rem;
  padding: clamp(0.95rem, 2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%);
}

.commercify-platform-panel__youtube-call-kicker {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sub);
}

.commercify-platform-panel__youtube-call-title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.commercify-platform-panel__youtube-call-text-span {
  display: block;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-wrap: auto;
}

.commercify-platform-panel__youtube-call-text {
  margin: 0 0 0.9rem;
  max-width: 72ch;
}

.commercify-platform-panel__youtube-call-badge {
  position: relative;
  margin: 0;
  padding: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, #FF0000 94%, transparent), color-mix(in srgb, #FFBA08 100%, transparent 0%));
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px color-mix(in srgb, #FF0000 32%, transparent);
  border: 1px solid color-mix(in srgb, #FF0000 48%, transparent);
}

.youtube-play-badge {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: block;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, #000 24%, transparent));
  animation: youtube-pulse 2.5s ease-in-out infinite;
}

.france-flag-badge {
  width: 44px;
  height: 28px;
  min-width: 44px;
  display: block;
  border-radius: 0.25rem;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, #000 20%, transparent));
  animation: france-wave 3s ease-in-out infinite;
}

@keyframes france-wave {
  0%, 100% { transform: translateX(0) rotate(0deg); opacity: 1; }
  50% { transform: translateX(2px) rotate(1deg); opacity: 0.9; }
}

@keyframes youtube-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

.commercify-platform-panel__youtube-call-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--text-primary) 100%, transparent);
}

.commercify-platform-panel__youtube-call-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
}

/* Cadre visuel autour du canvas (aligné carte YouTube) — le JS et le bitmap restent inchangés. */
.dp-megaphone-crowd__stage {
  flex: 1 1 auto;
  min-width: 140px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--bg) 10%);
  padding: 5px 7px;
  contain: layout paint;
}

.dp-megaphone-crowd__canvas {
  display: block;
  width: 100%;
  height: 92px;
  max-height: 92px;
  margin: 0;
  background: transparent;
  contain: layout paint;
}

@media (max-width: 767px) {
  .dp-megaphone-crowd__stage {
    display: none !important;
  }
}

/*
 * Appel youtubeurs — ligne badge (YouTube + drapeau) + canvas mégaphone :
 * le script place le crieur côté gauche du bitmap et le public à droite (LTR).
 * En RTL, le flex met le badge à inline-start (écran droit) et le canvas à gauche :
 * retourner le canvas aligne le personnage vers le badge sans toucher au JS.
 */
html[dir="rtl"] #dp-youtube-megaphone-stage.dp-megaphone-crowd__canvas {
  transform: scaleX(-1);
  transform-origin: center;
}

.commercify-platform-panel__youtube-call-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .commercify-platform-panel__youtube-call-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.youtube-call-card {
  border: 1px solid var(--accent-dim);
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg) 6%);
  padding: 0.45rem;
}

.youtube-call-card__thumbs {
  display: grid;
  gap: 0.35rem;
}

.youtube-call-card__thumbs--shorts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.youtube-call-card__thumbs--shorts .youtube-call-card__thumb img {
  aspect-ratio: 9 / 16;
}

.youtube-call-card__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.youtube-call-card__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.92;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.youtube-call-card__thumb:hover img,
.youtube-call-card__thumb:focus-visible img {
  transform: scale(1.02);
  opacity: 1;
}

.youtube-call-card__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.youtube-call-card__thumb--local {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: 0;
}

button.youtube-call-card__thumb--local::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.youtube-call-card__thumb--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: default;
}

.youtube-call-card__soon-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 88%, var(--accent) 12%);
}

.youtube-call-card__soon-label--hashtag {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
}

/* Modale — extrait vidéo local (carte 2 appel youtubeurs) */
.youtube-call-local-modal {
  position: fixed;
  inset: 0;
  z-index: 10850;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.youtube-call-local-modal[hidden] {
  display: none !important;
}

.youtube-call-local-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(4px);
}

.youtube-call-local-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(56rem, 100%);
  max-height: min(92vh, 100%);
  overflow: auto;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--bg-card);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
}

.youtube-call-local-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--accent-dim);
}

.youtube-call-local-modal__head--chromeless {
  justify-content: flex-end;
  border-bottom: none;
  padding: 0.45rem 0.55rem;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--text) 6%);
}

.youtube-call-local-modal__title {
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-sub);
  font-weight: 600;
  color: var(--text);
}

.youtube-call-local-modal__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg) 12%);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.youtube-call-local-modal__close:hover,
.youtube-call-local-modal__close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.youtube-call-local-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.youtube-call-local-modal__body {
  padding: 0.75rem;
}

.youtube-call-local-modal__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 100%);
  border-radius: calc(var(--radius-md) - 2px);
  background: #000;
}

.youtube-call-local-modal__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(78vh, 100%);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: #000;
}

.youtube-call-local-modal__body--iframe {
  padding: 0;
}

/* Modale prélude — CTA final home (YouTube) */
#dp-final-cta-prelude-modal.youtube-call-local-modal--prelude .youtube-call-local-modal__dialog {
  width: min(54rem, calc(100vw - 2rem));
  max-height: min(94vh, 100%);
  overflow: hidden;
  border-radius: clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 22%, transparent),
    0 28px 72px rgba(0, 0, 0, 0.55);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 96%, var(--accent) 4%),
    var(--bg-card)
  );
}

#dp-final-cta-prelude-modal.youtube-call-local-modal--prelude .youtube-call-local-modal__head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-strong));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg-elevated) 88%, var(--accent) 6%),
    color-mix(in srgb, var(--bg-card) 92%, var(--accent-2) 5%)
  );
}

#dp-final-cta-prelude-modal.youtube-call-local-modal--prelude .youtube-call-local-modal__title {
  font-size: clamp(0.95rem, 2.1vw, 1.12rem);
  font-weight: 650;
  letter-spacing: 0.02em;
}

#dp-final-cta-prelude-modal.youtube-call-local-modal--prelude .youtube-call-local-modal__iframe {
  border-radius: 0;
  max-height: none;
}

.youtube-call-local-modal.youtube-call-local-modal--prelude-extra .youtube-call-local-modal__dialog {
  width: min(50rem, calc(100vw - 2rem));
  max-height: min(94vh, 100%);
  overflow: hidden;
  border-radius: clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 20%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.52);
  background: var(--bg-card);
}

.youtube-call-local-modal.youtube-call-local-modal--prelude-extra .youtube-call-local-modal__iframe {
  border-radius: 0;
  max-height: none;
}

.youtube-call-card__title {
  margin-top: 0.5rem;
  font-size: 0.83rem;
  font-family: var(--font-sub);
  letter-spacing: 0.02em;
  color: var(--text);
}

.youtube-call-card__hashtag {
  margin-top: 0.35rem;
}

/* Appel youtubeurs — sous chaque vignette : titre d’extrait + hashtag centrés dans le cadre */
#youtubeurs-call .youtube-call-card__title,
#youtubeurs-call .youtube-call-card__hashtag {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#youtubeurs-call .youtube-call-card__hashtag {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.youtube-community-banner {
  margin-top: 1rem;
  max-width: min(44rem, 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 95%, var(--bg) 5%);
  padding: 0.8rem;
}

.youtube-community-banner__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sub);
}

.youtube-community-banner__title {
  margin: 0 0 0.45rem;
  font-size: clamp(0.96rem, 1.8vw, 1.08rem);
}

.youtube-community-banner__desc {
  margin: 0 0 0.65rem;
  max-width: 68ch;
  font-size: calc(0.9rem * var(--copy-scale));
}

.youtube-community-banner__thumb {
  position: relative;
  display: block;
  width: min(100%, 28rem);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--bg);
  overflow: hidden;
}

.youtube-community-banner__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.94;
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.youtube-community-banner__thumb:hover img,
.youtube-community-banner__thumb:focus-visible img {
  transform: scale(1.02);
  opacity: 1;
}

.youtube-community-banner__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.youtube-community-banner__badge {
  position: absolute;
  right: 0.55rem;
  top: 0.55rem;
  padding: 0.22rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 11, 11, 0.82);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.youtube-community-banner__cta {
  margin-top: 0.6rem;
}

.community-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;
}

.community-funding-cta {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 95%, var(--bg) 5%);
  padding: 0.9rem;
}

.community-funding-cta__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sub);
}

.community-funding-cta__title {
  margin: 0 0 0.5rem;
  font-size: clamp(0.98rem, 1.9vw, 1.1rem);
}

.community-funding-cta__text {
  margin: 0 0 0.55rem;
  max-width: 64ch;
  font-size: calc(0.9rem * var(--copy-scale));
}

.community-funding-cta__button {
  margin-top: 0.35rem;
}

/* #communaute — deux vignettes sous la grille : contenus centrés (comme les 4 cartes vidéo) */
#communaute .community-cta-grid .youtube-community-banner,
#communaute .community-cta-grid .community-funding-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#communaute .community-cta-grid .youtube-community-banner__eyebrow,
#communaute .community-cta-grid .youtube-community-banner__title,
#communaute .community-cta-grid .youtube-community-banner__desc,
#communaute .community-cta-grid .community-funding-cta__eyebrow,
#communaute .community-cta-grid .community-funding-cta__title,
#communaute .community-cta-grid .community-funding-cta__text {
  width: 100%;
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

#communaute .community-cta-grid .youtube-community-banner__thumb,
#communaute .community-cta-grid .community-funding-cta__thumb {
  margin-left: auto;
  margin-right: auto;
}

#communaute .community-cta-grid .community-funding-cta__thumb {
  margin-bottom: 0.65rem;
}

#communaute .community-cta-grid .youtube-community-banner__cta,
#communaute .community-cta-grid .community-funding-cta__button {
  align-self: center;
}

@media (min-width: 1100px) {
  .community-cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.15rem;
  }

  .youtube-community-banner,
  .community-funding-cta {
    margin-top: 0;
    height: 100%;
  }
}

/*
 * #communaute — jusqu’à 1199px : les deux cartes (YouTube + co-financement) en pleine largeur.
 * Sans cela, .youtube-community-banner garde max-width 44rem dès 1024px alors que .community-funding-cta
 * s’étire à 100 % → décalage type « 3/4 vs 4/4 » sur tablette large.
 */
@media (max-width: 1199px) {
  #communaute .community-cta-grid > .youtube-community-banner,
  #communaute .community-cta-grid > .community-funding-cta {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  #communaute .youtube-community-banner__thumb,
  #communaute .community-funding-cta__thumb {
    width: 100%;
    max-width: none;
  }
}

/* Grille 2 colonnes (≥1100px global, ≥1200px pour #communaute) : même emprise des deux cartes — pas de plafond 44rem / 28rem sur le seul bloc YouTube */
@media (min-width: 1200px) {
  #communaute .community-cta-grid > .youtube-community-banner {
    max-width: none;
    width: 100%;
  }

  #communaute .community-cta-grid .youtube-community-banner__thumb {
    width: 100%;
    max-width: none;
  }
}

/* Section finale — vision Commercify globale */
.section--commercify-vision {
  border-block: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

.commercify-vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.commercify-vision-video,
.commercify-vision-reasons {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg) 6%);
  padding: clamp(0.9rem, 2vw, 1.2rem);
}

.commercify-vision-video__eyebrow,
.commercify-vision-reasons__eyebrow {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-family: var(--font-sub);
}

.commercify-vision-video__title,
.commercify-vision-reasons__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
}

.commercify-vision-video__thumb {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  overflow: hidden;
  background: var(--bg);
}

.commercify-vision-video__thumb .video-thumb__play {
  z-index: 1;
}

.commercify-vision-video__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.94;
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.commercify-vision-video__thumb:hover img,
.commercify-vision-video__thumb:focus-visible img {
  transform: scale(1.02);
  opacity: 1;
}

.commercify-vision-video__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.commercify-vision-video__cta {
  margin-top: 0.6rem;
}

.commercify-vision-reasons__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  counter-reset: commercify-reason;
}

.commercify-vision-reasons__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  font-size: clamp(calc(0.95rem * var(--copy-scale)), 1.45vw, calc(1.12rem * var(--copy-scale)));
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

.commercify-vision-reasons__list li::before {
  counter-increment: commercify-reason;
  content: counter(commercify-reason);
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-family: var(--font-sub);
  font-weight: 800;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
}

.commercify-vision-reasons__list li > span {
  min-width: 0;
}

@media (min-width: 1100px) {
  .commercify-vision-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 1.15rem;
  }

  .commercify-vision-video,
  .commercify-vision-reasons {
    height: 100%;
  }
}

html[data-theme="light"] .commercify-platform-panel { box-shadow: none; }

/* Section sponsors — grille, ton distinct mais cohérent avec la home */
.section--sponsors-solicit {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border-block: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.section--sponsors-solicit.section--stripe-a {
  background: var(--section-stripe-a);
}

.section--sponsors-solicit.section--stripe-b {
  background: var(--section-stripe-b);
}

/* Quadrillage : calque global .dp-home-grid-fixed (mode clair, desktop), plus de ::before ici */

.sponsors-solicit {
  position: relative;
  z-index: 1;
}

.sponsors-solicit__hashtag {
  margin-top: 0;
}

.crowdfunding-section__hashtag {
  margin-top: 0;
}

.sponsors-solicit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .sponsors-solicit-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 1.15rem;
    align-items: stretch;
  }
}

.sponsors-solicit-grid__cell {
  position: relative;
  padding: clamp(1.1rem, 2.4vw, 1.45rem);
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.1) 62%);
  background: color-mix(in srgb, var(--bg-card) 88%, rgba(255, 255, 255, 0.05) 12%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sponsors-solicit-grid__cell--official {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.08) 72%);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%) 72%, transparent) 0%,
      color-mix(in srgb, var(--bg-card) 58%, transparent) 100%
    );
}

/* Zone don — léger vert (solidarité), sans casser la charte orange / teal */
.sponsors-solicit-grid__cell--donate {
  --sponsors-donate-green: #3ecf8e;
  border-style: solid;
  border-color: color-mix(in srgb, color-mix(in srgb, var(--sponsors-donate-green) 58%, var(--accent) 42%) 78%, rgba(255, 255, 255, 0.12) 22%);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, color-mix(in srgb, var(--bg-card) 82%, var(--sponsors-donate-green) 14%) 72%, var(--accent) 28%) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--bg-card) 90%, var(--sponsors-donate-green) 10%) 64%, transparent) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 18%, transparent);
}

/* Vignette humoristique (pancarte SIOUPLAI) — petite, dans le cadre don */
.sponsors-solicit-grid__donate-thumb {
  float: right;
  width: clamp(4.25rem, 19vw, 6.25rem);
  max-width: 100%;
  margin: 0.1rem 0 0.45rem 0.65rem;
  line-height: 0;
  border-radius: 0.35rem;
  overflow: hidden;
  box-shadow:
    0 1px 5px color-mix(in srgb, var(--bg) 62%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 22%, transparent);
}

.sponsors-solicit-grid__donate-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sponsors-solicit-grid__cell--donate .sponsors-solicit-grid__actions {
  clear: both;
  align-items: flex-start;
}

.sponsors-solicit-grid__cell--donate .sponsors-donate-counter {
  flex: 1 0 100%;
  margin: 0.2rem 0 0;
  padding: 0.5rem 0.45rem 0.4rem;
  text-align: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--sponsors-donate-green) 22%, transparent) 0%,
    color-mix(in srgb, var(--sponsors-donate-green) 8%, transparent) 55%,
    color-mix(in srgb, var(--sponsors-donate-green) 4%, transparent) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 32%, transparent) inset,
    0 4px 18px color-mix(in srgb, var(--sponsors-donate-green) 22%, transparent);
}

.sponsors-solicit-grid__cell--donate .sponsors-donate-counter__value {
  margin: 0;
  font-family: var(--font-matrix-mono);
  font-size: clamp(2.25rem, 6.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, #f4fffb 90%, var(--sponsors-donate-green) 10%);
  text-shadow:
    0 0 32px color-mix(in srgb, var(--sponsors-donate-green) 52%, transparent),
    0 1px 0 color-mix(in srgb, #062a1c 62%, transparent);
}

.sponsors-solicit-grid__cell--donate .sponsors-donate-counter__currency {
  font-size: 0.52em;
  font-weight: 600;
  opacity: 0.92;
  margin-inline-start: 0.06em;
  vertical-align: 0.12em;
}

.sponsors-solicit-grid__cell--donate .sponsors-donate-counter__label {
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.35;
  color: color-mix(in srgb, var(--sponsors-donate-green) 48%, var(--text-secondary) 52%);
}

.sponsors-solicit-grid__cell--cta {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%) 62%, transparent) 0%,
      color-mix(in srgb, var(--bg-card) 56%, transparent) 100%
    );
}

/* Repli texte sponsors — scoped, style distinct du hub social (#communication) */
#sponsors-premiers .sponsors-solicit-reveal__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  margin-block-end: 0.85rem;
}

#sponsors-premiers .sponsors-solicit-reveal__shell {
  position: relative;
  padding: clamp(0.65rem, 1.6vw, 0.85rem) clamp(0.75rem, 1.8vw, 1rem);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset,
    0 2px 14px color-mix(in srgb, var(--accent) 8%, transparent);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

#sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-reveal__shell {
  border-color: color-mix(in srgb, var(--sponsors-donate-green) 42%, var(--accent) 28%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 14%, transparent) inset,
    0 2px 16px color-mix(in srgb, var(--sponsors-donate-green) 10%, transparent);
}

#sponsors-premiers .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="0"] {
  max-height: 7.85em;
  overflow: hidden;
}

#sponsors-premiers .sponsors-solicit-grid__cell--cta .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="0"] {
  max-height: 11.25em;
}

#sponsors-premiers .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="0"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2.1rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--bg-card) 88%, var(--bg) 12%)
  );
}

#sponsors-premiers .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="1"] {
  max-height: none;
  overflow: visible;
}

#sponsors-premiers .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="1"]::after {
  opacity: 0;
}

#sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="0"] .sponsors-solicit-reveal__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

#sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="1"] .sponsors-solicit-reveal__text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#sponsors-premiers .sponsors-solicit-reveal__shell > .sponsors-solicit-grid__text {
  margin-block-end: 0;
}

#sponsors-premiers .sponsors-solicit-reveal__body .sponsors-solicit-grid__text {
  margin-block-end: 0.65rem;
}

#sponsors-premiers .sponsors-solicit-reveal__body .sponsors-solicit-grid__text:last-child {
  margin-block-end: 0;
}

#sponsors-premiers .sponsors-solicit-reveal__toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 2.85rem;
  min-height: 2.5rem;
  margin-inline: auto;
  margin-block: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sub);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-2) 55%, var(--text) 45%);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--fg) 6%, var(--bg-card) 94%) 0%,
      color-mix(in srgb, var(--accent) 8%, var(--bg-card) 92%) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset,
    0 3px 18px color-mix(in srgb, var(--accent) 14%, transparent);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

#sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-reveal__toggle {
  color: color-mix(in srgb, var(--sponsors-donate-green) 62%, var(--text) 38%);
  border-color: color-mix(in srgb, var(--sponsors-donate-green) 48%, var(--accent) 22%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sponsors-donate-green) 10%, var(--bg-card) 90%) 0%,
      color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 18%, transparent) inset,
    0 3px 16px color-mix(in srgb, var(--sponsors-donate-green) 12%, transparent);
}

#sponsors-premiers .sponsors-solicit-reveal__toggle:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) inset,
    0 5px 22px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}

#sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-reveal__toggle:hover {
  border-color: color-mix(in srgb, var(--sponsors-donate-green) 62%, var(--accent) 18%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 26%, transparent) inset,
    0 5px 22px color-mix(in srgb, var(--sponsors-donate-green) 18%, transparent);
}

#sponsors-premiers .sponsors-solicit-reveal__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#sponsors-premiers .sponsors-solicit-reveal__toggle__chev {
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  margin-inline: 0;
  pointer-events: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease, margin-block-start 0.22s ease;
}

#sponsors-premiers .sponsors-solicit-reveal__toggle[aria-expanded="true"] .sponsors-solicit-reveal__toggle__chev {
  margin-block-start: 0.1rem;
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  #sponsors-premiers .sponsors-solicit-reveal__shell,
  #sponsors-premiers .sponsors-solicit-reveal__toggle,
  #sponsors-premiers .sponsors-solicit-reveal__toggle__chev {
    transition: none;
  }

  #sponsors-premiers .sponsors-solicit-reveal__toggle:hover {
    transform: none;
  }
}

html[data-theme="light"] #sponsors-premiers .sponsors-solicit-reveal__shell {
  background: color-mix(in srgb, var(--bg-card) 82%, rgba(255, 255, 255, 0.35) 18%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06) inset,
    0 2px 12px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] #sponsors-premiers .sponsors-solicit-reveal__shell[data-dp-tagline-expanded="0"]::after {
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--bg-card) 85%, rgba(255, 255, 255, 0.4) 15%)
  );
}

html[data-theme="light"] #sponsors-premiers .sponsors-solicit-reveal__toggle {
  background: color-mix(in srgb, var(--bg-card) 94%, rgba(255, 255, 255, 0.5) 6%);
  color: color-mix(in srgb, var(--accent) 58%, var(--text-secondary) 42%);
}

.sponsors-solicit-grid__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 82%, var(--text) 18%);
}

.sponsors-solicit-grid__text {
  margin: 0 0 1rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

.sponsors-solicit-grid__cell--official .sponsors-solicit-grid__text:last-child,
.sponsors-solicit-grid__cell--donate .sponsors-solicit-grid__text:last-child {
  margin-bottom: 0;
}

.sponsors-solicit-grid__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.sponsors-solicit-grid__actions--cta {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.sponsors-solicit-cta__project-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
  padding: 0.12rem 0;
  font-family: var(--font-sub);
  font-size: calc(0.8rem * var(--copy-scale));
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.38;
  color: color-mix(in srgb, var(--accent) 76%, var(--text-secondary) 24%);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 36%, var(--accent) 34%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sponsors-solicit-cta__project-link:hover,
.sponsors-solicit-cta__project-link:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
  outline: none;
}

html[data-theme="light"] .sponsors-solicit-cta__project-link {
  color: color-mix(in srgb, var(--accent) 68%, var(--text-secondary) 32%);
  border-bottom-color: color-mix(in srgb, var(--accent) 32%, rgba(0, 0, 0, 0.12) 68%);
}

html[data-theme="light"] .sponsors-solicit-cta__project-link:hover,
html[data-theme="light"] .sponsors-solicit-cta__project-link:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

html[data-theme="light"] .sponsors-solicit-grid__cell {
  background: color-mix(in srgb, var(--bg-card) 72%, rgba(255, 255, 255, 0.55) 28%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

html[data-theme="light"] .sponsors-solicit-grid__cell--official {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-card) 74%, var(--accent) 10%) 0%,
    color-mix(in srgb, var(--bg-card) 70%, rgba(255, 255, 255, 0.45) 30%) 100%
  );
}

html[data-theme="light"] .sponsors-solicit-grid__cell--donate {
  --sponsors-donate-green: #2fb87a;
  background: linear-gradient(
    145deg,
    color-mix(
        in srgb,
        color-mix(in srgb, var(--bg-card) 76%, var(--sponsors-donate-green) 18%) 86%,
        rgba(255, 255, 255, 0.32) 14%
      )
      0%,
    color-mix(in srgb, var(--bg-card) 72%, rgba(255, 255, 255, 0.5) 28%) 100%
  );
  border-color: color-mix(in srgb, var(--sponsors-donate-green) 38%, var(--accent) 22%);
}

html[data-theme="light"] .sponsors-solicit-grid__cell--donate .sponsors-donate-counter {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--sponsors-donate-green) 16%, rgba(255, 255, 255, 0.35) 84%) 0%,
    color-mix(in srgb, var(--sponsors-donate-green) 7%, rgba(255, 255, 255, 0.2) 93%) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 22%, transparent) inset,
    0 3px 14px color-mix(in srgb, var(--sponsors-donate-green) 12%, transparent);
}

html[data-theme="light"] .sponsors-solicit-grid__cell--donate .sponsors-donate-counter__value {
  color: color-mix(in srgb, #0c3d28 82%, var(--sponsors-donate-green) 18%);
  text-shadow: 0 0 18px color-mix(in srgb, var(--sponsors-donate-green) 28%, transparent);
}

html[data-theme="light"] .sponsors-solicit-grid__cell--donate .sponsors-donate-counter__label {
  color: color-mix(in srgb, var(--sponsors-donate-green) 58%, var(--text-secondary) 42%);
}

html[data-theme="light"] .sponsors-solicit-grid__cell--cta {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 78%, rgba(255, 255, 255, 0.4) 22%) 0%,
    color-mix(in srgb, var(--bg-card) 74%, rgba(255, 255, 255, 0.45) 26%) 100%
  );
}

@media (prefers-reduced-transparency: reduce) {
  .crowdfunding-card,
  .crowdfunding-donation,
  .sponsors-solicit-grid__cell {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Section mécène — titre aligné au container comme les autres sections ; pas de carte autour du bloc */
.section--patron {
  position: relative;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elevated) 94%, var(--accent) 6%) 0%,
      var(--bg) 42%,
      var(--bg) 100%
    );
}

.section--patron.section--stripe-a {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-b) 94%, var(--accent) 6%) 0%,
      var(--section-stripe-a) 42%,
      var(--section-stripe-a) 100%
    );
}

.section--patron.section--stripe-b {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-a) 94%, var(--accent) 6%) 0%,
      var(--section-stripe-b) 42%,
      var(--section-stripe-b) 100%
    );
}

.section--patron::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 12% 45%, rgba(255, 106, 0, 0.16), transparent 58%),
    radial-gradient(ellipse 55% 48% at 96% 22%, rgba(255, 143, 31, 0.1), transparent 55%);
  pointer-events: none;
}

.section--patron .container {
  position: relative;
  z-index: 1;
}

.patron-panel {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.patron-panel__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.patron-panel__lead {
  max-width: none;
  line-height: 1.65;
}

.patron-panel__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.patron-panel__list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--text-secondary);
  font-size: clamp(calc(0.9rem * var(--copy-scale)), 1.2vw, calc(0.98rem * var(--copy-scale)));
  line-height: 1.5;
}

.patron-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
  background: linear-gradient(135deg, #ffb347, #ff5f00);
  box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.2);
}

.patron-panel__visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 12rem;
}

.patron-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 11.5rem;
  padding: 0.25rem 0 0.5rem;
}

.patron-timeline__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.patron-timeline__star {
  width: 3.5rem;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(255, 106, 0, 0.28));
}

.patron-timeline__hint {
  margin: 0.35rem 0 0.5rem;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-sub);
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 88%, var(--text-secondary) 12%);
}

.patron-personas {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.patron-personas::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 1.25rem;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 0%,
    color-mix(in srgb, var(--accent) 22%, transparent) 45%,
    color-mix(in srgb, var(--text-secondary) 25%, transparent) 100%
  );
  border-radius: 2px;
  pointer-events: none;
}

.patron-persona {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.4rem 0 0.55rem;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.patron-persona__avatar {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 6px 16px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    background 0.2s ease;
}

.patron-persona__silhouette {
  width: 68%;
  height: auto;
  display: block;
}

.patron-persona__silhouette--muted {
  color: color-mix(in srgb, var(--text-secondary) 72%, var(--accent) 28%);
  opacity: 0.92;
}

.patron-persona__name {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-sub);
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text);
}

.patron-persona__role {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.12rem;
}

.patron-persona__anon {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
  margin-top: 0.28rem;
  max-width: 9rem;
  line-height: 1.25;
}

.patron-persona--featured .patron-persona__avatar {
  width: 3rem;
  height: 3rem;
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 180, 80, 0.15) inset,
    0 0 24px color-mix(in srgb, var(--accent) 28%, transparent);
}

.patron-persona--featured:hover .patron-persona__avatar {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--accent) 85%, #fff 15%);
  box-shadow:
    0 0 0 1px rgba(255, 200, 120, 0.2) inset,
    0 0 32px color-mix(in srgb, var(--accent) 38%, transparent);
}

.patron-persona--anon:hover .patron-persona__avatar {
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--bg-card) 82%, var(--accent) 18%);
}

.patron-persona--anon:hover,
.patron-persona--featured:hover {
  transform: translateY(-1px);
}

.patron-timeline__foot {
  margin-top: -0.15rem;
  opacity: 0.85;
}

.patron-panel__cta {
  margin-top: 0.25rem;
}

.mecene-youtube-banner {
  position: relative;
  margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
  padding: clamp(0.95rem, 2vw, 1.2rem);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%) 0%,
    color-mix(in srgb, var(--bg-elevated) 94%, var(--bg) 6%) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.mecene-youtube-banner__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-sub);
  font-weight: 700;
}

.mecene-youtube-banner__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.02rem, 2.2vw, 1.25rem);
  line-height: 1.3;
}

.mecene-youtube-banner__desc {
  margin: 0 0 0.9rem;
  max-width: 62ch;
}

.mecene-youtube-banner__thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  background: var(--bg);
}

.mecene-youtube-banner__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.92;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.mecene-youtube-banner__thumb:hover img,
.mecene-youtube-banner__thumb:focus-visible img {
  transform: scale(1.02);
  opacity: 1;
}

.mecene-youtube-banner__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mecene-youtube-banner__badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(10, 10, 10, 0.76);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mecene-youtube-banner__cta {
  margin-top: 0.8rem;
}

@media (min-width: 900px) {
  .patron-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 12.75rem);
  }

  .patron-panel__visual {
    min-height: auto;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    border-left: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    padding-left: clamp(1rem, 2vw, 1.35rem);
    margin-left: clamp(0.35rem, 1.2vw, 0.75rem);
  }
}

html[data-theme="light"] .section--patron {
  border-block-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elevated) 97%, var(--accent) 3%) 0%,
      var(--bg) 50%,
      var(--bg) 100%
    );
}

html[data-theme="light"] .section--patron.section--stripe-a {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-b) 97%, var(--accent) 3%) 0%,
      var(--section-stripe-a) 50%,
      var(--section-stripe-a) 100%
    );
}

html[data-theme="light"] .section--patron.section--stripe-b {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-a) 97%, var(--accent) 3%) 0%,
      var(--section-stripe-b) 50%,
      var(--section-stripe-b) 100%
    );
}

html[data-theme="light"] .section--patron::before {
  opacity: 0.9;
}

.section__title-underline {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  text-wrap: wrap;
}

.section__title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 3px;
  background: var(--accent);
  opacity: 0.9;
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.card:hover {
  border-color: var(--accent-hover);
  box-shadow: 0 8px 32px rgba(255, 106, 0, 0.08);
  transform: translateY(-2px);
}

.card--flip {
  position: relative;
  min-height: 280px;
  padding: 0;
  overflow: hidden;
  perspective: 1200px;
}

/* Projets non actifs : grisés, léger flou, en retrait, sans interaction */
.grid-projects > .card--flip:not(.card--inactive) {
  position: relative;
  z-index: 1;
}

.card--flip.card--inactive {
  position: relative;
  z-index: 1;
  pointer-events: none;
  /* Pas d’opacity sur la racine : sinon l’ondulation fixed de la section se lit à travers la vignette.
   * Pas de blur : filter blur sur carte = surcoût GPU au scroll (grayscale + brightness suffisent). */
  filter: grayscale(0.9) brightness(0.74);
  transform: scale(0.98);
}

.card.card--flip.card--inactive:hover {
  border-color: color-mix(in srgb, var(--accent-dim) 60%, #777 40%);
  box-shadow: none;
  transform: scale(0.98);
}

/* Badge informatif discret centré : texte i18n via .card__inactive-badge (data-* + script.js). */
.card--flip.card--inactive .card__inactive-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-family: var(--font-sub);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(248, 236, 224, 0.9);
  background: rgba(12, 12, 12, 0.72);
  border: 1px solid rgba(255, 106, 0, 0.46);
  border-radius: 999px;
  padding: 0.24rem 0.46rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.card--flip.card--inactive:hover .card-flip__inner,
.card--flip.card--inactive:focus-within .card-flip__inner {
  transform: none !important;
}

/* Préparation / à l’étude / abandonnés (hub + home #suspended) : vignette statique, pas de flip ni effet hover. */
.card--flip.card--no-flip .card-flip__inner {
  transition: none;
}

.card--flip.card--no-flip:hover .card-flip__inner,
.card--flip.card--no-flip:focus-within .card-flip__inner {
  transform: none !important;
}

.card.card--flip.card--no-flip:hover {
  transform: none;
  border-color: var(--accent-dim);
  box-shadow: none;
}

.card.card--flip.card--no-flip.card--inactive:hover {
  border-color: color-mix(in srgb, var(--accent-dim) 60%, #777 40%);
  box-shadow: none;
  transform: scale(0.98);
}

/* Hub annuaire `/prj/` — titres de bande : parité avec le h1 hero (font-h2). */
body.page-projects .projects-hub-band__head {
  max-width: none;
}

body.page-projects .projects-hub-band--pending {
  margin-top: var(--space-lg, 2rem);
  padding-top: var(--space-lg, 2rem);
  border-top: 1px solid rgba(255, 106, 0, 0.18);
}

/* Hub `/prj/` — bande « en préparation » : panneau chantier rétro (parité cartes pending featured). */
@media (min-width: 768px) {
  body.page-projects #projets-grid-pending > .card--pending-construction {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.page-projects #projets-grid-pending > .card--pending-construction {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  body.page-projects #projets-grid-pending > .card--pending-construction {
    grid-column: span 2;
  }
}

body.page-projects #projets-grid-pending > .card--pending-construction.card--featured {
  filter: none;
  opacity: 1;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 30%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.14);
}

body.page-projects .projects-hub-pending-construction {
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border-radius: inherit;
  border: none;
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, #fbbf24 14%, transparent),
      color-mix(in srgb, #fbbf24 14%, transparent) 12px,
      color-mix(in srgb, #1c1917 8%, transparent) 12px,
      color-mix(in srgb, #1c1917 8%, transparent) 24px
    ),
    color-mix(in srgb, var(--surface-2, #141820) 92%, #78350f 8%);
  text-align: start;
}

body.page-projects .projects-hub-pending-construction__scene {
  position: relative;
  max-width: 100%;
  margin-inline: 0;
}

body.page-projects .projects-hub-pending-construction__sign-overlay {
  position: absolute;
  inset-inline-start: 35.6%;
  top: 31.5%;
  width: 23%;
  margin: 0;
  padding: 0 0.25rem;
  text-align: center;
  font-family: "Syne", "Arial Black", sans-serif;
  font-size: clamp(0.58rem, 1.35cqi, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: #1c1917;
  text-transform: uppercase;
  pointer-events: none;
}
body.page-projects .projects-hub-pending-construction__svg {
  display: block;
  width: 100%;
  height: auto;
}
body.page-projects .projects-hub-pending-construction__sky {
  fill: color-mix(in srgb, #38bdf8 18%, var(--bg));
}
body.page-projects .projects-hub-pending-construction__ground {
  fill: color-mix(in srgb, #92400e 55%, #451a03);
}
body.page-projects .projects-hub-pending-construction__cone {
  fill: #f97316;
}
body.page-projects .projects-hub-pending-construction__cone-stripe {
  fill: #fff;
}
body.page-projects .projects-hub-pending-construction__barrier-rail {
  fill: #57534e;
}
body.page-projects .projects-hub-pending-construction__barrier-board {
  fill: #eab308;
  stroke: #1c1917;
  stroke-width: 1;
}
body.page-projects .projects-hub-pending-construction__post {
  fill: #78716c;
}
body.page-projects .projects-hub-pending-construction__sign-board {
  fill: #fef08a;
  stroke: #ca8a04;
  stroke-width: 3;
}

body.page-projects .projects-hub-pending-construction__soon {
  color: var(--text);
  letter-spacing: 0.04em;
  text-align: start;
}

body.page-projects .projects-hub-pending-construction__lead {
  max-width: 36rem;
  margin-inline: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  text-align: start;
}
body.page-projects .projects-hub-pending-construction__shadow {
  fill: color-mix(in srgb, #000 35%, transparent);
}
body.page-projects .projects-hub-pending-construction__head {
  fill: #fcd34d;
}
body.page-projects .projects-hub-pending-construction__helmet {
  fill: #facc15;
  stroke: #ca8a04;
  stroke-width: 1.5;
}
body.page-projects .projects-hub-pending-construction__torso,
body.page-projects .projects-hub-pending-construction__arm,
body.page-projects .projects-hub-pending-construction__leg {
  fill: #2563eb;
}
body.page-projects .projects-hub-pending-construction__tool-handle {
  fill: #a16207;
}
body.page-projects .projects-hub-pending-construction__tool-blade {
  fill: #94a3b8;
}
body.page-projects .projects-hub-pending-construction__rake-head,
body.page-projects .projects-hub-pending-construction__rake-teeth {
  stroke: #94a3b8;
  stroke-width: 2;
}
@media (prefers-reduced-motion: no-preference) {
  body.page-projects .projects-hub-pending-construction__sign-post {
    animation: dp-pending-construction-bob 2.8s ease-in-out infinite;
    transform-origin: 302px 210px;
  }
  body.page-projects .projects-hub-pending-construction__worker {
    animation: dp-pending-construction-bob 3.2s ease-in-out infinite;
    transform-origin: 418px 210px;
  }
}
@keyframes dp-pending-construction-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
html[data-theme="light"] body.page-projects .projects-hub-pending-construction {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, #fbbf24 22%, #fff),
      color-mix(in srgb, #fbbf24 22%, #fff) 12px,
      color-mix(in srgb, #fef3c7 90%, #fff) 12px,
      color-mix(in srgb, #fef3c7 90%, #fff) 24px
    );
  border-color: color-mix(in srgb, #ea580c 50%, #d6d3d1);
}
body.page-projects .projects-hub-band--in-progress {
  margin-top: var(--space-lg, 2rem);
  padding-top: var(--space-lg, 2rem);
  border-top: 1px solid rgba(255, 106, 0, 0.28);
}
body.page-projects .projects-hub-band--study {
  margin-top: var(--space-lg, 2rem);
  padding-top: var(--space-lg, 2rem);
  border-top: 1px solid rgba(96, 165, 250, 0.22);
}
body.page-projects .projects-hub-band--abandoned {
  margin-top: var(--space-lg, 2rem);
  padding-top: var(--space-lg, 2rem);
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

/* Page projets `/prj/` — parité typographique accueil (sans modifier page-home) */
body.page-projects {
  --font-h: var(--font-matrix-display);
  --font-sub: "Syne", "Inter Local", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", "Inter Local", ui-sans-serif, system-ui, sans-serif;
  --font-matrix-mono: "Share Tech Mono", ui-monospace, monospace;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 92% 52% at 100% -8%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 56%),
    radial-gradient(ellipse 78% 48% at -8% 102%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 54%);
}

body.page-projects .page-projects-hub .section h1.font-h2,
body.page-projects .page-projects-hub .section h2.font-h2 {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: var(--tracking-tight-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.12;
  display: block;
}

body.page-projects .page-projects-hub .section h1.font-h2 > span,
body.page-projects .page-projects-hub .section h2.font-h2 > span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-wrap: wrap;
  box-sizing: border-box;
}

body.page-projects .page-projects-hub__hero h1.font-h2,
body.page-projects .page-projects-hub .projects-hub-band__head h2.font-h2 {
  position: relative;
  padding-bottom: 0.4rem;
  font-size: clamp(1.95rem, 3.1vw + 0.95rem, 2.92rem);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 1px 24px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
}

body.page-projects .page-projects-hub__hero h1.font-h2::after,
body.page-projects .page-projects-hub .projects-hub-band__head h2.font-h2::after {
  content: "";
  display: block;
  width: min(10rem, 48%);
  height: 3px;
  margin-top: 0.58rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent-2) 48%, var(--accent) 52%) 100%
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2-dim) 68%, transparent);
}

html[data-theme="light"] body.page-projects .page-projects-hub__hero h1.font-h2,
html[data-theme="light"] body.page-projects .page-projects-hub .projects-hub-band__head h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  body.page-projects .page-projects-hub__hero h1.font-h2::after,
  body.page-projects .page-projects-hub .projects-hub-band__head h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-projects .page-projects-hub .section:not(.page-projects-hub__hero) p {
  font-weight: 400;
  letter-spacing: var(--tracking-body-copy);
}

/* Fiches projet `/prj/<slug>/` — parité typographique accueil (réf. `body.page-home`) */
:is(
  body.page-promptdemerde,
  body.page-transcriptit,
  body.page-webterminal,
  body.page-poulpyinfopc,
  body.page-poulpyinfoproduit,
  body.page-mytubeland,
  body.page-commercify,
  body.page-genericvoice
) {
  --font-h: var(--font-matrix-display);
  --font-sub: "Syne", "Inter Local", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", "Inter Local", ui-sans-serif, system-ui, sans-serif;
}

:is(
  body.page-promptdemerde .page-promptdemerde,
  body.page-transcriptit .page-transcriptit,
  body.page-webterminal .page-webterminal,
  body.page-poulpyinfopc .page-poulpyinfopc,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit,
  body.page-mytubeland .page-mytubeland,
  body.page-commercify .page-commercify,
  body.page-genericvoice .page-genericvoice--immersive
) .section h2.font-h2 {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: var(--tracking-tight-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.12;
  display: block;
}

:is(
  body.page-promptdemerde .page-promptdemerde,
  body.page-transcriptit .page-transcriptit,
  body.page-webterminal .page-webterminal,
  body.page-poulpyinfopc .page-poulpyinfopc,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit,
  body.page-mytubeland .page-mytubeland,
  body.page-commercify .page-commercify,
  body.page-genericvoice .page-genericvoice--immersive
) .section h2.font-h2 > span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-wrap: wrap;
  box-sizing: border-box;
}

:is(
  body.page-promptdemerde .page-promptdemerde,
  body.page-transcriptit .page-transcriptit,
  body.page-webterminal .page-webterminal,
  body.page-poulpyinfopc .page-poulpyinfopc,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit,
  body.page-commercify .page-commercify
) .section:not([class*="__hero"]) p,
:is(
  body.page-promptdemerde .page-promptdemerde,
  body.page-transcriptit .page-transcriptit,
  body.page-webterminal .page-webterminal,
  body.page-poulpyinfopc .page-poulpyinfopc,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit,
  body.page-commercify .page-commercify
) .section:not([class*="__hero"]) .text-secondary {
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: 400;
  letter-spacing: var(--tracking-body-copy);
}

:is(
  body.page-promptdemerde .page-promptdemerde,
  body.page-transcriptit .page-transcriptit,
  body.page-webterminal .page-webterminal,
  body.page-poulpyinfopc .page-poulpyinfopc,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit,
  body.page-mytubeland .page-mytubeland,
  body.page-commercify .page-commercify,
  body.page-genericvoice .page-genericvoice--immersive
) .section .font-h3 {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: -0.02em;
}

:is(
  body.page-promptdemerde .page-promptdemerde__hero-title,
  body.page-transcriptit .page-transcriptit__hero-title,
  body.page-webterminal .page-webterminal__hero-title,
  body.page-poulpyinfopc .page-poulpyinfopc__hero-title,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-title,
  body.page-mytubeland .page-mytubeland__hero-title
) {
  font-family: var(--font-matrix-display);
  font-weight: 400;
  font-size: clamp(2.35rem, 4.2vw + 1.2rem, 5.35rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
}

:is(
  body.page-promptdemerde .page-promptdemerde__hero-lead,
  body.page-transcriptit .page-transcriptit__hero-lead,
  body.page-webterminal .page-webterminal__hero-lead,
  body.page-poulpyinfopc .page-poulpyinfopc__hero-lead,
  body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-lead,
  body.page-mytubeland .page-mytubeland__hero-lead
) {
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: 400;
  letter-spacing: var(--tracking-body-copy);
}

body.page-commercify .page-commercify__h1-block {
  font-family: var(--font-matrix-display);
  font-weight: 400;
  font-size: clamp(2.35rem, 4.2vw + 1.2rem, 5.35rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
}

body.page-projects .page-projects-hub__hero {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

body.page-projects .page-projects-hub__hero-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hashtag-link,
body.page-projects .page-projects-hub__hero-kicker .page-projects-hub__hashtag-link,
body.page-projects .page-projects-hub__hero-portfolio-link,
body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hero-inline-link,
body.page-projects .home-hashtags-row .card__hashtag-link {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  word-break: normal;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 106, 0, 0.35);
  transition: color 0.2s, border-color 0.2s;
}

body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hashtag-link:hover,
body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hashtag-link:focus-visible,
body.page-projects .page-projects-hub__hero-kicker .page-projects-hub__hashtag-link:hover,
body.page-projects .page-projects-hub__hero-kicker .page-projects-hub__hashtag-link:focus-visible,
body.page-projects .page-projects-hub__hero-portfolio-link:hover,
body.page-projects .page-projects-hub__hero-portfolio-link:focus-visible,
body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hero-inline-link:hover,
body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hero-inline-link:focus-visible,
body.page-projects .home-hashtags-row .card__hashtag-link:hover,
body.page-projects .home-hashtags-row .card__hashtag-link:focus-visible {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-hover);
}

body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hashtag-link .dp-hashtag,
body.page-projects .page-projects-hub__hero-kicker .page-projects-hub__hashtag-link .dp-hashtag,
body.page-projects .page-projects-hub__hero-portfolio-link .dp-hashtag,
body.page-projects .home-hashtags-row .card__hashtag-link .dp-hashtag {
  display: inline;
  font: inherit;
  color: inherit;
}

body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hashtag-link .dp-hashtag__hash,
body.page-projects .page-projects-hub__hero-lead .page-projects-hub__hashtag-link .dp-hashtag__term,
body.page-projects .page-projects-hub__hero-kicker .page-projects-hub__hashtag-link .dp-hashtag__hash,
body.page-projects .page-projects-hub__hero-kicker .page-projects-hub__hashtag-link .dp-hashtag__term {
  display: inline;
}

body.page-projects .page-projects-hub__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

body.page-projects .page-projects-hub__cta .projects-cta__hub {
  margin-top: 1rem;
  text-align: center;
}

body.page-projects .page-projects-hub__cta .projects-cta__hub-link,
body.page-webterminal .page-webterminal__cta .projects-cta__hub-link,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link,
body.page-genericvoice .gv-final-cta .projects-cta__hub-link,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link,
body.page-rs-github .page-rs-github__cta .projects-cta__hub-link,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  padding: 0.52rem 1rem 0.52rem 1.08rem;
  font-weight: 650;
  font-size: clamp(0.86rem, 1.35vw, 0.95rem);
  letter-spacing: 0.028em;
  line-height: 1.35;
  text-decoration: none;
  color: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
  background: linear-gradient(
    148deg,
    color-mix(in srgb, var(--bg-elevated) 90%, var(--accent) 10%) 0%,
    color-mix(in srgb, var(--bg) 93%, var(--accent) 7%) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-sm);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 11%, transparent),
    0 2px 14px color-mix(in srgb, var(--accent-2) 14%, transparent);
  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s var(--ease-choreography, ease);
}

body.page-projects .page-projects-hub__cta .projects-cta__hub-link::after,
body.page-webterminal .page-webterminal__cta .projects-cta__hub-link::after,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link::after,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link::after,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link::after,
body.page-genericvoice .gv-final-cta .projects-cta__hub-link::after,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link::after,
body.page-rs-github .page-rs-github__cta .projects-cta__hub-link::after,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link::after {
  content: "\2192";
  flex-shrink: 0;
  font-size: 0.92em;
  font-weight: 600;
  opacity: 0.7;
  transition:
    transform 0.22s var(--ease-choreography, ease),
    opacity 0.22s ease;
}

body.page-projects .page-projects-hub__cta .projects-cta__hub-link:hover,
body.page-projects .page-projects-hub__cta .projects-cta__hub-link:focus-visible,
body.page-webterminal .page-webterminal__cta .projects-cta__hub-link:hover,
body.page-webterminal .page-webterminal__cta .projects-cta__hub-link:focus-visible,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link:hover,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link:focus-visible,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link:hover,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link:focus-visible,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link:hover,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link:focus-visible,
body.page-genericvoice .gv-final-cta .projects-cta__hub-link:hover,
body.page-genericvoice .gv-final-cta .projects-cta__hub-link:focus-visible,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link:hover,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link:focus-visible,
body.page-rs-github .page-rs-github__cta .projects-cta__hub-link:hover,
body.page-rs-github .page-rs-github__cta .projects-cta__hub-link:focus-visible,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link:hover,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link:focus-visible {
  color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent),
    0 4px 22px color-mix(in srgb, var(--accent-2) 26%, transparent);
}

body.page-projects .page-projects-hub__cta .projects-cta__hub-link:hover::after,
body.page-projects .page-projects-hub__cta .projects-cta__hub-link:focus-visible::after,
body.page-webterminal .page-webterminal__cta .projects-cta__hub-link:hover::after,
body.page-webterminal .page-webterminal__cta .projects-cta__hub-link:focus-visible::after,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link:hover::after,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link:focus-visible::after,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link:hover::after,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link:focus-visible::after,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link:hover::after,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link:focus-visible::after,
body.page-genericvoice .gv-final-cta .projects-cta__hub-link:hover::after,
body.page-genericvoice .gv-final-cta .projects-cta__hub-link:focus-visible::after,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link:hover::after,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link:focus-visible::after,
body.page-rs-github .page-rs-github__cta .projects-cta__hub-link:hover::after,
body.page-rs-github .page-rs-github__cta .projects-cta__hub-link:focus-visible::after,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link:hover::after,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link:focus-visible::after {
  transform: translateX(0.2em);
  opacity: 1;
}

html[dir="rtl"] body.page-projects .page-projects-hub__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-webterminal .page-webterminal__cta .projects-cta__hub-link::after,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link::after,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link::after,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-genericvoice .gv-final-cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-rs-github .page-rs-github__cta .projects-cta__hub-link::after,
html[dir="rtl"] body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link::after {
  content: "\2190";
}

html[dir="rtl"] body.page-projects .page-projects-hub__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-projects .page-projects-hub__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-webterminal .page-webterminal__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-webterminal .page-webterminal__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-transcriptit .page-transcriptit__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-genericvoice .gv-final-cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-genericvoice .gv-final-cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-rs-github .page-rs-github__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-rs-github .page-rs-github__cta .projects-cta__hub-link:focus-visible::after,
html[dir="rtl"] body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link:hover::after,
html[dir="rtl"] body.page-rs-discord .page-rs-discord__cta .projects-cta__hub-link:focus-visible::after {
  transform: translateX(-0.2em);
}

body.page-webterminal .page-webterminal__cta .projects-cta__hub,
body.page-poulpyinfopc .page-poulpyinfopc__cta .projects-cta__hub,
body.page-poulpyinfoproduit .page-poulpyinfoproduit__cta .projects-cta__hub,
body.page-transcriptit .page-transcriptit__cta .projects-cta__hub,
body.page-genericvoice .gv-final-cta .projects-cta__hub,
body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub,
body.page-rs-github .page-rs-github__cta .projects-cta__hub,
body.page-rs-discord .page-rs-discord__cta .projects-cta__hub {
  margin-top: 1rem;
  text-align: center;
}

/*
 * Bande « projets ouverts & publiés » (`#projets-grid-open`) — vignettes actives :
 * pas de grisé / pointer-events (réservés à `.card--flip.card--inactive`).
 */
body.page-projects #projets-grid-open > .card.card--featured,
body.page-home #projets-grid > .card.card--featured {
  filter: none;
  opacity: 1;
  pointer-events: auto;
}

body.page-projects #projets-grid-open > .card.card--featured.card--hub-open:hover,
body.page-projects #projets-grid-open > .card.card--featured.card--hub-open:focus-within,
body.page-home #projets-grid > .card.card--featured:hover,
body.page-home #projets-grid > .card.card--featured:focus-within {
  filter: none;
  opacity: 1;
}

body.page-projects .card--featured.card--commercify-brand .card__hashtags--commercify .card__hashtag-link,
body.page-projects .card--featured.card--commercify-brand .card__hashtags--commercify .card__hashtag-link--muted {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: calc(0.95rem * var(--copy-scale));
  letter-spacing: 0.04em;
}
.card--flip.card--pending {
  position: relative;
}
.card--flip.card--pending .card__pending-badge {
  position: absolute;
  top: 0.65rem;
  inset-inline-end: 0.65rem;
  z-index: 6;
  font-family: var(--font-sub);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 236, 224, 0.92);
  background: rgba(12, 12, 12, 0.78);
  border: 1px solid rgba(255, 106, 0, 0.42);
  border-radius: 999px;
  padding: 0.24rem 0.52rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  max-width: calc(100% - 1.3rem);
  white-space: normal;
  text-align: end;
}
.card--flip.card--pending .card-flip__highlight {
  font-size: 0.88rem;
  line-height: 1.35;
}
.card--flip.card--pending .card__pending-footer {
  font-size: 0.82rem;
  font-style: italic;
  opacity: 0.88;
}
body.page-projects .grid-projects > .card--flip.card--pending {
  filter: none;
  opacity: 1;
}

/* Hub `/prj/` — bande préparation : cartes featured (parité GV / WebTerminal), pleine largeur duo max */
@media (min-width: 768px) {
  body.page-projects #projets-grid-pending > .card--pending-span-2,
  body.page-projects #projets-grid-pending > .card--pending-featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.page-projects #projets-grid-pending > .card--pending-span-2,
  body.page-projects #projets-grid-pending > .card--pending-featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  body.page-projects #projets-grid-pending > .card--pending-span-2,
  body.page-projects #projets-grid-pending > .card--pending-featured {
    grid-column: span 2;
  }
}

body.page-projects #projets-grid-pending > .card--pending-featured.card--featured {
  filter: none;
  opacity: 1;
}

/* Hub `/prj/` — bande « projets en cours » : cartes featured Poulpy (parité pending) */
@media (min-width: 768px) {
  body.page-projects #projets-grid-in-progress > .card--in-progress-featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.page-projects #projets-grid-in-progress > .card--in-progress-featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  body.page-projects #projets-grid-in-progress > .card--in-progress-featured {
    grid-column: span 2;
  }
}

body.page-projects #projets-grid-in-progress > .card--in-progress-featured.card--featured {
  filter: none;
  opacity: 1;
}

.card--in-progress-featured .card__body--in-progress-featured .card__gv-tagline {
  margin-bottom: 0.65rem;
}

.card--in-progress-featured .card__body--in-progress-featured .card__in-progress-footer {
  font-size: calc(0.78rem * var(--copy-scale));
  font-style: italic;
  line-height: 1.45;
  opacity: 0.9;
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.card--pending-featured .card__body--pending-featured .card__gv-tagline {
  margin-bottom: 0.65rem;
}

.card--pending-featured .card__body--pending-featured .card__pending-footer {
  font-size: calc(0.78rem * var(--copy-scale));
  font-style: italic;
  line-height: 1.45;
  opacity: 0.9;
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 248, 240, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .card--pending-featured .card__body--pending-featured .card__pending-footer {
  color: rgba(255, 252, 248, 0.92);
}

.card--flip.card--study .card__study-badge {
  border-color: rgba(96, 165, 250, 0.48);
}
.card--flip.card--in-progress .card__in-progress-badge {
  border-color: rgba(255, 140, 60, 0.55);
  color: rgba(255, 248, 236, 0.96);
}

/* Préparation / à l’étude — slogan recto : même typo que Commercify (.card__commercify-tagline) */
body.page-home #projets .card--flip.card--pending .card-flip__face--front .card-flip__slogan,
body.page-projects #projets .card--flip.card--pending .card-flip__face--front .card-flip__slogan {
  font-family: var(--font-matrix-display);
  font-size: clamp(calc(0.92rem * var(--copy-scale)), 2.2vw, calc(1.08rem * var(--copy-scale)));
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.42;
  min-height: 2.4em;
  color: rgba(255, 250, 245, 0.98);
  text-shadow: 0 0 18px rgba(255, 120, 40, 0.38), 0 1px 0 rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 200, 160, 0.12);
}

html[data-theme="light"] body.page-home #projets .card--flip.card--pending .card-flip__face--front .card-flip__slogan,
html[data-theme="light"] body.page-projects #projets .card--flip.card--pending .card-flip__face--front .card-flip__slogan {
  color: rgba(255, 252, 248, 0.98);
  text-shadow: 0 0 16px rgba(255, 120, 40, 0.32), 0 1px 0 rgba(0, 0, 0, 0.72);
}

.card--flip .card-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  transform-style: preserve-3d;
  transition: transform 0.65s ease;
}

.card--flip:hover .card-flip__inner,
.card--flip:focus-within .card-flip__inner {
  transform: rotateY(180deg);
}

.card-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.35rem;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
}

.card-flip__face h3 {
  margin: 0;
}

.card-flip__face--front h3 {
  width: 100%;
  text-align: center;
  align-self: center;
}

.card-flip__slogan {
  display: block;
  margin-top: 0.35rem;
  min-height: 3.1em;
  color: #f0f0f0;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.card-flip__face--front {
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  color: #f5f5f5;
  background-image:
    linear-gradient(180deg, rgba(8, 8, 8, 0.2), rgba(8, 8, 8, 0.8)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 2px,
      rgba(0, 0, 0, 0.02) 2px,
      rgba(0, 0, 0, 0.02) 4px
    ),
    var(--card-bg);
  background-size: cover, auto, cover;
  background-position: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.card-flip__face--front .card-flip__slogan {
  width: 100%;
  margin-top: auto;
  text-align: center;
}

.card-flip__face--back {
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg) 8%);
  border: 1px solid var(--accent-dim);
  transform: rotateY(180deg);
  align-items: flex-start;
  justify-content: center;
}

.card-flip__face--back .text-secondary {
  color: var(--text);
}

.card-flip__face--back .card__link {
  margin-top: 0.1rem;
}

/* Accueil #projets — verso flip : hiérarchie typo et CTA plus « vitrine » */
body.page-home #projets .card--flip .card-flip__face--back, body.page-projects #projets .card--flip .card-flip__face--back {
  justify-content: center;
  gap: 0.85rem;
  padding: 1.5rem 1.35rem 1.45rem;
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 88%, var(--bg) 12%) 0%,
      color-mix(in srgb, var(--bg-card) 94%, var(--accent-dim) 6%) 100%
    );
  border: 1px solid color-mix(in srgb, var(--accent-dim) 55%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] body.page-home #projets .card--flip .card-flip__face--back, html[data-theme="light"] body.page-projects #projets .card--flip .card-flip__face--back {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 22px rgba(0, 0, 0, 0.06);
}

body.page-home #projets .card--flip .card-flip__face--back h3, body.page-projects #projets .card--flip .card-flip__face--back h3 {
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  width: 100%;
  max-width: 28ch;
  color: var(--text);
  text-align: start;
}

body.page-home #projets .card--flip .card-flip__face--back .text-secondary, body.page-projects #projets .card--flip .card-flip__face--back .text-secondary {
  font-size: calc(0.88rem * var(--copy-scale));
  line-height: 1.55;
  max-width: 36ch;
  margin-bottom: 0 !important;
}

body.page-home #projets .card--flip .card-flip__face--back .card__link, body.page-projects #projets .card--flip .card-flip__face--back .card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.35rem;
  padding: 0.42rem 0.75rem;
  font-family: var(--font-sub);
  font-size: calc(0.72rem * var(--copy-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 244, 232, 0.96);
  background: color-mix(in srgb, var(--accent) 22%, rgba(12, 10, 8, 0.88));
  border: 1px solid color-mix(in srgb, var(--accent-hover) 55%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 18%, transparent);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

body.page-home #projets .card--flip .card-flip__face--back .card__link:hover, body.page-projects #projets .card--flip .card-flip__face--back .card__link:hover {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 38%, rgba(10, 8, 6, 0.92));
  border-color: color-mix(in srgb, var(--accent-hover) 72%, transparent);
  box-shadow: 0 4px 22px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-1px);
}

body.page-home #projets .card--flip .card-flip__face--back .card__link:focus-visible, body.page-projects #projets .card--flip .card-flip__face--back .card__link:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

html[data-theme="light"] body.page-home #projets .card--flip .card-flip__face--back .card__link, html[data-theme="light"] body.page-projects #projets .card--flip .card-flip__face--back .card__link {
  color: #2b1608;
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 252, 248, 0.96));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 2px 12px rgba(215, 88, 0, 0.12);
}

html[data-theme="light"] body.page-home #projets .card--flip .card-flip__face--back .card__link:hover, html[data-theme="light"] body.page-projects #projets .card--flip .card-flip__face--back .card__link:hover {
  color: #1a0f06;
  background: color-mix(in srgb, var(--accent) 22%, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .card--flip .card-flip__inner {
    transition-duration: 0.01ms;
  }

  body.page-home #projets .card--flip .card-flip__face--back .card__link,   body.page-projects #projets .card--flip .card-flip__face--back .card__link {
    transition: none;
  }

  body.page-home #projets .card--flip .card-flip__face--back .card__link:hover,   body.page-projects #projets .card--flip .card-flip__face--back .card__link:hover {
    transform: none;
  }
}

.card--meteo .card-flip__face--front {
  background-image:
    linear-gradient(180deg, rgba(10, 21, 48, 0.2), rgba(5, 10, 24, 0.78)),
    radial-gradient(circle at 82% 18%, rgba(255, 214, 102, 0.5) 0%, rgba(255, 214, 102, 0) 36%),
    linear-gradient(180deg, rgba(120, 176, 255, 0.35), rgba(76, 133, 214, 0.32)),
    var(--card-bg);
}

.card--meteo .card-flip__face--front::before {
  content: "☀  ☁  ☁";
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  font-size: 1.15rem;
  letter-spacing: 0.15rem;
  opacity: 0.9;
}

/* AlloMarques — titre marque (grille #projets, or discret) */
body.page-home #projets .card--allomarques-brand .card-flip__face--front h3,
body.page-projects #projets .card--allomarques-brand .card-flip__face--front h3,
body.page-projects #projets-grid-pending .card--allomarques-brand.card--pending-featured .card__body--genericvoice h3 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(1.28rem, 3vw, 1.88rem);
  letter-spacing: 0.04em;
  line-height: 1.14;
  color: #fce7c8;
  text-shadow:
    0 0 20px color-mix(in srgb, #a16207 48%, transparent),
    0 2px 14px rgba(74, 13, 36, 0.72),
    0 1px 0 rgba(40, 10, 24, 0.85);
}

body.page-home #projets .card--allomarques-brand .card-flip__face--back h3,
body.page-projects #projets .card--allomarques-brand .card-flip__face--back h3 {
  font-family: var(--font-h);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, #a16207 68%, var(--text));
}

html[data-theme="light"] body.page-home #projets .card--allomarques-brand .card-flip__face--front h3,
html[data-theme="light"] body.page-projects #projets .card--allomarques-brand .card-flip__face--front h3,
html[data-theme="light"] body.page-projects #projets-grid-pending .card--allomarques-brand.card--pending-featured .card__body--genericvoice h3 {
  color: #fff5e8;
  text-shadow:
    0 0 16px color-mix(in srgb, #a16207 38%, transparent),
    0 2px 10px rgba(74, 13, 36, 0.55);
}

/* MétéoDog — titre marque (grille #projets, parité GV / WebTerminal) */
body.page-home #projets .card--meteodog-brand .card-flip__face--front h3,
body.page-projects #projets .card--meteodog-brand .card-flip__face--front h3,
body.page-projects #projets-grid-pending .card--meteodog-brand.card--pending-featured .card__body--genericvoice h3 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(1.32rem, 3.1vw, 1.82rem);
  letter-spacing: 0.05em;
  line-height: 1.12;
  color: #fff8e7;
  text-shadow:
    0 0 22px rgba(255, 214, 102, 0.62),
    0 2px 14px rgba(2, 132, 199, 0.55),
    0 2px 0 rgba(15, 40, 80, 0.82);
}

body.page-home #projets .card--meteodog-brand .card-flip__face--back h3,
body.page-projects #projets .card--meteodog-brand .card-flip__face--back h3 {
  font-family: var(--font-h);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #0284c7 72%, var(--text));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] body.page-home #projets .card--meteodog-brand .card-flip__face--front h3,
html[data-theme="light"] body.page-projects #projets .card--meteodog-brand .card-flip__face--front h3,
html[data-theme="light"] body.page-projects #projets-grid-pending .card--meteodog-brand.card--pending-featured .card__body--genericvoice h3 {
  color: #fffdf6;
  text-shadow:
    0 0 18px rgba(255, 200, 80, 0.48),
    0 2px 12px rgba(2, 100, 160, 0.42),
    0 2px 0 rgba(20, 50, 90, 0.65);
}

/* PromptDeMerde — titre marque (grille #projets, ton éditorial rouge) */
body.page-home #projets .card--promptdemerde-brand .card-flip__face--front h3,
body.page-projects #projets .card--promptdemerde-brand .card-flip__face--front h3,
body.page-projects #projets-grid-pending .card--promptdemerde-brand.card--pending-featured .card__body--genericvoice h3 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(1.18rem, 2.85vw, 1.68rem);
  letter-spacing: 0.03em;
  line-height: 1.15;
  width: auto;
  max-width: calc(100% - 1.5rem);
  align-self: center;
  color: #fef2f2;
  text-shadow:
    0 2px 0 #7f1d1d,
    0 4px 16px rgba(127, 29, 29, 0.72);
  border-bottom: 2px solid #dc2626;
  padding-bottom: 0.28rem;
  display: inline-block;
  box-sizing: border-box;
}

body.page-projects #projets-grid-pending .card--promptdemerde-brand.card--pending-featured .card__body--genericvoice h3 {
  margin-left: auto;
  margin-right: auto;
}

body.page-home #projets .card--promptdemerde-brand .card-flip__face--back h3,
body.page-projects #projets .card--promptdemerde-brand .card-flip__face--back h3 {
  font-family: var(--font-h);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #450a0a;
  border-bottom: 2px solid #dc2626;
  padding-bottom: 0.22rem;
  max-width: 100%;
}

html[data-theme="light"] body.page-home #projets .card--promptdemerde-brand .card-flip__face--front h3,
html[data-theme="light"] body.page-projects #projets .card--promptdemerde-brand .card-flip__face--front h3,
html[data-theme="light"] body.page-projects #projets-grid-pending .card--promptdemerde-brand.card--pending-featured .card__body--genericvoice h3 {
  color: #fff5f5;
  text-shadow:
    0 2px 0 #991b1b,
    0 3px 12px rgba(69, 10, 10, 0.55);
}

html[data-theme="light"] body.page-home #projets .card--promptdemerde-brand .card-flip__face--back h3,
html[data-theme="light"] body.page-projects #projets .card--promptdemerde-brand .card-flip__face--back h3 {
  color: #450a0a;
}

/* GenericVoice — carte mise en avant (sans flip), pastille « Text to Speech » */
#projets .card--genericvoice-brand .card__gv-edition {
  margin: 0 0 0.5rem;
  padding: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

#projets .card--genericvoice-brand .card__gv-edition span {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sub);
  font-size: clamp(0.52rem, 1.2vw, 0.62rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-indent: 0.26em;
  line-height: 1.35;
  color: rgba(255, 244, 232, 0.88);
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, rgba(255, 255, 255, 0.2));
  border-radius: 999px;
  padding: 0.26rem 0.65rem 0.26rem 0.9rem;
  background: linear-gradient(
    180deg,
    rgba(12, 22, 28, 0.78) 0%,
    rgba(6, 14, 20, 0.62) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 16px color-mix(in srgb, var(--accent-2) 22%, transparent);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] #projets .card--genericvoice-brand .card__gv-edition span {
  color: rgba(255, 252, 248, 0.94);
  border-color: color-mix(in srgb, var(--accent-2) 42%, rgba(40, 36, 32, 0.35));
  background: linear-gradient(
    180deg,
    rgba(22, 32, 38, 0.62) 0%,
    rgba(12, 18, 24, 0.78) 100%
  );
}

.card__media--genericvoice {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 22, 0.25), rgba(4, 10, 16, 0.82)),
    radial-gradient(ellipse 90% 60% at 50% 18%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 58%),
    var(--gv-hero-bg);
  background-size: cover;
  background-position: center;
}

.card__media--webterminal {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 22, 0.25), rgba(4, 10, 16, 0.82)),
    radial-gradient(ellipse 90% 60% at 50% 18%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 58%),
    var(--wt-hero-bg);
  background-size: cover;
  background-position: center;
}

.card__media--allomarques {
  background-image:
    linear-gradient(180deg, rgba(20, 8, 14, 0.35), rgba(8, 4, 10, 0.84)),
    radial-gradient(ellipse 85% 55% at 72% 22%, color-mix(in srgb, #a16207 28%, transparent), transparent 58%),
    var(--am-hero-bg);
  background-size: cover;
  background-position: center;
}

.card__media--meteodog {
  background-image:
    linear-gradient(180deg, rgba(10, 21, 48, 0.28), rgba(5, 10, 24, 0.82)),
    radial-gradient(circle at 82% 18%, rgba(255, 214, 102, 0.45) 0%, rgba(255, 214, 102, 0) 38%),
    linear-gradient(180deg, rgba(120, 176, 255, 0.32), rgba(76, 133, 214, 0.28)),
    var(--md-hero-bg);
  background-size: cover;
  background-position: center;
}

.card--meteodog-brand.card--pending-featured .card__media--meteodog::after {
  content: "☀  ☁  ☁";
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  z-index: 1;
  font-size: 1.15rem;
  letter-spacing: 0.15rem;
  opacity: 0.92;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.card__media--promptdemerde {
  background-image:
    linear-gradient(180deg, rgba(30, 8, 8, 0.42), rgba(12, 4, 4, 0.88)),
    radial-gradient(ellipse 80% 50% at 18% 12%, color-mix(in srgb, #dc2626 22%, transparent), transparent 55%),
    var(--pd-hero-bg);
  background-size: cover;
  background-position: center;
}

.card__media--poulpyinfopc {
  background-image:
    linear-gradient(180deg, rgba(4, 18, 10, 0.35), rgba(2, 10, 6, 0.88)),
    radial-gradient(ellipse 85% 55% at 50% 18%, color-mix(in srgb, #27c93f 22%, transparent), transparent 58%),
    var(--pipc-hero-bg);
  background-size: cover;
  background-position: center;
}

.card__media--poulpyinfoproduit {
  background-image:
    linear-gradient(180deg, rgba(4, 18, 10, 0.35), rgba(2, 10, 6, 0.88)),
    radial-gradient(ellipse 85% 55% at 50% 18%, color-mix(in srgb, #27c93f 22%, transparent), transparent 58%),
    var(--piprod-hero-bg);
}

.card__media--mytubeland {
  background-image:
    linear-gradient(180deg, rgba(18, 6, 6, 0.38), rgba(8, 4, 4, 0.88)),
    radial-gradient(ellipse 85% 55% at 72% 22%, color-mix(in srgb, #ff0000 28%, transparent), transparent 58%),
    var(--tl-hero-bg);
  background-size: cover;
  background-position: center;
}

.card__media--transcriptit {
  background-image:
    linear-gradient(180deg, rgba(6, 18, 22, 0.32), rgba(4, 10, 14, 0.86)),
    radial-gradient(ellipse 85% 55% at 50% 20%, color-mix(in srgb, #2dd4bf 24%, transparent), transparent 58%),
    var(--ti-hero-bg);
  background-size: cover;
  background-position: center;
}

.card--transcriptit-brand.card--pending-featured .card__media--transcriptit::after,
body.page-home #projets .card--featured.card--transcriptit-brand .card__media--transcriptit::after,
body.page-projects #projets .card--featured.card--transcriptit-brand .card__media--transcriptit::after {
  content: "🎙";
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  z-index: 1;
  font-size: 1.35rem;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

body.page-projects #projets-grid-pending .card--transcriptit-brand.card--pending-featured .card__body--genericvoice h3 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(1.22rem, 2.9vw, 1.72rem);
  letter-spacing: 0.04em;
  line-height: 1.12;
  color: #ecfeff;
  text-shadow:
    0 0 20px rgba(45, 212, 191, 0.55),
    0 2px 12px rgba(14, 116, 144, 0.5),
    0 2px 0 rgba(8, 30, 36, 0.82);
}

html[data-theme="light"] body.page-projects #projets-grid-pending .card--transcriptit-brand.card--pending-featured .card__body--genericvoice h3 {
  color: #f0fdfa;
  text-shadow:
    0 0 16px rgba(45, 212, 191, 0.42),
    0 2px 10px rgba(14, 116, 144, 0.38),
    0 2px 0 rgba(8, 30, 36, 0.62);
}

.page-transcriptit__hero-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

body.page-transcriptit .page-transcriptit__hero--showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, #2dd4bf 14%, transparent);
}

body.page-transcriptit .page-transcriptit__hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, #0f766e 16%, transparent) 0%,
      transparent 42%,
      color-mix(in srgb, #134e4a 10%, transparent) 100%
    );
}

body.page-transcriptit .page-transcriptit__hero-backdrop-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
}

body.page-transcriptit .page-transcriptit__hero-backdrop-glow--a {
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  top: -12%;
  right: -6%;
  background: color-mix(in srgb, #2dd4bf 42%, transparent);
}

body.page-transcriptit .page-transcriptit__hero-backdrop-glow--b {
  width: min(40vw, 20rem);
  height: min(40vw, 20rem);
  bottom: -18%;
  left: -8%;
  background: color-mix(in srgb, #14b8a6 32%, transparent);
}

body.page-transcriptit .page-transcriptit__hero-backdrop-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(color-mix(in srgb, #2dd4bf 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #2dd4bf 16%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 75% at 72% 38%, #000 20%, transparent 72%);
}

body.page-transcriptit .page-transcriptit__hero-shell {
  position: relative;
  z-index: 1;
}

body.page-transcriptit .page-transcriptit__kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ccfbf1;
  background: color-mix(in srgb, #14b8a6 24%, transparent);
  border: 1px solid color-mix(in srgb, #5eead4 38%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, #2dd4bf 22%, transparent);
}

body.page-transcriptit .page-transcriptit__github-soon {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fef3c7;
  background: color-mix(in srgb, #f59e0b 28%, transparent);
  border: 1px solid color-mix(in srgb, #fbbf24 48%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, #f59e0b 22%, transparent);
}

body.page-transcriptit .page-transcriptit__github-notice {
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, #fbbf24 28%, transparent);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

body.page-transcriptit .page-transcriptit__hero-title {
  text-shadow: 0 0 32px color-mix(in srgb, #2dd4bf 28%, transparent);
}

body.page-transcriptit .page-transcriptit__hero-cta.btn--primary {
  box-shadow:
    0 10px 28px color-mix(in srgb, #14b8a6 35%, transparent),
    0 0 0 1px color-mix(in srgb, #5eead4 25%, transparent);
}

body.page-transcriptit .page-transcriptit__hero-media {
  position: relative;
}

body.page-transcriptit .page-transcriptit__video-stage {
  position: relative;
  padding: clamp(0.35rem, 1.5vw, 0.55rem);
}

body.page-transcriptit .page-transcriptit__video-frame {
  position: relative;
  border-radius: calc(var(--radius-lg, 12px) + 10px);
  padding: 3px;
  background: linear-gradient(
    135deg,
    #5eead4 0%,
    #2dd4bf 22%,
    #0d9488 48%,
    #14b8a6 72%,
    #99f6e4 100%
  );
  box-shadow:
    0 24px 56px color-mix(in srgb, #0f766e 45%, transparent),
    0 0 0 1px color-mix(in srgb, #5eead4 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

body.page-transcriptit .page-transcriptit__video-frame-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    color-mix(in srgb, #ccfbf1 55%, transparent) 45%,
    transparent 55%,
    color-mix(in srgb, #2dd4bf 40%, transparent) 100%
  );
  opacity: 0.65;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: page-transcriptit-frame-shimmer 5.5s ease-in-out infinite;
}

@keyframes page-transcriptit-frame-shimmer {
  0%,
  100% {
    opacity: 0.35;
    transform: rotate(0deg);
  }

  50% {
    opacity: 0.85;
    transform: rotate(180deg);
  }
}

body.page-transcriptit .page-transcriptit__video-frame-body {
  position: relative;
  border-radius: calc(var(--radius-lg, 12px) + 6px);
  background: linear-gradient(180deg, #0c1929 0%, #071018 100%);
  border: 1px solid color-mix(in srgb, #2dd4bf 22%, transparent);
  box-shadow: inset 0 0 40px color-mix(in srgb, #14b8a6 12%, transparent);
}

body.page-transcriptit .page-transcriptit__video-frame-inner {
  position: relative;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #050a12;
}

body.page-transcriptit .page-transcriptit__hero-img,
body.page-transcriptit .page-transcriptit__hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: #0f172a;
}

body.page-transcriptit .page-transcriptit__video-frame-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    color-mix(in srgb, #2dd4bf 5%, transparent) 2px,
    color-mix(in srgb, #2dd4bf 5%, transparent) 3px
  );
  opacity: 0.28;
  mix-blend-mode: soft-light;
}

body.page-transcriptit .page-transcriptit__video-frame-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, #99f6e4 88%, white);
  opacity: 0.9;
  box-shadow: 0 0 12px color-mix(in srgb, #2dd4bf 45%, transparent);
}

body.page-transcriptit .page-transcriptit__video-frame-corner--tl {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

body.page-transcriptit .page-transcriptit__video-frame-corner--tr {
  top: 10px;
  right: 10px;
  border-left: none;
  border-bottom: none;
}

body.page-transcriptit .page-transcriptit__video-frame-corner--bl {
  bottom: 10px;
  left: 10px;
  border-right: none;
  border-top: none;
}

body.page-transcriptit .page-transcriptit__video-frame-corner--br {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

body.page-transcriptit .page-transcriptit__video-frame-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem 0.65rem;
  border-top: 1px solid color-mix(in srgb, #2dd4bf 14%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #0f766e 12%, transparent), transparent);
}

body.page-transcriptit .page-transcriptit__video-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.28rem;
  height: 1.1rem;
  width: min(100%, 11rem);
}

body.page-transcriptit .page-transcriptit__video-wave-bar {
  flex: 1;
  max-width: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #99f6e4, #14b8a6);
  box-shadow: 0 0 10px color-mix(in srgb, #2dd4bf 50%, transparent);
  animation: page-transcriptit-wave 1.1s ease-in-out infinite;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(1) {
  height: 35%;
  animation-delay: 0s;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(2) {
  height: 62%;
  animation-delay: 0.12s;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(3) {
  height: 88%;
  animation-delay: 0.24s;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(4) {
  height: 52%;
  animation-delay: 0.36s;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(5) {
  height: 76%;
  animation-delay: 0.48s;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(6) {
  height: 44%;
  animation-delay: 0.6s;
}

body.page-transcriptit .page-transcriptit__video-wave-bar:nth-child(7) {
  height: 68%;
  animation-delay: 0.72s;
}

@keyframes page-transcriptit-wave {
  0%,
  100% {
    transform: scaleY(0.55);
    opacity: 0.65;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__hero--showcase {
  border-bottom-color: color-mix(in srgb, #0d9488 22%, transparent);
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__hero-backdrop {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, #ccfbf1 65%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, #5eead4 35%, transparent) 100%
    );
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__kicker {
  color: #0f766e;
  background: color-mix(in srgb, #5eead4 35%, white);
  border-color: color-mix(in srgb, #14b8a6 45%, transparent);
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__github-soon {
  color: #92400e;
  background: color-mix(in srgb, #fde68a 55%, white);
  border-color: color-mix(in srgb, #f59e0b 45%, transparent);
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__github-notice {
  color: var(--text-secondary);
  background: color-mix(in srgb, #fef3c7 65%, white);
  border-color: color-mix(in srgb, #fbbf24 35%, transparent);
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__hero-title {
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body.page-transcriptit .page-transcriptit__video-frame-ring,
  body.page-transcriptit .page-transcriptit__video-wave-bar {
    animation: none;
  }
}

@media (min-width: 768px) {
  .page-transcriptit__hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}

.page-transcriptit__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
}

.page-transcriptit__features {
  display: grid;
  gap: 0.65rem;
  max-width: 42rem;
}

.page-transcriptit__feature-item {
  position: relative;
  padding-inline-start: 1.35rem;
  color: var(--text-secondary);
}

.page-transcriptit__feature-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, #2dd4bf 70%, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, #2dd4bf 45%, transparent);
}

.page-transcriptit__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.page-transcriptit__roadmap-filigrane {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.72;
  font-style: italic;
  border-left: 2px solid color-mix(in srgb, #14b8a6 35%, transparent);
  padding-left: 0.75rem;
}

html[data-theme="light"] body.page-transcriptit .page-transcriptit__roadmap-filigrane {
  opacity: 0.78;
  border-left-color: color-mix(in srgb, #0f766e 28%, transparent);
}

.page-transcriptit__roadmap-cta:disabled {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.page-transcriptit__version {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ccfbf1;
  background: color-mix(in srgb, #14b8a6 22%, transparent);
  border: 1px solid color-mix(in srgb, #2dd4bf 45%, transparent);
}

.page-transcriptit__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.page-transcriptit__demo-player {
  max-width: 56rem;
  margin: 0 auto;
}

.page-transcriptit__demo-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg, 12px);
  background: #0f172a;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, #2dd4bf 18%, transparent);
}

.page-transcriptit__micro {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.page-transcriptit__feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.page-transcriptit__feature-card {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, #2dd4bf 18%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 88%, #0f766e 4%);
}

.page-transcriptit__feature-title {
  font-family: var(--font-h);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.45rem;
  color: color-mix(in srgb, #5eead4 35%, var(--text));
}

.page-transcriptit__feature-card p.text-secondary {
  white-space: pre-line;
}

.page-transcriptit__mode-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .page-transcriptit__mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-transcriptit__mode-card {
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--accent-2-dim) 28%, var(--border));
  background: var(--bg-elevated);
}

.page-transcriptit__mode-title {
  font-family: var(--font-h);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.page-transcriptit__mode-list {
  margin: 0;
  padding-inline-start: 1.15rem;
  color: var(--text-secondary);
}

.page-transcriptit__mode-list li + li {
  margin-top: 0.45rem;
}

.page-transcriptit__pipeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 52rem;
}

.page-transcriptit__pipeline-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, #2dd4bf 16%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 92%, #0d9488 3%);
}

.page-transcriptit__pipeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  color: #042f2e;
  background: linear-gradient(135deg, #5eead4, #2dd4bf);
}

.page-transcriptit__pipeline-text {
  color: var(--text-secondary);
}

.page-transcriptit__install-steps {
  margin: 0 0 1.25rem;
  padding-inline-start: 1.25rem;
  color: var(--text-secondary);
  max-width: 42rem;
}

.page-transcriptit__install-steps li + li {
  margin-top: 0.5rem;
}

.page-transcriptit__code {
  margin: 0;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md, 10px);
  font-family: ui-monospace, "Cascadia Code", "DejaVu Sans Mono", monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid color-mix(in srgb, #2dd4bf 22%, #334155);
  overflow-x: auto;
  max-width: 42rem;
}

.page-transcriptit__specs-table {
  display: grid;
  gap: 0;
  max-width: 44rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.page-transcriptit__specs-row {
  display: grid;
  grid-template-columns: minmax(8rem, 34%) 1fr;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.page-transcriptit__specs-row:last-child {
  border-bottom: none;
}

.page-transcriptit__specs-key {
  font-weight: 600;
  color: var(--text);
}

.page-transcriptit__specs-val {
  color: var(--text-secondary);
}

.card--genericvoice-brand.card--featured {
  border-color: color-mix(in srgb, var(--accent-2-dim) 55%, var(--accent-dim));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 26%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.14);
}

.card--genericvoice-brand.card--featured:hover {
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--accent-hover));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.16),
    0 0 28px color-mix(in srgb, var(--accent-2-dim) 32%, transparent);
}

.card__body--genericvoice {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 1rem 1.1rem;
  width: 100%;
  box-sizing: border-box;
}

.card__body--genericvoice h3 {
  margin: 0 0 0.15rem;
  font-family: var(--font-h);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #f8f4ef;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.card__gv-tagline {
  margin: 0 0 0.85rem;
  font-size: calc(0.88rem * var(--copy-scale));
  line-height: 1.45;
  color: rgba(240, 248, 252, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  max-width: 42ch;
}

/* Slogan GenericVoice — même typo que Commercify (.card__commercify-tagline) */
.card--genericvoice-brand .card__gv-tagline {
  font-family: var(--font-matrix-display);
  font-size: clamp(calc(1.02rem * var(--copy-scale)), 2.6vw, calc(1.22rem * var(--copy-scale)));
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.42;
  min-height: 2.85rem;
  color: rgba(255, 250, 245, 0.98);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--accent-2) 42%, transparent),
    0 1px 0 rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 22%, rgba(255, 255, 255, 0.08));
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.card--genericvoice-brand.card--featured:hover .card__gv-tagline {
  color: #fffefb;
  text-shadow:
    0 0 22px color-mix(in srgb, var(--accent-2) 52%, transparent),
    0 1px 0 rgba(0, 0, 0, 0.85);
  border-color: color-mix(in srgb, var(--accent-2) 38%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 14%, transparent);
}

html[data-theme="light"] .card__body--genericvoice h3 {
  color: #fffaf6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .card__gv-tagline {
  color: rgba(255, 252, 248, 0.95);
}

html[data-theme="light"] .card--genericvoice-brand .card__gv-tagline {
  text-shadow:
    0 0 16px color-mix(in srgb, var(--accent-2) 32%, transparent),
    0 1px 0 rgba(0, 0, 0, 0.72);
}

.card__body--genericvoice .card__hashtags--genericvoice {
  justify-content: center;
}

/* GenericVoice — hashtags visibles au survol / focus carte (parité Commercify) */
.card--genericvoice-brand .card__hashtags--genericvoice {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    max-height 0.28s ease;
}

.card--genericvoice-brand.card--featured:hover .card__hashtags--genericvoice,
.card--genericvoice-brand.card--featured:focus-within .card__hashtags--genericvoice {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 12rem;
  margin: 0.65rem 0 0.85rem;
  overflow: visible;
}

@media (hover: none) {
  .card--genericvoice-brand .card__hashtags--genericvoice {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    margin: 0.65rem 0 0.85rem;
    overflow: visible;
  }
}

.card--genericvoice-brand.card--featured .card__hashtags--genericvoice .card__hashtag-link {
  color: rgba(240, 248, 252, 0.92);
  border-bottom-color: color-mix(in srgb, var(--accent-2) 42%, transparent);
}

.card--genericvoice-brand.card--featured .card__hashtags--genericvoice .card__hashtag-link:hover,
.card--genericvoice-brand.card--featured .card__hashtags--genericvoice .card__hashtag-link:focus-visible {
  color: #fffefb;
  border-bottom-color: var(--accent-2);
}

.card__body--genericvoice .card__hashtags--webterminal {
  justify-content: center;
}

/* WebTerminal — hashtags visibles au survol / focus carte (parité GenericVoice) */
.card--webterminal-brand .card__hashtags--webterminal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    max-height 0.28s ease;
}

.card--webterminal-brand.card--featured:hover .card__hashtags--webterminal,
.card--webterminal-brand.card--featured:focus-within .card__hashtags--webterminal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 12rem;
  margin: 0.65rem 0 0.85rem;
  overflow: visible;
}

@media (hover: none) {
  .card--webterminal-brand .card__hashtags--webterminal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    margin: 0.65rem 0 0.85rem;
    overflow: visible;
  }
}

.card--webterminal-brand.card--featured .card__hashtags--webterminal .card__hashtag-link {
  color: rgba(240, 248, 252, 0.92);
  border-bottom-color: color-mix(in srgb, var(--accent-2) 42%, transparent);
}

.card--webterminal-brand.card--featured .card__hashtags--webterminal .card__hashtag-link:hover,
.card--webterminal-brand.card--featured .card__hashtags--webterminal .card__hashtag-link:focus-visible {
  color: #fffefb;
  border-bottom-color: var(--accent-2);
}

.card__body--genericvoice .card__hashtags--transcriptit {
  justify-content: center;
}

/* TranscriptIT — hashtags visibles au survol / focus carte (parité WebTerminal) */
.card--transcriptit-brand .card__hashtags--transcriptit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    max-height 0.28s ease;
}

.card--transcriptit-brand.card--featured:hover .card__hashtags--transcriptit,
.card--transcriptit-brand.card--featured:focus-within .card__hashtags--transcriptit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 12rem;
  margin: 0.65rem 0 0.85rem;
  overflow: visible;
}

@media (hover: none) {
  .card--transcriptit-brand .card__hashtags--transcriptit {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    margin: 0.65rem 0 0.85rem;
    overflow: visible;
  }
}

.card--transcriptit-brand.card--featured .card__hashtags--transcriptit .card__hashtag-link {
  color: rgba(240, 248, 252, 0.92);
  border-bottom-color: color-mix(in srgb, var(--accent-2) 42%, transparent);
}

.card--transcriptit-brand.card--featured .card__hashtags--transcriptit .card__hashtag-link:hover,
.card--transcriptit-brand.card--featured .card__hashtags--transcriptit .card__hashtag-link:focus-visible {
  color: #fffefb;
  border-bottom-color: var(--accent-2);
}

.card__gv-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.48rem 0.95rem;
  font-family: var(--font-sub);
  font-size: calc(0.72rem * var(--copy-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 252, 248, 0.98);
  background: color-mix(in srgb, var(--accent-2) 28%, rgba(8, 12, 16, 0.88));
  border: 1px solid color-mix(in srgb, var(--accent-2) 48%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--accent-2) 20%, transparent);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.card__gv-cta:hover {
  color: #fff;
  background: color-mix(in srgb, var(--accent-2) 42%, rgba(6, 10, 14, 0.9));
  border-color: color-mix(in srgb, var(--accent-2-hover, var(--accent-2)) 62%, transparent);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--accent-2) 30%, transparent);
  transform: translateY(-1px);
}

.card__gv-cta:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

html[data-theme="light"] .card__gv-cta {
  color: #0f1a1e;
  background: color-mix(in srgb, var(--accent-2) 14%, rgba(255, 252, 248, 0.96));
  border-color: color-mix(in srgb, var(--accent-2) 40%, transparent);
}

html[data-theme="light"] .card__gv-cta:hover {
  color: #060d10;
  background: color-mix(in srgb, var(--accent-2) 24%, #fff);
}

/* Lien pleine carte GenericVoice — même principe que Commercify (≤1024px) */
.card__genericvoice-stretched-link {
  display: none;
}

@media (max-width: 1024px) {
  .card__genericvoice-stretched-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    text-decoration: none;
  }

  .card--genericvoice-brand.card--featured .card__gv-cta {
    position: relative;
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--genericvoice-brand.card--featured:hover {
    transform: none;
  }

  .card__gv-cta {
    transition: none;
  }

  .card__gv-cta:hover {
    transform: none;
  }
}

html[data-theme="light"] .card-flip__face--front {
  color: #fffaf5;
}

@media (hover: none), (pointer: coarse) {
  .card--flip .card-flip__inner {
    transform: none !important;
  }

  .card-flip__face {
    position: relative;
    min-height: 220px;
  }

  .card-flip__face--back {
    display: none;
  }

  .card-flip__slogan { display: block; }
}

/*
 * Section projets — tactile + ≤1024px : la face repasse en flux (relative) mais .card-flip__inner
 * gardait min-height: 280px → bande vide (fond carte) sous l’image. On aligne hauteurs sur la face.
 */
@media (max-width: 1024px) and (hover: none),
       (max-width: 1024px) and (pointer: coarse) {
  #projets .card--flip {
    min-height: 0;
  }

  #projets .card--flip .card-flip__inner {
    min-height: 0;
    height: auto;
  }

  #projets .card-flip__face {
    min-height: 0;
  }

  #projets .card-flip__face--front {
    min-height: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    box-sizing: border-box;
  }

  #projets .card-flip__slogan {
    min-height: 0;
  }
}

/*
 * Flip actif : sur tactile le verso est masqué (.card-flip__face--back { display:none }) —
 * lien pleine carte (même principe que .card__commercify-stretched-link) pour atteindre la page projet.
 */
.card__flip-stretched-link {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  #projets .card--flip:not(.card--inactive) .card__flip-stretched-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    text-decoration: none;
    outline-offset: 3px;
  }
}

.card--featured {
  grid-column: span 2;
  border-color: var(--accent-hover);
  border-width: 2px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--featured-overlay-top), var(--featured-overlay-bottom));
}

@media (max-width: 1279px) {
  .card--featured {
    grid-column: span 1;
  }
}

.card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-h);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: #fff4ea;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 106, 0, 0.95);
  border-radius: var(--radius-sm);
  background: rgba(15, 15, 15, 0.85);
}

html[data-theme="light"] .card__badge {
  color: #2b1608;
  background: rgba(255, 244, 233, 0.92);
  border-color: rgba(215, 88, 0, 0.9);
}

.card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(1);
  transition: transform 0.6s ease, opacity 0.3s;
}

.card--featured:hover .card__media img {
  transform: scale(1.05);
  opacity: 0.55;
}

.card__body {
  position: relative;
  z-index: 1;
}

.card--featured .text-secondary {
  color: var(--text);
}

.card--featured h3 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  color: var(--accent);
}

.card__link {
  font-weight: 700;
  color: var(--accent);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.card__link:hover {
  text-decoration: underline;
}

.card__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
  margin-top: 0;
  margin-bottom: 0;
}

.card__hashtag-link {
  font-family: var(--font-body);
  font-size: calc(0.78rem * var(--copy-scale));
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 106, 0, 0.35);
  word-break: break-word;
  max-width: 100%;
  transition: color 0.2s, border-color 0.2s;
}

.card--featured .card__hashtag-link {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, currentColor 35%, transparent);
}

.card__hashtag-link:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-hover);
}

.card--featured .card__hashtag-link:hover {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, currentColor 60%, transparent);
}

.card__hashtag-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Carte Commercify — fond noir, logo officiel, accents orange */
.card--commercify-brand {
  --cf-card-bg: #030303;
  --cf-card-border: rgba(255, 106, 0, 0.5);
  --cf-text-dim: rgba(232, 232, 236, 0.82);
  --cf-cta-orange: #ffb870;
  --cf-cta-orange-hover: #ffd4a8;
  background: var(--cf-card-bg);
  border-color: var(--cf-card-border);
  box-shadow: 0 12px 38px rgba(12, 6, 0, 0.58);
}

.card--commercify-brand.card--featured {
  padding-bottom: 0.55rem;
  padding-top: 1.25rem;
}

.card--commercify-brand:hover {
  border-color: rgba(255, 140, 40, 0.75);
  box-shadow: 0 16px 44px rgba(18, 8, 0, 0.62);
}

.card--commercify-brand::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.55) 42%,
    rgba(0, 0, 0, 0.94) 100%
  );
  pointer-events: none;
}

.card__badge--project-active {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--btn-text);
  background: var(--btn-bg-hover);
  border: 1px solid var(--btn-border);
  filter: brightness(1.08);
  padding: 0.42rem 0.8rem;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 16px rgba(255, 106, 0, 0.38);
  z-index: 2;
}

/* #PROJECT (accueil #projets) : vert type Commercify — cartes flip + carte mise en avant */
.card--commercify-brand .card__badge--project-active,
body.page-home #projets .card--flip .card__badge--project-active:not(.card__badge--dream), body.page-projects #projets .card--flip .card__badge--project-active:not(.card__badge--dream) {
  color: #ecfdf5;
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-color: #4ade80;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 16px rgba(34, 197, 94, 0.44);
}

html[data-theme="light"] .card--commercify-brand .card__badge--project-active,
html[data-theme="light"] body.page-home #projets .card--flip .card__badge--project-active:not(.card__badge--dream), html[data-theme="light"] body.page-projects #projets .card--flip .card__badge--project-active:not(.card__badge--dream) {
  color: #f0fdf4;
  background: linear-gradient(180deg, #15803d 0%, #166534 100%);
  border-color: #22c55e;
}

/* #DREAM : ton gris-orangé plat, discret (hors vert #PROJECT) */
body.page-home #projets .card--flip .card__badge--project-active.card__badge--dream, body.page-projects #projets .card--flip .card__badge--project-active.card__badge--dream {
  text-transform: none;
  letter-spacing: 0.07em;
  color: rgba(255, 248, 240, 0.9);
  background: color-mix(in srgb, rgba(196, 154, 118, 0.42) 38%, rgba(36, 32, 30, 0.94) 62%);
  border: 1px solid rgba(148, 126, 108, 0.45);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-theme="light"] body.page-home #projets .card--flip .card__badge--project-active.card__badge--dream, html[data-theme="light"] body.page-projects #projets .card--flip .card__badge--project-active.card__badge--dream {
  color: #3f352c;
  background: color-mix(in srgb, rgba(210, 178, 148, 0.4) 32%, rgba(252, 250, 247, 0.98) 68%);
  border-color: rgba(140, 118, 98, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Nomenclature : casse du tag (#specs, #MVP…) sans déplacer le badge */
.card__badge--nomenclature {
  text-transform: none;
}

/* Cartes flip #projets : badge à gauche (axe horizontal inchangé), centré sur la hauteur de la vignette — hors carte Commercify (featured). */
body.page-home #projets .card--flip > .card__badge, body.page-projects #projets .card--flip > .card__badge {
  left: 0.75rem;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* Desktop souris : masque le badge #PROJECT / #DREAM quand le verso est visible (Commercify = pas .card--flip). */
@media (hover: hover) and (pointer: fine) {
  body.page-home #projets .card--flip:not(.card--inactive) > .card__badge,   body.page-projects #projets .card--flip:not(.card--inactive) > .card__badge {
    transition:
      opacity 0.28s var(--ease-choreography, ease),
      visibility 0.28s var(--ease-choreography, ease);
  }

  body.page-home #projets .card--flip:not(.card--inactive):hover > .card__badge,
  body.page-projects #projets .card--flip:not(.card--inactive):hover > .card__badge,
  body.page-home #projets .card--flip:not(.card--inactive):focus-within > .card__badge,
  body.page-projects #projets .card--flip:not(.card--inactive):focus-within > .card__badge {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Titres recto : centrage horizontal réel de la vignette (gouttières symétriques) — sans changer le positionnement vertical des badges. */
body.page-home #projets .card--flip .card-flip__face--front h3, body.page-projects #projets .card--flip .card-flip__face--front h3 {
  box-sizing: border-box;
  padding-inline: clamp(3rem, 15vw, 4.5rem);
}

/* Hub bande « à l’étude » : titre + slogan (sans badge) */
body.page-projects #projets-grid-study .card--flip > .card__badge,
body.page-projects #projets-grid-study .card--flip > .card__pending-badge,
body.page-projects #projets-grid-study .card--flip > .card__inactive-badge {
  display: none !important;
}

body.page-projects #projets-grid-study .card--flip .card-flip__face--front {
  container-type: inline-size;
}

body.page-projects #projets-grid-study .card--flip .card-flip__face--front h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  text-wrap: nowrap;
  hyphens: none;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(1.02rem, 9.5cqi, 1.48rem);
  line-height: 1.12;
  letter-spacing: 0.018em;
  padding-inline: clamp(0.55rem, 2.5cqi, 0.95rem);
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}

/* MétéoDog : réserve à gauche (badge) et à droite (déco ::before) avec même gouttière des deux côtés */
body.page-home #projets .card--meteo .card-flip__face--front h3, body.page-projects #projets .card--meteo .card-flip__face--front h3 {
  padding-inline: max(
    clamp(3rem, 15vw, 4.5rem),
    clamp(2.4rem, 13vw, 3.4rem)
  );
}

/* Commercify : badge bêta (haut-gauche) — orange ; même boîte que le badge #PROJECT (pas de flex / max-width / span interne) */
.card__badge--commercify-beta {
  left: 1rem;
  right: auto;
  padding: 0.42rem 0.8rem;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.2;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff7ed;
  background: linear-gradient(180deg, #c2410c 0%, #9a3412 100%);
  border: 1px solid #fb923c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 14px rgba(251, 146, 60, 0.38);
  z-index: 2;
}

html[data-theme="light"] .card--commercify-brand .card__badge--commercify-beta {
  color: #fffbeb;
  background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%);
  border-color: #fdba74;
}

.card__media--commercify {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.78) 100%),
    var(--cf-vignette-bg, none);
  background-size: cover;
  background-position: center;
  background-color: var(--bg);
}

/* Logo centré en haut (badges aux coins gauche / droite) */
.card__commercify-logo-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 clamp(5.25rem, 16vw, 9rem);
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}

.card--featured.card--commercify-brand .card__media .card__commercify-logo {
  width: auto;
  height: auto;
  max-width: min(300px, 100%);
  max-height: clamp(4.5rem, 12vw, 6.75rem);
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  filter: drop-shadow(0 4px 14px rgba(255, 106, 0, 0.16));
  transition: transform 0.45s ease, filter 0.35s ease;
}

.card--featured.card--commercify-brand:hover .card__media .card__commercify-logo {
  opacity: 1;
  transform: scale(1.03);
  filter: drop-shadow(0 6px 20px rgba(255, 106, 0, 0.24));
}

.card__body--commercify {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0.15rem;
  padding-bottom: 0.12rem;
  transform: translateY(-0.65rem);
}

.card__body--commercify .card__commercify-tagline {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.card__commercify-tagline {
  font-size: calc(0.92rem * var(--copy-scale));
  line-height: 1.55;
  color: var(--cf-text-dim);
  margin-top: 0;
}

/* Slogan officiel Commercify — même typo que le hero « Design Your Digital » (.hero-title) */
.card--commercify-brand .card__commercify-tagline {
  font-family: var(--font-matrix-display);
  font-size: clamp(calc(1.02rem * var(--copy-scale)), 2.6vw, calc(1.22rem * var(--copy-scale)));
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.42;
  /* Réserve verticale pour limiter le saut au chargement Audiowide / Orbitron */
  min-height: 2.85rem;
  color: rgba(255, 250, 245, 0.98);
  text-shadow: 0 0 18px rgba(255, 120, 40, 0.38), 0 1px 0 rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 200, 160, 0.12);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.card--commercify-brand:hover .card__commercify-tagline {
  color: #fffefb;
  text-shadow: 0 0 22px rgba(255, 130, 55, 0.48), 0 1px 0 rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 184, 120, 0.52);
  box-shadow: 0 0 0 1px rgba(255, 140, 80, 0.12);
}

.card--featured .card__hashtags--commercify .card__hashtag-link {
  color: rgba(255, 236, 220, 0.94);
  border-bottom-color: rgba(255, 200, 150, 0.45);
  font-size: calc(0.74rem * var(--copy-scale));
  font-weight: 400;
}

.card--featured .card__hashtags--commercify .card__hashtag-link:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 200, 140, 0.75);
}

.card--featured .card__hashtags--commercify .card__hashtag-link--muted {
  opacity: 1;
  font-weight: 400;
  font-size: calc(0.74rem * var(--copy-scale));
  color: rgba(255, 228, 205, 0.9);
  border-bottom-color: rgba(255, 190, 140, 0.42);
}

.card--featured .card__hashtags--commercify .card__hashtag-link--muted:hover {
  opacity: 1;
  color: #ffffff;
  border-bottom-color: rgba(255, 200, 150, 0.72);
}

.card__body--commercify .card__hashtags--commercify {
  justify-content: center;
}

/*
 * Desktop + souris : bloc bas en position absolue et hauteur fixe — le reflow reste confiné
 * à la vignette (pas de CLS sur la page). Slogan centré dans la zone tant que les hashtags
 * sont repliés ; au survol, empilement vers le bas avec défilement interne si besoin.
 */
@media (min-width: 1025px) and (hover: hover) {
  .card--commercify-brand.card--featured .card__body--commercify {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    transform: none;
    width: 100%;
    min-height: 13rem;
    height: 13rem;
    max-height: 13rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto;
    justify-items: center;
    align-items: center;
    padding: 0.25rem 0.75rem 0.45rem;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
  }

  .card--commercify-brand.card--featured:hover .card__body--commercify,
  .card--commercify-brand.card--featured:focus-within .card__body--commercify {
    grid-template-rows: auto auto auto auto;
    align-items: stretch;
    overflow-y: auto;
  }

  .card--commercify-brand.card--featured .card__commercify-tagline {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(36rem, calc(100% - 2.5rem));
    max-width: 36rem;
    margin: 0;
    z-index: 2;
  }

  .card--commercify-brand.card--featured:hover .card__commercify-tagline,
  .card--commercify-brand.card--featured:focus-within .card__commercify-tagline {
    align-self: start;
    margin-bottom: 0.35rem;
  }

  .card--commercify-brand.card--featured .card__hashtags--commercify {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .card--commercify-brand.card--featured:hover .card__hashtags--commercify,
  .card--commercify-brand.card--featured:focus-within .card__hashtags--commercify {
    max-height: 9rem;
    margin-bottom: 0.5rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .card--commercify-brand.card--featured .card__commercify-site-links {
    grid-row: 3;
    grid-column: 1;
    width: 100%;
    align-self: end;
  }

  .card--commercify-brand.card--featured .card__gv-cta {
    grid-row: 4;
    grid-column: 1;
    align-self: end;
    justify-self: center;
    margin-top: 0.35rem;
    position: relative;
    z-index: 3;
  }
}

/* Hashtags Commercify : visibles uniquement au survol / focus carte (évite la surcharge) */
.card--commercify-brand .card__hashtags--commercify {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.card--commercify-brand:hover .card__hashtags--commercify,
.card--commercify-brand:focus-within .card__hashtags--commercify {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 16rem;
  margin-bottom: 1.65rem;
  overflow: visible;
}

/* Pas de survol (tactile) : hashtags visibles sauf smartphone / tablette (section projets — vignette allégée) */
@media (hover: none) {
  .card--commercify-brand .card__hashtags--commercify {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    margin-bottom: 1.65rem;
    overflow: visible;
  }
}

@media (min-width: 1025px) and (hover: hover) {
  body.page-projects #projets-grid-open .card--hub-open.card--featured:hover .card__hashtags--commercify,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:focus-within .card__hashtags--commercify,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:hover .card__hashtags--genericvoice,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:focus-within .card__hashtags--genericvoice,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:hover .card__hashtags--webterminal,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:focus-within .card__hashtags--webterminal,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:hover .card__hashtags--transcriptit,
  body.page-projects #projets-grid-open .card--hub-open.card--featured:focus-within .card__hashtags--transcriptit,
  body.page-home #projets-grid .card--featured:hover .card__hashtags--commercify,
  body.page-home #projets-grid .card--featured:focus-within .card__hashtags--commercify,
  body.page-home #projets-grid .card--featured:hover .card__hashtags--genericvoice,
  body.page-home #projets-grid .card--featured:focus-within .card__hashtags--genericvoice,
  body.page-home #projets-grid .card--featured:hover .card__hashtags--webterminal,
  body.page-home #projets-grid .card--featured:focus-within .card__hashtags--webterminal,
  body.page-home #projets-grid .card--featured:hover .card__hashtags--transcriptit,
  body.page-home #projets-grid .card--featured:focus-within .card__hashtags--transcriptit {
    pointer-events: auto;
  }
}

/* Lien plein carte (mobile / tablette uniquement, voir media query ci-dessous) */
.card__commercify-stretched-link {
  display: none;
}

/* Smartphone & tablette : pas de hashtags ni de boutons sur la vignette ; clic = page projet */
@media (max-width: 1024px) {
  .card--commercify-brand .card__hashtags--commercify {
    display: none !important;
  }

  .card--genericvoice-brand .card__hashtags--genericvoice {
    display: none !important;
  }

  .card--webterminal-brand .card__hashtags--webterminal {
    display: none !important;
  }

  .card--transcriptit-brand .card__hashtags--transcriptit {
    display: none !important;
  }

  .card--commercify-brand .card__commercify-site-links {
    display: none !important;
  }

  .card--commercify-brand.card--featured .card__gv-cta {
    position: relative;
    z-index: 5;
  }

  .card__commercify-stretched-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    text-decoration: none;
  }

  .card--commercify-brand .card__body--commercify {
    padding-bottom: 0.35rem;
  }

  .card--commercify-brand .card__badge--commercify-beta {
    top: 0.45rem;
    left: 0.45rem;
    padding: 0.2rem 0.42rem;
    font-size: 0.48rem;
    letter-spacing: 0.06em;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 1px 6px rgba(251, 146, 60, 0.35),
      0 0 12px rgba(234, 88, 12, 0.2);
  }

  .card--commercify-brand .card__badge--project-active {
    top: 0.45rem;
    right: 0.45rem;
    font-size: 0.48rem;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.42rem;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 1px 8px rgba(34, 197, 94, 0.38),
      0 0 14px rgba(34, 197, 94, 0.22);
  }

  .card--featured.card--commercify-brand .card__media .card__commercify-logo {
    max-height: clamp(2.5rem, 8.5vw, 3.85rem);
    object-position: center center;
  }

  /* Bandeau sous les badges → au-dessus du slogan : logo centré verticalement et horizontalement */
  .card__commercify-logo-stage {
    top: clamp(1.85rem, 5vw, 2.4rem);
    bottom: clamp(3.75rem, 18vw, 5rem);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(2.5rem, 10vw, 4.5rem);
  }

  .card--commercify-brand .card__commercify-tagline {
    font-size: clamp(calc(0.82rem * var(--copy-scale)), 2.2vw, calc(0.98rem * var(--copy-scale)));
    padding: 0.28rem 0.45rem;
  }

  .card--commercify-brand.card--featured {
    min-height: 248px;
    padding-top: 0.65rem;
    padding-bottom: 0.45rem;
  }

  .card__body--commercify {
    transform: none;
    margin-top: auto;
  }

  #projets .grid-projects {
    gap: 0.625rem;
    row-gap: 0.625rem;
    column-gap: 0.625rem;
  }

  #projets .grid-projects > * {
    margin-block: 0 !important;
  }
}

/* Smartphone : ~10px entre vignettes (référence type grille portfolio) */
@media (max-width: 767px) {
  #projets .grid-projects {
    gap: 0.625rem !important;
    row-gap: 0.625rem !important;
    column-gap: 0.625rem !important;
  }
}

.card__commercify-site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.55rem;
  width: 100%;
}

.card__commercify-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.85rem;
  font-family: var(--font-sub);
  font-size: calc(0.74rem * var(--copy-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(255, 245, 235, 0.96);
  background: rgba(255, 106, 0, 0.14);
  border: 1px solid rgba(255, 184, 112, 0.48);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.card__commercify-site-btn:hover {
  color: #ffffff;
  background: rgba(255, 106, 0, 0.32);
  border-color: rgba(255, 210, 170, 0.72);
  box-shadow: 0 0 22px rgba(255, 184, 112, 0.28);
  transform: translateY(-1px);
}

.card__commercify-site-btn:focus-visible {
  outline: 2px solid var(--cf-cta-orange);
  outline-offset: 2px;
}

/* Grids */
.grid-projects {
  display: grid;
  gap: var(--grid-projects-gap, 1.25rem);
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  justify-content: center;
  justify-items: stretch;
}

.grid-projects > * {
  min-width: 0;
}

/* Smartphone : une colonne pleine largeur */
@media (max-width: 767px) {
  .grid-projects > * {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

/*
 * Tablette étroite (768–899 px) : une colonne pleine largeur (deux vignettes côte à côte trop serrées).
 * Tablette large (900–1023 px) : deux colonnes ; dernière vignette seule centrée (~½ rangée).
 */
@media (min-width: 768px) and (max-width: 899px) {
  .grid-projects {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-projects > * {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

/*
 * Tablette large → iPad Pro portrait (900–1279 px) : 2 colonnes ;
 * dernière vignette seule centrée (~½ rangée). Évite le piège 3 col + featured span 2 à 1024 px.
 */
@media (min-width: 900px) and (max-width: 1279px) {
  .grid-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-projects > *:only-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .grid-projects > *:last-child:nth-child(odd):not(.card--in-progress-featured):not(.card--pending-featured):not(.card--pending-span-2):not(.card--pending-construction) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - var(--grid-projects-gap, 1.05rem)) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  body.page-projects #projets-grid-pending > .card--pending-span-2,
  body.page-projects #projets-grid-pending > .card--pending-featured,
  body.page-projects #projets-grid-pending > .card--pending-construction,
  body.page-projects #projets-grid-in-progress > .card--in-progress-featured {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: min(
      100%,
      calc(2 * var(--project-card-col-min, 17.5rem) + var(--grid-projects-gap, 1.05rem))
    );
  }
}

@media (min-width: 1280px) {
  .grid-projects {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .grid-projects > *:last-child:nth-child(odd):not(.card--in-progress-featured):not(.card--pending-featured):not(.card--pending-span-2):not(.card--pending-construction) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - var(--grid-projects-gap, 1.5rem)) / 2);
  }
}


.grid-2 {
  display: grid;
  gap: 2.5rem;
}

.grid-2--single {
  grid-template-columns: 1fr;
  max-width: 42rem;
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .grid-2--single {
    grid-template-columns: 1fr;
  }
}

.grid-videos {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.avatar-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.avatar-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg) 8%);
  min-height: 112px;
}

.avatar-card:hover {
  border-color: var(--accent-hover);
}

.avatar-card__badge {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 106, 0, 0.7);
  color: var(--accent);
  font-family: var(--font-h);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  background: rgba(255, 106, 0, 0.08);
}

.avatar-card__body {
  min-width: 0;
}

.avatar-card h3 {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  line-height: 1.2;
}

.avatar-card__handle {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: calc(0.79rem * var(--copy-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
}

.avatar-card .text-secondary {
  font-size: calc(0.8rem * var(--copy-scale));
  line-height: 1.35;
}

.avatar-card--placeholder {
  border-style: dashed;
  opacity: 0.9;
}

.avatar-card--placeholder .avatar-card__badge {
  font-size: 0.95rem;
}

html[data-theme="light"] .avatar-card {
  background: color-mix(in srgb, var(--bg-card) 97%, #111 3%);
}

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

@media (min-width: 1024px) {
  .grid-videos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Section #communaute : tablette / large intermédiaire — 2×2 vignettes, puis blocs YouTube et co-financement empilés (pas 4 colonnes ni paire de cartes côte à côte dès 1100px). */
@media (min-width: 768px) and (max-width: 1199px) {
  #communaute .grid-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #communaute .community-cta-grid {
    grid-template-columns: 1fr;
  }
}

.video-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  background: var(--bg-card);
}

.video-card__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: var(--bg);
}

.video-card__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card__cap {
  padding: 1rem;
}

/* Section #communaute — légende + note fondateur sous chaque vignette, centrés dans le cadre */
#communaute .video-card__cap {
  text-align: center;
}

/* Annotation fondateur (non cliquable) sous la légende des cartes communauté */
#communaute .video-card__founder-note {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid color-mix(in srgb, var(--accent-2-dim) 55%, var(--accent-dim) 45%);
  background: color-mix(in srgb, var(--accent-2) 6%, var(--bg-card) 94%);
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--accent-2) 12%);
  font-size: calc(0.78rem * var(--copy-scale, 1));
  line-height: 1.38;
  font-style: italic;
  text-align: center;
  text-wrap: balance;
}

html[data-theme="light"] #communaute .video-card__founder-note {
  background: color-mix(in srgb, var(--accent-2) 5%, var(--bg-card) 95%);
}

/* === Section #communaute — accordéons sur les 4 cartes vidéo (note fondateur cartes 1-3 + texte long carte 4) === */
#communaute .video-card__reveal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

#communaute .video-card__reveal-shell {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.32s ease,
    margin-top 0.32s ease;
  margin-top: 0;
}

#communaute .video-card__reveal-shell > * {
  overflow: hidden;
  min-height: 0;
}

#communaute .video-card__reveal-shell[data-dp-tagline-expanded="1"] {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.65rem;
}

/* Carte 4 — repli par clamp 4 lignes, plutôt que masquage total : on garde un teaser visible. */
#communaute .video-card__reveal-shell--bigtext {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
  position: relative;
}

#communaute .video-card__reveal-shell--bigtext > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  transition: -webkit-line-clamp 0.32s ease;
}

#communaute .video-card__reveal-shell--bigtext[data-dp-tagline-expanded="1"] > strong {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#communaute .video-card__reveal-shell--bigtext[data-dp-tagline-expanded="0"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4em;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg-card) 70%, transparent) 55%,
    var(--bg-card) 100%
  );
}

/* Bouton flèche — halo radial chaud (vert ambré), double anneau, chevron qui pivote */
#communaute .video-card__reveal-toggle {
  position: relative;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0.55rem 0 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent-2) 38%, var(--accent-dim) 62%);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--accent-2) 12%);
  background:
    radial-gradient(
      circle at 32% 28%,
      color-mix(in srgb, var(--accent-2) 22%, transparent) 0%,
      transparent 65%
    ),
    color-mix(in srgb, var(--bg-card) 92%, var(--accent-2) 8%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 3px 12px color-mix(in srgb, var(--accent-2) 14%, transparent),
    0 1px 4px rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    background-color 0.22s ease;
}

#communaute .video-card__reveal-toggle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 38%, transparent);
  opacity: 0.55;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease;
}

#communaute .video-card__reveal-toggle:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-2) 58%, var(--accent-dim) 42%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 18px color-mix(in srgb, var(--accent-2) 24%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.22);
}

#communaute .video-card__reveal-toggle:hover::before {
  opacity: 0.95;
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
}

#communaute .video-card__reveal-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#communaute .video-card__reveal-toggle__chev {
  display: block;
  width: 0.52rem;
  height: 0.52rem;
  margin-top: -0.14rem;
  pointer-events: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.28s ease;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--accent-2) 26%, transparent));
}

#communaute .video-card__reveal-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent-2) 62%, var(--accent-dim) 38%);
  color: var(--text);
  background:
    radial-gradient(
      circle at 32% 28%,
      color-mix(in srgb, var(--accent-2) 28%, transparent) 0%,
      transparent 70%
    ),
    color-mix(in srgb, var(--bg-card) 88%, var(--accent-2) 12%);
}

#communaute .video-card__reveal-toggle[aria-expanded="true"]::before {
  opacity: 0.85;
  border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
}

#communaute .video-card__reveal-toggle[aria-expanded="true"] .video-card__reveal-toggle__chev {
  margin-top: 0.14rem;
  transform: rotate(225deg);
}

html[data-theme="light"] #communaute .video-card__reveal-toggle {
  background:
    radial-gradient(
      circle at 32% 28%,
      color-mix(in srgb, var(--accent-2) 14%, transparent) 0%,
      transparent 70%
    ),
    color-mix(in srgb, var(--bg-card) 96%, var(--accent-2) 4%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 3px 10px color-mix(in srgb, var(--accent-2) 12%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] #communaute .video-card__reveal-shell--bigtext[data-dp-tagline-expanded="0"]::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg-card) 75%, transparent) 55%,
    var(--bg-card) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  #communaute .video-card__reveal-shell,
  #communaute .video-card__reveal-shell--bigtext > strong,
  #communaute .video-card__reveal-toggle,
  #communaute .video-card__reveal-toggle::before,
  #communaute .video-card__reveal-toggle__chev {
    transition: none;
  }
}

/* Coming soon cards */
.grid-soon {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .grid-soon {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-soon {
    grid-template-columns: repeat(5, 1fr);
  }
}

.card-soon {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  min-height: 160px;
  background: var(--bg-card);
}

.card-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.02) 2px,
    rgba(255, 255, 255, 0.02) 4px
  );
  pointer-events: none;
  z-index: 2;
  /* Le scan est coûteux en continu : activé seulement pendant l’intro. */
  animation: none;
}

html.dp-ambient-anim .card-soon::before {
  animation: scan 6s linear infinite;
}

@keyframes scan {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.3;
  }
}

.card-soon__img {
  position: absolute;
  inset: 0;
  filter: blur(4px) grayscale(1) contrast(1.08);
  opacity: 0.42;
  transform: scale(1.1);
}

.card-soon__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-soon__body {
  position: relative;
  z-index: 3;
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-soon__badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* Archive grid */
.grid-archive {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line-subtle);
}

@media (min-width: 768px) {
  .grid-archive {
    grid-template-columns: repeat(8, 1fr);
  }
}

.archive-cell {
  aspect-ratio: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.2s, color 0.2s;
  position: relative;
}

.archive-cell:hover {
  background: var(--bg-card);
  color: var(--accent);
}

.archive-cell__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.35rem;
  font-size: 0.65rem;
  text-align: center;
  background: rgba(10, 10, 10, 0.85);
  opacity: 0;
  transition: opacity 0.2s;
}

.archive-cell:hover .archive-cell__label {
  opacity: 1;
}

/* Service list */
.service-row {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-subtle);
}

.service-row__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--accent);
}

/* Footer — bandeau beige, typo forte, newsletter sur 2 colonnes */
.site-footer {
  --footer-stone: #0d0d0d;
  --footer-stone-soft: #1c1c1c;
  --footer-ink: #0a0a0a;
  --footer-link: #141414;
  /* Survol : fonds opaques (plus de « translucide + triple ombre ») */
  --footer-link-hover-bg: #fff3e8;
  --footer-link-hover-border: var(--accent);
  position: relative;
  isolation: isolate;
  background-color: var(--footer-beige);
  background-image:
    radial-gradient(ellipse 94% 88% at 100% -5%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 56%),
    radial-gradient(ellipse 80% 78% at -4% 105%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 50%),
    linear-gradient(
      165deg,
      var(--footer-beige) 0%,
      var(--footer-beige-deep) 55%,
      var(--footer-gradient-end) 100%
    );
  border-top: 3px solid color-mix(in srgb, rgba(0, 0, 0, 0.18) 72%, var(--accent-2) 28%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 -10px 36px color-mix(in srgb, var(--accent-2-dim) 22%, transparent);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3vw, 2.25rem);
  margin-top: 2rem;
  color: var(--footer-ink);
}

html[data-theme="light"] .site-footer {
  --footer-link-hover-bg: #fff0e4;
}

html[data-theme="dark"] .site-footer {
  --footer-stone: #a8adb8;
  --footer-stone-soft: #8b909c;
  --footer-ink: #e8eaef;
  --footer-link: #cfd4df;
  --footer-link-hover-bg: #2a231c;
  background-color: var(--footer-bg);
  background-image:
    radial-gradient(ellipse 92% 85% at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 54%),
    radial-gradient(ellipse 78% 72% at 0% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%),
    linear-gradient(165deg, var(--bg-muted) 0%, var(--footer-bg) 100%);
  border-top: 3px solid color-mix(in srgb, rgba(255, 255, 255, 0.1) 68%, var(--accent-2) 32%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 -12px 40px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
  color: var(--footer-ink);
}

/* --------------------------------------------------------------------------
   Footer — méthode 4 vecteurs : grain, entrées échelonnées, typo extrême,
   signal froid (accent-2), transitions choregraphiées.
   -------------------------------------------------------------------------- */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.042;
  mix-blend-mode: normal;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 78% 16%, rgba(255, 106, 0, 0.05) 0%, transparent 38%),
    radial-gradient(circle at 52% 88%, rgba(0, 0, 0, 0.12) 0%, transparent 46%),
    repeating-linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.014) 0px,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 3px
    );
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

@keyframes dp-footer-col-in {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-footer .footer-grid > .footer-col {
  animation: dp-footer-col-in 0.58s var(--ease-choreography) both;
}

.site-footer .footer-grid > .footer-col:nth-child(1) {
  animation-delay: 0.06s;
}

.site-footer .footer-grid > .footer-col:nth-child(2) {
  animation-delay: 0.14s;
}

.site-footer .footer-grid > .footer-col:nth-child(3) {
  animation-delay: 0.22s;
}

.site-footer .footer-bottom {
  animation: dp-footer-col-in 0.55s var(--ease-choreography) both;
  animation-delay: 0.3s;
  border-top-color: color-mix(in srgb, rgba(0, 0, 0, 0.14) 62%, var(--accent-2) 38%);
}

html[data-theme="dark"] .site-footer .footer-bottom {
  border-top-color: color-mix(in srgb, rgba(255, 255, 255, 0.12) 58%, var(--accent-2) 42%);
}

.site-footer .footer-brand-title,
.site-footer .footer-newsletter-title,
.site-footer .footer-social-title {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: var(--tracking-tight-display);
}

.site-footer .footer-newsletter__intro {
  font-weight: 400;
  letter-spacing: var(--tracking-body-copy);
}

.site-footer .footer-brand-links a,
.site-footer .footer-col--social a {
  font-weight: 500;
  transition:
    color 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    background-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
}

.site-footer .footer-brand-links a:hover,
.site-footer .footer-col--social a:hover,
.site-footer .footer-brand-links a:focus-visible,
.site-footer .footer-col--social a:focus-visible {
  font-weight: var(--weight-section-display);
  border-color: color-mix(in srgb, var(--footer-link-hover-border) 58%, var(--accent-2) 42%);
  box-shadow: 0 0 0 1px var(--accent-2-dim);
}

.site-footer .footer-social-link__label {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.07em;
  font-size: 0.92em;
}

.site-footer .footer-newsletter__field label {
  font-weight: var(--weight-section-display);
  letter-spacing: 0.04em;
}

.site-footer .footer-newsletter__field input,
.site-footer .footer-newsletter__captcha-input {
  transition:
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
}

.site-footer .footer-newsletter__field input:focus,
.site-footer .footer-newsletter__captcha-input:focus {
  border-color: color-mix(in srgb, #0a0a0a 55%, var(--accent-2) 45%);
  box-shadow: 0 0 0 2px color-mix(in srgb, rgba(0, 0, 0, 0.1) 60%, var(--accent-2-dim) 40%);
}

html[data-theme="dark"] .site-footer .footer-newsletter__field input:focus,
html[data-theme="dark"] .site-footer .footer-newsletter__captcha-input:focus {
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.35) 50%, var(--accent-2) 50%);
  box-shadow: 0 0 0 2px color-mix(in srgb, rgba(255, 255, 255, 0.08) 55%, var(--accent-2-dim) 45%);
}

.site-footer .footer-last-update {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(0.8rem, 0.55vw + 0.58rem, 0.95rem);
}

.site-footer .footer-bottom {
  font-weight: 500;
}

.site-footer .footer-bottom__copy {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: 0.035em;
}

.site-footer .footer-bottom__copy-symbol {
  display: inline-block;
  font-size: clamp(1.85rem, 3.6vw + 1rem, 3.75rem);
  font-weight: 700;
  line-height: 0.9;
  vertical-align: -0.12em;
  margin-inline-end: 0.08em;
}

@media (min-width: 768px) {
  .site-footer .footer-col--social {
    border-left-color: color-mix(in srgb, rgba(0, 0, 0, 0.12) 55%, var(--accent-2) 45%);
  }

  html[data-theme="dark"] .site-footer .footer-col--social {
    border-left-color: color-mix(in srgb, rgba(255, 255, 255, 0.12) 55%, var(--accent-2) 45%);
  }
}

@media (min-width: 1200px) {
  .site-footer .footer-newsletter--wide {
    border-left-color: color-mix(in srgb, rgba(0, 0, 0, 0.12) 55%, var(--accent-2) 45%);
  }

  html[data-theme="dark"] .site-footer .footer-newsletter--wide {
    border-left-color: color-mix(in srgb, rgba(255, 255, 255, 0.12) 55%, var(--accent-2) 45%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-grid > .footer-col,
  .site-footer .footer-bottom {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-footer::before {
    opacity: 0.02;
  }
}

html[data-theme="dark"] .footer-brand-title,
html[data-theme="dark"] .footer-newsletter-title,
html[data-theme="dark"] .footer-social-title {
  color: var(--footer-ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .footer-brand-links a:hover,
html[data-theme="dark"] .footer-col--social a:hover,
html[data-theme="dark"] .footer-brand-links a:focus-visible,
html[data-theme="dark"] .footer-col--social a:focus-visible {
  color: #fff;
  text-shadow: none;
}

@media (min-width: 768px) {
  html[data-theme="dark"] .footer-col--social {
    border-left-color: rgba(255, 255, 255, 0.12);
  }
}

@media (min-width: 1200px) {
  html[data-theme="dark"] .footer-newsletter--wide {
    border-left-color: rgba(255, 255, 255, 0.12);
  }
}

html[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .site-footer .footer-newsletter__field input,
html[data-theme="dark"] .site-footer .footer-newsletter__captcha-input {
  background: #2e3038;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .site-footer .footer-newsletter__field input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .site-footer .footer-newsletter__field input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] .site-footer .footer-newsletter__captcha-math {
  background: #33353f;
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .site-footer .footer-newsletter__captcha-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .site-footer .footer-newsletter__puzzle-track {
  border-color: rgba(255, 255, 255, 0.14);
  background: #22242c;
}

html[data-theme="dark"] .site-footer .footer-newsletter__puzzle-zone--start {
  background: #2c2e38;
  border-right-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .site-footer .footer-newsletter__puzzle-zone--target {
  background: #1a2522;
}

html[data-theme="dark"] .site-footer .footer-newsletter__puzzle-zone--target::after {
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] #footer-nl-puzzle.is-validated .footer-newsletter__puzzle-zone--target::after {
  background: #1e3d2e;
}

html[data-theme="dark"] .site-footer .footer-newsletter__intent-rail {
  border-color: rgba(255, 255, 255, 0.16);
  background: #1e2026;
}

html[data-theme="dark"] .site-footer .footer-newsletter__intent-opt + .footer-newsletter__intent-opt {
  border-left-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .site-footer .footer-newsletter__intent-rail:has(#footer-nl-intent-sub:checked) .footer-newsletter__intent-opt--unsubscribe {
  background: #2c2e36;
  color: #9ca3af;
}

html[data-theme="dark"] .site-footer .footer-newsletter__intent-rail:has(#footer-nl-intent-unsub:checked) .footer-newsletter__intent-opt--subscribe {
  background: #2c2e36;
  color: #9ca3af;
}

html[data-theme="dark"] .site-footer .footer-newsletter__intent-opt--subscribe {
  background: #323843;
  color: #b8c0d0;
}

html[data-theme="dark"] .site-footer .footer-newsletter__intent-opt--subscribe:has(.footer-newsletter__intent-input:checked) {
  background: linear-gradient(165deg, #70788a 0%, #575e70 100%);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .site-footer .footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn {
  background: linear-gradient(165deg, #6d7688 0%, #555c6e 100%);
  border-color: #414856;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .site-footer .footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn:hover {
  background: linear-gradient(165deg, #7c8699 0%, #636b7e 100%);
  border-color: #4a5162;
}

html[data-theme="dark"] .site-footer .footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn:focus-visible {
  background: linear-gradient(165deg, #7c8699 0%, #636b7e 100%);
  border-color: #4a5162;
  box-shadow: 0 0 0 3px rgba(148, 156, 175, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.footer-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

/* Tablette + petits écrans « large » : max 2 colonnes (marque | réseaux), newsletter en pleine largeur dessous — évite le chevauchement à 1024px (iPad paysage, etc.). */
@media (min-width: 768px) and (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.25rem, 4.5vw, 3.25rem) clamp(1.85rem, 4vw, 2.75rem);
  }

  .footer-col--brand {
    order: 1;
  }

  .footer-col--social {
    order: 2;
  }

  .footer-newsletter--wide {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (min-width: 1200px) {
  .footer-grid {
    /* Marque élargie, newsletter resserrée (2 sous-colonnes plus étroites) */
    grid-template-columns: minmax(0, 1.58fr) minmax(0, 0.92fr) minmax(0, 0.76fr) minmax(0, 0.76fr);
    align-items: start;
    column-gap: clamp(2.25rem, 4.5vw, 4rem);
    row-gap: clamp(2rem, 3vw, 2.85rem);
  }

  .footer-col--brand {
    grid-column: 1;
    padding-inline-end: clamp(0.35rem, 1.2vw, 1rem);
  }

  .footer-col--social {
    grid-column: 2;
  }

  .footer-newsletter--wide {
    grid-column: 3 / 5;
    justify-self: stretch;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    padding-left: clamp(1.75rem, 4.5vw, 3rem);
  }
}

/* Séparateurs verticaux entre colonnes (pas dans .footer-bottom) */
@media (min-width: 768px) {
  .footer-col--social {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    padding-left: clamp(1.5rem, 4vw, 2.75rem);
  }
}

.footer-brand-title,
.footer-newsletter-title,
.footer-social-title {
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 1.8vw + 0.5rem, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  color: var(--footer-ink);
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.footer-brand-title {
  white-space: nowrap;
  hyphens: none;
  overflow: visible;
}

/* Hashtag cliquable : ne pas hériter du style carte (corps réduit) — égaler les h3 colonne footer */
.footer-brand-title > a.card__hashtag-link {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  vertical-align: baseline;
}

.footer-brand-title > a.card__hashtag-link .dp-hashtag {
  font: inherit;
}

.footer-brand-title > a.card__hashtag-link:hover,
.footer-brand-title > a.card__hashtag-link:focus-visible {
  color: inherit;
  border-bottom: none;
}

.footer-brand-title > a.card__hashtag-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-2) 65%, transparent);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 0.75rem;
}

.footer-social-networks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-social-networks li {
  margin-bottom: 0;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.footer-social-link__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  color: var(--accent);
  opacity: 0.92;
}

.footer-social-link__icon svg {
  display: block;
}

.footer-brand-links a,
.footer-col--social a {
  color: var(--footer-link);
  font-size: clamp(1rem, 1.1vw + 0.55rem, 1.2rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  display: inline-block;
  padding: 0.4em 0.65em;
  margin: -0.15em -0.15em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    color var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    background-color var(--ui-duration) var(--ui-ease);
}

.footer-brand-links a:hover,
.footer-col--social a:hover,
.footer-brand-links a:focus-visible,
.footer-col--social a:focus-visible {
  color: #000;
  text-shadow: none;
  background-color: var(--footer-link-hover-bg);
  border-color: var(--footer-link-hover-border);
  outline: none;
}

.footer-brand-links a:active,
.footer-col--social a:active {
  transform: translateY(1px);
}

.footer-brand-links__inline-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.footer-brand-links__sep {
  color: var(--footer-stone-soft);
  font-weight: 600;
  user-select: none;
}

/* Formulaire de contact — même logique d’encadré que .footer-newsletter__form */
.site-footer .footer-brand-links a.footer-brand-links__contact {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.15rem 0 0.35rem;
  padding: clamp(0.65rem, 1.5vw, 0.95rem) clamp(0.7rem, 1.8vw, 1.05rem);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: calc(var(--radius-sm) + 2px);
  background: color-mix(in srgb, var(--footer-beige) 88%, #fff 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    border-color 0.3s var(--ease-choreography),
    box-shadow 0.3s var(--ease-choreography),
    background-color 0.3s var(--ease-choreography),
    color 0.3s var(--ease-choreography);
}

.site-footer .footer-brand-links a.footer-brand-links__contact:hover,
.site-footer .footer-brand-links a.footer-brand-links__contact:focus-visible {
  color: #000;
  text-shadow: none;
  border-color: color-mix(in srgb, rgba(10, 10, 10, 0.42) 50%, var(--accent-2) 50%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  background: color-mix(in srgb, var(--footer-beige) 80%, #fff 20%);
  outline: none;
}

/* Page courante — colonne marque et colonne réseaux : même bandeau d’accent */
.site-footer .footer-brand-links a.is-current,
.site-footer .footer-col--social a.footer-social-link.is-current {
  font-weight: 720;
  color: var(--footer-ink);
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 0 0 999px color-mix(in srgb, var(--footer-link-hover-bg) 42%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.site-footer .footer-brand-links a.is-current:hover,
.site-footer .footer-brand-links a.is-current:focus-visible,
.site-footer .footer-col--social a.footer-social-link.is-current:hover,
.site-footer .footer-col--social a.footer-social-link.is-current:focus-visible {
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 0 0 999px color-mix(in srgb, var(--footer-link-hover-bg) 62%, transparent);
  border-color: color-mix(in srgb, var(--footer-link-hover-border) 50%, var(--accent-2) 50%);
}

/* Contact : encadré type CTA seulement hors pages « voisinage » du footer (CGU, plan du site, etc.) */
.site-footer .footer-brand-links a.footer-brand-links__contact.footer-brand-links__contact--compact {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: -0.15em -0.15em;
  padding: 0.4em 0.65em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
}

.site-footer .footer-brand-links a.footer-brand-links__contact.footer-brand-links__contact--compact:hover,
.site-footer .footer-brand-links a.footer-brand-links__contact.footer-brand-links__contact--compact:focus-visible {
  color: #000;
  text-shadow: none;
  border-color: var(--footer-link-hover-border);
  box-shadow: 0 0 0 1px var(--accent-2-dim);
  background: var(--footer-link-hover-bg);
  outline: none;
}

/* Page contact : CTA + marqueur « ici » cohérent avec les autres entrées actives */
.site-footer .footer-brand-links a.footer-brand-links__contact.is-current:not(.footer-brand-links__contact--compact) {
  border-color: color-mix(in srgb, var(--accent) 35%, rgba(0, 0, 0, 0.12));
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.site-footer .footer-brand-links a.footer-brand-links__contact.is-current:not(.footer-brand-links__contact--compact):hover,
.site-footer .footer-brand-links a.footer-brand-links__contact.is-current:not(.footer-brand-links__contact--compact):focus-visible {
  border-color: color-mix(in srgb, rgba(10, 10, 10, 0.42) 45%, var(--accent-2) 55%);
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 32%, transparent);
  background: color-mix(in srgb, var(--footer-beige) 78%, #fff 22%);
}

.footer-newsletter {
  max-width: none;
}

.footer-newsletter-title {
  margin-bottom: 0.5rem;
}

.footer-newsletter__intro {
  font-size: clamp(0.95rem, 0.8vw + 0.65rem, 1.1rem);
  line-height: 1.5;
  margin: 0 0 1rem;
  color: var(--footer-stone-soft);
  font-weight: 500;
}

.footer-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(0.7rem, 1.8vw, 1.05rem);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: calc(var(--radius-sm) + 2px);
  background: color-mix(in srgb, var(--footer-beige) 88%, #fff 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    border-color 0.3s var(--ease-choreography),
    box-shadow 0.3s var(--ease-choreography),
    background-color 0.3s var(--ease-choreography);
}

/* Encadré renforcé au survol / focus dans le bloc (≠ bordure des champs au focus) */
.footer-newsletter__form:hover,
.footer-newsletter__form:focus-within {
  border-color: color-mix(in srgb, rgba(10, 10, 10, 0.42) 50%, var(--accent-2) 50%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  background: color-mix(in srgb, var(--footer-beige) 80%, #fff 20%);
}

.footer-newsletter__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-newsletter__field label {
  font-size: clamp(0.85rem, 0.5vw + 0.65rem, 1rem);
  font-weight: 700;
  color: var(--footer-stone);
  letter-spacing: 0.03em;
}

.footer-newsletter__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  font-size: clamp(0.95rem, 0.6vw + 0.7rem, 1.1rem);
  font-family: var(--font-body);
  color: var(--footer-ink);
  background: #ebe4d8;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

.footer-newsletter__field input:focus {
  outline: none;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.footer-newsletter__field input::placeholder {
  color: rgba(0, 0, 0, 0.38);
}

.footer-newsletter__captcha {
  margin: 0.15rem 0 0;
}

.footer-newsletter__captcha-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  cursor: pointer;
  font-size: clamp(0.78rem, 0.45vw + 0.6rem, 0.92rem);
  font-weight: 700;
  color: var(--footer-stone);
  min-width: 0;
}

.footer-newsletter__captcha-ask {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.footer-newsletter__captcha-math {
  font-family: var(--font-matrix-mono), ui-monospace, monospace;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.4rem;
  background: #ebe8e1;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.footer-newsletter__captcha-input {
  width: 2.85rem;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0.3rem 0.35rem;
  text-align: center;
  font-size: clamp(0.88rem, 0.5vw + 0.62rem, 1rem);
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--footer-ink);
  background: #ebe4d8;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

.footer-newsletter__captcha-input:focus {
  outline: none;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.footer-newsletter__antispam {
  margin: 0.25rem 0 0;
}

.footer-newsletter__antispam-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

.footer-newsletter__antispam-label {
  font-size: clamp(0.78rem, 0.45vw + 0.6rem, 0.92rem);
  font-weight: 700;
  color: var(--footer-stone);
  flex-shrink: 0;
}

.footer-newsletter__puzzle-wrap {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
}

.footer-newsletter__puzzle-track {
  position: relative;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(0, 0, 0, 0.14);
  background: #e8e4dc;
  overflow: visible;
}

.footer-newsletter__puzzle-zone--start,
.footer-newsletter__puzzle-zone--target {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
}

.footer-newsletter__puzzle-zone--start {
  left: 0;
  background: #ece8e0;
  border-right: 1px dashed rgba(0, 0, 0, 0.12);
}

.footer-newsletter__puzzle-zone--target {
  left: 50%;
  background: #e8e4dc;
}

.footer-newsletter__puzzle-zone--target::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dashed rgba(0, 0, 0, 0.22);
  border-radius: 2px;
  pointer-events: none;
}

#footer-nl-puzzle.is-validated .footer-newsletter__puzzle-zone--target::after {
  border-color: #15803d;
  border-style: solid;
  background: #e3f2e8;
}

.footer-newsletter__puzzle-piece {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  touch-action: none;
  cursor: grab;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.18));
}

.footer-newsletter__puzzle-piece:focus-visible {
  outline: 2px solid var(--footer-ink);
  outline-offset: 2px;
}

.footer-newsletter__puzzle-piece.is-dragging {
  cursor: grabbing;
  z-index: 4;
}

.footer-newsletter__puzzle-piece__inner {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #353535 0%, #0c0c0c 100%);
  border: 2px solid #1a1a1a;
  border-radius: 3px;
  position: relative;
  box-sizing: border-box;
}

.footer-newsletter__puzzle-piece__inner::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 14px;
  background: linear-gradient(145deg, #353535 0%, #0c0c0c 100%);
  border: 2px solid #1a1a1a;
  border-left: none;
  border-radius: 0 3px 3px 0;
  box-sizing: border-box;
}

#footer-nl-puzzle.is-validated .footer-newsletter__puzzle-piece__inner,
#footer-nl-puzzle.is-validated .footer-newsletter__puzzle-piece__inner::after {
  background: linear-gradient(145deg, #1a8f4a 0%, #0d3d20 100%);
  border-color: #14532d;
}

#footer-nl-puzzle.is-validated .footer-newsletter__puzzle-piece__inner::after {
  background: linear-gradient(145deg, #1a8f4a 0%, #0d3d20 100%);
}

.footer-newsletter__intent {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.footer-newsletter__intent-rail {
  display: flex;
  border: 2px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #e8e4dc;
}

.footer-newsletter__intent-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.6rem 0.5rem;
  font-size: clamp(0.85rem, 0.55vw + 0.65rem, 1.05rem);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  text-align: center;
  transition:
    background var(--ui-duration) var(--ui-ease),
    color var(--ui-duration) var(--ui-ease),
    opacity var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease);
}

.footer-newsletter__intent-opt + .footer-newsletter__intent-opt {
  border-left: 2px solid rgba(0, 0, 0, 0.15);
}

.footer-newsletter__intent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inactif : teinte ardoise / rouge pour repérer l’action sans confondre */
.footer-newsletter__intent-opt--subscribe {
  background: #e8eaef;
  color: #3a4150;
}

.footer-newsletter__intent-opt--unsubscribe {
  background: #fce8e8;
  color: #7f1d1d;
}

/* Sélectionné : ardoise (abonnement) ou rouge (désabonnement), texte blanc */
.footer-newsletter__intent-opt--subscribe:has(.footer-newsletter__intent-input:checked) {
  background: linear-gradient(165deg, #5b6575 0%, #484f5f 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.footer-newsletter__intent-opt--unsubscribe:has(.footer-newsletter__intent-input:checked) {
  background: #b91c1c;
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #7f1d1d;
}

/* L’option non choisie : nettement atténuée pour que le choix actif saute aux yeux */
.footer-newsletter__intent-rail:has(#footer-nl-intent-sub:checked) .footer-newsletter__intent-opt--unsubscribe {
  background: #eceae6;
  color: #6b6560;
  font-weight: 600;
}

.footer-newsletter__intent-rail:has(#footer-nl-intent-unsub:checked) .footer-newsletter__intent-opt--subscribe {
  background: #eceae6;
  color: #6b6560;
  font-weight: 600;
}

.footer-newsletter__intent-opt:hover {
  opacity: 0.97;
}

.footer-newsletter__intent-opt:focus-within {
  outline: 3px solid var(--footer-ink);
  outline-offset: 0;
  z-index: 1;
}

.footer-newsletter__btn {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: clamp(0.95rem, 0.65vw + 0.7rem, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease);
}

.footer-newsletter__btn-label--unsub {
  display: none;
}

.footer-newsletter__construction-note {
  margin: 0.45rem 0 0;
  padding: 0.45rem 0.6rem 0.4rem;
  font-size: clamp(0.74rem, 0.38vw + 0.58rem, 0.82rem);
  text-align: center;
  color: var(--footer-stone-soft);
  opacity: 0.92;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  letter-spacing: 0.01em;
}

.footer-newsletter__ref-mark {
  display: inline-block;
  margin-left: 0.25rem;
  font-weight: 800;
  font-size: 0.82em;
  transform: translateY(-0.45em);
  color: var(--accent-strong);
}

.footer-newsletter__footnote-mark {
  display: inline-block;
  margin-right: 0.35rem;
  font-weight: 800;
  color: var(--accent-strong);
}

html[data-theme="dark"] .footer-newsletter__construction-note {
  border-top-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .footer-newsletter__form {
  border-color: rgba(255, 255, 255, 0.11);
  background: color-mix(in srgb, var(--footer-bg) 93%, rgba(255, 255, 255, 0.05) 7%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .footer-newsletter__form:hover,
html[data-theme="dark"] .footer-newsletter__form:focus-within {
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.26) 55%, var(--accent-2) 45%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  background: color-mix(in srgb, var(--footer-bg) 88%, rgba(255, 255, 255, 0.06) 12%);
}

html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact {
  border-color: rgba(255, 255, 255, 0.11);
  background: color-mix(in srgb, var(--footer-bg) 93%, rgba(255, 255, 255, 0.05) 7%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact:hover,
html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact:focus-visible {
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.26) 55%, var(--accent-2) 45%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  background: color-mix(in srgb, var(--footer-bg) 88%, rgba(255, 255, 255, 0.06) 12%);
  color: #fff;
}

html[data-theme="dark"] .site-footer .footer-brand-links a.is-current,
html[data-theme="dark"] .site-footer .footer-col--social a.footer-social-link.is-current {
  color: var(--footer-ink);
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 0 0 999px color-mix(in srgb, var(--footer-link-hover-bg) 48%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.12));
}

html[data-theme="dark"] .site-footer .footer-brand-links a.is-current:hover,
html[data-theme="dark"] .site-footer .footer-brand-links a.is-current:focus-visible,
html[data-theme="dark"] .site-footer .footer-col--social a.footer-social-link.is-current:hover,
html[data-theme="dark"] .site-footer .footer-col--social a.footer-social-link.is-current:focus-visible {
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 0 0 999px color-mix(in srgb, var(--footer-link-hover-bg) 68%, transparent);
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.26) 50%, var(--accent-2) 50%);
}

html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact.footer-brand-links__contact--compact {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact.footer-brand-links__contact--compact:hover,
html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact.footer-brand-links__contact--compact:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.26) 55%, var(--accent-2) 45%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 26%, transparent);
  background: color-mix(in srgb, var(--footer-bg) 88%, rgba(255, 255, 255, 0.06) 12%);
}

html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact.is-current:not(.footer-brand-links__contact--compact) {
  border-color: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.14));
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 24%, transparent);
}

html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact.is-current:not(.footer-brand-links__contact--compact):hover,
html[data-theme="dark"] .site-footer .footer-brand-links a.footer-brand-links__contact.is-current:not(.footer-brand-links__contact--compact):focus-visible {
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.26) 50%, var(--accent-2) 50%);
  box-shadow:
    inset 3px 0 0 0 var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 30%, transparent);
  background: color-mix(in srgb, var(--footer-bg) 86%, rgba(255, 255, 255, 0.07) 14%);
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn-label--sub {
  display: none;
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn-label--unsub {
  display: inline;
}

/* Bouton d’envoi : même code couleur que le choix (sans attendre le survol) */
.footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn {
  background: linear-gradient(165deg, #5b6575 0%, #3d4452 100%);
  border-color: #2f343f;
  color: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn span {
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn:hover {
  background: linear-gradient(165deg, #697384 0%, #525a6a 100%);
  border-color: #343947;
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn:hover span {
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn {
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn span {
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn:hover {
  background: #991b1b;
  border-color: #7f1d1d;
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn:hover span {
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn:focus-visible {
  background: linear-gradient(165deg, #697384 0%, #525a6a 100%);
  border-color: #343947;
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(91, 101, 117, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.footer-newsletter__form:has(#footer-nl-intent-sub:checked) .footer-newsletter__btn:focus-visible span {
  color: #fff;
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn:focus-visible {
  background: #991b1b;
  border-color: #7f1d1d;
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.5);
}

.footer-newsletter__form:has(#footer-nl-intent-unsub:checked) .footer-newsletter__btn:focus-visible span {
  color: #fff;
}

.footer-bottom {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 2px solid rgba(0, 0, 0, 0.14);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  text-align: start;
  font-size: clamp(0.9rem, 0.7vw + 0.65rem, 1.05rem);
  color: var(--footer-stone-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.footer-last-update {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  font-size: clamp(0.85rem, 0.65vw + 0.6rem, 1rem);
  color: var(--footer-stone-soft);
  max-width: 100%;
  align-items: end;
}

/* Pastille « site en construction » — lisible, chaleureuse, peu saturée */
.site-footer .footer-last-update__construction {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42em;
  margin: 0;
  padding: 0.4em 0.82em 0.44em 0.72em;
  border-radius: 999px;
  font-family: var(--font-sub);
  font-size: clamp(0.72rem, 0.46vw + 0.58rem, 0.86rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.035em;
  text-align: end;
  max-width: min(100%, 42ch);
  color: color-mix(in srgb, #7c2d2d 48%, var(--footer-ink) 52%);
  background: linear-gradient(
    168deg,
    color-mix(in srgb, #fff 55%, var(--footer-beige) 45%) 0%,
    color-mix(in srgb, #fecaca 18%, var(--footer-beige-deep) 82%) 100%
  );
  border: 1px solid color-mix(in srgb, #c48888 42%, rgba(0, 0, 0, 0.1) 58%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 1px 2px color-mix(in srgb, rgba(0, 0, 0, 0.06) 100%, transparent),
    0 4px 18px color-mix(in srgb, #b91c1c 08%, transparent);
}

.site-footer .footer-last-update__construction::before {
  content: "";
  flex-shrink: 0;
  width: 0.42em;
  height: 0.42em;
  margin-inline-end: 0.02em;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    #fecaca 0%,
    color-mix(in srgb, #e07878 70%, #b45353 30%) 52%,
    #92400e 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent),
    0 0 10px color-mix(in srgb, #dc2626 22%, transparent);
}

html[data-theme="dark"] .site-footer .footer-last-update__construction {
  color: color-mix(in srgb, #fecaca 78%, var(--footer-ink) 22%);
  background: linear-gradient(
    172deg,
    color-mix(in srgb, #3f1010 55%, var(--footer-bg) 45%) 0%,
    color-mix(in srgb, #1c0a0a 70%, var(--bg-muted) 30%) 100%
  );
  border-color: color-mix(in srgb, #fca5a5 28%, rgba(255, 255, 255, 0.12) 72%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 06%, transparent),
    0 2px 14px color-mix(in srgb, #000 40%, transparent),
    0 0 24px color-mix(in srgb, #ef4444 12%, transparent);
}

html[data-theme="dark"] .site-footer .footer-last-update__construction::before {
  background: radial-gradient(
    circle at 32% 28%,
    #fecaca 0%,
    #f87171 45%,
    #9f1239 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 18%, transparent),
    0 0 12px color-mix(in srgb, #f87171 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-last-update__construction::before {
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 40%, transparent);
  }

  html[data-theme="dark"] .site-footer .footer-last-update__construction::before {
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
  }
}

/* Ligne du bas : teinte accent très faible, toujours petite et discrète */
.site-footer .footer-bottom__wip {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  padding-block: 0.25rem 0;
  margin-block-start: 0.15rem;
  font-family: var(--font-matrix-mono);
  font-size: clamp(0.58rem, 0.35vw + 0.48rem, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  color: color-mix(in srgb, var(--accent-2) 38%, var(--footer-stone-soft) 62%);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

html[data-theme="dark"] .site-footer .footer-bottom__wip {
  color: color-mix(in srgb, var(--accent-2) 44%, var(--footer-stone-soft) 56%);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 14%, transparent);
}

/* Donation : CTA vert volumineux, brillant, distinct du bleu PayPal historique */
.site-footer .footer-bottom__donate-cta {
  display: block;
  align-self: center;
  width: 100%;
  max-width: min(26rem, 100%);
  margin-block: 0.4rem 0;
  margin-inline: 0;
  padding-block: clamp(0.78rem, 2.8vw, 1.2rem);
  padding-inline: clamp(1.35rem, 5vw, 2.35rem);
  border-radius: 0.55rem;
  border: 1px solid #0f6b3a;
  background: linear-gradient(
    168deg,
    #4ade80 0%,
    #22c55e 26%,
    #16a34a 58%,
    #15803d 100%
  );
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: clamp(1rem, 1.45vw + 0.62rem, 1.32rem);
  letter-spacing: 0.065em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.22;
  transition:
    transform var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    filter var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 6px 28px rgba(34, 197, 94, 0.44),
    0 2px 10px rgba(0, 0, 0, 0.12);
}

.site-footer .footer-bottom__donate-cta:hover {
  background: linear-gradient(
    168deg,
    #6ee7a8 0%,
    #4ade80 28%,
    #22c55e 62%,
    #16a34a 100%
  );
  border-color: #059669;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 10px 36px rgba(52, 211, 153, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.14);
  filter: saturate(1.06);
}

.site-footer .footer-bottom__donate-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.26) inset,
    0 8px 30px rgba(34, 197, 94, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-bottom__donate-cta,
  .site-footer .footer-bottom__donate-cta:hover {
    transform: none;
    filter: none;
  }
}

/* Copyright : marque en texte plat (pas de badge Matrix) */
.footer-bottom__brand {
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Même corps que l’année © … : le lien hashtag ne doit pas reprendre la typo carte (0,78rem) */
.site-footer .footer-bottom__copy .footer-bottom__brand > a.card__hashtag-link {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  vertical-align: baseline;
}

.site-footer .footer-bottom__copy .footer-bottom__brand > a.card__hashtag-link .dp-hashtag {
  font: inherit;
}

.site-footer .footer-bottom__copy .footer-bottom__brand > a.card__hashtag-link:hover,
.site-footer .footer-bottom__copy .footer-bottom__brand > a.card__hashtag-link:focus-visible {
  color: inherit;
  border-bottom: none;
}

.site-footer .footer-bottom__copy .footer-bottom__brand > a.card__hashtag-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-2) 65%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Colonne LTR sous le copyright : lien site live Commercify */
.footer-bottom__start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.footer-bottom__commercify-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem 0.85rem;
  max-width: min(100%, 42rem);
}

/*
 * Accroche Commercify : autre famille que le lien (Orbitron vs Matrix mono),
 * pas de soulignement — liseré froid accent-2 + fond discret, ton « vitrine ».
 */
.site-footer .footer-bottom__commercify-tagline {
  flex: 1 1 14rem;
  min-width: min(100%, 16rem);
  margin: 0;
  padding: 0.42em 0.7em 0.48em 0.78em;
  border-left: 3px solid var(--accent-2);
  border-radius: 0 0.3rem 0.3rem 0;
  font-family: var(--font-h);
  font-size: clamp(0.68rem, 0.4vw + 0.56rem, 0.8rem);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.42;
  text-decoration: none;
  border-bottom: none;
  text-wrap: balance;
  color: color-mix(in srgb, var(--footer-ink) 82%, var(--accent-2) 18%);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 24%, transparent);
}

.site-footer .footer-bottom__commercify-tagline span {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

html[data-theme="dark"] .site-footer .footer-bottom__commercify-tagline {
  background: color-mix(in srgb, var(--accent-2) 12%, rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 28%, transparent);
  color: color-mix(in srgb, var(--footer-ink) 78%, var(--accent-2) 22%);
}

.site-footer .footer-bottom__commercify-live {
  font-family: var(--font-matrix-mono);
  font-size: clamp(0.76rem, 0.55vw + 0.56rem, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.055em;
  text-decoration: none;
  color: var(--footer-link);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 48%, var(--footer-stone-soft) 52%);
  padding-bottom: 0.14em;
  transition:
    color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    text-shadow var(--ui-duration) var(--ui-ease);
}

.site-footer .footer-bottom__commercify-live:hover {
  color: var(--footer-ink);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 26%, transparent);
}

.site-footer .footer-bottom__commercify-live:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-bottom__commercify-live,
  .site-footer .footer-bottom__commercify-live:hover {
    text-shadow: none;
  }
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

/* Page hero interne */
.page-hero {
  padding: 3rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.page-hero .diagonal-lines__line {
  animation-duration: 40s;
}

/* --- Page À propos : patterns fluides (sans styles inline) --- */
.page-hero__eyebrow {
  font-size: clamp(0.65rem, 1.4vw + 0.35rem, 0.75rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.page-hero__rule {
  width: clamp(3rem, 10vw, 4.5rem);
  height: 0.125rem;
  background: var(--accent);
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}

.card--media-flush {
  padding: 0;
  overflow: hidden;
}

.card--media-flush img {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: grayscale(0.4);
}

@media (min-width: 900px) {
  .grid-2--align-center {
    align-items: center;
  }

  .grid-2--align-start {
    align-items: start;
  }
}

.section__eyebrow {
  font-size: clamp(0.65rem, 1.4vw + 0.35rem, 0.75rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.about-list {
  margin: 0;
  line-height: 1.85;
  padding-inline-start: clamp(1rem, 3vw, 1.35rem);
}

.about-quote {
  font-style: italic;
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.15rem);
  border-left: 0.1875rem solid var(--accent);
}

.container--narrow {
  width: 100%;
  max-width: min(100%, 40rem);
  margin-inline: auto;
}

.about-founder-watermark {
  font-family: var(--font-h);
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1;
  opacity: 0.12;
  margin-bottom: 0;
}

/* Utilities */
.mt-0 {
  margin-top: 0;
}
.mb-sm {
  margin-bottom: 0.5rem;
}
.mb-md {
  margin-bottom: 1rem;
}

.mb-lg {
  margin-bottom: 2rem;
}
.mb-xl {
  margin-bottom: 3rem;
}
.text-center {
  text-align: center;
}
.max-w-prose {
  max-width: 42rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.hashtag-xl {
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* Timeline about */
.timeline {
  border-left: 2px solid var(--accent-dim);
  padding-left: 1.5rem;
  margin-left: 0.5rem;
}

.timeline__item {
  position: relative;
  padding-bottom: 2.5rem;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 5px);
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

/* Form (commercify) */
.form-inline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .form-inline {
    flex-direction: row;
    align-items: stretch;
  }
}

.form-inline input {
  flex: 1;
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-font-size);
}

.form-inline input::placeholder {
  color: var(--text-secondary);
}

.form-inline input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Contact page */
.contact-link {
  color: var(--accent);
  font-weight: 600;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-mailto-notice {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: calc(0.875rem * var(--copy-scale));
  line-height: 1.55;
  color: var(--text-secondary);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%);
}

.contact-mailto-notice--highlight {
  border-inline-start-color: var(--contact-success);
  background: color-mix(in srgb, var(--bg-card) 82%, var(--contact-success) 18%);
}

.contact-form--mailto-launched .contact-feedback.is-success {
  padding: 0.65rem 0.85rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--bg-card) 78%, var(--contact-success) 22%);
  border: 1px solid color-mix(in srgb, var(--contact-success) 45%, transparent);
}

.form-grid {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: grid;
  gap: 0.4rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: calc(0.85rem * var(--copy-scale));
  color: var(--text-secondary);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-font-size);
}

.form-field textarea {
  resize: vertical;
  min-height: 9rem;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.contact-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: calc(0.9rem * var(--copy-scale));
  color: var(--text-secondary);
}

.contact-feedback {
  margin: 0;
  min-height: 1.2rem;
  font-size: calc(0.85rem * var(--copy-scale));
  color: var(--text-secondary);
}

.contact-feedback.is-error {
  color: #ff8080;
}

.contact-feedback.is-success {
  color: var(--contact-success);
}

.map-embed {
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.map-embed iframe,
.map-embed__static {
  display: block;
  width: 100%;
  height: 24rem;
  border: 0;
  object-fit: cover;
}

body.nav-open {
  overflow: hidden;
  overflow-x: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* CTA header barre : masqué smartphone (<768px, menu hamburger) ; visible à partir tablette dans le header */
.hidden-mobile-cta {
  display: none;
}

@media (min-width: 768px) {
  .hidden-mobile-cta {
    display: inline-flex;
  }
}

/* AOS (bundle) retiré — refactor sans Animate On Scroll (pas de règle globale [data-aos] ici :
 * un `transform: none` tardif écrase des translations / animations légitimes sur le même élément). */
/* --- Vidéos : vignette locale, lecture sur YouTube (aucun iframe au chargement) --- */
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.25s ease, transform 0.35s ease;
}
.video-thumb:hover img,
.video-thumb:focus-visible img {
  opacity: 1;
  transform: scale(1.03);
}
.video-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.video-thumb__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.78);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18);
  pointer-events: none;
}
.video-thumb__play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-32%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--accent);
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Encoche : hauteur main alignée sur la barre sticky (safe area déjà sur .site-header) --- */
main {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}
.nav-drawer {
  padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}

/* --- Header compact + tiroir (≤1399px) : logo | Contact + hamburger ; pas de barre / méga-menu --- */
@media (max-width: 1399px) {
  /* Après les règles de base du header : gouttières serrées + pas de clip horizontal */
  .site-header {
    overflow: visible;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  .site-header__inner {
    max-width: 100%;
    margin-inline: 0;
    width: 100%;
    padding-inline: 0;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    /* Flex : le logo absorbe l’espace restant ; évite que la colonne auto ne pousse le hamburger hors écran */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .header-actions .theme-switch,
  .header-actions .lang-dropdown {
    display: none !important;
  }

  .site-header .logo:not(.logo--drawer) {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: var(--header-bar-ctrl-h);
    height: var(--header-bar-ctrl-h);
    padding-bottom: 0;
    padding-top: 0;
    font-size: clamp(0.72rem, calc(var(--header-bar-ctrl-h) * 0.44), 1.05rem);
    letter-spacing: 0.05em;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Pas de double soulignement en barre compacte : évite traits coupés (overflow) et allège le logo réduit */
  .site-header .logo:not(.logo--drawer)::before,
  .site-header .logo:not(.logo--drawer)::after {
    display: none;
    content: none;
  }

  .nav-drawer__brand .logo.logo--drawer::before,
  .nav-drawer__brand .logo.logo--drawer::after {
    display: none;
    content: none;
  }

  .logo__ai {
    clip-path: path("M 12% 0 L 100% 0 L 100% 100% L 0 100% C 14% 85%, 12% 24%, 0 14% Q 0 0 12% 0 Z");
    -webkit-clip-path: path("M 12% 0 L 100% 0 L 100% 100% L 0 100% C 14% 85%, 12% 24%, 0 14% Q 0 0 12% 0 Z");
  }

  .header-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-header .header-actions .btn--ghost.hidden-mobile-cta {
    min-height: var(--header-bar-ctrl-h);
    height: var(--header-bar-ctrl-h);
    box-sizing: border-box;
    padding-block: 0.35rem;
    padding-inline: 0.65rem 0.85rem;
    font-size: 0.75rem;
    line-height: 1.15;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lang-dropdown {
    flex-shrink: 0;
  }

  .nav-toggle {
    flex-shrink: 0;
    width: var(--header-bar-ctrl-h);
    height: var(--header-bar-ctrl-h);
    min-width: var(--header-bar-ctrl-h);
    box-sizing: border-box;
    padding: 0.45rem;
    border-radius: var(--radius-sm);
  }

  .nav-toggle__bar {
    background: currentColor;
  }

  html[data-theme="light"] .nav-toggle:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 22%, transparent);
  }

  /* Smartphone : pas de CTA dans la barre (règle .hidden-mobile-cta) — Contact reste dans le tiroir */
  @media (max-width: 767px) {
    .site-header .logo:not(.logo--drawer) {
      font-size: clamp(0.68rem, calc(var(--header-bar-ctrl-h) * 0.42), 0.98rem);
      letter-spacing: 0.04em;
      padding-bottom: 0;
      max-width: 100%;
    }
  }
}

/* Tablette : logo barre plus haut + plus allongé (cascade après le bloc ≤1399px ; smartphone inchangé) */
@media (min-width: 768px) and (max-width: 1399px) {
  .site-header .logo:not(.logo--drawer) {
    font-size: clamp(1.02rem, calc(var(--header-bar-ctrl-h) * 0.625), 1.44rem);
    letter-spacing: 0.078em;
    min-height: calc(var(--header-bar-ctrl-h) * 1.22);
    height: calc(var(--header-bar-ctrl-h) * 1.22);
  }

  .site-header .logo:not(.logo--drawer) .logo__cluster {
    gap: 0.035em;
  }

  .site-header .logo:not(.logo--drawer) .logo__brand {
    letter-spacing: 0.088em;
  }

  .site-header .logo:not(.logo--drawer) .logo__ai {
    letter-spacing: 0.115em;
  }
}

/* --- Mobile & tablette (≤1023px) : rythme sections, drawer, formulaires --- */
@media (max-width: 1023px) {
  .section {
    padding: 2.25rem 0;
  }
  /* .section--hero : min-height / padding — téléphone et tablette (blocs dédiés plus bas) */
  .nav-drawer > a,
  .nav-drawer .nav-drawer__sub a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .service-row {
    flex-wrap: wrap;
  }
  .service-row__icon {
    width: 36px;
    height: 36px;
  }
  .footer-bottom {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .form-inline .btn {
    width: 100%;
  }
}

/* Hero vidéo accueil : `engine/css/hero.css`. */

.hero-eyebrow {
  font-family: var(--font-matrix-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hero-text-secondary);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.hero-butterfly-wrap {
  letter-spacing: normal;
  text-transform: none;
}

.hero-butterfly {
  width: clamp(52px, 8vw, 105px);
  height: auto;
  display: block;
  margin-inline: auto;
  color: #ff8f1f;
  transform-box: fill-box;
  transform-origin: 50% 42%;
}

.playground-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.25rem;
}

.playground-layout > * {
  min-width: 0;
}

.playground-layout__main {
  min-width: 0;
}

/* Même modèle que .ext-resources-header : titre de section pleine largeur, au-dessus du contenu */
.playground-section-head {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Hashtags sous le titre (même composant visuel que la rangée projets) */
body.page-home .section--future-playground .playground-section-head__hashtags {
  margin: -0.15rem 0 0.85rem;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

/* Ancres stables (liens depuis `/ht/` — hubs #Dream / #Project / #MVP, #Commercify2030) */
#future-playground,
#communication {
  scroll-margin-top: calc(var(--header-h, 4rem) + 1rem);
}

/* Frise « méthode » — bandeau large, trait + points (pas de flèche), détail au survol */
.dp-method-strip {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 0 1.35rem;
  padding: 1rem 1.15rem 1.15rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 92%, var(--accent) 8%) 0%, var(--bg) 55%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  overflow-x: hidden;
  container-type: inline-size;
  container-name: dp-method-strip;
}

/* Slot détail : au-dessus du calque d’attente plein bandeau */
.dp-method-strip__detail-slot {
  position: relative;
  z-index: 3;
  margin: 0 0 1rem;
}

/* Calques d’effet idle (laser / javelot) : engine/css/laser.css, engine/css/javelot.css */

/* Hauteur / marges / padding constants : évite le CLS quand le texte apparaît au survol des étapes */
.dp-method-strip__detail {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.65rem 0.75rem;
  min-height: 4.5rem;
  max-height: 7.25rem;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  font-family: var(--font-body);
  font-size: calc(0.88rem * var(--copy-scale));
  line-height: 1.55;
  color: var(--text);
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.dp-method-strip__detail.is-visible {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.dp-method-strip__detail a.dp-method-strip__detail-cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.dp-method-strip__detail a.dp-method-strip__detail-cta:hover {
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
}

.dp-method-strip__track {
  position: relative;
  z-index: 3;
  padding-top: 0.35rem;
}

.dp-method-strip__rail {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0.85rem;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 15%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent) 50%,
    color-mix(in srgb, var(--accent) 15%, transparent)
  );
  opacity: 0.85;
  pointer-events: none;
}

.dp-method-strip__nodes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.2rem;
}

.dp-method-strip__node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.2rem 0.1rem 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text-secondary);
  transition: color 0.2s ease, transform 0.18s ease;
}

.dp-method-strip__node:hover,
.dp-method-strip__node:focus-visible {
  color: var(--text);
  outline: none;
}

.dp-method-strip__node:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.dp-method-strip__node.is-active {
  color: var(--accent-strong);
}

html:not([data-theme="light"]) .dp-method-strip__node.is-active {
  color: color-mix(in srgb, var(--accent-strong) 42%, var(--text) 58%);
}

html:not([data-theme="light"]) .dp-method-strip__node.is-active:hover,
html:not([data-theme="light"]) .dp-method-strip__node.is-active:focus-visible {
  color: var(--text);
}

.dp-method-strip__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  transform-origin: bottom center;
  background: color-mix(in srgb, var(--bg-elevated) 40%, var(--accent) 60%);
  border: 2px solid color-mix(in srgb, var(--accent) 45%, #fff 10%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bg) 100%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.dp-method-strip__node:hover .dp-method-strip__dot,
.dp-method-strip__node:focus-visible .dp-method-strip__dot {
  transform: scale(1.92);
  background: var(--accent);
}

.dp-method-strip__node.is-active .dp-method-strip__dot {
  transform: scale(1.78);
  background: var(--accent-strong);
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
}

.dp-method-strip__node.is-active:hover .dp-method-strip__dot,
.dp-method-strip__node.is-active:focus-visible .dp-method-strip__dot {
  transform: scale(2.08);
  background: var(--accent);
}

.dp-method-strip__label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: calc(0.62rem * var(--copy-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .dp-method-strip__label {
    font-size: calc(0.68rem * var(--copy-scale));
  }
}

@media (max-width: 719px) {
  /* Smartphone : frise verticale (trait + points), pas de scroll horizontal */
  .dp-method-strip {
    padding: 0.85rem 0.65rem 1rem;
    overflow-x: hidden;
  }

  .dp-method-strip__track {
    padding-top: 0;
    overflow: visible;
  }

  .dp-method-strip__rail {
    left: 18px;
    right: auto;
    top: 12px;
    bottom: 12px;
    width: 4px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 15%, transparent),
      color-mix(in srgb, var(--accent) 55%, transparent) 50%,
      color-mix(in srgb, var(--accent) 15%, transparent)
    );
  }

  .dp-method-strip__nodes {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 11px;
    overflow: visible;
  }

  .dp-method-strip__node {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.38rem 0;
    text-align: left;
  }

  .dp-method-strip__dot {
    transform-origin: left center;
  }

  .dp-method-strip__label {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    text-align: left;
    font-size: calc(0.78rem * var(--copy-scale));
    line-height: 1.3;
  }

  .dp-method-strip__detail-slot {
    margin-bottom: 0.85rem;
  }

  .dp-method-strip__detail {
    padding-inline: 0.55rem;
    word-break: break-word;
  }
}

/* Carte manifeste + CTA — même langage visuel que la frise méthode */
.playground-manifeste-box {
  margin-top: 0.35rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--bg-elevated) 93%, var(--accent) 7%) 0%, var(--bg) 58%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 11%, transparent),
    0 10px 36px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

@media (max-width: 719px) {
  .playground-manifeste-box {
    padding: 1rem 0.95rem 1.05rem;
  }
}

.playground-butterfly-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.playground-butterfly-hashtag {
  margin: 0;
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: clamp(calc(0.9rem * var(--copy-scale)), 1.35vw, calc(1rem * var(--copy-scale)));
  letter-spacing: 0.04em;
  color: var(--accent);
}

.playground-butterfly-hashtag a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 0.18em;
}

.playground-butterfly-hashtag a:hover {
  color: var(--accent-strong);
  text-decoration-color: var(--accent-hover);
}

.playground-butterfly-hashtag a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.playground-butterfly-col .hero-butterfly {
  margin-inline: 0;
}

.playground-cta-block {
  display: block;
  margin-top: 1rem;
  line-height: 1.55;
}

.playground-cta-block > .playground-ctaquestion--services {
  margin-top: 0;
}

.playground-cta-intro {
  display: inline-block;
  margin-top: 1rem;
}

.playground-cta-time {
  display: inline-block;
}

.playground-manifeste .playground-ctaquestion {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: inherit;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 106, 0, 0.45);
  transition: color 0.2s, border-color 0.2s;
}

.playground-manifeste .playground-ctaquestion:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-hover);
}

.playground-manifeste .playground-ctaquestion:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* CTA contact : rendu type bouton primaire + flèche */
.playground-manifeste .playground-ctaquestion--discuss {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.25rem;
  font-weight: 700;
  font-size: clamp(calc(0.875rem * var(--copy-scale)), 1.4vw, calc(0.95rem * var(--copy-scale)));
  letter-spacing: 0.03em;
  color: var(--btn-text);
  text-decoration: none;
  border-bottom: none;
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 6px 22px rgba(255, 106, 0, 0.28);
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.18s ease;
}

.playground-manifeste .playground-ctaquestion--discuss::after {
  content: "→";
  font-weight: 500;
  line-height: 1;
  opacity: 0.95;
  transition: transform 0.2s ease;
}

.playground-manifeste .playground-ctaquestion--discuss:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-text);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 0 rgba(0, 0, 0, 0.18),
    0 10px 32px rgba(255, 106, 0, 0.38);
}

.playground-manifeste .playground-ctaquestion--discuss:hover::after {
  transform: translateX(4px);
}

.playground-manifeste .playground-ctaquestion--discuss:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 3px 14px rgba(255, 106, 0, 0.22);
}

.playground-manifeste .playground-ctaquestion--discuss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Bloc services : texte informatif (pas de lien), style distinct (barre latérale) */
.playground-manifeste .playground-ctaquestion--services {
  border-bottom: none;
  padding-left: 0.55rem;
  margin-top: 0.45rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-left: 3px solid var(--accent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: default;
}

.playground-manifeste .playground-ctaquestion--services:hover {
  border-left-color: var(--accent);
  color: var(--accent);
}

.playground-manifeste .playground-ctaquestion--services:focus-visible {
  outline: none;
  border-left-color: var(--accent);
}

.butterfly-trail {
  fill: none;
  stroke: rgba(255, 176, 71, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
}

.butterfly-shape {
  transform-origin: 260px 190px;
  animation: none;
}

.wing {
  transform-origin: 260px 188px;
  animation: none;
}

.wing--right {
  animation-delay: -0.12s;
}

.wing path {
  fill: rgba(255, 143, 31, 0.15);
  stroke: url(#butterflyOrange);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

.butterfly-body {
  fill: none;
  stroke: #ffd79a;
  stroke-width: 4;
  stroke-linecap: round;
}

.butterfly-spark {
  fill: #ffd79a;
  opacity: 0.75;
  animation: none;
}

.butterfly-spark:nth-of-type(2) {
  animation-delay: -1.25s;
}

.butterfly-drift {
  transform-origin: center;
  animation: none;
}

html.dp-ambient-anim .butterfly-shape {
  animation: butterflyBob 6.8s ease-in-out infinite;
}

/* Après fin de dp-ambient-anim (~9s) : bob/drift/spark papillon inchangés si onglet actif et colonne visible. */
html:not(.dp-anim-paused) body.page-home .playground-butterfly-col:not(.dp-offscreen-anim) .butterfly-shape {
  animation: butterflyBob 6.8s ease-in-out infinite;
}

/* Battement d’ailes : plus de boucle infinie ici — rafales courtes via .dp-butterfly-burst (script.js). */

html.dp-ambient-anim .butterfly-spark {
  animation: butterflySpark 3.6s ease-in-out infinite;
}

html:not(.dp-anim-paused) body.page-home .playground-butterfly-col:not(.dp-offscreen-anim) .butterfly-spark {
  animation: butterflySpark 3.6s ease-in-out infinite;
}

html.dp-ambient-anim .butterfly-drift {
  animation: butterflyDrift 10.5s ease-in-out infinite;
}

html:not(.dp-anim-paused) body.page-home .playground-butterfly-col:not(.dp-offscreen-anim) .butterfly-drift {
  animation: butterflyDrift 10.5s ease-in-out infinite;
}

/* Battement d’ailes léger en continu (tous viewports) ; rafales plus marquées via .dp-butterfly-burst (script.js). */
html:not(.dp-anim-paused) body.page-home .playground-butterfly-col:not(.dp-offscreen-anim):not(.dp-butterfly-burst) .wing--left {
  animation: bfWingIdleL 2.6s ease-in-out infinite;
}

html:not(.dp-anim-paused) body.page-home .playground-butterfly-col:not(.dp-offscreen-anim):not(.dp-butterfly-burst) .wing--right {
  animation: bfWingIdleR 2.6s ease-in-out infinite;
  animation-delay: -0.12s;
}

/* Une itération = un battement (aller-retour) ; --bf-flaps = nombre de battements (2–4, défini en JS). */
.playground-butterfly-col.dp-butterfly-burst .wing {
  will-change: transform;
}

.playground-butterfly-col.dp-butterfly-burst .wing--left {
  animation-name: bfWingL;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--bf-flaps, 3);
  animation-fill-mode: none;
}

.playground-butterfly-col.dp-butterfly-burst .wing--right {
  animation-name: bfWingR;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--bf-flaps, 3);
  animation-delay: -0.05s;
  animation-fill-mode: none;
}

@keyframes bfWingL {
  0%,
  100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(7deg) scaleY(0.86);
  }
}

@keyframes bfWingR {
  0%,
  100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(-7deg) scaleY(0.86);
  }
}

@keyframes bfWingIdleL {
  0%,
  100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(5deg) scaleY(0.94);
  }
}

@keyframes bfWingIdleR {
  0%,
  100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(-5deg) scaleY(0.94);
  }
}

@keyframes butterflyBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes butterflyDrift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(3px, -4px);
  }
  75% {
    transform: translate(-2px, -7px);
  }
}

@keyframes butterflySpark {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 0.95;
    transform: translateY(-3px);
  }
}

.hero-title {
  max-width: none;
  width: 100%;
  text-wrap: wrap;
  font-family: var(--font-matrix-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--hero-text);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}

.hero-slogan {
  display: inline;
}

/* Texte du slogan seul (sans curseur) — le souligné « validation » s’aligne dessus. */
.hero-slogan__phrase {
  display: inline;
}

/* Souligné « validation » : trait dédié (pseudo), entrée + sortie en keyframes (voir JS). */
@keyframes heroSloganUnderlineIn {
  from {
    transform: scaleX(0);
    opacity: 0.2;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes heroSloganUnderlineOut {
  from {
    transform: scaleX(1);
    opacity: 1;
  }
  to {
    transform: scaleX(0);
    opacity: 0;
  }
}

/* .hero-title renforce la spécificité si d’autres règles touchent .hero-slogan__phrase */
.hero-title .hero-slogan__phrase.hero-slogan--landed,
.hero-slogan__phrase.hero-slogan--landed {
  position: relative;
  display: inline-block;
  z-index: 0;
  overflow: visible;
}

.hero-title .hero-slogan__phrase.hero-slogan--landed::after,
.hero-slogan__phrase.hero-slogan--landed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  bottom: auto;
  /* Sous la ligne de base : écart net pour un vrai souligné, pas un barré. */
  margin-top: clamp(0.14em, 0.28em, 18px);
  height: max(2px, 0.09em);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 22%, rgba(255, 140, 60, 0.98)),
    rgba(255, 106, 0, 0.88),
    color-mix(in srgb, var(--accent-2) 18%, rgba(255, 106, 0, 0.78))
  );
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.32), 0 0 20px var(--accent-2-dim);
  transform-origin: left center;
  pointer-events: none;
  animation: heroSloganUnderlineIn 0.5s ease-out forwards;
}

.hero-title .hero-slogan__phrase.hero-slogan--landed.hero-slogan--landed-out::after,
.hero-slogan__phrase.hero-slogan--landed.hero-slogan--landed-out::after {
  animation: heroSloganUnderlineOut 0.58s cubic-bezier(0.45, 0, 0.2, 1) forwards;
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .hero-slogan__phrase.hero-slogan--landed::after,
  .hero-title .hero-slogan__phrase.hero-slogan--landed.hero-slogan--landed-out::after,
  .hero-slogan__phrase.hero-slogan--landed::after,
  .hero-slogan__phrase.hero-slogan--landed.hero-slogan--landed-out::after {
    animation-duration: 0.01ms;
  }
}

/* Légère marge sous le H1 quand le trait est visible (glow non coupé). */
.hero-title:has(.hero-slogan__phrase.hero-slogan--landed) {
  padding-bottom: 0.25em;
}

/* Pas de min-width : une largeur fixe en ch créait un trou énorme entre le 1er mot et « Your ». */
.hero-slogan__word {
  display: inline;
}

.hero-slogan__ai {
  color: rgba(255, 140, 60, 0.95);
  text-shadow: 0 0 12px rgba(255, 106, 0, 0.35);
}

.hero-slogan__caret {
  display: inline-block;
  width: 0.06em;
  margin-left: 0.02em;
  height: 0.85em;
  vertical-align: -0.06em;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

.hero-slogan__caret.is-on {
  opacity: 1;
  animation: heroSloganCaretBlink 0.95s step-end infinite;
}

@keyframes heroSloganCaretBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slogan__caret,
  .hero-slogan__caret.is-on {
    animation: none;
    opacity: 0;
  }
}

/* Runtime idle — onglet en arrière-plan : pause des boucles CSS infinies */
html.dp-anim-paused .diagonal-lines__line,
html.dp-anim-paused .card-soon::before,
html.dp-anim-paused .butterfly-shape,
html.dp-anim-paused .wing,
html.dp-anim-paused .butterfly-spark,
html.dp-anim-paused .butterfly-drift,
html.dp-anim-paused .hero-slogan__caret.is-on {
  animation-play-state: paused;
}

/* Hors viewport : même principe (sous-arbres ciblés) */
.section--hero.dp-offscreen-anim .diagonal-lines__line,
.playground-butterfly-col.dp-offscreen-anim .butterfly-shape,
.playground-butterfly-col.dp-offscreen-anim .wing,
.playground-butterfly-col.dp-offscreen-anim .butterfly-spark,
.playground-butterfly-col.dp-offscreen-anim .butterfly-drift,
.card-soon.dp-offscreen-anim::before,
.section--hero.dp-offscreen-anim .hero-slogan__caret.is-on,
#future-playground.dp-offscreen-anim .dp-method-strip__detail-idle::before,
#future-playground.dp-offscreen-anim .dp-method-strip__detail-idle::after,
#ressources-it-ia.dp-offscreen-anim .ext-chip.ext-chip--fx-tesla::before,
#ressources-it-ia.dp-offscreen-anim .ext-card.ext-card--fx-tesla::before,
#ressources-it-ia.dp-offscreen-anim .ext-card__ufo-dot,
#ressources-it-ia.dp-offscreen-anim .ext-card.ext-card--fx-c2c-warlight::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .diagonal-lines__line,
  .card-soon::before,
  .butterfly-shape,
  .wing,
  .butterfly-spark,
  .butterfly-drift {
    animation: none !important;
  }
}

.section-lead {
  font-family: var(--font-sub);
  font-size: clamp(calc(1rem * var(--copy-scale)), 2.125vw, calc(1.2rem * var(--copy-scale)));
  line-height: 1.62;
  color: var(--hero-text-secondary);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
}

.section--hero .btn {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] .section--hero .btn--ghost {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-border);
}

html[data-theme="light"] .section--hero .btn--ghost:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  border-color: var(--btn-bg-hover);
}

html[data-theme="light"] .section--hero .btn--primary {
  color: var(--btn-text);
}

/* Espace titre → grille : même ressort que « sponsors » (mb-md sur le bloc) */
.projects-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.projects-head__lead {
  flex: 1;
  min-width: min(100%, 20rem);
  max-width: 100%;
}

.projects-head__line {
  flex: 1;
  min-width: 7.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-dim), transparent);
  max-width: 17.5rem;
}

/* Hashtag sous le titre : marges / couleur ; typo = body.page-home .home-hashtag-typo */
#projets .projects-head__hashtags {
  margin: -0.25rem 0 1.1rem;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

#projets .projects-head__hashtags .projects-head__hashtag + .projects-head__hashtag {
  margin-top: 0.35rem;
}

#projets .projects-cta {
  margin-top: 1.35rem;
  margin-bottom: 0;
  text-align: start;
  width: 100%;
  max-width: 100%;
}

#projets .projects-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.85rem 1.15rem;
}

#projets .projects-cta__hub {
  margin-top: 1rem;
  text-align: start;
}

/* CTA tertiaire annuaire : même langage que la frise / cartes (accent, relief discret, flèche). */
#projets .projects-cta__hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  padding: 0.52rem 1rem 0.52rem 1.08rem;
  font-weight: 650;
  font-size: clamp(0.86rem, 1.35vw, 0.95rem);
  letter-spacing: 0.028em;
  line-height: 1.35;
  text-decoration: none;
  color: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
  background: linear-gradient(
    148deg,
    color-mix(in srgb, var(--bg-elevated) 90%, var(--accent) 10%) 0%,
    color-mix(in srgb, var(--bg) 93%, var(--accent) 7%) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-sm);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 11%, transparent),
    0 2px 14px color-mix(in srgb, var(--accent-2) 14%, transparent);
  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s var(--ease-choreography, ease);
}

#projets .projects-cta__hub-link::after {
  content: "\2192";
  flex-shrink: 0;
  font-size: 0.92em;
  font-weight: 600;
  opacity: 0.7;
  transition:
    transform 0.22s var(--ease-choreography, ease),
    opacity 0.22s ease;
}

#projets .projects-cta__hub-link:hover,
#projets .projects-cta__hub-link:focus-visible {
  color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent),
    0 4px 22px color-mix(in srgb, var(--accent-2) 26%, transparent);
}

#projets .projects-cta__hub-link:hover::after,
#projets .projects-cta__hub-link:focus-visible::after {
  transform: translateX(0.2em);
  opacity: 1;
}

#projets .projects-cta__hub-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
  outline-offset: 2px;
}

html[dir="rtl"] #projets .projects-cta__hub-link::after {
  content: "\2190";
}

html[dir="rtl"] #projets .projects-cta__hub-link:hover::after,
html[dir="rtl"] #projets .projects-cta__hub-link:focus-visible::after {
  transform: translateX(-0.2em);
}

html[data-theme="light"] #projets .projects-cta__hub-link {
  color: color-mix(in srgb, var(--text) 78%, var(--accent) 22%);
  background: linear-gradient(
    152deg,
    color-mix(in srgb, var(--bg-elevated) 92%, #d4c9bc 8%) 0%,
    color-mix(in srgb, var(--bg) 95%, #c8bdb0 5%) 100%
  );
  border-color: color-mix(in srgb, var(--accent) 32%, #a89484 68%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 4px rgba(62, 48, 38, 0.1);
}

html[data-theme="light"] #projets .projects-cta__hub-link:hover,
html[data-theme="light"] #projets .projects-cta__hub-link:focus-visible {
  color: color-mix(in srgb, var(--accent) 58%, var(--text) 42%);
  border-color: color-mix(in srgb, var(--accent) 48%, #8a7260 52%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 3px 14px rgba(62, 48, 38, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  #projets .projects-cta__hub-link,
  #projets .projects-cta__hub-link::after {
    transition: none;
  }

  #projets .projects-cta__hub-link:hover::after,
  #projets .projects-cta__hub-link:focus-visible::after {
    transform: none;
  }
}

#projets .projects-cta__btn {
  white-space: normal;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  line-height: 1.35;
}

/* Ancre : bande / grille projets abandonnés (accueil → hub `/prj/`) */
#projets #suspended,
#projets #projets-grid-abandoned {
  scroll-margin-top: calc(var(--header-h, 4rem) + 1rem);
}

body.page-home #projets .card--flip.card--inactive.card--abandoned-github-target,
body.page-projects #projets .card--flip.card--inactive.card--abandoned-github-target {
  pointer-events: auto;
  filter: none;
  transform: scale(0.98);
}

body.page-home #projets .card--flip.card--inactive.card--abandoned-github-target .card-flip__inner,
body.page-projects #projets .card--flip.card--inactive.card--abandoned-github-target .card-flip__inner {
  filter: grayscale(0.9) brightness(0.74);
}

body.page-home #projets .card--flip.card--inactive.card--abandoned-github-target .card-flip__inner,
body.page-projects #projets .card--flip.card--inactive.card--abandoned-github-target .card-flip__inner,
body.page-home #projets .card--flip.card--inactive.card--abandoned-github-target .card-flip__face,
body.page-projects #projets .card--flip.card--inactive.card--abandoned-github-target .card-flip__face {
  pointer-events: none;
}

body.page-projects #projets .card--abandoned-github-target.card--flip {
  position: relative;
  overflow: hidden;
}

body.page-projects #projets .card__abandoned-github-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0.5rem 0.7rem 0.62rem;
  pointer-events: auto;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(8, 8, 10, 0.78) 28%,
    rgba(8, 8, 10, 0.96) 100%
  );
}

body.page-projects #projets .card__abandoned-github-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.48rem 0.85rem;
  font-family: var(--font-sub);
  font-size: calc(0.74rem * var(--copy-scale));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #f6f8fa;
  background: linear-gradient(180deg, #30363d 0%, #161b22 100%);
  border: 1px solid rgba(240, 246, 252, 0.22);
  border-radius: var(--radius-sm);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

body.page-projects #projets .card__abandoned-github-btn::after {
  content: "→";
  font-weight: 800;
  opacity: 0.92;
}

body.page-projects #projets .card__abandoned-github-btn:hover,
body.page-projects #projets .card__abandoned-github-btn:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #484f58 0%, #21262d 100%);
  border-color: rgba(255, 106, 0, 0.55);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

body.page-projects #projets .card__abandoned-github-btn:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

html[data-theme="light"] body.page-projects #projets .card__abandoned-github-foot {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 252, 248, 0.82) 30%,
    rgba(255, 252, 248, 0.98) 100%
  );
}

html[data-theme="light"] body.page-projects #projets .card__abandoned-github-btn {
  color: #f6f8fa;
  border-color: rgba(22, 27, 34, 0.35);
  box-shadow: 0 3px 14px rgba(22, 27, 34, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  body.page-projects #projets .card--flip.card--inactive.card--abandoned-github-target .card__flip-stretched-link--github {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  body.page-projects #projets .card--flip.card--inactive.card--abandoned-github-target .card__flip-stretched-link--github {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 7;
    border-radius: inherit;
    text-decoration: none;
    outline-offset: 3px;
    pointer-events: auto;
  }

  body.page-projects #projets .card__abandoned-github-foot {
    z-index: 11;
  }
}

#projets .projects-cta__btn--github {
  min-width: min(100%, 15.5rem);
  padding: 0.62rem 1.2rem;
  font-weight: 700;
  box-shadow:
    0 4px 22px color-mix(in srgb, var(--accent-2) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

#projets .projects-cta__label {
  display: block;
  max-width: min(100%, 26rem);
}

#projets .projects-cta__handle {
  display: block;
  margin-top: 0.2em;
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* Bouton distinct, ton « archives » — pas le style primaire GitHub */
#projets .projects-cta__btn--abandoned {
  flex-direction: row;
  align-items: center;
  max-width: min(100%, 20rem);
  padding: 0.5rem 0.95rem;
  font-family: ui-serif, "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
  font-size: clamp(0.74rem, 1.45vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 68%, #c4a990 32%);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-elevated) 78%, #2a221c 22%) 0%,
    color-mix(in srgb, var(--bg) 82%, #1a1512 18%) 100%
  );
  border: 2px dashed color-mix(in srgb, var(--accent) 28%, #6a5344 72%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.35);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

#projets .projects-cta__btn--abandoned:hover,
#projets .projects-cta__btn--abandoned:focus-visible {
  color: color-mix(in srgb, var(--text) 78%, #e8d8c8 22%);
  border-color: color-mix(in srgb, var(--accent) 42%, #7a6554 58%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 3px 10px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] #projets .projects-cta__btn--abandoned {
  color: color-mix(in srgb, var(--text) 72%, #5c4a3e 28%);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-elevated) 88%, #d8cfc4 12%) 0%,
    color-mix(in srgb, var(--bg) 92%, #c8bdb0 8%) 100%
  );
  border-color: color-mix(in srgb, var(--accent) 35%, #9a8574 65%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 3px rgba(62, 48, 38, 0.12);
}

html[data-theme="light"] #projets .projects-cta__btn--abandoned:hover,
html[data-theme="light"] #projets .projects-cta__btn--abandoned:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 48%, #8a7260 52%);
}

@media (max-width: 640px) {
  #projets .projects-head {
    align-items: stretch;
  }

  #projets .projects-head__line {
    max-width: none;
    width: 100%;
  }
}

/* Section ressources externes IT/AI — style distinct des cartes projets */
.section--ext-resources {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.07), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, #141210 12%) 0%, var(--bg) 100%);
  border-block: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

.section--ext-resources.section--stripe-a {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.07), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-stripe-b) 88%, #141210 12%) 0%, var(--section-stripe-a) 100%);
}

.section--ext-resources.section--stripe-b {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.07), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-stripe-a) 88%, #141210 12%) 0%, var(--section-stripe-b) 100%);
}

.section--ext-resources::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -12deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 10px
  );
  pointer-events: none;
  opacity: 0.35;
}

.ext-resources-header {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}

.ext-resources-hashtags {
  position: relative;
  z-index: 1;
  margin: 0 0 0.75rem;
}

.ext-resources-intro {
  margin-top: 0.75rem;
  max-width: none;
  width: 100%;
  line-height: 1.65;
  font-size: clamp(calc(0.9rem * var(--copy-scale)), 1.35vw, calc(0.98rem * var(--copy-scale)));
}

/* Rangée parente C2C / IT / AI (aperçu home : seule AI est « active ») */
.ext-resources-tiers {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.5rem;
}

.ext-resources-tiers .ext-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  line-height: 1.2;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    opacity 0.2s ease;
}

button.ext-tier {
  font: inherit;
  cursor: not-allowed;
  appearance: none;
}

button.ext-tier:disabled {
  pointer-events: none;
}

.ext-resources-tiers .ext-tier--active {
  border-color: var(--btn-bg-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  box-shadow: 0 3px 14px var(--btn-focus);
}

.ext-resources-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin-bottom: clamp(1.35rem, 3vw, 2rem);
}

.ext-resources-cta {
  position: relative;
  z-index: 1;
  margin: clamp(1.1rem, 2.8vw, 1.65rem) 0 0;
}

button.ext-chip {
  font: inherit;
  cursor: pointer;
  appearance: none;
}

.ext-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ext-chip:hover {
  border-color: var(--btn-bg-hover);
  background: var(--btn-bg-hover);
  box-shadow: 0 0 0 1px var(--btn-focus);
}

.ext-chip:focus-visible {
  outline: 2px solid var(--btn-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--btn-focus);
}

.ext-chip.is-active {
  border-color: var(--btn-bg-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  box-shadow: 0 4px 18px var(--btn-focus);
}

.ext-chip--git {
  border-color: var(--btn-border);
  color: var(--btn-text);
}

.ext-chip--ext {
  border-color: var(--btn-border);
}

.ext-chip--dl {
  border-color: var(--btn-border);
}

.ext-chip--web {
  border-color: var(--btn-border);
}

.ext-resources-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  transition: opacity 0.14s ease;
}

.ext-resources-grid.ext-resources-grid--switching {
  opacity: 0.38;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ext-resources-grid {
    transition: none;
  }
}

@media (min-width: 640px) {
  .ext-resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ext-resources-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ext-card {
  position: relative;
  padding: 1rem 1.05rem;
  border-radius: var(--radius-md);
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* L'attribut HTML hidden est sinon écrasé par display:flex ci-dessus */
.ext-resources-grid .ext-card[hidden] {
  display: none !important;
}

.ext-card__kind {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.85;
}

.ext-card__title {
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin: 0;
  line-height: 1.2;
}

.ext-card__title--sm {
  font-size: 1rem;
}

.ext-card__meta {
  font-size: calc(0.82rem * var(--copy-scale));
  line-height: 1.45;
  flex: 1;
}

.ext-card__link {
  font-weight: 700;
  font-size: calc(0.82rem * var(--copy-scale));
  margin-top: auto;
  align-self: flex-start;
  opacity: 0.85;
}

.ext-card__soon {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.ext-card--stripe {
  border: 1px solid var(--accent-dim);
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg) 8%);
  border-left: 4px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ext-card--outline {
  border: 2px dashed color-mix(in srgb, var(--accent) 28%, transparent);
  /* Fond opaque comme les autres vignettes : le trait d’ondulation ne doit pas se superposer au cadre */
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg) 8%);
}

.ext-card--panel {
  border: 1px solid var(--accent-dim);
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 94%, #1a1a24 6%), var(--bg-card));
}

.ext-card--soft {
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, var(--bg-card) 88%, #1a1814 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ext-card:hover {
  transform: translateY(-2px);
}

/* Index ressources (#ressources-it-ia) : centrer uniquement le contenu des vignettes (.ext-card), tous viewports */
#ressources-it-ia .ext-resources-grid .ext-card {
  text-align: center;
  align-items: center;
}

/* Lien site officiel en tête de fiche (texte www.…) */
#ressources-it-ia .ext-resources-grid .ext-card__url-head {
  display: inline-flex;
  align-self: center;
  max-width: 100%;
  margin: 0 0 0.15rem;
  padding: 0.38rem 0.62rem;
  border-radius: 0.5rem;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-decoration: none;
  color: color-mix(in srgb, var(--text-1) 88%, var(--accent) 12%);
  background: color-mix(in srgb, var(--bg-card) 70%, var(--accent) 6%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-1) 5%, transparent);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#ressources-it-ia .ext-resources-grid .ext-card__url-head:hover {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--bg-card) 55%, var(--accent) 14%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 35%, transparent),
    0 6px 18px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}

#ressources-it-ia .ext-resources-grid .ext-card__url-head:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

#ressources-it-ia .ext-resources-grid .ext-card__url-head__text {
  word-break: break-all;
}

#ressources-it-ia .ext-resources-grid .ext-card__foot {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

#ressources-it-ia .ext-resources-grid .ext-card__foot .ext-card__link,
#ressources-it-ia .ext-resources-grid .ext-card__foot .ext-card__soon {
  margin-top: 0;
}

#ressources-it-ia .ext-resources-grid .ext-card__link {
  align-self: center;
}

/* Hashtag pied de fiche : survol distinct du lien URL */
#ressources-it-ia .ext-resources-grid .ext-card__link--hashtag {
  border-radius: 0.4rem;
  padding: 0.12rem 0.28rem;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#ressources-it-ia .ext-resources-grid .ext-card__link--hashtag:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 28%, transparent);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  #ressources-it-ia .ext-resources-grid .ext-card__url-head,
  #ressources-it-ia .ext-resources-grid .ext-card__url-head:hover,
  #ressources-it-ia .ext-resources-grid .ext-card__link--hashtag,
  #ressources-it-ia .ext-resources-grid .ext-card__link--hashtag:hover {
    transition: none;
    transform: none;
  }
}

#ressources-it-ia .ext-resources-grid .ext-card__soon {
  align-self: center;
}

#ressources-it-ia .ext-resources-grid .ext-card__hashtag-foot {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
}

#ressources-it-ia .ext-resources-grid .ext-card__hashtag-foot .ext-card__link--hashtag {
  display: inline-block;
}

/* Onglet WEB : placeholder unique « À l’étude » (pas de vignettes liens) */
#ressources-it-ia .ext-resources-grid .ext-card--web-study {
  justify-content: center;
  min-height: 5.25rem;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ext-accent, var(--accent)) 32%, transparent);
  background: color-mix(in srgb, var(--ext-accent, var(--accent)) 6%, var(--bg-card));
}

@media (min-width: 640px) {
  #ressources-it-ia .ext-resources-grid .ext-card--web-study {
    grid-column: 1 / -1;
    max-width: 22rem;
    justify-self: center;
  }
}

#ressources-it-ia .ext-resources-grid .ext-card--web-study:hover {
  transform: translateY(-1px);
}

#ressources-it-ia .ext-resources-grid .ext-card__web-study-badge {
  display: inline-block;
  font-family: var(--font-h);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: var(--text-1);
  background: color-mix(in srgb, var(--ext-accent, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ext-accent, var(--accent)) 30%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-1) 6%, transparent);
}

html[data-theme="light"] .section--ext-resources {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
}

html[data-theme="light"] .section--ext-resources.section--stripe-a {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.06), transparent 55%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] .section--ext-resources.section--stripe-b {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.06), transparent 55%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] .ext-chip {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.section-rule {
  width: 6rem;
  height: 2px;
  background: var(--accent);
  opacity: 0.8;
}

.video-meta {
  font-size: calc(0.85rem * var(--copy-scale));
}

.section-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.soon-title {
  font-family: var(--font-h);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

@media (max-width: 480px) {
  .btn--offset-inline {
    margin-left: 0;
    margin-top: 0.65rem;
  }

  .hashtag-xl {
    font-size: clamp(1.1rem, 7vw, 2rem);
    word-break: break-word;
  }
  .grid-archive {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 380px) {
  .grid-soon {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .grid-videos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diagonal-lines__line,
  .card-soon::before,
  .butterfly-shape,
  .wing,
  .butterfly-spark,
  .butterfly-drift {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-aos] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1023px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .diagonal-lines__line,
  .card-soon::before {
    animation: none !important;
  }
}

/* Page d’accueil — titres et paragraphes de section sur toute la largeur du conteneur */
.page-home .section .font-h1,
.page-home .section .font-h2 {
  width: 100%;
  max-width: none;
  min-width: 0;
  text-wrap: wrap;
  box-sizing: border-box;
}

.page-home .section .font-h1 > span {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-wrap: wrap;
  box-sizing: border-box;
}

/* Titres h2 des sections : Syne 800 + tracking serré (contraste avec corps Space Grotesk) */
body.page-home .section h2.font-h2 {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: var(--tracking-tight-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.12;
  display: block;
}

body.page-home .section h2.font-h2 > span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-wrap: wrap;
  box-sizing: border-box;
}

/* Terrain de jeu — forcer l’alignement typographique avec les autres titres h2 de l’accueil */
body.page-home .section--future-playground h2.font-h2,
body.page-home .section--future-playground h2.font-h2 > span {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: var(--tracking-tight-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.12;
}

body.page-home .section--future-playground h2.font-h2 {
  display: block;
}

body.page-home .section--future-playground h2.font-h2 > span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Titre long — pleine largeur (accueil ou page projet Commercify) */
.section.section--commercify-vision .font-h2,
.section.section--commercify-vision .font-h2 > span {
  width: 100%;
  max-width: none;
  text-wrap: wrap;
}

.section.section--commercify-vision .font-h2 > span {
  display: block;
}

.page-home .playground-manifeste {
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.page-home .projects-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.page-home .projects-head__lead {
  width: 100%;
  min-width: 0;
}

.page-home .projects-head__line {
  max-width: none;
  width: 100%;
}

/*
 * Accueil — hashtags « posés » (hors header / footer) : graisse normale.
 * Exception : .hashtag-xl (#CommercifyForever) — graisse renforcée.
 * Rangées sous titres (.home-hashtags-row) : même typo + lien orange souligné (comme .card__hashtag-link).
 */
body.page-home .home-hashtags-row .card__hashtag-link,
body.page-home .playground-butterfly-hashtag,
body.page-home .card--featured.card--commercify-brand .card__hashtags--commercify .card__hashtag-link,
body.page-home .card--featured.card--commercify-brand .card__hashtags--commercify .card__hashtag-link--muted,
body.page-home .youtube-call-card__hashtag .card__hashtag-link,
body.page-home .video-meta,
body.page-home .founder-trio__caption-context:not(.is-empty) {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: calc(0.95rem * var(--copy-scale));
  letter-spacing: 0.04em;
}

/* Sous-titres : rangée en pleine largeur, hashtags alignés au début (gauche en LTR), espacement comme .card__hashtags — pas de justification sur toute la ligne */
body.page-home .home-hashtags-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35rem 0.55rem;
  text-align: start;
}

body.page-home .home-hashtags-row .card__hashtag-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.page-home .home-hashtags-row .card__hashtag-link .dp-hashtag {
  color: inherit;
}

body.page-home .hashtag-xl {
  font-weight: 600;
}

.page-home .section--community-relax .section-eyebrow,
.page-home .section--community-relax .font-h2 {
  width: 100%;
  text-wrap: wrap;
}

.page-home .section--community-relax .font-h2 > span {
  display: block;
  width: 100%;
  max-width: 100%;
  text-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Page d’accueil — CTA et onglets discrets (repos léger, survol orange plein)
   Ne pas toucher .commercify-platform-panel__video-zone (vidéo pilote).
   Titres : --font-matrix-display · corps / UI : Syne (lisible) · mono : Share Tech Mono.
   -------------------------------------------------------------------------- */
body.page-home {
  --font-h: var(--font-matrix-display);
  --font-sub: "Syne", "Inter Local", ui-sans-serif, system-ui, sans-serif;
  /* Corps : Space Grotesk (contraste avec titres Syne / display Audiowide) */
  --font-body: "Space Grotesk", "Inter Local", ui-sans-serif, system-ui, sans-serif;
  --font-matrix-mono: "Share Tech Mono", ui-monospace, monospace;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 92% 52% at 100% -8%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 56%),
    radial-gradient(ellipse 78% 48% at -8% 102%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 54%);
  /* Équivalents fixes des color-mix (thème sombre) — moins de calcul au paint */
  --home-cta-idle-bg: #45474e;
  --home-cta-idle-bg-ghost: #32343b;
  --home-cta-idle-text: #f49f63;
  --home-cta-idle-border: #553522;
  --home-chip-idle-text: #f2a776;
}

html[data-theme="light"] body.page-home {
  --home-cta-idle-bg: #e8e0d4;
  --home-cta-idle-bg-ghost: #e2dbd0;
  --home-cta-idle-text: #a84c00;
  --home-cta-idle-border: #c9b8a4;
  --home-chip-idle-text: #8a5a28;
}

/* Accueil — corps de section : Space Grotesk lisible (contraste avec titres Syne 800) */
body.page-home .section:not(.section--hero) p {
  font-weight: 400;
  letter-spacing: var(--tracking-body-copy);
}

body.page-home .section:not(.section--hero) .font-h3 {
  font-weight: var(--weight-section-display);
  letter-spacing: -0.02em;
}

/* « Digital! » — accent dégradé (thème sombre / clair) */
body.page-home .hero-slogan__digital {
  background: linear-gradient(
    118deg,
    #fff8f0 0%,
    rgba(255, 180, 100, 0.98) 32%,
    var(--accent) 68%,
    color-mix(in srgb, var(--accent-2) 35%, #ff9a3c) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  /* Halo réduit : drop-shadow sur texte clipé = calque coûteux */
  filter: drop-shadow(0 0 10px rgba(255, 106, 0, 0.2));
}

html[data-theme="light"] body.page-home .hero-slogan__digital {
  background: linear-gradient(
    118deg,
    #3a2a18 0%,
    #8a4500 38%,
    var(--accent-strong) 72%,
    color-mix(in srgb, var(--accent-2) 40%, #c45a00) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

/* Section « terrain de jeu » : halos orange + signal froid discret */
body.page-home .section--future-playground.section--stripe-a {
  background:
    radial-gradient(78% 42% at 8% 12%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 50%),
    radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    radial-gradient(70% 45% at 0% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    var(--section-stripe-a);
}

body.page-home .section--future-playground.section--stripe-b {
  background:
    radial-gradient(78% 42% at 8% 12%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 48%),
    radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    radial-gradient(70% 45% at 0% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    var(--section-stripe-b);
}

body.page-home .playground-manifeste-box {
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 58%, var(--accent-2) 42%);
  border-top: 1px solid color-mix(in srgb, #fff 6%, transparent);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.09),
    -2px 0 18px var(--accent-2-dim);
}

html[data-theme="light"] body.page-home .playground-manifeste-box {
  border-top-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 28px rgba(60, 48, 32, 0.07);
}

/* Section « Le futur est notre terrain de jeu » — typo, frise, manifeste, hashtag (accueil seulement) */
body.page-home .section--future-playground > .container {
  position: relative;
  z-index: 1;
}

body.page-home .section--future-playground .playground-layout {
  gap: clamp(1.35rem, 3vw, 2rem);
}

body.page-home .section--future-playground h2.font-h2 {
  position: relative;
  padding-bottom: 0.45rem;
  font-size: clamp(2rem, 3.4vw + 1rem, 3.05rem);
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 1px 28px color-mix(in srgb, var(--accent-2-dim) 35%, transparent);
}

body.page-home .section--future-playground h2.font-h2::after {
  content: "";
  display: block;
  width: min(11rem, 55%);
  height: 3px;
  margin-top: 0.65rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent-2) 52%, var(--accent) 48%) 100%
  );
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2-dim) 75%, transparent);
}

html[data-theme="light"] body.page-home .section--future-playground h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .section--future-playground h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-home .section--future-playground .dp-method-strip {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--accent-2) 14%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 9%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 30%, transparent),
    0 14px 38px rgba(0, 0, 0, 0.09);
}

body.page-home .section--future-playground .dp-method-strip__rail {
  height: 5px;
  top: 0.82rem;
  opacity: 0.92;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 22%, transparent),
    color-mix(in srgb, var(--accent) 52%, transparent) 42%,
    color-mix(in srgb, var(--accent) 55%, transparent) 58%,
    color-mix(in srgb, var(--accent-2) 20%, transparent)
  );
}

body.page-home .section--future-playground .dp-method-strip__detail.is-visible {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--accent-2) 12%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

body.page-home .section--future-playground .dp-method-strip__node {
  transition:
    color 0.25s var(--ease-choreography),
    transform 0.22s var(--ease-choreography);
}

body.page-home .section--future-playground .playground-manifeste-box > span:first-of-type {
  display: block;
  font-size: calc(0.93rem * var(--copy-scale));
  line-height: 1.68;
  letter-spacing: var(--tracking-body-copy);
  color: color-mix(in srgb, var(--text) 90%, var(--accent-2) 10%);
}

html[data-theme="light"] body.page-home .section--future-playground .playground-manifeste-box > span:first-of-type {
  color: color-mix(in srgb, var(--text) 93%, var(--accent-2) 7%);
}

body.page-home .section--future-playground .playground-cta-intro,
body.page-home .section--future-playground .playground-cta-time {
  color: color-mix(in srgb, var(--text-secondary) 86%, var(--accent-2) 14%);
}

body.page-home .section--future-playground .playground-ctaquestion--services {
  border-left: none;
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 42%, var(--accent-2) 58%);
  padding-left: 0;
  padding-inline-start: 0.55rem;
}

body.page-home .section--future-playground .playground-butterfly-hashtag {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  font-size: calc(0.88rem * var(--copy-scale));
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--accent) 62%, var(--accent-2) 38%);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent-2-dim) 55%, transparent);
}

body.page-home .section--future-playground .playground-butterfly-hashtag a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.2em;
}

body.page-home .section--future-playground .playground-butterfly-hashtag a:hover {
  color: var(--accent-strong);
  text-decoration-color: var(--accent-hover);
}

body.page-home .section--future-playground .playground-butterfly-hashtag a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

body.page-home .section--future-playground .playground-ctaquestion--discuss:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 0 rgba(0, 0, 0, 0.18),
    0 10px 32px rgba(255, 106, 0, 0.38),
    0 0 26px var(--accent-2-dim);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .section--future-playground .playground-ctaquestion--discuss:hover,
  body.page-home .section--future-playground .playground-ctaquestion--discuss:hover::after {
    transform: none;
  }
}

/* Section ressources externes IT/AI (#ressources-it-ia) — fond, titre, chips, cartes, CTA (accueil seulement) */
body.page-home .section--ext-resources > .container {
  position: relative;
  z-index: 1;
}

body.page-home .section--ext-resources.section--stripe-a {
  background:
    radial-gradient(72% 48% at 6% 10%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 52%),
    radial-gradient(68% 44% at 96% 88%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.07), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-stripe-b) 88%, #141210 12%) 0%, var(--section-stripe-a) 100%);
}

body.page-home .section--ext-resources.section--stripe-b {
  background:
    radial-gradient(72% 48% at 6% 10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 50%),
    radial-gradient(68% 44% at 96% 88%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.07), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-stripe-a) 88%, #141210 12%) 0%, var(--section-stripe-b) 100%);
}

body.page-home .section--ext-resources::before {
  opacity: 0.46;
  background-image:
    radial-gradient(ellipse 100% 55% at 50% -5%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 42%),
    repeating-linear-gradient(
      -12deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 10px
    );
}

html[data-theme="light"] body.page-home .section--ext-resources.section--stripe-a {
  background:
    radial-gradient(70% 46% at 8% 12%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.06), transparent 55%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home .section--ext-resources.section--stripe-b {
  background:
    radial-gradient(70% 46% at 8% 12%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 48%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 106, 0, 0.06), transparent 55%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home .section--ext-resources .ext-resources-header h2.font-h2 {
  position: relative;
  padding-bottom: 0.45rem;
  font-size: clamp(1.95rem, 3.2vw + 0.95rem, 2.95rem);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 1px 26px color-mix(in srgb, var(--accent-2-dim) 30%, transparent);
}

body.page-home .section--ext-resources .ext-resources-header h2.font-h2::after {
  content: "";
  display: block;
  width: min(10rem, 48%);
  height: 3px;
  margin-top: 0.6rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 35%, var(--accent) 65%) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 40%, var(--accent-2) 60%) 100%
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2-dim) 70%, transparent);
}

html[data-theme="light"] body.page-home .section--ext-resources .ext-resources-header h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .section--ext-resources .ext-resources-header h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-home .section--ext-resources .ext-resources-hashtags {
  margin-bottom: 0.85rem;
}

body.page-home .section--ext-resources .ext-resources-chips {
  padding: 0.65rem 0.78rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--accent-2) 14%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 93%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 24%, transparent);
}

html[data-theme="light"] body.page-home .section--ext-resources .ext-resources-chips {
  background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-2) 3%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 10%, transparent);
}

body.page-home .section--ext-resources .ext-chip {
  transition:
    border-color 0.25s var(--ease-choreography),
    background 0.25s var(--ease-choreography),
    color 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography);
}

body.page-home .section--ext-resources .ext-chip.is-active {
  box-shadow:
    0 4px 18px var(--btn-focus),
    0 0 22px color-mix(in srgb, var(--accent-2-dim) 60%, transparent);
}

body.page-home .section--ext-resources .ext-resources-grid {
  gap: 1rem;
}

body.page-home .section--ext-resources .ext-card {
  transition:
    transform 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography),
    border-color 0.25s var(--ease-choreography);
}

body.page-home .section--ext-resources .ext-card:hover {
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.14),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 32%, transparent);
}

body.page-home .section--ext-resources .ext-card--stripe {
  border-left: none;
  border-inline-start: 4px solid var(--accent);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    -1px 0 14px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

body.page-home .section--ext-resources .ext-card--stripe:hover {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.15),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 28%, transparent),
    -2px 0 20px color-mix(in srgb, var(--accent-2-dim) 45%, transparent);
}

html[dir="rtl"] body.page-home .section--ext-resources .ext-card--stripe {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    1px 0 14px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

html[dir="rtl"] body.page-home .section--ext-resources .ext-card--stripe:hover {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.15),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 28%, transparent),
    2px 0 20px color-mix(in srgb, var(--accent-2-dim) 45%, transparent);
}

body.page-home .section--ext-resources .ext-card__kind {
  font-family: var(--font-matrix-mono);
  letter-spacing: 0.05em;
  text-transform: none;
  color: color-mix(in srgb, var(--text-secondary) 72%, var(--accent-2) 28%);
  opacity: 1;
}

body.page-home .section--ext-resources .ext-card__title {
  font-family: var(--font-sub);
  font-weight: var(--weight-section-display);
  letter-spacing: var(--tracking-tight-display);
}

body.page-home .section--ext-resources .ext-card__link {
  color: color-mix(in srgb, var(--accent) 78%, var(--accent-2) 22%);
  transition:
    color 0.22s var(--ease-choreography),
    opacity 0.22s var(--ease-choreography);
}

body.page-home .section--ext-resources .ext-card__link:hover {
  opacity: 1;
  color: var(--accent-strong);
}

body.page-home .section--ext-resources .ext-resources-cta .btn:hover,
body.page-home .section--ext-resources .ext-resources-cta .btn:focus-visible {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.16),
    0 0 22px var(--accent-2-dim);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .section--ext-resources .ext-card:hover {
    transform: none;
  }
}

/* Section « Nos projets » (#projets, accueil seulement) */
body.page-home #projets > .container, body.page-projects #projets > .container {
  position: relative;
  z-index: 1;
}

body.page-home #projets.section--stripe-a, body.page-projects #projets.section--stripe-a {
  background:
    radial-gradient(68% 50% at 12% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%),
    radial-gradient(60% 42% at 92% 94%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-stripe-b) 88%, #141210 12%) 0%, var(--section-stripe-a) 100%);
}

body.page-home #projets.section--stripe-b, body.page-projects #projets.section--stripe-b {
  background:
    radial-gradient(68% 50% at 12% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    radial-gradient(60% 42% at 92% 94%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-stripe-a) 88%, #141210 12%) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #projets.section--stripe-a, html[data-theme="light"] body.page-projects #projets.section--stripe-a {
  background:
    radial-gradient(64% 46% at 10% 12%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 48%),
    radial-gradient(55% 38% at 94% 88%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 45%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #projets.section--stripe-b, html[data-theme="light"] body.page-projects #projets.section--stripe-b {
  background:
    radial-gradient(64% 46% at 10% 12%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 46%),
    radial-gradient(55% 38% at 94% 88%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 45%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #projets .projects-head__lead h2.font-h2, body.page-projects #projets .projects-head__lead h2.font-h2 {
  position: relative;
  padding-bottom: 0.4rem;
  font-size: clamp(1.95rem, 3.1vw + 0.95rem, 2.92rem);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 1px 24px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
}

body.page-home #projets .projects-head__lead h2.font-h2::after, body.page-projects #projets .projects-head__lead h2.font-h2::after {
  content: "";
  display: block;
  width: min(10rem, 48%);
  height: 3px;
  margin-top: 0.58rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent-2) 48%, var(--accent) 52%) 100%
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2-dim) 68%, transparent);
}

html[data-theme="light"] body.page-home #projets .projects-head__lead h2.font-h2, html[data-theme="light"] body.page-projects #projets .projects-head__lead h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #projets .projects-head__lead h2.font-h2::after,   body.page-projects #projets .projects-head__lead h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-home #projets .projects-head__line, body.page-projects #projets .projects-head__line {
  height: 2px;
  max-width: 20rem;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 55%, var(--accent-2) 45%),
    color-mix(in srgb, var(--accent-2) 25%, transparent) 72%,
    transparent 100%
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-2-dim) 40%, transparent);
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #projets .projects-head__line,   body.page-projects #projets .projects-head__line {
    box-shadow: none;
  }
}

body.page-home #projets .projects-head__hashtags, body.page-projects #projets .projects-head__hashtags {
  margin-top: 0.12rem;
}

/* CLS : réserve verticale sous le titre projets (polices / i18n). */
body.page-home #projets .projects-head__hashtags:not(.projects-head__hashtags--multi) .home-hashtags-row, body.page-projects #projets .projects-head__hashtags:not(.projects-head__hashtags--multi) .home-hashtags-row {
  min-height: 2.85rem;
  align-items: center;
}

body.page-home #projets .projects-head__hashtags.projects-head__hashtags--multi, body.page-projects #projets .projects-head__hashtags.projects-head__hashtags--multi {
  min-height: 5.65rem;
}

@media (min-width: 768px) {
  body.page-home #projets .grid-projects,   body.page-projects #projets .grid-projects {
    gap: 1.05rem;
    --grid-projects-gap: 1.05rem;
  }
}

/*
 * Vignettes projets inactives (flip) : plus compactes que la carte Commercify (featured).
 * Ciblage strict : .card--flip.card--inactive — pas la carte Commercify.
 */
body.page-home #projets .grid-projects > .card--flip.card--inactive, body.page-projects #projets .grid-projects > .card--flip.card--inactive {
  min-height: 176px;
}

body.page-home #projets .grid-projects > .card--flip.card--inactive .card-flip__inner, body.page-projects #projets .grid-projects > .card--flip.card--inactive .card-flip__inner {
  min-height: 176px;
}

body.page-home #projets .grid-projects > .card--flip.card--inactive .card-flip__face, body.page-projects #projets .grid-projects > .card--flip.card--inactive .card-flip__face {
  padding: 0.82rem 0.95rem;
  gap: 0.38rem;
}

body.page-home #projets .grid-projects > .card--flip.card--inactive .card-flip__slogan, body.page-projects #projets .grid-projects > .card--flip.card--inactive .card-flip__slogan {
  min-height: 2.2em;
  margin-top: 0.12rem;
  font-size: calc(0.82rem * var(--copy-scale));
  line-height: 1.35;
}

body.page-home #projets .grid-projects > .card--flip.card--inactive .card-flip__face--front h3, body.page-projects #projets .grid-projects > .card--flip.card--inactive .card-flip__face--front h3 {
  font-size: clamp(0.94rem, 2.1vw, 1.08rem);
}

@media (max-width: 1024px) and (hover: none),
       (max-width: 1024px) and (pointer: coarse) {
  body.page-home #projets .grid-projects > .card--flip.card--inactive .card-flip__face--front,   body.page-projects #projets .grid-projects > .card--flip.card--inactive .card-flip__face--front {
    aspect-ratio: 2.5 / 1;
  }
}

body.page-home #projets .card--flip:not(.card--inactive), body.page-projects #projets .card--flip:not(.card--inactive) {
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography);
}

body.page-home #projets .card--flip:not(.card--inactive):hover, body.page-projects #projets .card--flip:not(.card--inactive):hover {
  /* Annule translateY(-2px) de .card:hover : combiné au rotateY du flip, ça augmente le CLS. */
  transform: none;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 30%, transparent);
}

/* Limite la propagation des décalages de mise en page entre vignettes. */
body.page-home #projets .grid-projects > .card--flip, body.page-projects #projets .grid-projects > .card--flip {
  contain: layout;
}

body.page-home #projets .card--featured.card--commercify-brand, body.page-projects #projets .card--featured.card--commercify-brand {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 28%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.14);
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography);
}

body.page-home #projets .card--featured.card--commercify-brand:hover, body.page-projects #projets .card--featured.card--commercify-brand:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 20%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.16),
    0 0 32px color-mix(in srgb, var(--accent-2-dim) 42%, transparent);
}

body.page-home #projets .projects-cta__btn--github:hover,
body.page-projects #projets .projects-cta__btn--github:hover,
body.page-home #projets .projects-cta__btn--github:focus-visible,
body.page-projects #projets .projects-cta__btn--github:focus-visible {
  box-shadow:
    0 6px 26px color-mix(in srgb, var(--accent-2) 48%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 0 28px var(--accent-2-dim);
}

body.page-home #projets .projects-cta__hub-link:hover,
body.page-projects #projets .projects-cta__hub-link:hover,
body.page-home #projets .projects-cta__hub-link:focus-visible,
body.page-projects #projets .projects-cta__hub-link:focus-visible {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent),
    0 5px 26px color-mix(in srgb, var(--accent-2) 34%, transparent),
    0 0 24px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #projets .card--featured.card--commercify-brand:hover,   body.page-projects #projets .card--featured.card--commercify-brand:hover {
    transform: none;
  }
}

body.page-home #projets .card--featured.card--genericvoice-brand, body.page-projects #projets .card--featured.card--genericvoice-brand,
body.page-home #projets .card--featured.card--webterminal-brand, body.page-projects #projets .card--featured.card--webterminal-brand,
body.page-home #projets .card--featured.card--transcriptit-brand, body.page-projects #projets .card--featured.card--transcriptit-brand,
body.page-home #projets .card--featured.card--promptdemerde-brand, body.page-projects #projets .card--featured.card--promptdemerde-brand,
body.page-projects #projets-grid-pending .card--pending-featured.card--genericvoice-brand {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 30%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.14);
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography);
}

body.page-home #projets .card--featured.card--genericvoice-brand:hover, body.page-projects #projets .card--featured.card--genericvoice-brand:hover,
body.page-home #projets .card--featured.card--webterminal-brand:hover, body.page-projects #projets .card--featured.card--webterminal-brand:hover,
body.page-home #projets .card--featured.card--transcriptit-brand:hover, body.page-projects #projets .card--featured.card--transcriptit-brand:hover,
body.page-home #projets .card--featured.card--promptdemerde-brand:hover, body.page-projects #projets .card--featured.card--promptdemerde-brand:hover,
body.page-projects #projets-grid-pending .card--pending-featured.card--genericvoice-brand:hover {
  transform: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 24%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.16),
    0 0 32px color-mix(in srgb, var(--accent-2-dim) 36%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #projets .card--featured.card--genericvoice-brand:hover,   body.page-projects #projets .card--featured.card--genericvoice-brand:hover,
  body.page-home #projets .card--featured.card--webterminal-brand:hover,   body.page-projects #projets .card--featured.card--webterminal-brand:hover,
  body.page-home #projets .card--featured.card--transcriptit-brand:hover,   body.page-projects #projets .card--featured.card--transcriptit-brand:hover,
  body.page-projects #projets-grid-pending .card--pending-featured.card--genericvoice-brand:hover {
    transform: none;
  }
}

/* Section communication / réseaux (#communication, accueil seulement) */
body.page-home #communication > .container {
  position: relative;
  z-index: 1;
}

body.page-home #communication.section--stripe-a {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #communication.section--stripe-b {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 48%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #communication.section--stripe-a {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #communication.section--stripe-b {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #communication h2.font-h2 {
  position: relative;
  padding-bottom: 0.38rem;
  font-size: clamp(1.88rem, 2.9vw + 0.88rem, 2.78rem);
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 26%, transparent);
}

body.page-home #communication h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 65%, transparent);
}

html[data-theme="light"] body.page-home #communication h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #communication h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-home #communication .social-hub__hashtag {
  margin-top: 0.2rem;
}

@media (min-width: 1024px) {
  body.page-home #communication .social-hub-grid {
    gap: 1.4rem;
  }
}

body.page-home #communication .social-hub-youtube {
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 22%, transparent),
    0 10px 32px rgba(0, 0, 0, 0.12);
}

body.page-home #communication .social-hub-youtube:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 18%, transparent),
    0 14px 40px rgba(0, 0, 0, 0.14),
    0 0 28px color-mix(in srgb, var(--accent-2-dim) 35%, transparent);
}

body.page-home #communication .social-hub-youtube__eyebrow {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--accent) 68%, var(--accent-2) 32%);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

body.page-home #communication .social-hub-youtube__thumb {
  border-color: color-mix(in srgb, var(--accent-dim) 62%, var(--accent-2) 38%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 18%, transparent);
  transition:
    border-color 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography);
}

body.page-home #communication .social-hub-youtube__thumb:hover,
body.page-home #communication .social-hub-youtube__thumb:focus-visible {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

body.page-home #communication .social-hub-youtube__thumb img {
  transition:
    transform 0.28s var(--ease-choreography),
    opacity 0.22s var(--ease-choreography);
}

body.page-home #communication .social-hub-youtube__cta:hover,
body.page-home #communication .social-hub-youtube__cta:focus-visible {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.15),
    0 0 22px var(--accent-2-dim);
}

body.page-home #communication .social-network-card {
  transition:
    transform 0.25s var(--ease-choreography),
    border-color 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 64%, var(--accent-2) 36%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 14px rgba(0, 0, 0, 0.14),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 15%, transparent);
}

body.page-home #communication .social-network-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(255, 106, 0, 0.12),
    0 0 26px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

html[data-theme="light"] body.page-home #communication .social-network-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 8%, transparent);
}

html[data-theme="light"] body.page-home #communication .social-network-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(0, 0, 0, 0.08),
    0 0 24px color-mix(in srgb, var(--accent-2-dim) 25%, transparent);
}

body.page-home #communication .social-network-card__icon {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 14%, rgba(255, 106, 0, 0.12)),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  body.page-home #communication .social-network-card__detail {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-dim) 32%, var(--accent-2) 25%, transparent);
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 94%, var(--accent-2) 4%) 0%,
      color-mix(in srgb, var(--bg-card) 86%, var(--accent) 12%) 100%
    );
  }

  html[data-theme="light"] body.page-home #communication .social-network-card__detail {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 96%, var(--accent-2) 3%) 0%,
      color-mix(in srgb, var(--bg-card) 90%, var(--accent) 6%) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #communication .social-hub-youtube__eyebrow {
    text-shadow: none;
  }

  body.page-home #communication .social-hub-youtube:hover {
    transform: none;
  }

  body.page-home #communication .social-hub-youtube__thumb:hover img,
  body.page-home #communication .social-hub-youtube__thumb:focus-visible img {
    transform: none;
  }

  body.page-home #communication .social-network-card:hover {
    transform: none;
  }
}

/* Section Commercify plateforme (#commercify-plateforme accueil, #commercify-plateforme-page projet)
 * Ne pas altérer .commercify-platform-panel__video-zone (repère produit / pilote). */
body.page-home #commercify-plateforme > .container,
body.page-commercify #commercify-plateforme-page > .container {
  position: relative;
  z-index: 1;
}

body.page-home #commercify-plateforme.section--stripe-a,
body.page-commercify #commercify-plateforme-page.section--stripe-a {
  background:
    radial-gradient(72% 50% at 10% 6%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
    radial-gradient(58% 44% at 92% 96%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 48%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #commercify-plateforme.section--stripe-b,
body.page-commercify #commercify-plateforme-page.section--stripe-b {
  background:
    radial-gradient(72% 50% at 10% 6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 50%),
    radial-gradient(58% 44% at 92% 96%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 46%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #commercify-plateforme.section--stripe-a,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page.section--stripe-a {
  background:
    radial-gradient(70% 46% at 12% 10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(52% 38% at 90% 92%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 46%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #commercify-plateforme.section--stripe-b,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page.section--stripe-b {
  background:
    radial-gradient(70% 46% at 12% 10%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(52% 38% at 90% 92%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 46%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #commercify-plateforme .commercify-platform-panel h2.font-h2,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel h2.font-h2 {
  text-wrap: balance;
  padding-bottom: 0.32rem;
  text-shadow: 0 1px 20px color-mix(in srgb, var(--accent-2-dim) 24%, transparent);
}

body.page-home #commercify-plateforme .commercify-platform-panel h2.font-h2 > span,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel h2.font-h2 > span {
  display: block;
}

body.page-home #commercify-plateforme .commercify-platform-panel h2.font-h2::after,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel h2.font-h2::after {
  content: "";
  display: block;
  width: min(11rem, 38%);
  height: 3px;
  margin-top: 0.62rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent-2) 48%, var(--accent) 52%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 62%, transparent);
}

html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel h2.font-h2,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #commercify-plateforme .commercify-platform-panel h2.font-h2::after,
  body.page-commercify #commercify-plateforme-page .commercify-platform-panel h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-home #commercify-plateforme .commercify-platform-panel__hashtag,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__hashtag {
  margin-top: 0.08rem;
}

body.page-home #commercify-plateforme .commercify-platform-panel__hero,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__hero {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 26%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.13);
  transition: box-shadow 0.28s var(--ease-choreography);
}

body.page-home #commercify-plateforme .commercify-platform-panel__hero:hover,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__hero:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 16%, transparent),
    0 16px 48px rgba(0, 0, 0, 0.15),
    0 0 28px color-mix(in srgb, var(--accent-2-dim) 30%, transparent);
}

body.page-home #commercify-plateforme .commercify-hero-carousel__tile::after,
body.page-commercify #commercify-plateforme-page .commercify-hero-carousel__tile::after {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent-2) 12%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, #ff8f1f 32%, transparent) 0%,
      color-mix(in srgb, #ff6a00 26%, transparent) 100%
    );
}

body.page-home #commercify-plateforme .commercify-hero-carousel__btn,
body.page-commercify #commercify-plateforme-page .commercify-hero-carousel__btn {
  transition:
    transform 0.2s var(--ease-choreography),
    box-shadow 0.2s var(--ease-choreography),
    filter 0.2s var(--ease-choreography);
  box-shadow:
    0 4px 14px rgba(255, 106, 0, 0.35),
    0 0 20px color-mix(in srgb, var(--accent-2-dim) 32%, transparent);
}

body.page-home #commercify-plateforme .commercify-hero-carousel__btn:hover,
body.page-home #commercify-plateforme .commercify-hero-carousel__btn:focus-visible,
body.page-commercify #commercify-plateforme-page .commercify-hero-carousel__btn:hover,
body.page-commercify #commercify-plateforme-page .commercify-hero-carousel__btn:focus-visible {
  box-shadow:
    0 6px 18px rgba(255, 106, 0, 0.42),
    0 0 26px color-mix(in srgb, var(--accent-2-dim) 42%, transparent);
}

/* CTA plateforme — discrets ; lien externe = charte Commercify.online (pas DreamProject orange/teal) */
body.page-home #commercify-plateforme .commercify-platform-panel__cta .btn,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .btn {
  font-size: calc(0.78rem * var(--copy-scale));
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-width: 1px;
  box-shadow: none;
}

body.page-home #commercify-plateforme .commercify-platform-panel__cta .btn:hover,
body.page-home #commercify-plateforme .commercify-platform-panel__cta .btn:focus-visible,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .btn:hover,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .btn:focus-visible {
  box-shadow: none;
  transform: none;
}

body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-external,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-external {
  color: rgba(255, 245, 235, 0.88);
  background: var(--cf-online-fill);
  border-color: var(--cf-online-border);
  font-weight: 600;
}

body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-external:hover,
body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-external:focus-visible,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-external:hover,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-external:focus-visible {
  color: #fff;
  background: var(--cf-online-fill-hover);
  border-color: var(--cf-online-border-hover);
}

body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-project,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-project {
  background: transparent;
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--text-secondary) 32%, transparent);
  font-weight: 500;
}

body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-project:hover,
body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-project:focus-visible,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-project:hover,
body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-project:focus-visible {
  background: color-mix(in srgb, var(--text-secondary) 7%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text-secondary) 48%, transparent);
}

.commercify-platform-panel__cta-external-icon {
  flex-shrink: 0;
  opacity: 0.72;
}

html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-external,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-external {
  color: color-mix(in srgb, var(--cf-online-orange) 68%, #1a1208 32%);
  background: rgba(255, 106, 0, 0.06);
  border-color: rgba(255, 106, 0, 0.28);
}

html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-external:hover,
html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-external:focus-visible,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-external:hover,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-external:focus-visible {
  color: #7c2d12;
  background: rgba(255, 106, 0, 0.11);
  border-color: rgba(255, 106, 0, 0.4);
}

html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-project,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-project {
  color: color-mix(in srgb, var(--text-secondary) 88%, #1a1208 12%);
  border-color: color-mix(in srgb, var(--text-secondary) 28%, #c9b8a4 72%);
}

html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-project:hover,
html[data-theme="light"] body.page-home #commercify-plateforme .commercify-platform-panel__cta .commercify-platform-panel__cta-project:focus-visible,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-project:hover,
html[data-theme="light"] body.page-commercify #commercify-plateforme-page .commercify-platform-panel__cta .commercify-platform-panel__cta-project:focus-visible {
  color: #1a1208;
  background: color-mix(in srgb, var(--text-secondary) 6%, #fff 94%);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #commercify-plateforme .commercify-platform-panel__hero:hover,
  body.page-commercify #commercify-plateforme-page .commercify-platform-panel__hero:hover {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 26%, transparent),
      0 12px 40px rgba(0, 0, 0, 0.13);
  }
}

/* Section sponsors (#sponsors-premiers, accueil seulement) */
body.page-home #sponsors-premiers > .container {
  position: relative;
  z-index: 1;
}

body.page-home #sponsors-premiers.section--stripe-a {
  background:
    radial-gradient(68% 48% at 6% 10%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 50%),
    radial-gradient(55% 38% at 98% 90%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%),
    var(--section-stripe-a);
}

body.page-home #sponsors-premiers.section--stripe-b {
  background:
    radial-gradient(68% 48% at 6% 10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(55% 38% at 98% 90%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%),
    var(--section-stripe-b);
}

html[data-theme="light"] body.page-home #sponsors-premiers.section--stripe-a {
  background:
    radial-gradient(66% 44% at 8% 12%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 48%),
    radial-gradient(50% 34% at 96% 88%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 46%),
    var(--section-stripe-a);
}

html[data-theme="light"] body.page-home #sponsors-premiers.section--stripe-b {
  background:
    radial-gradient(66% 44% at 8% 12%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 46%),
    radial-gradient(50% 34% at 96% 88%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 46%),
    var(--section-stripe-b);
}

body.page-home #sponsors-premiers .sponsors-solicit h2.font-h2 {
  position: relative;
  text-wrap: balance;
  padding-bottom: 0.32rem;
  text-shadow: 0 1px 20px color-mix(in srgb, var(--accent-2-dim) 22%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit h2.font-h2 > span {
  display: block;
}

body.page-home #sponsors-premiers .sponsors-solicit h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 46%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 38%, var(--accent) 62%) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 40%, var(--accent-2) 60%) 100%
  );
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent-2-dim) 58%, transparent);
}

html[data-theme="light"] body.page-home #sponsors-premiers .sponsors-solicit h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #sponsors-premiers .sponsors-solicit h2.font-h2::after {
    box-shadow: none;
  }
}

body.page-home #sponsors-premiers .sponsors-solicit__hashtag {
  margin-top: 0.12rem;
}

@media (min-width: 768px) {
  body.page-home #sponsors-premiers .sponsors-solicit-grid {
    gap: 1.25rem;
  }
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell {
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--accent-2) 16%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 14%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 30px rgba(0, 0, 0, 0.11),
    0 0 22px color-mix(in srgb, var(--accent-2-dim) 24%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--official {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--accent-2) 22%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 18%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate {
  --sponsors-donate-green: #3ecf8e;
  border-color: color-mix(in srgb, var(--sponsors-donate-green) 36%, var(--accent) 24%, var(--accent-2) 14%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 22%, transparent),
    0 0 20px color-mix(in srgb, var(--sponsors-donate-green) 14%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 30px rgba(0, 0, 0, 0.11),
    0 0 22px color-mix(in srgb, var(--sponsors-donate-green) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--accent-2-dim) 18%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--cta {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--accent-2) 14%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-cta__project-link {
  color: color-mix(in srgb, var(--accent) 62%, var(--accent-2) 38%);
  border-bottom-color: color-mix(in srgb, var(--accent-2-dim) 44%, var(--accent) 36%, transparent);
}

body.page-home #sponsors-premiers .sponsors-solicit-cta__project-link:hover,
body.page-home #sponsors-premiers .sponsors-solicit-cta__project-link:focus-visible {
  color: color-mix(in srgb, var(--accent-hover) 58%, var(--accent-2) 42%);
  border-bottom-color: color-mix(in srgb, var(--accent-hover) 65%, var(--accent-2) 35%);
}

html[dir="rtl"] body.page-home #sponsors-premiers .sponsors-solicit-cta__project-link {
  align-self: flex-end;
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__eyebrow {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.11em;
  color: color-mix(in srgb, var(--accent) 62%, var(--accent-2) 38%);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-grid__eyebrow {
  --sponsors-donate-green: #3ecf8e;
  color: color-mix(in srgb, var(--sponsors-donate-green) 52%, var(--accent-2) 48%);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__text {
  color: color-mix(in srgb, var(--text-secondary) 92%, var(--accent-2) 8%);
}

/* Colonne CTA sponsors : paragraphe vision + liste à tirets (sauts de ligne dans les data-*) */
body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--cta .sponsors-solicit-grid__text--preline,
body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-grid__text--preline {
  white-space: pre-line;
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__actions .btn:hover,
body.page-home #sponsors-premiers .sponsors-solicit-grid__actions .btn:focus-visible {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.13),
    0 0 22px var(--accent-2-dim);
}

body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-grid__actions .btn--primary:hover,
body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate .sponsors-solicit-grid__actions .btn--primary:focus-visible {
  background: color-mix(in srgb, var(--sponsors-donate-green) 88%, #062a1c 12%);
  border-color: color-mix(in srgb, var(--sponsors-donate-green) 72%, #c8ffe8 28%);
  color: #f4fffa;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14),
    0 0 24px color-mix(in srgb, var(--sponsors-donate-green) 42%, transparent);
}

html[data-theme="light"] body.page-home #sponsors-premiers .sponsors-solicit-grid__cell {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04) inset,
    0 0 0 1px color-mix(in srgb, var(--accent-2) 8%, transparent);
}

html[data-theme="light"] body.page-home #sponsors-premiers .sponsors-solicit-grid__cell:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05) inset,
    0 8px 26px rgba(0, 0, 0, 0.07),
    0 0 20px color-mix(in srgb, var(--accent-2-dim) 18%, transparent);
}

html[data-theme="light"] body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate {
  --sponsors-donate-green: #2fb87a;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04) inset,
    0 0 0 1px color-mix(in srgb, var(--sponsors-donate-green) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--sponsors-donate-green) 11%, transparent);
}

html[data-theme="light"] body.page-home #sponsors-premiers .sponsors-solicit-grid__cell--donate:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05) inset,
    0 8px 26px rgba(0, 0, 0, 0.07),
    0 0 20px color-mix(in srgb, var(--sponsors-donate-green) 18%, transparent),
    0 0 26px color-mix(in srgb, var(--accent-2-dim) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #sponsors-premiers .sponsors-solicit-grid__cell:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 14%, transparent);
  }

  html[data-theme="light"] body.page-home #sponsors-premiers .sponsors-solicit-grid__cell:hover {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.04) inset,
      0 0 0 1px color-mix(in srgb, var(--accent-2) 8%, transparent);
  }
}

/* Accueil — sections finales : même langage que #communication (stripes, halos --accent-2, titres, RTL, reduced motion) */
body.page-home #youtubeurs-call > .container,
body.page-home #crowdfunding > .container,
body.page-home #mecene > .container,
body.page-home #communaute > .container,
body.page-home #livre-or > .container,
body.page-home #faq > .container,
body.page-faq #faq > .container {
  position: relative;
  z-index: 1;
}

/* `/pf/faq/` : sauts de ligne des réponses MM conservés dans l’accordéon */
body.page-faq #faq .faq-item__a span {
  white-space: pre-line;
}

body.page-faq .page-faq.page-faq--full {
  padding-top: 0.35rem;
}

/* FAQ — CTA : deux styles lisibles (formulaire = plein orange, mail = contour accent froid) */
body.page-faq .page-genericvoice__cta .page-faq__cta-btn--form.btn--primary {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--btn-text) 18%, transparent);
}

body.page-faq .page-genericvoice__cta .page-faq__cta-btn--mail {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--accent-2);
  border: 2px solid color-mix(in srgb, var(--accent-2) 55%, var(--line-strong));
}

body.page-faq .page-genericvoice__cta .page-faq__cta-btn--mail:hover {
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  color: var(--text);
  border-color: var(--accent-2);
}

body.page-faq .page-genericvoice__cta .page-faq__cta-btn--mail:focus-visible {
  outline-color: var(--accent-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 35%, transparent);
}

@media (min-width: 48rem) {
  body.page-faq .page-faq.page-faq--full #faq .faq-head {
    margin-bottom: 0.15rem;
  }
}

/* --- #youtubeurs-call --- */
body.page-home #youtubeurs-call.section--stripe-a {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #youtubeurs-call.section--stripe-b {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 48%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #youtubeurs-call.section--stripe-a {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #youtubeurs-call.section--stripe-b {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call-kicker {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--accent) 68%, var(--accent-2) 32%);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call {
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 62%, var(--accent-2) 38%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 18px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 18%, transparent);
}

body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call-title {
  position: relative;
  padding-bottom: 0.28rem;
  text-wrap: balance;
  text-shadow: 0 1px 18px color-mix(in srgb, var(--accent-2-dim) 22%, transparent);
}

body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call-title::after {
  content: "";
  display: block;
  width: min(7.5rem, 46%);
  height: 3px;
  margin-top: 0.45rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-2-dim) 55%, transparent);
}

html[data-theme="light"] body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

body.page-home #youtubeurs-call .youtube-call-card {
  transition:
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 64%, var(--accent-2) 36%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 12%, transparent);
}

body.page-home #youtubeurs-call .youtube-call-card:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 16%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.14),
    0 0 22px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
}

body.page-home #youtubeurs-call .youtube-call-card__thumb {
  transition:
    border-color 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 62%, var(--accent-2) 38%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 14%, transparent);
}

body.page-home #youtubeurs-call .youtube-call-card__thumb:hover,
body.page-home #youtubeurs-call .youtube-call-card__thumb:focus-visible {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 20%, transparent),
    0 6px 20px rgba(0, 0, 0, 0.1);
}

/* --- #crowdfunding --- */
body.page-home #crowdfunding.section--stripe-a {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #crowdfunding.section--stripe-b {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 48%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #crowdfunding.section--stripe-a {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #crowdfunding.section--stripe-b {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #crowdfunding h2.font-h2 {
  position: relative;
  padding-bottom: 0.38rem;
  font-size: clamp(1.88rem, 2.9vw + 0.88rem, 2.78rem);
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 26%, transparent);
}

body.page-home #crowdfunding h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 65%, transparent);
}

html[data-theme="light"] body.page-home #crowdfunding h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

body.page-home #crowdfunding .crowdfunding-card {
  transition:
    transform 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 64%, var(--accent-2) 36%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 14px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 12%, transparent);
}

body.page-home #crowdfunding .crowdfunding-card:hover {
  border-color: color-mix(in srgb, var(--accent-hover) 70%, var(--accent-2) 30%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(255, 106, 0, 0.1),
    0 0 26px color-mix(in srgb, var(--accent-2-dim) 32%, transparent);
}

html[data-theme="light"] body.page-home #crowdfunding .crowdfunding-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 10px 28px rgba(0, 0, 0, 0.07),
    0 0 22px color-mix(in srgb, var(--accent-2-dim) 22%, transparent);
}

body.page-home #crowdfunding .crowdfunding-donation__btn {
  transition:
    background-color 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography);
}

body.page-home #crowdfunding .crowdfunding-donation__btn:hover,
body.page-home #crowdfunding .crowdfunding-donation__btn:focus-visible {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.14),
    0 0 26px color-mix(in srgb, var(--crowdfunding-donate-green) 48%, transparent);
}

/* Encart vert Ulule — crowdfunding (texte + lancement modale vidéo) */
body.page-home #crowdfunding .crowdfunding-info-placeholder {
  margin-top: 2rem;
  padding: 2.5rem 1.75rem 2.75rem;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #4caf50 0%, #3d8b40 52%, #2f6d33 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 12px 40px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, #fff 14%, transparent);
}

html[data-theme="light"] body.page-home #crowdfunding .crowdfunding-info-placeholder {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px color-mix(in srgb, #0d3320 12%, transparent);
}

body.page-home #crowdfunding .crowdfunding-info-placeholder__layout {
  display: grid;
  gap: 1.5rem 1.25rem;
  align-items: center;
}

@media (min-width: 52rem) {
  body.page-home #crowdfunding .crowdfunding-info-placeholder__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    text-align: start;
  }

  body.page-home #crowdfunding .crowdfunding-info-placeholder__copy .crowdfunding-info-placeholder__text {
    margin-inline: 0;
    max-width: none;
  }
}

body.page-home #crowdfunding .crowdfunding-info-placeholder__media {
  width: 100%;
  max-width: min(42rem, 100%);
  margin-inline: auto;
}

@media (min-width: 52rem) {
  body.page-home #crowdfunding .crowdfunding-info-placeholder__media {
    max-width: none;
    margin-inline: 0;
  }

  body.page-home #crowdfunding .crowdfunding-info-placeholder__media .crowdfunding-info-placeholder__video {
    margin-top: 0;
  }
}

body.page-home #crowdfunding .crowdfunding-info-placeholder__videos {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

@media (min-width: 36rem) {
  body.page-home #crowdfunding .crowdfunding-info-placeholder__videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

body.page-home #crowdfunding .cf-yt-i18n {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

body.page-home #crowdfunding .cf-yt-i18n__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding-inline: 0.1rem;
}

body.page-home #crowdfunding .cf-yt-i18n__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem 0.28rem;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #0d3320 22%, transparent);
  cursor: pointer;
  line-height: 0;
  opacity: 0.82;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.page-home #crowdfunding .cf-yt-i18n__flag:hover,
body.page-home #crowdfunding .cf-yt-i18n__flag:focus-visible {
  opacity: 1;
  border-color: color-mix(in srgb, #fff 52%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 24%, transparent);
}

body.page-home #crowdfunding .cf-yt-i18n__flag.is-active {
  opacity: 1;
  border-color: color-mix(in srgb, #fff 68%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 36%, transparent);
}

body.page-home #crowdfunding .cf-yt-i18n__flag:focus-visible {
  outline: none;
}

body.page-home #crowdfunding .cf-yt-i18n__flag-img {
  display: block;
  width: 1.5rem;
  height: 1rem;
  object-fit: cover;
  border-radius: 2px;
}

html[dir="rtl"] body.page-home #crowdfunding .cf-yt-i18n__flags {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #crowdfunding .cf-yt-i18n__flag {
    transition: none;
  }
}

body.page-home #crowdfunding .cf-ytlaunch--external {
  text-decoration: none;
  color: inherit;
}

body.page-home #crowdfunding .crowdfunding-info-placeholder__text {
  margin: 0 auto;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: balance;
  color: inherit;
}

body.page-home #crowdfunding .crowdfunding-info-placeholder__text--lead {
  margin-bottom: 1rem;
  font-size: 1.02rem;
  line-height: 1.68;
}

body.page-home #crowdfunding .crowdfunding-info-placeholder__video {
  margin-top: 1.5rem;
  margin-inline: auto;
  width: 100%;
  max-width: min(42rem, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}

body.page-home #crowdfunding .crowdfunding-videos-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
  width: 100%;
  align-items: stretch;
}

/* Deux vignettes : éviter width:100% sur chaque enfant en ligne (sinon empilement) ; poster ne doit pas imposer 1280px en flex */
body.page-home #crowdfunding .crowdfunding-videos-row > .crowdfunding-info-placeholder__video {
  margin-top: 0;
  min-width: 0;
}

@media (min-width: 40rem) {
  body.page-home #crowdfunding .crowdfunding-videos-row:not(.crowdfunding-videos-row--solo) {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem 1.25rem;
  }

  /*
   * Largeur explicite via flex-basis : avec width:auto + aspect-ratio, le bloc peut
   * s’effondrer à 0 (bouton en 100%×100% sans taille héritée).
   */
  body.page-home #crowdfunding .crowdfunding-videos-row:not(.crowdfunding-videos-row--solo) > .crowdfunding-info-placeholder__video {
    flex: 1 1 calc((100% - 1.25rem) / 2);
    min-width: 0;
    max-width: min(26rem, calc((100% - 1.25rem) / 2));
    width: 100%;
    margin-inline: 0;
  }
}

body.page-home #crowdfunding .crowdfunding-videos-row--solo {
  justify-content: center;
}

body.page-home #crowdfunding .crowdfunding-videos-row--solo > .crowdfunding-info-placeholder__video {
  flex: 0 1 auto;
  width: 100%;
  max-width: min(42rem, 100%);
}

/* Zone « lancement » : poster + flèche, ouverture modale (pas de <video> inline) */
body.page-home #crowdfunding .cf-ytlaunch {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  text-align: center;
  color: #fff;
  background: #06140c;
}

body.page-home #crowdfunding .cf-ytlaunch:focus-visible {
  outline: 3px solid color-mix(in srgb, #fff 72%, var(--accent) 28%);
  outline-offset: 3px;
}

body.page-home #crowdfunding .cf-ytlaunch__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

body.page-home #crowdfunding .cf-ytlaunch__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-home #crowdfunding .cf-ytlaunch__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    185deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.08) 42%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

body.page-home #crowdfunding .cf-ytlaunch__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #4a0a0a 0%,
    #ff3b30 42%,
    #7a1010 100%
  );
  box-shadow: 0 -1px 12px rgba(255, 59, 48, 0.35);
}

body.page-home #crowdfunding .cf-ytlaunch__halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(14rem, 46vw);
  height: min(14rem, 46vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 40% 35%,
    color-mix(in srgb, #fff 16%, transparent) 0%,
    transparent 62%
  );
  opacity: 0.55;
}

body.page-home #crowdfunding .cf-ytlaunch__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

body.page-home #crowdfunding .cf-ytlaunch__chevwrap {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-home #crowdfunding .cf-ytlaunch__chev {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.9rem 0 0.9rem 1.35rem;
  border-color: transparent transparent transparent #fff;
}

body.page-home #crowdfunding .cf-ytlaunch__chev--b {
  margin-inline-start: -0.55rem;
  opacity: 0.78;
  transform: scale(0.88);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-home #crowdfunding .cf-ytlaunch:hover .cf-ytlaunch__poster,
  body.page-home #crowdfunding .cf-ytlaunch:focus-visible .cf-ytlaunch__poster {
    opacity: 0.96;
    transform: scale(1.05);
  }

  body.page-home #crowdfunding .cf-ytlaunch:hover .cf-ytlaunch__chevwrap,
  body.page-home #crowdfunding .cf-ytlaunch:focus-visible .cf-ytlaunch__chevwrap {
    transform: translateX(0.45rem);
  }
}

html[dir="rtl"] body.page-home #crowdfunding .cf-ytlaunch__chevwrap {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body.page-home #crowdfunding .cf-ytlaunch:hover .cf-ytlaunch__chevwrap,
  html[dir="rtl"] body.page-home #crowdfunding .cf-ytlaunch:focus-visible .cf-ytlaunch__chevwrap {
    transform: scaleX(-1) translateX(0.45rem);
  }
}

/* Modale crowdfunding — rappel couleur section */
.youtube-call-local-modal--crowdfunding .youtube-call-local-modal__dialog {
  border-color: color-mix(in srgb, #4caf50 38%, var(--accent) 62%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1.25rem 3rem rgba(0, 0, 0, 0.48);
}

html[dir="rtl"] body.page-home #crowdfunding .crowdfunding-info-placeholder__text {
  text-align: start;
}

/* --- #mecene (conserve le dégradé patron + calque ::before enrichi) --- */
body.page-home #mecene.section--stripe-a {
  background:
    radial-gradient(68% 48% at 6% 10%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 50%),
    radial-gradient(55% 38% at 98% 90%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-b) 94%, var(--accent) 6%) 0%,
      var(--section-stripe-a) 42%,
      var(--section-stripe-a) 100%
    );
}

body.page-home #mecene.section--stripe-b {
  background:
    radial-gradient(68% 48% at 6% 10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(55% 38% at 98% 90%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-a) 94%, var(--accent) 6%) 0%,
      var(--section-stripe-b) 42%,
      var(--section-stripe-b) 100%
    );
}

body.page-home #mecene::before {
  background:
    radial-gradient(ellipse 60% 50% at 4% 40%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 55%),
    radial-gradient(ellipse 90% 70% at 12% 45%, rgba(255, 106, 0, 0.16), transparent 58%),
    radial-gradient(ellipse 55% 48% at 96% 22%, rgba(255, 143, 31, 0.1), transparent 55%);
}

html[data-theme="light"] body.page-home #mecene.section--stripe-a {
  background:
    radial-gradient(68% 44% at 8% 12%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 48%),
    radial-gradient(54% 36% at 96% 88%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-b) 97%, var(--accent) 3%) 0%,
      var(--section-stripe-a) 50%,
      var(--section-stripe-a) 100%
    );
}

html[data-theme="light"] body.page-home #mecene.section--stripe-b {
  background:
    radial-gradient(68% 44% at 8% 12%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 46%),
    radial-gradient(54% 36% at 96% 88%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--section-stripe-a) 97%, var(--accent) 3%) 0%,
      var(--section-stripe-b) 50%,
      var(--section-stripe-b) 100%
    );
}

body.page-home #mecene h2.font-h2 {
  position: relative;
  padding-bottom: 0.38rem;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 24%, transparent);
}

body.page-home #mecene h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 60%, transparent);
}

html[data-theme="light"] body.page-home #mecene h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.page-home #mecene .mecene-youtube-banner {
  transition:
    box-shadow 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 16%, transparent),
    0 8px 26px rgba(0, 0, 0, 0.12);
}

body.page-home #mecene .mecene-youtube-banner:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--accent-2) 42%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 14%, transparent),
    0 12px 34px rgba(0, 0, 0, 0.14),
    0 0 26px color-mix(in srgb, var(--accent-2-dim) 30%, transparent);
}

body.page-home #mecene .mecene-youtube-banner__eyebrow {
  font-family: var(--font-matrix-mono);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--accent) 68%, var(--accent-2) 32%);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 32%, transparent);
}

body.page-home #mecene .mecene-youtube-banner__thumb {
  transition:
    border-color 0.25s var(--ease-choreography),
    box-shadow 0.25s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 62%, var(--accent-2) 38%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 14%, transparent);
}

/* --- #communaute --- */
body.page-home #communaute.section--stripe-a {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--bg-muted) 50%, var(--section-stripe-b) 100%);
}

body.page-home #communaute.section--stripe-b {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 48%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--bg-muted) 50%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #communaute.section--stripe-a {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--bg-muted) 50%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #communaute.section--stripe-b {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--bg-muted) 50%, var(--section-stripe-a) 100%);
}

body.page-home #communaute .hashtag-xl {
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent-2-dim) 35%, transparent);
}

body.page-home #communaute h2.font-h2 {
  position: relative;
  padding-bottom: 0.38rem;
  font-size: clamp(1.88rem, 2.9vw + 0.88rem, 2.78rem);
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 26%, transparent);
}

body.page-home #communaute h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 65%, transparent);
}

html[data-theme="light"] body.page-home #communaute h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

/* Titres longs (sponsors / communication / communauté / CTA final) : resserrement smartphone portrait — après les règles section pour gagner la cascade (#communication / #communaute : 1.88rem en 12457+ / 13661+) */
@media (max-width: 599px) and (orientation: portrait) {
  body.page-home #sponsors-premiers .sponsors-solicit h2.font-h2,
  body.page-home #communication h2.font-h2,
  body.page-home #communaute h2.font-h2,
  body.page-home #cta-final #final-cta-heading.font-h2 {
    font-size: clamp(1.48rem, 2.65vw, 2.65rem);
    line-height: 1.12;
  }
}

body.page-home #communaute .video-card {
  transition:
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent-dim) 64%, var(--accent-2) 36%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 12%, transparent),
    0 6px 20px rgba(0, 0, 0, 0.1);
}

body.page-home #communaute .video-card:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--accent-2) 42%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2) 16%, transparent),
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 0 24px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
}

body.page-home #communaute .video-thumb {
  transition: box-shadow 0.28s var(--ease-choreography);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 10%, transparent);
}

body.page-home #communaute button.video-thumb.video-thumb--local {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 0;
}

body.page-home #communaute button.video-thumb.video-thumb--local::-moz-focus-inner {
  border: 0;
  padding: 0;
}

body.page-home #communaute .video-thumb__play {
  box-shadow:
    0 0 0 4px rgba(255, 106, 0, 0.14),
    0 0 18px color-mix(in srgb, var(--accent-2-dim) 40%, transparent);
}

body.page-home #communaute .youtube-community-banner,
body.page-home #communaute .community-funding-cta {
  transition:
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
}

body.page-home #communaute .youtube-community-banner__eyebrow,
body.page-home #communaute .community-funding-cta__eyebrow {
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
}

body.page-home #communaute .youtube-community-banner__cta:hover,
body.page-home #communaute .youtube-community-banner__cta:focus-visible,
body.page-home #communaute .community-funding-cta__button:hover,
body.page-home #communaute .community-funding-cta__button:focus-visible {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.12),
    0 0 22px var(--accent-2-dim);
}

/* --- #citation-fondateur : halos légers (fonds déjà riches) --- */
body.page-home #citation-fondateur.section--stripe-a {
  background:
    radial-gradient(ellipse 58% 44% at 10% 18%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%),
    radial-gradient(
      ellipse 120% 80% at 50% 100%,
      color-mix(in srgb, var(--accent) 14%, var(--section-stripe-a) 86%) 0%,
      var(--section-stripe-a) 62%
    ),
    linear-gradient(165deg, var(--bg-muted) 0%, var(--section-stripe-a) 45%, color-mix(in srgb, var(--section-stripe-b) 82%, #000 18%) 100%);
}

body.page-home #citation-fondateur.section--stripe-b {
  background:
    radial-gradient(ellipse 58% 44% at 10% 18%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 52%),
    radial-gradient(
      ellipse 120% 80% at 50% 100%,
      color-mix(in srgb, var(--accent) 14%, var(--section-stripe-b) 86%) 0%,
      var(--section-stripe-b) 62%
    ),
    linear-gradient(165deg, var(--bg-muted) 0%, var(--section-stripe-b) 45%, color-mix(in srgb, var(--section-stripe-a) 82%, #000 18%) 100%);
}

html[data-theme="light"] body.page-home #citation-fondateur.section--stripe-a {
  background:
    radial-gradient(ellipse 52% 40% at 12% 16%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 50%),
    radial-gradient(
      ellipse 110% 90% at 50% 108%,
      color-mix(in srgb, var(--accent) 10%, var(--bg-card) 90%) 0%,
      var(--section-stripe-a) 55%
    ),
    linear-gradient(165deg, var(--section-stripe-b) 0%, var(--bg-muted) 100%);
  border-block-start-color: color-mix(in srgb, var(--accent) 28%, #c9c2b8);
}

html[data-theme="light"] body.page-home #citation-fondateur.section--stripe-b {
  background:
    radial-gradient(ellipse 52% 40% at 12% 16%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(
      ellipse 110% 90% at 50% 108%,
      color-mix(in srgb, var(--accent) 10%, var(--bg-card) 90%) 0%,
      var(--section-stripe-b) 55%
    ),
    linear-gradient(165deg, var(--section-stripe-a) 0%, var(--bg-muted) 100%);
  border-block-start-color: color-mix(in srgb, var(--accent) 28%, #c9c2b8);
}

body.page-home #citation-fondateur .founder-trio__arrow {
  transition:
    background 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography),
    transform 0.28s var(--ease-choreography),
    border-color 0.28s var(--ease-choreography);
}

body.page-home #citation-fondateur .founder-trio__arrow:hover {
  box-shadow:
    0 6px 22px color-mix(in srgb, #000 28%, transparent),
    0 0 22px color-mix(in srgb, var(--accent-2-dim) 38%, transparent);
}

body.page-home #citation-fondateur .founder-trio__arrow:focus-visible {
  outline-color: color-mix(in srgb, var(--accent) 55%, var(--accent-2) 45%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2-dim) 45%, transparent);
}

/* --- #livre-or --- */
body.page-home #livre-or.section--stripe-a {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #livre-or.section--stripe-b {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 48%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #livre-or.section--stripe-a {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #livre-or.section--stripe-b {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #livre-or h2.font-h2 {
  position: relative;
  padding-bottom: 0.38rem;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 24%, transparent);
}

body.page-home #livre-or h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 55%, transparent);
}

html[data-theme="light"] body.page-home #livre-or h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.page-home #livre-or .guestbook-card {
  transition:
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--accent-2) 38%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 14%, transparent),
    0 12px 34px rgba(0, 0, 0, 0.2);
}

body.page-home #livre-or .guestbook-carousel__arrow:hover,
body.page-home #livre-or .guestbook-carousel__arrow:focus-visible {
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2-dim) 35%, transparent);
}

body.page-home #livre-or .guestbook-cta:hover,
body.page-home #livre-or .guestbook-cta:focus-visible {
  box-shadow: 0 0 22px var(--accent-2-dim);
}

/* --- #faq --- */
body.page-home #faq.section--stripe-a, body.page-faq #faq.section--stripe-a {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #faq.section--stripe-b, body.page-faq #faq.section--stripe-b {
  background:
    radial-gradient(70% 48% at 8% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 48%),
    radial-gradient(62% 40% at 96% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #faq.section--stripe-a, html[data-theme="light"] body.page-faq #faq.section--stripe-a {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #faq.section--stripe-b, html[data-theme="light"] body.page-faq #faq.section--stripe-b {
  background:
    radial-gradient(68% 44% at 10% 14%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(58% 36% at 94% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #faq .faq-head h2.font-h2,
body.page-faq #faq .faq-head h2.font-h2 {
  position: relative;
  padding-bottom: 0.38rem;
  font-size: clamp(1.88rem, 2.9vw + 0.88rem, 2.78rem);
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 26%, transparent);
}

body.page-home #faq .faq-head h2.font-h2::after,
body.page-faq #faq .faq-head h2.font-h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin-top: 0.55rem;
  margin-inline-start: 0;
  margin-inline-end: auto;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 65%, transparent);
}

html[data-theme="light"] body.page-home #faq .faq-head h2.font-h2,
html[data-theme="light"] body.page-faq #faq .faq-head h2.font-h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

body.page-home #faq .faq-item,
body.page-faq #faq .faq-item {
  transition:
    border-color 0.28s var(--ease-choreography),
    box-shadow 0.28s var(--ease-choreography);
  border-color: color-mix(
    in srgb,
    color-mix(in srgb, var(--accent) 72%, var(--accent-2) 28%) 26%,
    var(--bg-card) 74%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 10%, transparent);
}

body.page-home #faq .faq-item[open],
body.page-faq #faq .faq-item[open] {
  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        color-mix(in srgb, var(--accent) 58%, var(--accent-2) 42%) 22%,
        transparent
      )
      inset,
    0 12px 32px color-mix(in srgb, #000 18%, transparent),
    0 0 24px color-mix(in srgb, var(--accent-2-dim) 22%, transparent);
}

html[data-theme="light"] body.page-home #faq .faq-item[open],
html[data-theme="light"] body.page-faq #faq .faq-item[open] {
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.07),
    0 0 20px color-mix(in srgb, var(--accent-2-dim) 18%, transparent);
}

/* --- #cta-final (sans altérer .commercify-platform-panel__video-zone ailleurs) --- */
body.page-home #cta-final.section--stripe-a {
  background:
    radial-gradient(72% 50% at 12% 8%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 52%),
    radial-gradient(58% 44% at 88% 92%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

body.page-home #cta-final.section--stripe-b {
  background:
    radial-gradient(72% 50% at 12% 8%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 50%),
    radial-gradient(58% 44% at 88% 92%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 46%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

html[data-theme="light"] body.page-home #cta-final.section--stripe-a {
  background:
    radial-gradient(68% 46% at 14% 10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 48%),
    radial-gradient(56% 40% at 86% 90%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-b) 0%, var(--section-stripe-a) 100%);
}

html[data-theme="light"] body.page-home #cta-final.section--stripe-b {
  background:
    radial-gradient(68% 46% at 14% 10%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 46%),
    radial-gradient(56% 40% at 86% 90%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-stripe-a) 0%, var(--section-stripe-b) 100%);
}

body.page-home #cta-final .final-cta__title {
  position: relative;
  padding-bottom: 0.38rem;
  text-wrap: balance;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--accent-2-dim) 28%, transparent);
}

body.page-home #cta-final .final-cta__title::after {
  content: "";
  display: block;
  width: min(9.5rem, 52%);
  height: 3px;
  margin: 0.55rem auto 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, var(--accent-2) 65%) 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-2-dim) 55%, transparent);
}

html[data-theme="light"] body.page-home #cta-final .final-cta__title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

body.page-home #cta-final .btn--final-cta-primary:hover,
body.page-home #cta-final .btn--final-cta-primary:focus-visible {
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--accent) 32%, transparent),
    0 0 26px var(--accent-2-dim);
}

body.page-home #cta-final .btn--final-cta-secondary:hover,
body.page-home #cta-final .btn--final-cta-secondary:focus-visible {
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent-2-dim) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call-kicker {
    text-shadow: none;
  }

  body.page-home #youtubeurs-call .commercify-platform-panel__youtube-call-title::after,
  body.page-home #crowdfunding h2.font-h2::after,
  body.page-home #mecene h2.font-h2::after,
  body.page-home #communaute h2.font-h2::after,
  body.page-home #livre-or h2.font-h2::after,
  body.page-home #faq .faq-head h2.font-h2::after,
  body.page-faq #faq .faq-head h2.font-h2::after,
  body.page-home #cta-final .final-cta__title::after {
    box-shadow: none;
  }

  body.page-home #youtubeurs-call .youtube-call-card:hover,
  body.page-home #crowdfunding .crowdfunding-card:hover,
  body.page-home #communaute .video-card:hover {
    transform: none;
  }

  body.page-home #youtubeurs-call .youtube-call-card__thumb:hover img,
  body.page-home #youtubeurs-call .youtube-call-card__thumb:focus-visible img,
  body.page-home #communaute .video-thumb:hover img,
  body.page-home #communaute .video-thumb:focus-visible img {
    transform: none;
  }

  body.page-home #mecene .mecene-youtube-banner__eyebrow {
    text-shadow: none;
  }

  body.page-home #communaute .youtube-community-banner__eyebrow,
  body.page-home #communaute .community-funding-cta__eyebrow {
    text-shadow: none;
  }

  body.page-home #citation-fondateur .founder-trio__arrow:hover {
    transform: none;
  }
}

/* Séparateurs de section : liseré orange + reflets accent froid */
body.page-home .section-divider {
  height: 2px;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent-2) 30%, transparent) 16%,
    color-mix(in srgb, var(--accent) 38%, transparent) 32%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 38%, transparent) 68%,
    color-mix(in srgb, var(--accent-2) 30%, transparent) 84%,
    transparent 100%
  );
  box-shadow:
    0 0 14px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 22px var(--accent-2-dim);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home main.page-main::before {
    opacity: 0.02;
  }
}

body.page-home .btn {
  font-weight: 600;
  border-width: 1px;
}

body.page-home .btn--primary {
  background: var(--home-cta-idle-bg);
  color: var(--home-cta-idle-text);
  border-color: var(--home-cta-idle-border);
}

body.page-home .btn--ghost {
  background: var(--home-cta-idle-bg-ghost);
  color: var(--home-cta-idle-text);
  border-color: var(--home-cta-idle-border);
}

body.page-home .btn--primary:hover,
body.page-home .btn--primary:focus-visible,
body.page-home .btn--ghost:hover,
body.page-home .btn--ghost:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  border-color: var(--btn-bg-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Onglets ressources IT/AI : orange réservé à l’onglet actif */
body.page-home .ext-chip:not(.is-active) {
  background: transparent;
  color: var(--home-chip-idle-text);
  border-color: var(--home-cta-idle-border);
  box-shadow: none;
}

body.page-home .ext-chip:not(.is-active):hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card) 92%);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--bg-card) 65%);
  color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
  box-shadow: none;
}

body.page-home .ext-chip.is-active {
  border-color: var(--btn-bg-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  box-shadow: 0 4px 18px var(--btn-focus);
}

body.page-home .ext-chip.is-active:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  border-color: var(--btn-bg-hover);
  box-shadow: 0 4px 18px var(--btn-focus);
}

body.page-home .ext-resources-tiers button.ext-tier:disabled {
  background: transparent;
  color: var(--home-chip-idle-text);
  border-color: var(--home-cta-idle-border);
  box-shadow: none;
  opacity: 0.58;
}

body.page-home .ext-resources-tiers .ext-tier--active {
  border-color: var(--btn-bg-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  box-shadow: 0 4px 18px var(--btn-focus);
}

body.page-home .crowdfunding-donation__btn {
  background: var(--home-cta-idle-bg);
  color: var(--home-cta-idle-text);
  border-color: var(--home-cta-idle-border);
  font-weight: 600;
}

body.page-home .crowdfunding-donation__btn:hover,
body.page-home .crowdfunding-donation__btn:focus-visible {
  background: color-mix(in srgb, var(--crowdfunding-donate-green) 88%, #062a1c 12%);
  color: #f4fffa;
  border-color: color-mix(in srgb, var(--crowdfunding-donate-green) 72%, #c8ffe8 28%);
}

/* « Voir la page complète des ressources » : aspect lien textuel */
body.page-home .ext-resources-cta .btn {
  padding: 0.45rem 0.5rem;
  font-weight: 600;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: none;
  justify-content: flex-start;
}

body.page-home .ext-resources-cta .btn:hover,
body.page-home .ext-resources-cta .btn:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  border-color: var(--btn-bg-hover);
  border-bottom-color: var(--btn-bg-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* Bordures strictement carrées : aucun arrondi (écrase toutes les règles ci-dessus) */
html body *,
html body *::before,
html body *::after {
  border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* RTL — arabe (lang=ar / dir=rtl) : typographie + miroir de blocs clés         */
/* -------------------------------------------------------------------------- */
/* Hashtags latins : .dp-hashtag — LTR par défaut ; en RTL le dièse reste à droite (flex row-reverse). */
.dp-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.dp-hashtag {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .dp-hashtag {
  flex-direction: row-reverse;
}

html[lang="ar"] body,
html[lang="ar"] {
  font-family: "Noto Sans Arabic", var(--font-body);
}

html[lang="zh-Hans"] body {
  font-family: "Noto Sans SC", var(--font-body);
}

html[lang="ja"] body {
  font-family: "Noto Sans JP", var(--font-body);
}

html[lang="ko"] body {
  font-family: "Noto Sans KR", var(--font-body);
}

html[lang="hi"] body {
  font-family: "Noto Sans Devanagari", var(--font-body);
}

/* Grille header compacte + barre desktop : miroir RTL via direction sur .site-header__inner */
html[dir="rtl"] .site-header__inner {
  direction: rtl;
}

html[dir="rtl"] .nav-desktop {
  flex-direction: row-reverse;
}

html[dir="rtl"] .header-actions {
  flex-direction: row-reverse;
}

/*
 * Header compact (≤1399px, menu hamburger) : forcer le miroir LTR→RTL de façon fiable.
 * Seul `direction: rtl` sur .site-header__inner suffit en théorie, mais en pratique le logo
 * (flex: 1 + contenu dir=ltr) et les règles d’actions peuvent laisser un ordre visuel « LTR ».
 * Outer flex en LTR + order : actions à gauche, logo à droite ; .header-actions garde row-reverse
 * pour [hamburger][contact] depuis le bord extérieur (comme [contact][hamburger] côté droit en LTR).
 */
@media (max-width: 1399px) {
  html[dir="rtl"] .site-header__inner {
    direction: ltr;
  }

  html[dir="rtl"] .site-header .logo:not(.logo--drawer) {
    order: 2;
    justify-content: flex-end;
  }

  html[dir="rtl"] .site-header .header-actions {
    order: 1;
    flex-direction: row-reverse;
  }
}

html[dir="rtl"] .logo,
html[dir="rtl"] .logo__cluster {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

html[dir="rtl"] .footer-brand-title {
  text-align: start;
}

html[dir="rtl"] .footer-social-link {
  text-align: start;
}

/* Hashtags : alignement bord de début (à droite en RTL) */
html[dir="rtl"] .playground-butterfly-hashtag,
html[dir="rtl"] .projects-head__hashtags,
html[dir="rtl"] .projects-head__hashtag,
html[dir="rtl"] .home-hashtags-row,
html[dir="rtl"] .community-section__network-hashtags,
html[dir="rtl"] .ext-resources-hashtags,
html[dir="rtl"] .social-hub__hashtag,
html[dir="rtl"] .commercify-platform-panel__hashtag,
html[dir="rtl"] .sponsors-solicit__hashtag,
html[dir="rtl"] .crowdfunding-section__hashtag,
html[dir="rtl"] .commercify-platform-panel__youtube-call-kicker,
html[dir="rtl"] .youtube-call-card__hashtag,
html[dir="rtl"] .hashtag-xl,
html[dir="rtl"] .section--community .hashtag-xl {
  text-align: start;
}

html[dir="rtl"] .card__hashtag-link {
  text-align: start;
}

html[dir="rtl"] .footer-grid {
  direction: rtl;
}

/*
 * .footer-bottom : ne pas forcer row-reverse ici — avec html[dir="rtl"], flex-direction: row
 * place déjà le premier enfant (copyright) au bord inline-start et le second à inline-end.
 */

/*
 * Citations : .founder-trio est une grille 4 colonnes. Ne pas utiliser flex/order ici :
 * en RTL la grille hérite de dir=rtl et place automatiquement prev/next aux deux extrémités.
 */
html[dir="rtl"] .playground-layout {
  flex-direction: row-reverse;
}

html[dir="rtl"] .commercify-platform-panel__row,
html[dir="rtl"] .projects-head {
  direction: rtl;
}

html[dir="rtl"] .grid-projects,
html[dir="rtl"] .grid-videos,
html[dir="rtl"] .community-cta-grid {
  direction: rtl;
}

html[dir="rtl"] .nav-dropdown__panel {
  left: auto;
  right: 50%;
  transform: translateX(50%) translateY(0.5rem);
}

html[dir="rtl"] .nav-dropdown.is-open .nav-dropdown__panel {
  transform: translateX(50%) translateY(0.35rem);
}

html[dir="rtl"] .lang-dropdown__toggle-meta,
html[dir="rtl"] .lang-dropdown__opt-meta {
  align-items: flex-end;
  text-align: end;
}

/* Home (hors hero centré) : titres alignés au bord logique (droite en arabe) */
html[dir="rtl"] body.page-home .section:not(.section--hero) .container h2.font-h2,
html[dir="rtl"] body.page-home .section:not(.section--hero) .playground-section-head h2.font-h2 {
  text-align: start;
}

html[dir="rtl"] .commercify-platform-panel__youtube-call-kicker {
  text-align: start;
}

html[dir="rtl"] .commercify-platform-panel__youtube-call-head {
  text-align: start;
}

html[dir="rtl"] .commercify-platform-panel__youtube-call-text {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

html[dir="rtl"] .commercify-platform-panel__youtube-call-grid {
  direction: rtl;
}

html[dir="rtl"] .youtube-call-card__title {
  text-align: start;
  unicode-bidi: plaintext;
}

html[dir="rtl"] .youtube-call-card__hashtag {
  text-align: start;
}

/* Vignettes appel youtubeurs : centrage conservé en RTL */
html[dir="rtl"] #youtubeurs-call .youtube-call-card__title,
html[dir="rtl"] #youtubeurs-call .youtube-call-card__hashtag {
  text-align: center;
}

html[dir="rtl"] body.page-home .social-hub-youtube__title {
  text-align: start;
}

html[dir="rtl"] body.page-home .video-card__cap {
  text-align: start;
}

html[dir="rtl"] #communaute .video-card__cap {
  text-align: center;
}

html[dir="rtl"] #communaute .youtube-community-banner__eyebrow,
html[dir="rtl"] #communaute .youtube-community-banner__title,
html[dir="rtl"] #communaute .youtube-community-banner__desc {
  text-align: center;
}

html[dir="rtl"] .card__body--commercify .card__hashtags--commercify {
  justify-content: flex-start;
}

html[dir="rtl"] body.page-home .sponsors-solicit-grid__text {
  text-align: start;
}

html[dir="rtl"] #communaute .community-funding-cta__eyebrow,
html[dir="rtl"] #communaute .community-funding-cta__title,
html[dir="rtl"] #communaute .community-funding-cta__text {
  text-align: center;
}

html[dir="rtl"] body.page-home .video-meta .dp-hashtag {
  text-align: start;
}

@media (max-width: 1023px) {
  html[dir="rtl"] .nav-drawer {
    direction: rtl;
    text-align: right;
  }
}

/* =========================
   Home — FAQ (perf, <details>)
   Ton aligné sponsors / cartes : pas de dégradés « décoratifs », grille 2 col desktop.
   ========================= */
.section--faq {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3rem);
  background: var(--bg-elevated);
  border-block: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.section--faq.section--stripe-a {
  background: var(--section-stripe-a);
}

.section--faq.section--stripe-b {
  background: var(--section-stripe-b);
}

.section--faq .faq-head h2.font-h2,
.section--faq .faq-sub {
  text-align: start;
  margin-inline: 0;
}

/* Pleine largeur du .container : éviter la colonne « demi-écran » (ancien max-width 42rem sur le sous-titre). */
.section--faq .faq-head h2.font-h2,
.section--faq .faq-head h2.font-h2 > span {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.faq-head {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.faq-sub {
  max-width: none;
  width: 100%;
}

.faq-sub a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.faq-sub a:hover {
  opacity: 0.92;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  max-width: var(--layout-max);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }
}

.faq-item {
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bg-card) 78%);
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--bg-card) 62%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset,
    0 10px 28px color-mix(in srgb, #000 18%, transparent);
}

.faq-item__q {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: clamp(0.85rem, 2vw, 1.05rem) clamp(0.95rem, 2.2vw, 1.15rem);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  color: var(--text);
  font-family: var(--font-sub);
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq-item__qtext {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.38;
  text-wrap: balance;
}

/* Chevron discret (accent), même vocabulaire que le reste du site */
.faq-item__icon {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.35rem;
  border-radius: 0;
  background: transparent;
  border: none;
  border-inline-end: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--ui-duration) var(--ui-ease);
  opacity: 0.92;
}

.faq-item[open] .faq-item__icon {
  transform: rotate(-135deg);
  margin-top: 0.45rem;
}

.faq-item__a {
  padding: 0 clamp(0.95rem, 2.2vw, 1.15rem) clamp(0.85rem, 2vw, 1.05rem);
  border-block-start: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

.faq-item__a p {
  margin: 0;
  line-height: var(--body-line-height);
  font-size: calc(0.94rem * var(--copy-scale));
  white-space: pre-line;
}

html[data-theme="light"] .faq-item {
  background: color-mix(in srgb, var(--bg-card) 98%, var(--accent) 2%);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--bg-card) 82%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

html[data-theme="light"] .faq-item[open] {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--bg-card) 68%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .faq-item__a {
  border-block-start-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

html[dir="rtl"] .section--faq .faq-head h2.font-h2,
html[dir="rtl"] .section--faq .faq-sub {
  text-align: start;
}

html[dir="rtl"] .faq-item__icon {
  transform: rotate(-45deg);
}

html[dir="rtl"] .faq-item[open] .faq-item__icon {
  transform: rotate(135deg);
}

/* =========================
   Home — Final CTA
   ========================= */
.section--final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-block: 1px solid var(--final-cta-border);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%),
    color-mix(in srgb, var(--bg) 94%, var(--accent) 6%)
  );
}

body.page-home .section--final-cta {
  border-block-color: color-mix(in srgb, var(--final-cta-border) 82%, var(--accent-2) 18%);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-card) 86%, var(--accent) 11%),
    color-mix(in srgb, var(--bg-card) 92%, var(--accent-2) 5%),
    color-mix(in srgb, var(--bg) 94%, var(--accent) 6%)
  );
}

.final-cta__glow {
  pointer-events: none;
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(ellipse at 50% 28%, var(--final-cta-glow), transparent 58%);
  opacity: 0.88;
}

body.page-home .final-cta__glow {
  background:
    radial-gradient(ellipse at 58% 20%, var(--accent-2-dim), transparent 42%),
    radial-gradient(ellipse at 50% 28%, var(--final-cta-glow), transparent 58%);
}

.final-cta__inner {
  position: relative;
  z-index: 1;
}

.final-cta__title {
  font-family: var(--font-h);
}

.final-cta__body {
  max-width: 38rem;
}

body.page-home #cta-final .final-cta__body--rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.15rem);
}

body.page-home #cta-final .final-cta__body--rich .final-cta__body-lead {
  display: block;
  max-width: 42rem;
  font-weight: 650;
  font-size: clamp(1.12rem, 2.4vw, 1.42rem);
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--text) 92%, var(--accent) 8%);
  text-wrap: balance;
}

body.page-home #cta-final .final-cta__body--rich .final-cta__body-lead::after {
  content: "";
  display: block;
  width: min(12rem, 55%);
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--accent-2) 75%, transparent),
    transparent
  );
  opacity: 0.9;
}

body.page-home #cta-final .final-cta__body-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-home #cta-final .final-cta__tag,
body.page-home #cta-final a.final-cta__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  padding: 0.35em 0.85em 0.4em;
  border-radius: 999px;
  font-family: var(--font-sub), ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.84rem, 1.9vw, 0.96rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--text);
  background: var(--bg-muted);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease);
  text-decoration: none;
}

body.page-home #cta-final a.final-cta__tag:visited {
  color: var(--text);
}

body.page-home #cta-final .final-cta__tag__hash {
  color: var(--accent-strong);
  font-weight: 700;
  font-family: var(--font-body);
}

body.page-home #cta-final .final-cta__tag__term {
  color: var(--text);
  font-weight: 600;
}

@media (hover: hover) {
  body.page-home #cta-final .final-cta__tag:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
    box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 18px color-mix(in srgb, var(--accent-dim) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #cta-final .final-cta__tag {
    transition: none;
  }

  body.page-home #cta-final .final-cta__tag:hover {
    transform: none;
  }
}

/* Final CTA — encart YouTube « prélude » (lien vignette, pas d’iframe au chargement) */
body.page-home #cta-final .final-cta__prelude-wrap {
  max-width: 40rem;
  margin-inline: auto;
  margin-block-end: clamp(1.5rem, 4vw, 2.25rem);
}

body.page-home #cta-final button.final-cta__prelude__media {
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  display: block;
}

body.page-home #cta-final button.final-cta__prelude__media::-moz-focus-inner {
  border: 0;
  padding: 0;
}

body.page-home #cta-final .final-cta__prelude {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: clamp(0.85rem, 2.2vw, 1.15rem);
  border-radius: clamp(1rem, 2.4vw, 1.35rem);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-card) 92%, var(--accent) 5%),
    color-mix(in srgb, var(--bg) 94%, var(--accent-2) 6%)
  );
  border: 1px solid color-mix(in srgb, var(--final-cta-border) 70%, var(--line-strong) 30%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-2-dim) 12%, transparent),
    0 14px 40px color-mix(in srgb, var(--accent) 14%, transparent);
  transition:
    border-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease);
}

body.page-home #cta-final .final-cta__prelude:hover,
body.page-home #cta-final .final-cta__prelude:focus-within {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line-strong));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 18px 48px color-mix(in srgb, var(--accent) 22%, transparent);
}

body.page-home #cta-final .final-cta__prelude__media:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  body.page-home #cta-final .final-cta__prelude:has(.final-cta__prelude__media:hover) {
    transform: translateY(-2px);
  }
}

body.page-home #cta-final .final-cta__prelude__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.65rem;
  margin-block-end: clamp(0.85rem, 2vw, 1.1rem);
  background: color-mix(in srgb, var(--bg) 88%, var(--text) 12%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}

body.page-home #cta-final .final-cta__prelude__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity var(--ui-duration) var(--ui-ease), transform 0.45s var(--ease-choreography);
}

body.page-home #cta-final .final-cta__prelude:has(.final-cta__prelude__media:hover) .final-cta__prelude__thumb,
body.page-home #cta-final .final-cta__prelude:has(.final-cta__prelude__media:focus-visible) .final-cta__prelude__thumb {
  opacity: 1;
  transform: scale(1.03);
}

body.page-home #cta-final .final-cta__prelude__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(3.25rem, 8vw, 4.25rem);
  height: clamp(3.25rem, 8vw, 4.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ff0000 92%, #000 8%),
    color-mix(in srgb, #cc0000 88%, #000 12%)
  );
  box-shadow:
    0 0 0 4px color-mix(in srgb, #fff 22%, transparent),
    0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
}

body.page-home #cta-final .final-cta__prelude__play::after {
  content: "";
  margin-inline-start: 0.18em;
  border-style: solid;
  border-width: 0.55em 0 0.55em 0.9em;
  border-color: transparent transparent transparent #fff;
}

body.page-home #cta-final .final-cta__prelude__badge {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  padding: 0.2rem 0.45rem 0.28rem;
  border-radius: 0.35rem;
  font-family: var(--font-sub), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, #ff0000 92%, #000 8%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

body.page-home #cta-final .final-cta__prelude__cta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-block-start: 0.4rem;
  padding: 0.35em 0.65em;
  border-radius: 999px;
  font-family: var(--font-sub), ui-sans-serif, system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(0.92rem, 1.9vw, 1.02rem);
  color: var(--accent-strong);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    color var(--ui-duration) var(--ui-ease),
    background-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    text-decoration-color var(--ui-duration) var(--ui-ease);
}

body.page-home #cta-final .final-cta__prelude__cta-label::after {
  content: "↗";
  font-weight: 700;
  font-size: 0.92em;
  opacity: 0.75;
  transition: transform var(--ui-duration) var(--ui-ease), opacity var(--ui-duration) var(--ui-ease);
}

html[dir="rtl"] body.page-home #cta-final .final-cta__prelude__cta-label::after {
  content: "↖";
}

@media (hover: hover) {
  body.page-home #cta-final .final-cta__prelude__cta-label:hover {
    color: color-mix(in srgb, #cc0000 92%, var(--text) 8%);
    background: color-mix(in srgb, #ff0000 16%, var(--bg-card) 84%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, #ff0000 42%, transparent),
      0 6px 20px color-mix(in srgb, #ff0000 22%, transparent);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 0.09em;
    text-decoration-color: color-mix(in srgb, #ff0000 55%, transparent);
  }

  body.page-home #cta-final .final-cta__prelude__cta-label:hover::after {
    transform: translate(2px, -2px);
    opacity: 1;
  }

  html[dir="rtl"] body.page-home #cta-final .final-cta__prelude__cta-label:hover::after {
    transform: translate(-2px, -2px);
  }
}

body.page-home #cta-final .final-cta__prelude__cta-label:focus-visible {
  outline: 2px solid color-mix(in srgb, #ff0000 75%, var(--accent) 25%);
  outline-offset: 3px;
  color: color-mix(in srgb, #cc0000 92%, var(--text) 8%);
  background: color-mix(in srgb, #ff0000 14%, var(--bg-card) 86%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ff0000 38%, transparent),
    0 4px 16px color-mix(in srgb, #ff0000 18%, transparent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.09em;
  text-decoration-color: color-mix(in srgb, #ff0000 50%, transparent);
}

/* Prélude CTA — deux vignettes bonus (même carte, entre la grande vignette et le lien chaîne) */
body.page-home #cta-final .final-cta__prelude-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.65rem, 2vw, 1rem);
  margin-block-start: clamp(0.55rem, 1.6vw, 0.85rem);
  width: 100%;
}

@media (max-width: 36rem) {
  body.page-home #cta-final .final-cta__prelude-extras {
    grid-template-columns: 1fr;
  }
}

body.page-home #cta-final button.final-cta__prelude-extra {
  appearance: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--final-cta-border) 55%, var(--line-strong) 45%);
  border-radius: 0.55rem;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg) 90%, var(--text) 10%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
  transition:
    border-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease);
}

body.page-home #cta-final button.final-cta__prelude-extra::-moz-focus-inner {
  border: 0;
  padding: 0;
}

@media (hover: hover) {
  body.page-home #cta-final .final-cta__prelude-extra:hover {
    border-color: color-mix(in srgb, #ff0000 58%, var(--accent) 42%);
    box-shadow:
      0 0 0 2px color-mix(in srgb, #ff0000 32%, transparent),
      0 10px 28px color-mix(in srgb, #ff0000 20%, transparent);
    transform: translateY(-2px);
  }
}

body.page-home #cta-final .final-cta__prelude-extra:focus-visible {
  outline: 2px solid color-mix(in srgb, #ff0000 72%, var(--accent) 28%);
  outline-offset: 3px;
}

body.page-home #cta-final .final-cta__prelude-extra__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity var(--ui-duration) var(--ui-ease), transform 0.45s var(--ease-choreography);
}

@media (hover: hover) {
  body.page-home #cta-final .final-cta__prelude-extra:hover .final-cta__prelude-extra__thumb {
    opacity: 1;
    transform: scale(1.05);
  }
}

body.page-home #cta-final .final-cta__prelude-extra__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(2.2rem, 5.5vw, 2.85rem);
  height: clamp(2.2rem, 5.5vw, 2.85rem);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ff0000 92%, #000 8%),
    color-mix(in srgb, #cc0000 88%, #000 12%)
  );
  box-shadow:
    0 0 0 3px color-mix(in srgb, #fff 20%, transparent),
    0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);
  pointer-events: none;
}

body.page-home #cta-final .final-cta__prelude-extra__play::after {
  content: "";
  margin-inline-start: 0.14em;
  border-style: solid;
  border-width: 0.42em 0 0.42em 0.72em;
  border-color: transparent transparent transparent #fff;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #cta-final .final-cta__prelude,
  body.page-home #cta-final .final-cta__prelude__thumb,
  body.page-home #cta-final .final-cta__prelude:has(.final-cta__prelude__media:hover),
  body.page-home #cta-final .final-cta__prelude__cta-label,
  body.page-home #cta-final .final-cta__prelude__cta-label::after,
  body.page-home #cta-final .final-cta__prelude-extra,
  body.page-home #cta-final .final-cta__prelude-extra__thumb {
    transition: none;
    transform: none;
  }

  body.page-home #cta-final .final-cta__prelude:has(.final-cta__prelude__media:hover) .final-cta__prelude__thumb {
    transform: none;
  }

  body.page-home #cta-final .final-cta__prelude-extra:hover .final-cta__prelude-extra__thumb {
    transform: none;
  }
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
}

.btn--final-cta-primary {
  padding: 0.85rem 1.75rem;
  font-size: 1.05rem;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn--final-cta-primary:hover {
  transform: translateY(-1px);
}

html[dir="rtl"] .final-cta__actions {
  flex-direction: row-reverse;
}

@media (max-width: 480px) {
  .final-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .final-cta__actions .btn {
    width: 100%;
    max-width: 22rem;
  }
}

/* =========================
   Home — Guestbook
   ========================= */
.section--guestbook {
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.guestbook-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.guestbook-carousel__viewport {
  min-height: 16rem;
}

.guestbook-section__intro {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  line-height: 1.6;
}

.guestbook-card {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%), color-mix(in srgb, var(--bg-elevated) 90%, var(--accent-2) 10%));
  padding: clamp(1rem, 2vw, 1.4rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.guestbook-card__top {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.guestbook-card__avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent) 10%);
}

.guestbook-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guestbook-card__avatar-initial {
  font-family: var(--font-h);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
}

.guestbook-card__top-meta {
  min-width: 0;
  flex: 1;
}

.guestbook-card__top-meta .guestbook-card__author {
  margin-top: 0.15rem;
}

.guestbook-card__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.guestbook-card__lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent) 8%);
  min-width: 4.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.guestbook-card__project {
  color: var(--accent-2);
  font-weight: 600;
}

.guestbook-card__text {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
}

.guestbook-card__author {
  color: var(--text-muted);
  font-weight: 600;
}

.guestbook-carousel__arrow {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 93%, var(--accent) 7%);
  color: var(--text);
}

.guestbook-carousel__arrow:hover,
.guestbook-carousel__arrow:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 66%, transparent);
}

.guestbook-cta-row {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1024px) {
  .guestbook-cta-row .guestbook-cta {
    inline-size: min(100%, 16rem);
    min-block-size: 3.4rem;
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
    padding-inline: 1rem;
  }
}

.guestbook-modal[hidden] {
  display: none;
}

.guestbook-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.guestbook-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.guestbook-modal__dialog {
  position: relative;
  max-width: 38rem;
  margin: min(7vh, 3rem) auto 0;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg) 4%);
  padding: 1rem;
}

.guestbook-modal__close {
  position: absolute;
  inset-inline-end: 0.7rem;
  inset-block-start: 0.65rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.6rem;
}

.guestbook-form {
  display: grid;
  gap: 0.55rem;
}

.guestbook-form__input,
.guestbook-form__textarea {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  color: var(--text);
  padding: 0.65rem 0.75rem;
}

.guestbook-form__feedback.is-error {
  color: #ff9c9c;
}

.guestbook-form__feedback.is-success {
  color: #99e0a8;
}

@media (max-width: 840px) {
  .guestbook-carousel {
    grid-template-columns: 1fr;
  }

  .guestbook-carousel__arrow {
    justify-self: center;
  }

  .guestbook-modal__dialog {
    margin: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guestbook-card,
  .guestbook-carousel__arrow {
    transition: none !important;
  }

  .btn--final-cta-primary:hover {
    transform: none;
  }
}

/* --- Page projet Commercify (/prj/commercify/) — gabarit type archive proto5 --- */
body.page-commercify .page-commercify__hero-main.page-hero.section--hero {
  min-height: 85vh;
  padding-top: 2rem;
}

body.page-commercify .page-commercify__hero-inner {
  position: relative;
  z-index: 1;
}

/* Funnel narratif : ancres sous header + barre sticky */
body.page-commercify #commercify-probleme,
body.page-commercify #commercify-solution,
body.page-commercify #commercify-vision,
body.page-commercify #commercify-plateforme-page,
body.page-commercify #commercify-fonctionnalites,
body.page-commercify #commercify-temoignages,
body.page-commercify #hyperprofil-marche,
body.page-commercify #commercify-roadmap,
body.page-commercify #commercify-badges,
body.page-commercify #commercify-faq,
body.page-commercify #commercify-cta-final,
body.page-commercify #commercify-partenaires {
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.75rem);
}

/* Ancre legacy (#commercify-vision) : même offset que la section solution */
body.page-commercify .page-commercify__legacy-anchor {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fil d’Ariane (Commercify) */
body.page-commercify .page-commercify__breadcrumb {
  padding: 0.55rem 0 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--accent) 4%);
}

body.page-commercify .page-commercify__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0 1rem;
  max-width: var(--layout-max);
  font-size: calc(0.8rem * var(--copy-scale));
  line-height: 1.35;
}

body.page-commercify .page-commercify__breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

body.page-commercify .page-commercify__breadcrumb-list li:not(:last-child)::after {
  content: "/";
  margin: 0 0.5rem;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 400;
  pointer-events: none;
}

body.page-commercify .page-commercify__breadcrumb-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

body.page-commercify .page-commercify__breadcrumb-list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

body.page-commercify .page-commercify__breadcrumb-list [aria-current="page"] {
  color: var(--text-secondary, var(--text));
  font-weight: 600;
}

html[data-theme="light"] body.page-commercify .page-commercify__breadcrumb {
  background: color-mix(in srgb, var(--bg) 98%, var(--accent) 2%);
}

/* Fil d’Ariane « barre » partagée — toute page qui inclut le fragment `page-genericvoice__breadcrumb*` */
.page-genericvoice__breadcrumb {
  padding: 0.55rem 0 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--accent) 4%);
}

.page-genericvoice__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0 1rem;
  max-width: var(--layout-max);
  font-size: calc(0.8rem * var(--copy-scale));
  line-height: 1.35;
}

.page-genericvoice__breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

.page-genericvoice__breadcrumb-list li:not(:last-child)::after {
  content: "/";
  margin: 0 0.5rem;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 400;
  pointer-events: none;
}

.page-genericvoice__breadcrumb-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.page-genericvoice__breadcrumb-list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-genericvoice__breadcrumb-list [aria-current="page"] {
  color: var(--text-secondary, var(--text));
  font-weight: 600;
}

html[data-theme="light"] .page-genericvoice__breadcrumb {
  background: color-mix(in srgb, var(--bg) 98%, var(--accent) 2%);
}

body.page-genericvoice .page-genericvoice__hero,
body.page-cgu .page-genericvoice__hero,
body.page-privacy .page-genericvoice__hero,
body.page-support .page-genericvoice__hero,
body.page-rs-discord .page-genericvoice__hero,
body.page-rs-github .page-genericvoice__hero {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

body.page-genericvoice .page-genericvoice__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

body.page-genericvoice .page-genericvoice__split {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
  body.page-genericvoice .page-genericvoice__split {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

body.page-genericvoice .page-genericvoice__engines {
  list-style: disc;
  padding-left: 1.25rem;
  text-align: start;
}

body.page-genericvoice .page-genericvoice__cta-actions,
body.page-cgu .page-genericvoice__cta-actions,
body.page-privacy .page-genericvoice__cta-actions,
body.page-support .page-genericvoice__cta-actions,
body.page-faq .page-genericvoice__cta-actions,
body.page-rs-discord .page-genericvoice__cta-actions,
body.page-rs-github .page-genericvoice__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

/* Perf : pages prose — sections hors viewport sans coût de layout complet (ancres OK au scroll). */
body.page-privacy .page-privacy > .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

body.page-support .page-support__link-grid {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  body.page-support .page-support__link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.page-support .page-support__link-card {
  margin: 0;
}

body.page-support .page-support__link-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-support .page-support__link-card-inner:hover,
body.page-support .page-support__link-card-inner:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);
}

body.page-support .page-support__link-card-title {
  font-family: var(--font-matrix-display, inherit);
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.page-support .page-support__link-card-p {
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Plan du site — mode « atlas » (visuel, peu de texte). */
body.page-sitemap .page-sitemap > .section {
  content-visibility: visible;
  contain: layout style;
}

.page-sitemap__atlas {
  padding-top: 0.5rem;
  padding-bottom: 2.5rem;
}

.page-sitemap__band {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.page-sitemap__band.is-in {
  opacity: 1;
  transform: translateY(0);
}

.page-sitemap__sec-title {
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.page-sitemap__sec-lead {
  max-width: 40rem;
  margin-bottom: 1.25rem;
  font-size: calc(0.92rem * var(--copy-scale, 1));
  line-height: 1.45;
}

.page-sitemap__flagship {
  display: grid;
  gap: 1rem 1.25rem;
  align-items: stretch;
}

@media (min-width: 880px) {
  .page-sitemap__flagship {
    grid-template-columns: 1.15fr 1fr;
  }
}

.page-sitemap__flagship-hero .page-sitemap__card {
  display: block;
  position: relative;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, #000 18%, transparent);
}

.page-sitemap__card--hero {
  text-decoration: none;
  color: inherit;
}

.page-sitemap__card-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.page-sitemap__card-cap,
.page-sitemap__tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem 0.85rem;
  font-weight: 700;
  font-size: calc(0.88rem * var(--copy-scale, 1));
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, #000), transparent);
}

.page-sitemap__card--locked,
.page-sitemap__tile--locked {
  position: relative;
  opacity: 0.42;
  filter: grayscale(0.35);
  pointer-events: none;
}

.page-sitemap__card-lock::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.page-sitemap__flagship-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.65rem;
}

.page-sitemap__mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.35rem;
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  color: var(--text);
  font-size: calc(0.72rem * var(--copy-scale, 1));
  font-weight: 650;
  text-align: center;
  line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 94%, var(--accent));
  transition: border-color var(--ui-duration, 0.2s) ease, transform var(--ui-duration, 0.2s) ease;
}

.page-sitemap__mini:hover,
.page-sitemap__mini:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  outline: none;
}

.page-sitemap__mini img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 10px;
}

.page-sitemap__mini--icon .page-sitemap__mini-svg {
  object-fit: contain;
  padding: 0.35rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-radius: 12px;
}

.page-sitemap__mini--locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.4);
}

.page-sitemap__mosaic {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

.page-sitemap__mosaic--active {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}

.page-sitemap__mosaic--catalog {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.page-sitemap__mosaic--pages {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.page-sitemap__mosaic--triple {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

@media (min-width: 900px) {
  .page-sitemap__mosaic--triple {
    grid-template-columns: repeat(3, 1fr);
  }
}

.page-sitemap__social-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.65rem;
}

.page-sitemap__social-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 6.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-md, 14px);
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  font-size: calc(0.78rem * var(--copy-scale, 1));
  text-align: center;
  line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--text));
  transition: transform var(--ui-duration, 0.2s) ease, box-shadow var(--ui-duration, 0.2s) ease,
    border-color var(--ui-duration, 0.2s) ease;
}

.page-sitemap__social-tile:hover,
.page-sitemap__social-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, #000 12%, transparent);
  outline: none;
}

.page-sitemap__social-tile--yt {
  border-color: color-mix(in srgb, #c00 35%, transparent);
  color: color-mix(in srgb, #e53935 85%, var(--text));
}

.page-sitemap__social-tile--discord {
  border-color: color-mix(in srgb, #5865f2 40%, transparent);
  color: color-mix(in srgb, #7289da 90%, var(--text));
}

.page-sitemap__social-tile--github {
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
}

.page-sitemap__social-tile--reddit {
  border-color: color-mix(in srgb, #ff4500 40%, transparent);
  color: color-mix(in srgb, #ff6a33 88%, var(--text));
}

.page-sitemap__social-tile--x {
  border-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.page-sitemap__social-ico-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 88%, var(--accent));
}

.page-sitemap__social-ico {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
}

.page-sitemap__social-tile--locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.35);
}

.page-sitemap__tile {
  position: relative;
  display: block;
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  min-height: 7.5rem;
  transition: transform var(--ui-duration, 0.2s) ease, box-shadow var(--ui-duration, 0.2s) ease;
}

.page-sitemap__tile:hover,
.page-sitemap__tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px color-mix(in srgb, #000 14%, transparent);
  outline: none;
}

.page-sitemap__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 8.5rem;
  display: block;
}

.page-sitemap__tile--catalog img {
  min-height: 7rem;
  opacity: 0.88;
}

.page-sitemap__tile--page img {
  min-height: 7.25rem;
}

.page-sitemap__tile--pageicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.6rem;
  padding-bottom: 2.35rem;
  min-height: 7.25rem;
  color: color-mix(in srgb, var(--accent) 56%, var(--text));
  background: radial-gradient(120% 88% at 50% 22%, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg));
}

.page-sitemap__tile--pageicon .page-sitemap__tile-img.page-sitemap__tile-img--svg {
  width: 2.35rem;
  height: 2.35rem;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
}

.page-sitemap__hub-cta {
  align-self: flex-start;
}

.page-sitemap__machine-index {
  padding: 1rem 1.1rem 1.15rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 98%, var(--text));
}

.page-sitemap__machine-group + .page-sitemap__machine-group {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.page-sitemap__machine-group-title {
  margin: 0 0 0.45rem;
  font-size: calc(0.82rem * var(--copy-scale, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.page-sitemap__machine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.22rem;
}

@media (min-width: 640px) {
  .page-sitemap__machine-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem 1.25rem;
  }
}

@media (min-width: 960px) {
  .page-sitemap__machine-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-sitemap__machine-li {
  margin: 0;
  min-width: 0;
}

.page-sitemap__machine-a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.28rem 0.45rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: calc(0.78rem * var(--copy-scale, 1));
  line-height: 1.35;
  border: 1px solid transparent;
  transition: background var(--ui-duration, 0.2s) ease, border-color var(--ui-duration, 0.2s) ease;
}

.page-sitemap__machine-a:hover,
.page-sitemap__machine-a:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  outline: none;
}

.page-sitemap__machine-a--maint {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
}

.page-sitemap__machine-lbl {
  font-weight: 650;
}

.page-sitemap__machine-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.92em;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  word-break: break-all;
}

.page-sitemap__machine-tag {
  font-size: 0.85em;
  font-weight: 700;
  color: color-mix(in srgb, #c45 78%, var(--text));
  text-transform: lowercase;
}

.page-sitemap__robots {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md, 12px);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--bg) 97%, var(--accent));
}

.page-sitemap__robots-txt {
  max-width: 48rem;
  font-size: calc(0.85rem * var(--copy-scale, 1));
  line-height: 1.5;
}

.page-sitemap__lang-kicker {
  font-size: calc(0.8rem * var(--copy-scale, 1));
  font-weight: 600;
}

.page-sitemap__social-lang-kicker {
  font-size: calc(0.8rem * var(--copy-scale, 1));
  font-weight: 600;
}

.page-sitemap__lang-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.45rem;
}

.page-sitemap__lang-li {
  margin: 0;
}

.page-sitemap__lang-links--social {
  gap: 0.32rem 0.38rem;
}

.page-sitemap__lang-links--social .page-sitemap__lang-a {
  padding: 0.22rem 0.48rem 0.22rem 0.5rem;
  font-size: calc(0.72rem * var(--copy-scale, 1));
}

.page-sitemap__lang-flag {
  width: 1.28rem;
  height: 0.85rem;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent);
}

.page-sitemap__lang-a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem 0.28rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: calc(0.78rem * var(--copy-scale, 1));
  font-weight: 650;
  line-height: 1.25;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, var(--accent));
  transition: border-color var(--ui-duration, 0.2s) ease, background var(--ui-duration, 0.2s) ease;
}

.page-sitemap__lang-a:hover,
.page-sitemap__lang-a:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  outline: none;
}

.page-sitemap__lang-code {
  font-size: calc(0.62rem * var(--copy-scale, 1));
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.72;
  padding: 0.08rem 0.28rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.page-sitemap__cta-final {
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 55%
  );
}

.page-sitemap__cta-visual {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.page-sitemap__cta-visual img {
  max-width: min(22rem, 88vw);
  height: auto;
}

.page-sitemap__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.page-sitemap__cta-note {
  max-width: 28rem;
  font-size: calc(0.82rem * var(--copy-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
  .page-sitemap__band {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-sitemap__tile:hover,
  .page-sitemap__tile:focus-visible {
    transform: none;
  }
}

body.page-commercify .page-commercify__pain-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

body.page-commercify .page-commercify__pain-list li {
  position: relative;
  padding-inline-start: 1.35rem;
  margin-bottom: 0.75rem;
}

body.page-commercify .page-commercify__pain-list li:last-child {
  margin-bottom: 0;
}

body.page-commercify .page-commercify__pain-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 70%, var(--text));
  opacity: 0.85;
}

body.page-commercify .page-commercify__narrative-hook {
  font-size: calc(0.95rem * var(--copy-scale));
  font-weight: 600;
}

body.page-commercify .page-commercify__narrative-hook .link-inline {
  color: var(--accent);
}

body.page-commercify .page-commercify__h1-tagline {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-sub);
  font-size: clamp(0.88rem, 2.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary, var(--text));
  max-width: 28rem;
  margin-inline: auto;
  line-height: 1.35;
}

body.page-commercify .page-commercify__toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  font-size: calc(0.88rem * var(--copy-scale));
  line-height: 1.45;
}

body.page-commercify .page-commercify__toc-label {
  font-weight: 600;
  color: var(--text);
  flex: 0 0 auto;
}

body.page-commercify .page-commercify__toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}

body.page-commercify .page-commercify__toc-list li {
  margin: 0;
}

body.page-commercify .page-commercify__toc-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

body.page-commercify .page-commercify__toc-list a:hover {
  opacity: 0.9;
}

body.page-commercify .page-commercify__hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body.page-commercify .page-commercify__hero-status {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

body.page-commercify .page-commercify__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

body.page-commercify .page-commercify__feat-list {
  padding-left: 1.2rem;
  line-height: 1.9;
  margin: 0;
}

body.page-commercify .page-commercify__hyperprofil-lead {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.45;
  font-family: var(--font-h);
  font-weight: 600;
}

body.page-commercify .page-commercify__compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

body.page-commercify .page-commercify__compare-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: calc(0.88rem * var(--copy-scale));
  line-height: 1.45;
  background: var(--bg-card);
}

body.page-commercify .page-commercify__compare-table th,
body.page-commercify .page-commercify__compare-table td {
  padding: 0.75rem 0.85rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

body.page-commercify .page-commercify__compare-table thead th {
  font-family: var(--font-h);
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%);
}

body.page-commercify .page-commercify__compare-table tbody th[scope="row"] {
  font-weight: 600;
  width: 8.5rem;
  min-width: 7rem;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 94%, var(--text) 6%);
}

@media (min-width: 900px) {
  body.page-commercify .page-commercify__compare-table tbody th[scope="row"] {
    width: 11rem;
  }
}

body.page-commercify .page-commercify__tri-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  body.page-commercify .page-commercify__tri-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-commercify .page-commercify__info-card {
  height: 100%;
}

body.page-commercify .page-commercify__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.page-commercify .page-commercify__checklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  line-height: 1.55;
}

body.page-commercify .page-commercify__checklist li:last-child {
  margin-bottom: 0;
}

body.page-commercify .page-commercify__checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

body.page-commercify .page-commercify__ol-steps {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.75;
}

body.page-commercify .page-commercify__ol-steps li {
  margin-bottom: 0.65rem;
}

body.page-commercify .page-commercify__ol-steps li:last-child {
  margin-bottom: 0;
}

body.page-commercify .page-commercify__split-note {
  max-width: 42rem;
}

body.page-commercify .page-commercify__metrics-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  body.page-commercify .page-commercify__metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-commercify .page-commercify__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%);
}

body.page-commercify .page-commercify__metric-value {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

body.page-commercify .page-commercify__metric-label {
  font-size: calc(0.82rem * var(--copy-scale));
  color: var(--text-secondary, var(--text));
  opacity: 0.92;
  line-height: 1.35;
}

body.page-commercify .page-commercify__dual-cards {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
  margin-inline: auto;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  body.page-commercify .page-commercify__dual-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.page-commercify .page-commercify__cta-row--center {
  justify-content: center;
}

body.page-commercify #videos-commercify .video-card__cap {
  text-align: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.page-commercify .page-commercify__grid-videos {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.page-commercify .page-commercify__partner-note {
  font-size: 0.75rem;
}

/* Conversion stack — hero social proof, témoignages, CTA final */
body.page-commercify .page-commercify__hero-social.page-commercify__metrics-row {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

body.page-commercify .page-commercify__hero-social .page-commercify__metric-value {
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body.page-commercify .page-commercify__hero-cta-primary {
  padding: 0.85rem 1.65rem;
  font-size: 1.05rem;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 12px 32px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

body.page-commercify .page-commercify__hero-cta-primary:hover,
body.page-commercify .page-commercify__hero-cta-primary:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 16px 40px color-mix(in srgb, var(--accent) 35%, transparent);
}

body.page-commercify .page-commercify__testimonials-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-h);
  font-weight: 600;
}

body.page-commercify .page-commercify__testimonials-lead {
  max-width: 40rem;
  line-height: 1.55;
}

body.page-commercify .page-commercify__testimonial-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  body.page-commercify .page-commercify__testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body.page-commercify .page-commercify__testimonial-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body.page-commercify .page-commercify__testimonial-card {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 4%, transparent) inset;
  transition: transform var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

body.page-commercify .page-commercify__testimonial-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset,
    0 14px 36px color-mix(in srgb, #000 22%, transparent);
}

body.page-commercify .page-commercify__testimonial-card__inner {
  padding: 1.15rem 1.1rem 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

body.page-commercify .page-commercify__testimonial-quote {
  position: absolute;
  top: 0.35rem;
  inset-inline-end: 0.65rem;
  margin: 0;
  font-family: var(--font-h);
  font-size: 3.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
  user-select: none;
}

body.page-commercify .page-commercify__star-row {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.65rem;
}

body.page-commercify .page-commercify__star {
  font-size: 0.78rem;
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
  line-height: 1;
}

body.page-commercify .page-commercify__testimonial-text {
  font-size: calc(0.9rem * var(--copy-scale));
  line-height: 1.52;
  flex: 1 1 auto;
}

body.page-commercify .page-commercify__testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

body.page-commercify .page-commercify__testimonial-avatar {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bg);
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

body.page-commercify .page-commercify__testimonial-role {
  font-size: calc(0.78rem * var(--copy-scale));
  line-height: 1.35;
  color: var(--text-secondary, var(--text));
  font-weight: 600;
}

html[data-theme="light"] body.page-commercify .page-commercify__testimonial-card {
  background: color-mix(in srgb, var(--bg-card) 96%, var(--accent) 4%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

body.page-commercify .page-commercify__final-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--accent) 18%, var(--bg)) 0%,
    var(--bg) 42%,
    color-mix(in srgb, var(--accent) 12%, var(--bg)) 100%
  );
  border-block: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

body.page-commercify .page-commercify__final-cta__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 35%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 45% at 92% 70%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%);
  opacity: 0.95;
}

body.page-commercify .page-commercify__final-cta__inner {
  position: relative;
  z-index: 1;
}

body.page-commercify .page-commercify__final-cta__title {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
  line-height: 1.08;
}

body.page-commercify .page-commercify__final-cta__lead {
  max-width: 40rem;
  line-height: 1.55;
}

body.page-commercify .page-commercify__final-cta__bullets {
  list-style: none;
  padding: 0;
  margin-inline: auto;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: calc(0.92rem * var(--copy-scale));
}

body.page-commercify .page-commercify__final-cta__bullets li {
  position: relative;
  padding-inline-start: 1.35rem;
  text-align: start;
}

body.page-commercify .page-commercify__final-cta__bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

body.page-commercify .page-commercify__final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

body.page-commercify .page-commercify__final-cta__btn-main {
  padding: 1rem 1.85rem;
  font-size: 1.12rem;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 14px 38px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}

body.page-commercify .page-commercify__final-cta__btn-main:hover,
body.page-commercify .page-commercify__final-cta__btn-main:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
    0 18px 44px color-mix(in srgb, var(--accent) 38%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.page-commercify .page-commercify__hero-cta-primary:hover,
  body.page-commercify .page-commercify__hero-cta-primary:focus-visible,
  body.page-commercify .page-commercify__testimonial-card:hover,
  body.page-commercify .page-commercify__final-cta__btn-main:hover,
  body.page-commercify .page-commercify__final-cta__btn-main:focus-visible {
    transform: none;
  }
}

body.page-about .page-about__yt-hub-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.page-about .page-about__yt-hub-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 960px) {
  body.page-about .page-about__yt-hub-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.5rem;
  }
}

body.page-about .page-about__yt-hub-list {
  padding-left: 1.2rem;
  margin: 0;
  line-height: 1.85;
}

body.page-about .page-about__yt-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

body.page-about .page-about__yt-embed {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

body.page-about .page-about__yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Page RS Discord — hero, blocs éditoriaux, vidéo + extrait, CTA (parité RS GitHub) */
body.page-rs-discord {
  --rs-discord-brand: #5865f2;
}

body.page-rs-discord .page-rs-discord__hero {
  background:
    radial-gradient(ellipse 75% 60% at 88% 15%, color-mix(in srgb, var(--rs-discord-brand) 14%, transparent), transparent 68%),
    radial-gradient(ellipse 55% 45% at 8% 92%, color-mix(in srgb, var(--text) 5%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg) 96%, var(--rs-discord-brand) 4%);
  border-bottom: 1px solid color-mix(in srgb, var(--rs-discord-brand) 16%, transparent);
}

body.page-rs-discord .page-rs-discord__hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  body.page-rs-discord .page-rs-discord__hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

body.page-rs-discord .page-rs-discord__kicker {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

body.page-rs-discord .page-rs-discord__hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

body.page-rs-discord .page-rs-discord__status {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 88%, #f59e0b);
  background: color-mix(in srgb, #f59e0b 14%, var(--bg));
  border: 1px solid color-mix(in srgb, #f59e0b 38%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, #f59e0b 12%, transparent);
}

body.page-rs-discord .page-rs-discord__icon-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 1.25rem;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 88%, var(--text) 12%);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent),
    0 16px 48px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] body.page-rs-discord .page-rs-discord__icon-disc {
  color: #f0f6fc;
  background: color-mix(in srgb, var(--rs-discord-brand) 55%, var(--bg));
  border-color: color-mix(in srgb, #f0f6fc 18%, transparent);
}

body.page-rs-discord .page-rs-discord__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

body.page-rs-discord .page-rs-discord__block--rule {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* Section vidéo — panneau short + extrait transcript */
body.page-rs-discord .page-rs-discord__video-panel {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.25rem 1.4rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--rs-discord-brand) 24%, transparent);
  background:
    radial-gradient(ellipse 88% 65% at 100% 0%, color-mix(in srgb, var(--rs-discord-brand) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg) 90%, var(--rs-discord-brand) 10%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rs-discord-brand) 8%, transparent),
    0 18px 52px color-mix(in srgb, var(--rs-discord-brand) 12%, transparent);
}

body.page-rs-discord .page-rs-discord__video-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--rs-discord-brand) 18%, transparent) 0, transparent 42%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--rs-discord-brand) 12%, transparent) 0, transparent 38%);
}

body.page-rs-discord .page-rs-discord__video-panel-head {
  position: relative;
  z-index: 1;
  margin-bottom: 1.35rem;
}

body.page-rs-discord .page-rs-discord__video-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

body.page-rs-discord .page-rs-discord__video-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

body.page-rs-discord .page-rs-discord__video-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.page-rs-discord .page-rs-discord__video-chip--yt {
  color: #fff;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  border: 1px solid color-mix(in srgb, #000 18%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, #ff0000 35%, transparent);
}

body.page-rs-discord .page-rs-discord__video-title {
  max-width: 42rem;
}

body.page-rs-discord .page-rs-discord__video-lead {
  max-width: 48rem;
  font-size: 0.96rem;
  line-height: 1.6;
}

body.page-rs-discord .page-rs-discord__video-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.35rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  body.page-rs-discord .page-rs-discord__video-grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1.75rem;
  }
}

body.page-rs-discord .page-rs-discord__video-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  body.page-rs-discord .page-rs-discord__video-stage {
    align-items: stretch;
  }
}

body.page-rs-discord .page-rs-discord__embed-shell {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  padding: 0.4rem;
  border-radius: 1rem;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--rs-discord-brand) 42%, transparent),
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--rs-discord-brand) 28%, transparent)
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rs-discord-brand) 22%, transparent),
    0 20px 48px color-mix(in srgb, var(--rs-discord-brand) 28%, transparent);
}

body.page-rs-discord .page-rs-discord__embed-shell::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  pointer-events: none;
  z-index: 2;
}

body.page-rs-discord .page-rs-discord__embed {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 0.72rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
  aspect-ratio: 9 / 16;
  background: color-mix(in srgb, var(--text) 10%, var(--bg));
}

body.page-rs-discord .page-rs-discord__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.page-rs-discord .page-rs-discord__video-link {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  text-align: center;
}

body.page-rs-discord .page-rs-discord__video-cta {
  width: 100%;
  justify-content: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}

@media (min-width: 768px) {
  body.page-rs-discord .page-rs-discord__video-link {
    margin-inline: 0;
    text-align: left;
  }
}

body.page-rs-discord .page-rs-discord__excerpt-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 88%, var(--text) 12%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 10px 36px rgba(0, 0, 0, 0.06);
}

body.page-rs-discord .page-rs-discord__excerpt-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--rs-discord-brand) 28%, transparent);
}

body.page-rs-discord .page-rs-discord__excerpt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  color: var(--rs-discord-brand);
  background: color-mix(in srgb, var(--rs-discord-brand) 14%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--rs-discord-brand) 28%, transparent);
}

body.page-rs-discord .page-rs-discord__excerpt-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, var(--rs-discord-brand));
}

body.page-rs-discord .page-rs-discord__excerpt {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 0.15rem 0.25rem 0.25rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-style: normal;
  max-height: min(26rem, 58vh);
  overflow-y: auto;
}

body.page-rs-discord .page-rs-discord__excerpt-mark {
  display: block;
  font-family: var(--font-matrix-display, inherit);
  font-size: 2rem;
  line-height: 1;
  color: color-mix(in srgb, var(--rs-discord-brand) 50%, transparent);
  margin-bottom: 0.4rem;
}

body.page-rs-discord .page-rs-discord__excerpt-text {
  display: block;
  font-size: 0.9rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--text) 88%, var(--text-secondary, var(--text)));
}

@media (prefers-reduced-motion: no-preference) {
  body.page-rs-discord .page-rs-discord__embed-shell {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  body.page-rs-discord .page-rs-discord__video-panel:hover .page-rs-discord__embed-shell {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rs-discord-brand) 30%, transparent),
      0 24px 56px color-mix(in srgb, var(--rs-discord-brand) 32%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-rs-discord .page-rs-discord__embed-shell {
    transition: none;
  }
}

body.page-rs-discord .page-rs-discord__cta-card {
  padding: 2rem 1.5rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--rs-discord-brand) 22%, transparent);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, color-mix(in srgb, var(--rs-discord-brand) 10%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg) 92%, var(--rs-discord-brand) 8%);
  box-shadow: 0 12px 48px color-mix(in srgb, var(--rs-discord-brand) 8%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-rs-discord .page-rs-discord__icon-disc {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  body.page-rs-discord .page-rs-discord__hero:hover .page-rs-discord__icon-disc {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
      0 20px 56px color-mix(in srgb, var(--rs-discord-brand) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-rs-discord .page-rs-discord__icon-disc {
    transition: none;
  }
}

/* Page RS GitHub — hero, vignettes téléchargement, CTA */
body.page-rs-github {
  --rs-github-brand: #24292f;
  --rs-github-accent: #2da44e;
}

body.page-rs-github .page-rs-github__hero {
  background:
    radial-gradient(ellipse 75% 60% at 88% 15%, color-mix(in srgb, var(--rs-github-accent) 14%, transparent), transparent 68%),
    radial-gradient(ellipse 55% 45% at 8% 92%, color-mix(in srgb, var(--text) 5%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg) 96%, var(--rs-github-brand) 4%);
  border-bottom: 1px solid color-mix(in srgb, var(--rs-github-accent) 16%, transparent);
}

body.page-rs-github .page-rs-github__hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  body.page-rs-github .page-rs-github__hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

body.page-rs-github .page-rs-github__kicker {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

body.page-rs-github .page-rs-github__hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

body.page-rs-github .page-rs-github__status {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 82%, var(--rs-github-accent));
  background: color-mix(in srgb, var(--rs-github-accent) 14%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--rs-github-accent) 38%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--rs-github-accent) 12%, transparent);
}

body.page-rs-github .page-rs-github__icon-github {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 1.25rem;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 88%, var(--text) 12%);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent),
    0 16px 48px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] body.page-rs-github .page-rs-github__icon-github {
  color: #f0f6fc;
  background: color-mix(in srgb, var(--rs-github-brand) 55%, var(--bg));
  border-color: color-mix(in srgb, #f0f6fc 18%, transparent);
}

body.page-rs-github .page-rs-github__handle {
  font-family: var(--font-matrix-display, inherit);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text) 78%, var(--rs-github-accent));
}

body.page-rs-github .page-rs-github__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

body.page-rs-github .page-rs-github__block--rule {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

body.page-rs-github .page-rs-github__card-grid {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  body.page-rs-github .page-rs-github__card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.page-rs-github .page-rs-github__card {
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
  background: color-mix(in srgb, var(--bg) 94%, var(--text) 6%);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-rs-github .page-rs-github__card:hover {
    border-color: color-mix(in srgb, var(--rs-github-accent) 40%, transparent);
    box-shadow: 0 14px 44px color-mix(in srgb, var(--rs-github-accent) 10%, transparent);
  }
}

body.page-rs-github .page-rs-github__card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

body.page-rs-github .page-rs-github__card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-rs-github .page-rs-github__card-body {
  padding: 1.1rem 1.15rem 1.15rem;
  flex: 1;
}

body.page-rs-github .page-rs-github__card-title {
  font-family: var(--font-matrix-display, inherit);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

body.page-rs-github .page-rs-github__card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 0.85rem;
}

body.page-rs-github .page-rs-github__card-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

body.page-rs-github .page-rs-github__dl {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 92%, var(--text) 8%);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-rs-github .page-rs-github__dl:hover,
body.page-rs-github .page-rs-github__dl:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--bg) 88%, var(--accent) 12%);
}

body.page-rs-github .page-rs-github__dl-icon {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

body.page-rs-github .page-rs-github__dl--github .page-rs-github__dl-icon {
  background: color-mix(in srgb, var(--rs-github-brand) 75%, #f0f6fc 25%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: var(--text);
}

body.page-rs-github .page-rs-github__dl--site .page-rs-github__dl-icon {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center / 72% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center / 72% no-repeat;
  background: var(--accent);
}

body.page-rs-github .page-rs-github__dl--pro .page-rs-github__dl-icon {
  background: color-mix(in srgb, var(--accent-2, var(--accent)) 55%, transparent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E") center / 72% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E") center / 72% no-repeat;
  background: var(--accent-2, var(--accent));
}

body.page-rs-github .page-rs-github__downloads-note {
  margin-top: 1rem;
  font-size: 0.88rem;
  font-style: italic;
}

body.page-rs-github .page-rs-github__block--account {
  padding: 1.15rem 1.25rem;
  border-radius: 0.65rem;
  border-left: 3px solid color-mix(in srgb, var(--rs-github-accent) 55%, var(--accent));
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 90%, var(--rs-github-accent) 10%);
}

body.page-rs-github .page-rs-github__cta-card {
  padding: 2rem 1.5rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--rs-github-accent) 22%, transparent);
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, color-mix(in srgb, var(--rs-github-accent) 10%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg) 92%, var(--rs-github-accent) 8%);
  box-shadow: 0 12px 48px color-mix(in srgb, var(--rs-github-accent) 8%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-rs-github .page-rs-github__icon-github {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  body.page-rs-github .page-rs-github__hero:hover .page-rs-github__icon-github {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
      0 20px 56px color-mix(in srgb, var(--rs-github-accent) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-rs-github .page-rs-github__icon-github {
    transition: none;
  }
}

@media (min-width: 1024px) {
  body.page-commercify #videos-commercify .page-commercify__grid-videos {
    grid-template-columns: repeat(3, 1fr);
  }
}

body.page-commercify #videos-commercify .link-inline {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

body.page-commercify #videos-commercify .link-inline:hover,
body.page-commercify #videos-commercify .link-inline:focus-visible {
  color: var(--accent-hover);
}

.page-commercify__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.page-commercify__figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.page-commercify__img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * ──────────────────────────────────────────────────────────────────────────────
 * UNIVERS OBSERVATOIRE & CARTOGRAPHIE COSMIQUE
 * Bande ouverte — Hub `/prj/`
 *
 * Palette : noir profond (#0a0e27), bleu électrique (#00d9ff), violet (#7c3aed), or (#fbbf24)
 * Effets : rotation cristalline, parallax, glow spectral, micro-animations
 * ──────────────────────────────────────────────────────────────────────────────
 */

:root {
  --obs-dark: #0a0e27;
  --obs-blue: #00d9ff;
  --obs-purple: #7c3aed;
  --obs-gold: #fbbf24;
  --obs-glow-blue: 0 0 30px rgba(0, 217, 255, 0.5);
  --obs-glow-purple: 0 0 32px rgba(124, 58, 237, 0.45);
  --obs-glow-gold: 0 0 24px rgba(251, 191, 36, 0.4);
}

/* Grille cristalline : affiches larges, lisibles, scalables. */
body.page-projects #projets-grid-open .observatory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  padding: clamp(1.1rem, 2.2vw, 2rem) 0;
  position: relative;
  align-items: stretch;
}

body.page-projects #projets-grid-open .observatory-cell {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
  perspective: 1200px;
}

/*
 * Commercify (cellule 1) — RENDU NATIF accueil : pas de grille poster 2-colonnes.
 * Carte = fond plein (`card__media` absolu) + corps en bas (logique `.card--featured`).
 */
body.page-projects #projets-grid-open .observatory-cell--1 .card {
  width: 100%;
  max-width: none;
  min-height: clamp(340px, 29vw, 460px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}

body.page-projects #projets-grid-open .observatory-cell--2 .card {
  width: 100%;
  max-width: none;
  min-height: clamp(340px, 29vw, 460px);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(210px, 44%) minmax(0, 56%);
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(135deg, rgba(5, 10, 24, 0.98), rgba(11, 29, 40, 0.94)),
    var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--obs-blue) 28%, var(--obs-purple) 28%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 22px 56px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(0, 217, 255, 0.16);
  transform-style: preserve-3d;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    filter 0.32s ease;
}

body.page-projects #projets-grid-open .observatory-cell--2 .card__media {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100%;
  height: 100%;
  opacity: 1;
  background-size: cover;
  background-position: center;
  border-inline-end: 1px solid color-mix(in srgb, var(--obs-blue) 22%, transparent);
  filter: saturate(1.08) contrast(1.06) brightness(0.98);
}

body.page-projects #projets-grid-open .observatory-cell--2 .card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent 58%, rgba(5, 10, 24, 0.42)),
    radial-gradient(ellipse 72% 58% at 50% 22%, rgba(0, 217, 255, 0.08), transparent 68%);
}

body.page-projects #projets-grid-open .observatory-cell--2 .card__body,
body.page-projects #projets-grid-open .observatory-cell--2 .card__body--genericvoice,
body.page-projects #projets-grid-open .observatory-cell--2 .card__body--commercify {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.65rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: start;
  background:
    radial-gradient(ellipse 90% 70% at 18% 8%, rgba(0, 217, 255, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(9, 16, 29, 0.9), rgba(5, 9, 18, 0.98));
}

html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--2 .card__body,
html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--2 .card__body--genericvoice,
html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--2 .card__body--commercify {
  align-items: flex-end;
  text-align: end;
}

body.page-projects #projets-grid-open .observatory-cell--2 .card__body--genericvoice h3 {
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  line-height: 0.98;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: inherit;
}

body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__gv-edition,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__gv-tagline,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__commercify-tagline {
  text-align: inherit;
  margin-inline: 0;
  max-width: 100%;
}

body.page-projects #projets-grid-open .observatory-cell--2 .card__gv-tagline,
body.page-projects #projets-grid-open .observatory-cell--2 .card__commercify-tagline {
  font-size: clamp(calc(0.98rem * var(--copy-scale)), 1.35vw, calc(1.24rem * var(--copy-scale)));
  line-height: 1.38;
  color: rgba(255, 252, 248, 0.98);
  background: rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__gv-cta,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__commercify-site-btn {
  position: relative;
  z-index: 5;
}

/* Inventaire visuel complet : badges, hashtags, slogans et logos visibles au repos. */
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__badge,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__badge--nomenclature,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__badge--commercify-beta {
  z-index: 8;
  opacity: 1;
  visibility: visible;
  color: rgba(255, 252, 246, 0.96);
  background: rgba(5, 10, 18, 0.72);
  border-color: color-mix(in srgb, var(--obs-gold) 38%, var(--obs-blue) 22%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}

body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--commercify,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--genericvoice,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--transcriptit,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--webterminal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.32rem 0.48rem;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0.65rem 0 0.95rem !important;
  text-align: start;
}

html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags,
html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--commercify,
html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--genericvoice,
html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--transcriptit,
html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--webterminal {
  justify-content: flex-end;
  text-align: end;
}

body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link--muted {
  color: rgba(233, 252, 255, 0.94);
  border-bottom-color: color-mix(in srgb, var(--obs-blue) 46%, transparent);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.52);
}

/* Rotations uniques par cellule — asymétrie lisible, pas de casse optique.
   Commercify (`--1`) reste droite (rendu natif accueil). */
body.page-projects #projets-grid-open .observatory-cell--2 .card {
  transform: rotateZ(0.95deg) translateY(-0.3rem);
}

body.page-projects #projets-grid-open .observatory-cell--3 .card {
  transform: rotateZ(0.65deg) translateY(0.2rem);
}

body.page-projects #projets-grid-open .observatory-cell--4 .card {
  transform: rotateZ(-0.9deg) translateY(-0.15rem);
}

/*
 * Vignettes hub uniques — TranscriptIT (flux vocal) & WebTerminal (shell terminal).
 * Commercify + GenericVoice : layout poster (`--1` / `--2`). Commercify `--1` figée hors `--obs-accent`.
 */
body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card,
body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card {
  width: 100%;
  max-width: none;
  min-height: clamp(340px, 29vw, 460px);
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(160deg, rgba(5, 10, 24, 0.98), rgba(8, 14, 28, 0.96)),
    var(--bg-card);
  transform-style: preserve-3d;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    filter 0.32s ease;
}

/* ── TranscriptIT : bandeau vocal + volet transcription ── */
body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-stage {
  position: relative;
  flex: 0 0 clamp(210px, 46%, 290px);
  min-height: clamp(210px, 46%, 290px);
  overflow: hidden;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__media--transcriptit {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 100%;
  height: 100%;
  border-inline-end: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--obs-accent) 32%, transparent);
  filter: saturate(1.12) contrast(1.08) brightness(0.94);
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__media--transcriptit::after {
  content: none;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__media--transcriptit::before {
  background:
    linear-gradient(180deg, transparent 35%, rgba(5, 8, 18, 0.72) 88%),
    radial-gradient(ellipse 80% 60% at 22% 18%, color-mix(in srgb, var(--obs-accent) 22%, transparent), transparent 68%);
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(0.85rem, 2vw, 1.35rem);
  text-align: start;
  pointer-events: none;
}

html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-overlay {
  align-items: flex-end;
  text-align: end;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  padding: 0.22rem 0.55rem;
  font-family: var(--font-matrix-mono);
  font-size: calc(0.68rem * var(--copy-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--obs-accent) 70%, #ffffff 30%);
  background: rgba(5, 10, 18, 0.62);
  border: 1px solid color-mix(in srgb, var(--obs-accent) 42%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--obs-accent) 28%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--obs-accent);
  box-shadow: 0 0 10px var(--obs-accent);
  animation: observatory-live-pulse 1.6s ease-in-out infinite;
}

@keyframes observatory-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-overlay h3 {
  margin: 0 0 0.12rem;
  font-family: var(--font-h);
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #faf5ff;
  text-shadow:
    0 0 28px color-mix(in srgb, var(--obs-accent) 55%, transparent),
    0 3px 18px rgba(0, 0, 0, 0.65);
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-overlay .card__gv-edition {
  margin: 0;
  font-family: var(--font-matrix-mono);
  font-size: calc(0.78rem * var(--copy-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--obs-accent) 62%, #ffffff 38%);
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: min(100%, 14rem);
  height: 2.1rem;
  margin-top: 0.65rem;
  opacity: 0.88;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-waveform::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--obs-accent) 72%, transparent) 0 3px,
      transparent 3px 7px
    );
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: observatory-wave-scroll 2.8s linear infinite;
}

@keyframes observatory-wave-scroll {
  from { transform: translateX(-8px); }
  to { transform: translateX(8px); }
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-pane {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(0.95rem, 1.8vw, 1.45rem) clamp(1rem, 2vw, 1.55rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: start;
  background:
    linear-gradient(180deg, rgba(12, 8, 24, 0.94), rgba(6, 5, 14, 0.99)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1.35rem,
      rgba(168, 85, 247, 0.06) 1.35rem,
      rgba(168, 85, 247, 0.06) calc(1.35rem + 1px)
    );
  border-top: 1px solid color-mix(in srgb, var(--obs-accent) 28%, transparent);
}

html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-pane {
  text-align: end;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-feed {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-inline-start: 3px solid color-mix(in srgb, var(--obs-accent) 58%, transparent);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 0 0.35rem 0.35rem 0;
}

html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-feed {
  border-inline-start: 0;
  border-inline-end: 3px solid color-mix(in srgb, var(--obs-accent) 58%, transparent);
  border-radius: 0.35rem 0 0 0.35rem;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-line {
  margin: 0;
  font-family: var(--font-matrix-mono);
  font-size: calc(0.76rem * var(--copy-scale));
  line-height: 1.45;
  color: color-mix(in srgb, var(--obs-accent) 48%, rgba(230, 220, 255, 0.88) 52%);
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-line--ghost {
  opacity: 0.45;
  font-style: italic;
  margin-bottom: 0.25rem;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__gv-tagline {
  font-family: var(--font-body);
  font-size: clamp(calc(0.92rem * var(--copy-scale)), 1.2vw, calc(1.08rem * var(--copy-scale)));
  line-height: 1.42;
  color: rgba(245, 240, 255, 0.94);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0.35rem;
}

body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__hashtags--transcriptit .card__hashtag-link {
  font-family: var(--font-matrix-mono);
  font-size: calc(0.72rem * var(--copy-scale));
  padding: 0.12rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--obs-accent) 36%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--obs-accent) 36%, transparent);
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.32);
}

/* ── WebTerminal : fenêtre shell intégrale ── */
body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-chrome {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-shrink: 0;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(180deg, rgba(22, 28, 36, 0.98), rgba(12, 16, 22, 0.98));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  flex-shrink: 0;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-dot--close {
  background: #ff5f57;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-dot--min {
  background: #febc2e;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-dot--max {
  background: #28c840;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-chrome-title {
  margin-inline-start: 0.35rem;
  font-family: var(--font-matrix-mono);
  font-size: calc(0.68rem * var(--copy-scale));
  letter-spacing: 0.04em;
  color: rgba(200, 210, 220, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-viewport {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #040a08;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__media--webterminal {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
  filter: saturate(0.85) contrast(1.1);
  border: 0;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__media--webterminal::before {
  background:
    linear-gradient(180deg, rgba(4, 10, 8, 0.55), rgba(4, 10, 8, 0.92)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(52, 215, 123, 0.03) 2px,
      rgba(52, 215, 123, 0.03) 4px
    );
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: start;
  background: transparent;
}

html[dir="rtl"] body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body {
  align-items: flex-end;
  text-align: end;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-prompt {
  margin: 0 0 0.35rem;
  font-family: var(--font-matrix-mono);
  font-size: calc(0.82rem * var(--copy-scale));
  line-height: 1.3;
  color: color-mix(in srgb, var(--obs-accent) 78%, #ffffff 22%);
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-prompt-sign {
  color: var(--obs-accent);
  font-weight: 700;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-prompt-cmd {
  color: rgba(210, 255, 228, 0.92);
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-matrix-mono);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.06em;
  color: #e8fff2;
  text-shadow: 0 0 22px color-mix(in srgb, var(--obs-accent) 42%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body .card__gv-edition {
  margin: 0 0 0.55rem;
  font-family: var(--font-matrix-mono);
  font-size: calc(0.74rem * var(--copy-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--obs-accent) 55%, rgba(200, 230, 210, 0.8) 45%);
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body .card__gv-edition::before {
  content: "# ";
  opacity: 0.65;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__gv-tagline {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.55rem;
  font-family: var(--font-matrix-mono);
  font-size: clamp(calc(1rem * var(--copy-scale)), 1.85vw, calc(1.32rem * var(--copy-scale)));
  line-height: 1.45;
  color: rgba(196, 255, 220, 0.9);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid color-mix(in srgb, var(--obs-accent) 28%, transparent);
  border-radius: 0.25rem;
  box-shadow: inset 0 0 24px rgba(52, 215, 123, 0.06);
  max-width: 100%;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__gv-tagline::before {
  content: "> ";
  color: var(--obs-accent);
  opacity: 0.85;
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__hashtags--webterminal .card__hashtag-link {
  font-family: var(--font-matrix-mono);
  font-size: calc(0.72rem * var(--copy-scale));
  color: color-mix(in srgb, var(--obs-accent) 70%, #ffffff 30%);
  border-bottom-color: color-mix(in srgb, var(--obs-accent) 50%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-cta {
  margin-top: auto;
  font-family: var(--font-matrix-mono);
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, var(--obs-accent) 45%, transparent);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 20px color-mix(in srgb, var(--obs-accent) 18%, transparent);
}

html[data-theme="light"] body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-overlay h3 {
  color: #f5f0ff;
}

html[data-theme="light"] body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body h3 {
  color: #eafff3;
}

@media (prefers-reduced-motion: reduce) {
  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-live-dot,
  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-waveform::before {
    animation: none;
  }
}

/* Hover : la carte se redresse et gagne en lumière, sans exploser le layout. */
body.page-projects #projets-grid-open .observatory-cell .card:hover,
body.page-projects #projets-grid-open .observatory-cell .card:focus-within {
  transform: rotateZ(0deg) translateY(-0.35rem) scale(1.025);
  border-color: color-mix(in srgb, var(--obs-blue) 46%, var(--obs-gold) 24%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 38px rgba(0, 217, 255, 0.26),
    0 0 54px rgba(124, 58, 237, 0.2),
    0 28px 68px rgba(0, 0, 0, 0.46);
  filter: brightness(1.05) saturate(1.08) contrast(1.03);
}

/* Spectro-luminescence overlay discret : ne doit jamais masquer le contenu. */
body.page-projects #projets-grid-open .observatory-cell .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(0, 217, 255, 0.12) 48%, transparent 100%);
  animation: observatory-card-spectro 7s ease-in-out infinite;
  z-index: 4;
}

@keyframes observatory-card-spectro {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

body.page-projects #projets-grid-open .observatory-cell .card:hover::before,
body.page-projects #projets-grid-open .observatory-cell .card:focus-within::before {
  animation-duration: 3.2s;
}

/* Glow contextuel au scroll (parallax) */
.observatory-grid[data-scroll-depth] .observatory-cell .card {
  filter: brightness(calc(1 + var(--scroll-depth, 0) * 0.1));
}

@media (max-width: 1180px) {
  body.page-projects #projets-grid-open .observatory-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 56rem;
    margin-inline: auto;
  }

  body.page-projects #projets-grid-open .observatory-cell--1 .card,
body.page-projects #projets-grid-open .observatory-cell--2 .card {
    min-height: clamp(330px, 42vw, 420px);
  }

  body.page-projects #projets-grid-open .observatory-cell .card:hover,
  body.page-projects #projets-grid-open .observatory-cell .card:focus-within {
    transform: translateY(-0.25rem) scale(1.015) !important;
  }
}

@media (max-width: 720px) {
  body.page-projects #projets-grid-open .observatory-grid {
    grid-template-columns: 1fr;
    gap: 1.65rem;
    padding: 1.2rem 0;
  }

  body.page-projects #projets-grid-open .observatory-cell--2 .card {
    grid-template-columns: 1fr;
    min-height: 0;
    transform: none !important;
  }

  body.page-projects #projets-grid-open .observatory-cell--2 .card__media {
    min-height: clamp(210px, 48vw, 280px);
    height: auto;
    border-inline-end: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--obs-blue) 20%, transparent);
  }

  body.page-projects #projets-grid-open .observatory-cell--2 .card__body,
  body.page-projects #projets-grid-open .observatory-cell--2 .card__body--genericvoice,
  body.page-projects #projets-grid-open .observatory-cell--2 .card__body--commercify {
    align-items: center;
    text-align: center;
  }

  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card,
  body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card {
    min-height: 0;
    transform: none !important;
  }

  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-stage {
    flex-basis: clamp(190px, 44vw, 260px);
    min-height: clamp(190px, 44vw, 260px);
  }

  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-voice-overlay,
  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__obs-transcript-pane,
  body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__obs-term-body {
    align-items: center;
    text-align: center;
  }

  body.page-projects #projets-grid-open .observatory-cell--variant-transcript .card__hashtags--transcriptit,
  body.page-projects #projets-grid-open .observatory-cell--variant-terminal .card__hashtags--webterminal {
    justify-content: center;
  }

  body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags,
  body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--commercify,
  body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--genericvoice,
  body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--transcriptit,
  body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtags--webterminal {
    justify-content: center;
    text-align: center;
  }

  body.page-projects #projets-grid-open .observatory-cell .card:hover,
  body.page-projects #projets-grid-open .observatory-cell .card:focus-within {
    transform: translateY(-0.18rem) !important;
  }
}

@media (max-width: 480px) {
  body.page-projects #projets-grid-open .observatory-grid {
    gap: 1.5rem 1rem;
  }

  body.page-projects #projets-grid-open .observatory-cell .card__media {
    min-height: 190px;
  }
}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .observatory-cell .card {
    transform: none !important;
    transition: none;
  }

  .observatory-cell .card::before {
    animation: none;
    opacity: 0;
  }

  .observatory-cell .card:hover,
  .observatory-cell .card:focus-within {
    transform: none !important;
    transition: none;
  }
}

/*
 * ──────────────────────────────────────────────────────────────────────────────
 * COULEUR DOMINANTE UNIQUE PAR PROJET (`--obs-accent`)
 * Chaque vignette de la bande ouverte est distinguée par sa propre teinte.
 *   2 GenericVoice → cyan (#00d9ff)
 *   3 TranscriptIT → violet (#a855f7)
 *   4 WebTerminal  → vert terminal (#34d77b)
 *   (Commercify `--1` : figée, pas de --obs-accent)
 * Thème : compatible mode sombre (défaut) et mode clair (`html[data-theme="light"]`).
 * ──────────────────────────────────────────────────────────────────────────────
 */
body.page-projects #projets-grid-open .observatory-cell--2 { --obs-accent: #00d9ff; }
body.page-projects #projets-grid-open .observatory-cell--3 { --obs-accent: #a855f7; }
body.page-projects #projets-grid-open .observatory-cell--4 { --obs-accent: #34d77b; }

/* Bordure + halo de carte teintés par l'accent du projet (hors Commercify figée). */
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card {
  border-color: color-mix(in srgb, var(--obs-accent, #00d9ff) 42%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 22px 56px rgba(0, 0, 0, 0.34),
    0 0 30px color-mix(in srgb, var(--obs-accent, #00d9ff) 26%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card:hover,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card:focus-within {
  border-color: color-mix(in srgb, var(--obs-accent, #00d9ff) 68%, #ffffff 8%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 42px color-mix(in srgb, var(--obs-accent, #00d9ff) 38%, transparent),
    0 0 64px color-mix(in srgb, var(--obs-accent, #00d9ff) 22%, transparent),
    0 28px 68px rgba(0, 0, 0, 0.46);
}

/* Liseré du visuel poster GenericVoice + lueur teintée. */
body.page-projects #projets-grid-open .observatory-cell--2 .card__media {
  border-inline-end-color: color-mix(in srgb, var(--obs-accent, #00d9ff) 30%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell--2 .card__media::before {
  background:
    linear-gradient(90deg, transparent 58%, rgba(5, 10, 24, 0.42)),
    radial-gradient(ellipse 72% 58% at 50% 22%, color-mix(in srgb, var(--obs-accent, #00d9ff) 16%, transparent), transparent 68%);
}

/* Panneau GenericVoice : halo d'angle teinté. */
body.page-projects #projets-grid-open .observatory-cell--2 .card__body,
body.page-projects #projets-grid-open .observatory-cell--2 .card__body--genericvoice {
  background:
    radial-gradient(ellipse 92% 72% at 16% 6%, color-mix(in srgb, var(--obs-accent, #00d9ff) 18%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(9, 16, 29, 0.92), rgba(5, 9, 18, 0.98));
}

/* Slogan GenericVoice : cadre teinté. */
body.page-projects #projets-grid-open .observatory-cell--2 .card__gv-tagline {
  border-color: color-mix(in srgb, var(--obs-accent, #00d9ff) 30%, rgba(255, 255, 255, 0.12));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px color-mix(in srgb, var(--obs-accent, #00d9ff) 10%, transparent);
}

/* Hashtags : soulignement et survol teintés (hors Commercify). */
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link--muted {
  border-bottom-color: color-mix(in srgb, var(--obs-accent, #00d9ff) 52%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link:hover,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link:focus-visible,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link--muted:hover,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__hashtag-link--muted:focus-visible {
  color: color-mix(in srgb, var(--obs-accent, #00d9ff) 60%, #ffffff 40%);
  border-bottom-color: var(--obs-accent, #00d9ff);
}

/* Badges : liseré teinté (hors Commercify). */
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__badge,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__badge--nomenclature,
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__badge--commercify-beta {
  border-color: color-mix(in srgb, var(--obs-accent, #00d9ff) 44%, rgba(255, 255, 255, 0.1));
}

/* Édition / sous-titre teinté (hors Commercify). */
body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card__gv-edition span {
  color: color-mix(in srgb, var(--obs-accent, #00d9ff) 64%, #ffffff 36%);
}

/*
 * Commercify (cellule 1) — FIGÉE : hors --obs-accent et hors refactors variantes.
 * Wordmark sur le visuel ; corps desktop neutralisé ; palette observatoire d'origine.
 */
body.page-projects #projets-grid-open .observatory-cell--1 .card {
  border: 1px solid color-mix(in srgb, var(--obs-blue) 28%, var(--obs-purple) 28%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 22px 56px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(0, 217, 255, 0.16);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card:hover,
body.page-projects #projets-grid-open .observatory-cell--1 .card:focus-within {
  border-color: color-mix(in srgb, var(--obs-blue) 46%, var(--obs-gold) 24%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 38px rgba(0, 217, 255, 0.26),
    0 0 54px rgba(124, 58, 237, 0.2),
    0 28px 68px rgba(0, 0, 0, 0.46);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__media {
  border-inline-end-color: color-mix(in srgb, var(--obs-blue) 22%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__media::before {
  background:
    linear-gradient(90deg, transparent 58%, rgba(5, 10, 24, 0.42)),
    radial-gradient(ellipse 72% 58% at 50% 22%, rgba(0, 217, 255, 0.08), transparent 68%);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__body--commercify {
  background:
    radial-gradient(ellipse 90% 70% at 18% 8%, rgba(0, 217, 255, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(9, 16, 29, 0.9), rgba(5, 9, 18, 0.98));
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__commercify-tagline {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__hashtag-link,
body.page-projects #projets-grid-open .observatory-cell--1 .card__hashtag-link--muted {
  border-bottom-color: color-mix(in srgb, var(--obs-blue) 46%, transparent);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__hashtag-link:hover,
body.page-projects #projets-grid-open .observatory-cell--1 .card__hashtag-link:focus-visible,
body.page-projects #projets-grid-open .observatory-cell--1 .card__hashtag-link--muted:hover,
body.page-projects #projets-grid-open .observatory-cell--1 .card__hashtag-link--muted:focus-visible {
  color: rgba(233, 252, 255, 0.94);
  border-bottom-color: var(--obs-blue);
}

body.page-projects #projets-grid-open .observatory-cell--1 .card__badge,
body.page-projects #projets-grid-open .observatory-cell--1 .card__badge--nomenclature,
body.page-projects #projets-grid-open .observatory-cell--1 .card__badge--commercify-beta {
  border-color: color-mix(in srgb, var(--obs-gold) 38%, var(--obs-blue) 22%);
}

/*
 * Commercify `/prj/` — panneau d'infos étendu, AU REPOS, indépendant du survol.
 * IMPORTANT : ne PAS enfermer dans `@media (hover: hover)` — sur écran tactile
 * (`hover: none`, ex. portable tactile) ces overrides seraient inertes. On force
 * ici le positionnement absolu (corps quasi plein de la carte), slogan calé tout
 * en haut, et les 11 hashtags affichés d'un coup sans ascenseur.
 */
@media (min-width: 1025px) {
  body.page-projects #projets-grid-open .observatory-cell--1 .card--commercify-brand.card--featured .card__body--commercify {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(3rem + 60px) !important;
    bottom: 0.75rem !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding: 0.5rem 0.85rem !important;
    margin: 0 !important;
  }

  body.page-projects #projets-grid-open .observatory-cell--1 .card--commercify-brand.card--featured .card__commercify-tagline {
    order: 1 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    grid-row: auto !important;
    width: min(36rem, calc(100% - 1.25rem));
    max-width: 36rem;
    margin: 0 auto 0.55rem !important;
    min-height: 0 !important;
    transform: none !important;
  }

  body.page-projects #projets-grid-open .observatory-cell--1 .card--commercify-brand.card--featured .card__hashtags--commercify {
    order: 2 !important;
    grid-row: auto !important;
    display: flex !important;
    flex: 0 1 auto;
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-top: 0;
    margin-bottom: 0.55rem;
  }

  body.page-projects #projets-grid-open .observatory-cell--1 .card--commercify-brand.card--featured .card__commercify-site-links {
    order: 3 !important;
    grid-row: auto !important;
    flex: 0 0 auto;
    margin-top: auto;
    align-self: stretch;
  }

  body.page-projects #projets-grid-open .observatory-cell--1 .card--commercify-brand.card--featured .card__gv-cta {
    order: 4 !important;
    grid-row: auto !important;
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0.35rem;
  }
}

html[data-theme="light"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--obs-accent, #00d9ff) 24%, transparent),
    0 18px 40px rgba(15, 23, 42, 0.18),
    0 0 22px color-mix(in srgb, var(--obs-accent, #00d9ff) 16%, transparent);
}

html[data-theme="light"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card:hover,
html[data-theme="light"] body.page-projects #projets-grid-open .observatory-cell:not(.observatory-cell--1) .card:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--obs-accent, #00d9ff) 40%, transparent),
    0 24px 52px rgba(15, 23, 42, 0.24),
    0 0 34px color-mix(in srgb, var(--obs-accent, #00d9ff) 26%, transparent);
}

/* ==========================================================================
   Page projet WebTerminal (/prj/webterminal/) — terminal Linux navigateur.
   Palette dédiée (vert/ambre) ; scope strict body.page-webterminal.
   ========================================================================== */
:root {
  --wt-accent: #34d399;
  --wt-accent-soft: #6ee7b7;
  --wt-amber: #fbbf24;
}

body.page-webterminal .page-webterminal__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--wt-accent) 16%, transparent);
}

body.page-webterminal .page-webterminal__hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.page-webterminal .page-webterminal__hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
}

body.page-webterminal .page-webterminal__hero-glow--a {
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  top: -14%;
  right: -8%;
  background: color-mix(in srgb, var(--wt-accent) 42%, transparent);
}

body.page-webterminal .page-webterminal__hero-glow--b {
  width: min(40vw, 20rem);
  height: min(40vw, 20rem);
  bottom: -18%;
  left: -8%;
  background: color-mix(in srgb, var(--wt-amber) 26%, transparent);
}

body.page-webterminal .page-webterminal__hero-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--wt-accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wt-accent) 16%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 75% at 72% 38%, #000 20%, transparent 72%);
}

body.page-webterminal .page-webterminal__hero-shell {
  position: relative;
  z-index: 1;
}

.page-webterminal__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 880px) {
  .page-webterminal__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

body.page-webterminal .page-webterminal__hero-media {
  min-width: 0;
}

body.page-webterminal .page-webterminal__kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wt-accent);
  border: 1px solid color-mix(in srgb, var(--wt-accent) 36%, transparent);
  background: color-mix(in srgb, var(--wt-accent) 10%, transparent);
}

body.page-webterminal .page-webterminal__hero-title {
  text-shadow: 0 0 32px color-mix(in srgb, var(--wt-accent) 26%, transparent);
}

body.page-webterminal .page-webterminal__micro {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  opacity: 0.85;
}

.page-webterminal__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* Maquette terminal */
.page-webterminal__term {
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wt-accent) 22%, var(--border));
  background: #0b1220;
  box-shadow:
    0 24px 60px rgba(2, 8, 20, 0.45),
    0 0 0 1px color-mix(in srgb, var(--wt-accent) 12%, transparent);
}

.page-webterminal__term-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(180deg, #16243b 0%, #101a2c 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-webterminal__term-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  display: inline-block;
}

.page-webterminal__term-dot--r { background: #ff5f56; }
.page-webterminal__term-dot--y { background: #ffbd2e; }
.page-webterminal__term-dot--g { background: #27c93f; }

.page-webterminal__term-title {
  margin-inline-start: 0.6rem;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  color: #94a3b8;
}

.page-webterminal__term-body {
  margin: 0;
  padding: 1rem 1.15rem 1.25rem;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  line-height: 1.75;
  color: #d1fae5;
  white-space: pre-wrap;
  overflow-x: auto;
}

.page-webterminal__term-body code {
  font: inherit;
  color: inherit;
  background: none;
}

.page-webterminal__term-prompt { color: var(--wt-accent-soft); }
.page-webterminal__term-path { color: #60a5fa; }

.page-webterminal__term-cursor {
  color: var(--wt-accent);
  animation: wt-blink 1.05s steps(2, start) infinite;
}

@keyframes wt-blink {
  to { opacity: 0; }
}

/* Grille fonctionnalités */
.page-webterminal__feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.page-webterminal__feature-card {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--wt-accent) 18%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--wt-accent) 4%);
}

.page-webterminal__feature-title {
  font-family: var(--font-h);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

/* Pipeline */
.page-webterminal__pipeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
}

.page-webterminal__pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.page-webterminal__pipeline-num {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-weight: 700;
  color: #0b1220;
  background: var(--wt-accent);
}

.page-webterminal__pipeline-text {
  line-height: 1.55;
  padding-top: 0.15rem;
}

/* Spécifications */
.page-webterminal__specs-table {
  display: grid;
  gap: 0;
  max-width: 46rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.page-webterminal__specs-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
}

.page-webterminal__specs-row + .page-webterminal__specs-row {
  border-top: 1px solid var(--border);
}

.page-webterminal__specs-key,
.page-webterminal__specs-val {
  padding: 0.7rem 0.95rem;
}

.page-webterminal__specs-key {
  font-weight: 600;
  background: color-mix(in srgb, var(--wt-accent) 7%, transparent);
  border-inline-end: 1px solid var(--border);
}

.page-webterminal__specs-val {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.88rem;
}

.page-webterminal__security {
  max-width: 46rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--wt-amber) 38%, var(--border));
  background: color-mix(in srgb, var(--wt-amber) 8%, transparent);
}

.page-webterminal__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__hero {
  border-bottom-color: color-mix(in srgb, #059669 22%, transparent);
}

html[data-theme="light"] body.page-webterminal .page-webterminal__hero-backdrop {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, #d1fae5 55%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, #6ee7b7 22%, transparent) 100%
    );
}

html[data-theme="light"] body.page-webterminal .page-webterminal__hero-glow--a {
  background: color-mix(in srgb, #34d399 28%, transparent);
  opacity: 0.35;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__hero-glow--b {
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  opacity: 0.35;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__hero-grid-lines {
  opacity: 0.12;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__kicker {
  color: #0f766e;
  background: color-mix(in srgb, #5eead4 35%, white);
  border-color: color-mix(in srgb, #14b8a6 45%, transparent);
}

html[data-theme="light"] body.page-webterminal .page-webterminal__hero-title {
  text-shadow: none;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__feature-card {
  border-color: color-mix(in srgb, #059669 24%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 96%, #d1fae5 4%);
}

html[data-theme="light"] body.page-webterminal .page-webterminal__pipeline-num {
  color: #fff;
  background: #047857;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__specs-key {
  background: color-mix(in srgb, #059669 12%, var(--bg-elevated));
}

html[data-theme="light"] body.page-webterminal .page-webterminal__security {
  border-color: color-mix(in srgb, #d97706 42%, var(--border));
  background: color-mix(in srgb, #fef3c7 72%, white);
}

/* Terminal mockup : fond sombre inchangé — couleurs prompt explicites en light */
html[data-theme="light"] body.page-webterminal .page-webterminal__term-prompt {
  color: #6ee7b7;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__term-cursor {
  color: #34d399;
}

html[data-theme="light"] body.page-webterminal .page-webterminal__term {
  border-color: color-mix(in srgb, #047857 28%, var(--border));
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.22),
    0 0 0 1px color-mix(in srgb, #059669 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .page-webterminal__term-cursor {
    animation: none;
  }
}

/* ==========================================================================
   Page projet PoulpyInfoPC (/prj/poulpyinfopc/) — terminal vert + fiche matériel.
   Palette dédiée ; scope strict body.page-poulpyinfopc.
   ========================================================================== */
:root {
  --pipc-accent: #22c55e;
  --pipc-accent-soft: #4ade80;
  --pipc-amber: #a3e635;
}

body.page-poulpyinfopc .page-poulpyinfopc__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--pipc-accent) 16%, transparent);
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-glow--a {
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  top: -14%;
  right: -8%;
  background: color-mix(in srgb, var(--pipc-accent) 42%, transparent);
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-glow--b {
  width: min(40vw, 20rem);
  height: min(40vw, 20rem);
  bottom: -18%;
  left: -8%;
  background: color-mix(in srgb, var(--pipc-amber) 26%, transparent);
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--pipc-accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pipc-accent) 16%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 75% at 72% 38%, #000 20%, transparent 72%);
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-shell {
  position: relative;
  z-index: 1;
}

.page-poulpyinfopc__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 880px) {
  .page-poulpyinfopc__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.page-poulpyinfopc .page-poulpyinfopc__kicker {
  font-family: var(--font-body);
  font-size: calc(0.82rem * var(--copy-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pipc-accent-soft);
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-title {
  color: color-mix(in srgb, var(--pipc-accent-soft) 88%, var(--text));
}

body.page-poulpyinfopc .page-poulpyinfopc__micro {
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: calc(0.78rem * var(--copy-scale));
  letter-spacing: 0.02em;
}

.page-poulpyinfopc__term {
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 28%, transparent);
  background: color-mix(in srgb, #020617 92%, var(--pipc-accent) 8%);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.35),
    0 0 0 1px color-mix(in srgb, var(--pipc-accent) 12%, transparent);
}

.page-poulpyinfopc__term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, #0f172a 88%, var(--pipc-accent) 12%);
  border-bottom: 1px solid color-mix(in srgb, var(--pipc-accent) 18%, transparent);
}

.page-poulpyinfopc__term-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-poulpyinfopc__term-dot--r { background: #ff5f56; }
.page-poulpyinfopc__term-dot--y { background: #ffbd2e; }
.page-poulpyinfopc__term-dot--g { background: #27c93f; }

.page-poulpyinfopc__term-title {
  margin-inline-start: 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: calc(0.72rem * var(--copy-scale));
  color: color-mix(in srgb, var(--text) 72%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-poulpyinfopc__term-body {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: calc(0.74rem * var(--copy-scale));
  line-height: 1.45;
  color: var(--pipc-accent-soft);
  white-space: pre-wrap;
  word-break: break-word;
}

.page-poulpyinfopc__term-body code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.page-poulpyinfopc__term-cursor {
  color: var(--pipc-accent);
  animation: pipc-term-blink 1.05s step-end infinite;
}

@keyframes pipc-term-blink {
  50% { opacity: 0; }
}

.page-poulpyinfopc__hero-card {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 22%, transparent);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
  object-fit: cover;
}

.page-poulpyinfopc__hero-showcase {
  margin: 0.85rem 0 0;
}

.page-poulpyinfopc__hero-showcase-frame {
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 28%, transparent);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.32),
    0 0 0 1px color-mix(in srgb, var(--pipc-accent) 12%, transparent);
  background: #050807;
}

.page-poulpyinfopc__hero-showcase-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: middle;
}

.page-poulpyinfopc__hero-showcase-caption {
  margin-top: 0.45rem;
  font-size: calc(0.82rem * var(--copy-scale, 1));
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .page-poulpyinfopc__hero-showcase-video {
    display: none;
  }

  .page-poulpyinfopc__hero-showcase-frame {
    aspect-ratio: 16 / 9;
    background:
      center / cover no-repeat var(--pipc-showcase-poster, #050807);
  }
}

.page-poulpyinfopc__feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.page-poulpyinfopc__feature-card {
  padding: 1.15rem 1.2rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 14%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--pipc-accent) 6%);
}

.page-poulpyinfopc__feature-title {
  font-family: var(--font-sub);
  font-size: calc(1.02rem * var(--copy-scale));
  font-weight: 700;
  margin: 0 0 0.45rem;
  color: color-mix(in srgb, var(--pipc-accent-soft) 80%, var(--text));
}

.page-poulpyinfopc__pipeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-poulpyinfopc__pipeline-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 12%, var(--border));
  background: color-mix(in srgb, var(--bg) 96%, var(--pipc-accent) 4%);
}

.page-poulpyinfopc__pipeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-family: var(--font-sub);
  font-weight: 800;
  font-size: calc(0.9rem * var(--copy-scale));
  color: #052e16;
  background: linear-gradient(135deg, var(--pipc-accent-soft), var(--pipc-accent));
}

.page-poulpyinfopc__pipeline-text {
  font-family: var(--font-body);
  line-height: var(--body-line-height);
}

.page-poulpyinfopc__specs-table {
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 14%, var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
}

.page-poulpyinfopc__specs-row {
  display: grid;
  grid-template-columns: minmax(6rem, 0.35fr) 1fr;
  gap: 0.75rem 1rem;
}

.page-poulpyinfopc__specs-row + .page-poulpyinfopc__specs-row {
  border-top: 1px solid color-mix(in srgb, var(--pipc-accent) 10%, var(--border));
}

.page-poulpyinfopc__specs-key,
.page-poulpyinfopc__specs-val {
  padding: 0.85rem 1rem;
}

.page-poulpyinfopc__specs-key {
  font-family: var(--font-sub);
  font-weight: 700;
  color: var(--pipc-accent-soft);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--pipc-accent) 8%);
}

.page-poulpyinfopc__specs-val {
  font-family: var(--font-body);
  color: var(--text-secondary, var(--text));
}

.page-poulpyinfopc__formats {
  padding: 1.15rem 1.2rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 12%, var(--border));
  background: color-mix(in srgb, var(--bg) 96%, var(--pipc-accent) 4%);
}

.page-poulpyinfopc__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

body.page-poulpyinfopc .page-poulpyinfopc__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

body.page-poulpyinfopc .page-poulpyinfopc__github-soon {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #dcfce7;
  background: color-mix(in srgb, var(--pipc-accent) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 42%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--pipc-accent) 18%, transparent);
}

body.page-poulpyinfopc .page-poulpyinfopc__github-notice {
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 26%, transparent);
  background: color-mix(in srgb, var(--pipc-accent) 10%, transparent);
}

body.page-poulpyinfopc .page-poulpyinfopc__github-btn--pending:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.88);
  pointer-events: none;
  box-shadow: none;
}

.page-poulpyinfopc__cta-panel {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border-radius: calc(var(--radius-md, 12px) + 4px);
  border: 1px solid color-mix(in srgb, var(--pipc-accent) 24%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--pipc-accent) 5%);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--pipc-accent) 18%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc {
  --pipc-accent: #15803d;
  --pipc-accent-soft: #166534;
  --pipc-amber: #4d7c0f;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__hero-glow--a {
  opacity: 0.24;
  background: color-mix(in srgb, #86efac 38%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__hero-glow--b {
  opacity: 0.18;
  background: color-mix(in srgb, #bef264 30%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__kicker {
  color: #15803d;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__hero-title {
  color: color-mix(in srgb, #14532d 70%, var(--text) 30%);
  text-shadow: none;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__feature-title {
  color: #14532d;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__specs-key {
  color: #166534;
  background: color-mix(in srgb, #ecfdf5 88%, var(--bg-elevated));
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__github-soon {
  color: #14532d;
  background: color-mix(in srgb, #bbf7d0 42%, #f0fdf4);
  border-color: color-mix(in srgb, #15803d 32%, transparent);
  box-shadow: none;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__github-notice {
  color: color-mix(in srgb, var(--text) 90%, #14532d 10%);
  background: color-mix(in srgb, #f0fdf4 82%, #fff 18%);
  border-color: color-mix(in srgb, #15803d 24%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__cta-panel {
  background: color-mix(in srgb, #f0fdf4 78%, #fff 22%);
  border-color: color-mix(in srgb, #15803d 20%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, #15803d 10%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__hero {
  border-bottom-color: color-mix(in srgb, #15803d 20%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__term {
  border-color: color-mix(in srgb, #047857 28%, var(--border));
  background: color-mix(in srgb, #f0fdf4 92%, #ecfdf5);
  box-shadow:
    0 14px 32px color-mix(in srgb, #15803d 8%, transparent),
    0 0 0 1px color-mix(in srgb, #15803d 14%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__term-bar {
  background: color-mix(in srgb, #ecfdf5 94%, #d1fae5);
  border-bottom-color: color-mix(in srgb, #15803d 20%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__term-body {
  color: #14532d;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__term-cursor {
  color: #15803d;
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__hero-showcase-frame {
  border-color: color-mix(in srgb, #15803d 24%, var(--border));
  box-shadow:
    0 16px 40px color-mix(in srgb, #15803d 12%, transparent),
    0 0 0 1px color-mix(in srgb, #15803d 16%, transparent);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__pipeline-num {
  color: #f0fdf4;
  background: linear-gradient(135deg, #15803d, #14532d);
}

html[data-theme="light"] body.page-poulpyinfopc .page-poulpyinfopc__feature-card {
  border-color: color-mix(in srgb, #15803d 16%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 96%, #ecfdf5 4%);
}

@media (prefers-reduced-motion: reduce) {
  .page-poulpyinfopc__term-cursor {
    animation: none;
  }
}

/* —— Page projet PromptDeMerde (`/prj/promptdemerde/`) —— */

body.page-promptdemerde .page-promptdemerde > section:nth-of-type(odd) {
  background:
    radial-gradient(ellipse 80% 42% at 18% 0%, color-mix(in srgb, #a855f7 7%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg) 96%, #1e1033 4%);
}

body.page-promptdemerde .page-promptdemerde > section:nth-of-type(even) {
  background:
    radial-gradient(ellipse 75% 38% at 88% 100%, color-mix(in srgb, #38bdf8 6%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-elevated) 94%, #0f172a 6%);
}

body.page-promptdemerde .page-promptdemerde__hero--showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, #a855f7 14%, transparent);
  background:
    radial-gradient(ellipse 90% 55% at 20% 0%, color-mix(in srgb, #7c3aed 14%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 45% at 95% 85%, color-mix(in srgb, #38bdf8 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg) 92%, #12081f 8%);
}

body.page-promptdemerde .page-promptdemerde__hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.page-promptdemerde .page-promptdemerde__hero-backdrop-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
}

body.page-promptdemerde .page-promptdemerde__hero-backdrop-glow--a {
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  top: -14%;
  right: -4%;
  background: color-mix(in srgb, #a855f7 42%, transparent);
}

body.page-promptdemerde .page-promptdemerde__hero-backdrop-glow--b {
  width: min(40vw, 20rem);
  height: min(40vw, 20rem);
  bottom: -16%;
  left: -8%;
  background: color-mix(in srgb, #38bdf8 32%, transparent);
}

body.page-promptdemerde .page-promptdemerde__hero-backdrop-grid {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(color-mix(in srgb, #c084fc 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #c084fc 16%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 75% at 72% 38%, #000 20%, transparent 72%);
}

body.page-promptdemerde .page-promptdemerde__hero-shell {
  position: relative;
  z-index: 1;
}

body.page-promptdemerde .page-promptdemerde__kicker {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1.4vw + 0.35rem, 0.92rem);
  letter-spacing: 0.06em;
}

body.page-promptdemerde .page-promptdemerde__hero-title {
  text-shadow: 0 0 32px color-mix(in srgb, #a855f7 24%, transparent);
}

body.page-promptdemerde .page-promptdemerde__micro {
  font-family: var(--font-body);
  font-size: calc(0.92rem * var(--copy-scale));
  letter-spacing: var(--tracking-body-copy);
}

body.page-promptdemerde .page-promptdemerde__hero-cta.btn--primary {
  box-shadow:
    0 10px 28px color-mix(in srgb, #7c3aed 32%, transparent),
    0 0 0 1px color-mix(in srgb, #c084fc 22%, transparent);
}

body.page-promptdemerde .page-promptdemerde__section > .container > .font-h2,
body.page-promptdemerde .page-promptdemerde > section > .container > .font-h2 {
  position: relative;
  padding-bottom: 0.15rem;
}

body.page-promptdemerde .page-promptdemerde > section > .container > .font-h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-top: 0.55rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #a855f7, #38bdf8);
  opacity: 0.85;
}

body.page-promptdemerde .page-promptdemerde__reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.55s ease,
    transform 0.55s var(--ease-choreography, ease);
  transition-delay: var(--pd-reveal-delay, 0s);
}

body.page-promptdemerde .page-promptdemerde__reveal.is-in-view {
  opacity: 1;
  transform: none;
}

body.page-promptdemerde .page-promptdemerde__video-frame.is-playing .page-promptdemerde__video-wave-bar {
  animation-play-state: running;
}

body.page-promptdemerde .page-promptdemerde__video-frame:not(.is-playing) .page-promptdemerde__video-wave-bar {
  animation-play-state: paused;
  opacity: 0.58;
}

body.page-promptdemerde .page-genericvoice__hero-actions,
body.page-promptdemerde .page-promptdemerde__hero-actions,
body.page-promptdemerde .page-promptdemerde__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
  align-items: center;
}

body.page-promptdemerde .page-promptdemerde__cta-actions {
  justify-content: center;
}

body.page-promptdemerde .page-promptdemerde__github-soon {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e9d5ff;
  background: color-mix(in srgb, #a855f7 24%, transparent);
  border: 1px solid color-mix(in srgb, #c084fc 42%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, #9333ea 18%, transparent);
}

body.page-promptdemerde .page-promptdemerde__github-notice {
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, #c084fc 26%, transparent);
  background: color-mix(in srgb, #a855f7 10%, transparent);
}

body.page-promptdemerde .page-promptdemerde__github--pending .page-promptdemerde__github-handle {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

body.page-promptdemerde .page-promptdemerde__github-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

body.page-promptdemerde .page-promptdemerde__github-btn--pending:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.88);
  pointer-events: none;
  box-shadow: none;
}

body.page-promptdemerde .page-promptdemerde__github--pending .page-promptdemerde__github-actions {
  opacity: 0.82;
}

html[data-theme="light"] body.page-promptdemerde .page-promptdemerde__github-soon {
  color: #581c87;
  background: color-mix(in srgb, #d8b4fe 55%, #faf5ff 45%);
  border-color: color-mix(in srgb, #a855f7 35%, transparent);
}

html[data-theme="light"] body.page-promptdemerde .page-promptdemerde__github-notice {
  border-color: color-mix(in srgb, #a855f7 22%, transparent);
  background: color-mix(in srgb, #f3e8ff 70%, transparent);
}

.page-promptdemerde__hero-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .page-promptdemerde__hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, min(22rem, 38vw));
  }
}

.page-promptdemerde__hero-media {
  display: flex;
  justify-content: center;
}

body.page-promptdemerde .page-promptdemerde__hero-media .page-promptdemerde__video-stage {
  width: min(100%, 22rem);
  margin-inline: auto;
}

.page-promptdemerde__roadmap-list {
  margin: 0;
  padding-inline-start: 1.25rem;
  max-width: 42rem;
}

.page-promptdemerde__roadmap-item + .page-promptdemerde__roadmap-item {
  margin-top: 0.55rem;
}

.page-promptdemerde__feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}

.page-promptdemerde__feature-card {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--surface-2, #1a1a2e) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2-dim, #7c5cff) 22%, transparent);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.24s var(--ease-choreography, ease),
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.page-promptdemerde__feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #a855f7, #38bdf8);
  opacity: 0.5;
}

.page-promptdemerde__feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, #a855f7 36%, transparent);
  box-shadow: 0 14px 36px color-mix(in srgb, #7c3aed 16%, transparent);
}

.page-promptdemerde__feature-title {
  font-size: calc(1rem * var(--copy-scale, 1));
  font-weight: 700;
  margin: 0 0 0.45rem;
  line-height: 1.35;
}

.page-promptdemerde__pipeline-steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.35rem;
  display: grid;
  gap: 0.85rem;
  max-width: 42rem;
  position: relative;
}

.page-promptdemerde__pipeline-steps::before {
  content: "";
  position: absolute;
  left: 1.02rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a855f7, #38bdf8 65%, transparent);
  opacity: 0.32;
}

.page-promptdemerde__pipeline-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.page-promptdemerde__pipeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--accent-2, #a855f7);
  background: color-mix(in srgb, var(--accent-2-dim, #7c5cff) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2-dim, #7c5cff) 35%, transparent);
}

.page-promptdemerde__pipeline-text {
  padding-top: 0.35rem;
  line-height: 1.55;
}

.page-promptdemerde__local-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.page-promptdemerde__local-list li {
  position: relative;
  padding-inline-start: 1.35rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.page-promptdemerde__local-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, #a855f7 72%, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, #a855f7 40%, transparent);
}

.page-promptdemerde__specs-table {
  margin: 0;
  max-width: 44rem;
}

.page-promptdemerde__specs-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0.75rem 1.25rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-secondary, #94a3b8) 18%, transparent);
}

.page-promptdemerde__specs-row:last-child {
  border-bottom: 0;
}

.page-promptdemerde__specs-key {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
}

.page-promptdemerde__specs-val {
  margin: 0;
  color: var(--text-secondary, #94a3b8);
}

body.page-promptdemerde .page-promptdemerde__cta .projects-cta__hub-link,
body.page-promptdemerde .projects-cta__hub-link {
  margin-top: 1.25rem;
}

.page-promptdemerde__github-panel,
.page-promptdemerde__cta-panel {
  max-width: 44rem;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border-radius: calc(var(--radius-md, 12px) + 4px);
  border: 1px solid color-mix(in srgb, #a855f7 24%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 90%, #7c3aed 5%);
  box-shadow: 0 16px 40px color-mix(in srgb, #6d28d9 18%, transparent);
}

.page-promptdemerde__cta-panel {
  max-width: 48rem;
  margin-inline: auto;
}

.page-promptdemerde__shot-open,
.page-promptdemerde__gallery-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: inherit;
  overflow: hidden;
  transition: transform 0.28s var(--ease-choreography, ease);
}

.page-promptdemerde__shot-card:hover .page-promptdemerde__shot-open,
.page-promptdemerde__gallery-item:hover .page-promptdemerde__gallery-open {
  transform: scale(1.015);
}

.page-promptdemerde__gallery-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  background: #0c0814;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: filter 0.28s ease;
}

.page-promptdemerde__gallery-item:hover .page-promptdemerde__gallery-img {
  filter: brightness(1.06);
}

.page-promptdemerde__lightbox[hidden] {
  display: none;
}

.page-promptdemerde__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
}

.page-promptdemerde__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #05030a 72%, transparent);
  backdrop-filter: blur(8px);
}

.page-promptdemerde__lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  max-height: min(92vh, 52rem);
  overflow: auto;
  border-radius: calc(var(--radius-md, 12px) + 6px);
  border: 1px solid color-mix(in srgb, #a855f7 32%, transparent);
  background: color-mix(in srgb, #12081f 92%, var(--bg-elevated) 8%);
  box-shadow: 0 28px 64px color-mix(in srgb, #000 48%, transparent);
}

.page-promptdemerde__lightbox-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, #c084fc 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #1e1033 88%, transparent);
  color: #f5f0ff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.page-promptdemerde__lightbox-close:hover {
  background: color-mix(in srgb, #7c3aed 55%, transparent);
  border-color: color-mix(in srgb, #e9d5ff 45%, transparent);
}

.page-promptdemerde__lightbox-figure {
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

.page-promptdemerde__lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
}

.page-promptdemerde__lightbox-caption {
  margin-top: 0.65rem;
  text-align: center;
  font-size: calc(0.86rem * var(--copy-scale, 1));
  color: var(--text-secondary, #94a3b8);
}

body.page-promptdemerde--lightbox-open {
  overflow: hidden;
}

html[data-theme="light"] .page-promptdemerde__github-panel,
html[data-theme="light"] .page-promptdemerde__cta-panel {
  background: color-mix(in srgb, #faf5ff 78%, #fff 22%);
  border-color: color-mix(in srgb, #a855f7 18%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, #7c3aed 12%, transparent);
}

html[data-theme="light"] body.page-promptdemerde .page-promptdemerde > section:nth-of-type(odd) {
  background:
    radial-gradient(ellipse 80% 42% at 18% 0%, color-mix(in srgb, #a855f7 5%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg) 98%, #f3e8ff 2%);
}

html[data-theme="light"] body.page-promptdemerde .page-promptdemerde > section:nth-of-type(even) {
  background:
    radial-gradient(ellipse 75% 38% at 88% 100%, color-mix(in srgb, #38bdf8 5%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-elevated) 96%, #ede9fe 4%);
}

.card__promptdemerde-site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.55rem;
  width: 100%;
}

.card__promptdemerde-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.85rem;
  font-family: var(--font-sub);
  font-size: calc(0.74rem * var(--copy-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(245, 240, 255, 0.96);
  background: color-mix(in srgb, var(--accent-2-dim, #7c5cff) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2-dim, #7c5cff) 48%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.card__promptdemerde-site-btn:hover {
  color: #fff;
  background: color-mix(in srgb, var(--accent-2-dim, #7c5cff) 38%, transparent);
  border-color: color-mix(in srgb, var(--accent-2, #a855f7) 62%, transparent);
}

body.page-home #projets .card--featured.card--promptdemerde-brand .card__body--genericvoice h3,
body.page-projects #projets .card--featured.card--promptdemerde-brand .card__body--genericvoice h3 {
  font-family: var(--font-display, Syne, sans-serif);
  font-weight: 800;
}

.card--promptdemerde-brand .card__hashtags--promptdemerde {
  margin-top: 0.35rem;
}

.card--hub-open .card__gv-cta--secondary {
  margin-top: 0.35rem;
}

html[data-theme="light"] .page-promptdemerde__feature-card {
  background: color-mix(in srgb, #f8fafc 92%, #ede9fe);
  border-color: color-mix(in srgb, #7c3aed 16%, transparent);
}

html[data-theme="light"] .page-promptdemerde__pipeline-num {
  background: color-mix(in srgb, #7c3aed 12%, #fff);
}

@media (max-width: 640px) {
  .page-promptdemerde__specs-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* Showcase média — short 9:16 + captures */
body.page-promptdemerde .page-promptdemerde__showcase {
  position: relative;
  overflow: hidden;
}

body.page-promptdemerde .page-promptdemerde__showcase-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 18% 22%, color-mix(in srgb, #a855f7 22%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 50% at 88% 78%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 55%);
}

body.page-promptdemerde .page-promptdemerde__showcase-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.45;
}

body.page-promptdemerde .page-promptdemerde__showcase-glow--a {
  width: min(42vw, 22rem);
  height: min(42vw, 22rem);
  top: 8%;
  left: -6%;
  background: #7c3aed;
}

body.page-promptdemerde .page-promptdemerde__showcase-glow--b {
  width: min(36vw, 18rem);
  height: min(36vw, 18rem);
  bottom: 6%;
  right: -4%;
  background: #0ea5e9;
}

.page-promptdemerde__showcase-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  max-width: 72rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .page-promptdemerde__showcase-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }
}

.page-promptdemerde__showcase-video-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 22rem;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 900px) {
  .page-promptdemerde__showcase-video-col {
    margin-inline: auto 0;
  }
}

body.page-promptdemerde .page-promptdemerde__video-stage {
  position: relative;
  width: 100%;
  padding: clamp(0.35rem, 1.5vw, 0.55rem);
}

body.page-promptdemerde .page-promptdemerde__video-frame {
  position: relative;
  border-radius: calc(var(--radius-lg, 12px) + 10px);
  padding: 3px;
  background: linear-gradient(
    135deg,
    #c084fc 0%,
    #a855f7 24%,
    #7c3aed 52%,
    #38bdf8 78%,
    #e9d5ff 100%
  );
  box-shadow:
    0 24px 56px color-mix(in srgb, #6d28d9 42%, transparent),
    0 0 0 1px color-mix(in srgb, #c084fc 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}

body.page-promptdemerde .page-promptdemerde__video-frame-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    color-mix(in srgb, #e9d5ff 50%, transparent) 45%,
    transparent 55%,
    color-mix(in srgb, #38bdf8 38%, transparent) 100%
  );
  opacity: 0.62;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: page-promptdemerde-frame-shimmer 5.5s ease-in-out infinite;
}

@keyframes page-promptdemerde-frame-shimmer {
  0%,
  100% {
    opacity: 0.32;
    transform: rotate(0deg);
  }

  50% {
    opacity: 0.82;
    transform: rotate(180deg);
  }
}

body.page-promptdemerde .page-promptdemerde__video-frame-body {
  position: relative;
  border-radius: calc(var(--radius-lg, 12px) + 6px);
  background: linear-gradient(180deg, #12081f 0%, #07040f 100%);
  border: 1px solid color-mix(in srgb, #a855f7 24%, transparent);
  box-shadow: inset 0 0 40px color-mix(in srgb, #7c3aed 14%, transparent);
}

body.page-promptdemerde .page-promptdemerde__video-frame-inner {
  position: relative;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #05030a;
}

body.page-promptdemerde .page-promptdemerde__showcase-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #0f0a18;
}

body.page-promptdemerde .page-promptdemerde__video-frame-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    color-mix(in srgb, #a855f7 5%, transparent) 2px,
    color-mix(in srgb, #a855f7 5%, transparent) 3px
  );
  opacity: 0.26;
  mix-blend-mode: soft-light;
}

body.page-promptdemerde .page-promptdemerde__video-frame-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, #e9d5ff 85%, white);
  opacity: 0.88;
  box-shadow: 0 0 10px color-mix(in srgb, #a855f7 42%, transparent);
}

body.page-promptdemerde .page-promptdemerde__video-frame-corner--tl {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}

body.page-promptdemerde .page-promptdemerde__video-frame-corner--tr {
  top: 8px;
  right: 8px;
  border-left: none;
  border-bottom: none;
}

body.page-promptdemerde .page-promptdemerde__video-frame-corner--bl {
  bottom: 8px;
  left: 8px;
  border-right: none;
  border-top: none;
}

body.page-promptdemerde .page-promptdemerde__video-frame-corner--br {
  bottom: 8px;
  right: 8px;
  border-left: none;
  border-top: none;
}

body.page-promptdemerde .page-promptdemerde__video-frame-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem 0.65rem;
  border-top: 1px solid color-mix(in srgb, #38bdf8 28%, transparent);
  background: linear-gradient(180deg, #0a0612 0%, #05030a 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #67e8f9 10%, transparent);
}

body.page-promptdemerde .page-promptdemerde__video-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.28rem;
  height: 1.15rem;
  width: min(100%, 11rem);
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar {
  flex: 1;
  max-width: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #a5f3fc 0%, #22d3ee 55%, #0891b2 100%);
  box-shadow:
    0 0 10px color-mix(in srgb, #22d3ee 58%, transparent),
    0 0 2px color-mix(in srgb, #ecfeff 35%, transparent);
  animation: page-promptdemerde-wave 1.05s ease-in-out infinite;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(1) {
  height: 34%;
  animation-delay: 0s;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(2) {
  height: 58%;
  animation-delay: 0.1s;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(3) {
  height: 86%;
  animation-delay: 0.2s;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(4) {
  height: 48%;
  animation-delay: 0.3s;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(5) {
  height: 72%;
  animation-delay: 0.4s;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(6) {
  height: 42%;
  animation-delay: 0.5s;
}

body.page-promptdemerde .page-promptdemerde__video-wave-bar:nth-child(7) {
  height: 64%;
  animation-delay: 0.6s;
}

@keyframes page-promptdemerde-wave {
  0%,
  100% {
    transform: scaleY(0.5);
    opacity: 0.72;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.page-promptdemerde__showcase-caption {
  font-size: calc(0.82rem * var(--copy-scale, 1));
  letter-spacing: 0.02em;
}

.page-promptdemerde__screenshots-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.35rem);
  max-width: 72rem;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .page-promptdemerde__screenshots-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.page-promptdemerde__screenshots-item .page-promptdemerde__shot-img {
  object-fit: contain;
  background: #0c0814;
}

.page-promptdemerde__gallery-grid {
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.15rem);
  max-width: 72rem;
  margin-inline: auto;
}

.page-promptdemerde__gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: clamp(0.85rem, 2vw, 1.15rem);
}

.page-promptdemerde__gallery-meta {
  font-size: calc(0.84rem * var(--copy-scale, 1));
  letter-spacing: 0.03em;
}

.page-promptdemerde__gallery-grid--bento {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(4.75rem, auto);
  gap: clamp(0.65rem, 1.5vw, 0.95rem);
}

.page-promptdemerde__gallery-item--hidden {
  display: none !important;
}

.page-promptdemerde__gallery-item--slot-1 {
  grid-column: span 7;
  grid-row: span 2;
}

.page-promptdemerde__gallery-item--slot-2,
.page-promptdemerde__gallery-item--slot-3 {
  grid-column: span 5;
}

.page-promptdemerde__gallery-item--slot-4,
.page-promptdemerde__gallery-item--slot-5,
.page-promptdemerde__gallery-item--slot-6,
.page-promptdemerde__gallery-item--slot-7,
.page-promptdemerde__gallery-item--slot-8,
.page-promptdemerde__gallery-item--slot-9 {
  grid-column: span 4;
}

.page-promptdemerde__gallery-grid--bento .page-promptdemerde__gallery-frame {
  height: 100%;
}

.page-promptdemerde__gallery-grid--bento .page-promptdemerde__gallery-open {
  display: block;
  width: 100%;
  height: 100%;
}

.page-promptdemerde__gallery-grid--bento .page-promptdemerde__gallery-img {
  width: 100%;
  height: 100%;
  min-height: 5.5rem;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.page-promptdemerde__gallery-grid--bento.is-shuffling {
  opacity: 0.55;
  transition: opacity 0.22s ease;
}

@media (max-width: 47.99rem) {
  .page-promptdemerde__gallery-grid--bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .page-promptdemerde__gallery-item[class*="--slot-"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .page-promptdemerde__gallery-item--slot-1 {
    grid-column: span 2 !important;
  }
}

@media (min-width: 36rem) {
  .page-promptdemerde__gallery-grid:not(.page-promptdemerde__gallery-grid--bento) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .page-promptdemerde__gallery-grid:not(.page-promptdemerde__gallery-grid--bento) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-promptdemerde__gallery-item {
  margin: 0;
}

.page-promptdemerde__gallery-frame {
  position: relative;
  border-radius: calc(var(--radius-md, 12px) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, #a855f7, #7c3aed 48%, #38bdf8);
  box-shadow:
    0 10px 28px color-mix(in srgb, #6d28d9 22%, transparent),
    0 0 0 1px color-mix(in srgb, #a855f7 16%, transparent);
  transition: box-shadow 0.28s ease;
}

.page-promptdemerde__gallery-item:hover .page-promptdemerde__gallery-frame {
  box-shadow:
    0 14px 36px color-mix(in srgb, #7c3aed 28%, transparent),
    0 0 0 1px color-mix(in srgb, #c084fc 28%, transparent);
}

.page-promptdemerde__gallery-caption {
  margin-top: 0.45rem;
  text-align: center;
  font-size: calc(0.8rem * var(--copy-scale, 1));
  color: var(--text-secondary, #94a3b8);
  line-height: 1.35;
}

html[data-theme="light"] body.page-promptdemerde .page-promptdemerde__gallery-frame {
  box-shadow:
    0 8px 24px color-mix(in srgb, #64748b 16%, transparent),
    0 0 0 1px color-mix(in srgb, #94a3b8 22%, transparent);
}

.page-promptdemerde__showcase-shots {
  display: grid;
  gap: 1.15rem;
}

.page-promptdemerde__shot-card {
  margin: 0;
}

.page-promptdemerde__shot-frame {
  position: relative;
  border-radius: calc(var(--radius-md, 12px) + 4px);
  padding: 3px;
  background: linear-gradient(135deg, #a855f7, #38bdf8 55%, #c084fc);
  box-shadow:
    0 16px 40px color-mix(in srgb, #6d28d9 28%, transparent),
    0 0 0 1px color-mix(in srgb, #a855f7 22%, transparent);
}

.page-promptdemerde__shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  background: #0c0814;
}

.page-promptdemerde__shot-caption {
  margin-top: 0.55rem;
  text-align: center;
  font-size: calc(0.84rem * var(--copy-scale, 1));
  color: var(--text-secondary, #94a3b8);
}

html[data-theme="light"] body.page-promptdemerde .page-promptdemerde__shot-frame {
  box-shadow:
    0 12px 32px color-mix(in srgb, #7c3aed 18%, transparent),
    0 0 0 1px color-mix(in srgb, #7c3aed 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.page-promptdemerde .page-promptdemerde__video-frame-ring,
  body.page-promptdemerde .page-promptdemerde__video-wave-bar {
    animation: none;
  }

  body.page-promptdemerde .page-promptdemerde__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.page-promptdemerde .page-promptdemerde__feature-card:hover,
  body.page-promptdemerde .page-promptdemerde__shot-card:hover .page-promptdemerde__shot-open,
  body.page-promptdemerde .page-promptdemerde__gallery-item:hover .page-promptdemerde__gallery-open {
    transform: none;
  }
}

/* ==========================================================================
   Page projet PoulpyInfoProduit (/prj/poulpyinfoproduit/) — palette teal.
   Palette dédiée ; scope strict body.page-poulpyinfoproduit.
   --piprod-accent-text : libellés/teal lisibles (surtout thème clair).
   ========================================================================== */
body.page-poulpyinfoproduit {
  --piprod-accent: #14b8a6;
  --piprod-accent-soft: #5eead4;
  --piprod-accent-text: #99f6e4;
  --piprod-leaf: #84cc16;
  --piprod-leaf-text: #bef264;
}

html[data-theme="light"] body.page-poulpyinfoproduit {
  --piprod-accent-text: #115e59;
  --piprod-leaf-text: #3f6212;
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--piprod-accent) 16%, transparent);
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-glow--a {
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  top: -14%;
  right: -8%;
  background: color-mix(in srgb, var(--piprod-accent) 42%, transparent);
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-glow--b {
  width: min(40vw, 20rem);
  height: min(40vw, 20rem);
  bottom: -18%;
  left: -8%;
  background: color-mix(in srgb, var(--piprod-leaf) 26%, transparent);
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(color-mix(in srgb, var(--piprod-accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--piprod-accent) 16%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 75% at 72% 38%, #000 20%, transparent 72%);
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-shell {
  position: relative;
  z-index: 1;
}

.page-poulpyinfoproduit__hero-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .page-poulpyinfoproduit__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(44%, 520px));
  }
}

.page-poulpyinfoproduit__hero-copy {
  min-width: 0;
}

.page-poulpyinfoproduit__hero-showcase {
  margin: 0;
  min-width: 0;
}

.page-poulpyinfoproduit__hero-showcase-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--piprod-accent) 22%, var(--border));
  box-shadow:
    0 18px 48px rgba(2, 20, 18, 0.38),
    0 0 0 1px color-mix(in srgb, var(--piprod-accent) 12%, transparent);
}

.page-poulpyinfoproduit__hero-card {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--piprod-accent-text);
  border: 1px solid color-mix(in srgb, var(--piprod-accent-text) 32%, transparent);
  background: color-mix(in srgb, var(--piprod-accent-text) 10%, transparent);
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero-title {
  text-shadow: 0 0 32px color-mix(in srgb, var(--piprod-accent) 26%, transparent);
}

body.page-poulpyinfoproduit .page-poulpyinfoproduit__micro {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  opacity: 0.85;
}

.page-poulpyinfoproduit__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.page-poulpyinfoproduit__feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.page-poulpyinfoproduit__feature-card {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--piprod-accent) 18%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--piprod-accent) 4%);
}

.page-poulpyinfoproduit__procedure {
  --piprod-proc-gap: clamp(1.35rem, 2.5vw, 2rem);
}

.page-poulpyinfoproduit__procedure-grid {
  display: flex;
  flex-direction: column;
  gap: var(--piprod-proc-gap);
}

.page-poulpyinfoproduit__procedure-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-lg, 12px) + 2px);
  border: 1px solid color-mix(in srgb, var(--piprod-accent) 22%, var(--border));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--piprod-accent) 7%, var(--bg-elevated)) 0%,
      color-mix(in srgb, var(--bg-elevated) 96%, transparent) 42%
    );
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--piprod-accent-soft) 18%, transparent) inset,
    0 12px 32px color-mix(in srgb, var(--piprod-accent) 10%, transparent);
}

.page-poulpyinfoproduit__procedure-card-head {
  padding: clamp(1.1rem, 2.5vw, 1.45rem) clamp(1.15rem, 3vw, 1.65rem);
  border-bottom: 1px solid color-mix(in srgb, var(--piprod-accent) 14%, var(--border));
}

.page-poulpyinfoproduit__procedure-card-title {
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  line-height: 1.25;
}

.page-poulpyinfoproduit__procedure-card-desc {
  font-size: calc(0.92rem * var(--copy-scale, 1));
  line-height: 1.55;
  max-width: 52rem;
}

.page-poulpyinfoproduit__procedure-card-summary {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--piprod-accent) 22%, var(--border));
  font-size: calc(0.82rem * var(--copy-scale, 1));
  line-height: 1.45;
  color: color-mix(in srgb, var(--piprod-accent-text) 88%, var(--text-secondary));
}

.page-poulpyinfoproduit__procedure-gallery {
  display: grid;
  gap: clamp(0.65rem, 1.5vw, 0.9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1.1rem, 3vw, 1.55rem) clamp(1.15rem, 2.5vw, 1.45rem);
  background: color-mix(in srgb, var(--piprod-accent) 3%, transparent);
}

@media (min-width: 52rem) {
  .page-poulpyinfoproduit__procedure-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-poulpyinfoproduit__feature-title {
  font-family: var(--font-h);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

@media (min-width: 64rem) {
  .page-poulpyinfoproduit__procedure-card {
    grid-template-columns: minmax(13.5rem, 20rem) minmax(0, 1fr);
    align-items: stretch;
  }

  .page-poulpyinfoproduit__procedure-card-head {
    border-bottom: 0;
    border-inline-end: 1px solid color-mix(in srgb, var(--piprod-accent) 14%, var(--border));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-poulpyinfoproduit__procedure-gallery {
    grid-column: 2;
    align-content: start;
  }
}

.page-poulpyinfoproduit__steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
}

.page-poulpyinfoproduit__step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.page-poulpyinfoproduit__step-num {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-weight: 700;
  color: #042f2e;
  background: var(--piprod-accent);
}

.page-poulpyinfoproduit__step-title {
  font-family: var(--font-sub, var(--font-h));
  font-size: 1.05rem;
  font-weight: 700;
}

.page-poulpyinfoproduit__specs-table {
  display: grid;
  gap: 0;
  max-width: 46rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.page-poulpyinfoproduit__specs-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
}

.page-poulpyinfoproduit__specs-row + .page-poulpyinfoproduit__specs-row {
  border-top: 1px solid var(--border);
}

.page-poulpyinfoproduit__specs-key,
.page-poulpyinfoproduit__specs-val {
  padding: 0.7rem 0.95rem;
}

.page-poulpyinfoproduit__specs-key {
  font-weight: 600;
  background: color-mix(in srgb, var(--piprod-accent) 7%, transparent);
  border-inline-end: 1px solid var(--border);
}

.page-poulpyinfoproduit__specs-val {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.88rem;
}

.page-poulpyinfoproduit__enjeu {
  max-width: 46rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--piprod-leaf) 38%, var(--border));
  background: color-mix(in srgb, var(--piprod-leaf) 8%, transparent);
}

.page-poulpyinfoproduit__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

html[data-theme="light"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__hero {
  border-bottom-color: color-mix(in srgb, #0d9488 22%, transparent);
}

html[data-theme="light"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__ia-action-role {
  background: color-mix(in srgb, var(--piprod-accent-text) 8%, #fff);
  border-color: color-mix(in srgb, var(--piprod-accent-text) 22%, var(--border));
}

html[data-theme="light"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__procedure-card-summary,
html[data-theme="light"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__lightbox-hint {
  color: var(--piprod-accent-text);
}

.page-poulpyinfoproduit__steps-overview {
  margin: 0 0 1.75rem;
  max-width: min(100%, 24rem);
}

.page-poulpyinfoproduit__step-figure,
.page-poulpyinfoproduit__procedure-figure,
.page-poulpyinfoproduit__settings-item {
  margin: 0;
}

.page-poulpyinfoproduit__step-figure {
  margin-top: 1rem;
}

.page-poulpyinfoproduit__shot-card {
  margin: 0;
}

.page-poulpyinfoproduit__shot-frame {
  position: relative;
  max-width: min(100%, 20rem);
  margin-inline: auto;
  border-radius: calc(var(--radius-md, 12px) + 3px);
  padding: 3px;
  background: linear-gradient(135deg, var(--piprod-accent), var(--piprod-leaf, #22c55e) 55%, #0d9488);
  box-shadow:
    0 14px 36px color-mix(in srgb, var(--piprod-accent) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--piprod-accent) 18%, transparent);
}

.page-poulpyinfoproduit__shot-frame--overview {
  max-width: min(100%, 22rem);
}

.page-poulpyinfoproduit__shot-frame--compact {
  max-width: min(100%, 16rem);
}

.page-poulpyinfoproduit__shot-frame--gallery {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding: 2px;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--piprod-accent) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--piprod-accent) 12%, transparent);
}

.page-poulpyinfoproduit__shot-frame--gallery .page-poulpyinfoproduit__shot-viewport {
  max-height: min(13.5rem, 34vh);
  aspect-ratio: 10 / 15;
  overflow: hidden;
}

.page-poulpyinfoproduit__shot-frame--gallery .page-poulpyinfoproduit__shot-viewport::after {
  height: 32%;
  opacity: 0.92;
}

.page-poulpyinfoproduit__shot-step {
  position: absolute;
  top: 0.42rem;
  inset-inline-start: 0.42rem;
  z-index: 3;
  max-width: calc(100% - 2.5rem);
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  font-size: calc(0.62rem * var(--copy-scale, 1));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #ecfeff;
  background: color-mix(in srgb, #042f2e 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--piprod-accent-soft) 40%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, #000 28%, transparent);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-expand-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  font-size: calc(0.64rem * var(--copy-scale, 1));
  padding: 0.22rem 0.55rem;
}

.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:hover .page-poulpyinfoproduit__shot-expand-hint,
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-open:focus-visible .page-poulpyinfoproduit__shot-expand-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-open::before {
  opacity: 0;
}

.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:hover .page-poulpyinfoproduit__shot-open::before,
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-open:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:nth-child(6n + 1) { --piprod-reveal-delay: 0.02s; }
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:nth-child(6n + 2) { --piprod-reveal-delay: 0.05s; }
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:nth-child(6n + 3) { --piprod-reveal-delay: 0.08s; }
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:nth-child(6n + 4) { --piprod-reveal-delay: 0.11s; }
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:nth-child(6n + 5) { --piprod-reveal-delay: 0.14s; }
.page-poulpyinfoproduit__procedure-gallery .page-poulpyinfoproduit__shot-card:nth-child(6n + 6) { --piprod-reveal-delay: 0.17s; }

.page-poulpyinfoproduit__shot-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: inherit;
  position: relative;
  text-align: start;
  transition: transform 0.28s var(--ease-choreography, ease);
}

.page-poulpyinfoproduit__shot-viewport {
  display: block;
  position: relative;
  max-height: min(18rem, 46vh);
  overflow: hidden;
  border-radius: var(--radius-md, 12px);
  background: #071412;
}

.page-poulpyinfoproduit__shot-frame--overview .page-poulpyinfoproduit__shot-viewport {
  max-height: min(20rem, 50vh);
}

.page-poulpyinfoproduit__shot-frame--compact .page-poulpyinfoproduit__shot-viewport {
  max-height: min(14rem, 38vh);
}

.page-poulpyinfoproduit__shot-viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, #071412 88%, var(--piprod-accent) 12%));
  pointer-events: none;
}

.page-poulpyinfoproduit__shot-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
  object-position: top center;
}

.page-poulpyinfoproduit__shot-expand-hint {
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  z-index: 1;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: calc(0.72rem * var(--copy-scale, 1));
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ecfeff;
  background: color-mix(in srgb, #042f2e 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--piprod-accent-soft) 42%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, #000 32%, transparent);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.page-poulpyinfoproduit__shot-open::before {
  content: "";
  position: absolute;
  inset: auto 0.55rem 0.55rem auto;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  background: color-mix(in srgb, #042f2e 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--piprod-accent-soft) 38%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccfbf1' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.05rem;
}

.page-poulpyinfoproduit__shot-card:hover .page-poulpyinfoproduit__shot-open {
  transform: scale(1.012);
}

.page-poulpyinfoproduit__shot-card:hover .page-poulpyinfoproduit__shot-open::before {
  opacity: 1;
  transform: scale(1);
}

.page-poulpyinfoproduit__shot-open:focus-visible {
  outline: 2px solid var(--piprod-accent-soft);
  outline-offset: 3px;
}

.page-poulpyinfoproduit__shot-caption {
  margin-top: 0.5rem;
  font-size: calc(0.84rem * var(--copy-scale, 1));
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}

.page-poulpyinfoproduit__procedure-caption {
  grid-column: 1 / -1;
  text-align: start;
}

.page-poulpyinfoproduit__reveal {
  opacity: 0;
  transform: translateY(1.1rem);
  transition:
    opacity 0.55s var(--ease-choreography, ease),
    transform 0.55s var(--ease-choreography, ease);
  transition-delay: var(--piprod-reveal-delay, 0s);
}

.page-poulpyinfoproduit__reveal.is-in-view {
  opacity: 1;
  transform: none;
}

.page-poulpyinfoproduit__lightbox[hidden] {
  display: none;
}

.page-poulpyinfoproduit__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.5vw, 0.75rem);
}

.page-poulpyinfoproduit__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #021210 74%, transparent);
  backdrop-filter: blur(8px);
}

.page-poulpyinfoproduit__lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(98vw, 1440px);
  max-width: 98vw;
  max-height: 98vh;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: calc(var(--radius-md, 12px) + 6px);
  border: 1px solid color-mix(in srgb, var(--piprod-accent) 32%, transparent);
  background: color-mix(in srgb, #042f2e 92%, var(--bg-elevated) 8%);
  box-shadow: 0 28px 64px color-mix(in srgb, #000 48%, transparent);
}

.page-poulpyinfoproduit__lightbox-close {
  position: sticky;
  top: 0.65rem;
  float: right;
  z-index: 2;
  margin: 0.65rem 0.65rem 0 0;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--piprod-accent-soft) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #042f2e 88%, transparent);
  color: #ecfeff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.page-poulpyinfoproduit__lightbox-close:hover {
  background: color-mix(in srgb, var(--piprod-accent) 42%, #042f2e);
  border-color: color-mix(in srgb, var(--piprod-accent-soft) 55%, transparent);
}

.page-poulpyinfoproduit__lightbox-figure {
  margin: 0;
  padding: 0 0.5rem 0.65rem;
  clear: both;
}

.page-poulpyinfoproduit__lightbox-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  background: #071412;
  object-fit: contain;
  object-position: top center;
}

.page-poulpyinfoproduit__lightbox-caption {
  margin-top: 0.65rem;
  text-align: center;
  font-size: calc(0.86rem * var(--copy-scale, 1));
  color: var(--text-secondary, #94a3b8);
}

.page-poulpyinfoproduit__lightbox-hint {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: calc(0.78rem * var(--copy-scale, 1));
  color: color-mix(in srgb, var(--piprod-accent-text) 80%, var(--text-secondary));
}

body.page-poulpyinfoproduit--lightbox-open {
  overflow: hidden;
}

@media (min-width: 960px) {
  .page-poulpyinfoproduit__steps-list {
    max-width: none;
    gap: 1rem;
  }

  .page-poulpyinfoproduit__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1.25rem;
    align-items: start;
    padding: 1.15rem 1.25rem;
  }

  .page-poulpyinfoproduit__step-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(16rem, 34%);
    gap: 0.35rem 1.35rem;
    align-items: start;
  }

  .page-poulpyinfoproduit__step-body > .page-poulpyinfoproduit__step-title,
  .page-poulpyinfoproduit__step-body > p {
    grid-column: 1;
  }

  .page-poulpyinfoproduit__step-figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .page-poulpyinfoproduit__steps-overview {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-poulpyinfoproduit .page-poulpyinfoproduit__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.page-poulpyinfoproduit .page-poulpyinfoproduit__shot-card:hover .page-poulpyinfoproduit__shot-open {
    transform: none;
  }
}

html[data-theme="light"] body.page-poulpyinfoproduit .page-poulpyinfoproduit__shot-frame {
  box-shadow:
    0 10px 28px color-mix(in srgb, #0d9488 16%, transparent),
    0 0 0 1px color-mix(in srgb, #0d9488 12%, transparent);
}

html[data-theme="light"] .page-poulpyinfoproduit__lightbox-dialog {
  background: color-mix(in srgb, #f0fdfa 88%, #fff 12%);
  border-color: color-mix(in srgb, #0d9488 24%, transparent);
}

.page-poulpyinfoproduit__procedure-figure {
  margin: 0;
  min-width: 0;
}

.page-poulpyinfoproduit__settings {
  --piprod-settings-gap: clamp(1rem, 2vw, 1.35rem);
}

.page-poulpyinfoproduit__settings-grid {
  display: grid;
  gap: var(--piprod-settings-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

@media (min-width: 52rem) {
  .page-poulpyinfoproduit__settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-poulpyinfoproduit__settings-item {
  margin: 0;
}

.page-poulpyinfoproduit__settings-item .page-poulpyinfoproduit__shot-frame--compact {
  max-width: none;
}

.page-poulpyinfoproduit__ia-provider-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.page-poulpyinfoproduit__ia-card {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--piprod-accent) 16%, var(--border));
  background: color-mix(in srgb, var(--piprod-accent) 5%, transparent);
}

.page-poulpyinfoproduit__ia-card--accent {
  border-color: color-mix(in srgb, var(--piprod-leaf, #22c55e) 32%, var(--border));
  background: color-mix(in srgb, var(--piprod-leaf, #22c55e) 7%, transparent);
}

.page-poulpyinfoproduit__ia-card-title {
  font-family: var(--font-sub, var(--font-h));
  font-size: 1rem;
  font-weight: 700;
}

.page-poulpyinfoproduit__ia-panel {
  padding: 1.15rem 1.2rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--piprod-accent) 22%, var(--border));
  background: color-mix(in srgb, var(--piprod-accent) 8%, transparent);
}

.page-poulpyinfoproduit__ia-list {
  margin: 0;
  padding-inline-start: 1.15rem;
  display: grid;
  gap: 0.45rem;
}

.page-poulpyinfoproduit__ia-list li {
  color: var(--text-secondary, #94a3b8);
}

.page-poulpyinfoproduit__ia-mono {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.86rem;
  line-height: 1.45;
}

.page-poulpyinfoproduit__ia-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-width: 42rem;
}

.page-poulpyinfoproduit__ia-action {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--piprod-accent) 4%, transparent);
  min-width: 0;
}

.page-poulpyinfoproduit__ia-action-label {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-poulpyinfoproduit__ia-action-role {
  flex: 0 0 auto;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  color: var(--piprod-accent-text);
  background: color-mix(in srgb, var(--piprod-accent-text) 10%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--piprod-accent-text) 28%, var(--border));
}

/* --------------------------------------------------------------------------
   Page projet MyTubeLand (/prj/mytubeland/) — index local YouTube, accent rouge.
   Scope strict body.page-mytubeland.
   -------------------------------------------------------------------------- */

body.page-mytubeland {
  --tl-accent: #ff0033;
  --tl-accent-text: #ff4d6d;
  --tl-accent-soft: color-mix(in srgb, #ff0033 22%, transparent);
  --tl-surface: #120608;
  --tl-surface-alt: #1a0a0c;
  --tl-card-bg: color-mix(in srgb, var(--tl-surface-alt) 88%, var(--bg));
  --tl-card-border: color-mix(in srgb, var(--tl-accent) 18%, transparent);
  --tl-pipeline-bg: color-mix(in srgb, var(--tl-surface-alt) 75%, transparent);
  --tl-specs-bg: color-mix(in srgb, var(--tl-surface-alt) 60%, transparent);
  --tl-kicker-color: var(--tl-accent-text);
  --tl-specs-key-color: var(--tl-accent-text);
  --tl-pipeline-num-bg: color-mix(in srgb, var(--tl-accent) 25%, transparent);
  --tl-pipeline-num-color: var(--tl-accent-text);
}

body.page-mytubeland .page-mytubeland__hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background: radial-gradient(ellipse 90% 70% at 20% 0%, var(--tl-accent-soft), transparent 55%),
    linear-gradient(180deg, var(--tl-surface) 0%, var(--bg) 100%);
}

body.page-mytubeland .page-mytubeland__hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

body.page-mytubeland .page-mytubeland__hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}

body.page-mytubeland .page-mytubeland__hero-glow--a {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -80px;
  background: #ff0033;
}

body.page-mytubeland .page-mytubeland__hero-glow--b {
  width: 320px;
  height: 320px;
  bottom: -80px;
  right: 10%;
  background: #cc0029;
  opacity: 0.22;
}

body.page-mytubeland .page-mytubeland__hero-shell {
  position: relative;
  z-index: 1;
}

.page-mytubeland__hero-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .page-mytubeland__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(44%, 520px));
  }
}

body.page-mytubeland .page-mytubeland__kicker {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-kicker-color);
}

body.page-mytubeland .page-mytubeland__micro {
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  opacity: 0.88;
}

.page-mytubeland__hero-showcase-frame {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 18px 48px color-mix(in srgb, #000 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tl-accent) 35%, transparent);
}

.page-mytubeland__hero-card {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.page-mytubeland__feature-grid,
.page-mytubeland__use-cases-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.page-mytubeland__feature-card,
.page-mytubeland__use-case-card {
  padding: 1.1rem 1.15rem;
  border-radius: 10px;
  background: var(--tl-card-bg);
  border: 1px solid var(--tl-card-border);
}

.page-mytubeland__feature-title,
.page-mytubeland__use-case-title {
  font-family: var(--font-sub);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.45rem;
  color: var(--text);
}

.page-mytubeland__bullet-list {
  margin: 0;
  padding-left: 1.25rem;
  max-width: 42rem;
}

.page-mytubeland__bullet-list li + li {
  margin-top: 0.45rem;
}

.page-mytubeland__screenshots-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.page-mytubeland__shot-frame {
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow:
    0 12px 32px color-mix(in srgb, #000 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tl-accent) 22%, transparent);
}

.page-mytubeland__shot-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  transition: transform 0.28s var(--ease-choreography, ease);
}

.page-mytubeland__shot-open::after {
  content: "";
  position: absolute;
  inset: auto 0.55rem 0.55rem auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, #0a0a0a 72%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.05rem;
}

.page-mytubeland__screenshot-item:hover .page-mytubeland__shot-open {
  transform: scale(1.012);
}

.page-mytubeland__screenshot-item:hover .page-mytubeland__shot-open::after {
  opacity: 1;
  transform: scale(1);
}

.page-mytubeland__shot-open:focus-visible {
  outline: 2px solid var(--tl-accent-text);
  outline-offset: 3px;
}

.page-mytubeland__shot-img {
  display: block;
  width: 100%;
  height: auto;
}

.page-mytubeland__shot-caption {
  margin-top: 0.55rem;
  font-size: calc(0.85rem * var(--copy-scale));
  color: var(--text-secondary, var(--text));
  opacity: 0.9;
}

.page-mytubeland__pipeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 44rem;
}

.page-mytubeland__pipeline-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: var(--tl-pipeline-bg);
  border-left: 3px solid var(--tl-accent);
  color: var(--text);
}

.page-mytubeland__pipeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--tl-pipeline-num-bg);
  color: var(--tl-pipeline-num-color);
}

.page-mytubeland__specs-table {
  display: grid;
  gap: 0;
  max-width: 52rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.page-mytubeland__specs-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--tl-specs-bg);
  color: var(--text);
}

.page-mytubeland__specs-row + .page-mytubeland__specs-row {
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.page-mytubeland__specs-key {
  font-weight: 600;
  color: var(--tl-specs-key-color);
  font-size: 0.92rem;
}

.page-mytubeland__specs-val {
  font-size: calc(0.92rem * var(--copy-scale));
  line-height: 1.45;
}

.page-mytubeland__limits {
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

body.page-mytubeland .page-mytubeland__hero-actions,
body.page-mytubeland .page-mytubeland__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

body.page-mytubeland .page-mytubeland__hero-actions {
  justify-content: flex-start;
}

body.page-mytubeland .page-mytubeland__cta-actions {
  justify-content: center;
}

body.page-mytubeland .page-mytubeland__github-soon {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fecaca;
  background: color-mix(in srgb, var(--tl-accent) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--tl-accent) 42%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tl-accent) 18%, transparent);
}

body.page-mytubeland .page-mytubeland__github-notice {
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, var(--tl-accent) 26%, transparent);
  background: color-mix(in srgb, var(--tl-accent) 10%, transparent);
}

body.page-mytubeland .page-mytubeland__github-btn--pending:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.88);
  pointer-events: none;
  box-shadow: none;
}

.page-mytubeland__cta-panel {
  max-width: 44rem;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border-radius: calc(var(--radius-md, 12px) + 4px);
  border: 1px solid color-mix(in srgb, var(--tl-accent) 24%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--tl-accent) 5%);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--tl-accent) 18%, transparent);
}

.page-mytubeland__cta-panel {
  max-width: 48rem;
  margin-inline: auto;
}

.page-mytubeland__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

html[data-theme="light"] body.page-mytubeland {
  --tl-accent: #b91c1c;
  --tl-accent-text: #991b1b;
  --tl-accent-soft: color-mix(in srgb, #fecaca 62%, transparent);
  --tl-surface: #fffafa;
  --tl-surface-alt: #ffffff;
  --tl-card-bg: color-mix(in srgb, var(--bg-elevated) 98%, #fee2e2 2%);
  --tl-card-border: color-mix(in srgb, #b91c1c 22%, var(--border));
  --tl-pipeline-bg: color-mix(in srgb, var(--bg-elevated) 97%, #fecaca 3%);
  --tl-specs-bg: color-mix(in srgb, var(--bg-elevated) 95%, #f3f4f6 5%);
  --tl-kicker-color: #991b1b;
  --tl-specs-key-color: #991b1b;
  --tl-pipeline-num-bg: #b91c1c;
  --tl-pipeline-num-color: #ffffff;
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__hero {
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, color-mix(in srgb, #fecaca 45%, transparent), transparent 55%),
    linear-gradient(180deg, #fffafa 0%, var(--bg) 100%);
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__hero-glow--a {
  background: color-mix(in srgb, #fca5a5 38%, transparent);
  opacity: 0.28;
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__hero-glow--b {
  background: color-mix(in srgb, #fda4af 28%, transparent);
  opacity: 0.2;
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__hero-title {
  text-shadow: none;
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__hero-showcase-frame {
  box-shadow:
    0 14px 36px color-mix(in srgb, #991b1b 14%, transparent),
    0 0 0 1px color-mix(in srgb, #b91c1c 18%, transparent);
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__feature-card,
html[data-theme="light"] body.page-mytubeland .page-mytubeland__use-case-card {
  background: var(--tl-card-bg);
  border-color: var(--tl-card-border);
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__pipeline-step {
  border-left-color: #b91c1c;
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__specs-table {
  border-color: color-mix(in srgb, #b91c1c 16%, var(--border));
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__limits {
  border-top-color: color-mix(in srgb, var(--text) 12%, transparent);
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__github-soon {
  color: #991b1b;
  background: color-mix(in srgb, #fecaca 55%, #fffafa 45%);
  border-color: color-mix(in srgb, #b91c1c 35%, transparent);
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__github-notice {
  border-color: color-mix(in srgb, #b91c1c 22%, transparent);
  background: color-mix(in srgb, #fee2e2 70%, transparent);
}

html[data-theme="light"] .page-mytubeland__cta-panel {
  background: color-mix(in srgb, #fffafa 78%, #fff 22%);
  border-color: color-mix(in srgb, #b91c1c 18%, transparent);
}

html[data-theme="light"] body.page-mytubeland .page-mytubeland__shot-frame {
  box-shadow:
    0 10px 28px color-mix(in srgb, #000 16%, transparent),
    0 0 0 1px color-mix(in srgb, #b91c1c 16%, transparent);
}

.page-mytubeland__lightbox[hidden] {
  display: none;
}

.page-mytubeland__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
}

.page-mytubeland__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #0a0406 74%, transparent);
  backdrop-filter: blur(8px);
}

.page-mytubeland__lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 76rem);
  max-height: min(92vh, 54rem);
  overflow: auto;
  border-radius: calc(var(--radius-md, 12px) + 6px);
  border: 1px solid color-mix(in srgb, var(--tl-accent) 32%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--tl-surface-alt) 6%);
  box-shadow: 0 28px 64px color-mix(in srgb, #000 48%, transparent);
}

.page-mytubeland__lightbox-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--tl-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.page-mytubeland__lightbox-close:hover {
  background: color-mix(in srgb, var(--tl-accent) 18%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--tl-accent) 45%, transparent);
}

.page-mytubeland__lightbox-theme {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--tl-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  color: var(--text);
  font-family: var(--font-matrix-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-mytubeland__lightbox-theme:hover {
  background: color-mix(in srgb, var(--tl-accent) 16%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--tl-accent) 45%, transparent);
}

.page-mytubeland__lightbox-figure {
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

.page-mytubeland__lightbox-figure--dual {
  cursor: pointer;
}

.page-mytubeland__lightbox-figure--dual .page-mytubeland__lightbox-img {
  cursor: pointer;
}

.page-mytubeland__lightbox-hint {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: calc(0.78rem * var(--copy-scale, 1));
  color: var(--text-secondary, var(--text));
  opacity: 0.82;
}

.page-mytubeland__lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  background: #0a0a0a;
}

.page-mytubeland__lightbox-caption {
  margin-top: 0.65rem;
  text-align: center;
  font-size: calc(0.86rem * var(--copy-scale, 1));
  color: var(--text-secondary, var(--text));
}

body.page-mytubeland--lightbox-open {
  overflow: hidden;
}

html[data-theme="light"] .page-mytubeland__lightbox-dialog {
  border-color: color-mix(in srgb, #b91c1c 24%, var(--border));
  background: color-mix(in srgb, #fff 96%, #fee2e2 4%);
}

html[data-theme="light"] .page-mytubeland__lightbox-close {
  color: #991b1b;
  border-color: color-mix(in srgb, #b91c1c 28%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
  .page-mytubeland__shot-open,
  .page-mytubeland__shot-open::after {
    transition: none;
  }

  .page-mytubeland__screenshot-item:hover .page-mytubeland__shot-open {
    transform: none;
  }
}