/* header.css */
/*
 * Quaternite minimal header.
 * Geometry and timings follow the recovered Quaternite header source while keeping
 * only the centered brand and cart action required by this one-product site.
 */

:root {
  --q-header-height: 72px;
  --q-header-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --q-header-color: #1d1d1b;
  --q-header-motion: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --q-header-show-duration: 450ms;
  --q-header-hide-duration: 150ms;
}

.qtn-header {
  box-sizing: border-box;
  color: var(--q-header-color);
  height: var(--q-header-height);
  isolation: isolate;
  opacity: 1;
  pointer-events: none;
  transform: none;
  --q-header-slide-duration: var(--q-header-show-duration);
  transition:
    background-color var(--q-header-motion),
    border-color var(--q-header-motion),
    box-shadow var(--q-header-motion),
    color var(--q-header-motion),
    transform var(--q-header-slide-duration) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.qtn-header.is-hidden {
  --q-header-slide-duration: var(--q-header-hide-duration);
  transform: translate3d(0, calc(-100% - 1px), 0);
}

/* The hero is the only launch animation: suppress the inherited full-screen
   Quaternite loader without removing its node (the recovered app may query it). */
#__nuxt .loader[data-v-36106d06] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.qtn-header::before {
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition:
    background-color var(--q-header-motion),
    border-color var(--q-header-motion),
    -webkit-backdrop-filter var(--q-header-motion),
    backdrop-filter var(--q-header-motion);
  z-index: -1;
}

.qtn-header.is-scrolled::before,
body.q-commerce-cart .qtn-header::before {
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(29, 29, 27, 0.08);
}

.qtn-header__top,
.qtn-header__top.qtn-header__top--minimal {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  height: 100%;
  justify-content: initial;
  padding: 0 var(--q-header-inline);
  width: 100%;
}

.qtn-header__logo {
  grid-column: 2;
  justify-self: center;
  left: auto;
  position: static;
  top: auto;
  transform: none;
  transition: opacity 250ms ease;
}

.qtn-header__logo:hover {
  opacity: 0.68;
}

/* Le lettrage de l'en-tete est le logo de la maison, en image detouree :
   glyphes noirs sur fond transparent. Sa largeur reprend celle du texte qu'il
   remplace — 120 px en mobile, 160 px a partir de 1024 — pour ne rien deplacer
   autour de lui. La bascule en blanc au-dessus du hero passe par une inversion
   et non par `color` : une image ne suit pas la couleur du texte. */
.qtn-header__logo .qtn-logo {
  display: block;
  height: auto;
  transition: filter 250ms ease;
  width: 120px;
}

@media (min-width: 1024px) {
  .qtn-header__logo .qtn-logo {
    width: 160px;
  }
}

.qtn-header__right {
  align-items: center;
  display: flex;
  grid-column: 3;
  justify-self: end;
  pointer-events: auto;
  position: static;
}

.qtn-icon-btn {
  align-items: center;
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  position: relative;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    transform 180ms ease;
  width: 48px;
}

.qtn-icon-btn:hover {
  background: rgba(29, 29, 27, 0.065);
  opacity: 1;
}

.qtn-icon-btn:active {
  transform: scale(0.94);
}

.qtn-icon-btn:focus-visible,
.qtn-header__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.qtn-icon-btn svg {
  flex: 0 0 auto;
  height: 24px;
  width: 24px;
}

.qtn-icon-btn:not([data-minicart-quantity="0"])::after {
  align-items: center;
  aspect-ratio: 1;
  color: currentColor;
  content: attr(data-minicart-quantity);
  display: flex;
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  height: 12px;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 12px;
}

.qtn-icon-btn:not([data-minicart-quantity="0"]) svg {
  -webkit-mask-image: radial-gradient(circle 6px at 18px 18px, transparent 5.5px, #000 6px);
  mask-image: radial-gradient(circle 6px at 18px 18px, transparent 5.5px, #000 6px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body.q-commerce-cart .qtn-header {
  background: transparent;
  color: var(--q-header-color);
}

@media (min-width: 1024px) {
  :root {
    --q-header-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (hover: none) {
  .qtn-icon-btn:hover,
  .qtn-header__logo:hover {
    background: transparent;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qtn-header,
  .qtn-header::before,
  .qtn-header__logo,
  .qtn-icon-btn {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }

  .qtn-header {
    opacity: 1;
    transform: none;
  }
}

/* quaternite-v1-fonts.css */
/*
 * QUATERNITÉ V1 — système typographique
 * Marque: Lovelo / Ville: Montserrat / Produit: Ablation / Texte: Questrial
 */
@font-face {
  font-family: "Quaternite Lovelo";
  src: url("/fonts/Lovelo-Black.woff") format("woff");
  font-style: normal;
  font-weight: 900;
  /* Le logo ne doit jamais s'afficher dans une police de repli puis sauter
     (le remplacement se voyait a chaque changement de page). */
  font-display: block;
}

@font-face {
  font-family: "Quaternite Montserrat";
  src: url("/fonts/Montserrat-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Quaternite Montserrat";
  src: url("/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Quaternite Questrial";
  src: url("/fonts/Questrial-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Quaternite Ablation";
  src: url("/fonts/Ablation-PersonalUse.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-quaternite: "Quaternite Lovelo", "Arial Black", sans-serif;
  --font-paris: "Quaternite Montserrat", Arial, sans-serif;
  --font-paralian: "Quaternite Ablation", "Quaternite Questrial", sans-serif;
  --font-copy: "Quaternite Montserrat", Arial, sans-serif;

  /* Variables consommées par les styles Quaternite d'origine. */
  --font-primary: var(--font-copy);
  --font-secondary: var(--font-copy);
  --q-commerce-font: var(--font-copy);
}

html,
body,
button,
input,
select,
textarea,
main,
.q-site-footer {
  font-family: var(--font-copy) !important;
}

/* QUATERNITÉ */
.qtn-wordmark,
.q-site-footer__brand,
.loader svg text {
  font-family: var(--font-quaternite) !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* PARIS */
.qtn-wordmark__sub {
  font-family: var(--font-paris) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* PARALIAN — titres produit uniquement. */
#__nuxt main section.hero > .title .heading,
#__nuxt main section.hero .title > .heading,
#__nuxt main section.discover > .title,
.q-shop-cta__name,
.q-cart-cta__name,
[data-product-name="paralian"],
[data-product-name="PARALIAN"] {
  font-family: var(--font-paralian) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}

/* Tout le contenu éditorial et les actions restent en Questrial. */
#__nuxt main section:not(.hero) .heading,
#__nuxt main section:not(.hero) .subtitle,
#__nuxt main section:not(.hero) .title-text,
#__nuxt main section p,
#__nuxt main section a,
#__nuxt main section button,
.q-shop-cta,
.q-cart-page,
.q-site-footer {
  font-family: var(--font-copy) !important;
  font-style: normal;
}

/* Panier, récapitulatif, suppression et notification. */
body.q-commerce-cart .q-cart-page,
body.q-commerce-cart .q-cart-page button,
body.q-commerce-cart .q-cart-page a,
body.q-commerce-cart .q-cart-page input,
body.q-commerce-cart .q-cart-page output,
body.q-commerce-cart .q-cart-page p,
body.q-commerce-cart .q-cart-page span,
body.q-commerce-cart .q-cart-page strong,
body.q-commerce-cart .q-cart-page h1,
body.q-commerce-cart .q-cart-page h2,
.r-toast,
.r-toast button,
.r-toast a,
.r-toast p,
[role="dialog"] {
  font-family: var(--font-copy) !important;
  font-style: normal !important;
}

body.q-commerce-cart .q-cart-page .section-heading__title,
body.q-commerce-cart .q-cart-page .section-heading__items-count,
body.q-commerce-cart .q-cart-page .r-cart__empty-title,
body.q-commerce-cart .q-cart-page .r-cart-order-summary__title-desktop {
  font-family: var(--font-copy) !important;
}

/* Nom du parfum dans la fiche panier et dans les retours commerce. */
body.q-commerce-cart .q-cart-page .r-product-card__name,
body.q-commerce-cart .q-cart-page .q-cart-product-name,
.r-toast .q-cart-product-name {
  font-family: var(--font-paralian) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}

/* Signature de maison quand QUATERNITÉ apparaît dans le contenu panier. */
body.q-commerce-cart .q-cart-page .q-brand-word,
.r-toast .q-brand-word {
  font-family: var(--font-quaternite) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .08em;
}

/* quaternite-legal.css */
:root {
  --q-legal-ink: #1b1917;
  --q-legal-muted: #74716d;
  --q-legal-line: #dedbd6;
  --q-legal-soft: #f7f7f7;
  --q-legal-accent: #d8622b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--q-legal-ink);
  font-family: var(--font-copy, "Quaternite Montserrat", sans-serif);
}

a {
  color: inherit;
}

.q-legal-site-header.qtn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--q-header-height, 72px);
  /* Le fond, le flou et le filet sont geres par header.css via ::before et la
     classe is-scrolled, exactement comme sur l'accueil et le panier. */
  color: #1d1d1b;
}

.q-legal-site-header .qtn-header__top {
  min-height: var(--q-header-height, 72px);
}

.q-legal-site-header .qtn-header__left,
.q-legal-site-header .qtn-header__right {
  align-items: center;
  display: flex;
  pointer-events: auto;
}

.q-legal-site-header .qtn-header__right {
  justify-self: end;
}

.q-legal-site-header .qtn-header__logo {
  align-items: center;
  color: #1d1d1b;
  display: flex;
  flex-direction: column;
  line-height: 1;
  pointer-events: auto;
  text-decoration: none;
}

/* Les proportions de la marque sont definies une seule fois, dans
   quaternite-ux.css, pour que le header soit rigoureusement identique d'une
   page a l'autre. */

.q-legal-back {
  align-items: center;
  color: #151515;
  display: inline-flex;
  font-size: 14px;
  gap: 2px;
  line-height: 1;
  min-height: 48px;
  text-decoration: none;
}

.q-legal-back svg {
  display: block;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.q-legal-back:hover svg {
  transform: translateX(-2px);
}

/* Sur mobile la barre n'a que deux marges de 24px pour loger le retour, la
   marque et le panier : le mot "Retour" y mangeait a lui seul 68px et poussait
   la marque hors de son centre optique. On ne garde que la fleche, qui dit deja
   la meme chose ; l'intitule reste porte par l'aria-label du lien, donc rien
   n'est perdu pour les lecteurs d'ecran. Le remplissage a droite reconstitue
   une cible tactile de 48px sans deplacer l'icone, qui doit rester posee sur la
   marge de page en symetrie du panier. */
@media (max-width: 1023px) {
  .q-legal-back__label {
    display: none;
  }

  .q-legal-back {
    padding-right: 24px;
  }
}

.q-legal-back:focus-visible,
.q-legal-site-header .qtn-header__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.q-legal-hero {
  padding: 86px 30px 70px;
  background: #fff;
  text-align: center;
}

.q-legal-hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 66px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.q-legal-hero__intro {
  max-width: 720px;
  margin: 26px auto 0;
  color: var(--q-legal-muted);
  font-size: 17px;
  line-height: 1.55;
}

.q-legal-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 900px);
  align-items: start;
  gap: clamp(42px, 5vw, 82px);
  width: min(100% - 64px, 1240px);
  margin: 0 auto;
  padding: 0 0 130px;
}

.q-legal-nav {
  position: sticky;
  top: calc(var(--q-header-height, 72px) + 58px);
  z-index: 10;
  display: block;
  padding: 0;
}

.q-legal-nav__group {
  margin: 0 0 26px;
}

.q-legal-nav__group summary {
  position: relative;
  display: block;
  padding: 0 30px 0 0;
  color: #343331;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 220ms ease;
}

.q-legal-nav__group summary::-webkit-details-marker {
  display: none;
}

.q-legal-nav__group summary::after {
  content: "";
  position: absolute;
  top: 0.35em;
  right: 3px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.q-legal-nav__group[open] summary::after {
  transform: rotate(225deg);
}

.q-legal-nav__group summary:hover,
.q-legal-nav__group summary:focus-visible {
  color: #000;
}

.q-legal-nav__group summary:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

.q-legal-nav__items {
  display: grid;
  gap: 13px;
  padding: 18px 30px 2px 0;
}

.q-legal-nav a {
  display: block;
  align-items: center;
  padding: 0;
  color: #343331;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  transition: color 180ms ease, font-weight 180ms ease;
}

.q-legal-nav a[aria-current="page"] {
  color: #111;
  font-weight: 700;
}

.q-legal-nav a:hover,
.q-legal-nav a:focus-visible {
  color: var(--q-legal-accent);
}

.q-legal-content {
  width: 100%;
  margin: 0;
}

.q-legal-alert {
  margin-bottom: 76px;
  padding: 26px 30px;
  background: #fff5ef;
  border-left: 3px solid var(--q-legal-accent);
}

.q-legal-alert strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
}

.q-legal-alert p {
  margin: 0;
  color: #654d42;
  font-size: 14px;
  line-height: 1.6;
}

.q-legal-section {
  scroll-margin-top: 205px;
  padding: 0 0 72px;
  margin: 0 0 72px;
  border-bottom: 1px solid var(--q-legal-line);
}

.q-legal-section:last-child {
  margin-bottom: 0;
}

.q-legal-section__number {
  margin: 0 0 16px;
  color: var(--q-legal-muted);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.q-legal-section h2 {
  margin: 0 0 42px;
  font-size: clamp(29px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.q-legal-section h3 {
  margin: 38px 0 14px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
}

.q-legal-section p,
.q-legal-section li {
  color: #403d39;
  font-size: 15px;
  line-height: 1.78;
}

.q-legal-section p {
  margin: 0 0 20px;
}

.q-legal-section ul,
.q-legal-section ol {
  margin: 0 0 24px;
  padding-left: 23px;
}

.q-legal-section li + li {
  margin-top: 9px;
}

.q-legal-placeholder {
  color: #9d3e1c;
  font-weight: 500;
}

/* Les liens du corps de texte — l'adresse de contact, essentiellement — gardent
   la couleur du paragraphe : un filet discret suffit a signaler qu'ils sont
   cliquables, sans le bleu souligne du navigateur. */
.q-legal-section p a,
.q-legal-section li a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(64, 61, 57, 0.34);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}

.q-legal-section p a:hover,
.q-legal-section li a:hover {
  text-decoration-color: currentColor;
}

.q-legal-form {
  margin-top: 32px;
  padding: 32px;
  background: var(--q-legal-soft);
  border: 1px solid var(--q-legal-line);
}

.q-legal-form h3 {
  margin-top: 0;
}

.q-legal-form p:last-child {
  margin-bottom: 0;
}

.q-legal-footer {
  padding: 48px 24px 42px;
  background: #fff;
  color: var(--q-legal-ink);
  text-align: center;
}

.q-legal-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

/* Une regle generique du theme souligne les liens au survol. Le logo est une
   image de marque, pas un lien de texte : le trait le barrait. */
.q-legal-logo:hover,
.q-legal-logo:focus,
.q-legal-logo:focus-visible,
.q-legal-logo:active {
  text-decoration: none;
}

.q-legal-logo__brand {
  font-family: var(--font-quaternite, sans-serif);
  font-size: 25px;
  line-height: 0.9;
  letter-spacing: 0.05em;
}

.q-legal-logo__city {
  padding-left: 0.48em;
  font-family: var(--font-paris, sans-serif);
  font-size: 8px;
  letter-spacing: 0.48em;
}

.q-legal-footer p {
  margin: 14px 0 0;
  color: var(--q-legal-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .q-legal-site-header .qtn-header__top {
    min-height: var(--q-header-height, 72px);
  }

  .q-legal-hero {
    padding: 58px 24px 48px;
  }

  .q-legal-hero__intro {
    font-size: 16px;
  }

  .q-legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: min(100% - 36px, 900px);
    padding-bottom: 92px;
  }

  .q-legal-nav {
    position: relative;
    top: auto;
    margin: 0 0 58px;
    padding: 30px 28px 4px;
    background: var(--q-legal-soft);
    border: 1px solid var(--q-legal-line);
  }

  .q-legal-nav__group {
    margin-bottom: 26px;
  }

  .q-legal-nav__group summary {
    font-size: 18px;
  }

  .q-legal-nav__items {
    gap: 14px;
    padding-top: 20px;
  }

  .q-legal-nav a {
    font-size: 15px;
  }

  .q-legal-section {
    scroll-margin-top: 96px;
  }
}

@media (max-width: 520px) {
  .q-legal-hero h1 {
    font-size: 36px;
  }

  .q-legal-alert {
    padding: 22px;
  }

  .q-legal-section {
    padding-bottom: 56px;
    margin-bottom: 56px;
  }

  .q-legal-section h2 {
    margin-bottom: 32px;
  }

  .q-legal-section h3 {
    font-size: 15px;
  }

  .q-legal-section p,
  .q-legal-section li {
    font-size: 14px;
  }

  .q-legal-form {
    padding: 23px;
  }
}

/* quaternite-ux.css */
/*
 * Quaternite - regles UI/UX transverses.
 * Complete les feuilles existantes : rien n'est remplace, on ne fait
 * qu'aligner le header, les cibles tactiles, le focus clavier et les
 * transitions de page sur les bonnes pratiques.
 */

/* ------------------------------------ rognage du bloc de la grande photo
 * overflow:hidden fait de l'enveloppe un CONTENEUR DEFILANT. La grande photo y
 * accrochait sa chronologie de defilement ; comme cette enveloppe ne defile
 * jamais, la photo se repliait sur un rendu JavaScript qui recalcule sa
 * position une image APRES le defilement — d'ou la saccade. clip rogne
 * exactement pareil SANS creer de conteneur : la chronologie remonte au
 * document et le mouvement passe au compositeur.
 *
 * PERIMETRE STRICT. clip rogne aussi les descendants en position fixe, ce que
 * hidden ne fait pas. La regle est donc limitee au seul bloc qui en a besoin,
 * et surtout PAS remontee sur .layout-dlb ni sur le body : le flacon en 3D est
 * un descendant direct de .layout-dlb et disparait aussitot (constate deux
 * fois). Verifie a l'execution : aucun element fixe ni collant dans tout
 * #quaternite-v2-tail, et #q-exclusif n'est dans aucun bloc.
 *
 * Piege associe : ce fichier commence par une marque d'ordre des octets. Tant
 * que tools/build-static.js ne la retirait pas, la PREMIERE regle du fichier
 * etait silencieusement invalide une fois les feuilles fusionnees. */
#quaternite-v2-tail .productPage__blockMount:has(> .scrollMediasBlock) {
  overflow: clip;
}

/* ------------------------------------------------------- transitions de page */

@keyframes q-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Le header ne participe pas a la transition : il est identique d'une page a
   l'autre, le faire disparaitre puis reapparaitre donnait un clignotement du
   logo. Seul le contenu se fond. */
body.q-page-enter > :not(.qtn-header):not(.q-skip-link) {
  animation: q-page-in 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.q-page-leave > :not(.qtn-header):not(.q-skip-link) {
  /* #__nuxt porte sa propre opacite : il faut passer devant pour que le
     conteneur principal participe au fondu. */
  opacity: 0 !important;
  transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1) !important;
}

/* --------------------------------------------------------------- skip link */

.q-skip-link {
  background: #1d1d1b;
  border-radius: 0 0 4px 0;
  color: #fff;
  font-family: "Quaternite Montserrat", Arial, sans-serif;
  font-size: 14px;
  left: 0;
  padding: 12px 18px;
  position: fixed;
  text-decoration: none;
  top: 0;
  transform: translateY(-120%);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.q-skip-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
  transform: translateY(0);
}

/* ------------------------------------------------------------------ header */

/* Marge horizontale du header alignee sur celle du contenu (le bouton
   "Commander" colle a 24px des bords) : sur mobile l'entete etait a 16px, le
   panier ne tombait donc pas sur la meme verticale que le reste de la page. */
:root {
  --q-header-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Barre un peu plus haute sur grand ecran : la marque respire et la hauteur
   reste proportionnee a la largeur de la fenetre. */
@media (min-width: 1024px) {
  :root { --q-header-height: 80px; }
}

/* ---- Marque : proportions et alignement optique ----------------------------
   Le logo tient sur deux lignes (QUATERNITE + PARIS). Centrer les icones sur le
   milieu geometrique de ce bloc les fait tomber SOUS le mot principal, qui est
   l'element dominant : elles paraissent basses. On les remonte de la moitie de
   la seconde ligne pour les aligner sur l'axe du mot principal. */
:root { --q-logo-optical-shift: 6.5px; }

.qtn-header__left,
.qtn-header__right {
  transform: translateY(calc(-1 * var(--q-logo-optical-shift)));
}

/* Sur mobile le tres large interlettrage etirait la marque sur plus d'un tiers
   de la barre : on la resserre pour lui rendre sa densite. Le padding compense
   l'espace ajoute apres la derniere lettre, il suit donc la meme valeur.
   Ce bloc est la definition de reference de la marque : accueil, panier et
   informations partagent exactement les memes valeurs, sinon le logo change
   discretement de taille et de position d'une page a l'autre. */
.qtn-header .qtn-wordmark {
  color: #1d1d1b;
  font-size: 18px;
  letter-spacing: 0.075em;
  padding-left: 0.075em;
}

.qtn-header .qtn-wordmark__sub {
  color: #1d1d1b;
  font-size: 8px;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  margin-top: 2px;
}

/* Sur grand ecran la marque etait au contraire trop discrete (11% de la barre). */
@media (min-width: 1024px) {
  :root { --q-logo-optical-shift: 7.5px; }
  .qtn-header .qtn-wordmark { font-size: 24px; }
  .qtn-header .qtn-wordmark__sub { font-size: 10px; }
}

/* Le recit reprend la couleur noire d'origine du theme (plus de teinte orange). */

/* La gouttiere de barre de defilement est toujours reservee : sans elle, une
   page courte (le panier) est 15px plus large qu'une page longue et le logo
   centre se decalait de 7,5px a chaque changement de page. */
html {
  scrollbar-gutter: stable;
}

/* L'icone du panier doit s'aligner optiquement sur la marge de la page, pas sa
   zone de clic : on compense la moitie du padding interne du bouton tout en
   gardant une cible de 48px. */
.qtn-header__right .qtn-icon-btn {
  margin-right: -12px;
}

/* Les deux pages n'emploient pas le meme bouton : les pages legales gardent
   celui du theme (.qtn-icon-btn, ci-dessus), l'accueil injecte celui du clone
   (.q-header-cart). Faute de compensation, l'icone de l'accueil tombait 12px
   plus a l'interieur et le panier sautait a chaque changement de page alors
   que la marque, elle, ne bougeait pas. Ce bouton est place en absolu contre
   le bord droit de son conteneur : on decale donc ce bord, une marge n'aurait
   aucun effet sur une boite ancree par `right`. */
.qtn-header__right .q-header-cart {
  right: -12px;
}

/* Symetrie avec le panier : le lien "Retour" demarre par son icone, il tombe
   donc deja sur la marge et ne doit pas etre decale. La regle reste limitee a
   la page panier, ailleurs le lien est masque (commerce.css) et ne doit surtout
   pas etre reaffiche par un `display` plus specifique. */
body.q-commerce-cart .qtn-header__left .q-cart-header__back {
  align-items: center;
  gap: 6px;
  min-height: 48px;
}

/* Le contenu principal ne doit jamais passer sous la barre fixe quand on
   arrive sur une ancre. */
[id] { scroll-margin-top: calc(var(--q-header-height, 72px) + 16px); }

/* --------------------------------------------------------- focus & pointeur */

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

:where(a, button, [role="button"]):not(:disabled) {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Cibles tactiles : 44px minimum recommande sur mobile. */
@media (pointer: coarse) {
  .qtn-icon-btn,
  body.q-commerce-cart .q-cart-header__back {
    min-height: 48px;
    min-width: 48px;
  }
}

/* ----------------------------------------------------------- accessibilite */

@media (prefers-reduced-motion: reduce) {
  body.q-page-enter > *,
  body.q-page-leave > * {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* -------------------------------------------------------------------------
   Baseline "Extrait de parfum" du hero
   -------------------------------------------------------------------------
   Reprend la composition de l'etiquette du flacon : "PARALIAN" au centre,
   "EXTRAIT DE PARFUM" isole tout en bas, centre, en petites capitales
   fortement espacees.

   Le fondu recopie a l'identique la formule du titre du bundle Nuxt :
       .title[data-v-44d00204] { opacity: calc(1 - var(--distance)^3) }
   ou --distance est une variable CSS ecrite en inline-style sur
   section.hero (0 en haut de page -> 1 quand le hero a fini de defiler).
   En reutilisant la meme variable et la meme courbe, la baseline s'efface
   EXACTEMENT au meme rythme que "PARALIAN", sans une ligne de JS de
   synchronisation au scroll. La regle doit donc rester DESCENDANTE de
   section.hero pour heriter de --distance.
   Valeur par defaut de --distance dans le bundle : 1000 -> opacite negative
   donc invisible tant que le composant n'a pas ecrit sa vraie valeur : pas
   de flash au chargement, meme comportement que le titre. */

#__nuxt main section.hero .q-hero-baseline {
  position: fixed;
  left: 50%;
  bottom: 5.5vh;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  pointer-events: none;
  color: var(--color-white, #fff);
  font-family: "Quaternite Montserrat", var(--font-copy), Arial, sans-serif;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.42em;
  /* le letter-spacing s'applique aussi APRES la derniere lettre : sans cette
     compensation le texte parait decale vers la gauche une fois centre. */
  text-indent: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
  opacity: calc(1 - var(--distance) * var(--distance) * var(--distance));
}

@media (max-width: 640px) {
  #__nuxt main section.hero .q-hero-baseline {
    bottom: 4vh;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
  }
}

/* --------------------------- entree du hero : la mer d'abord, le texte apres */

/* L'opacite du titre et de la baseline est un calc pilote par --distance
   (bundle Nuxt) : poser une transition dessus lisserait aussi le fondu au
   scroll. L'entree utilise donc filter: opacity() et la propriete individuelle
   translate, qui se COMPOSENT avec opacity/transform sans les modifier.
   (translate s'applique avant transform : le translateX(-50%) de centrage de
   la baseline n'est pas affecte.)
   html.q-hero-attente est posee par quaternite-ux.js des le boot (avant
   l'hydratation Nuxt, donc avant que le titre ne devienne visible) et retiree
   quand la mer est peinte (q-mer-revelee, cf. sky-gradient.js) et le sas leve.
   Sans JS la classe n'existe pas : le texte reste visible. */

#__nuxt main section.hero .title,
#__nuxt main section.hero .q-hero-baseline {
  transition:
    filter 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* la baseline arrive un souffle apres le titre */
#__nuxt main section.hero .q-hero-baseline {
  transition-delay: 0.35s;
}

html.q-hero-attente #__nuxt main section.hero .title {
  filter: opacity(0);
  translate: 0 24px;
  transition: none;
}

html.q-hero-attente #__nuxt main section.hero .q-hero-baseline {
  filter: opacity(0);
  translate: 0 14px;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #__nuxt main section.hero .title,
  #__nuxt main section.hero .q-hero-baseline {
    transition: none;
  }
}

/* ------------------------------- sections retirees du parcours (tiktok, models) */

/* On MASQUE au lieu de SUPPRIMER du DOM, et c'est volontaire : section.models
   sert d'ancre d'insertion a deux scripts maison.
     - quaternite-v2-tail.js  : `anchor.insertAdjacentElement('afterend', ...)`
       precede d'un `if (!anchor) return;` -> sans elle, TOUTE la fin de page
       (le bloc #quaternite-v2-tail, 6300px) cesse d'etre montee.
     - quaternite-v2-fullpage.js : `anchor.parentNode.insertBefore(host, ...)`.
   Retirer le noeud casserait donc bien plus que les deux sections visees.
   `display:none` supprime la boite (aucune hauteur de scroll residuelle : la
   page passe de ~16000px a 11840px) tout en gardant le noeud comme point
   d'ancrage. Les autres scripts qui la lisent (native-behaviors.js,
   copy-overrides.js, quaternite-tiktok-photo.js) continuent de trouver leurs
   elements et ne levent aucune erreur.
   Le `margin-bottom:-125vh` pose sur .models dans index.html devient sans
   effet (un element display:none ne genere pas de marge) : verifie, la
   jonction section.bottle -> tail est continue, sans trou ni chevauchement. */

#__nuxt main section.tiktok,
#__nuxt main section.models {
  display: none !important;
}

/* ------------------------------- section.bottle retiree du parcours */

/* Meme raisonnement que ci-dessus, pour la section « Solaire / Fruite /
   Mineral ». On la masque au lieu de la retirer du DOM parce qu'elle sert
   d'ancre a paralian-exclusif.js et a paralian-exclusif-native.js :
   `anchor.parentNode.insertBefore(host, anchor)` monte #q-exclusif JUSTE
   avant elle. Supprimer le noeud ferait disparaitre les 4800px de la section
   exclusif, pas seulement le titre vise.
   Sont emportes avec elle : l'ecran de titre (.title, en position fixed) et
   le paragraphe d'ouverture « Il s'ouvre sur le velours d'une peau de
   peche... » (.wrapper, en sticky). Le parcours enchaine donc directement sur
   #quaternite-v2-tail, « Le sillage s'efface dans un musc enveloppant... ».
   copy-overrides.js continue d'ecrire dans ces noeuds sans lever d'erreur :
   syncStoryText() lit offsetHeight, qui vaut 0, et son `Math.max(1, ...)`
   absorbe le cas. */

#__nuxt main section.bottle {
  display: none !important;
}


/* ---------- legende de la premiere image du bloc medias ----------
   Meme traitement que les .media__subtitle de la grille (Questrial, capitales,
   noir, cale a gauche sur la gouttiere) mais posee sous le hero, qui est en
   position absolue parce que son wrapper est plus haut que l'image visible.
   Le titre est force sur UNE ligne : white-space nowrap + taille fluide. */
#quaternite-v2-tail .scrollMediasBlock__hero {
  position: relative;
}

/* Legendes de la grille : une seule ligne. C'est fitSubtitles() (dans
   quaternite-v2-tail.js) qui reduit la taille de celles qui depassent la
   largeur de leur photo ; sans nowrap elles se contenteraient de passer a la
   ligne et le calcul n'aurait aucun effet. */
#quaternite-v2-tail .scrollMediasBlock__medias .medias__media {
  position: relative;
}

/* Le conteneur de la grille (.gridWrapper) est en overflow:hidden et s'arrete
   au bas de la derniere rangee. Deux consequences a corriger :
   1. le cadre de parallaxe de la 3e photo montait a 675px pour une cellule de
      377px : il debordait, se faisait tronquer par ce bord, et emportait sa
      legende hors du cadre visible ;
   2. meme cadrees juste, les legendes de la derniere rangee tombent sous ce
      bord. D'ou la reserve de place en bas de grille. */
#quaternite-v2-tail .scrollMediasBlock__medias .medias__media .parallaxElt,
#quaternite-v2-tail .scrollMediasBlock__medias .medias__media .parallaxMediaElt {
  height: 100%;
}

#quaternite-v2-tail .scrollMediasBlock__medias {
  padding-bottom: 5vw;
}

#quaternite-v2-tail .scrollMediasBlock__medias .medias__media .media__subtitle {
  position: absolute;
  left: 0;
  top: 0;          /* placeSubtitles() pose les valeurs reelles a chaque frame */
  white-space: nowrap;
}

/* Le gabarit d'origine masque les legendes des 1000px, un seuil calibre pour
   ses fragments de trois mots. Nos phrases sont le seul texte de cette grille :
   on les garde jusqu'a 860px, largeur en dessous de laquelle la plus petite
   photo (15vw = 129px) ne peut plus les accueillir lisiblement. */
@media (min-width: 860px) {
  #quaternite-v2-tail .scrollMediasBlock__medias .medias__media .media__subtitle {
    display: block;
  }
}

/* Le plafond de 380px sur cette legende vient du gabarit d'origine, calibre
   pour un fragment de trois mots ; sa photo, elle, fait 443px. On rend la
   largeur de l'image a la legende plutot que de rapetisser la phrase.
   Meme raison pour la legende du yacht (plafond 480px, photo 557px). */
#quaternite-v2-tail .scrollMediasBlock__medias .medias__media--2 .media__subtitle,
#quaternite-v2-tail .scrollMediasBlock__medias .medias__media--3 .media__subtitle {
  max-width: none;
}

/* Le paragraphe d'introduction et le bloc editorial plus bas sont deux
   .textBlock centres, mais avec des colonnes de largeurs differentes : 24.5vw
   pour le premier, 430px pour le second. Deux largeurs = deux bords gauches,
   d'ou le decalage visible. On aligne le premier sur le gabarit editorial, qui
   sert de reference a toute la fin de page. */
#quaternite-v2-tail .textBlock:not(.textBlock--editorial) {
  margin: 0 auto;
  max-width: 960px;
  padding-left: 40px;
  padding-right: 40px;
}

#quaternite-v2-tail .textBlock:not(.textBlock--editorial) .textBlock__text--s {
  margin-left: auto;
  margin-right: auto;
  max-width: 430px;
  text-align: center;
  width: 100%;
}

/* Titre et manifeste de marque : même axe central et quatre respirations
   distinctes, sans modifier le reveal ligne par ligne du composant source. */
#quaternite-v2-tail .textBlock__text--m {
  font-weight: 700;
}

#quaternite-v2-tail .textBlock--editorial .textBlock__text--s {
  margin-left: auto;
  margin-right: auto;
  max-width: 430px;
  text-align: center;
  width: 100%;
}

/* Seule la mention de la Maison dans le corps éditorial reprend Lovelo. */
#quaternite-v2-tail .textBlock--editorial .textBlock__brandWord {
  font-family: var(--font-quaternite);
  font-weight: 900;
  letter-spacing: 0.015em;
}

/* Matiere picturale du manifeste : les formes restent en peripherie afin de
   conserver une colonne de lecture calme au centre. */
#quaternite-v2-tail .textBlock--editorial {
  isolation: isolate;
  position: relative;
}

#quaternite-v2-tail .textBlock--editorial > :not(.textBlock__paintDecor) {
  position: relative;
  z-index: 2;
}

#quaternite-v2-tail .textBlock__paintDecor {
  inset: -110px -150px -125px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transform: scale(.96);
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1),
              transform 1.35s cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
}

#quaternite-v2-tail .textBlock__paintDecor.is-visible {
  opacity: 1;
  transform: scale(1);
}

#quaternite-v2-tail .textBlock__paint {
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  will-change: opacity, transform;
}

#quaternite-v2-tail .textBlock__paint--left {
  background:
    radial-gradient(ellipse at 22% 66%, rgba(248, 86, 16, .92) 0 17%, transparent 18%),
    radial-gradient(ellipse at 52% 45%, rgba(255, 188, 16, .86) 0 25%, transparent 26%),
    radial-gradient(ellipse at 77% 25%, rgba(238, 123, 24, .72) 0 19%, transparent 20%),
    linear-gradient(122deg, transparent 7%, rgba(248, 86, 16, .7) 28%, rgba(255, 188, 16, .72) 61%, transparent 84%);
  clip-path: polygon(3% 31%, 18% 19%, 33% 23%, 51% 6%, 62% 31%, 86% 22%, 77% 46%, 98% 62%, 68% 68%, 57% 96%, 38% 72%, 9% 86%, 20% 58%);
  filter: saturate(1.08) contrast(1.05);
  height: 430px;
  left: -84px;
  top: 8%;
  transform: rotate(-10deg);
  width: 330px;
}

#quaternite-v2-tail .textBlock__paint--right {
  background:
    radial-gradient(ellipse at 25% 31%, rgba(255, 188, 16, .84) 0 23%, transparent 24%),
    radial-gradient(ellipse at 57% 52%, rgba(255, 87, 36, .9) 0 22%, transparent 23%),
    radial-gradient(ellipse at 78% 69%, rgba(213, 28, 21, .88) 0 18%, transparent 19%),
    linear-gradient(138deg, transparent 10%, rgba(255, 177, 16, .6) 27%, rgba(226, 40, 24, .78) 68%, transparent 88%);
  clip-path: polygon(8% 5%, 35% 19%, 58% 4%, 63% 29%, 93% 20%, 77% 49%, 99% 69%, 67% 68%, 55% 96%, 35% 74%, 6% 88%, 19% 53%);
  filter: saturate(1.1) contrast(1.06);
  height: 470px;
  right: -95px;
  top: 23%;
  transform: rotate(12deg);
  width: 350px;
}

#quaternite-v2-tail .textBlock__paint--accent {
  background: linear-gradient(100deg, rgba(144, 81, 27, .12), rgba(160, 83, 24, .68) 42%, rgba(242, 79, 18, .36) 72%, transparent);
  clip-path: polygon(0 46%, 23% 30%, 53% 42%, 100% 15%, 78% 58%, 96% 77%, 47% 63%, 8% 92%);
  height: 155px;
  left: 9%;
  opacity: .7;
  top: 74%;
  transform: rotate(-7deg);
  width: 360px;
}

#quaternite-v2-tail .textBlock__paint--flecks {
  background:
    radial-gradient(circle at 8% 18%, #f85610 0 3px, transparent 4px),
    radial-gradient(circle at 23% 62%, #ffbc10 0 5px, transparent 6px),
    radial-gradient(circle at 43% 11%, #ed5223 0 2px, transparent 3px),
    radial-gradient(circle at 68% 78%, #d92519 0 4px, transparent 5px),
    radial-gradient(circle at 88% 38%, #ff9d0a 0 3px, transparent 4px);
  height: 260px;
  opacity: .72;
  right: 7%;
  top: 4%;
  transform: rotate(8deg);
  width: 245px;
}

#quaternite-v2-tail .textBlock--editorial .textBlock__text--s + .textBlock__text--s {
  margin-top: 30px;
}

@media (max-width: 768px) {
  #quaternite-v2-tail .textBlock--editorial .textBlock__text--s + .textBlock__text--s {
    margin-top: 24px;
  }

  #quaternite-v2-tail .textBlock__paintDecor {
    inset: -65px -20px -80px;
    opacity: 0;
  }

  #quaternite-v2-tail .textBlock__paint--left {
    height: 250px;
    left: -112px;
    top: 4%;
    width: 205px;
  }

  #quaternite-v2-tail .textBlock__paint--right {
    height: 280px;
    right: -125px;
    top: 49%;
    width: 220px;
  }

  #quaternite-v2-tail .textBlock__paint--accent {
    bottom: 0;
    height: 100px;
    left: -50px;
    top: auto;
    width: 190px;
  }

  #quaternite-v2-tail .textBlock__paint--flecks {
    height: 170px;
    opacity: .54;
    right: -35px;
    top: 15%;
    width: 105px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #quaternite-v2-tail .textBlock__paintDecor {
    transition: none;
  }
}

@media (max-width: 960px) {
  #quaternite-v2-tail .textBlock:not(.textBlock--editorial) {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

#quaternite-v2-tail .scrollMediasBlock__heroCaption {
  box-sizing: border-box;
  color: #000;
  margin: 0;
  pointer-events: none;
  position: absolute;
  text-align: left;
  z-index: 2;
}

#quaternite-v2-tail .heroCaption__title,
#quaternite-v2-tail .heroCaption__quote {
  font-family: "Quaternite Questrial", Arial, sans-serif;
  font-size: clamp(9px, 0.8333333333vw, 16px);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  /* Cartouche sur une seule ligne. Pour la phrase, c'est fitCaption() (dans
     quaternite-v2-tail.js) qui pose une taille en pixels calculee pour tenir
     exactement dans la largeur de l'image ; le clamp ci-dessus n'est que le
     rendu de repli avant ce calcul. */
  white-space: nowrap;
}

#quaternite-v2-tail .heroCaption__title {
  text-transform: uppercase;
}

#quaternite-v2-tail .heroCaption__quote {
  color: #6b6b6b;
  margin-top: 6px;
}

/* La feuille quaternite-v2-tail.css est un releve du site d'origine et pose
   une graisse 300 sur ce paragraphe. La phrase d'accroche du bloc medias tient
   desormais sur une seule ligne : elle est passee en gras ici, apres le releve
   dans la cascade. Les majuscules viennent de la chaine elle-meme, dans
   quaternite-v2-tail.js, pour que les accents restent corrects. */
#quaternite-v2-tail .scrollMediasBlock__text {
  font-weight: 700;
}

@media (max-width: 768px) {
  /* La legende de la photo d'ouverture est calee au pixel sur la largeur de
     l'image par fitCaption(). Sur mobile elle tombait a moins de 9 px, donc
     illisible : on la retire plutot que de la laisser en decoration. La
     fonction se protege deja d'une largeur nulle, rien d'autre a neutraliser. */
  #quaternite-v2-tail .scrollMediasBlock__heroCaption {
    display: none;
  }

  /* Sur une colonne de 327 px, le fer a gauche laissait des lignes tres
     irregulieres. Le texte est centre pour retrouver le rythme du reste de la
     page, ou titres et signature le sont deja. */
  #quaternite-v2-tail .textBlock__text {
    text-align: center;
  }
}