/* =============================================================================
   tiles.css — Grille Metro et tuiles de la page d'accueil
   =============================================================================
   Sommaire :
     1. Grille principale (CSS Grid responsive)
     2. Tuile générique (animation, hover, badge, ghost)
     3. Variations de couleur (gray, blue, blue-dark, green, orange, red)
     4. Variations de taille (1x1, 1x2, 2x1, 2x2, 3x2)
     5. Tuiles spéciales (slider, formation, logo, donut, big-percent…)
     6. Responsive (tablette / mobile)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. GRILLE PRINCIPALE
   --------------------------------------------------------------------------- */
.home-main {
  flex: 1;
  padding: 20px;
}

.tiles-wrap {
  /* Largeur calée sur 8 colonnes : 8 × tile-size + 7 × gap */
  max-width: calc(8 * var(--tile-size) + 7 * var(--tile-gap));
  margin: 0 auto;
}

.tiles-grid {
  display: grid;
  /* Colonnes de taille FIXE pour que les tuiles 1x1 soient carrées */
  grid-template-columns: repeat(8, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  /* Pas de "dense" : on garde l'ordre exact des tuiles du JSON */
  grid-auto-flow: row;
  gap: var(--tile-gap);
  justify-content: center;
}

.tiles-no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   2. TUILE GÉNÉRIQUE
   --------------------------------------------------------------------------- */
.tile {
  position: relative;
  background: var(--bg-tile-gray);
  color: var(--tile-text);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  text-decoration: none;
  box-shadow: var(--tile-shadow);
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
}

.tile:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--tile-shadow-hover);
  z-index: 2;
}

.tile:active {
  transform: translateY(-2px) scale(1.005);
}

/* Recherche : tuile masquée (classe utilisée par l'ancien filtre, à conserver
   pour compatibilité mais plus utilisée par search.js v2). */
.tile.tile-search-hidden {
  opacity: 0.12;
  pointer-events: none;
  filter: grayscale(0.8);
}

/* Contenu standard */
.tile-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tile-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.95;
}

.tile-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tile-title-main {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.1;
  text-transform: uppercase;
}

.tile-subtitle {
  font-size: 10px;
  color: var(--tile-text-secondary);
  letter-spacing: 0.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* Badge en haut à gauche */
.tile-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom-right-radius: 2px;
  z-index: 3;
}

.tile-badge-green  { background: #107c10; }
.tile-badge-red    { background: #d83b01; }
.tile-badge-yellow { background: #ffb900; color: #1b1b1b; }

/* Ghost word (BAC, CAP, 3E) en filigrane sur tuiles formation */
.tile-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 70px;
  font-weight: 900;
  color: var(--tile-text);
  opacity: 0.08;
  letter-spacing: -2px;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.tile-formation:hover .tile-ghost {
  opacity: 0.9;
}

.tile-formation .tile-content {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   3. COULEURS
   --------------------------------------------------------------------------- */
.tile-gray      { background: var(--bg-tile-gray); }
.tile-blue      { background: var(--bg-tile-blue); }
.tile-blue-dark { background: var(--bg-tile-blue-dark); }
.tile-green     { background: var(--bg-tile-green); }
.tile-orange    { background: var(--bg-tile-orange); }
.tile-red       { background: var(--bg-tile-red); }

/* Tuiles formation : dégradé subtil */
.tile-formation {
  background: var(--formation-grad);
}

/* ---------------------------------------------------------------------------
   4. TAILLES (CSS Grid spans)
   --------------------------------------------------------------------------- */
.tile-1x1 { grid-column: span 1; grid-row: span 1; }
.tile-2x1 { grid-column: span 2; grid-row: span 1; }
.tile-1x2 { grid-column: span 1; grid-row: span 2; }
.tile-2x2 { grid-column: span 2; grid-row: span 2; }
.tile-3x2 { grid-column: span 3; grid-row: span 2; }

/* ---------------------------------------------------------------------------
   5. TUILES SPÉCIALES
   --------------------------------------------------------------------------- */

/* --- Slider photos (3x2) --- */
/* Sélecteur composé (.vslider.tile-slider) pour gagner en spécificité sur
   .vslider tout seul (défini dans slider.css, chargé APRÈS tiles.css) :
   sans ça, min-height:320px (pensé pour les sliders en modal) prend le
   dessus sur la taille réelle de la tuile (268px pour un 3x2), et le
   surplus déborde en haut de la tuile (justify-content:flex-end sur .tile). */
.vslider.tile-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}
/* Le stage interne hérite du même souci (min-height:320px pensé pour les modals) */
.tile-slider .vslider-stage {
  min-height: 0;
}

.tile-slider-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.tile-slider-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  background: linear-gradient(135deg, #2d3a4a, #1b2735);
  letter-spacing: 1px;
}

.tile-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

/* --- Logo (2x2) --- */
.tile-content-logo {
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 12px;
}

.tile-logo-mark {
  width: 80px;
  height: 80px;
  background: #fff;
  color: var(--bg-tile-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -2px;
}

.tile-logo-image {
  max-width: 110px;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tile-logo-text {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
}

.tile-logo-sub {
  font-size: 10px;
  color: var(--tile-text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Donut (résultats) --- */
.tile-content-donut {
  align-items: center;
  text-align: center;
  position: relative;
  height: 100%;
  justify-content: center;
}

.tile-donut {
  width: 70px;
  height: 70px;
  transform: rotate(-90deg);
}

.tile-donut-bg { stroke: rgba(255,255,255,0.15); }
.tile-donut-fg {
  stroke: var(--bg-tile-blue);
  transition: stroke-dasharray 0.6s ease;
}

.tile-donut-text {
  fill: #fff;
  font-size: 7px;
  font-weight: 700;
  transform: rotate(90deg);
  transform-origin: center;
}

/* --- Big percent (97%, 87%) --- */
.tile-content-big-percent {
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
}

.tile-big-percent {
  font-size: 49px;
  font-weight: 200;
  line-height: 1;
  color: var(--accent-yellow);
  letter-spacing: -2px;
}

/* --- Compteur de visites --- */
.tile-content-counter {
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
}
.tile-counter-icon {
  font-size: 20px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.tile-counter-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-yellow);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

/* --- Big actu (2x2) --- */
.tile-content-big-actu {
  height: 100%;
  justify-content: space-between;
  padding-top: 16px;
}

.tile-big-actu-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  opacity: 0.85;
}

.tile-big-actu-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin: 8px 0;
}

.tile-big-actu-text {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.9;
}

.tile-big-actu-cta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 12px;
}

/* --- FLASH INFO : défilement vertical info par info --- */
.tile-content-flash {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  padding: 12px !important;
  overflow: hidden;
  box-sizing: border-box;
}

.tile-flash-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.tile-flash-vertical {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  /* Hauteur minimale garantie pour que les items en position absolute aient une zone visible */
  min-height: 60px;
  width: 100%;
}

.tile-flash-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  /* État par défaut : caché, en attente d'entrée par le bas */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  pointer-events: none;
}
.tile-flash-item.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tile-flash-item.leaving {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}

.tile-flash-icon {
  font-size: 18px;
  line-height: 1;
  opacity: 0.85;
  flex-shrink: 0;
}

.tile-flash-text {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  /* Limite à 4 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Indicateurs (petits dots à droite) */
.tile-flash-dots {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.tile-flash-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
}
.tile-flash-dot.active {
  background: rgba(255, 255, 255, 0.95);
  height: 14px;
  border-radius: 3px;
}

/* --- Bars (examens) --- */
.tile-content-bars {
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.tile-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60%;
  margin-bottom: 8px;
}

.tile-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--bg-tile-blue), var(--bg-tile-blue-dark));
  height: var(--h);
  border-radius: 1px 1px 0 0;
}

/* --- Timeline (calendrier) --- */
.tile-content-timeline {
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.tile-timeline-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.tile-timeline-date {
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
}

.tile-timeline-month {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 4px;
}

/* --- Threads (1x2) --- */
.tile-content-threads {
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.tile-threads-icon {
  font-size: 52px;
  font-weight: 100;
  line-height: 1;
}

/* --- Carousel (2x2) --- */
.tile-content-carousel {
  height: 100%;
  justify-content: space-between;
  padding-top: 16px;
}

.tile-carousel-img {
  font-size: 70px;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------------------------- */

/* Tablette horizontale : 5 colonnes */
@media (max-width: 1100px) {
  .tiles-wrap {
    max-width: calc(5 * var(--tile-size) + 4 * var(--tile-gap));
  }
  .tiles-grid {
    grid-template-columns: repeat(5, var(--tile-size));
  }
}

/* Tablette portrait : 4 colonnes */
@media (max-width: 800px) {
  .tiles-wrap {
    max-width: calc(4 * var(--tile-size) + 3 * var(--tile-gap));
  }
  .tiles-grid {
    grid-template-columns: repeat(4, var(--tile-size));
  }
  /* La tuile 3x2 ne rentre plus sur 4 colonnes : on la passe en pleine largeur */
  .tile-3x2 { grid-column: span 4; }
}

/* Smartphone : 3 colonnes, taille fluide calculée sur la largeur d'écran
   réelle (tient pile quel que soit le modèle de téléphone) */
@media (max-width: 500px) {
  :root {
    --tile-gap: 6px;
    /* 3 colonnes : (largeur écran - paddings home-main - 2 espacements) / 3 */
    --tile-size: calc((100vw - 20px - 2 * 6px) / 3);
  }
  .home-main { padding: 10px; }
  .tiles-wrap {
    max-width: calc(3 * var(--tile-size) + 2 * var(--tile-gap));
  }
  .tiles-grid {
    grid-template-columns: repeat(3, var(--tile-size));
  }
  .tile-3x2 { grid-column: span 3; }
  .tile-2x2 { grid-column: span 2; }
  .tile-title-main  { font-size: 13px; }
  .tile-subtitle    { font-size: 10px; }
  .tile-logo-text   { font-size: 15px; }
  .tile-logo-image  { max-width: 60px; max-height: 60px; }
  .tile-big-percent { font-size: 28px; }
  .tile-counter-value { font-size: 22px; }
  .tile-counter-icon { font-size: 14px; }
  .tile-ghost       { font-size: 40px; }
  .tile-badge       { font-size: 8px; padding: 2px 6px; }
  .tile             { padding: 8px; }
  .tile-icon        { font-size: 20px; margin-bottom: 4px; }
}

/* Très petits écrans (téléphones étroits, ~360px et moins) : encore un peu
   plus compact pour garder 3 colonnes lisibles */
@media (max-width: 380px) {
  :root {
    --tile-gap: 4px;
    --tile-size: calc((100vw - 16px - 2 * 4px) / 3);
  }
  .home-main { padding: 8px; }
}

/* =============================================================================
   Tuile non-cliquable (slider, etc.)
   ============================================================================= */
.tile-no-click {
    cursor: default;
}
.tile-no-click:hover {
    /* Pas de transform au hover */
    transform: none;
}

/* =============================================================================
   Tuiles SPACER : invisibles, juste pour créer des "trous" dans la grille Metro
   ============================================================================= */
.tile.tile-spacer {
    background: transparent !important;
    box-shadow: none !important;
    cursor: default;
    pointer-events: none;
    border: none;
}
.tile.tile-spacer:hover,
.tile.tile-spacer:focus,
.tile.tile-spacer:active {
    transform: none !important;
    box-shadow: none !important;
}

/* Indication visuelle uniquement en mode édition / admin (ne s'affiche jamais sur le site visiteur) */
body.admin-page .tile.tile-spacer,
body.tiles-edit-mode .tile.tile-spacer {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 8px,
        rgba(255, 255, 255, 0.08) 8px,
        rgba(255, 255, 255, 0.08) 16px
    ) !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
}

.tile-spacer-empty {
    display: block;
    width: 100%;
    height: 100%;
}