/* ccologo-style.css
   Grid layout for the CCO Logo Wall, with:
   - Container borders controlled inline
   - Per-item margin/padding applied inline
   - Internal vertical/horizontal separators
   - Uniform transitions (0.4s) for hover effects
*/

/* --- Container in CSS Grid --- */
.ccologo-container {
  display: grid;
  /* Default fallback for columns (will be overridden by JS) */
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
  /*
    External container borders are set via inline style
    (border-top/right/bottom/left).
  */
}

/* Each cell in the grid */
.ccologo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  border: none; /* No default border per item */
  text-align: center;
  /* margin/padding are injected inline if needed */
}

/* Global transitions on the img for any transform/filter changes */
.ccologo-item img {
  transition: all 0.4s ease; /* 0.4s for all effects (filter, transform, opacity) */
}

/* --- Internal Separators ---
   We'll add them if the container has .ccologo-has-vertical-sep 
   or .ccologo-has-horizontal-sep
*/

/* Vertical lines: add right border on each item except the "last column" items */
.ccologo-has-vertical-sep .ccologo-item {
  border-right: 1px solid #ccc;
}
.ccologo-has-vertical-sep .ccologo-lastcol {
  border-right: none;
}

/* Horizontal lines: add bottom border on each item except the "last row" items */
.ccologo-has-horizontal-sep .ccologo-item {
  border-bottom: 1px solid #ccc;
}
.ccologo-has-horizontal-sep .ccologo-lastrow {
  border-bottom: none;
}

/* Logo link */
.ccologo-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Logo image */
.ccologo-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Hover Effects (all .4s transition) --- */

/* 1. Couleur -> NB */
.ccologo_couleur_nb img {
  filter: none;
}
.ccologo_couleur_nb:hover img {
  filter: grayscale(100%);
}

/* 2. NB -> couleur */
.ccologo_nb_couleur img {
  filter: grayscale(100%);
}
.ccologo_nb_couleur:hover img {
  filter: none;
}

/* 3. Zoom in */
.ccologo_zoomin img {
  transform: scale(1);
}
.ccologo_zoomin:hover img {
  transform: scale(1.1);
}

/* 4. Rotation */
.ccologo_rotate img {
  transform: rotate(0deg);
}
.ccologo_rotate:hover img {
  transform: rotate(10deg);
}

/* 5. Fade (opacity) */
.ccologo_fade img {
  opacity: 1;
}
.ccologo_fade:hover img {
  opacity: 0.7;
}

/* 6. Zoom out */
.ccologo_zoomout img {
  transform: scale(1);
}
.ccologo_zoomout:hover img {
  transform: scale(0.9);
}

/* 7. Sepia */
.ccologo_sepia img {
  filter: none;
}
.ccologo_sepia:hover img {
  filter: sepia(100%);
}

/* 8. Shake (keyframes + animation) */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}
.ccologo_shake img {
  /* transform none by default */
}
.ccologo_shake:hover img {
  animation: shake 0.4s;
}

/* 9. Blur */
.ccologo_blur img {
  filter: none;
}
.ccologo_blur:hover img {
  filter: blur(2px);
}

/* 10. Saturate */
.ccologo_saturate img {
  filter: none;
}
.ccologo_saturate:hover img {
  filter: saturate(200%);
}

/* 11. Contrast */
.ccologo_contrast img {
  filter: none;
}
.ccologo_contrast:hover img {
  filter: contrast(150%);
}

/* 12. Brightness */
.ccologo_brightness img {
  filter: none;
}
.ccologo_brightness:hover img {
  filter: brightness(150%);
}

/* 13. Invert */
.ccologo_invert img {
  filter: none;
}
.ccologo_invert:hover img {
  filter: invert(100%);
}

.ccologo-tooltip {
  position: absolute;
  display: inline-block;
  padding: 6px 10px;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 4px;
  pointer-events: none; /* Le curseur ne clique pas dessus */
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.ccologo-has-vertical-sep .ccologo-item {
  border-right: var(--ccologo-inner-border, 1px solid #ccc);
}
.ccologo-has-vertical-sep .ccologo-lastcol {
  border-right: none;
}

.ccologo-has-horizontal-sep .ccologo-item {
  border-bottom: var(--ccologo-inner-border, 1px solid #ccc);
}
.ccologo-has-horizontal-sep .ccologo-lastrow {
  border-bottom: none;
}

.ccologo-container.ccologo-use-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  /* grid-related props ignorés */
}

.ccologo-container.ccologo-use-flex .ccologo-item {
  flex: 1 0 auto; /* ou une base % selon le nombre de colonnes souhaité */
  max-width: calc(100% / 4); /* peut être ajusté dynamiquement en JS selon cols-desktop */
}