* {transition:0s;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

@mixin flexbox() {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
}

@font-face {
   font-family: 'SuisseIntl';
   src: url('../fonts/SuisseIntl-Book-WebM.eot');
   src: url('../fonts/SuisseIntl-Book-WebM.eot?#iefix') format('embedded-opentype');
   src: url('../fonts/SuisseIntl-Book-WebM.woff') format('woff');
   src: url('../fonts/SuisseIntl-Book-WebM.woff2') format('woff2');
   src: url('../fonts/SuisseIntl-Book-WebM.ttf') format('truetype');
   font-weight:300;
   font-style:normal;
}


@-webkit-viewport {width: device-width;}
@-moz-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@-o-viewport {width: device-width;}
@viewport {width: device-width;}


@keyframes fade-in {
	from {opacity:0;}
	to {opacity:100;}
}
/* Variable */
:root {
  --color-dark:#000;
  --color-bright:#fff;
  --color-select:#000;
	
  --border-left:0px solid var(--color-dark);
  --border-top: 0px solid var(--color-dark);
  --border-bottom: 2px solid var(--color-dark);
	
  --padding:0px 0 0 0px;
  
}



/* Container */
html								{scroll-behavior: smooth;}
body                       {margin:auto;background-color: var(--color-bright); color: var(--color-dark);opacity: 0; animation: fade-in 0.8s ease-out 0.3s forwards;}
header					   {padding:20px;position:fixed;z-index:3;width:100%;background-color: var(--color-bright);}
section                    {width:100%;padding:160px 20px 20px;overflow:visible;}
footer                     {position:fixed;padding: 0px 10px 0px;width:100%;bottom:0;background-color: var(--color-bright);}
figure                     {margin: 0px;}
img                        {width:100%;display:block;}
figcaption                 {margin-top: 10px;}
video                      {width:100%;}
.trombinoscope             {width:25%;display:block;margin-bottom: 40px;}


/*Grid*/
.grid-index 			   {display:grid;gap:80px 10px;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;align-items: end;}
.grid-contact 		       {display:grid;gap:10px;grid-template-columns: 1fr 1fr;}


/*Typography*/
*						    {font-family:"SuisseIntl", Arial, sans-serif;font-weight: 300;}                    
h1, h2, p, li, a, button	{font-size:28px;line-height:1.2;letter-spacing:.010em;margin:0;padding:0;}
figcaption                  {font-size:12px;line-height:1.2;letter-spacing:.010em;}


/* Menu-desktop */
ul                        {width:100%;display:flex;justify-content:space-between;padding-inline-start: 0px;}
ul li                     {list-style:none;display: inline-block;}
ul li a                   {border-bottom:0px;display: inline-block;padding:0 0 12px 0;}
ul li a:hover             {border-bottom:var(--border-bottom);display: inline-block;padding:0 0 10px 0;}
ul li a.instagram         {margin-left:20px;}


/*selection*/
a                          {color:inherit;text-decoration:none;}
a:hover                    {text-decoration:none;}
.grid-contact a:hover      {text-decoration:underline;}
::selection                {color:var(--color-bright);background:var(--color-dark);}
::-moz-selection           {color:var(--color-bright);background:var(--color-dark);}
 

/*survol image homepage*/
.hover-preview             {position: fixed;inset:0;display:none;justify-content:center;align-items:center;z-index:9000;background:rgba(255,255,255,.0);pointer-events: none;padding: 20px;}

.hover-preview img,
.hover-preview video       {display:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 0px 0px rgba(0,0,0,0);background:var(--color-bright);}

/*Chargez plus homepage*/
.load-more                 {display: inline-block;margin: 30px auto 80px;padding:0px 0 10px 0px;border: 0px;background: white;cursor: pointer;}
.load-more:hover           {text-decoration:none;border-bottom:var(--border-bottom); padding: 0px 0 10px 0px;display: inline-block;}
@media (hover: none)       {.hover-preview {display:none !important; }}

/* Lightbox */
.lightbox 				{display:none;position:fixed;z-index:9999;inset:0;background:white;justify-content:center;align-items:center;padding:20px;touch-action:none;overscroll-behavior: contain;}
.lightbox-img, 
.lightbox-video 		{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;/display:block;}

/* Boutons */
.close, .prev, .next	{position: absolute;background: none;border: 0;padding: 14px;cursor: pointer;color:var(--color-dark);opacity: .8;}
.close:hover, 
.prev:hover, 
.next:hover             {opacity: 1;}

/* Placement */
.close 					{top:2px; right:2px; }
.prev  					{top:50%; left:-6px; transform:translateY(-50%); }
.next  					{top:50%; right:-6px; transform:translateY(-50%); }

/* SVG “fin” */
.close svg, .prev svg, .next svg			{width: 34px;height: 34px;display: block;stroke: currentColor;stroke-width: 1.5px;fill: none;stroke-linecap: round;stroke-linejoin: round;}
.counter									{position:absolute;left:20px;bottom:17px;color:var(--color-dark);opacity:1;font-size:16px;letter-spacing:.08em;font-variant-numeric:tabular-nums;user-select:none;}


/*mobile*/
@media screen and (max-width:800px) {

.grid-index 			{display:grid;gap:10px;grid-template-columns: 1fr;align-items: end;}
.grid-contact 	        {display:grid;gap:10px;grid-template-columns: 1fr;}
/*survol image homepage*/
.hover-preview,      
.hover-preview img,
.hover-preview video       {display:none;}	
.lightbox{
  touch-action: none;
  overscroll-behavior: contain;
}
	
}