/* `.header` → `div.header` (25/10/2026, audit D05) : la règle nue atteignait aussi
   le <header class="header"> du site, passé en colonne à 768 px et moins — le
   bouton du menu tombait sous le logo, sur la carte de l'offre. */
/* Correction de collision (aplatissement CSS Modules) : dans l'original, cette
   classe était hachée par CSS Modules et ne pouvait atteindre que le <div> du
   composant. Aplatie en `.header`, elle frappait aussi le <header class="header">
   du site, qu'elle mettait en display:flex — l'en-tête disparaissait visuellement.
   Le sélecteur est qualifié `div.header` : même portée qu'à l'origine. */

/* Aplati depuis NEXJTS/styles/annonce-emploi-details.module.css. */

/* etablissement_bis.module.css */
.container {
  min-height: 100vh;
  background-color: #fafafa;
  color: #333;
}

/* Cible le bouton spécifique */
.sidebar button {
background: linear-gradient(135deg, var(--gold), var(--gold-light));  color: white; /* Police blanche */
  text-align: center; /* Centre le texte */
  border: none; /* Supprime la bordure */
  padding: 1rem 2rem; /* Ajuste le padding */
  border-radius: 0.5rem; /* Ajoute un radius pour arrondir les coins */
  cursor: pointer; /* Change le curseur en main pour indiquer qu'il s'agit d'un bouton */
}
.apply-button {
  background-color: #ffd700; /* Couleur or */
  color: white; /* Police blanche */
  text-align: center; /* Centre le texte */
  border: none; /* Supprime la bordure */
  padding: 1rem 2rem; /* Ajuste le padding */
  border-radius: 0.5rem; /* Ajoute un radius pour arrondir les coins */
  cursor: pointer; /* Change le curseur en main pour indiquer qu'il s'agit d'un bouton */
}
  

.apply-button {
  /*... autres styles... */
  margin-left: auto; /* Pour pousser le bouton vers la droite */
  margin-right: auto; /* Pour centrer le bouton horizontalement */
}
.sidebar {
  /*... autres styles... */
  display: flex; /* Pour activer Flexbox */
  flex-direction: column; /* Pour empiler les éléments verticalement */
  align-items: center; /* Pour centrer les éléments horizontalement */
}

.apply-button {
  /*... autres styles... */
  max-width: 100%; /* Pour que le bouton prenne la largeur maximale disponible */
  margin: 0 auto; /* Pour centrer le bouton horizontalement */
}


  

.apply-button:hover {
  background-color: #ffc400; /* Couleur or plus foncée pour le survol */
}

/* Pour le survol (hover) */
.sidebar button:hover {
  background-color: #ffc400; /* Couleur or plus foncée pour le survol */
}

.see-establishment {
  font-size: 0.5rem; /* Ajustez la valeur selon vos besoins */
}

.heroBanner {
  height: 75vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

.heroBanner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.5));
}

.heroContent {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  position: relative;
}


.heroContent a {
  color: white;
  text-decoration: none;
}


div.header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.logoContainer {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid #B8860B;
  overflow: hidden;
  flex-shrink: 0;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: white;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.slogan {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .slogan {
    text-align: center;
    font-size: 1rem;
    margin: 1rem auto 1.5rem;
    max-width: 90%;
  }
}

.metaInfo {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
}

.metaInfo span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #e1e1e1;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 300;
}

/* Main Content */
.mainContent {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.gridLayout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

/* Stats Section */
.statsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .statsGrid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.statCard {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.statCard:hover {
  transform: translateY(-2px);
}

.statNumber {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem;
  color: #B8860B;
  font-weight: 300;
  margin: 0.5rem 0;
}

.statLabel {
  font-family: 'Montserrat', sans-serif;
  color: #666;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sectionTitle {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #333;
  margin: 2rem 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #B8860B;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.descriptionCard {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  line-height: 1.6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

.jobsList {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.jobCard {
  background: #fff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.jobCard:hover {
  transform: translateY(-2px);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 32px;
  border-color: #e0e0e0;
}

.jobType {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #f8f4ff;
  color: #6c3cb0;
  margin-bottom: 1rem;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.05em;
}

.jobTitle {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.jobSubtitle {
  font-family: 'Montserrat', sans-serif;
  color: #666;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 300;
}

.jobMeta {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
  color: #4a4a4a;
  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.05em;
}

.jobMetaItem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gallerySection {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.galleryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.noContent {
  text-align: center;
  padding: 3rem;
  color: #666;
  background: #f9f9f9;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.galleryItem {
  aspect-ratio: 4/3;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.galleryImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.galleryItem:hover .galleryImage {
  transform: scale(1.05);
}

.sidebar {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: rgba(17, 17, 26, 0.08) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  height: fit-content;
  position: sticky;
  top: 2rem;
  border: 1px solid #f0f0f0;
}

.map {
  width: 100%;
  height: 300px;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2rem;
  border: none;
  box-shadow: rgba(17, 17, 26, 0.08) 0px 4px 16px;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.contactInfo {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contactRow {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 0.75rem;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
}

.contactRow:hover {
  background: #fafafa;
}

.iconWrapper {
  width: 20px;
  height: 20px;
  color: #9c6b20;
  margin-top: 0.25rem;
}

.contactRow h3 {
  font-family: 'Playfair Display', serif;
  color: #1c1c1c;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.contactRow p, .contactRow a {
  font-family: 'Montserrat', sans-serif;
  color: #4a4a4a;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 300;
}

.no-underline {
  text-decoration: none;
}

@media (max-width: 1024px) {
  .gridLayout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    position: static;
    margin-top: 2rem;
  }
}

.sidebar a {
  color: #4a4a4a;
  text-decoration: none;
}
@media (max-width: 768px) {
  .statsGrid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .statCard {
    width: 100%;
  }
  
  div.header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .title {
    font-size: 2rem;
    text-align: center;
  }
  
  .metaInfo {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .slogan {
    text-align: center;
    font-size: 1rem;
    margin: 1rem auto 1.5rem;
    max-width: 90%;
  }
  
  .mainContent {
    padding: 1rem;
  }

  .sectionTitle {
    text-align: center;
  }

  .jobCard {
    text-align: center;
  }

  .jobMeta {
    justify-content: center;
  }

  .jobType {
    display: block;
    width: fit-content;
    margin: 0 auto 1rem auto;
  }
}

@media (max-width: 480px) {
  .statsGrid {
    grid-template-columns: 1fr;
  }
  
  .jobMeta {
    flex-direction: column;
    gap: 1rem;
  }
}


.companyLink {
  text-decoration: none;
}

.companyLink:hover {
  text-decoration: none;
}

.establishmentLink {
  text-decoration: none;
}

.establishmentLink:hover {
  text-decoration: none;
}
  
  
/* annonce-emploi-details.module.css - Ajouts pour les soft skills */

/* Styles existants à conserver */

/* Nouvelle section des soft skills de luxe */
.softSkillsContainer {
  background-color: #fdfdfd;
  border-radius: 0.8rem;
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-bottom: 2rem;
  overflow: hidden;
}

.softSkillsContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #B8860B, #DAA520);
  border-radius: 2px;
}

.softSkillsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.softSkillItem {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  border: 1px solid rgba(184, 134, 11, 0.07);
}

.softSkillItem:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.1);
  border-color: rgba(184, 134, 11, 0.2);
}

.softSkillIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.05), rgba(218, 165, 32, 0.1));
  color: #B8860B;
  border-radius: 50%;
  font-size: 1.2rem;
}

.softSkillText {
  font-family: 'Cormorant Garamond', 'Antic Didone', serif;
  font-size: 1.1rem;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.skillLevelIndicator {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
}

.skillLevelDot {
  width: 5px;
  height: 5px;
  margin: 0 2px;
  border-radius: 50%;
  background-color: rgba(184, 134, 11, 0.2);
}

.skillLevelDot.active {
  background-color: #B8860B;
}

/* Style pour l'affichage vertical des soft skills */
.softSkillsVertical {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.softSkillVerticalItem {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 0.5rem;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-left: 3px solid rgba(184, 134, 11, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.softSkillVerticalItem:hover {
  background-color: rgba(184, 134, 11, 0.02);
  border-left-color: rgba(184, 134, 11, 0.7);
  transform: translateX(5px);
}

.softSkillIconVertical {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.1), rgba(218, 165, 32, 0.2));
  color: #B8860B;
  border-radius: 50%;
  font-size: 1.3rem;
}

.softSkillContent {
  flex: 1;
}

.softSkillTextVertical {
  font-family: 'Cormorant Garamond', 'Antic Didone', serif;
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 0.3rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.softSkillDescription {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

/* Animation pour les éléments de la grille */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.softSkillItem, .softSkillVerticalItem {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

/* Délai d'animation pour chaque élément */
.softSkillItem:nth-child(1), .softSkillVerticalItem:nth-child(1) { animation-delay: 0.1s; }
.softSkillItem:nth-child(2), .softSkillVerticalItem:nth-child(2) { animation-delay: 0.2s; }
.softSkillItem:nth-child(3), .softSkillVerticalItem:nth-child(3) { animation-delay: 0.3s; }
.softSkillItem:nth-child(4), .softSkillVerticalItem:nth-child(4) { animation-delay: 0.4s; }
.softSkillItem:nth-child(5), .softSkillVerticalItem:nth-child(5) { animation-delay: 0.5s; }
.softSkillItem:nth-child(6), .softSkillVerticalItem:nth-child(6) { animation-delay: 0.6s; }
.softSkillItem:nth-child(7), .softSkillVerticalItem:nth-child(7) { animation-delay: 0.7s; }
.softSkillItem:nth-child(8), .softSkillVerticalItem:nth-child(8) { animation-delay: 0.8s; }

/* Style pour la version mobile */
@media (max-width: 768px) {
  .softSkillsGrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .softSkillsVertical {
    gap: 1rem;
  }
  
  .softSkillVerticalItem {
    padding: 1rem;
  }
  
  .softSkillIconVertical {
    min-width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  
  .softSkillTextVertical {
    font-size: 1.1rem;
  }
} 
  
  
  /* Suite du fichier annonce-emploi-details.module.css */

/* Animation des éléments soft skills */
.softSkillItem, .softSkillVerticalItem {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

/* Délai d'animation pour chaque élément */
.softSkillItem:nth-child(1), .softSkillVerticalItem:nth-child(1) { animation-delay: 0.1s; }
.softSkillItem:nth-child(2), .softSkillVerticalItem:nth-child(2) { animation-delay: 0.2s; }
.softSkillItem:nth-child(3), .softSkillVerticalItem:nth-child(3) { animation-delay: 0.3s; }
.softSkillItem:nth-child(4), .softSkillVerticalItem:nth-child(4) { animation-delay: 0.4s; }
.softSkillItem:nth-child(5), .softSkillVerticalItem:nth-child(5) { animation-delay: 0.5s; }
.softSkillItem:nth-child(6), .softSkillVerticalItem:nth-child(6) { animation-delay: 0.6s; }
.softSkillItem:nth-child(7), .softSkillVerticalItem:nth-child(7) { animation-delay: 0.7s; }
.softSkillItem:nth-child(8), .softSkillVerticalItem:nth-child(8) { animation-delay: 0.8s; }

/* Style pour la version mobile */
@media (max-width: 768px) {
  .softSkillsGrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .softSkillsVertical {
    gap: 1rem;
  }
  
  .softSkillVerticalItem {
    padding: 1rem;
  }
  
  .softSkillIconVertical {
    min-width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  
  .softSkillTextVertical {
    font-size: 1.1rem;
  }
}

/* Sidebar */
.sidebar {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: rgba(17, 17, 26, 0.08) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  height: fit-content;
  position: sticky;
  top: 2rem;
  border: 1px solid #f0f0f0;
}

/* Map dans la sidebar */
.map {
  width: 100%;
  height: 300px;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2rem;
  border: none;
  box-shadow: rgba(17, 17, 26, 0.08) 0px 4px 16px;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.contactInfo {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contactRow {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 0.75rem;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
}

.contactRow:hover {
  background: #fafafa;
}

.iconWrapper {
  width: 20px;
  height: 20px;
  color: #9c6b20;
  margin-top: 0.25rem;
}

.contactRow h3 {
  font-family: 'Playfair Display', serif;
  color: #1c1c1c;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.contactRow p, .contactRow a {
  font-family: 'Montserrat', sans-serif;
  color: #4a4a4a;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 300;
}

.no-underline {
  text-decoration: none;
}

/* Style pour le bouton spécifique */
.sidebar button {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: white; /* Police blanche */
  text-align: center; /* Centre le texte */
  border: none; /* Supprime la bordure */
  padding: 1rem 2rem; /* Ajuste le padding */
  border-radius: 0.5rem; /* Ajoute un radius pour arrondir les coins */
  cursor: pointer; /* Change le curseur en main pour indiquer qu'il s'agit d'un bouton */
}

/* Pour le survol (hover) */
.sidebar button:hover {
  background-color: #ffc400; /* Couleur or plus foncée pour le survol */
}

.see-establishment {
  font-size: 0.5rem; /* Ajustez la valeur selon vos besoins */
}

@media (max-width: 1024px) {
  .gridLayout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    position: static;
    margin-top: 2rem;
  }
}

.sidebar a {
  color: #4a4a4a;
  text-decoration: none;
}

@media (max-width: 768px) {
  .statsGrid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .statCard {
    width: 100%;
  }
  
  div.header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .title {
    font-size: 2rem;
    text-align: center;
  }
  
  .metaInfo {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .slogan {
    text-align: center;
    font-size: 1rem;
    margin: 1rem auto 1.5rem;
    max-width: 90%;
  }
  
  .mainContent {
    padding: 1rem;
  }

  .sectionTitle {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .statsGrid {
    grid-template-columns: 1fr;
  }
}

/* Apply Button styles */
.apply-button {
  background-color: #ffd700; /* Couleur or */
  color: white; /* Police blanche */
  text-align: center; /* Centre le texte */
  border: none; /* Supprime la bordure */
  padding: 1rem 2rem; /* Ajuste le padding */
  border-radius: 0.5rem; /* Ajoute un radius pour arrondir les coins */
  cursor: pointer; /* Change le curseur en main pour indiquer qu'il s'agit d'un bouton */
  max-width: 100%; /* Pour que le bouton prenne la largeur maximale disponible */
  margin: 0 auto; /* Pour centrer le bouton horizontalement */
}

.apply-button:hover {
  background-color: #ffc400; /* Couleur or plus foncée pour le survol */
}

.companyLink {
  text-decoration: none;
}

.companyLink:hover {
  text-decoration: none;
}

.establishmentLink {
  text-decoration: none;
}

.establishmentLink:hover {
  text-decoration: none;
}
    
    /* annonce-emploi-details.module.css */
/* Refined luxury hotel job listing styles */

/* Container with elegant background */
.container {
  background-color: #FAFAFA;
  min-height: 100vh;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hero Banner - Elegant with subtle texture and gradient overlay */
.heroBanner {
  position: relative;
  height: 65vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  color: white;
  overflow: hidden;
}

.heroBanner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.75));
  z-index: 1;
}

.heroBanner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96.242 8.2 0H5.374zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM2.828 0l28 28-1.414 1.414L0 2.544V0h2.828z' fill='%23FFFFFF' fill-opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.3;
  z-index: 1;
}

.heroContent {
  position: relative;
  z-index: 2;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.logoContainer {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid #B8860B;
  overflow: hidden;
  padding: 0.5rem;
}

.logo {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

.title {
  font-size: 2.75rem;
  font-weight: 300;
  margin: 0 0 0.5rem;
  line-height: 1.2;
  font-family: 'Playfair Display', serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.jobCompany {
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0.9;
  margin: 0 0 1rem;
}

.slogan {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 2rem;
  max-width: 700px;
  line-height: 1.6;
  opacity: 0.9;
}

.metaInfo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.metaInfo span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.6rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Main Content Area */
.mainContent {
  max-width: 1200px;
  margin: -3rem auto 4rem;
  position: relative;
  z-index: 3;
  padding: 0 2rem;
}

.gridLayout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

/* Stats Section - Elegant cards with subtle transitions */
.statsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.statCard {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.statCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: rgba(184, 134, 11, 0.3);
}

.statNumber {
  font-size: 1.8rem;
  font-weight: 300;
  color: #1a2a36;
  margin-bottom: 0.5rem;
  font-family: 'Playfair Display', serif;
}

.statLabel {
  font-size: 0.85rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Section Titles - Elegant with decorative elements */
.sectionTitle {
  font-size: 1.7rem;
  color: #1a2a36;
  margin: 2.5rem 0 1rem;
  font-weight: 300;
  font-family: 'Playfair Display', serif;
  position: relative;
  padding-bottom: 0.5rem;
}

.sectionTitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #B8860B, rgba(184, 134, 11, 0.3));
}

/* Content Cards - Clean with subtle hover effects */
.descriptionCard {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.descriptionCard:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(184, 134, 11, 0.2);
}

.descriptionCard p {
  margin: 0;
  line-height: 1.7;
  color: #666;
}

/* Soft Skills Styling - Elegant grid with icons */
.softSkillsContainer {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  border: 1px solid #f0f0f0;
}

.softSkillsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}

.softSkillItem {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.3s ease;
  padding: 0.8rem;
  border-radius: 0.5rem;
}

.softSkillItem:hover {
  background-color: rgba(184, 134, 11, 0.05);
  transform: translateY(-3px);
}

.softSkillIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #f9f9f9;
  border-radius: 50%;
  color: #B8860B;
  transition: all 0.3s ease;
}

.softSkillItem:hover .softSkillIcon {
  background: rgba(184, 134, 11, 0.1);
  color: #8B6914;
}

.softSkillText {
  font-size: 0.95rem;
  color: #555;
}

/* Sidebar Styling */
.sidebar {
  position: relative;
}

.map {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.contactInfo {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-top: 1.5rem;
  border: 1px solid #f0f0f0;
}

.contactRow {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.contactRow:last-child {
  border-bottom: none;
}

.iconWrapper {
  color: #B8860B;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.contactRow h3 {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.contactRow p {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .gridLayout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: -1;
    margin-bottom: 2rem;
  }
  
  .statsGrid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .mainContent {
    margin-top: -5rem;
  }
}

@media (max-width: 768px) {
  .heroContent {
    padding: 3rem 1.5rem;
  }
  
  div.header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .metaInfo {
    justify-content: center;
  }
  
  .statsGrid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .title {
    font-size: 2.2rem;
  }
  
  .softSkillsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .statsGrid {
    grid-template-columns: 1fr;
  }
  
  .metaInfo {
    flex-direction: column;
    align-items: center;
  }
  
  .metaInfo span {
    width: 100%;
    justify-content: center;
  }
  
  .title {
    font-size: 1.8rem;
  }
  
  .mainContent {
    padding: 0 1rem;
  }
}

/* Animations and Transitions */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.container > * {
  animation: fadeIn 0.6s ease-out forwards;
}

.statCard:nth-child(1) { animation-delay: 0.1s; }
.statCard:nth-child(2) { animation-delay: 0.2s; }
.statCard:nth-child(3) { animation-delay: 0.3s; }

/* Elegant hover transitions for links */
.sidebar a, .heroContent a {
  transition: all 0.3s ease;
}

.sidebar a:hover, .heroContent a:hover {
  transform: translateY(-2px);
}
    
    
    /* Corrections responsive à ajouter à la fin du fichier CSS */

/* Fix pour les tablettes et mobiles */
@media (max-width: 1024px) {
  .heroBanner {
    height: auto;
    min-height: 600px;
    padding: 2rem 0;
  }
  
  .heroContent {
    min-height: 500px;
    justify-content: flex-start;
    padding: 3rem 2rem;
  }
  
  div.header {
    margin-bottom: 2rem;
    min-height: 120px;
  }
  
  .logoContainer {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    min-width: 120px;
    min-height: 120px;
  }
  
  .title {
    font-size: 2.2rem;
    line-height: 1.3;
  }
  
  .slogan {
    margin-bottom: 2.5rem;
  }
  
  .metaInfo {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  .heroBanner {
    min-height: 700px;
    padding: 1.5rem 0;
  }
  
  .heroContent {
    padding: 2rem 1.5rem;
    min-height: 600px;
    justify-content: center;
  }
  
  div.header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    min-height: auto;
  }
  
  .logoContainer {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
    flex-shrink: 0;
    min-width: 100px;
    min-height: 100px;
  }
  
  .title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  .jobCompany {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
  .slogan {
    text-align: center;
    font-size: 1rem;
    margin: 1rem auto 2rem;
    max-width: 90%;
    line-height: 1.5;
  }
  
  .metaInfo {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
  }
  
  .metaInfo span {
    width: auto;
    min-width: 200px;
    justify-content: center;
  }
  
  .mainContent {
    margin-top: -2rem;
    padding: 0 1rem;
  }
  
  .gridLayout {
    gap: 2rem;
  }
  
  .statsGrid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .statCard {
    padding: 1.5rem;
    text-align: center;
  }
  
  .sectionTitle {
    text-align: left;
    font-size: 1.5rem;
    margin: 2rem 0 1.5rem;
  }
  
  .descriptionCard {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .softSkillsContainer {
    padding: 1.5rem;
  }
  
  .sidebar {
    order: 1;
    margin-top: 1rem;
    position: static;
  }
  
  .contactInfo {
    padding: 1.5rem;
    margin-top: 1rem;
  }
  
  .contactRow {
    padding: 0.75rem 0;
    flex-wrap: wrap;
  }
  
  .contactRow > div {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .heroBanner {
    min-height: 650px;
    padding: 1rem 0;
  }
  
  .heroContent {
    padding: 1.5rem 1rem;
    min-height: 550px;
  }
  
  div.header {
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .logoContainer {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    min-width: 80px;
    min-height: 80px;
  }
  
  .title {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  
  .jobCompany {
    font-size: 1.1rem;
  }
  
  .slogan {
    font-size: 0.9rem;
    margin: 1rem auto 1.5rem;
  }
  
  .metaInfo span {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
    min-width: 180px;
  }
  
  .mainContent {
    margin-top: -1rem;
    padding: 0 0.5rem;
  }
  
  .statsGrid {
    gap: 0.8rem;
  }
  
  .statCard {
    padding: 1.2rem;
  }
  
  .statNumber {
    font-size: 1.5rem;
  }
  
  .statLabel {
    font-size: 0.8rem;
  }
  
  .sectionTitle {
    font-size: 1.4rem;
    margin: 1.5rem 0 1rem;
  }
  
  .descriptionCard {
    padding: 1.2rem;
  }
  
  .softSkillsContainer {
    padding: 1.2rem;
  }
  
  .softSkillsGrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .contactInfo {
    padding: 1.2rem;
  }
  
  .contactRow {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: left;
  }
  
  .contactRow h3 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }
  
  .contactRow p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}

/* Fix pour éviter le débordement horizontal */
@media (max-width: 768px) {
  .container {
    overflow-x: hidden;
  }
  
  .heroBanner {
    overflow: hidden;
  }
  
  .heroContent {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .mainContent {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Correction pour les boutons dans la sidebar en mobile */
@media (max-width: 768px) {
  .sidebar button {
    width: 100%;
    padding: 1rem;
    font-size: 0.9rem;
    margin-top: 1rem;
  }
  
  .see-establishment {
    font-size: 0.8rem;
    padding: 0.8rem 1.5rem;
    display: inline-block;
    margin-top: 1rem;
  }
}

/* Protection renforcée du logo */
.logoContainer {
  flex: none !important;
  overflow: hidden;
  position: relative;
}

.logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Assure que le header ne compresse pas le logo */
div.header {
  align-items: flex-start;
}

@media (max-width: 768px) {
  div.header {
    align-items: center;
  }
}
    
    
    /* ===== MODIFICATIONS POUR LE SLOGAN - TAILLE RÉDUITE ===== */

.slogan {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem; /* Réduit de 1.2rem à 1rem */
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .slogan {
    text-align: center;
    font-size: 0.85rem; /* Réduit de 1rem à 0.85rem */
    margin: 1rem auto 1.5rem;
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .slogan {
    font-size: 0.8rem; /* Encore plus petit sur mobile */
    margin: 1rem auto 1.5rem;
  }
}

/* ===== MODIFICATIONS POUR LE BOUTON DANS LE HERO UNIQUEMENT ===== */

.heroContent button {
  background: transparent !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.heroContent button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}
/* ===== VISIBILITÉ D'UNE OFFRE — règle du 09/10/2026 =====================
   Deux blocs posés par EmploiDetail.php :
     .offreFermee  la mention d'une offre expirée ou suspendue
     .offreApercu  l'aperçu servi au visiteur anonyme quand l'employeur est
                   en « authentifie »
   Les couleurs sont celles de la page : le doré #B8860B et les gris du
   fichier, pour que ces blocs ne paraissent pas venir d'ailleurs. */

.offreFermee {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid #e3d5a8;
  border-left: 4px solid #B8860B;
  border-radius: 0.5rem;
  background: #fdf9ed;
}

.offreFermeeTitre {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  color: #7a5a07;
}

.offreFermeeTexte {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #4a4a4a;
}

.offreFermeeLien {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #B8860B;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offreFermeeLien:hover {
  color: #8a6508;
}

.offreApercu {
  max-width: 680px;
  margin: 2rem auto 3rem;
  padding: 2rem 1.75rem;
  text-align: center;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
  background: #fafafa;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

.offreApercuTitre {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.offreApercuTexte {
  margin: 0.6rem auto 0;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #666;
}

.offreApercuBoutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.offreApercuPrincipal,
.offreApercuSecondaire {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.offreApercuPrincipal {
  background: #B8860B;
  color: #ffffff;
}

.offreApercuPrincipal:hover {
  background: #8a6508;
}

.offreApercuSecondaire {
  border: 1px solid #B8860B;
  color: #B8860B;
  background: transparent;
}

.offreApercuSecondaire:hover {
  background: rgba(184, 134, 11, 0.08);
}

@media (max-width: 640px) {
  .offreApercu {
    margin: 1.5rem 1rem 2rem;
    padding: 1.5rem 1.25rem;
  }

  .offreFermee {
    margin: 1rem 1rem 0;
  }

  .offreApercuBoutons {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   LA FICHE DENSE — ajoutée le 18/10/2026.

   Les trois `.statCard` sont faites pour trois valeurs courtes : `.statNumber`
   est en 1,8 rem, et la grille a trois colonnes fixes. Tout ce qui ne tient
   pas là-dedans descend ici — deux colonnes, texte de taille normale, cinq
   lignes compactes au lieu de six cartes géantes.
   --------------------------------------------------------------------------- */
.annonceFiche {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1.6rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.annonceFiche dt {
  color: #777;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.annonceFiche dd { margin: 0; color: #333; }

.annonceIntertitre {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 1.4rem 0 0.5rem;
}

.annonceListe { margin: 0.4rem 0 1.2rem; padding-left: 1.2rem; }
.annonceListe li { margin: 0.25rem 0; }

/* Sur téléphone, le libellé passe AU-DESSUS de sa valeur : une colonne de
   libellés à côté d'une colonne de valeurs ne tient pas en 390 pixels. */
@media (max-width: 700px) {
  .annonceFiche { grid-template-columns: 1fr; gap: 0.15rem 0.5rem; }
  .annonceFiche dd { margin-bottom: 0.7rem; }
}

/* ---------------------------------------------------------------------------
   ÉTIQUETTES ET CARTE — rétablies le 18/10/2026.

   La grille Soft Skills (`.softSkillsGrid`, `.softSkillItem`, `.softSkillIcon`)
   n'est PAS ici : ses règles sont restées plus haut dans ce fichier depuis la
   version d'octobre 2025, animations comprises. Seul le balisage qui s'en
   servait avait disparu ; il est revenu.

   Les étiquettes `.skillTag` et la carte `.job-map`, elles, n'ont laissé
   aucune trace : elles sont recréées dans le même langage — carte blanche,
   or #B8860B, coins arrondis.
   --------------------------------------------------------------------------- */
.skillTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2rem;
}

.skillTag {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.25);
  color: #8B6914;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Les langues se distinguent des compétences : fond plein, pas de contour. */
.skillTag.language {
  background: #B8860B;
  border-color: #B8860B;
  color: white;
}

.jobMapCarte {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: 0 0 2rem;
}

.job-map {
  height: 340px;
  width: 100%;
  background: #eee;   /* le temps que les tuiles arrivent */
}

@media (max-width: 700px) {
  .job-map { height: 260px; }
}

/* ---------------------------------------------------------------------------
   AJUSTEMENTS D'APERÇU — 18/10/2026.
   --------------------------------------------------------------------------- */

/* Les cartes étaient hautes de 170 px pour un mot de six lettres. */
.statsGrid .statCard { padding: 1.1rem 1rem; }

/* La coche des savoir-être : le rond existait, l'icône y flottait sans
   couleur propre. */
.softSkillIcon svg { stroke: #B8860B; }

/* Le nom de l'employeur sous le titre : plus de capitales forcées. */
.annonceEmployeur { text-transform: none; }

/* La grille d'octobre 2025 était faite pour des libellés seuls. France
   Travail joint à chacun une explication de deux lignes : il faut des
   colonnes plus larges, un titre détaché de son explication, et une coche
   qui reste en haut au lieu de flotter au milieu d'un pavé. */
.softSkillsGrid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.softSkillItem { align-items: flex-start; }
.softSkillIcon { margin-top: 0.15rem; }
.softSkillText { margin-bottom: 0.35rem; line-height: 1.3; }
.softSkillDescription { font-size: 0.86rem; }

/* ---------------------------------------------------------------------------
   !! LE CONTENU NE DOIT PAS DÉPENDRE D'UNE ANIMATION POUR ÊTRE VISIBLE.

   `.softSkillItem` d'octobre 2025 part de `opacity: 0` et compte sur
   `fadeInUp` pour remonter à 1. Mesuré dans Chrome : l'élément reste à
   **0,31** — la coche, le titre et l'explication sont tous là, corrects,
   mais à un tiers d'encre. D'où les « ronds vides ».

   Si l'animation ne part pas — mouvement réduit, impression, onglet en
   arrière-plan au chargement — le bloc reste **invisible**. Une mise en
   forme peut échouer ; un contenu, non.

   L'état par défaut devient donc « visible ». L'animation ne subsiste que
   pour qui ne demande pas de mouvement réduit, et en `both` pour qu'elle
   ne puisse jamais rendre la main sur un état transparent.
   --------------------------------------------------------------------------- */
.softSkillItem {
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .softSkillItem {
    animation: fadeInUp 0.5s ease-out both;
  }
}

/* Une valeur de carte doit tenir en deux lignes au plus. `.statNumber` est en
   1,8 rem : « Apprenticeship wage · Bonuses » y prenait quatre lignes. */
.statsGrid .statNumber { font-size: 1.35rem; line-height: 1.3; }

/* ---------------------------------------------------------------------------
   IMPRESSION — l'en-tête fixe mangeait les cartes et poussait une page blanche
   derrière le bandeau.
   --------------------------------------------------------------------------- */
@media print {
  header, .header, .site-header, nav { position: static !important; }

  /* Aucun saut forcé entre le bandeau et les cartes. */
  .statsGrid, .annonceFiche, .descriptionCard, .softSkillsContainer {
    break-before: auto;
    page-break-before: auto;
    break-inside: avoid;
  }

  /* Une bannière en image de fond s'imprime en page pleine chez certains
     navigateurs : on la retire et on garde le texte. */
  [style*="background-image"] { background-image: none !important; min-height: 0 !important; }

  .job-map, .jobMapCarte { display: none; }
  .softSkillItem { animation: none; opacity: 1; }
}

/* **LA MENTION DE LA SOURCE, QUAND LE TEXTE EST TRONQUÉ.**
   Posée le 25/10/2026. Elle suit la description, discrète mais lisible : ce
   n'est pas un bouton d'action, c'est une honnêteté. Or foncé sur crème,
   4,97:1 — au-dessus du seuil. */
.offreTronquee {
  margin: .9rem 0 0;
  padding: .8rem 1rem;
  font-size: .92rem;
  background: #F9F5F0;
  border: 1px solid #E3DACB;
  border-left: 3px solid #996515;
  border-radius: 8px;
}

.offreTronquee a { color: #996515; font-weight: 600; text-decoration: underline; }
.offreTronquee a:hover { color: #7A5011; }

/* La même mention, sur la page d'une offre. Voir emplois.css pour la règle
   et la clause qui l'impose. */
.mentionSource {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 23px;
  padding: 0 .5rem;
  margin-left: .6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #5C6672;
  background: #FFFFFF;
  border: 1px solid #E3DACB;
  border-radius: 6px;
  text-decoration: none;
}

.mentionSource:hover { border-color: #996515; color: #996515; }
.mentionSource:focus-visible { outline: 3px solid #B8860B; outline-offset: 2px; }

/* **LA MENTION DES AUTRES SOURCES.** Posée le 25/10/2026. La Licence Ouverte
   2.0, sous laquelle France Travail publie, impose de nommer le concédant ;
   les autres sources l'encouragent. Un lien discret, sans la taille imposée
   qui n'appartient qu'à Adzuna. */
.mentionSourceNom {
  display: inline-block;
  font-size: .8rem;
  color: #5C6672;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mentionSourceNom::before { content: 'Source : '; color: #8A919B; }
.mentionSourceNom:hover { color: #996515; }
.mentionSourceNom:focus-visible { outline: 3px solid #B8860B; outline-offset: 2px; }

/* La date de dernière mise à jour, exigée par la Licence Ouverte au même
   titre que le nom du concédant. Discrète : elle informe, elle n'orne pas. */
.mentionSourceDate { font-size: .78rem; color: #8A919B; }