/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root{
  --primary: #FF6634;
  --text: #111;
  --bg: #fff;
  --muted: #666;
  --cardW: 250px;
}

/* util */
*{ -webkit-box-sizing: border-box; box-sizing: border-box; }
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.section{
  margin-top: 20px;
  margin-right:auto;
  margin-left:auto;
  text-align: center;
}
.page-formation{
  padding: 20px;
}

/* Layout global : filtre gauche + contenu droite */
.page-formation-detail{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== FILTRES ===== */
.filtre-formation{
  width: 280px;
  padding: 18px 16px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.08);
  border-radius: 14px;
}

.filtre-formation-titre{
  margin: 0 0 12px;
  font-weight: 900;
  font-size: 20px;
  color: var(--text);
}

.filter-group{
  border: 0;
  padding: 0;
  margin: 10px 0;
}

.filter-group summary{
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: #BF3C00;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255,102,52,.08);
}

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

.filter-option{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 10px 6px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
}

.filter-option input{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.filter-reset{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(255,102,52,.45);
  background: #fff;
  color: #BF3C00;
  font-weight: 900;
  font-size:1.25em;
  cursor: pointer;
}

.filter-reset:hover{
  background: rgba(255,102,52,.08);
}

.filter-count{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
}

/* ===== CONTENU DROITE ===== */
.formation-content{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

/* Barre de recherche */
.page-formation-search{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;

  width: min(520px, 100%);
  margin: 0 auto 18px;

  border: 2px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  padding: 8px 12px;
}

.page-formation-search i{
  font-size: 1.2em;
  color: var(--muted);
}

.page-formation-search input{
  border: none;
  outline: none;
  width: 100%;
  font-size: 1.05em;
  background: transparent;
  color: var(--text);
}

.page-formation-search:focus-within{
  border-color: var(--primary);
  -webkit-box-shadow: 0 0 0 4px rgba(255,102,52,.16);
          box-shadow: 0 0 0 4px rgba(255,102,52,.16);
}

/* ===== GRILLE FORMATIONS ===== */
.affichage-formation{
  display: -ms-grid;
  display: grid;

  /* des colonnes fixes et centrées (comme ton screenshot) */
  -ms-grid-columns: var(--cardW) 64px var(--cardW) 64px var(--cardW);
  grid-template-columns: repeat(3, var(--cardW));
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  gap: 48px 64px;
  padding: 10px 0 30px;
}

/* Carte */
.affichage-formation-detail{
  width: var(--cardW);
  border: 3px solid var(--primary);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-transition: -webkit-transform .15s ease, -webkit-box-shadow .15s ease;
  transition: -webkit-transform .15s ease, -webkit-box-shadow .15s ease;
  -o-transition: transform .15s ease, box-shadow .15s ease;
  transition: transform .15s ease, box-shadow .15s ease;
  transition: transform .15s ease, box-shadow .15s ease, -webkit-transform .15s ease, -webkit-box-shadow .15s ease;
}

.affichage-formation-detail:hover{
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 26px rgba(0,0,0,.12);
          box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.formation-img{
  background: #fff;
}

.formation-img img{
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Bandeau titre */
.formation-titre{
  margin: 0;
  font-size:1em;
  background: var(--primary);
  color: #fff;
  padding: 14px 14px;
  font-weight: 900;
  line-height: 1.15;
  min-height: 85px;
  /* hauteur homogène (évite “blanc” quand le texte est court) */
  min-height: 66px;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  /* 2 lignes max */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Titre de la carte : utilise la couleur secteur si dispo, sinon --primary */
.formation-card .formation-titre {
  margin: 0;
  font-size: 1em;
  background: var(--sector-color, var(--primary));
  color: var(--on-sector-color, #000); /* #000 par défaut : mieux que #fff statistiquement */
  padding: 14px;
  font-weight: 900;
  line-height: 1.15;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2; /* 2 lignes max */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 66px; /* tu as mis 85 puis 66, je garde 66 qui est la dernière valeur */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Déclare la couleur de fond secteur + la couleur de texte associée (calculée AA) */
.formation-card[data-secteur="2"]  { --sector-color: #70a0ff; --on-sector-color: #000; } /* Aquaculture */
.formation-card[data-secteur="3"]  { --sector-color: #1e4530; --on-sector-color: #fff; } /* Aménagements paysagers */
.formation-card[data-secteur="4"]  { --sector-color: #74a675; --on-sector-color: #000; } /* Maraichage / Horticulture */
.formation-card[data-secteur="6"]  { --sector-color: #ffc23a; --on-sector-color: #000; } /* Animalerie */
.formation-card[data-secteur="7"]  { --sector-color: #ba3429; --on-sector-color: #fff; } /* Certification */
.formation-card[data-secteur="8"]  { --sector-color: #f990ff; --on-sector-color: #000; } /* Fleuristerie */
.formation-card[data-secteur="15"] { --sector-color: #812122; --on-sector-color: #fff; } /* VAE */

/* surlignage quand id_formation ciblé (optionnel) */
.formation-card.is-target{
  outline: 4px solid rgba(255,102,52,.45);
  outline-offset: 6px;
  -webkit-box-shadow: 0 18px 40px rgba(0,0,0,.18);
          box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
/* Couleur par défaut si secteur inconnu */
.formation-card{
  --sector-color: var(--primary);
  border-color: var(--sector-color);
}

.formation-card .formation-titre{
  background: var(--sector-color);
}
.formation-card:hover{
  -webkit-box-shadow: 0 12px 26px color-mix(in srgb, var(--sector-color) 25%, rgba(0,0,0,.12));
          box-shadow: 0 12px 26px color-mix(in srgb, var(--sector-color) 25%, rgba(0,0,0,.12));
}
/* Mapping secteur -> couleur */
.formation-card[data-secteur="1"]{ --sector-color: #8C1EF9; } /* Vente et service aux personnes */
.formation-card[data-secteur="2"]{ --sector-color: #70a0ff; } /* Aquaculture */
.formation-card[data-secteur="3"]{ --sector-color: #1e4530; } /* Aménagements paysagers */
.formation-card[data-secteur="4"]{ --sector-color: #74a675; } /* Maraichage / Horticulture */
.formation-card[data-secteur="6"]{ --sector-color: #ffc23a; } /* Animalerie */
.formation-card[data-secteur="7"]{ --sector-color: #ba3429; } /* Certification */
.formation-card[data-secteur="8"]{ --sector-color: #f990ff; } /* Fleuristerie */
.formation-card[data-secteur="15"]{ --sector-color: #812122; } /* VAE */

.active-filters{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  gap:10px;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  margin: 6px 0 18px;
}

.filter-chip{
  border: 2px solid rgba(255,102,52,.35);
  background: rgba(255,102,52,.08);
  color: #111;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.filter-chip:hover{
  background: rgba(255,102,52,.14);
}

.formation-card .formation-img{
  position: relative;
}
.formation-modalite{
  position: absolute;
  top: .6rem;
  right: .6rem;
  font-weight: 800;
  font-size: .75rem;
  line-height: 1;
  padding: .35rem .55rem;
  border-radius: 999px;
  z-index: 2;
  background: rgba(0, 0, 0, .65);
  color: #fff;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 1;            /* ✅ toujours visible */
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;       /* ✅ pas d'animation */
  -webkit-transition: none;
  -o-transition: none;
  transition: none;      /* ✅ optionnel */
  pointer-events: none;
}
.formation-card::after{
  content: attr(data-title);
  position: absolute;
  left: 12px;
  right: 12px;
  top: 45px;

  padding: .55rem .7rem;
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1.2;

  background: rgba(0,0,0,.78);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-transition: opacity .12s ease, -webkit-transform .12s ease;
  transition: opacity .12s ease, -webkit-transform .12s ease;
  -o-transition: opacity .12s ease, transform .12s ease;
  transition: opacity .12s ease, transform .12s ease;
  transition: opacity .12s ease, transform .12s ease, -webkit-transform .12s ease;

  pointer-events: none;
  z-index: 5;
}

/* Affichage au survol + focus clavier */
.formation-card:hover::after,
.formation-card:focus-visible::after{
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .affichage-formation{
    -ms-grid-columns: var(--cardW) 28px var(--cardW);
    grid-template-columns: repeat(2, var(--cardW));
    gap: 28px 28px;
  }
}

@media (max-width: 900px){
  .section{
  width:70%;
  margin-top: 20px;
  margin-right:auto;
  margin-left:auto;
  text-align: center;
}
  .page-formation-detail{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .filtre-formation{
    width: 100%;
  }

  .page-formation-search{
    width: 100%;
    margin: 12px 0 16px;
  }
}

@media (max-width: 620px){
  .section{
  width:60%;
  margin-top: 20px;
  margin-right:auto;
  margin-left:auto;
  text-align: center;
}
  :root{ --cardW: 260px; } /* un poil plus large sur mobile si tu veux */
  .affichage-formation{
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .affichage-formation-detail{
    width: min(var(--cardW), 92vw);
  }
}