/* ===================================================================
   0. SETUP & GLOBALS
=================================================================== */

:root {
    /* --- 1. Colors --- */
    /* Base Palette */
    --color-black: #000000;
    --color-white: #ffffff;
	--rgb-color-black:0,0,0;

    /* Grays */
    --color-gray-100: #f1f1f1;
    --color-gray-200: #e7e7e7;
    --color-gray-300: #cacaca;
    --color-gray-400: #adadad;
    --color-gray-900: #2d2d2d;

    /* Brand */
    --color-brand-red: #c0392b;
    --color-brand-gray: #F0F0F0;
    --color-brand-yellow: #f1eb9c;
    --color-brand-dark-red: #8b0000;    
    --color-brand-celadon: #addfb3; 
    --color-brand-green: #6c935c; 
    --color-brand-pink: #ff10f0; 


    /* --- 2. Typography --- */
    /* Families */
    --font-family-main: "RiformaLLWeb-Medium", Helvetica, Arial, sans-serif;
    --font-family-mono: "RiformaLLWeb-Italic", Helvetica, Arial, sans-serif;

    /* Sizes & Line Heights */
    --font-size-xs: .529rem;
    --font-line-height-xs: .674rem;



    --font-size-sm-phone: .605rem;
    --font-line-height-sm-phone: .713rem;

    
    --font-size-sm: .705rem;
    --font-line-height-sm: .813rem;

    --font-size-md-phone: 0.9rem;
    --font-line-height-md-phone: 110%;
    
    --font-size-md: 1.144rem;
    --font-line-height-md: 110%;
    
    --font-size-lg: 2.025rem;
    --font-line-height-lg: 97%;
    
    --font-size-xl: 3.0rem;
    --font-line-height-xl: 97%;

    /* --- 3. Layout & Spacing --- */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 24px;
    --spacing-lg: 48px;


    /* --- 4. Borders --- */
    
    --border-thin-light: 1px solid var(--color-gray-300);
    --border-thin: 1px solid var(--color-black);
    --border-thick: 3px solid var(--color-black);

    /* --- 5. Components --- */
    --comp-vitrine-ratio: 0.7622047244;
    --comp-vitrine-nav-top: 30px;
    --comp-vitrine-nav-gap: 10px;
    --comp-vitrine-dot-size: 5px;
    --comp-vitrine-dot-size-active: 7px;
    --comp-vitrine-transition: 0.5s;

 
}



/* ===================================================================
   1. PRINT OPTIONS
=================================================================== */
.print-only{
	display: none !important;
}

@media print {
    .no-print {
        display: none !important;
    }
    .print-only{
	display: block !important;
}
}


/* ===================================================================
   1. FONTS & COLORS
=================================================================== */

/* --- Fonts --- */
@font-face {
 font-family: "RiformaLLWeb-Light";
    src: url("assets/fonts/RiformaLLWeb-Light.woff2") format("woff2"),
        url("assets/fonts/RiformaLLWeb-Light.woff") format("woff");
}
@font-face {
 font-family: "RiformaLLWeb-Regular";
    src: url("assets/fonts/RiformaLLWeb-Regular.woff2") format("woff2"),
        url("assets/fonts/RiformaLLWeb-Regular.woff") format("woff");
}
@font-face {
 font-family: "RiformaLLWeb-Italic";
    src: url("assets/fonts/RiformaLLWeb-Italic.woff2") format("woff2"),
        url("assets/fonts/RiformaLLWeb-Italic.woff") format("woff");
}
@font-face {
 font-family: "RiformaLLWeb-Medium";
    src: url("assets/fonts/RiformaLLWeb-Medium.woff2") format("woff2"),
        url("assets/fonts/RiformaLLWeb-Medium.woff") format("woff");
}

@font-face {
 font-family: "RiformaLLWeb-Bold";
    src: url("assets/fonts/RiformaLLWeb-Bold.woff2") format("woff2"),
        url("assets/fonts/RiformaLLWeb-Bold.woff") format("woff");
}
@font-face {
 font-family: "RiformaLLWeb-Heavy";
    src: url("assets/fonts/RiformaLLWeb-Heavy.woff2") format("woff2"),
        url("assets/fonts/RiformaLLWeb-Heavy.woff") format("woff");
}


/* --- Typography --- */
.fs-x-large {
	font-size: var(--font-size-xl);	
	line-height: var(--font-line-height-xl);
	font-family: "RiformaLLWeb-Bold",'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: -.01em;
}
.fs-large {
	font-size: var(--font-size-lg);	
	line-height: var(--font-line-height-lg);
	font-family: var(--font-family-main);
	font-weight: 400;
	letter-spacing: -.01em;
}
.fs-regular-light {
	font-size: var(--font-size-md);	
	font-family: "RiformaLLWeb-Light",'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: .02em;
}

.fs-regular {
	font-size: var(--font-size-md-phone);	
	line-height: var(--font-line-height-md-phone);
	font-family: var(--font-family-main);
	font-weight: 400;
	letter-spacing: .02em;
}


@media(min-width: 768px){ 
		.fs-regular {
			font-size: var(--font-size-md);	
			line-height: var(--font-line-height-md);
			font-family: var(--font-family-main);
			font-weight: 400;
			letter-spacing: .02em;
		}
}


.fs-small-light {
	font-size: var(--font-size-sm);	
	line-height: var(--font-line-height-sm);
	font-family: "RiformaLLWeb-Light",'Open Sans', sans-serif;
	font-weight: 400;
}



.fs-small {
		font-size: var(--font-size-sm-phone);	
		line-height: var(--font-line-height-sm-phone);
		font-family: "RiformaLLWeb-Regular",'Open Sans', sans-serif;
		font-weight: 400;
}

@media(min-width: 768px){ 
	.fs-small {
		font-size: var(--font-size-sm);	
		line-height: var(--font-line-height-sm);
		font-family: "RiformaLLWeb-Regular",'Open Sans', sans-serif;
		font-weight: 400;
	}
}




.fs-x-small {
	font-size: var(--font-size-xs);	
	line-height: var(--font-line-height-xs);
	font-family: "RiformaLLWeb-Regular",'Open Sans', sans-serif;
	font-weight: 400;
}


.f-shadow{            
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}



b{
	font-family: "RiformaLLWeb-Bold",'Open Sans', sans-serif !important;
}

i{
	font-family: "RiformaLLWeb-Italic",'Open Sans', sans-serif !important;
}

.num{
	font-variant-numeric: tabular-nums;
}

.upp {
	text-transform: uppercase;
}

.no-dec{
	text-decoration: none;
}


.uppercase {
  text-transform: uppercase;
}

.cap {
text-transform: capitalize;
}


/* --- Layout --- */
.l{ text-align: left; }
.r{ text-align: right; }
.c{ text-align: center; }



/* --- Colors --- */
.black{ color: var(--color-black); }
.white{ color: var(--color-white); }	
.grey { color: var(--color-brand-gray); }



.conteneur-texte {
  column-count: 1;
}

/* Tablet & Large screens */
@media (min-width: 768px) {
	.conteneur-texte {
	  column-count: 2;      /* Divise le texte en 2 colonnes */
	  column-gap: var(--spacing-sm);     /* Définit l'espacement entre les colonnes */
	  
	  /* Optionnel : ajoute une ligne de séparation */
	  column-rule: 1px solid #ccc; 
	}
}






/* ===================================================================
   1. BOX & FRAMES
=================================================================== */


/* --- Margin bottom --- */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* --- Margin top --- */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

/* --- Margin right --- */
.mg-right-4 { margin-right: 1rem; }

/* --- Margin left --- */
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }




/* --- Padding --- */
.padd-xs { padding: var(--spacing-xs); }
.padd-sm { padding: var(--spacing-sm); }
.padd-md { padding: var(--spacing-md); }
.padd-lg { padding: var(--spacing-lg); }

.padd-sm-bottom { padding-bottom: var(--spacing-sm); }
.padd-md-bottom { padding-bottom: var(--spacing-md); }

.padd-sm-top { padding-top: var(--spacing-sm); }
.padd-md-top { padding-top: var(--spacing-md); }



/* --- Borders  --- */
.border-thin { border: var(--border-thin)!important; }
.border-thin-light { border: var(--border-thin-light); }

/* --- Border bottom --- */
.border-bottom-thin { border-bottom: var(--border-thin); }
.border-bottom-thick { border-bottom: var( --border-thick); }

/* --- Border top --- */
.border-top-thick { border-top: var(--border-thick); }
.border-top-thin { border-top: var(--border-thin); }

/* --- Border right --- */
.border-right-thin { border-right: var(--border-thin); }

/* --- Border left --- */
.border-left-thin { border-left: var(--border-thin); }



/* ===================================================================
   2. ELEMENTS CORPORATE IDENTITY
=================================================================== */

.paper {
	display: block;
	box-shadow: 0.25em 0.25em 0.75em 0 var(--color-gray-400);
	box-sizing: border-box;
	padding:var(--spacing-sm);
	margin:var(--spacing-md) 0;
	background-color:var(--color-gray-200);
}


/* ===================================================================
   3. RESPONSIVE UTILITIES 
=================================================================== */


/* Default + Phone */

.redux-x-phone{
	display: none;
}
.redux-x-tablet{
	display: none;
}

/* Tablet */
@media (min-width: 768px) {
	.redux-x-phone{
		display: inline-block;
	}
	.redux-x-tablet{
		display: none;
	}
	
}


/* Large screens */
@media (min-width: 1200px) {
	.redux-x-phone{
		display: inline-block;
	}
	.redux-x-tablet{
		display: inline-block;
	}
}











/* --- Body & Resets --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-family-main);
    color: var(--color-black);
    background-color: var(--color-white);
    overflow-x: hidden;
    font-optical-sizing: auto;
}
body.menu-open { overflow: hidden; }






.numbering-tab{
	padding-right: 20px;
}

.pico{
	height:14px;
}




a{
text-decoration: none;
}

/* Icons */


.gleis{
	height:73px;
	width:73px;
	border-radius: 10px;
	padding:0px;
	font-size: var(--font-size-xl);	
	line-height: 73px;
	font-family: "RiformaLLWeb-Bold",'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: -.01em;
	text-align:center;
	margin-right: var(--spacing-md);
	font-variant-numeric: tabular-nums;
	border: var( --border-thick)
}














/* ===================================================================
   3. CORE ELEMENTS
=================================================================== */

/* --- Buttons --- */
.btn{
    border-radius: 999px;
    background-size: 100%; 
    
    align-items: center;
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 18px;
    text-decoration: none;

    cursor: pointer;
    border: none;
    
    width: auto;
    height: 36px;
    line-height: 36px;
}

.btn-mini{
    border-radius: 999px;
    background-size: 100%; 
    
    align-items: center;
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 16px;
    text-decoration: none;
    
    cursor: pointer;
    border: none;
    
    width: auto;
    height: 31px;
    line-height: 31px;
}


.btn-large{
    border-radius: 10px;
    background-size: 100%; 
    
    align-items: center;
    justify-content: center;
   
    display: flex;
    flex-direction: column;
    
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    padding: var(--spacing-sm) 18px;
    text-decoration: none;

    cursor: pointer;
    border: none;
    
    width: 100%;
    height: auto;
    
}



/* --- Responsive Utilities --- */
.btn-large #btn-header{
	margin-right: 0px;
	margin-bottom: var(--spacing-sm);
}

@media (min-width: 768px) { 
	.btn-large{
	 	flex-direction: row;
	 	line-height: 70px;
	 	margin-bottom: var(--spacing-md);
    	padding: 0 18px;
	}
	.btn-large #btn-header{
		margin-right: var(--spacing-md);
		margin-bottom: 0px;
	}

}


.btn-ico{
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}


.btn-point{
    border-radius: 999px;
    
    align-items: center;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0px;
    text-decoration: none;
    
    width: 20px;
    height:20px;
    line-height: 20px;
}


.btn-punkt{
	display: inline-flex;
    border-radius: 5px;
    text-decoration: none;
    width: 10px;
    height:10px;
    margin-left:5px;
    margin-right:5px;
}


.btn-world{
	border-radius: 17px;
	height:34px;
	content: "";
	inset: 0;
	position: absolute;
	transition: box-shadow .2s linear;
	cursor: pointer;
	padding: 0 .8em;
	border-radius: 17px;
	min-width: 2em;
	text-align: center;
  	align-items: center;
  	display: inline-flex;
  	line-height: 34px;
  	position: relative;
  	white-space: nowrap;
	box-sizing: border-box;
	
}

.btn-world .globe{
	text-align: center;
	line-height: 2em;
	white-space: nowrap;
	height: 2em;
	min-width: 2em;
	overflow: visible;
	padding: .2em;
	width: 2em;
	max-height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-left: -0.9em;
}

.btn-world .globe img{
	height:100%;
}

.btn-world .globe-label{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	text-align: center;
	margin-right:5px;
}



.btn-world .globe-name-int{
	display: none;
}



.btn-world:hover .globe-name-loc{
	display: none;
}

.btn-world:hover .globe-name-int{
	display: block;
}






/* --- arraw --- */
.btn-arraw:hover{
   background-size: 110%;
   width: auto;	
}  
.btn-arraw:hover::after{
   content: '\00a0\00a0→'; 
}       
.btn .btn-label  {
  margin-top: 2px;
}      



/* --- colors --- */

.btn-dark-red{
	color: white;
	background: linear-gradient(135deg,rgba(139,0,0,.9),rgba(139,0,0,.8)), url('assets/img/lO-noise.png');
}
.btn-black{
	color: var(--color-white);
	background: var(--color-black);	
}
.btn-white{
	color: var(--color-black);
	background: var(--color-white);	
}

.btn-gray{
	color: var(--color-black);
	background: var(--color-brand-gray);	
}

.btn-baby-yellow{
	color: var(--color-black);
	background: linear-gradient(135deg,rgba(241,235,156,.9),rgba(241,235,156,.8)), url('assets/img/lO-noise.png');	
}
.btn-celadon{
	color: var(--color-black);
	background: linear-gradient(135deg,rgba(173,223,179,.9),rgba(173,223,179,.8)), url('assets/img/lO-noise.png');	
}
.btn-pink{
	color: var(--color-white);
	background: linear-gradient(135deg,rgba(255,16,240,.9),rgba(244, 51, 255,.8)), url('assets/img/lO-noise.png');
}
.btn-green{
	color: var(--color-white);
	background: linear-gradient(135deg,rgba(108,147,92,.9),rgba(108,147,92,.8)), url('assets/img/lO-noise.png');	
}  
.btn-block {
    display: block; width: 100%; padding: 15px; border: var(--border-thin);
    font-weight: bold; cursor: pointer;
}




/* --- Input --- */

.inp{
    border-radius: 5px;
    background-size: 100%; 
    
    align-items: center;
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 18px;

    border: var(--border-thin);
    
    width: 250px;
    height: 36px;
    line-height: 36px;
    
    color: var(--color-black);
    -webkit-appearance: none;
    appearance: none;

}



/* --- Signage --- */
.lO-sign-ico{
	display:inline-block;
	height:24px;
	width:32px;
	box-sizing: border-box;
	margin-right:var(--spacing-sm);
}
.lO-sign-ico img{
	height:100%;
}

/* ===================================================================
   4. GRID SYSTEM
=================================================================== */


.section{
	padding: 0 var(--spacing-md);
}

.block{
	display: block;
	position: relative;
}


.inline-block{
	display: inline-block;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}



@media (min-width: 1024px) {
  .grid-cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}






.w-auto{
	width: auto; 
}
.w-100{
	width: 100%; 
}
.w-75{
	width: 75%; 
}
.w-50{
	width: 50%; 
}
.w-25{
	width: 25%; 
}
.w-20{
	width: 10%; 
}
.w-10{
	width: 10%; 
}
.w-5{
	width: 5%; 
}


.h-auto{
	height:auto;
}





/* ===================================================================
   4. FLEX
=================================================================== */

/* --- container --- */

.flex {
  display: flex;
}


.inline-flex {
  display: inline-flex;
}


/* --- A. flex direction --- */

.flex-dir-col {
  flex-direction: column;
}
.flex-dir-row {
  flex-direction: row;
}

.grow {
  flex-grow: 1;
}

/* --- B. flex align --- */

.flex-align-items-top{
	align-items: flex-start;
}

.flex-align-items-center{
	align-items: center;
}


/* --- C. flex justify-content --- */


.flex-left{
	justify-content: flex-start;
}

.flex-center{
	justify-content: center;
}
.flex-space-between{
	justify-content: space-between;
}

.flex-right{
	justify-content: flex-end;
}


/* --- D. flex vertical align --- */

.flex-top{
	align-content: flex-start;
}

.flex-middle{
	align-content: center;
}

.flex-bottom{
	align-content: flex-end;
}







/* ===================================================================
   x. Layout
=================================================================== */

article h1{
	font-size: var(--font-size-xl);	
	line-height: var(--font-line-height-xl);
	font-family: "RiformaLLWeb-Bold",'Open Sans', sans-serif;
	font-weight: 60;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
	hyphens: manual;
	word-break: normal;
	margin-bottom: 2.0rem; 

}


article p{
	font-size: var(--font-size-md);	
	line-height: var(--font-line-height-md);
	font-family: "RiformaLLWeb-Medium",'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: .02em;
	
	overflow-wrap: break-word;
	hyphens: manual;
	word-break: normal;
	margin-bottom: 1.0rem; 
}




/* ===================================================================
   5. COMPONENT: HEADER
=================================================================== */
.lO-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 100;
}
.lO-logo { text-decoration: none; }
.origine-logo {
    font-weight: 900; font-size: 1.4rem; color: var(--color-black); letter-spacing: -1px;
}
.small { font-size: 0.8rem; }

.lO-menu-btn {
	display: inline-block;
	padding: 5px 5px;
	border-radius: 9999px;
    background: var(--color-white);
    border: none; 
    cursor: pointer;
    height:34px;
    width:34px;
}
.lO-menu-btn:hover {
    background: var(--color-gray-200); 	
    --tw-shadow: 2px 2px 10px rgba(0,0,0,.12);
  	--tw-shadow-colored: 2px 2px 10px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.lO-menu-btn img {
    width:100%;
}

.lO-nav-link { 
    text-decoration: none; color: #000; font-size: 0.8rem; font-weight: bold; 
}
.lO-nav-link:hover { color: var(--color-brand-red); }

/* --- Top Bar --- */
.lO-top-bar {
    background: var(--color-white);
    color: var(--color-black);
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    z-index: 102;
    position: relative;
}
.lO-dropdown { position: relative; display: inline-block; }
.lO-drop-btn {
    background: none; border: none; color: var(--color-black); 
    font-family: var(--font-family-mono); cursor: pointer; text-transform: uppercase;
}
.lO-drop-content {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid #000; min-width: 120px; z-index: 103;
}
.lO-top-right .lO-drop-content { right: 0; left: auto; }
.lO-dropdown:hover .lO-drop-content { display: block; }
.lO-drop-content a, .lO-drop-content button {
    color: #000; display: block; padding: 8px 12px; text-decoration: none;
    background:none; border:none; width:100%; text-align:left; cursor: pointer;
    font-family: var(--font-family-mono); font-size: 0.8rem;
}
.lO-drop-content a:hover, .lO-drop-content button:hover { background: var(--color-brand-yellow); }


/* ===================================================================
   6. COMPONENT: MEGA MENU
=================================================================== */
.lO-sliding-menu {
    position: fixed; top: 0; left: -100%;
    width: 100%; height: 100vh;
    background: #fff;
    z-index: 1000; transition: left 0.3s ease-in-out;
    display: flex; flex-direction: column;
}
.lO-sliding-menu.is-open { left: 0; }

.lO-menu-header {
    height: 60px; border-bottom: var(--border-thin);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; background: var(--color-brand-gray);
}

/* Menu Viewport & Sliding Panels */
.lO-menu-viewport {
    position: relative;
    flex: 1;
    overflow: hidden; /* Hide panels that are off-screen */
    width: 100%;
}
.lO-menu-panel {
    position: absolute; top: 0; width: 100%; height: 100%;
    overflow-y: auto;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    background: #fff;
}

/* Panel Positioning States */
.panel-root { left: 0; z-index: 10; transform: translateX(0); }
.panel-sub { left: 100%; z-index: 20; transform: translateX(0); background: #f9f9f9; }

/* When sub-menu is active, root moves left, sub moves in */
.lO-sliding-menu.depth-1 .panel-root { transform: translateX(-30%); opacity: 0.5; }
.lO-sliding-menu.depth-1 .panel-sub.is-active { transform: translateX(-100%); }

.nav-header {
    display: flex; 
    justify-content: space-between; 
    width: 100%;
 	height:auto;

	font-size: var(--font-size-sm);	
	line-height: var(--font-line-height-sm);
	font-family: "RiformaLLWeb-Medium",'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: .02em;


    text-decoration: none;
    color: var(--black); 
    background: none;
    
    border: none;
    text-align: left;
    
    padding: var(--spacing-sm);
}

.nav-group { border-bottom: var(--border-thin); padding: 0; }
.nav-btn {
    display: flex; 
    justify-content: space-between; 
    width: 100%;
    
	font-size: var(--font-size-md);	
	line-height: var(--font-line-height-md);
	font-family: "RiformaLLWeb-Medium",'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: .02em;
    
    
    text-decoration: none;
    color: var(--black); 
 	background: none; border: none;
    cursor: pointer; text-align: left;
    
    padding: var(--spacing-sm);
}

.nav-group .prod-ico{
	display: flex;
	padding: 5px 15px;
	border-radius: 9999px;
	background: var(--color-white);
  	border: none;
  	cursor: pointer;
  	height: auto;
 	width: auto;
    background: var(--color-gray-200); 	
    --tw-shadow: 2px 2px 10px rgba(0,0,0,.12);
  	--tw-shadow-colored: 2px 2px 10px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);

}



.nav-btn:hover { color: var(--color-black); background: var(--color-gray-100); }
.nav-btn .arrow { font-family: var(--font-family-mono); }



.back-btn {
    padding: 20px; border-bottom: var(--border-thin); cursor: pointer;
    background: var(--color-brand-gray); 
    font-family: var(--font-family-main); 
	font-size: var(--font-size-md);	
	line-height: var(--font-line-height-md);
    width: 100%; 
    text-align: left;
    border: none; border-bottom: var(--border-thin);
}
.back-btn:hover { background: #e0e0e0; }


/* ===================================================================
   7. COMPONENT: VITRINE CAROUSEL
=================================================================== */
.lO-vitrine-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Aspect ratio is set via JS by reading --comp-vitrine-ratio */
}
.lO-vitrine-wrapper {
    display: flex;
    height: 100%;
    transition: transform var(--comp-vitrine-transition) ease-in-out;
}
.lO-vitrine-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
}
.lO-vitrine-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lO-vitrine-background img {
    width: 100%;
    height: 100%;
}

.lO-vitrine-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.lO-vitrine-content {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    color: white;
    text-align: left;
    z-index: 2;
}
.lO-vitrine-title {
    margin-bottom: 10px;
}
.lO-vitrine-text {
    margin-bottom: 20px;
}
.lO-vitrine-btn {
    display: inline-block;
    padding-left: 1.375rem;
    padding-right: 1.375rem;  
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 9999px;
    border: none; 
    cursor: pointer;
    height:38px;
    width:auto;
    color: var(--color-black); 
    background: var(--color-gray-200); 	
    --tw-shadow: 2px 2px 10px rgba(0,0,0,.12);
    --tw-shadow-colored: 2px 2px 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.lO-vitrine-nav {
    position: absolute;
    top: var(--comp-vitrine-nav-top);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--comp-vitrine-nav-gap);
    z-index: 3;
}
.lO-vitrine-dot {
    width: var(--comp-vitrine-dot-size);
    height: var(--comp-vitrine-dot-size);
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    transition: all 0.3s ease;
}
.lO-vitrine-dot.active {
    width: var(--comp-vitrine-dot-size-active);
    height: var(--comp-vitrine-dot-size-active);
}
.lO-vitrine-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 36px;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.lO-vitrine-container:hover .lO-vitrine-arrow {
    opacity: 1;
}
.lO-vitrine-arrow:hover {
    transform: translateY(-50%) scale(1.2);
}
.lO-vitrine-arrow-left {
    left: 20px;
}
.lO-vitrine-arrow-right {
    right: 20px;
}

@media (max-width: 768px) {
    .lO-vitrine-title {
        font-size: 2em;
    }
    .lO-vitrine-text {
        font-size: 1em;
    }
    .lO-vitrine-content {
        max-width: 400px;
    }
}


/* ===================================================================
   8. COMPONENT: FIT CONFIGURATOR
=================================================================== */

.grid-card{
	column-gap: var(--spacing-sm);
	row-gap: var(--spacing-sm);
}

.card{
	background: rgb(var(--rgb-color-black),.75);
	border-radius: 10px;
	padding:var(--spacing-md)
}



.card .card-title{
	color:var(--color-white);
}

.card .card-frame{
	width:100%;
	padding:var(--spacing-md);
	border-radius: 10px;
	border-color: var(--color-white);
	color: var(--color-white);
	border-style: solid;
	border-width: 1px;
	margin-top:var(--spacing-sm);
}

.config-tools { padding: 0px; }


.grid-card .label { 
	color: var(--color-white);
	display: block; 
	margin-bottom: var(--spacing-sm); 
	}



.grid-header { padding: 15px 20px; border-bottom: var(--border-thin); display: flex; justify-content: space-between; align-items: center; }
.config-layout { display: grid; grid-template-columns: 1fr; }
@media(min-width: 768px){ .config-layout { grid-template-columns: 1fr 2fr; } }
.config-info { padding: 20px; background: #f9f9f9; }
.lO-live-data {
    background: var(--color-black); color: var(--color-brand-yellow);
    padding: 10px; margin-top: 15px; font-weight: bold;
}

.tool-row { margin-bottom: 25px; }
.divider { text-align: center; margin: 20px 0; color: #999; font-size: 0.7rem; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.opt-group { display: flex; gap: 5px; flex-wrap: wrap; }
.opt-group.vertical { flex-direction: column; }
.opt-group input { display: none; }
.opt-group span {
    display: flex;
    
    padding: 10px 15px; 
    border: 1px solid var(--color-black);
    font-family: var(--font-family-main); 
    font-size: 0.9rem; 
    cursor: pointer;
    background: var(--color-white); 


    align-items: center; 
    justify-content: center; 
    min-width: 80px;

    border-radius: 999px;

    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 18px;
    text-decoration: none;


    height: 36px;
    line-height: 36px;
 
    
    
    
}
.opt-group input:checked + span { background: var(--color-black); color: var(--color-white); border-color: var(--color-black) }

/* Hidden elements for Fit Configurator trimming */
.size-opt { display: none; }
.size-opt.visible { display: block; }


/* ===================================================================
   9. COMPONENT: INVENTORY TABLE
=================================================================== */


/* Default + Phone */

.inv-row {
    display: grid;
    grid-template-columns: 0.30fr 0.9fr 0.25fr 1.05fr 0.15fr 0.70fr;
    padding: 5px 0px;
	height:auto;
    border-bottom: var(--border-thin);
    align-items: start;
	position: relative;
}

.inv-row  .cel{
	box-sizing: border-box;
	height:40px;
}

.inv-row.header div{ 
	text-transform: capitalize;
}

.inv-row:not(.header):hover { background: var(--color-brand-yellow); }


.rotate-negative-90 {

  position: absolute;
  top:0px;
  left:1px;
  
  /* 3. Rotation */
  transform: translate(-40%, +80%) rotate(-90deg);
  
  white-space: nowrap;
}




/* Tablet */
@media (min-width: 768px) {

	.inv-row { 
		padding:  10px 0px;
		height:auto;
		grid-template-columns: 0.75fr  2.5fr 0.5fr 0.5fr 1fr 1fr 1fr;
	}
	.inv-row  .cel{
		box-sizing: border-box;
		padding:  0px;
	}	
	
	.rotate-negative-90 {
		position: relative;
		display: inline-block;
		transform: rotate(0deg);
	}
	
}


/* Large screens */
@media (min-width: 1200px) {
	.inv-row { 
		padding:  10px 0px;
		height:auto;
		grid-template-columns: 1fr 1fr 3fr 1fr 1fr 1fr 1fr 1fr;
	}
	.inv-row  .cel{
		box-sizing: border-box;
		padding:  0px;
	}

	.rotate-negative-90 {
		position: relative;
		display: inline-block;
		transform: rotate(0deg);
	}

}




/* dot */

.inv-status-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  border: 1px solid var(--ink);
}

.inv-status-dot-available{
	background: var(--color-brand-green);
}

.inv-status-dot-in-production{
    background: var(--color-black);
    border-radius: 50%;
    
    /* The Animation */
    animation: grow-pulse 2s infinite ease-in-out;

}

@keyframes grow-pulse {
    0% {
      transform: scale(0.5); /* Start at 50% size */
      opacity: 0.5;          /* Slightly transparent */
    }
    50% {
      transform: scale(1);   /* Grow to 100% size */
      opacity: 1;            /* Fully visible */
    }
    100% {
      transform: scale(0.5); /* Back to 50% size */
      opacity: 0.5;
    }
}



/* ===================================================================
   11. COMPONENT: SENTENDA
=================================================================== */
.sentenda-container { 
	padding: 40px; 
	display: flex; 
	flex-wrap: wrap; 
	gap: 40px; 
	align-items: center; 
	justify-content: center; 
}
.sentenda-stamp {
    padding: 10px 20px; 
    text-align: center; 
}
.stamp-val { font-size: 3rem; font-weight: 900; line-height: 1; display: block; }
.sentenda-info { max-width: 300px; border-left: 2px solid var(--color-white); padding-left: 15px; }
.sentenda-lunar-day {
  display: inline-flex;
  font-size: 60px;
}
.sentenda-lunar-month {
  display: inline-flex;
  font-size: 60px;
  font-family: "RiformaLLWeb-Medium",'Open Sans', sans-serif;
  font-weight: 400;
  border-style: solid;
  border-width: 6px;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 120px;
  line-height: 80px;
  margin: 0px;
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}


/* ===================================================================
   12. COMPONENT: PRODUCT GRID
=================================================================== */


.grid-products { 
	width: 100%; 
	display: grid;
	gap: 0px;
	grid-template-columns: repeat(4, 1fr);
	}
	



.product-cell { 

    position: relative;
    text-decoration: none;

	border: var(--border-thin-light);
    border-top: 0;
    border-right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;

}



.product-svg .product-grain{
	position: absolute;
	left : 2px;
	right: 2px;
	bottom:2px;
	top: 2px;
	z-index: 2; /* Puts this div below the SVG div */
}

.product-svg .product-grain img{
    width: 100%;
    height: 100%;
    /* Optional: ensures the SVG scales nicely within its container */
    max-width: 100%; 
    max-height: 100%;
    opacity: 0.2;
}




/* First row - add top border */
.product-cell:nth-child(-n+4) {
    border-top: var(--border-thin);
}

/* Every 4th item (last in each row on small screens) - add right border */
.product-cell:nth-child(4n) {
     border-right: var(--border-thin);
}


/* Large screens */
@media(min-width: 768px) {
            .grid-products {
            	grid-template-columns: repeat(8, 1fr)!important;
            }

            /* Reset small screen rules */
            .product-cell:nth-child(-n+4) {
                border-top: 0;
            }

            .product-cell:nth-child(4n) {
                border-right: 0;
            }

            /* First row on large screens - add top border */
            .product-cell:nth-child(-n+8) {
                border-top: var(--border-thin);
            }

            /* Every 8th item (last in each row on large screens) - add right border */
            .product-cell:nth-child(8n) {
                border-right:var(--border-thin);
            }
}


/* ===================================================================
   12. COMPONENT: COVERS GRID
=================================================================== */


.grid-headboards { 
	width: 100%; 
	display: grid;
	gap: var(--spacing-sm);
	grid-template-columns: repeat(1, 1fr);
	}
	

/* Large screens */
@media(min-width: 768px) {
            .grid-headboards {
            	grid-template-columns: repeat(3, 1fr)!important;
            }
    
}

.board{
	width:100%;
	aspect-ratio: 968/1270;
}

.board .board-title{
  width: 15px;
  height: 100%;
  padding: 5px 0px 5px 5px;
  color: #000;
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
  text-transform: uppercase;
  border-left: 2px solid #000;
  aspect-ratio: auto !important;
  
  
  display: flex;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  justify-content: space-between;
  align-items: flex-start;
}

.board .frame-header .frame-fond{

}
.board .frame-header .frame-num{

}

.board .board-content{
 height:100%;
 width: calc(100% - 20px);
 position: relative;
 
}


.board .board-content .overlayed{
	position: absolute;
	top:0px;
	bottom:0px;
	right:0px;
	left:0px;
	padding:var(--spacing-sm);
	z-index: 2;
}




.xxsvg{
  width: 100%; /* Or use percentages like 50% */
  height: auto;  /* Maintains aspect ratio defined in viewBox */
	
}
	
	

/* ===================================================================
   12. COMPONENT: PRODUCT
=================================================================== */
.product_size {
  display: flex;
  padding: 10px 15px;
  border: 1px solid var(--color-black);
  font-family: var(--font-family-main);
  font-size: 0.9rem;
  background: var(--color-white);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 18px;
  text-decoration: none;
  height: 36px;
  line-height: 36px;
  width: 36px;
}


@media (min-width: 768px) { 
	.product_size {
		min-width: 80px;
	}
}



.product-svg {
	display: block;
	position: relative;
	width:100%;
	aspect-ratio: 1 / 1;
}

.product-svg .product-img{
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Puts this div on top of the color div */
    /* Ensure the SVG itself fills this div */
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-svg .product-img img{
    width: 100%;
    height: 100%;
    /* Optional: ensures the SVG scales nicely within its container */
    max-width: 100%; 
    max-height: 100%;
}

.product-svg .product-color{
	position: absolute;
	left : 2px;
	right: 2px;
	bottom:2px;
	top: 2px;
	z-index: 1; /* Puts this div below the SVG div */
}




/* ===================================================================
   12. COMPONENT: CART
=================================================================== */

.cart-content{
	
	
}

.cart-content .thumb{
	width:80px;
	height:80px;
}



.checkout-group{
	border-radius: .375rem;
	border-color: var(--color-gray-300);
	border-width: 1px;
	border-style: solid;
	
	height: 3.75rem;
	margin-top: .75rem;
	position: relative;
	
}


.checkout-group label{
	color: var(--color-black);
	display: flex;
	top: .5rem;
	left: .5rem;
	right: .5rem;
	position: absolute;
	box-sizing: border-box;
	border: 0 solid;
	font-size: .705rem;
	line-height: .813rem;
	letter-spacing: .02em;
}


.checkout-group input{
	border-style: none;
	position: absolute;
	
	bottom: 0;
	left: .5rem;
	right: .5rem;	
	
	border-radius: .375rem;
	appearance: none;
	background-color: #fff;
	border-color: #6b7280;
	border-width: 1px;
	padding: .5rem .75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	margin: 0;
}


.checkout-group select{
	border-style: none;
	position: absolute;
	bottom: 0;
	left: .5rem;
	right: .5rem;
	
	border-radius: .375rem;
	appearance: none;
	background-color: #fff;
	border-color: #6b7280;
	border-width: 1px;
	padding: .5rem .75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	margin: 0;
}




/* ===================================================================
   12. COMPONENT: FOOTER
=================================================================== */
.lO-footer { 
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
	margin: 0;
	padding-top: var(--spacing-md);
	background-color: var(--color-white);
	margin-bottom:60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.lO-footer .lO-footer-grid {
   display: grid; 
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 0px;
   height: 100%;
}
.lO-footer .lO-footer-grid-cell {
	border: var(--border-thin);
	padding: var(--spacing-sm);
}
.lO-footer .lO-footer-grid-cell h3 {
	/* (h3 styles) */
}
.lO-footer .lO-footer-grid-cell ul {
    list-style: none;
}
.lO-footer .lO-footer-grid-cell li {
	/* (li styles) */
}
.lO-footer .lO-footer-grid-cell ul li a {
    text-decoration: none;
	font-size: var(--font-size-md);	
	line-height: 1.6rem;
	font-family: "RiformaLLWeb-Regular",'Open Sans', sans-serif;
	color: var(--color-black);
}
.lO-footer .lO-footer-grid-cell ul li a:hover::after {
    content: '\00a0\00a0→'; 
	
}



/* --- Footer Grid Areas (Desktop) --- */
#f-grid-contact {
   grid-row-start: 2;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 4;
   border-top: none;
   border-right: none;
}
#f-grid-store {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 2;
   grid-column-end: 2;
   border-right: none;
}
#f-grid-legal {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
   border-right: none;
}
#f-grid-services {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 2;
   grid-column-end: 4;
   border-right: none;
}
#f-grid-social {
   grid-row-start: 1;
   grid-column-start: 4;
   grid-row-end: 3;
   grid-column-end: 5;
}

/* --- Footer Mobile Accordion --- */
@media (max-width: 768px) {
    /* (Accordion content hiding) */
    .lO-footer-grid-cell:not(.active) ul,
    .lO-footer-grid-cell:not(.active) p,
    .lO-footer-grid-cell:not(.active) .social-links,
    .lO-footer-grid-cell:not(.active) .content-text {
        display: none;
    }
    


	.lO-footer .lO-footer-grid {
	   grid-template-rows: auto auto auto auto auto; /* Changed to auto */
	   grid-template-columns: 1fr;
	}
	 
	#f-grid-contact {
	   grid-row-start: 1;
	   grid-column-start: 1;
	   grid-row-end: 2; /* Changed */
	   grid-column-end: 2; /* Changed */
       border: var(--border-thin); /* Reset borders */
	}
	#f-grid-store {
	   grid-row-start: 2;
	   grid-column-start: 1;
	   grid-row-end: 3; /* Changed */
	   grid-column-end: 2; /* Changed */
       border: var(--border-thin); /* Reset borders */
       border-top: none;
	}
	#f-grid-legal {
	   grid-row-start: 3;
	   grid-column-start: 1;
	   grid-row-end: 4; /* Changed */
	   grid-column-end: 2; /* Changed */
       border: var(--border-thin); /* Reset borders */
       border-top: none;
	}
	#f-grid-services {
	   grid-row-start: 4;
	   grid-column-start: 1;
	   grid-row-end: 5; /* Changed */
	   grid-column-end: 2; /* Changed */
       border: var(--border-thin); /* Reset borders */
       border-top: none;
	}
	#f-grid-social {
	   grid-row-start: 5;
	   grid-column-start: 1;
	   grid-row-end: 6; /* Changed */
	   grid-column-end: 2; /* Changed */
       border: var(--border-thin); /* Reset borders */
       border-top: none;
	}
}


/* ===================================================================
   12. COMPONENT: LOGBOOK
=================================================================== */



/* 3. Entrées du journal */

.lo-entry {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lo-entry:first-child {
    border-top: var(--border-thin);
}

.lo-entry:hover {
    background-color: #f4f4f4;
}

/* Header de l'entrée (toujours visible) */
.lo-entry-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    align-items: center;
}

/* Contenu caché (Accordéon) */
.lo-entry-body {
    height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Transition "mécanique" */
}


.lo-indicator {
    justify-self: end;
    font-weight: bold;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* État actif (ouvert) */
.lo-entry.active .lo-entry-body {
    height: auto; /* Ajuster selon la longueur du contenu */
    border-top: var(--lo-border); /* La ligne apparait quand ouvert */
}

.lo-entry.active .lo-indicator {
    transform: rotate(45deg); /* Le + devient un x */
}

.lo-entry.active {
    background-color: var(--lo-bg); /* Enlever le gris du hover quand ouvert */
}

/* Responsive */
@media (max-width: 768px) {
    .lo-entry-header {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }
    .lo-meta-loc {
        grid-column: 1 / -1;
        opacity: 0.6;
        font-size: 0.8rem;
    }
    .lo-indicator {
        grid-row: 1;
        grid-column: 2;
    }
    .lo-title {
        font-size: 1.5rem;
    }
}







/* ===================================================================
   12. COMPONENT: ATLAS
=================================================================== */



.atlas-grid{
	gap: 10px;
	
}

.atlas-page{
	width:100%;
	aspect-ratio: 968/1270;
}

.atlas-page .frame-header{
  width: 15px;
  height: 100%;
  padding: 5px 0px 5px 5px;
  color: #000;
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
  text-transform: uppercase;
  border-left: 2px solid #000;
  aspect-ratio: auto !important;
  
  
  display: flex;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  justify-content: space-between;
  align-items: flex-start;
}

.atlas-page .frame-header .frame-fond{

}
.atlas-page .frame-header .frame-num{

}

.atlas-page .content-page{
 height:100%;
 width: calc(100% - 20px);
}



.atlas-svg{
  width: 100%; /* Or use percentages like 50% */
  height: auto;  /* Maintains aspect ratio defined in viewBox */
	
}