/* ============================================================================
   Fanny Chabrier — Fragments de Lumière
   styles.css
   Direction : luxe sobre. Blanc glace, violet profond, or bruni, céruléen.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Palette client */
  --ice:        #F2F2F2;
  --paper:      #FAFAF8;
  --ink:        #16131B;
  --ink-soft:   #5B5566;
  --violet:     #4B0082;
  --violet-mid: #6A2BA6;
  --violet-dim: rgba(75, 0, 130, 0.10);
  --gold:       #B59410;
  --gold-lite:  #D4B84A;
  /* Or assombri : seule variante lisible en TEXTE sur fond clair (4,95:1).
     --gold reste pour les filets, bordures et le texte sur fond sombre. */
  --gold-text:  #7E6609;
  --gold-dim:   rgba(181, 148, 16, 0.26);
  --cerulean:   #00C9A7;
  --cerulean-dim: rgba(0, 201, 167, 0.16);

  /* Fonds */
  --bg:         var(--ice);
  --bg-deep:    #0E0B13;
  --line:       rgba(22, 19, 27, 0.12);
  --line-soft:  rgba(22, 19, 27, 0.07);

  /* Type */
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body:    "Roboto", "Segoe UI", system-ui, sans-serif;
  /* Art nouveau : les titres passent au serif calligraphique (Cormorant),
     et les deux grands titres d'appel prennent la plume (Berkshire Swash).
     Les libellés, la nav et les boutons restent en --display (sans). */
  --title:   "Cormorant Garamond", "Cormorant", Georgia, serif;
  --accent:  "Berkshire Swash", "Cormorant Garamond", Georgia, cursive;

  /* Rythme */
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sect: clamp(64px, 10vw, 120px);

  /* Mouvement — une seule langue d'easing sur tout le site */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  --radius: 2px;
  --shadow: 0 18px 50px -28px rgba(22, 19, 27, 0.45);
  --shadow-lift: 0 30px 70px -30px rgba(22, 19, 27, 0.55);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--violet); text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--violet); color: #fff; }

/* Focus clavier — visible partout */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-dark :focus-visible,
.portal :focus-visible { outline-color: var(--gold-lite); }

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--ice);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- LAYOUT --- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 760px; }

.section { padding-block: var(--sect); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 84px); }

.section--dark {
  background: var(--bg-deep);
  color: rgba(242, 242, 242, 0.86);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ice); }
.section--dark a { color: var(--gold-lite); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ------------------------------------------------------------ TYPOGRAPHY -- */
.eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: var(--gold);
}
.section--dark .eyebrow { color: var(--gold-lite); }
.section--dark .eyebrow::after { background: var(--gold); }

.h-display {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  font-weight: 200;
  letter-spacing: -0.03em;
}
.h-1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 200; }
.h-2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; }
.h-3 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lead {
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.62;
  font-weight: 300;
  color: var(--ink);
  max-width: 62ch;
}
.section--dark .lead { color: rgba(242, 242, 242, 0.9); }

.prose { max-width: 68ch; color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 500; }
.section--dark .prose { color: rgba(242, 242, 242, 0.76); }

.muted { color: var(--ink-soft); }

/* Citation d'ouverture */
.pull {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.34;
  font-style: italic;
  letter-spacing: -0.02em;
  margin: 0;
  padding-left: clamp(18px, 3vw, 32px);
  border-left: 2px solid var(--gold);
  text-wrap: balance;
}
.pull cite {
  display: block;
  margin-top: 16px;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.72em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section--dark .pull cite { color: rgba(242, 242, 242, 0.6); }

/* ---------------------------------------------------------------- LIENS --- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet);
  padding-block: 6px;
  border-bottom: 1px solid var(--gold-dim);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link::after { content: "\2192"; transition: transform 0.3s var(--ease); }
/* Zone de contact élargie à 44px sans épaissir le soulignement */
.link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.link:hover { color: var(--ink); border-color: var(--gold); gap: 16px; }
.link:hover::after { transform: translateX(3px); }
.section--dark .link { color: var(--gold-lite); }
.section--dark .link:hover { color: var(--ice); }

/* --------------------------------------------------------------- BOUTONS -- */
.btn {
  --btn-bg: var(--violet);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 32px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-lite) 55%, var(--gold) 100%);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease-out);
  z-index: 0;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -18px rgba(75, 0, 130, 0.7);
  color: var(--ink);
  border-color: var(--gold);
}
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { color: var(--ink); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--ice);
  border-color: rgba(242, 242, 242, 0.3);
}

/* ---------------------------------------------------------------- HEADER -- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gut);
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease),
              padding 0.45s var(--ease), border-color 0.45s var(--ease),
              opacity 0.8s var(--ease), transform 0.8s var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Le voile d'accueil : sur la page du portail, la navigation n'existe pas
   encore. Elle se lève avec la licorne et la poussière d'or. */
.header.is-veiled {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
/* Deux échappatoires : la tabulation la rappelle, et sans JS elle est là. */
.header.is-veiled:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.no-js .header.is-veiled { opacity: 1; transform: none; pointer-events: auto; }
.header.is-solid {
  background: rgba(242, 242, 242, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-soft);
  padding-block: 12px;
}
/* Repli si backdrop-filter absent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-solid { background: var(--ice); }
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;      /* cible tactile */
  gap: 3px;
  line-height: 1;
  color: var(--ink);
}
.brand__name {
  font-family: var(--display);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }

.nav__link {
  position: relative;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--violet); }

/* Sélecteur de langue minimaliste : FR / EN, la langue active en plein,
   l'autre estompée. Pas de pastille, pas d'icône : du texte, comme la nav. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.lang-switch button {
  position: relative;
  min-width: 34px;
  min-height: 44px;           /* cible tactile */
  padding: 0 4px 0 calc(4px + 0.18em);   /* compense l'approche finale */
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch button:hover { opacity: 0.85; }
.lang-switch button[aria-pressed="true"] { opacity: 1; color: var(--violet); cursor: default; }
.lang-switch button::after {
  content: "";
  position: absolute;
  left: calc(4px + 0.18em); right: calc(4px + 0.18em);
  bottom: 10px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-out);
}
.lang-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.lang-switch__sep { opacity: 0.28; font-weight: 300; }

/* Dans le menu mobile (fond nuit) */
.lang-switch--drawer {
  margin: 12px 0 0 calc(-4px - 0.18em);   /* aligné sur l'e-mail et le téléphone */
  align-self: flex-start;
  color: var(--ice);
}
.lang-switch--drawer button[aria-pressed="true"] { color: var(--gold-lite); }

/* Header au-dessus du portail sombre */
.header.on-dark .brand,
.header.on-dark .nav__link { color: rgba(242, 242, 242, 0.92); }
.header.on-dark .brand__sub { color: var(--gold-lite); }
.header.on-dark .nav__link[aria-current="page"] { color: var(--gold-lite); }
.header.on-dark .lang-switch { color: rgba(242, 242, 242, 0.92); }
.header.on-dark .lang-switch button[aria-pressed="true"] { color: var(--gold-lite); }
.header.on-dark .burger__bar { background: var(--ice); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.burger__box { width: 18px; height: 12px; position: relative; }
.burger__bar {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 5px; }
.burger__bar:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panneau mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 96px var(--gut) 48px;
  background: var(--bg-deep);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.62s var(--ease-out), visibility 0s 0.62s;
}
.drawer.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }

.drawer__link {
  display: block;
  padding: 14px 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--ice);
  border-bottom: 1px solid rgba(242, 242, 242, 0.1);
  opacity: 0;
  transform: translateY(18px);
}
.drawer.is-open .drawer__link {
  animation: drawerIn 0.55s var(--ease-out) forwards;
}
.drawer.is-open .drawer__link:nth-child(1) { animation-delay: 0.12s; }
.drawer.is-open .drawer__link:nth-child(2) { animation-delay: 0.19s; }
.drawer.is-open .drawer__link:nth-child(3) { animation-delay: 0.26s; }
.drawer.is-open .drawer__link:nth-child(4) { animation-delay: 0.33s; }
@keyframes drawerIn { to { opacity: 1; transform: translateY(0); } }

.drawer__foot {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: rgba(242, 242, 242, 0.66);
}
.drawer__foot a { color: var(--gold-lite); }

/* ---------------------------------------------------------------- PORTAIL - */
/* État par défaut = porte assemblée et lisible même si le JS échoue */
.portal {
  position: relative;
  height: 360vh;
  background: var(--bg-deep);
}
.portal__stage {
  /* Valeurs de repli AVANT le premier passage du JS. Elles doivent rester
     ici : posees sur .portal__word, elles bloqueraient l heritage. */
  --ash: 0;
  --side: 0px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* La porte est ancrée au bas de l'écran : on entre par le seuil.
     Le titre occupe seul le haut, sans jamais chevaucher le vitrail. */
  justify-content: flex-end;
  padding-top: clamp(28px, 5vh, 64px);
}
.portal__bg,
.portal__warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.portal__bg { background: radial-gradient(circle at 50% 46%, #20304a 0%, #101725 42%, #07090d 78%); }
.portal__warm {
  opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fffdf8 0%, #fdf4e3 32%, #f7e3bd 62%, #eed5a6 84%, #e6c994 100%);
}

.portal__door {
  position: relative;
  flex: none;
  height: 90%;
  max-height: 100%;
  aspect-ratio: 784 / 1312;
  z-index: 2;
}
.portal__glass {
  position: absolute;
  left: 19.5%; right: 19.5%;
  top: 7.5%; bottom: 12%;
  overflow: hidden;
  border-radius: min(13vh, 24vw) min(13vh, 24vw) 2px 2px;
}
.portal__threshold {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, #fffaf0 0%, #ffeecc 40%, #f3cd8c 72%, #b98736 100%);
}
.portal__panel {
  position: absolute;
  inset: -1px;
  will-change: transform, filter;
}
.portal__panel img { width: 100%; height: 100%; object-fit: cover; }
.portal__edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14%;
  opacity: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, #fff3d6 0%, rgba(255, 214, 140, 0.55) 32%, rgba(255, 190, 90, 0) 100%);
}
.portal__inner-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 44% 52%, rgba(255, 232, 190, 0.85) 0%, rgba(255, 206, 130, 0.25) 45%, rgba(255, 190, 90, 0) 75%);
}
.portal__uni {
  position: absolute;
  left: 50%; top: 46%;
  width: 76%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.84);
  will-change: transform, opacity;
}
.portal__frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.portal__frame-glow {
  position: absolute;
  inset: -6%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 150, 0.42) 0%, rgba(255, 190, 110, 0.12) 48%, rgba(255, 180, 90, 0) 72%);
}

/* Poussière d'or — générée par JS, invisible si JS absent.
   Elle se lève avec la licorne : c'est le souffle du passage. */
.portal__dust {
  position: absolute;
  inset: -6%;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transform-origin: 50% 46%;
  z-index: 3;
}
.portal__dust span {
  position: absolute;
  border-radius: 50%;
  animation: drift 12s ease-in-out infinite, twinkle 4s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(14px, -38px, 0); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.portal__cue {
  position: absolute;
  left: var(--gut);
  bottom: 28px;
  width: 1px; height: 48px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(159, 176, 198, 0), rgba(159, 176, 198, 0.85));
  overflow: hidden;
}
.portal__cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.portal__dots {
  position: absolute;
  right: clamp(14px, 2.6vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portal__dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(200, 214, 232, 0.28);
  transition: background-color 0.4s var(--ease);
}
.portal__dots span.is-on { background: #f2f5fa; }

@media (max-width: 700px) {
  /* Le trait animé suffit à dire « faites défiler ». */
  .portal__cue { height: 40px; }
}

@media (max-width: 860px) {
  .portal { height: 300vh; }
  .portal__door { height: 74%; }
  .portal__dots { display: none; }
}


/* ============================================================================
   « Une vie, un voyage » — la phrase de l'artiste, posée de part et d'autre
   du portail. Elle n'empiète jamais sur la porte : sa colonne est calculée
   en JS (--side) à partir de la largeur réelle du battant.
   ========================================================================== */
.portal__word {
  position: absolute;
  top: var(--door-mid, 50%);
  z-index: 4;
  width: var(--side, 0px);
  margin: 0;
  padding-inline: 10px;
  text-align: center;
  pointer-events: none;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  /* Le repli en vw ne sert qu'avant le premier passage du JS. */
  font-size: var(--word-fs, clamp(1.05rem, 3.1vw, 2.5rem));
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(calc(-50% - var(--ash) * 30px));
  opacity: calc(1 - var(--ash) * 1.55);
  /* Aucune transition : la valeur est deja pilotee image par image par le
     scroll. Une transition par-dessus ne ferait que trainer. */
}
.portal__word--l { left: 0; }
.portal__word--r { right: 0; }

/* --- L'encre vivante : deux nappes de couleur dérivent dans les lettres --- */
.portal__word .w {
  display: inline-block;
  padding: 0.1em 0.22em 0.1em 0.1em;
  background-image:
    radial-gradient(88% 150% at 22% 38%, rgba(0, 201, 167, 0.72) 0%, rgba(0, 201, 167, 0) 52%),
    radial-gradient(74% 130% at 76% 66%, rgba(212, 184, 74, 0.58) 0%, rgba(212, 184, 74, 0) 56%),
    linear-gradient(100deg, #F4F8F7 0%, #FFFDF6 100%);
  background-size: 210% 210%, 235% 235%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 201, 167, 0.2))
          drop-shadow(0 1px 14px rgba(7, 9, 13, 0.55));
  animation: liquid 19s ease-in-out infinite;
}
@keyframes liquid {
  0%   { background-position:   0% 18%, 100% 82%, 0 0; }
  33%  { background-position:  62% 72%,  38% 18%, 0 0; }
  66%  { background-position: 100% 28%,   0% 62%, 0 0; }
  100% { background-position:   0% 18%, 100% 82%, 0 0; }
}
/* Si le rognage sur texte n'existe pas, la phrase doit rester lisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .portal__word .w { background: none; color: var(--ice); }
}

/* --- La cendre : un double granuleux s'échappe pendant que le net s'éteint -- */
.portal__word::after {
  content: attr(data-text);
  position: absolute;
  left: 0; right: 0;
  padding-inline: inherit;
  letter-spacing: inherit;
  color: #E0D3B0;
  /* Le pic d'opacité tombe au milieu de l'évaporation. */
  opacity: calc(var(--ash) * (1 - var(--ash)) * 3.6);
  transform: translateY(calc(var(--ash) * -46px)) scale(calc(1 + var(--ash) * 0.07));
  filter: blur(calc(var(--ash) * 3.4px));
  -webkit-mask-image: var(--grain);
  mask-image: var(--grain);
  -webkit-mask-size: 170px 88px;
  mask-size: 170px 88px;
  -webkit-mask-position: calc(var(--ash) * 96px) calc(var(--ash) * -130px);
  mask-position: calc(var(--ash) * 96px) calc(var(--ash) * -130px);
  pointer-events: none;
}

.portal {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='88'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='170' height='88' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Mobile : la colonne latérale est étroite, la phrase se met debout ---- */
@media (max-width: 700px) {
  .portal__word {
    font-size: 11.5px !important;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.34em;
    padding-inline: 0;
    writing-mode: vertical-rl;
    white-space: nowrap;
  }
  .portal__word--l {
    transform: translateY(calc(-50% - var(--ash) * 30px)) rotate(180deg);
  }
  .portal__word::after {
    writing-mode: vertical-rl;
    left: 50%;
    right: auto;
    top: 0;
    transform: translateX(-50%) translateY(calc(var(--ash) * -46px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal__word .w { animation: none; }
  .portal__word::after { display: none; }
}

/* ------------------------------------------------------------- REVEALS ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.09s; }
[data-reveal][data-delay="2"] { transition-delay: 0.18s; }
[data-reveal][data-delay="3"] { transition-delay: 0.27s; }
[data-reveal][data-delay="4"] { transition-delay: 0.36s; }
/* Filet de sécurité : sans JS, rien ne reste caché */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* -------------------------------------------------------------- SPLIT ----- */
.split-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .split-row { grid-template-columns: 0.9fr 1.1fr; }
  .split-row--flip { grid-template-columns: 1.1fr 0.9fr; }
  .split-row--sticky > :first-child { position: sticky; top: 120px; }
}

.figure { position: relative; margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
/* Le portrait d'atelier est une source basse définition (214x276) :
   on l'affiche petit, comme un tirage épinglé, plutôt que de l'agrandir. */
.figure--portrait { max-width: 280px; }
.figure--portrait img { box-shadow: 0 14px 36px -20px rgba(22,19,27,.5); }

.figure--framed::before {
  content: "";
  position: absolute;
  inset: -14px -14px 24px 24px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------- COLLECTIONS --- */
.collections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 640px) { .collections { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .collections { grid-template-columns: repeat(3, 1fr); } }

.col-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 38px);
  background: var(--bg);
  overflow: hidden;
  transition: background-color 0.45s var(--ease);
}
.col-card:hover { background: var(--paper); }
.col-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line-soft);
}
.col-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 0.6s var(--ease);
  filter: saturate(0.88);
}
.col-card:hover .col-card__media img { transform: scale(1.05); filter: saturate(1.06); }
.col-card__n {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold-text);
}
.col-card__desc { font-size: 14.5px; color: var(--ink-soft); margin: 0; flex: 1; }
.col-card__cta {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet);
  display: inline-flex;
  gap: 8px;
  transition: gap 0.3s var(--ease);
}
.col-card:hover .col-card__cta { gap: 14px; }
.col-card__link::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------- ŒUVRES PHARES - */
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 760px) { .feature-row { grid-template-columns: repeat(3, 1fr); } }
.feature-row > *:nth-child(2) { margin-top: 0; }
@media (min-width: 760px) { .feature-row > *:nth-child(2) { margin-top: 52px; } }

/* ---------------------------------------------------------- CARTE ŒUVRE --- */
.work {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  break-inside: avoid;
}
/* .work est un <button> : ses enfants sont des <span> qu'il faut passer en bloc */
.work__media, .work__tech, .work__hint { display: block; }

.work__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(75,0,130,0.05), rgba(0,201,167,0.05));
  box-shadow: var(--shadow);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.work__media img {
  width: 100%;
  transition: transform 1.2s var(--ease-out), filter 0.5s var(--ease);
}
.work:hover .work__media { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.work:hover .work__media img { transform: scale(1.045); }
.work__veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to top, rgba(14, 11, 19, 0.78) 0%, rgba(14, 11, 19, 0.12) 46%, transparent 72%);
  transition: opacity 0.45s var(--ease);
}
.work:hover .work__veil, .work:focus-visible .work__veil { opacity: 1; }
.work__hint {
  position: absolute;
  left: 20px; bottom: 18px;
  right: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out);
  color: var(--ice);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.work:hover .work__hint, .work:focus-visible .work__hint { opacity: 1; transform: none; }
.work__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.work__title {
  font-family: var(--display);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.work__year {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-text);
  flex: none;
}
.work__tech {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- GALERIE --- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(30px, 4vw, 44px);
  padding-bottom: 6px;
}
.chip {
  min-height: 44px;
  padding: 10px 20px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 40px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.chip:hover { color: var(--violet); border-color: var(--violet-dim); }
.chip[aria-pressed="true"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.chip__n { opacity: 0.55; margin-left: 7px; font-size: 10px; }

.grid-masonry {
  margin-top: clamp(34px, 5vw, 54px);
  columns: 1;
  column-gap: clamp(20px, 3vw, 34px);
}
@media (min-width: 680px) { .grid-masonry { columns: 2; } }
@media (min-width: 1040px) { .grid-masonry { columns: 3; } }
.grid-masonry > * { margin-bottom: clamp(28px, 4vw, 46px); }
.grid-masonry .work.is-hidden { display: none; }

.gal-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- LIGHTBOX --- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(10, 8, 14, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}
.lb.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lb { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

.lb__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  width: 100%;
  max-width: 1180px;
  max-height: 100%;
  overflow-y: auto;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.5s var(--ease-out);
}
.lb.is-open .lb__inner { transform: none; }
@media (min-width: 900px) {
  .lb__inner { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); overflow: visible; }
}

.lb__figure { margin: 0; min-width: 0; display: flex; justify-content: center; }
.lb__figure img {
  max-height: min(76vh, 860px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.lb__info { color: rgba(242, 242, 242, 0.82); min-width: 0; }
.lb__col {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-lite);
}
.lb__title {
  margin: 12px 0 4px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 200;
  color: var(--ice);
}
.lb__year {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(242, 242, 242, 0.5);
}
.lb__desc { margin: 20px 0 24px; font-size: 15px; line-height: 1.65; }
.lb__dl {
  margin: 0 0 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(242, 242, 242, 0.14);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  font-size: 13.5px;
}
.lb__dl dt {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.45);
  padding-top: 3px;
}
.lb__dl dd { margin: 0; color: rgba(242, 242, 242, 0.86); }

.lb__btn {
  position: absolute;
  z-index: 2;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 242, 242, 0.07);
  border: 1px solid rgba(242, 242, 242, 0.2);
  border-radius: 50%;
  color: var(--ice);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.lb__btn:hover { background: rgba(242, 242, 242, 0.16); border-color: var(--gold); transform: scale(1.06); }
.lb__btn svg { width: 18px; height: 18px; }
.lb__close { top: clamp(12px, 2.4vw, 26px); right: clamp(12px, 2.4vw, 26px); }
.lb__prev { left: clamp(8px, 1.6vw, 22px); top: 50%; margin-top: -26px; }
.lb__next { right: clamp(8px, 1.6vw, 22px); top: 50%; margin-top: -26px; }
@media (max-width: 899px) {
  .lb__prev { left: 12px; top: auto; bottom: 14px; margin-top: 0; }
  .lb__next { right: 12px; top: auto; bottom: 14px; margin-top: 0; }
  .lb__inner { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------- FICHES -- */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 4vw, 56px); } }
.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-content: start;   /* listes de longueurs inégales : tout part du haut */
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.fact dt {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.fact dd { margin: 0; font-size: 15px; }

/* Blocs de texte biographie */
.chapter { margin-top: clamp(52px, 7vw, 86px); }
.chapter:first-of-type { margin-top: 0; }
.chapter__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.chapter__num {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold-text);
  flex: none;
}
.def-list { margin: 26px 0 0; }
.def-list > div { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.def-list dt {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.def-list dd { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* -------------------------------------------------------------- CONTACT --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }

.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field__label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field__label .req { color: var(--violet); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 300;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.field textarea { min-height: 158px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet);
  background: #fff;
  box-shadow: 0 0 0 3px var(--violet-dim);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid {
  border-color: #B3261E;
}
.field__err {
  font-size: 12.5px;
  color: #B3261E;
  min-height: 0;
}
.field-row { display: grid; gap: 20px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 20px; height: 20px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--violet);
  padding: 0;
}

/* Anti-spam : doit rester vide */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.form__status {
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 14.5px;
  display: none;
}
.form__status.is-ok { display: block; background: var(--cerulean-dim); border-left: 2px solid var(--cerulean); }
.form__status.is-err { display: block; background: rgba(179, 38, 30, 0.08); border-left: 2px solid #B3261E; }

.btn.is-sending { pointer-events: none; opacity: 0.7; }

/* Carte de contact latérale */
.card {
  padding: clamp(26px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.card + .card { margin-top: 20px; }
.card__title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 18px;
}
.card__list { display: grid; gap: 14px; }
.card__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 15px;
  color: var(--ink);
  word-break: break-word;
}
.card__item svg { width: 18px; height: 18px; flex: none; color: var(--violet); }
a.card__item { transition: color 0.3s var(--ease); }
a.card__item:hover { color: var(--violet); }

.map {
  margin-top: 20px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, var(--paper) 0 14px, rgba(75, 0, 130, 0.035) 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}
.map iframe { width: 100%; height: 100%; border: 0; }
.map__soon { font-size: 14px; color: var(--ink-soft); max-width: 34ch; margin: 0; }

/* --------------------------------------------------------------- SOCIAL --- */
.socials { display: flex; gap: 12px; }
.social {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.social svg { width: 18px; height: 18px; }
.social:hover { color: #fff; background: var(--violet); border-color: var(--violet); transform: translateY(-2px); }
.section--dark .social, .footer .social { border-color: rgba(242, 242, 242, 0.2); color: rgba(242, 242, 242, 0.86); }
.footer .social:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* --------------------------------------------------------------- FOOTER --- */
.footer {
  background: var(--bg-deep);
  color: rgba(242, 242, 242, 0.7);
  padding-block: clamp(52px, 7vw, 80px) 0;
}
.footer a { color: rgba(242, 242, 242, 0.7); transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--gold-lite); }
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__brand .brand { color: var(--ice); }
.footer__tag { margin-top: 16px; font-size: 14.5px; max-width: 34ch; }
.footer__h {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lite);
  margin: 0 0 16px;
}
.footer__list { display: grid; gap: 11px; font-size: 14.5px; }
.footer__list a { display: inline-block; min-height: 24px; }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 60px);
  padding-block: 24px;
  border-top: 1px solid rgba(242, 242, 242, 0.11);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(242, 242, 242, 0.5);
}

/* ------------------------------------------------------------- WHATSAPP --- */
.wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(75, 0, 130, 0.75);
  transform: scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease),
              background-color 0.35s var(--ease);
}
.wa.is-in { transform: scale(1); opacity: 1; pointer-events: auto; }
.wa:hover { background: var(--gold); color: var(--ink); transform: scale(1.07); }
.wa svg { width: 27px; height: 27px; }
.wa::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  opacity: 0;
  animation: waPulse 3.2s var(--ease) infinite;
}
@keyframes waPulse {
  0% { opacity: 0.7; transform: scale(0.9); }
  70%, 100% { opacity: 0; transform: scale(1.3); }
}
@media (min-width: 900px) { .wa { right: 28px; bottom: 28px; } }

/* ------------------------------------------------------------ ARRIVÉE --- */
/* Le voile se lève ici : la chaleur du portail se dissout dans le blanc. */
.arrival {
  position: relative;
  padding-block: clamp(84px, 13vh, 148px) clamp(72px, 10vw, 126px);
  background: linear-gradient(180deg, #F8ECD6 0%, #F8F3E8 20%, var(--ice) 58%);
}
/* Le titre ne s'étire pas sur 1200 px : il se casse là où il respire. */
.arrival__title { max-width: 15ch; }

.arrival__grid {
  display: grid;
  align-items: start;   /* sinon la grille étire les blocs à la hauteur de la ligne */
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
  margin-top: clamp(28px, 4vw, 46px);
}
@media (min-width: 900px) {
  .arrival__grid {
    grid-template-columns: 1.06fr 0.94fr;
    gap: clamp(44px, 6vw, 88px);
  }
  /* Le chapô est plus gros : on l'aligne optiquement sur la colonne de droite. */
  .arrival__main .lead { margin-top: 0.3em; }
}
.arrival__main .lead { margin: 0; }

.arrival__aside {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  max-width: 48ch;
}
.arrival__aside p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
}

.arrival__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(24px, 4vw, 40px);
  margin-top: clamp(30px, 3.6vw, 44px);
}
.arrival__scope {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------------------- PAGE HEADER ------ */
.page-head {
  padding-top: clamp(130px, 17vh, 190px);
  padding-bottom: clamp(36px, 5vw, 58px);
}
.page-head .lead { margin-top: 22px; }

/* ----------------------------------------------------------- RESPONSIVE --- */
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: flex; }
  html { scroll-padding-top: 80px; }
}
@media (min-width: 861px) {
  .drawer { display: none; }
}

/* Réduction de mouvement : on ne coupe QUE les effets intrusifs.
   Les micro-interactions restent — Windows active souvent ce réglage. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portal { height: auto; }
  .portal__stage { position: relative; height: auto; min-height: 100vh; }
  .portal__cue::after, .wa::after, .portal__dust span { animation: none; }
  [data-reveal] { transition-duration: 0.3s; }
}

/* Impression — l'artiste imprimera sa fiche */
@media print {
  .header, .drawer, .wa, .portal, .footer, .filters, .lb { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   COUCHE « LUXURY » — ajoutée après la base.
   Direction retenue : Luxury / Chic. Un geste par section, jamais d'empilement.
   ========================================================================== */

/* ------------------------------------------------------- CURSEUR RÉTICULE - */
/* Viseur d'appareil photo : il cadre, il verrouille. Uniquement sur pointeur
   fin — jamais sur tactile, où il n'aurait aucun sens. */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor body,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor input,
  html.has-cursor select,
  html.has-cursor textarea,
  html.has-cursor label,
  html.has-cursor .work { cursor: none; }
}

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 9500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.cursor.is-on { opacity: 1; }

.cursor__box {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out);
}
.cursor__c {
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--ink);
  opacity: 0.3;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cursor__c.tl { top: 0; left: 0; border-bottom: 0; border-right: 0; }
.cursor__c.tr { top: 0; right: 0; border-bottom: 0; border-left: 0; }
.cursor__c.bl { bottom: 0; left: 0; border-top: 0; border-right: 0; }
.cursor__c.br { bottom: 0; right: 0; border-top: 0; border-left: 0; }
/* Un anneau prend le relais des équerres quand la cible est arrondie
   (pilule, cercle) : des angles droits sur un bouton rond sonneraient faux. */
.cursor__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
  border-radius: var(--cursor-r, 0px);
  opacity: 0;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease),
              border-radius 0.34s var(--ease-out);
}

/* Verrouillage : les équerres s'ouvrent jusqu'aux angles de la cible. */
.cursor.is-lock .cursor__c { opacity: 1; border-color: var(--gold-text); }
.cursor.is-lock .cursor__ring { border-color: var(--gold-text); }
.cursor.is-round .cursor__c { opacity: 0; }
.cursor.is-round .cursor__ring { opacity: 0.95; }

/* Le point reste sur le pointeur réel pendant que le cadre épouse la cible :
   on sait toujours où l'on pointe. */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 9502;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease),
              width 0.25s var(--ease), height 0.25s var(--ease),
              margin 0.25s var(--ease);
  will-change: transform;
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-lock { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold-text); }

/* Au-dessus d'une section sombre */
.cursor.on-dark .cursor__c,
.cursor.on-dark .cursor__ring { border-color: rgba(242, 242, 242, 0.85); }
.cursor.on-dark.is-lock .cursor__c,
.cursor.on-dark.is-lock .cursor__ring { border-color: var(--gold-lite); }
.cursor-dot.on-dark { background: var(--ice); }
.cursor-dot.on-dark.is-lock { background: var(--gold-lite); }

/* Cadrage d'une œuvre : le viseur s'ouvre, sans épouser toute la carte. */
.cursor.is-frame .cursor__box { width: 76px; height: 76px; }
.cursor.is-frame .cursor__c { width: 17px; height: 17px; }

.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 9501;
  pointer-events: none;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
  will-change: transform;
}
.cursor-label.is-on { opacity: 0.78; }

/* La taille est pilotée en ligne par le JS : on ne transitionne que ce
   qu'il faut, sinon le cadre traîne derrière le pointeur. */
.cursor__box { transition: width 0.34s var(--ease-out), height 0.34s var(--ease-out),
                       transform 0.2s var(--ease); }
/* Clic : le cadre se resserre, retour tangible de l’action. */
.cursor.is-press .cursor__box { transform: translate(-50%, -50%) scale(0.9); }
.cursor__c { transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease),
             width 0.34s var(--ease-out), height 0.34s var(--ease-out); }
.cursor-label.on-dark { color: var(--gold-lite); text-shadow: 0 0 10px rgba(7, 9, 13, 0.9); }

/* ------------------------------------------------- FILET DE PROGRESSION --- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 95;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold-text) 0%, var(--gold) 45%, var(--gold-lite) 100%);
  pointer-events: none;
}

/* ---------------------------------------------- TITRES : ENTRÉE MOT À MOT - */
/* Défense obligatoire : si le JS ne découpe rien, le titre doit rester
   parfaitement lisible — il ne doit JAMAIS hériter de l'opacity 0 du reveal. */
[data-split] { opacity: 1 !important; transform: none !important; }

/* Le cache : le mot monte de derrière lui. Le rembourrage bas empêche que
   les jambages (g, j, p) soient rognés par l'overflow. */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-out), opacity 0.55s var(--ease-out);
}
.word.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------- LUMIÈRE SUR L'ŒUVRE --- */
/* Le sujet même du site : la lumière traverse la pièce et la révèle. */
.work__media::after {
  content: "";
  position: absolute;
  inset: -12% -32%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-72%) rotate(8deg);
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.4) 47%,
    rgba(255, 244, 214, 0.26) 53%,
    rgba(255, 255, 255, 0) 63%);
  transition: transform 1.15s var(--ease-out), opacity 0.4s var(--ease);
}
.work:hover .work__media::after,
.work:focus-visible .work__media::after {
  opacity: 1;
  transform: translateX(72%) rotate(8deg);
}
.col-card__media::after {
  content: "";
  position: absolute;
  inset: -22% -32%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-72%) rotate(8deg);
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 60%);
  transition: transform 1.2s var(--ease-out), opacity 0.4s var(--ease);
}
.col-card:hover .col-card__media::after { opacity: 1; transform: translateX(72%) rotate(8deg); }

/* ----------------------------------------------------------- PARALLAXE --- */
/* L’échelle de base est posée en CSS : sans elle, l’image sauterait au
   premier passage du rAF. Le JS ne fait qu’ajouter le décalage vertical. */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.09);
}

/* ------------------------------------------------------ TRANSITION PAGE -- */
/* Natif là où c'est disponible ; ailleurs la navigation reste instantanée.
   Aucun JS ne retarde le clic : pas de page blanche possible. */
@view-transition { navigation: auto; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: vtOut 0.3s var(--ease) both; }
::view-transition-new(root) { animation: vtIn 0.55s var(--ease-out) both; }

/* -------------------------------------------------------------- MARQUE --- */
.brand {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.brand__mark {
  width: 34px;
  height: auto;
  flex: none;
  transition: transform 0.55s var(--ease-out), filter 0.45s var(--ease);
}
.header.is-solid .brand__mark { width: 30px; }
.brand:hover .brand__mark {
  transform: rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 3px 10px rgba(181, 148, 16, 0.5));
}
.brand__text { display: flex; flex-direction: column; gap: 3px; }
/* Sur le portail sombre, l'or du monogramme est éclairci d'un cran */
.header.on-dark .brand__mark { filter: brightness(1.22) saturate(0.92); }

/* Le cachet gravé : le lockup complet, posé sur fond clair uniquement */
.seal {
  display: block;
  width: clamp(148px, 20vw, 212px);
  margin: 0 auto clamp(26px, 4vw, 42px);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.seal.is-revealed { opacity: 1; transform: none; }

/* Cadre qui recadre : l'image bouge en parallaxe, le cadre ne bouge pas. */
.clip {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.clip img { display: block; width: 100%; border-radius: 0; box-shadow: none; }

/* Dans le pied de page sombre, le monogramme est éclairci comme dans l'en-tête */
.footer .brand__mark { filter: brightness(1.25) saturate(0.9); }
.footer .brand { color: var(--ice); }

.footer__mark {
  width: 54px;
  height: auto;
  margin-bottom: 18px;
  filter: brightness(1.25) saturate(0.9);
}

/* ------------------------------------------ MICRO-INTERACTIONS DIVERSES -- */
.footer__list a { position: relative; }
.footer__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.footer__list a:hover::after { transform: scaleX(1); transform-origin: left; }

.social svg { transition: transform 0.45s var(--ease-out); }
.social:hover svg { transform: scale(1.12) rotate(-6deg); }

.chip { position: relative; overflow: hidden; }
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--violet-dim);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.38s var(--ease-out);
}
.chip[aria-pressed="true"]::before { display: none; }
.chip:hover::before { transform: scaleY(1); }
.chip > * { position: relative; }

/* Le bouton magnétique reçoit son décalage en style inline : on retire la
   transition sur transform pour qu'il colle au curseur sans traîner. */
.btn.is-magnetic { transition: box-shadow 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease); }

/* ---------------------------------------------- RESPECT DU MOUVEMENT ----- */
@media (prefers-reduced-motion: reduce) {
  .word { opacity: 1; transform: none; transition: none; }
  .work__media::after, .col-card__media::after { display: none; }
  [data-parallax] { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media print {
  .cursor, .cursor-label, .progress { display: none !important; }
}

/* ============================================================================
   MÉTÉORES — portage vanilla du composant « Meteors » de Magic UI.
   Même géométrie que l'original : un point de 2px tourné à 215°, une traîne
   en dégradé, translation le long de l'axe local. Le conteneur doit être
   position:relative + overflow:hidden pour que les traînées soient coupées net.
   ========================================================================== */
.meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.meteor {
  position: absolute;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 8px currentColor;
  transform: rotate(215deg) translateX(0);
  animation-name: meteor;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}
.meteor::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 64px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, currentColor, transparent);
}
@keyframes meteor {
  0%   { transform: rotate(215deg) translateX(0);      opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: rotate(215deg) translateX(-540px); opacity: 0; }
}

/* Le ciel de nuit de la page Contact */
.page-head--night {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(56px, 8vw, 96px);
  color: rgba(242, 242, 242, 0.86);
  background:
    radial-gradient(125% 150% at 50% -10%, #1d2a44 0%, #131b2c 46%, var(--bg-deep) 100%);
}
.page-head--night > .wrap { position: relative; z-index: 1; }
.page-head--night .eyebrow { color: var(--gold-lite); }
.page-head--night .eyebrow::after { background: var(--gold); }
.page-head--night h1 { color: var(--ice); }
.page-head--night .lead { color: rgba(242, 242, 242, 0.82); }

@media (prefers-reduced-motion: reduce) {
  .meteors { display: none; }
}
@media print {
  .meteors { display: none !important; }
}

/* ============================================================================
   ART NOUVEAU — typographie des titres
   Les titres passent au serif calligraphique (Cormorant Garamond) ; les deux
   grands titres d'appel prennent la plume Art nouveau (Berkshire Swash).
   La palette ne change pas : encre, or et glace comme avant.
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--title);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
}
.pull { font-family: var(--title); }

.h-1 {
  font-weight: 600;
  letter-spacing: 0.004em;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
}
.h-2 { font-weight: 600; letter-spacing: 0.006em; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.h-3 {
  font-family: var(--title);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(1.28rem, 1.7vw, 1.5rem);
  line-height: 1.2;
}

/* Les deux moments d'appel : la plume Art nouveau, teintée d'or */
.h-display {
  font-family: var(--accent);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.04;
  font-size: clamp(2.9rem, 7vw, 5.6rem);
}
.arrival__title {
  max-width: 18ch;
  color: var(--violet);
}
/* Couleur des titres : toujours la palette, jamais le noir.
   Violet profond sur les fonds clairs (11,57:1 sur glace),
   or clair sur les fonds de nuit (10:1). Les libellés qui ont leur propre
   couleur (.card__title, .lb__title, .footer__h) ne sont pas touchés. */
h1, h2, h3, h4 { color: var(--violet); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.page-head--night h1, .page-head--night h2,
.section--dark .h-display,
.page-head--night .h-display { color: var(--gold-lite); }

/* Cormorant a un œil plus petit : on remonte un cran la ligne d'accroche
   pour garder l'équilibre optique avec les nouveaux titres. */
.footer__h { font-family: var(--display); }   /* les libellés du pied restent sans */

/* ============================================================================
   SOLEILS — motifs Art nouveau (or), pour donner de la vie à l'accueil
   Rayons décoratifs, sous le texte, jamais gênants. Coupés à l'impression
   et respectueux de prefers-reduced-motion.
   ========================================================================== */
/* La section ne déborde plus sur le portail : le soleil reste chez lui. */
.arrival {
  overflow: hidden;
  padding-block: clamp(72px, 10vh, 120px) clamp(170px, 20vw, 250px);
}
.arrival > .wrap { position: relative; z-index: 1; }

/* Soleil levant posé sur le bas de la section : il habite l'espace sous le
   texte au lieu de le traverser, et s'efface en montant vers le titre. */
.arrival::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: min(640px, 118%);
  aspect-ratio: 600 / 340;
  transform: translateX(-50%);
  background: center bottom / contain no-repeat url("assets/img/brand/sun-rise.svg");
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(0deg, #000 18%, rgba(0,0,0,.35) 48%, transparent 72%);
          mask-image: linear-gradient(0deg, #000 18%, rgba(0,0,0,.35) 48%, transparent 72%);
  animation: sunGlow 9s var(--ease) infinite alternate;
}
/* La ligne d'horizon : le soleil se pose dessus, la coupe devient voulue. */
.arrival::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 22%, var(--gold-lite) 50%, var(--gold) 78%, transparent 100%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
/* Sur grand écran, le soleil se lève au centre, sous les deux colonnes :
   il occupe l'air du bas sans passer derrière les boutons ni les textes. */
@media (min-width: 900px) {
  .arrival::before { width: min(760px, 62%); }
}
@keyframes sunGlow {
  from { opacity: 0.45; }
  to   { opacity: 0.68; }
}

/* Halo de soleil derrière le cachet, section « Commandes » */
#commande { position: relative; overflow: hidden; }
#commande > .wrap { position: relative; z-index: 1; }
#commande::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(-140px, -8vw, -60px);
  width: min(620px, 92vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: center / contain no-repeat url("assets/img/brand/sun-burst.svg");
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

/* Petit soleil levant en pied de la section Collections (fond papier) */
#collections { position: relative; overflow: hidden; }
#collections > .wrap { position: relative; z-index: 1; }
#collections::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: min(420px, 60vw);
  aspect-ratio: 600 / 340;
  background: center / contain no-repeat url("assets/img/brand/sun-rise.svg");
  transform: rotate(180deg);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .arrival::before { animation: none; }
}

/* ============================================================================
   COLLECTIONS — l'œuvre entière, posée sur un passe-partout
   Le cadre 4:3 ne change pas (la grille reste identique), mais l'image n'est
   plus rognée : elle est contenue et centrée sur un fond papier, avec une
   ombre portée qui suit la silhouette réelle de l'œuvre.
   ========================================================================== */
.col-card__media {
  padding: clamp(12px, 5%, 22px);
  background:
    radial-gradient(120% 95% at 50% 32%, #FFFFFF 0%, var(--paper) 52%, #ECE8DF 100%);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.col-card__media img {
  object-fit: contain;
  object-position: center;
  filter: saturate(0.92) drop-shadow(0 10px 16px rgba(22, 19, 27, 0.22));
}
.col-card:hover .col-card__media img {
  transform: scale(1.03);
  filter: saturate(1.06) drop-shadow(0 16px 24px rgba(22, 19, 27, 0.3));
}
@media print {
  .arrival::before, .arrival::after, #commande::before, #collections::after { display: none !important; }
}