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

:root {
  --color-primary: #FF6634;
  --color-secondary: #ffb703;
  --color-bg: #0b1020;
  --color-text: #FFFFFF;
}
.secteur{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    padding-top:25px;
}
.intro{
    margin-left:80px;
    margin-top:15px;
    font-size:1.1em;
    margin-right:30px;
}
.content{
    margin-top : 25px;
    margin-left:60px;
    margin-right:30px;
    font-size:1.1em;
}
.content h2{
    margin-top : 10px;
    margin-left:10px;
    color:var(--color-primary);
    font-weight: 800;
}
.content h3{
    margin-top : 10px;
    margin-left:15px;
}
.content p{
    margin-top : 10px;
    margin-left:15px;
}
.content ul{
    list-style: none;
    margin-top : 10px;
    margin-left:35px;

}
.content i{
    margin-top : 10px;
    margin-left:15px;
    color:var(--color-primary);
    font-size:1.15em;
}
.formations-grid{
    width:80%;
    margin-left:60px;
  display:-ms-grid;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, 260px);
    /* centre la grille dans son conteneur */
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;

  /* évite que la grille prenne toute la largeur si tu veux un rendu plus "compact" */
  margin:0 auto;      /* centre dans la div parente */
}
/* Carte */
.formation-card{
  display:block;
  text-decoration:none;
  border-radius:14px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.08);
  background:#fff;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  height:100%;
    -webkit-transition: -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    transition: -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    -o-transition: transform .18s ease, box-shadow .18s ease;
    transition: transform .18s ease, box-shadow .18s ease;
    transition: transform .18s ease, box-shadow .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
  will-change: transform;
}
.formation-card:hover{
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 14px 30px rgba(0,0,0,.16);
          box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

/* optionnel : un petit zoom de l’image */
.formation-card img{
  -webkit-transition: -webkit-transform .25s ease;
  transition: -webkit-transform .25s ease;
  -o-transition: transform .25s ease;
  transition: transform .25s ease;
  transition: transform .25s ease, -webkit-transform .25s ease;
}

.formation-card:hover img{
  -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
          transform: scale(1.03);
}

/* accessibilité : même effet au clavier */
.formation-card:focus-visible{
  outline: 3px solid rgba(29, 78, 216, .9);
  outline-offset: 3px;
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 14px 30px rgba(0,0,0,.16);
          box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
.formation-imgwrap{
  height:180px;              /* fixe */
  overflow:hidden;
}
.formation-imgwrap img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  display:block;
}

.formation-band{
  background: var(--sector-color, #1e4530);
  padding:14px 16px;
  min-height:84px;           /* fixe la hauteur du bandeau */
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
}

.formation-band h3{
  margin:0;
  color:#fff;
  font-weight:800;
  line-height:1.15;

  /* clamp 2 lignes */
  display:-webkit-box;
  line-clamp: 2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Conteneur image : hauteur FIXE, donc l’image ne peut pas “prendre toute la page” */
.formation-imgwrap{
  height:180px;            /* ajuste: 160–220 selon ton rendu */
  overflow:hidden;
}

.formation-imgwrap img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;        /* remplit proprement */
  display:block;
}

/* Bandeau couleur secteur */
.formation-band{
  background: var(--sector-color, #1e4530);
  padding:14px 16px;
}

.formation-band h3{
  margin:0;
  color:#fff;
  font-weight:800;
  line-height:1.15;
  font-size:1.05rem;
}

/* BONUS : pour les couleurs très claires (ex: #ffc23a), texte foncé */
.formation-card[style*="#ffc23a"] .formation-band h3,
.formation-card[style*="#70a0ff"] .formation-band h3{
  color:#111;
}
.filters-box{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  gap:12px 18px;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  margin:14px 0 18px;
}
.filters-box label{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  gap:8px;
  font-weight:600;
}
.btn-filter{
  padding:8px 12px;
  border-radius:10px;
  border:0;
  background:#111827;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.btn-reset{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #d1d5db;
  text-decoration:none;
  color:#111;
}
.filtre{
    padding-left:60px;
    color:var(var(--color-primary));
}
.filtre h2{
    color:var(--color-primary);
    font-size:1.6em;
    font-weight:800;
}
.sector-formations{
    margin-top:25px;
    margin-left:20px;
}
.content-actions{
  margin-left:15px;        /* aligné avec tes <p> */
  margin-top:12px;
}

.content-btn{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  background: var(--color-primary);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  border:2px solid rgba(0,0,0,.08);
}

.content-btn:hover{
  -webkit-filter:brightness(0.95);
          filter:brightness(0.95);
}
#filtre{ scroll-margin-top: 90px; }
.filters-box label.modalite{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  gap:.35rem;
  margin-top:.75rem;
}

.filters-box label.modalite span{
  font-weight:600;
}

.filters-box #modalite{
  width:100%;
  padding:.55rem .65rem;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  color:var(--text);
}
.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);
}
.sector-cta{
  margin-top:22px;
  padding:18px 18px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.sector-cta h2{
  margin:0 0 6px 0;
  font-size:1.25rem;
}

.sector-cta p{
  margin:0 0 14px 0;
  line-height:1.4;
}

.sector-cta-actions{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  gap:10px;
}

.cta-btn{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  -webkit-transition:-webkit-transform .18s ease, -webkit-box-shadow .18s ease, -webkit-filter .18s ease;
  transition:-webkit-transform .18s ease, -webkit-box-shadow .18s ease, -webkit-filter .18s ease;
  -o-transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease, -webkit-filter .18s ease;
}

.cta-primary{
  background: var(--color-primary);
  color:#fff;
}

.cta-secondary{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.18);
}

.cta-btn:hover{
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 10px 24px rgba(0,0,0,.12);
          box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.aucune-formation{
    margin-left:40px;
    font-size:1.2em;
}
.aucune-formation a{
    text-decoration: none;
    color:var(--color-primary);
    font-weight: 800;
}
.lien{
      text-decoration: none;
    color:var(--color-primary);
    font-weight: 800;
}
/* Bloc Offres secteur */
.secteur-offres{
  background: var(--bg);
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  padding: 22px;
  margin: 22px 0;
}

.secteur-offres__head h2{
  margin: 0 0 8px 0;
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  color: var(--text);
}

.secteur-offres__head p{
  margin: 0 0 18px 0;
  color: var(--muted);
  line-height: 1.45;
}

.secteur-offres__grid{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px){
  .secteur-offres__grid{ -ms-grid-columns: 1fr; grid-template-columns: 1fr; }
}

.offre-mini{
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 14px;
  padding: 14px 14px 12px 14px;
  background: #fff;
}

.offre-mini__head{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 8px;
}

.offre-mini__title{
  margin: 0;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.25;
}

.offre-mini__date{
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
}

.offre-mini__excerpt{
  margin: 0 0 12px 0;
  color: var(--text);
  line-height: 1.45;
}

.offre-mini__actions{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.offre-mini__link{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.offre-mini__link:hover{
  -webkit-filter: brightness(.95);
          filter: brightness(.95);
}

.offre-mini__pj{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,.14);
  color: var(--text);
  text-decoration: none;
}

.secteur-offres__foot{
  margin-top: 16px;
}

.secteur-offres__all{
  color: var(--text);
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(17,17,17,.35);
          text-decoration-color: rgba(17,17,17,.35);
}

.secteur-offres__empty{
  padding: 14px;
  border-radius: 12px;
  background: rgba(17,17,17,.03);
  color: var(--muted);
}
@media (max-width: 520px){
  .cta-btn{ width:100%; }
}