/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 3.5.6.1716467896
Updated: 2024-05-23 12:38:16

*/
/*********** ACCESS Code Accueil ************/

.glitch-input-wrapper {
  --bg-color: #0d0d0d;
  /*--primary-color: #00f2ea;*/
  --primary-color: green;
  /*--secondary-color: #a855f7;*/
  --secondary-color: green;
  --text-color: #e5e5e5;
  --font-family: "Fira Code", Consolas, "Courier New", Courier, monospace;
  --glitch-anim-duration: 3s;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: 16px;
  padding: 3rem;
}

/* --- Container  --- */
.input-container {
  position: relative;
  width: 25rem;
  margin-top: 50px;
}

/* --- Input --- */
.holo-input {
  width: 100%;
  height: 3.5rem;
  background: rgba(13, 13, 13, 0.7);
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  padding: 0 1rem;
  color: var(--text-color);
  font-family: inherit;
  font-size: 1.1rem;
  caret-color: var(--primary-color);
  z-index: 10;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

/* --- Floating Label --- */
.input-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--text-color);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 11;
}
.holo-input:focus + .input-label,
.holo-input:not(:placeholder-shown) + .input-label {
  top: -3rem;
  left: 0;
  font-size: 1.5rem;
  opacity: 1;
  color: var(--primary-color);
}

.holo-input:focus + .input-label::before,
.holo-input:focus + .input-label::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: #212121;*/
  background-color: rgba(13, 13, 13, 0.7);
}

.input-label::before,
.input-label::after {
  animation-name: glitch-label;
  animation-duration: var(--glitch-anim-duration);
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-play-state: paused;
}
.holo-input:focus + .input-label::before,
.holo-input:focus + .input-label::after {
  animation-play-state: running;
}

/* --- Decorative Layers --- */
.input-border,
.input-scanline,
.input-glow,
.input-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.input-border {
  border: 1px solid rgba(0, 242, 234, 0.2);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.corner {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
  opacity: 0.5;
}
.corner-tl {
  top: -0.3rem;
  left: -0.3rem;
  border-right: none;
  border-bottom: none;
}
.corner-tr {
  top: -0.3rem;
  right: -0.3rem;
  border-left: none;
  border-bottom: none;
}
.corner-bl {
  bottom: -0.3rem;
  left: -0.3rem;
  border-right: none;
  border-top: none;
}
.corner-br {
  bottom: -0.3rem;
  right: -0.3rem;
  border-left: none;
  border-top: none;
}

.input-glow {
  background: radial-gradient(
    ellipse at center,
    green 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.input-scanline {
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    green 48%,
    green 50%,
    green 52%,
    transparent 100%
  );
  opacity: 0;
}

/* --- Data Visualization --- */
.input-data-stream {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 0.3rem;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}
.stream-bar {
  flex-grow: 1;
  background-color: var(--primary-color);
  transition:
    transform 0.2s,
    opacity 0.2s;
  transform: scaleY(0);
  transform-origin: bottom;
}

.holo-input:focus {
  border-color: transparent;
}
.holo-input:focus ~ .input-border {
  opacity: 1;
  border-color: green;
}
.holo-input:focus ~ .input-corners .corner {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 3px;
  opacity: 1;
}
.holo-input:focus ~ .input-glow {
  opacity: 1;
}
.holo-input:focus ~ .input-scanline {
  animation: scan-vertical 4s linear infinite;
}
.holo-input:focus ~ .input-data-stream {
  opacity: 1;
}
.holo-input:focus ~ .input-data-stream .stream-bar {
  animation: data-pulse 2s infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

/* --- Keyframes --- */
@keyframes glitch-label {
  0% {
    transform: translate(-0.2rem, 0.1rem);
    clip-path: inset(50% 0 20% 0);
  }

  10% {
    transform: translate(0.1rem, -0.1rem);
    clip-path: inset(20% 0 60% 0);
  }

  20% {
    transform: translate(-0.15rem, 0.1rem);
    clip-path: inset(80% 0 5% 0);
  }

  30% {
    transform: translate(0.15rem, -0.15rem);
    clip-path: inset(30% 0 45% 0);
  }

  /* retour stable */
  33%,
  100% {
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scan-vertical {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  25% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes data-pulse {
  0%,
  100% {
    transform: scaleY(0.2);
    opacity: 0.3;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.8;
  }
}

/* ================= SUBMIT ================= */

.cyber-submit {
  width: 22rem;
  height: 3.5rem;
  margin-top: 3rem;

  background: rgba(13,13,13,0.7);
  border: 2px solid var(--primary-color);

  font-family: var(--font-family);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cyber-text {
  position: relative;
  color: var(--primary-color);
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cyber-text::before,
.cyber-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,0.7);

  animation: glitch-label var(--glitch-anim-duration) infinite steps(1, end);
}

.cyber-text::before {
  color: var(--primary-color);
}

.cyber-text::after {
  color: rgba(0,255,0,0.7);
  transform: translate(1px, -1px);
}

/********************************************/

.imgModel {
	height:auto;
	width:10vw;
	min-width: 70px;
	max-width:100px;
}
/********************************************/
/* TABULATOR */
.tabulator {
	background-color: #000;
	border: none;
	text-align:center;
	font-size: clamp(1rem, 1vw, 1.5rem);
}

.tabulator .tabulator-header {
	color: grey;
	border: none;
	text-align:center;
}

.tabulator-header {
    background-color:#000;
    color:#fff;
	border: none;
}

.tabulator-row .tabulator-cell {
	border: none;
	color: grey;
	padding-top:15px;
}

.tabulator-header .tabulator-col,
.tabulator-header .tabulator-col-row-handle {
    white-space: normal;
	border: none;
}

.tabulator-row.tabulator-selected {
    background-color: #009136;
}

.tabulator-tableholder .tabulator-table .tabulator-row{
    color:#fff;
    background-color: #000;
	border: none;
}

.tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
    background-color: #000;
	border: none;
}

.tabulator .tabulator-header .tabulator-col {
	text-align:center;
	border-right: none;
	border-top:grey 1px solid;
	border-bottom:grey 1px solid;
	background-color:#000;
	text-transform:uppercase;
}
.tabulator-cell {
    white-space: normal !important;
    overflow: visible !important;
}
.tabulator-cell > input[type=checkbox] {
	-webkit-appearance: auto;
}
.tabulator-cell > input[type=checkbox]:checked:before {
    content: "";
    margin-bottom: -1px;
    color: #3fb449;
    font-weight: 600;
	width:10px;
	height:10px;
}
.tabulator-row .tabulator-cell.tabulator-row-header {
    background: #000;
    border-bottom: none;
    border-right: none !important;
    color: #fff;
    font-weight: 700;
	justify-content:center;
	text-align : center;
	align-content : center;
	align-items : center;
}
.tabulator .tabulator-header .tabulator-col.tabulator-row-header {
    border-right: none !important;
}
.tabulator-col.header-filter-active img {
	transform: scale(1.3);
    filter: hue-rotate(45deg) brightness(1.5);
}
.tabulator-footer-contents {
    display: flex;                /* Utilisation du modèle Flexbox */
    flex-flow: row-reverse wrap !important; /* Inverser l'ordre des éléments (les boutons à gauche, le texte à droite) */
    justify-content: flex-start !important; /* Aligner tout le footer à gauche */
    width: fit-content;
    text-align: left !important;   /* Aligner le texte à gauche */
}

/* Cibler spécifiquement le texte "showing..." pour qu'il soit aligné à gauche */
.tabulator-page-counter {
    text-align: left !important;   /* Aligner le texte "Showing X to Y of Z rows" à gauche */
    margin-left: 10px;             /* Ajouter un petit espace entre le texte et les boutons */
    float: left !important;        /* Supprimer le float pour éviter d'affecter la mise en page flex */
}

/* Cibler les boutons de navigation pour qu'ils restent alignés à gauche */
.tabulator-paginator {
    text-align: left !important;   /* Aligner les boutons de pagination à gauche */
    margin-right: 10px;            /* Espace supplémentaire à droite des boutons */
}
.tabulator-pages {
	display:none;
}

.col-highlight {
	font-weight: bold !important;
	color: white !important;
}
.wrap-cell {
    white-space: normal !important;
    word-break: break-word;
}
/* ************************************************************* */
/* Tabulator reactivité après changes */
/* Couleurs de fond avec fondu */
.cell-success {
  border: 2px solid green !important;
  transition: border-color 1.5s ease-out;
  position: relative;
}
.cell-error {
  border: 2px solid red !important;
  transition: border-color 1.5s ease-out;
  position: relative;
}

/* Icônes flottantes */
.cell-feedback {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 1em;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.cell-success .cell-feedback {
  color: #2e7d32; /* vert foncé */
}
.cell-error .cell-feedback {
  color: #c62828; /* rouge foncé */
}

/* Animation d’apparition/disparition */
.cell-success.show .cell-feedback,
.cell-error.show .cell-feedback {
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}

/* ✅ Ligne validée */
.tabulator-row.row-success {
	border: 2px solid green !important;
	transition: border-color 1.5s ease-out;
}

/* ❌ Ligne en erreur */
.tabulator-row.row-error {
    border: 2px solid red !important;
	transition: border-color 1.5s ease-out;
}

/* ===================================== */
/* 🔒 Mode Édition : on bloque Tabulator */
/* ===================================== */

.tabulator-edit-mode .tabulator-header .tabulator-col {
    pointer-events: none !important; /* bloque tri/filter icon */
    opacity: .5;
}

.tabulator-edit-mode .tabulator-paginator {
    pointer-events: none !important;
    opacity: .3;
}

.tabulator-edit-mode .tabulator-row:not(.tabulator-row-new) {
    pointer-events: none !important; /* bloque sélection / clic */
    opacity: .6;
}

.btnToDisable[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.btnToDisable[disabled] img {
	filter: grayscale(100%);
}

.btnToDisable:not([disabled]):hover img {
	transform: scale(1.1);
	transition: transform 0.2s ease;
}

/* ************************************************************* */
/* formattage plan table */
.tabPlans_wrapper {
	overflow-x:auto;
}

.tabPlans {
	display:table;
	width:fit-content;
	height:fit-content;
	margin-bottom:5px;
}

.tabPlans tr {
	display:table-row;
	width:fit-content;
	height:fit-content;
}

.tabPlans td {
	display:table-cell;
	border:1px solid;
	text-align:center;
	vertical-align:top;
	width:fit-content;
	height:fit-content;
}
.tabPlans .td_addCell {
	display:table-cell;
	border:1px solid;
	text-align:center;
	vertical-align:top;
	width:10vw;
	height:fit-content;
	min-width:90px;
	min-height:110px;
	max-width:120px;
	max-height:140px;
}

details.details-plans {
  user-select: none;
  width:100%;
  border:1px dashed;
  border-radius:10px;
  background: #ffffff13;
  padding-left:5px;
  padding-right:5px;
  padding-top:5px;
  height:fit-content;
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }
  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip; 
    transition: content-visibility 1s allow-discrete,
                opacity 0.5s,
                block-size 0.5s;
  }
  
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

details.details-plans>summary.details-plans span.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  margin-left: auto;
  margin-right:10px;
  float:right;
}

details.details-plans[open] summary.details-plans span.icon {
  transform: rotate(180deg);
}

summary.details-plans {
  display: block;
  cursor: pointer;
  text-align:center;
  height:fit-content;
  padding-bottom:8px;
  font-size: clamp(1rem, 1vw, 1.5rem);
}

summary.details-plans::-webkit-details-marker {
  display: none;
}

.details-tabs {
	position: relative;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	width:100%;
}

.details-tab {
	padding: 0.5rem 1rem;
	color: #ffffffcc;
	display: block;
	vertical-align:middle;
	font-size: clamp(1rem, 1vw, 1.5rem);
	order: 0;
	background: #ffffff13;
	border-radius: 1.5rem;
	margin-right: 0.35rem;
	margin-bottom:1rem;
	cursor: pointer;
	border: 2px solid transparent;
	&:hover, &:focus {
		border-color: #fff;
	}
	&::-webkit-details-marker {
		display: none;
	}
}

.details-content {
	order: 1;
	width: 100%; 
	details {  
	  margin: 0.5rem;
	}
}

.details-item {
	display: contents;
	&[open] {
		& > .details-tab {
			background: #fff;
			color: #333;
		}
	}
}
@supports selector(::details-content) {
    .details-item[open]::details-content {
        display: contents;
    }
}
/* ************************************************************* */
/* MENU HAMBURGER pour Plans */

.menuPlan-container {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  margin-top:8px;
  float:right;
}

.menuPlan-toggle {
  display: none !important;
}

/* --- Bouton hamburger --- */
.menuPlan-button {
  display: inline-block;
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: relative;
}

.menuPlan-button span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: orange; /* ✅ Couleur du hamburger */
  border: none;
  opacity: 1;
  left: 0;
  transition: all 0.3s ease-in-out;
}

/* Position des 3 barres */
.menuPlan-button span:nth-child(1) {
  top: 0;
}
.menuPlan-button span:nth-child(2) {
  top: 10px;
}
.menuPlan-button span:nth-child(3) {
  top: 20px;
}

.menuPlan-toggle:checked + .menuPlan-button + .menuPlan {
  display: block;
}

/* --- Animation quand le menu est ouvert --- */
.menuPlan-toggle:checked + .menuPlan-button span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}
.menuPlan-toggle:checked + .menuPlan-button span:nth-child(2) {
  opacity: 0;
}
.menuPlan-toggle:checked + .menuPlan-button span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}

/* --- Menu déroulant --- */
.menuPlan {
  display: none;
  position: absolute;
  right: 0;
  top: 35px;
  background: black; /* ✅ Fond noir */
  border: 1px solid #333;
  border-radius: 4px;
  padding: 5px 0;
  min-width: 100px;
  z-index: 10;
}

/* --- Liens du menu --- */
.menuPlan a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: white;
  transition: background 0.2s;
}

.menuPlan a:hover {
  background: #444;
}

/* ************************************************************* */

/* Statistques -  Recherche dynamique pour ventes par Event */
.suggestions-container {
    position: absolute;   /* juste par rapport au parent relatif (wrapper) */
    top: 100%;            /* juste sous l’input */
    left: 0;
    width: fit-content;          /* même largeur que l’input */
    border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    background-color: white;
    color: black;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999999 !important;
	font-size: clamp(1rem, 1vw, 1.5rem);
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-item:hover,
.suggestion-item.active {
    background-color: #e9f2ff;
}
#divStatByEvent, 
#divStatByEvent * {
    transform: none !important;
}
#divStatGlobalByEvent, 
#divStatGlobalByEvent * {
    transform: none !important;
}
/* ************************************************************* */

/*  Details dans formVente */

.detailsSize summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-left: 20px;
	margin-bottom: 15px; 
}

/* Flèche fermée */
.detailsSize summary::before {
    content: "▷";            /* fermé = plus */
	color:white;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* centre vertical */
    font-weight: bold;
    transition: transform 0.3s ease, content 0.3s ease; /* animation */
}

/* Flèche ouverte */
.detailsSize[open] summary::before {
    transform: translateY(-50%) rotate(90deg); /* option de rotation si besoin */
}
.span_size {
	font-size: clamp(1rem, 1vw, 1.5rem);
	color:green;
}
.span_cat {
	font-size: clamp(1rem, 1vw, 1.5rem);
	color:green;
}
.span_titre {
	color:green;
	font-size: clamp(1.3rem, 1vw, 2rem);
	text-transform:uppercase;
	font-weight: bold;
	vertical-align: middle;
}

/* ************************************************************* */

/* Animation de bordure pulsante */
.animatedCell-loading {
    pointer-events: none; /* Désactive tout clic */
    position: relative;
    border: 2px solid orange;
    animation: pulseBorder 0.8s infinite ease-in-out;
    opacity: 0.6; /* Optionnel */
}

@keyframes pulseBorder {
    0%   { border-color: orange; }
    50%  { border-color: #ffcc80; }
    100% { border-color: orange; }
}

/* Quand chargement terminé */
.animatedCell-done {
    animation: none;
    border: 2px solid green; /* Petit feedback visuel */
    pointer-events: auto;    /* Réactive le clic */
    opacity: 1;
}

/* ************************************************************* */

/* ********** Filtre Modèles *********************************** */
//* ---------- LAYOUT GLOBAL ---------- */

.tagSearchWrapper {
    position: relative;
    flex: 0 0 auto;
    height: clamp(35px, 1vw, 45px);
    width: clamp(210px, 30vw, 310px);
	flex-shrink: 0; 
}

.tagSearchWrapper .fa-search {
    position: absolute;
    left: 10px;
    top: 12px;
    color: #888;
}

.activeTags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}


/* ---------- TOM-SELECT WRAPPER ---------- */

.ts-wrapper.single,
.ts-wrapper.multi {
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 5px;
    color: #fff;
    font-size: clamp(1rem,1vw,1.5rem);
    width: 100%; /* le wrapper suit la taille du parent => TagSearchWrapper */
    height: clamp(35px,1vw,45px);
}


/* ---------- TOM-SELECT CONTROL ---------- */

.ts-control {
    min-height: 25px;
    height: clamp(25px,1vw,35px);
    border: none !important;
    background: transparent;
    box-shadow: none !important;
    width: 100%;
	padding:0 !important;
}

.ts-control input {
    color: #ccc;
    height: clamp(25px,1vw,35px);
    font-size: clamp(1rem,1vw,1.4rem);
    font-family: "Comfortaa", sans-serif;
    width: 100%;
}


/* ---------- TAGS AFFICHÉS PAR TOM-SELECT (chips internes) ---------- */

.ts-wrapper.multi .ts-control .item {
    display: none !important; /* tu affiches les chips custom => on cache ceux de TomSelect */
}

.tabulator-cell .ts-wrapper {
    max-width: 50% !important;
    min-width: 120px;
}
.tabulator-cell .ts-control {
    /*max-width: 50% !important;*/
	width:100% !important;
    min-width: 120px;
}
.tabulator-cell[field="Tags"] .ts-control input {
    width: 100% !important; /* 100% du conteneur réduit */
}
.tabulator-cell .chip,
.tabulator-cell .tag-chip {
    display: inline-flex;
    flex-wrap: wrap !important;
    white-space: normal !important;
}
/* ---------- TES CHIPS PERSONALISÉS ---------- */

.chip {
    background: #0c2224;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 100;
    font-family: "Comfortaa", sans-serif;
	flex-wrap: wrap;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0c2224;
    color: white;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 10px !important;
	font-weight: 100 !important;
    font-family: "Comfortaa", sans-serif !important;
    margin-right: 4px;
	flex-wrap: wrap;
}

.chip .remove {
    cursor: pointer;
    font-weight: bold;
}

.chip .remove:hover {
    color: #ffabab;
}
.chip-remove:hover {
    color: #ffabab;
}

/* ---------- DROPDOWN ---------- */

.ts-dropdown {
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    color: #ddd;
}

.ts-dropdown .option {
    font-family: "Comfortaa", sans-serif;
    font-size: clamp(1rem,1vw,1.5rem);
}

.ts-dropdown .option:hover {
    background: #333;
}