:root {
  --pt-bg: #05070c;
  --pt-bg-deep: #030406;
  --pt-bg-soft: #080d16;

  --pt-panel: #0b0f18;
  --pt-panel-2: #101725;

  --pt-blue-deep: #07111f;
  --pt-blue-panel: #0b1220;

  --pt-text: #f3eee5;
  --pt-muted: #b9aea3;

  --pt-red: #661919;
  --pt-red-2: #7a2020;

  --pt-red-action: #661919;
  --pt-red-action-hover: #7a2020;
  --pt-red-action-active: #4f1212;
  --pt-red-action-soft: rgba(102, 25, 25, .18);
  --pt-red-action-border: rgba(255, 255, 255, .14);

  --pt-line: rgba(255, 255, 255, .14);
  --pt-max: 1180px;

  --pt-serif: Georgia, "Times New Roman", serif;
  --pt-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--pt-bg);
  color: var(--pt-text);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--pt-sans);
  background:
    radial-gradient(circle at 18% 0%, rgba(102, 25, 25, .26), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(7, 17, 31, .92), transparent 42%),
    linear-gradient(180deg, #05070c 0%, #030406 52%, #07111f 100%);
}

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

img,
picture,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

img,
picture,
video,
svg {
  display: block;
}

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

h1,
h2,
h3,
h4,
p,
a,
span {
  overflow-wrap: break-word;
}

.pt-eyebrow {
  margin: 0 0 .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pt-red-2);
  font-size: .74rem;
  font-weight: 800;
}

.pt-section-head {
  max-width: var(--pt-max);
  margin: 0 auto 1.35rem;
  padding: 0 24px;
}

.pt-section-head h2 {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 4.5vw, 4.4rem);
  line-height: .98;
  margin: 0 0 .8rem;
}

.pt-section-head p {
  max-width: 760px;
  color: var(--pt-muted);
  line-height: 1.65;
}

.pt-section-head.is-centered {
  text-align: center;
}

.pt-section-head.is-centered p {
  margin-left: auto;
  margin-right: auto;
}

.pt-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.pt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 3px;
  border: 1px solid var(--pt-line);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.pt-button--primary {
  background: var(--pt-red-action);
  border-color: var(--pt-red-action-border);
  color: #fff8ec;
}

.pt-button--primary:hover {
  background: var(--pt-red-action-hover);
  border-color: rgba(255, 255, 255, .22);
  color: #fff8ec;
  transform: translateY(-1px);
}

.pt-button--primary:active {
  background: var(--pt-red-action-active);
  transform: translateY(0);
}

.pt-button--secondary {
  background: rgba(3, 4, 6, .25);
}

.pt-link {
  display: inline-block;
  color: var(--pt-red-2);
  font-weight: 800;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
}

/* =========================================================
   Paris T’aime — Boutons principaux globaux
   Rouge institutionnel sombre : #661919

   But :
   - harmoniser les boutons principaux du site ;
   - ne pas toucher aux boutons ghost / secondary ;
   - garder les composants isolés.
   ========================================================= */

:is(
  .pt-button--primary,
  .pt-site-hero__button,
  .pt-page-hero__button,
  .pt-page-parallax-hero__button,
  .pt-hero-quartier__button,
  .pt-hero-univers__button,
  .pt-hero-visage__button
):not(
  .pt-button--ghost,
  .pt-button--secondary,
  .pt-site-hero__button--ghost,
  .pt-site-hero__button--secondary,
  .pt-page-hero__button--ghost,
  .pt-page-hero__button--secondary,
  .pt-page-parallax-hero__button--ghost,
  .pt-page-parallax-hero__button--secondary,
  .pt-hero-quartier__button--ghost,
  .pt-hero-quartier__button--secondary,
  .pt-hero-univers__button--ghost,
  .pt-hero-univers__button--secondary,
  .pt-hero-visage__button--ghost,
  .pt-hero-visage__button--secondary
) {
  background: var(--pt-red-action);
  border-color: var(--pt-red-action-border);
  color: #fff8ec;
}

:is(
  .pt-button--primary,
  .pt-site-hero__button,
  .pt-page-hero__button,
  .pt-page-parallax-hero__button,
  .pt-hero-quartier__button,
  .pt-hero-univers__button,
  .pt-hero-visage__button
):not(
  .pt-button--ghost,
  .pt-button--secondary,
  .pt-site-hero__button--ghost,
  .pt-site-hero__button--secondary,
  .pt-page-hero__button--ghost,
  .pt-page-hero__button--secondary,
  .pt-page-parallax-hero__button--ghost,
  .pt-page-parallax-hero__button--secondary,
  .pt-hero-quartier__button--ghost,
  .pt-hero-quartier__button--secondary,
  .pt-hero-univers__button--ghost,
  .pt-hero-univers__button--secondary,
  .pt-hero-visage__button--ghost,
  .pt-hero-visage__button--secondary
):hover {
  background: var(--pt-red-action-hover);
  border-color: rgba(255, 255, 255, .22);
  color: #fff8ec;
}

:is(
  .pt-button--primary,
  .pt-site-hero__button,
  .pt-page-hero__button,
  .pt-page-parallax-hero__button,
  .pt-hero-quartier__button,
  .pt-hero-univers__button,
  .pt-hero-visage__button
):not(
  .pt-button--ghost,
  .pt-button--secondary,
  .pt-site-hero__button--ghost,
  .pt-site-hero__button--secondary,
  .pt-page-hero__button--ghost,
  .pt-page-hero__button--secondary,
  .pt-page-parallax-hero__button--ghost,
  .pt-page-parallax-hero__button--secondary,
  .pt-hero-quartier__button--ghost,
  .pt-hero-quartier__button--secondary,
  .pt-hero-univers__button--ghost,
  .pt-hero-univers__button--secondary,
  .pt-hero-visage__button--ghost,
  .pt-hero-visage__button--secondary
):active {
  background: var(--pt-red-action-active);
}

:is(
  .pt-button--primary,
  .pt-site-hero__button,
  .pt-page-hero__button,
  .pt-page-parallax-hero__button,
  .pt-hero-quartier__button,
  .pt-hero-univers__button,
  .pt-hero-visage__button
):focus-visible {
  outline: 2px solid rgba(255, 248, 236, .72);
  outline-offset: 3px;
}

/* =========================================================
   Paris T’aime — Boutons secondaires / ghost
   On garde ces boutons sobres pour ne pas tout rendre rouge.
   ========================================================= */

:is(
  .pt-button--secondary,
  .pt-button--ghost,
  .pt-site-hero__button--ghost,
  .pt-site-hero__button--secondary,
  .pt-page-hero__button--ghost,
  .pt-page-hero__button--secondary,
  .pt-page-parallax-hero__button--ghost,
  .pt-page-parallax-hero__button--secondary,
  .pt-hero-quartier__button--ghost,
  .pt-hero-quartier__button--secondary,
  .pt-hero-univers__button--ghost,
  .pt-hero-univers__button--secondary,
  .pt-hero-visage__button--ghost,
  .pt-hero-visage__button--secondary
) {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 248, 236, .88);
}

:is(
  .pt-button--secondary,
  .pt-button--ghost,
  .pt-site-hero__button--ghost,
  .pt-site-hero__button--secondary,
  .pt-page-hero__button--ghost,
  .pt-page-hero__button--secondary,
  .pt-page-parallax-hero__button--ghost,
  .pt-page-parallax-hero__button--secondary,
  .pt-hero-quartier__button--ghost,
  .pt-hero-quartier__button--secondary,
  .pt-hero-univers__button--ghost,
  .pt-hero-univers__button--secondary,
  .pt-hero-visage__button--ghost,
  .pt-hero-visage__button--secondary
):hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .24);
  color: #fff8ec;
}
/* =========================================================
   Paris T’aime — Scrollbars globales
   Rouge principal : #661919
   ========================================================= */

:root {
  --pt-scrollbar-track: rgba(255, 255, 255, .08);
  --pt-scrollbar-thumb: #661919;
  --pt-scrollbar-thumb-hover: #7a2020;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pt-scrollbar-thumb) var(--pt-scrollbar-track);
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--pt-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--pt-scrollbar-thumb);
  border-radius: 3px;
  border: 2px solid #05070c;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pt-scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: #05070c;
}

/* Rails horizontaux du site */
.pt-carousel-rail__track::-webkit-scrollbar,
.pt-quartier-rail__track::-webkit-scrollbar,
.pt-univers-video-rail__track::-webkit-scrollbar {
  height: 8px;
}

.pt-carousel-rail__track::-webkit-scrollbar-track,
.pt-quartier-rail__track::-webkit-scrollbar-track,
.pt-univers-video-rail__track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .07);
}

.pt-carousel-rail__track::-webkit-scrollbar-thumb,
.pt-quartier-rail__track::-webkit-scrollbar-thumb,
.pt-univers-video-rail__track::-webkit-scrollbar-thumb {
  background: #661919;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .08);
}

.pt-carousel-rail__track::-webkit-scrollbar-thumb:hover,
.pt-quartier-rail__track::-webkit-scrollbar-thumb:hover,
.pt-univers-video-rail__track::-webkit-scrollbar-thumb:hover {
  background: #7a2020;
}