/* 55 Roman (Regular) */
@font-face {
  font-family: 'TTFHN';
  src: url('fonts/HelveticaNeueLTStd-Roman.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'HN-55-Roman';
  src: url('fonts/HelveticaNeueLTStd-Roman.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
}

/* 65 Medium */
@font-face {
  font-family: 'HN-65-Medium';
  src: url('fonts/HelveticaNeueLTStd-Md.otf') format('opentype');
  font-style: normal;
  font-weight: 500;
}

/* 65 Medium Italic */
@font-face {
  font-family: 'HN-65-Medium-It';
  src: url('fonts/HelveticaNeueLTStd-MdIt.otf') format('opentype');
  font-style: italic;
  font-weight: 500;
}

/* 35 Thin */
@font-face {
  font-family: 'HN-35-Thin';
  src: url('fonts/HelveticaNeueLTStd-Th.otf') format('opentype');
  font-style: normal;
  font-weight: 300;
}

/* 35 Thin Italic */
@font-face {
  font-family: 'HN-35-Thin-It';
  src: url('fonts/HelveticaNeueLTStd-ThIt.otf') format('opentype');
  font-style: italic;
  font-weight: 300;
}

/* 25 Ultra Light */
@font-face {
  font-family: 'HN-25-UltLt';
  src: url('fonts/HelveticaNeueLTStd-UltLt.otf') format('opentype');
  font-style: normal;
  font-weight: 200;
}

/* 25 Ultra Light Italic */
@font-face {
  font-family: 'HN-25-UltLt-It';
  src: url('fonts/HelveticaNeueLTStd-UltLtIt.otf') format('opentype');
  font-style: italic;
  font-weight: 200;
}

/* 45 Light */
@font-face {
  font-family: 'HN-45-Light';
  src: url('fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
  font-style: normal;
  font-weight: 300;
}

/* 45 Light Italic */
@font-face {
  font-family: 'HN-45-Light-It';
  src: url('fonts/HelveticaNeueLTStd-LtIt.otf') format('opentype');
  font-style: italic;
  font-weight: 300;
}

/* 75 Bold */
@font-face {
  font-family: 'HN-75-Bold';
  src: url('fonts/HelveticaNeueLTStd-Bd.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
}

/* 75 Bold Italic */
@font-face {
  font-family: 'HN-75-Bold-It';
  src: url('fonts/HelveticaNeueLTStd-BdIt.otf') format('opentype');
  font-style: italic;
  font-weight: 700;
}

/* 85 Heavy */
@font-face {
  font-family: 'HN-85-Heavy';
  src: url('fonts/HelveticaNeueLTStd-Hv.otf') format('opentype');
  font-style: normal;
  font-weight: 800;
}

/* 85 Heavy Italic */
@font-face {
  font-family: 'HN-85-Heavy-It';
  src: url('fonts/HelveticaNeueLTStd-HvIt.otf') format('opentype');
  font-style: italic;
  font-weight: 800;
}

/* 95 Black */
@font-face {
  font-family: 'HN-95-Black';
  src: url('fonts/HelveticaNeueLTStd-Blk.otf') format('opentype');
  font-style: normal;
  font-weight: 900;
}

/* 95 Black Italic */
@font-face {
  font-family: 'HN-95-Black-It';
  src: url('fonts/HelveticaNeueLTStd-BlkIt.otf') format('opentype');
  font-style: italic;
  font-weight: 900;
}

/* httpsstyle-desktop.css / httpsstyle-mobile.css */
#print-grid {
  display: none !important;
}



html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html, body {
  cursor: crosshair !important;
}

a:hover{
  cursor: crosshair !important;
}

/* quand on veut réactiver le scroll */
html.scroll-open,
body.scroll-open {
  overflow: auto;
}

body {
  background-color: #ffffff;
  color: #000000;
}

#body {
  width: 100%;
  height: 100%;
}

/* bloc principal centré dans l'écran */
#blockprincipal {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* texte au-dessus */
.text-wrapper {
  position: relative;
  z-index: 20;
  width: 80vw;
  max-width: 87.5em; /* 1400px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* chaque ligne de marque (div) */
.brand-line {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* H2 marque */
.brand-title {
  font-family: 'HN-65-Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 4.0625em; /* 65px */
  line-height: 1;
  text-transform: uppercase;
  margin: 0.05em 0;
  color: #000000;
  transition: color 0.2s ease;
  text-align: center;
  position: relative;
}

/* petit chiffre / texte en exposant à droite de la dernière lettre */
.brand-count {
  font-size: 0.18em;
  font-weight: 600;
  margin-left: 0.12em;
  position: relative;
  top: -3em;
}

.brand-soon {
  font-size: 0.18em;
  margin-left: 0.12em;
  position: relative;
  top: -3em;
}

/* hover gris */
.brand-title:hover {
  color: #808080;
}

/* canvas p5 derrière le texte */
#blockprincipal canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  pointer-events: none;
  z-index: 10;
}

/* offsets horizontaux */
.line-1 { transform: translateX( 5vw); }
.line-2 { transform: translateX( 0vw); }
.line-3 { transform: translateX(-6vw); }
.line-4 { transform: translateX( 5vw); }
.line-5 { transform: translateX( 5vw); }

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.375em; /* 70px */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5625em;
  box-sizing: border-box;
  z-index: 9999;
  pointer-events: none;
}

/* lien Instagram à gauche */
#footer-instagram {
  pointer-events: auto;
  font-family: 'HN-55-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease;
}

#footer-instagram:hover {
  color: #808080;
}

/* texte "dark" à droite */
#invert-toggle-text {
  pointer-events: auto;
  font-family: 'HN-55-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #000000;
  user-select: none;
  transition: color 0.2s ease;
}

#invert-toggle-text:hover {
  color: #808080;
}

/* inversion globale */
/* inversion globale UNIQUEMENT */
html.invert-all
 {
  filter: invert(1) hue-rotate(180deg) !important;
}

html.invert-all img
 {
  filter: invert(1) hue-rotate(180deg) !important;
}

html.invert-all .black-popup
 {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Header : logo gauche + clock droite */
#clock-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4.375em;
  background: transparent;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5625em;
  box-sizing: border-box;
}

/* Logo container à gauche */
#logo-container {
  pointer-events: auto;
  align-items: center;
  height: 100%;
  margin-top: 3.125em;
}

h1 {
  font-family: "HN-65-Medium";
  font-size: 1em;
  margin-top: -0.2em;
  display: flex;
  justify-content: space-between;
}

/* Logo */
#header-logo {
  height: 5em;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

/* Switch blanc sur invert */
.invert-all #header-logo {
  content: url('PNG/logowhite.png');
}

/* Horloge */
#clock-container {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#clock-header canvas {
  pointer-events: none;
  height: 5em;
  width: auto;
}

.galery {
  width: 100%;
  height: auto;
  margin-top: 8em;
}

/* produits générés : grille 5 x 3 */

.products-section {
  width: 100%;
}

/* 1 ligne de la grille (3 cases horizontales) */
.products-row {
  display: flex;
  width: 100%;
  gap: 1em;
  margin-top: 1.5em;
}

/* 1 case = 1/3 de la ligne + flex pour gérer le ferrage texte */
.product-cell {
  flex: 0 0 33.333%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* par défaut en haut */
  height: auto;
}

/* cas spécial : texte dont l'image correspondante est pile en dessous (même col, ligne+1) */
.text-near-image-below {
  justify-content: flex-end; /* texte/prix collés en bas de la cellule, au plus proche de l'image */
}

/* centrage horizontal du texte dans ce cas spécial */
.text-near-image-below .product-text,
.text-near-image-below .product-price, .text-near-image-below .product-more-desc {
  text-align: left;
}

/* texte à droite de l'image -> ferré à gauche */
.text-right-of-image .product-text,
.text-right-of-image .product-price,
.text-right-of-image .product-more-desc {
  text-align: left;
}

/* texte à gauche de l'image (optionnel) */
.text-left-of-image .product-text,
.text-left-of-image .product-price,
.text-left-of-image .product-more-desc {
  text-align: right;
}


.text-near-image-below .product-text,
.text-near-image-below .product-price,
.text-near-image-below .product-more-desc {
  text-align: left;
}

/* texte à droite de l'image -> ferré à gauche */
.text-right-of-image .product-text,
.text-right-of-image .product-price,
.text-right-of-image .product-more-desc {
  text-align: left;
}

/* texte à gauche de l'image (optionnel) */
.text-left-of-image .product-text,
.text-left-of-image .product-price,
.text-left-of-image .product-more-desc {
  text-align: right;
}

/* case de texte juste au-dessus de l'image dans la même colonne -> collée en bas */
.text-near-image-below {
  justify-content: flex-end;      /* bas de la cellule */
  align-items: flex-start;        /* ferré à gauche */
}

/* texte à droite de l'image -> bloc texte + prix alignés à gauche de la cellule */
.text-right-of-image {
  justify-content: flex-start;    /* en haut (ou center / flex-end selon ton goût) */
  align-items: flex-start;        /* ferré à gauche */
}

/* texte à gauche de l'image -> bloc texte + prix alignés à droite de la cellule */
.text-left-of-image {
  justify-content: flex-start;    /* en haut */
  align-items: flex-end;          /* ferré à droite */
}

/* texte au-dessus de l'image (cas générique, hors "near-image-below") */
.text-above-image {
  justify-content: flex-end;      /* collé en bas de la cellule de texte */
  align-items: flex-start;     /* à gauche */
}

/* texte en dessous de l'image -> collé en haut */
.text-below-image {
  justify-content: flex-start;    /* en haut */
  align-items: flex-start;        /* à gauche */
}


/* texte au-dessus de l'image (cas générique, hors cas image juste dessous) */
.text-above-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* texte en dessous de l'image -> collé en haut */
.text-below-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* image */
.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* texte produit */
.product-text {
  font-family: "HN-55-Roman";
  font-size: 2em;
  line-height: 1;
  color: #000000;
}

.containerglobal {
  position: relative;
  justify-content: center;
  margin-top: 12em;
  width: 80vw;
  max-width: 86em;
}

/* wrapper horizontal prix + read more */
.product-price-more {
  display: flex;
  align-items: center;      /* centre verticalement */
  gap: 1em;
  margin-top: 1em;
}

/* prix */
.product-price {
  font-family: "HN-65-Medium";
  font-size: 2em;
  line-height: 1;           /* important pour l’alignement */
  color: #000000;
}

/* on arrête de monter le € en exposant, ça décale tout */
.price-euro {
  font-size: 1em;           /* même taille que le nombre */
  vertical-align: baseline; /* pas de super */
}

/* READ MORE */
.product-more {
  font-family: 'HN-55-Roman';
  font-size: 2em;
  line-height: 1;           /* même ligne de base */
}


.product-more:hover {
  color: #808080;
}


.product-desc {
    width: 100%;
  font-size: 1em;
  font-family: 'HN-55-Roman';
}


.p5-product-desc {
  pointer-events: none;
  position: absolute;
  font-family: 'HN-55-Roman';
  font-size: 1em;
  line-height: 1.2;
  color: #000;
  background: transparent;
}

.product-desc {
  font-family: 'HN-55-Roman';
  font-size: 1em;
  /* si tu veux cacher le texte HTML tout en gardant la boîte : */
  /* opacity: 0; */
}

.black-popup {
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  pointer-events: none;
  z-index: 9998;
}

.product-more-desc {
    font-family:"HN-55-Roman";
  opacity: 0;
  pointer-events: none;
  margin-top: 1.5em;
}

.product-buy {
  margin-top: 1.5em;
}

.product-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  /* ratio 2:1 → largeur = 2 × hauteur */
  width: 10rem;           /* ajuste comme tu veux */
  height: 5rem;

}

a.product-buy-link {
  color: #fff ;
  text-decoration: none ;
  font-family: "HN-65-Medium", system-ui, sans-serif;
  font-size: 4em;
  margin-top:0.25em;

}



.product-buy-link:hover{
  color: #808080;
}

#print-image {
  display: none;
}

.dvd-overlay-canvas {
  position: fixed;
  top: 0;
  color: #000000;
  left: 0;
  pointer-events: none; /* important pour ne pas bloquer le site */
  z-index: 9999;
  font-family: 'HN-65-Medium';
}