/* =========================================================
   CENTRE FRAMEWORK v9.0 STABLE
   Institution Dampierre
   ---------------------------------------------------------
   CSS complet des fiches de formation du Centre
   Compatible Joomla 6 / Cassiopeia Extended

   À déposer ici :
   /templates/cassiopeia_inst_dampierre01_extended/css/centre.css

   Version stable :
   - groupes de champs conservés
   - KPI / jauges automatiques
   - jauges bleu > violet > fuchsia
   - pictogrammes spécifiques
   - animation de remplissage conservée
   - hero Centre V2 automatique : badges pilotés par les champs Joomla
   - styles spécifiques par badge : référence, titre court, type, secteur, niveau
   - retouches visibles :
     * champ URL plaquette-commerciale affiché comme bouton PDF sans libellé
     * pourcentage mieux aligné
     * notes (*), (**), (***) atténuées dans les titres KPI
   ========================================================= */

/* =========================================================
   01 - STRUCTURE GÉNÉRALE
   ========================================================= */

.fiche-centre {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.fiche-centre > h1 {
  color: var(--dampierre-bleu, #2d318f);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 2rem;
}

/* =========================================================
   02 - HERO / CARTE D'IDENTITÉ
   ========================================================= */

.fiche-hero {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,249,252,.98));
  border: 1px solid rgba(45, 49, 143, .14);
  border-top: 6px solid var(--dampierre-bleu, #2d318f);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(37, 42, 127, .13);
}

.fiche-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-hero__image img {
  display: block;
  max-width: 300px;
  height: auto;
  border-radius: 16px;
}

.fiche-hero__content {
  display: flex;
  align-items: center;
  min-width: 0;
}

.fiche-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.fiche-hero__badges--vertical {
  flex-direction: column;
  align-items: flex-start;
}

.fiche-hero__badges span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  padding: .65rem 1rem;
  color: #fff;
  background: var(--dampierre-bleu, #2d318f);
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 5px 14px rgba(37, 42, 127, .12);
}

.fiche-hero__badges span:nth-child(1) {
  background: var(--dampierre-fuchsia, #e5007d);
}

.fiche-hero__badges span:nth-child(2) {
  color: var(--dampierre-bleu-nuit, #252a7f);
  background: var(--dampierre-or, #d7b85b);
}


/* =========================================================
   02B - HERO CENTRE V2 AUTOMATIQUE
   ---------------------------------------------------------
   Ces règles complètent le bloc .fiche-hero ci-dessus.
   Elles ciblent le hero généré automatiquement depuis le
   groupe de champs 01 - En-tête.
   ========================================================= */

.fiche-hero--centre.fiche-hero--auto {
  grid-template-columns: minmax(260px, 420px) minmax(260px, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.fiche-hero--centre .fiche-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.fiche-hero--centre .fiche-hero__image img {
  max-width: min(100%, 420px);
  max-height: 190px;
  object-fit: contain;
  border-radius: 18px;
}

.fiche-hero--centre .fiche-hero__content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.fiche-hero--centre .fiche-hero__badges--vertical {
  align-items: flex-start;
  gap: .85rem;
}

.fiche-hero--centre .fiche-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: .55rem 1.15rem;
  color: #fff;
  background: var(--dampierre-bleu, #2d318f);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  box-shadow: 0 8px 18px rgba(37, 42, 127, .18);
  animation: ficheHeroBadgeIn .35s ease both;
}

.fiche-hero--centre .fiche-hero__badge i {
  font-size: .95em;
  opacity: .95;
}

.fiche-hero--centre .fiche-hero__badge:nth-child(1) { animation-delay: .03s; }
.fiche-hero--centre .fiche-hero__badge:nth-child(2) { animation-delay: .06s; }
.fiche-hero--centre .fiche-hero__badge:nth-child(3) { animation-delay: .09s; }
.fiche-hero--centre .fiche-hero__badge:nth-child(4) { animation-delay: .12s; }
.fiche-hero--centre .fiche-hero__badge:nth-child(5) { animation-delay: .15s; }
.fiche-hero--centre .fiche-hero__badge:nth-child(6) { animation-delay: .18s; }

/* Référence interne */
.fiche-hero--centre .fiche-hero__badge-reference-interne {
  color: #fff;
  background: var(--dampierre-fuchsia, #e5007d);
}

/* Titre court */
.fiche-hero--centre .fiche-hero__badge-titre-court {
  color: var(--dampierre-bleu-nuit, #252a7f);
  background: var(--dampierre-or, #d7b85b);
}

/* Type de formation */
.fiche-hero--centre .fiche-hero__badge-type-de-formation {
  color: #fff;
  background: var(--dampierre-bleu, #2d318f);
}

/* Secteur d'activité */
.fiche-hero--centre .fiche-hero__badge-secteur-activite {
  color: #fff;
  background: var(--dampierre-bleu, #2d318f);
}

/* Niveau */
.fiche-hero--centre .fiche-hero__badge-niveau {
  color: #fff;
  background: var(--dampierre-bleu-nuit, #252a7f);
}

/* Durée / calendrier éventuels */
.fiche-hero--centre .fiche-hero__badge-duree,
.fiche-hero--centre .fiche-hero__badge-duree-heures,
.fiche-hero--centre .fiche-hero__badge-duree-texte {
  color: var(--dampierre-bleu-nuit, #252a7f);
  background: #eef2ff;
}

@keyframes ficheHeroBadgeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   03 - GROUPES
   ========================================================= */

.fiche-groupe {
  margin-bottom: 1.8rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid rgba(45, 49, 143, .16);
  border-top: 6px solid var(--dampierre-bleu, #2d318f);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(37, 42, 127, .12);
}

.fiche-groupe h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.2rem;
  color: var(--dampierre-bleu, #2d318f);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
}

.fiche-groupe h2::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--dampierre-bleu, #2d318f);
  background: #eef2ff;
  border-radius: 999px;
  font-size: 1rem;
}

.fiche-groupe:nth-of-type(2) h2::before { content: "\f02d"; }
.fiche-groupe:nth-of-type(3) h2::before { content: "\f0c0"; }
.fiche-groupe:nth-of-type(4) h2::before { content: "\f19d"; }
.fiche-groupe:nth-of-type(5) h2::before { content: "\f05a"; }
.fiche-groupe:nth-of-type(6) h2::before { content: "\f201"; }
.fiche-groupe:nth-of-type(7) h2::before { content: "\f2b5"; }
.fiche-groupe:nth-of-type(8) h2::before { content: "\f1da"; }

/* =========================================================
   04 - GRILLE DES CHAMPS
   ========================================================= */

.fiche-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

/* =========================================================
   05 - CARTES DE CHAMPS
   ========================================================= */

.fiche-champ {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(45, 49, 143, .10);
  border-left: 6px solid var(--dampierre-bleu, #2d318f);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(37, 42, 127, .08);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.fiche-champ:hover {
  transform: translateY(-3px);
  border-left-color: var(--dampierre-fuchsia, #e5007d);
  border-color: rgba(229, 0, 125, .20);
  box-shadow: 0 14px 30px rgba(37, 42, 127, .18);
}

.fiche-champ > strong {
  grid-column: 2;
  display: block;
  margin-bottom: .25rem;
  color: var(--dampierre-bleu, #2d318f);
  font-weight: 800;
  line-height: 1.25;
  transition: color .25s ease;
}

.fiche-champ:hover > strong {
  color: var(--dampierre-fuchsia, #e5007d);
}

.fiche-valeur {
  grid-column: 2;
  color: var(--dampierre-texte, #222);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.fiche-champ--long {
  grid-column: 1 / -1;
  align-items: start;
}

/* =========================================================
   06 - ICÔNES DES CHAMPS
   ========================================================= */

.fiche-champ::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--dampierre-bleu, #2d318f);
  background: #eef2ff;
  border-radius: 50%;
  font-size: 1.1rem;
  transition:
    background .25s ease,
    color .25s ease;
}

.fiche-champ:hover::before {
  color: var(--dampierre-fuchsia, #e5007d);
  background: rgba(229, 0, 125, .12);
}

/* Référentiels / certifications */
.fiche-champ-rncp::before { content: "\f02d"; }
.fiche-champ-niveau::before { content: "\f19d"; }
.fiche-champ-code-nsf::before { content: "\f02a"; }
.fiche-champ-formacode::before { content: "\f02a"; }
.fiche-champ-cpf::before { content: "\f0a3"; }
.fiche-champ-certificateur::before { content: "\f559"; }
.fiche-champ-lien-france-competences::before { content: "\f35d"; }

/* Admission */
.fiche-champ-public::before { content: "\f0c0"; }
.fiche-champ-prerequis::before { content: "\f058"; }
.fiche-champ-modalites-dacces::before { content: "\f274"; }
.fiche-champ-projet-professionnel-valide::before { content: "\f0ae"; }

/* Formation */
.fiche-champ-objectif-s-professionnel-s::before { content: "\f5da"; }
.fiche-champ-organisation::before { content: "\f0e8"; }
.fiche-champ-validation::before { content: "\f058"; }
.fiche-champ-perspectives::before { content: "\f0b1"; }

/* Informations pratiques */
.fiche-champ-duree-en-heures::before,
.fiche-champ-duree-texte::before { content: "\f017"; }
.fiche-champ-participants-min::before,
.fiche-champ-participants-max::before { content: "\f500"; }
.fiche-champ-tarif::before { content: "\f153"; }
.fiche-champ-contact::before { content: "\f095"; }
.fiche-champ-accessibilite::before { content: "\f29a"; }

/* Version */
.fiche-champ-date-de-mise-a-jour::before { content: "\f1da"; }

/* =========================================================
   07 - KPI / JAUGES QUALITÉ v7.2
   ========================================================= */

.fiche-champ--kpi {
  overflow: hidden;
  align-items: start;
  padding: 1.2rem 1rem 1.1rem;
  background:
    radial-gradient(circle at top right, rgba(229, 0, 125, .07), transparent 34%),
    linear-gradient(135deg, #fff, #fcfcff);
}

.fiche-champ--kpi > strong {
  font-size: 1.02rem;
  margin-bottom: .55rem;
}

/* Permet de griser les références (*), (**), (***) ajoutées par champ.php */
.fiche-kpi-note-ref {
  color: rgba(37, 42, 127, .50);
  font-size: .86em;
  font-weight: 700;
}

.fiche-champ--kpi .fiche-valeur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .72rem;
}

.fiche-kpi-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.fiche-kpi-valeur {
  display: inline-flex;
  align-items: baseline;
  color: var(--dampierre-bleu, #2d318f);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: .95;
}

.fiche-kpi-valeur small {
  position: relative;
  top: -0.08em;
  margin-left: .24rem;
  font-size: .66em;
  font-weight: 900;
  letter-spacing: -.02em;
}

.fiche-kpi-jauge {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  overflow: hidden;
  background: #eef2ff;
  border: 1px solid rgba(45, 49, 143, .10);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(37, 42, 127, .12);
}

.fiche-kpi-jauge span {
  display: block;
  width: var(--jauge, 0%);
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--dampierre-bleu, #2d318f) 0%,
    #7b2cbf 45%,
    var(--dampierre-fuchsia, #e5007d) 100%
  );
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(229, 0, 125, .24);
  transform-origin: left center;
  animation: ficheKpiFill .9s ease both;
}

/* Icônes KPI */
.fiche-champ-taux-de-satisfaction::before { content: "\f118"; }
.fiche-champ-taux-de-reussite::before { content: "\f091"; }
.fiche-champ-taux-dinsertion::before { content: "\f0b1"; }
.fiche-champ-taux-de-poursuite-detudes::before { content: "\f19d"; }
.fiche-champ-taux-dinterruption::before { content: "\f071"; }

.fiche-champ--kpi::before {
  color: var(--dampierre-bleu, #2d318f);
  background: #eef2ff;
}

/* Sources : carte longue normale */
.fiche-champ-sources {
  grid-column: 1 / -1;
  align-items: start;
  background: #fff;
}

.fiche-champ-sources::before {
  content: "\f15c";
}


/* Plaquette commerciale en champ URL */
.fiche-champ-plaquette-commerciale::before,
.fiche-champ-plaquette::before,
.fiche-champ-plaquette-pdf::before {
  content: "\f1c1";
}

.fiche-champ-plaquette-commerciale .fiche-bouton::before,
.fiche-champ-plaquette .fiche-bouton::before,
.fiche-champ-plaquette-pdf .fiche-bouton::before {
  content: "\f1c1";
}

/* =========================================================
   08 - BOUTONS / URL
   ========================================================= */

.fiche-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: fit-content;
  padding: .7rem 1rem;
  color: #fff !important;
  background: var(--dampierre-bleu, #2d318f);
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(37, 42, 127, .18);
  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.fiche-bouton::before {
  content: "\f35d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.fiche-bouton:hover,
.fiche-bouton:focus {
  color: #fff !important;
  background: var(--dampierre-fuchsia, #e5007d);
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(229, 0, 125, .28);
}

/* =========================================================
   09 - MÉDIAS / IMAGES / LOGOS
   ========================================================= */

.fiche-champ--media img,
.fiche-champ-photo-formation img,
.fiche-champ-logo-formation img,
.fiche-champ-logo-financeur-01 img,
.fiche-champ-logo-financeur-02 img,
.fiche-champ-logo-financeur-03 img,
.fiche-champ-logo-financeur-04 img,
.fiche-champ-logo-financeur-05 img {
  display: block;
  max-width: 220px;
  height: auto;
  border-radius: 12px;
}

.fiche-champ--media {
  align-items: start;
}

/* =========================================================
   10 - CONTENU RICHE
   ========================================================= */

.fiche-valeur strong {
  display: inline;
  margin-bottom: 0;
  color: inherit;
  font-weight: 700;
}

.fiche-valeur p {
  margin-top: 0;
  margin-bottom: .75rem;
}

.fiche-valeur p:last-child {
  margin-bottom: 0;
}

.fiche-valeur ul {
  margin-top: .5rem;
  margin-bottom: .9rem;
  padding-left: 1.4rem;
}

.fiche-valeur li {
  margin-bottom: .35rem;
}

/* =========================================================
   11 - RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  .fiche-centre {
    padding: 1.5rem .9rem;
  }

  .fiche-centre > h1 {
    margin-bottom: 1.5rem;
  }

  .fiche-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: center;
  }

  .fiche-hero__image img {
    margin: 0 auto;
    max-width: 260px;
  }

  .fiche-hero__content {
    justify-content: center;
  }

  .fiche-hero__badges--vertical {
    align-items: center;
  }

  .fiche-groupe {
    padding: 1.2rem;
  }

  .fiche-champs {
    grid-template-columns: 1fr;
  }

  .fiche-kpi-valeur {
    font-size: 2.35rem;
  }
}

@media (max-width: 480px) {
  .fiche-champ {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: .8rem;
    padding: .9rem;
  }

  .fiche-champ::before {
    width: 38px;
    height: 38px;
    font-size: .95rem;
  }

  .fiche-hero__badges span,
  .fiche-bouton {
    width: 100%;
    justify-content: center;
  }

  .fiche-kpi-ligne {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
}


/* Hero Centre V2 responsive */
@media (max-width: 768px) {
  .fiche-hero--centre.fiche-hero--auto {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .fiche-hero--centre .fiche-hero__image,
  .fiche-hero--centre .fiche-hero__content {
    width: 100%;
  }

  .fiche-hero--centre .fiche-hero__content {
    justify-content: center;
  }

  .fiche-hero--centre .fiche-hero__badges--vertical {
    align-items: center;
    width: 100%;
  }

  .fiche-hero--centre .fiche-hero__badge {
    justify-content: center;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .fiche-hero--centre .fiche-hero__badge {
    width: 100%;
  }
}

/* =========================================================
   12 - ACCESSIBILITÉ / ANIMATIONS
   ========================================================= */

@keyframes ficheKpiFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiche-champ,
  .fiche-bouton,
  .fiche-kpi-jauge span,
  .fiche-hero--centre .fiche-hero__badge {
    transition: none;
    animation: none;
  }

  .fiche-champ:hover,
  .fiche-bouton:hover,
  .fiche-bouton:focus {
    transform: none;
  }
}