/* ==========================================================================
   NOCTVRNA — feuille de style unique (production)
   Méthodologie : BEM (Block__Element--Modifier), organisation par
   composant, mobile-first (styles de base = mobile, min-width ajoute
   la complexité pour les écrans plus grands).

   Pourquoi UN SEUL fichier plutôt que plusieurs fichiers importés :
   chaque fichier CSS chargé séparément (via plusieurs <link> ou via
   @import) coûte une requête HTTP supplémentaire, ce qui ralentit
   l'affichage. Pour un site de cette taille, un seul fichier reste la
   meilleure option de performance. Les composants sont donc organisés
   en sections clairement délimitées ci-dessous ; le détail de chaque
   composant existe aussi en fichier séparé dans /components/ (à titre
   de documentation et pour faciliter la maintenance), mais c'est bien
   CE fichier qui est chargé par le site.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap");

/* ---------- 1. TOKENS ---------- */
:root {
  --bg: #070707;
  --text-primary: #f2f2f0;
  --text-secondary: #a8a8a4;
  --text-tertiary: #6b6b68;
  --border: #1a1a1a;
  --border-strong: #333;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --gap: 28px;
}

/* ---------- 2. RESET / BASE ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a {
  color: inherit;
  text-decoration: none;
}

/* Petites classes utilitaires (hors BEM à dessein : trop génériques
   pour être des "blocs", ce sont des aides de mise en page ponctuelles) */
.divider {
  max-width: 1600px;
  margin: 26px auto 40px;
  padding: 0 44px;
}
.divider::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--border);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 22px;
}

.headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 4vw, 44px);
}

.button {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  padding: 12px 26px;
  color: var(--text-primary);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.25s ease;
}
.button:hover {
  border-color: #fff;
}

/* ==========================================================================
   COMPOSANT : nav
   (voir aussi assets/css/components/_nav.css)
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px; /* mobile d'abord */
  transition:
    background 0.35s ease,
    color 0.25s ease;
}
.nav--on-dark {
  color: #f2f2f0;
}
.nav--on-light {
  color: #0a0a0a;
}
.nav--solid {
  background: rgba(7, 7, 7, 0.92);
  color: #f2f2f0;
}

.nav__logo,
.nav__logo-slot {
  height: 34px;
  width: 137px; /* mobile */
  flex-shrink: 0;
  margin-left: -12px; /* le tracé de la lettre a une marge interne symétrique
    d'environ 8,6% ; ce décalage aligne visuellement l'encre sur le bord
    gauche du texte de la page */
}
.nav__logo {
  display: block;
}
.nav__logo svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.nav__logo-slot {
  visibility: hidden;
} /* réserve l'espace ; le logo animé
  de la page d'accueil se positionne dessus en JS */

.nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
}
.nav__link {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.72;
  transition: opacity 0.4s ease;
}
.nav__link--active {
  opacity: 1;
}
.nav__link:hover {
  opacity: 1;
}
.nav__cart {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__cart-count {
  font-family: var(--sans);
  font-size: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.intro-active .nav__links {
  opacity: 0;
}
.nav__links--visible {
  opacity: 1;
  transition: opacity 0.9s ease;
}

@media (min-width: 641px) {
  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px 44px;
  }
  .nav__logo,
  .nav__logo-slot {
    height: 40px;
    width: 161px;
    margin-left: -14px;
  }
  .nav__links {
    gap: 36px;
  }
  .nav__link {
    font-size: 12px;
  }
}

/* ==========================================================================
   COMPOSANT : footer
   ========================================================================== */
.footer {
  max-width: 1600px;
  margin: 0 auto;
  padding: 60px 44px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* ==========================================================================
   COMPOSANT : carousel
   Bloc générique réutilisé tel quel (modificateur --hero) sur la page
   d'accueil, et (modificateur --gallery) sur la page projet — même
   logique d'interaction partout, traitement visuel adapté au contexte.
   (voir aussi assets/css/components/_carousel.css)
   ========================================================================== */
.project-gallery {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 44px 60px;
}

.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  color: #f2f2f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.carousel__arrow:hover {
  opacity: 1;
}
.carousel__arrow--prev {
  left: -30px;
}
.carousel__arrow--next {
  right: -30px;
}
.carousel__arrow svg {
  width: 22px;
  height: 22px;
}

/* -- modificateur : carousel--hero (page d'accueil, plein écran) -- */
.carousel--hero .carousel__track {
  height: 100vh;
  gap: 0;
  scroll-snap-type: x mandatory;
  overflow-y: hidden;
}
.carousel--hero .carousel__slide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  background: #101010;
  background-image: radial-gradient(
    ellipse at 50% 30%,
    #1c1c1c 0%,
    #0a0a0a 60%
  );
  overflow: hidden;
}
.carousel--hero .carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel--hero .carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
.carousel--hero .carousel__arrow--prev {
  left: 24px;
}
.carousel--hero .carousel__arrow--next {
  right: 24px;
}

/* -- modificateur : carousel--gallery (page projet, une photo à la fois) -- */
.carousel--gallery .carousel__track {
  height: 52vh;
  gap: 0;
  scroll-snap-type: x mandatory;
} /* mobile */
.carousel--gallery .carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 52vh;
  scroll-snap-align: start;
}
.carousel--gallery .carousel__slide-frame {
  width: 100%;
  height: calc(52vh - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.carousel--gallery .carousel__slide-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.carousel--gallery .carousel__arrow--prev {
  left: 4px;
}
.carousel--gallery .carousel__arrow--next {
  right: 4px;
}
.carousel__caption {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 14px;
  text-align: center;
}

@media (min-width: 761px) {
  .carousel--gallery .carousel__track,
  .carousel--gallery .carousel__slide {
    height: 78vh;
  }
  .carousel--gallery .carousel__slide-frame {
    height: calc(78vh - 40px);
  }
}

/* ==========================================================================
   COMPOSANT : caption (petit texte sur une image plein écran)
   ========================================================================== */
.caption {
  position: absolute;
  left: 48px;
  bottom: 40px;
  z-index: 15;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.caption--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   COMPOSANT : intro-logo (logo animé, page d'accueil uniquement)
   ========================================================================== */
.intro-logo {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  cursor: pointer;
}
.intro-skip {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 310;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(242, 242, 240, 0.4);
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.intro-skip:hover {
  color: rgba(242, 242, 240, 0.8);
}
.intro-skip--hidden {
  opacity: 0;
  pointer-events: none;
}

body.intro-active {
  overflow: hidden;
  height: 100vh;
}

/* ==========================================================================
   COMPOSANT : page-header (en-tête de la page Projects)
   ========================================================================== */
.page-header {
  max-width: 1600px;
  margin: 0 auto;
  padding: 150px 44px 30px; /* mobile */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}
.page-header__title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}
.page-header__note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--text-tertiary);
}
@media (min-width: 641px) and (max-width: 900px) {
  .page-header {
    padding-top: 130px;
  }
}
@media (min-width: 901px) {
  .page-header {
    padding-top: 168px;
  }
}

/* ==========================================================================
   COMPOSANT : filter-bar (recherche + filtres, page Projects)
   ========================================================================== */
.filter-bar {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 44px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
.filter-bar span {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-bar span:hover {
  color: var(--text-secondary);
}
.filter-bar svg {
  width: 12px;
  height: 12px;
  opacity: 0.75;
}
.filter-bar__search {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-bar__input {
  width: 110px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.03em;
  transition: width 0.2s ease;
}
.filter-bar__input::placeholder {
  color: var(--text-tertiary);
}
.filter-bar__input:focus {
  outline: none;
  width: 190px;
}

.filter-bar__panel {
  display: none;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 44px 0;
}
.filter-bar__panel--open {
  display: flex;
}
.filter-bar__group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  flex-wrap: wrap;
}
.filter-bar__group-label {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.filter-bar__chip {
  cursor: pointer;
  padding: 3px 1px;
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
}
.filter-bar__chip--active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

/* ==========================================================================
   COMPOSANT : project-grid (grille de la page Projects)
   ========================================================================== */
.project-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 44px 140px;
}
.project-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* mobile */
  column-gap: 32px;
  row-gap: 48px;
}
.project-grid__item {
  cursor: pointer;
}
.project-grid__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  margin-bottom: 16px;
}
.project-grid__image {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #111;
}
.project-grid__image img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.project-grid__item:hover .project-grid__image img {
  transform: scale(1.035);
}
.project-grid__type {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 18px;
}
.project-grid__meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  margin-top: 4px;
}
.project-grid__note {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.project-grid__note::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  display: inline-block;
  flex-shrink: 0;
}

@media (min-width: 901px) {
  .project-grid__list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 56px;
    row-gap: 72px;
  }
}

/* ==========================================================================
   COMPOSANT : project-header (en-tête de la page projet)
   ========================================================================== */
.project-header {
  max-width: 1000px;
  margin: 0 auto;
  padding: 150px 44px 90px;
} /* mobile */
.project-header__breadcrumb {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 26px;
}
.project-header__breadcrumb a {
  color: var(--text-secondary);
}
.project-header__breadcrumb a:hover {
  color: var(--text-primary);
}
.project-header__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 22px;
} /* mobile */
.project-header__meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 30px;
}
.project-header__meta span {
  text-transform: uppercase;
}
.project-header__description {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 640px;
}
.project-header__description p:not(:last-child) {
  margin-bottom: 1.3em;
}

@media (min-width: 641px) {
  .project-header__title {
    font-size: 48px;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .project-header {
    padding-top: 130px;
  }
}
@media (min-width: 901px) {
  .project-header {
    padding-top: 180px;
  }
}

/* ==========================================================================
   COMPOSANT : cta-banner (bandeau d'appel à l'action — expo/publication,
   et "voir les tirages")
   ========================================================================== */
.cta-banner {
  max-width: 1000px;
  margin: 60px auto 0;
  padding: 44px 44px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.cta-banner--plain {
  border-top: none;
  margin-top: 0;
}
.cta-banner__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  color: var(--text-secondary);
}
.cta-banner__button {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(242, 242, 240, 0.3);
  padding: 13px 26px;
  white-space: nowrap;
  transition: border-color 0.25s ease;
}
.cta-banner__button:hover {
  border-color: #fff;
}

/* ==========================================================================
   COMPOSANT : project-pager (précédent / suivant, bas de page projet)
   ========================================================================== */
.project-pager {
  max-width: 1600px;
  margin: 100px auto 0;
  padding: 50px 44px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
} /* mobile */
.project-pager__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.project-pager__link--next {
  text-align: left;
  align-items: flex-start;
} /* mobile */
.project-pager__label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.project-pager__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  transition: opacity 0.3s ease;
}
.project-pager__link:hover .project-pager__title {
  opacity: 0.7;
}

@media (min-width: 761px) {
  .project-pager {
    grid-template-columns: 1fr 1fr;
  }
  .project-pager__link--next {
    text-align: right;
    align-items: flex-end;
  }
}

/* ==========================================================================
   COMPOSANT : page-content (conteneur étroit — About, Prints)
   ========================================================================== */
.page-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 150px 24px 90px;
} /* mobile */

.bio p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.bio p:first-of-type::first-letter {
  font-size: 46px;
  float: left;
  line-height: 0.8;
  padding-right: 10px;
  padding-top: 6px;
  color: var(--text-primary);
  font-style: normal;
}
.bio__signature {
  color: var(--text-primary) !important;
  margin-top: 8px !important;
}
/* Note : le corps du texte "bio" est généré depuis un champ kirbytext
   (texte riche éditable dans le Panel) ; les <p> qu'il produit n'ont pas
   de classe individuelle. On les cible donc par le sélecteur de balise
   "p" à l'intérieur du bloc .bio plutôt que par un élément BEM dédié —
   exception pragmatique nécessaire pour du contenu éditorial libre. */

.contact-list {
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.contact-list__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.contact-list__label {
  color: var(--text-tertiary);
}
.contact-list__value {
  color: var(--text-secondary);
}
.contact-list__row a {
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease;
}
.contact-list__row a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.exhibition-list {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.exhibition-list__heading {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-bottom: 26px;
}
.exhibition-list__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.exhibition-list__row:hover .exhibition-list__title {
  opacity: 0.7;
}
.exhibition-list__date {
  width: 78px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exhibition-list__year {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-secondary);
}
.exhibition-list__month {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.exhibition-list__main {
  flex: 1;
}
.exhibition-list__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  transition: opacity 0.3s ease;
}
.exhibition-list__venue {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

@media (min-width: 641px) {
  .page-content {
    padding: 168px 48px 100px;
  }
}

/* ==========================================================================
   COMPOSANT : print-info (fiche technique partagée, affichée en haut de
   la page Cart)
   ========================================================================== */
.print-info {
  max-width: 640px;
}
.print-info__section {
  padding: 22px 0;
}
.print-info__section:first-child {
  padding-top: 0;
}
.print-info__section + .print-info__section {
  border-top: 1px solid var(--border);
}
.print-info__label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.print-info__body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.print-info__note {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.print-info__body ul {
  list-style: none;
}
.print-info__body li {
  line-height: 1.7;
}

/* ==========================================================================
   COMPOSANT : print-cta (icône "Add to Cart", en ligne avec chaque photo
   imprimable dans le carrousel de la page projet — option A validée :
   icône seule, bascule vers un check au clic, pas de bouton texte)
   ========================================================================== */
.print-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.print-cta__price {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}
.print-cta__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(242, 242, 240, 0.35);
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.print-cta__icon svg {
  width: 16px;
  height: 16px;
}
.print-cta__icon:hover {
  border-color: #fff;
}
.print-cta__icon-added {
  display: none;
}
.print-cta__icon--added {
  background: var(--text-primary);
  color: #0a0a0a;
  border-color: var(--text-primary);
}
.print-cta__icon--added .print-cta__icon-default {
  display: none;
}
.print-cta__icon--added .print-cta__icon-added {
  display: block;
}

/* ==========================================================================
   COMPOSANT : cart-panel (contenu de la page Cart — vide ou rempli,
   entièrement piloté par JS depuis le panier stocké dans le navigateur ;
   voir assets/js/cart.js)
   ========================================================================== */
.cart-panel__empty {
  text-align: center;
  padding: 60px 0 20px;
}
.cart-panel__empty-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  color: var(--text-secondary);
  margin-bottom: 26px;
}

.cart-panel__list {
  max-width: 760px;
  margin: 0 auto;
}
.cart-panel__row {
  display: grid;
  grid-template-columns: 90px 1fr 100px;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.cart-panel__row-thumb {
  width: 90px;
  height: 112px;
  overflow: hidden;
  background: #111;
}
.cart-panel__row-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
}
.cart-panel__row-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.qty-stepper button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease;
  flex-shrink: 0;
}
.qty-stepper button:hover {
  border-color: #fff;
}
.qty-stepper__value {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-primary);
  width: 16px;
  text-align: center;
}

.cart-panel__totals-row {
  display: grid;
  grid-template-columns: 90px 1fr 100px;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  max-width: 760px;
  margin: 0 auto;
}
.cart-panel__totals-row:first-of-type {
  border-top: 1px solid var(--border-strong);
  padding-top: 20px;
  margin-top: 6px;
}
.cart-panel__totals-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cart-panel__totals-value {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text-primary);
  text-align: center;
}
.cart-panel__order {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}