@charset "UTF-8";
/* 💬 CTV comme Case à cocher / Tiret / Vide/sans - 05/09/2026 v25
.CTV
  zone cliquable
  Conteneur fixe. Si sur <td>, c'est trop compliqué pour avoir un positionnement centré stable (car pas ok pour géré absolute dessus), donc tous les états de CTV sont dans le <span> enfant.
.CTV>span
  anneau de contour de sélection ("scène graphique fixe" )
  Il s'active aus survol, à la pré-sélection (au 1er et seul CTV cliqué) puis à la séelction (2e CTV cliqué et y reste si pas aucun CTV sélectionné). Si toggleMultiSelect activé.
.CTV>span::before
  état métier (carré/cercle/tiret) ou vide ou point de sélection
  L'un de ces éléments ne peut pas être affiché en même temps qu'un autre de ces éléments.
  Encore mieux : on a ainsi une forme simple qui se transforme en une autre.
  En CTV_mode sélection, les états métiers n'ont pas à être visibles (ici, ils sont transformés en petit rond plein de sélection si "sélectionné" ou vide si pas "sélectionné").
.CTV>span::after  
  Coche (pictoCoche) via pseudo-éléments : elle reste indépendante des autres éléments donc plus facile à manipuler (opacité, taille, centrage).
*/
:root {
  --ctv_size: 22px; /*défaut : 24px*/

  /* ÉTAT MÉTIER */
  /*--business_unchecked_size: 8px;*/
  --business_unchecked_size: 10px;
  --business_unchecked_radius: 2px;
  /* 0px = carré / 2px = arrondi / 50% = rond */

  --business_checked_size: 16px;
  --business_popup_size: 36px;  /*défaut : 24px*/
  /*--business_checked_radius: 50%;*/
  --business_checked_radius: 2px;

  /*--minus_width: 10px;*/
  --minus_width: 7px;
  /*--minus_height: 2px;*/
  --minus_height: 7px;
  --minus_radius: 2px;

  /* SÉLECTION - à adapter si case carré au lieu de ronde ci-dessus car le ecercle se verra moins bien sur le carré - 16/10/2026 */
  --selection_ring_size: 18px;
  --selection_ring_width: 1px;
  --selection_dot_size: 10px;

  /* PICTO COCHE */
  --pictoCoche_arm: 2px;
  --pictoCoche_color: #ffffff;

  /* Taille initiale du tampon.
   Valeurs recommandées : environ 3 à 8.
   Des valeurs beaucoup plus grandes peuvent produire
   un effet moins fluide selon le navigateur.
*/
  --pictoCoche_start_scale: 4.5;

  /* COULEURS */
  /*--business_unchecked_color: rgb(85, 85, 85);*/
  --business_unchecked_color: var(--colorUser1);
  --business_unchecked_locked_color: #b5b5b5;

  /*--business_color: #2563eb;*/
  --business_color: var(--colorUser1);
  /*--business_special_color: rgb(0, 166, 0);*//*vert car qui_coche_quoi*/
  --business_special_color: var(--colorUser1);
  --business_locked_color: #9ca3af;
  --business_locked_color: #AAA;

 /*lié à multi-selection*/
  --selection_color: #2563eb;
  --preselection_color: #d1d5db;
  --preselection_other_color: #edf0f3;
  --hover_ring_color: #edf0f3;
  
  
  /* DURÉES
   commune aux animations métier :
   - carré → cercle avec effet popup
   - apparition de la coche
   - disparition de la coche
   - cercle → carré
   Une seule durée simplifie le nettoyage via animationend.
   Valeurs raisonnables : environ 150ms à 800ms.
   Au-delà de 1000ms, l'interface peut sembler lente.
*/
  --business_animation_duration: 800ms;
  --selection_transition_duration: 180ms;

  /*lié à fichier test2023-baseStructure03.html
  --row_border: #e5e7eb;
  --text_color: #222;
  */
}


/* =========================================================
CTV
========================================================= */

.CTV {
  width: var(--ctv_size);
  min-width: var(--ctv_size);
  height: var(--ctv_size);
  /*cursor: pointer;*/
	-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  -o-user-select: none;  -khtml-user-select: none;  user-select: none;
  text-align: center;
  font-size: 0;
  line-height: 0;
}

/* =========================================================
SCÈNE GRAPHIQUE
========================================================= */

.CTV>span {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: var(--selection_ring_size);
  height: var(--selection_ring_size);
  border-radius: 50%;
  box-shadow: 0 0 0 var(--selection_ring_width) transparent;
  transition: box-shadow var(--selection_transition_duration) ease;
}

/* =========================================================
FORME MÉTIER / POINT DE SÉLECTION
========================================================= */

.CTV>span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  transition:
    width var(--business_animation_duration) ease,
    height var(--business_animation_duration) ease,
    border-radius var(--business_animation_duration) ease,
    background-color var(--business_animation_duration) ease,
    opacity var(--business_animation_duration) ease;
}

/* =========================================================
COULEUR MÉTIER COURANTE
========================================================= */

.zoneGC .CTV {
  --current_business_color: var(--business_color);
}

.zoneGC[data-jc-qui_coche_quoi="1"] /*.lignes.zoneC_1*/ .CTV {
  /* FIXME : à voir si ça doit être prioritaire sur quiCocheQuoi pour couleur grise ou verte (prioritaire si ajout de .lignes.zoneC_1)
  Mais si prioritaire alors difficile de voir la différence entre une case à cocher cochable ou non dans un groupe spécial avec qui_cohe_quoi (surtout si non connecté)
  */
  --current_business_color: var(--business_special_color);
}
/*si non (dé)cochable */
.lignes.zoneC_1[data-jc-dispo="0"] .CTV {
  --current_business_color: var(--business_locked_color);
}

/* =========================================================
CASE NON COCHÉE
========================================================= */

.lignes.zoneC_1[data-jc-type_ligne="case"] .CTV>span::before {
  width: var(--business_unchecked_size);
  height: var(--business_unchecked_size);
  border-radius: var(--business_unchecked_radius);
  background: var(--business_unchecked_color);
}

.zoneGC:not([data-jc-commentable="1"]):not([data-jc-cochable="cochable"]) .lignes.zoneC_1[data-jc-type_ligne="case"][data-jc-dispo="0"]:not([data-jc-coche="1"]) .CTV>span::before {
  background: var(--business_unchecked_locked_color);
}

/* =========================================================
CASE COCHÉE
========================================================= */

.lignes.zoneC_1[data-jc-type_ligne="case"][data-jc-coche="1"] .CTV>span::before {
  width: var(--business_checked_size);
  height: var(--business_checked_size);
  border-radius: var(--business_checked_radius);
  background: var(--current_business_color);
}

/* =========================================================
TIRET
========================================================= */

.lignes.zoneC_1[data-jc-type_ligne="tiret"] .CTV>span::before {
  width: var(--minus_width);
  height: var(--minus_height);
  border-radius: var(--minus_radius);
  background: var(--business_unchecked_color);
}

.zoneGC:not([data-jc-commentable="1"]):not([data-jc-cochable="cochable"]) .lignes.zoneC_1[data-jc-type_ligne="tiret"][data-jc-dispo="0"] .CTV>span::before { /*16/10/2026*/
  background: var(--business_unchecked_locked_color);
}

/* =========================================================
VIDE
========================================================= */

.lignes.zoneC_1[data-jc-type_ligne="vide"] .CTV>span::before {
  width: 0;
  height: 0;
}

/* =========================================================
PICTO COCHE
========================================================= */

/*.lignes.zoneC_1[data-jc-type_ligne="case"][data-jc-coche="1"] .CTV>span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: var(--pictoCoche_arm) solid var(--pictoCoche_color);
  border-bottom: var(--pictoCoche_arm) solid var(--pictoCoche_color);
  transform: translate(-50%, -68%) rotate(-45deg);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--business_animation_duration) ease;
}*/
.lignes.zoneC_1[data-jc-type_ligne="case"] .CTV>span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: var(--pictoCoche_arm) solid var(--pictoCoche_color);
  border-bottom: var(--pictoCoche_arm) solid var(--pictoCoche_color);
  transform: translate(-50%, -68%) rotate(-45deg);
  pointer-events: none;
  opacity: 0;  /*!!!001*/
  /*transition: opacity var(--business_animation_duration) ease;*/
}
.lignes.zoneC_1[data-jc-type_ligne="case"][data-jc-coche="1"] .CTV>span::after {
  opacity: 1;  /*!!!001*/
}

/* =========================================================
CTV_mode SÉLECTION
========================================================= */

/* Contour bleu sur tous les objets */
body.CTV_mode-selection #zone_contenuPrincipal .CTV>span {
  box-shadow: 0 0 0 var(--selection_ring_width) var(--selection_color);
}

/* La coche métier est toujours invisible */
body.CTV_mode-selection #zone_contenuPrincipal .lignes.zoneC_1 .CTV>span::after {
  content: none;
  opacity: 0 !important;
  animation: none !important;
}

/* Les objets non sélectionnés : uniquement le contour */
body.CTV_mode-selection #zone_contenuPrincipal .lignes.zoneC_1:not(.row--selected) .CTV>span::before {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Les objets sélectionnés : contour + petit rond bleu */
body.CTV_mode-selection #zone_contenuPrincipal .lignes.zoneC_1.row--selected .CTV>span::before {
  width: var(--selection_dot_size) !important;
  height: var(--selection_dot_size) !important;
  border-radius: 50% !important;
  background: var(--selection_color) !important;
  opacity: 1 !important;
  animation: none !important;
}

/* =========================================================
SURVOL CTV_mode NORMAL
========================================================= */

body.multiSelectCAD:not(.CTV_mode-preselection):not(.CTV_mode-selection) .CTV/*:hover*/>span:hover {
  box-shadow: 0 0 0 var(--selection_ring_width) var(--hover_ring_color);
}

/* =========================================================
CTV_mode PRÉ-SÉLECTION
========================================================= */

body.CTV_mode-preselection #zone_contenuPrincipal .CTV>span {
  box-shadow: 0 0 0 var(--selection_ring_width) var(--preselection_other_color);
}

body.CTV_mode-preselection #zone_contenuPrincipal .lignes.zoneC_1.row--preselected .CTV>span {
  box-shadow: 0 0 0 1px var(--preselection_color);
}

/* =========================================================
ANIMATION MÉTIER : COCHAGE
========================================================= */

.lignes.zoneC_1.state-just-checked .CTV>span::before {
  transition: none;
  animation: business-pop-in var(--business_animation_duration) ease-in /*cubic-bezier(.12, .65, .25, 1)*/ /*both*/;
}

/* En CTV_mode sélection, aucune animation métier ne doit réapparaître : seul le point de sélection est visible. */
body.CTV_mode-selection .lignes.zoneC_1.state-just-checked .CTV>span::before,
body.CTV_mode-selection .lignes.zoneC_1.state-just-unchecked .CTV>span::before {
  animation: none;
}

/*
La coche commence très grande et transparente,
puis devient progressivement visible tout en réduisant.
*/

.lignes.zoneC_1.state-just-checked .CTV>span::after {
  /*opacity: 0;/*!!!002*/
  animation: pictoCoche-stamp-in var(--business_animation_duration) ease-in both ;  /*both permet apparemment d'avoir l'état 0 % avant le démarrage et l'état 100 % jusqu'à la suppression de la classe*/
}

@keyframes business-pop-in {
  0% {
    width: var(--business_unchecked_size);
    height: var(--business_unchecked_size);
    border-radius: var(--business_unchecked_radius);
  }

  55% {
    width: var(--business_popup_size);
    height: var(--business_popup_size);
    border-radius: 50%;
  }

  100% {
    width: var(--business_checked_size);
    height: var(--business_checked_size);
    border-radius: var(--business_checked_radius);
  }
}

@keyframes pictoCoche-stamp-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -68%) rotate(-45deg) scale(var(--pictoCoche_start_scale));
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -68%) rotate(-45deg) scale(1);
  }
}

/* =========================================================
ANIMATION MÉTIER : DÉCOCHAGE
========================================================= */

.lignes.zoneC_1.state-just-unchecked .CTV>span::before {
  transition: none;
  animation: business-pop-out var(--business_animation_duration) ease both;
}

.lignes.zoneC_1.state-just-unchecked .CTV>span::after {
  opacity: 1; /*!!!001*/
  animation: pictoCoche-stamp-out var(--business_animation_duration) ease both;
}

@keyframes business-pop-out {
  0% {
    width: var(--business_checked_size);
    height: var(--business_checked_size);
    border-radius: var(--business_checked_radius);
  }

  100% {
    width: var(--business_unchecked_size);
    height: var(--business_unchecked_size);
    border-radius: var(--business_unchecked_radius);
  }
}

@keyframes pictoCoche-stamp-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -68%) rotate(-45deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -68%) rotate(-45deg) scale(0);
  }
}