/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — direction artistique du hero.
   Noir obsidienne, argent chrome, or champagne. Aucun rouge.
   La structure Framer est conservée, seule l'apparence change.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pzh-noir: #050506;
  --pzh-noir-2: #08080a;
  --pzh-argent-clair: #E4E4E2;
  --pzh-argent: #BFC0C2;
  --pzh-argent-sombre: #8E9195;
  --pzh-or: #C8A96A;
  --pzh-or-clair: #E4C88C;
  --pzh-or-pale: #F1DDAA;
  --pzh-blanc: #F5F3EE;
}

/* ── le rouge du gabarit ne doit jamais être peint, même une frame ──
   Ces règles arrivent avec la feuille de style, donc avant tout script.
   Elles sont volontairement placées en tête : les règles plus bas
   (cubes, icône du bouton, anneaux d'avatars) reprennent la main ensuite. */
.framer-1tsekz, .framer-eklqqa, .framer-1x9hvkv,
.framer-3F17d.framer-1k80dkf, .framer-8GqL3.framer-gtldxg {
  background-color: transparent !important;
  background-image: none !important;
}
/* le pictogramme du bouton est blanc dans la version finale : autant l'être tout de suite */
.framer-8GqL3.framer-1k79u1c { background-color: #FFFFFF !important; }
/* les anneaux des avatars : du métal tout de suite, plus de bordure rouge */
.framer-1xquod3, .framer-1xquod3 * { border-color: transparent !important; }
/* l'anneau rouge est dessiné DANS le fichier image : on agrandit la photo et
   on la masque au disque, puis on redessine l'anneau en ombre, qui elle
   n'est pas rognée par le masque. */
.framer-1xquod3 img, .pzh-av-img { border-radius: 50% !important; }


/* ── fond : on éteint le rouge du gabarit ────────────────────── */
/* Le hero doit rogner sa propre décoration : l'arc du bas débordait de
   400 px et venait poser un trait doré en travers du logo de la vitrine. */
.framer-1xywj4y { background: var(--pzh-noir) !important; position: relative; overflow: hidden !important; }
.framer-1xywj4y [data-framer-name="BG"],
.framer-1xywj4y [data-framer-name="Overly"],
.framer-1xywj4y [data-framer-name="Ellipse 1"] {
  filter: grayscale(1) brightness(.34) contrast(1.15) !important;
  opacity: .5 !important;
}

/* nos propres matières : arcs chromés et halos champagne, hors cadre */
.pzh-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pzh-fond i { position: absolute; display: block; border-radius: 50%; }
.pzh-arc {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--pzh-noir), var(--pzh-noir)) padding-box,
    conic-gradient(from 210deg, transparent 0deg, rgba(228,228,226,.34) 42deg,
      rgba(241,221,170,.5) 78deg, rgba(143,145,149,.2) 120deg, transparent 180deg) border-box;
  opacity: .5;
}
.pzh-arc-1 { width: 190vw; height: 190vw; left: -66vw; top: -96vw; }
.pzh-arc-2 { width: 120vw; height: 120vw; right: -62vw; bottom: -46vw; opacity: .26; }
.pzh-halo-or { width: 88vw; height: 88vw; left: 42%; top: -18%;
  background: radial-gradient(circle, rgba(200,169,106,.2), transparent 66%); filter: blur(60px); }
.pzh-halo-argent { width: 72vw; height: 72vw; left: -26%; top: 34%;
  background: radial-gradient(circle, rgba(191,192,194,.14), transparent 68%); filter: blur(70px); }
/* Les traits diagonaux passaient en travers du logo PROJECT ZERO.
   On garde seulement celui du bas, en argent très discret. */
.pzh-trait { position: absolute; height: 1px; width: 150%; left: -25%;
  background: linear-gradient(90deg, transparent, rgba(228,228,226,.18), transparent);
  border-radius: 0; }
.pzh-trait-1 { display: none; }
.pzh-trait-2 { top: 70%; transform: rotate(9deg); opacity: .4; }
/* grain cinéma, très léger */
.pzh-grain { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.framer-1xywj4y > *:not(.pzh-fond):not(.pzh-grain) { position: relative; z-index: 2; }

.pzh-bloc-titre {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; width: 100% !important; max-width: none !important;
}
.pzh-bloc-titre > h1 { width: 100% !important; max-width: none !important; }

/* ── le label éditorial ──────────────────────────────────────── */
.pzh-label { margin: 0 0 clamp(20px, 4.4vw, 30px); opacity: 0; transform: translateY(10px); }
.pzh-label.vu { opacity: 1; transform: none; transition: opacity .9s ease .15s, transform .9s cubic-bezier(.16,1,.3,1) .15s; }
.pzh-label b { display: block; width: 34px; height: 1px; margin: 0 0 14px;
  background: linear-gradient(90deg, var(--pzh-or), transparent); }
.pzh-label span { display: block; font-family: "DM Sans", system-ui, sans-serif; font-weight: 500;
  font-size: clamp(9.5px, 2.5vw, 11px); letter-spacing: .28em; text-transform: uppercase;
  color: var(--pzh-or-clair); line-height: 1.85; }

/* ── le titre, chrome puis champagne ─────────────────────────── */
h1.framer-styles-preset-45m7y9 { position: relative; }
.pzh-argent, .pzh-doré {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; background-size: 100% 100%;
}
.pzh-argent {
  background-image: linear-gradient(168deg, #8E9195 0%, #FFFFFF 26%, #E4E4E2 48%, #9FA2A6 70%, #F2F2F0 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.14));
}
.pzh-doré {
  background-image: linear-gradient(168deg, #9A7F45 0%, #E4C88C 24%, #F7EDD6 46%, #C8A96A 68%, #EBD6A6 100%);
  filter: drop-shadow(0 1px 0 rgba(241,221,170,.16));
}
/* le reflet qui traverse une seule fois à l'arrivée */

/* ── le bouton ───────────────────────────────────────────────── */
a.framer-p8u0hc {
  position: relative !important; overflow: visible !important;
  border-radius: 999px !important; min-height: 52px !important;
  background: linear-gradient(180deg, rgba(24,24,27,.86), rgba(8,8,10,.92)) !important;
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 46px rgba(0,0,0,.6) !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s !important;
}
a.framer-p8u0hc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1;
  background: linear-gradient(122deg, var(--pzh-argent-clair), var(--pzh-or-clair) 46%, var(--pzh-argent-sombre));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
a.framer-p8u0hc::after {                        /* halo champagne diffus derrière */
  content: ""; position: absolute; inset: -18px; border-radius: 999px; z-index: -1;
  background: radial-gradient(closest-side, rgba(200,169,106,.3), transparent 72%);
  filter: blur(16px); pointer-events: none;
}
/* La pastille du bouton : argent chromé, et plus rien à l'intérieur. */
a.framer-p8u0hc .framer-1321g9e {
  background: linear-gradient(146deg, #EFEFEE 0%, #C2C4C7 20%, #83878C 52%, #D9DADB 74%, #6E7276 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.5),
              0 1px 0 rgba(255,255,255,.85) inset,
              0 -1px 0 rgba(0,0,0,.24) inset !important;
}
/* L'icône revient dans la pastille, en blanc. Un liseré sombre très fin
   la détache du chrome, sinon le blanc sur blanc devient illisible. */
a.framer-p8u0hc .pzh-icone {
  display: block !important;
  background-color: #FFFFFF !important;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6)) !important;
}
a.framer-p8u0hc .pzh-porte-icone {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
a.framer-p8u0hc svg, a.framer-p8u0hc svg * {
  display: block !important;
  fill: #FFFFFF !important; stroke: #FFFFFF !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
a.framer-p8u0hc p, a.framer-p8u0hc span, a.framer-p8u0hc div[data-framer-component-type="RichTextContainer"] p {
  color: var(--pzh-blanc) !important; }
@media (hover: hover) {
  a.framer-p8u0hc:hover { transform: scale(1.01) translateY(-1px) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 22px 56px rgba(0,0,0,.66), 0 0 0 1px rgba(228,228,226,.22) !important; }
  a.framer-p8u0hc:hover .framer-1321g9e {
    background: linear-gradient(146deg, #FFFFFF 0%, #D6D8DA 22%, #93979C 52%, #EDEDEC 74%, #7C8085 100%) !important; }
}
a.framer-p8u0hc:active { transform: scale(.98) !important; }

/* Au survol et à l'appui, le gabarit fait grandir la pastille chromée
   jusqu'à remplir le bouton. L'effet est beau, mais le libellé restait
   blanc et devenait illisible sur le chrome clair. Le texte et la flèche
   passent donc au noir tant que le remplissage est là. */
a.framer-p8u0hc:hover p, a.framer-p8u0hc:hover span,
a.framer-p8u0hc:hover div[data-framer-component-type="RichTextContainer"] p,
a.framer-p8u0hc:active p, a.framer-p8u0hc:active span,
a.framer-p8u0hc:active div[data-framer-component-type="RichTextContainer"] p {
  color: #0A0A0B !important; text-shadow: none !important; }
a.framer-p8u0hc:hover .pzh-icone, a.framer-p8u0hc:active .pzh-icone {
  background-color: #0A0A0B !important; filter: none !important; }
a.framer-p8u0hc:hover svg, a.framer-p8u0hc:hover svg *,
a.framer-p8u0hc:active svg, a.framer-p8u0hc:active svg * {
  fill: #0A0A0B !important; stroke: #0A0A0B !important; filter: none !important; }

/* ── preuve sociale ──────────────────────────────────────────── */
.framer-1xquod3 img, .pzh-av-img { border-radius: 50% !important; }
.pzh-av { box-shadow: none !important; border: 0 !important; }
.pzh-av img { box-shadow: 0 0 0 1.5px rgba(5,5,6,.9) !important; }
.framer-1xquod3 [style*="rgb(244, 63, 94)"], .framer-1blq8wz [style*="rgb(244, 63, 94)"] {
  background-color: transparent !important; border-color: rgba(228,228,226,.3) !important;
}
.pzh-av > * { border-color: transparent !important; }
.framer-1blq8wz p.framer-text, .framer-1xquod3 p.framer-text { color: var(--pzh-blanc) !important; }
.pzh-refs-or { color: var(--pzh-or-clair) !important; }
.pzh-av { position: relative; border-radius: 50%; }
.pzh-av::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: 2; pointer-events: none;
  padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.pzh-av-1::after { background: linear-gradient(140deg, #FFFFFF, var(--pzh-argent-sombre)); }
.pzh-av-2::after { background: linear-gradient(140deg, var(--pzh-argent-clair), var(--pzh-or-clair)); }
.pzh-av-3::after { background: linear-gradient(140deg, var(--pzh-or-pale), #A98A4E); }
.pzh-av::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(228,228,226,.22), transparent 72%); filter: blur(7px); }

/* ── la phrase ───────────────────────────────────────────────── */
.pzh-p1 { color: var(--pzh-argent-clair) !important; }
.pzh-p2 { color: var(--pzh-or-clair) !important; }
.pzh-p3 { color: rgba(245,243,238,.82) !important; }
/* Sur telephone le gabarit ne coupe pas la phrase : la seconde partie prend
   sa propre ligne, comme au bureau ou les <br> s'en chargent. */
@media (max-width: 809px) {
  .pzh-p3 { display: block; }
}

/* ── objets flottants : verre noir, arête métallique ─────────── */
.framer-1xywj4y .pzh-cube:not(img) {
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(228,228,226,.24), 0 16px 38px rgba(0,0,0,.66),
              0 0 24px rgba(200,169,106,.16), 0 1px 0 rgba(255,255,255,.16) inset !important;
  animation: pzh-flotte 12s ease-in-out infinite;
}
.framer-1xywj4y .pzh-cube:not(img) svg, .framer-1xywj4y .pzh-cube:not(img) svg * {
  fill: rgba(241,221,170,.9) !important; stroke: rgba(241,221,170,.9) !important;
}
.framer-1xywj4y img.pzh-cube {
  filter: grayscale(1) brightness(.42) contrast(1.25) sepia(.45) saturate(1.5) hue-rotate(-6deg) !important;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(228,228,226,.22), 0 14px 34px rgba(0,0,0,.6),
              0 0 22px rgba(200,169,106,.18) !important;
  animation: pzh-flotte 11s ease-in-out infinite;
}
.framer-1xywj4y img.pzh-cube:nth-of-type(2) { animation-duration: 13s; animation-delay: -3s; }
.framer-1xywj4y img.pzh-cube:nth-of-type(3) { animation-duration: 15s; animation-delay: -6s; }
/* On anime « translate » et « rotate », pas « transform » : Framer place
   et incline déjà ces cubes avec un transform, et l'écraser leur faisait
   perdre leur position et leur biais d'origine. Ces deux propriétés-là
   se composent avec le transform existant au lieu de le remplacer. */
@keyframes pzh-flotte {
  0%,100% { translate: 0 -5px; rotate: -1.4deg }
  50%     { translate: 0 5px;  rotate: 1.4deg }
}

/* ── logos et badges : monochromes ───────────────────────────── */
.framer-1xywj4y img[src*="ZmDAzTDIm"], .framer-1xywj4y img[src*="waCbqnApRB"],
.framer-1xywj4y img[src*="x1wa3C8AJ"], .framer-1xywj4y img[src*="Wld0TXKac"] {
  filter: grayscale(1) brightness(1.5) contrast(.9) !important; opacity: .72 !important;
}

/* ── galerie vidéo ───────────────────────────────────────────
   Attention : la bande du hero est un bandeau défilant, chaque
   vignette est un élément répété. On habille les vignettes, on ne
   touche pas au conteneur, sinon il s'écrase à quelques pixels. */
.framer-tpvkww-container, .framer-1owxt9p-container, .framer-vfal9o-container {
  position: relative !important;
  border-radius: clamp(18px, 4vw, 24px) !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(228,228,226,.15),
              0 22px 54px rgba(0,0,0,.66),
              0 0 0 3px rgba(5,5,6,.9) !important;
  transition: box-shadow .6s ease, scale .6s cubic-bezier(.16,1,.3,1);
}
.framer-tpvkww-container video, .framer-1owxt9p-container video, .framer-vfal9o-container video,
.framer-tpvkww-container img, .framer-1owxt9p-container img, .framer-vfal9o-container img {
  border-radius: inherit;
}
.pzh-actif { box-shadow: 0 0 0 1px rgba(241,221,170,.55),
             0 22px 54px rgba(0,0,0,.7), 0 0 0 3px rgba(5,5,6,.9) !important; }
.pzh-voile-video { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(5,5,6,.05) 0%, rgba(5,5,6,.1) 50%, rgba(5,5,6,.6) 100%); }
.pzh-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: rgba(12,12,14,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(228,228,226,.36), 0 6px 20px rgba(0,0,0,.5); }
.pzh-play::after { content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 10px solid rgba(245,243,238,.94); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
@media (hover: hover) {
  .framer-tpvkww-container:hover, .framer-1owxt9p-container:hover, .framer-vfal9o-container:hover { scale: 1.02; }
}

/* ── arrivée ─────────────────────────────────────────────────── */
.pzh-entree { opacity: 0; transform: translateY(16px); }
.pzh-entree.vu { opacity: 1; transform: none;
  transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1); }
.pzh-entree.flou { filter: blur(12px); }
.pzh-entree.flou.vu { filter: none; transition: opacity 1.1s cubic-bezier(.16,1,.3,1),
  transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1); }
.pzh-d1.vu{transition-delay:.1s} .pzh-d2.vu{transition-delay:.28s} .pzh-d3.vu{transition-delay:.5s}
.pzh-d4.vu{transition-delay:.72s} .pzh-d5.vu{transition-delay:.9s} .pzh-d6.vu{transition-delay:1.05s}

@media (prefers-reduced-motion: reduce) {
  .pzh-entree, .pzh-label { opacity: 1 !important; transform: none !important; filter: none !important; }
  .framer-1xywj4y .pzh-cube:not(img) {
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(228,228,226,.24), 0 16px 38px rgba(0,0,0,.66),
              0 0 24px rgba(200,169,106,.16), 0 1px 0 rgba(255,255,255,.16) inset !important;
  animation: pzh-flotte 12s ease-in-out infinite;
}
.framer-1xywj4y .pzh-cube:not(img) svg, .framer-1xywj4y .pzh-cube:not(img) svg * {
  fill: rgba(241,221,170,.9) !important; stroke: rgba(241,221,170,.9) !important;
}
.framer-1xywj4y img.pzh-cube { animation: none !important; }
}

/* Cubes flottants dont le rouge est dans l'image : on les vire vers le
   métal chaud et on leur donne une arête, sans toucher au fichier. */
.framer-1xywj4y .pzh-cube-img {
  background-image: linear-gradient(152deg, rgba(46,46,52,.98), rgba(12,12,15,.99)) !important;
  /* on rend le flou de profondeur d'origine, sinon les cubes perdent
     leur éloignement et se collent au même plan que le texte. */
  filter: var(--pzh-flou, none) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(228,228,226,.26), 0 16px 38px rgba(0,0,0,.68),
              0 0 26px rgba(200,169,106,.2), 0 1px 0 rgba(255,255,255,.18) inset !important;
  animation: pzh-flotte 12s ease-in-out infinite;
}
/* l'icône blanche à l'intérieur passe en champagne */
.framer-1xywj4y .pzh-cube-img > div,
.framer-1xywj4y .pzh-cube-img [style*="rgb(255, 255, 255)"] {
  background-color: rgba(241,221,170,.92) !important;
}
.framer-1xywj4y .pzh-cube-img:nth-of-type(even) { animation-duration: 15s; animation-delay: -4s; }

/* Le halo rouge du gabarit en bas du hero : on l'éteint complètement. */
.framer-1xywj4y [data-framer-name="BG"],
.framer-1xywj4y [data-framer-name="Overly"],
.framer-1xywj4y [data-framer-name="Ellipse 1"] {
  filter: grayscale(1) brightness(.2) contrast(1.1) !important;
  opacity: .32 !important;
}

/* Dernier reste de rouge : le dégradé de fond en bas du hero. */
.framer-1xywj4y::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,5,6,.72) 58%, var(--pzh-noir));
}
/* Les anneaux des avatars : argent puis champagne, rien d'autre. */
.pzh-av, .pzh-av * { border-color: transparent !important; }
.pzh-av > div { box-shadow: none !important; }

/* Plus de bouton lecture sur les vignettes du hero : elles défilent. */
.framer-1xywj4y .pzh-play { display: none !important; }


/* L'anneau coloré des avatars vient d'un ::after du gabarit : un pseudo-élément,
   donc hors de portée des styles inline posés par le script. On l'éteint ici. */
.pzh-av-cadre::after, .pzh-av-cadre::before,
.pzh-av::after, .pzh-av::before {
  border-color: transparent !important;
  border-width: 0 !important;
  background: none !important;
  box-shadow: none !important;
}


/* Les trois badges : le deuxième et le troisième sont dans un même fichier,
   leur écart est donc figé. On règle l'écart de flex pour que les trois
   respirent pareil. */
.framer-oqm5ft { gap: 8px !important; }
@media (min-width: 810px) { .framer-oqm5ft { gap: 13px !important; } }


/* Anneau des trois avatars. Peint a l'interieur du disque (box-shadow inset)
   parce qu'un anneau exterieur se faisait rogner par les conteneurs du gabarit :
   on n'en voyait qu'un arc. */
.pzh-av-anneau { position: relative; }
.pzh-av-anneau::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 1.5px var(--pzh-metal, #C9CDD3) !important;
}