/* ============================================
   Styles specifiques de l'application enqmed
   - Palette : voir atih-tokens.css (charges en premier)
   - Couleurs Bootstrap : var(--bs-primary), var(--bs-info), etc.
   - Couleurs DevKit  : var(--mco-100), var(--had-100), --medium-100, etc.
   - Police de base + typo : fournies par bslib (bs_theme + DMSans-font.css)
   AUCUNE valeur hex hardcodee ici.
   ============================================ */

/* ============================================
   Sticky footer : le footer reste toujours en bas de l'ecran,
   meme quand le contenu de la page est plus court que la fenetre.
   Le body devient une colonne flex sur toute la hauteur du viewport,
   et le footer (dernier enfant) est pousse en bas via margin-top: auto.
   ============================================ */

html,
body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

/* ============================================
   Classes utilitaires partagees
   ============================================ */

.summary-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.summary-text {
  margin: 0;
  font-size: 14px;
  color: var(--medium-100);
}

.switch-wrapper {
  font-size: 14px;
  color: var(--medium-100);
}

.switch-wrapper .form-group {
  margin-bottom: 0;
}

/* ============================================
   Cartouches d'introduction de module (cartouche_intro)
   ============================================ */

.intro-card {
  background-color: var(--mco-400);
  border-radius: 0.5rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.intro-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.intro-card-icon {
  color: var(--mco-000);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.intro-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark-100);
  margin: 0;
  line-height: 1.3;
}

.intro-card-intro {
  color: var(--medium-100);
  font-size: 0.95rem;
  line-height: 1.45;
}

.intro-card-intro p {
  margin: 0;
}

.intro-card-toggle {
  align-self: flex-start;
  padding: 0 !important;
  color: var(--mco-000);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  border: none;
  background: transparent;
}

.intro-card-toggle:hover,
.intro-card-toggle:focus {
  color: var(--mco-000);
  text-decoration: underline;
}

.intro-card-toggle::after {
  content: " \25BE";
  display: inline-block;
  margin-left: 0.2rem;
}

.intro-card-toggle.collapsed::after {
  content: " \25B8";
}

.intro-card-toggle .intro-card-toggle-less {
  display: none;
}

.intro-card-toggle:not(.collapsed) .intro-card-toggle-more {
  display: none;
}

.intro-card-toggle:not(.collapsed) .intro-card-toggle-less {
  display: inline;
}

.intro-card-details {
  color: var(--medium-100);
  font-size: 0.95rem;
  line-height: 1.45;
  padding-top: 0.25rem;
}

.intro-card-details p {
  margin: 0 0 0.5rem;
}

.intro-card-details p:last-child {
  margin-bottom: 0;
}

.intro-card-details ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
}

/* ============================================
   Cartouches de filtres (mod_select_*)
   ============================================ */

.btn.filter-card {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--medium-200);
  border-radius: 0.5rem;
  background: var(--white);
  color: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  min-height: 4.5rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.btn.filter-card:hover,
.btn.filter-card:focus,
.btn.filter-card:active {
  background: var(--white);
  color: inherit;
  border-color: var(--bs-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.filter-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.filter-card-title {
  font-weight: 600;
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-card-edit {
  color: var(--grey-000);
  font-size: 0.9rem;
}

.filter-card-summary {
  color: var(--medium-100);
  font-size: 0.9rem;
  line-height: 1.3;
  display: block;
}

/* ============================================
   Navbar (style ATIH-DEVKIT)
   Reproduit la spec du DevKit (ATIH-DEVKIT.css L866-915)
   sur la DOM emise par bslib::page_navbar() :
     - fond blanc, 80px de haut
     - items en font-weight 600
     - lien actif souligne 4px en orange MCO (couleur primaire de l'app)
   ============================================ */

.navbar {
  background-color: var(--white) !important;
  min-height: 80px;
  border-bottom: 1px solid var(--medium-200);
  padding: 0 1rem;
}

.navbar .navbar-brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 32px 0 0;
  padding: 0;
  color: var(--dark-100);
}

.navbar .navbar-brand .navbar-logo {
  height: 45px;
  width: auto;
}

.navbar .navbar-brand .navbar-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--dark-100);
  text-transform: none;
}

.navbar .navbar-nav .nav-link {
  font-size: 15px;
  line-height: 22.5px;
  font-weight: 600;
  color: var(--dark-100);
  padding: 0.75rem 0.6rem;
  margin: 0 1px;
  border-bottom: 4px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: var(--mco-000);
  border-bottom-color: var(--mco-200);
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link[aria-current="page"] {
  color: var(--dark-100);
  border-bottom-color: var(--mco-100);
  background-color: transparent;
}

.navbar .navbar-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--medium-100);
  font-size: 14px;
}

.navbar .navbar-user-info .user-label {
  font-weight: 500;
}

/* ============================================
   Module "Les plateformes Data ATIH" (navbar)
   Porte depuis panel.etab. Scope sous #header-platforms-wrapper pour ne pas
   impacter le reste de l'app. Toggle du dropdown : inst/app/www/app.js.
   ============================================ */

#header-platforms-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

#header-platforms-wrapper .lien_plateformes {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--dav-3);
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
}

#header-platforms-wrapper .lien_plateformes:hover,
#header-platforms-wrapper .lien_plateformes:focus {
  color: var(--dav-4);
}

#header-platforms-wrapper .dropdown_plateforme {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1030;
  display: none;
  flex-direction: column;
  width: max-content;
  max-width: 80vw;
  box-sizing: border-box;
  padding: 20px;
  gap: 24px;
  border: 1px solid var(--bluegrey-100);
  border-radius: 8px;
  background-color: var(--light-100);
  box-shadow: -5px 4px 10px rgba(0, 0, 0, 0.25);
}

#header-platforms-wrapper .dropdown_plateforme.show {
  display: flex !important;
}

#header-platforms-wrapper .row_platforme {
  display: grid;
  grid-template-columns: repeat(2, fit-content(100%));
  justify-content: space-between;
  gap: 24px;
}

#header-platforms-wrapper .card_plateforme {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: fit-content;
  padding: 40px;
  border: 1px solid var(--bluegrey-100);
  border-radius: 8px;
  background-color: var(--white);
}

#header-platforms-wrapper .card_plateforme-atih {
  border: none;
  background-color: transparent;
}

#header-platforms-wrapper .card_plateforme img {
  width: 62px;
  height: 32px;
}

#header-platforms-wrapper .card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-100);
}

#header-platforms-wrapper .card_plateforme p {
  margin: 0;
  max-width: 300px;
  font-weight: 500;
  text-transform: none;
  color: var(--medium-100);
}

#header-platforms-wrapper .text_plateforme {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#header-platforms-wrapper .btn_plateforme {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}

#header-platforms-wrapper .btn_plateforme p {
  flex: 1;
  max-width: 231px;
  font-size: 14px;
  font-weight: 400;
}

/* Bouton rond a icone (CTA Essentiel / Avance / Expert) */
#header-platforms-wrapper .btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  color: var(--dark-100);
}

#header-platforms-wrapper .btn-round svg {
  width: 18px;
  height: 18px;
}

#header-platforms-wrapper .essentiel .btn-round {
  background-color: transparent;
  border: 1px solid var(--des-3);
}

#header-platforms-wrapper .essentiel .btn-round:hover {
  background-color: var(--des-3);
  border-color: var(--des-1);
}

#header-platforms-wrapper .avance .btn-round {
  background-color: transparent;
  border: 1px solid var(--dav-6);
}

#header-platforms-wrapper .avance .btn-round:hover {
  background-color: var(--dav-6);
  border-color: var(--dav-4);
}

#header-platforms-wrapper .expert .btn-round {
  background-color: transparent;
  border: 1px solid var(--dex-4);
}

#header-platforms-wrapper .expert .btn-round:hover {
  background-color: var(--dex-4);
  border-color: var(--dex-2);
}

/* Bouton "Retour a Data ATIH" */
#header-platforms-wrapper .btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid var(--primary-100);
  border-radius: 8px;
  background-color: transparent;
  color: var(--primary-100);
  font-weight: 600;
}

#header-platforms-wrapper .btn-tertiary:hover {
  background-color: var(--primary-100);
  color: var(--white);
}

/* Empile les cartes sur petits ecrans */
@media (max-width: 768px) {
  #header-platforms-wrapper .row_platforme {
    grid-template-columns: 1fr;
  }

  #header-platforms-wrapper .dropdown_plateforme {
    max-width: 92vw;
  }
}

/* Sur les ecrans < 1450px, masquer le texte du lien "Les plateformes"
   pour ne garder que l'icone grille et liberer de l'espace dans la navbar. */
@media (max-width: 1449px) {
  #header-platforms-wrapper .lien_plateformes span {
    display: none;
  }
}


/* ============================================
   Page d'accueil — Hero + Info (2 colonnes)
   Sera utilisee en PR 2 par mod_accueil.
   ============================================ */

.accueil-header {
  background-color: var(--white);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--medium-200);
}

.accueil-header-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .accueil-header-logo {
    height: 40px;
  }
}

.hero-section {
  position: relative;
  min-height: 55vh;
  background-color: var(--mco-100);
  background-image: url('img/banner.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--white) 60%, transparent);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 2rem;
  color: var(--dark-100);
}

.hero-content h1 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-content .lead {
  opacity: 0.9;
  font-size: 1.1rem;
}

.info-section {
  padding: 2.5rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

.feature-card {
  border-left: 3px solid var(--bs-info) !important;
  margin-bottom: 0.75rem;
}

.audience-panel {
  padding-left: 1.5rem;
  border-left: 1px solid var(--medium-200);
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 45vh;
  }

  .hero-content h1 {
    font-size: 1.8rem;
  }

  .info-section {
    padding: 2rem 1.5rem;
  }

  .audience-panel {
    padding-left: 0;
    border-left: none;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--medium-200);
  }
}

/* ============================================
   Footer (style ATIH-DEVKIT)
   Pas de composant footer dans ATIH-DEVKIT.css : on cree
   un footer simple qui reprend la palette DevKit.
     - fond dark-100, texte/logo blancs
     - logo ATIH passe en blanc via filter
   ============================================ */

.atih-footer {
  background-color: var(--dark-100);
  color: var(--white);
  padding: 20px 32px;
  /* margin-top: auto -> pousse le footer en bas quand le contenu est court ;
     se reduit a 0 quand le contenu remplit deja l'ecran. */
  margin-top: auto;
}

.atih-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.atih-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.atih-footer-logo {
  height: 24px;
  width: auto;
  /* Logo_ATIH_mini.svg est bicolore (rouge + bleu) -> on le passe en blanc */
  filter: brightness(0) invert(1);
}

.atih-footer-copy {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  opacity: 0.85;
}

.atih-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.atih-footer-links a {
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}

.atih-footer-links a:hover,
.atih-footer-links a:focus {
  color: var(--mco-200);
  border-bottom-color: var(--mco-200);
}

/* ============================================
   Carte "acces refuse" (ecran 2 du shell PR 2)
   ============================================ */

.denied-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
}

.denied-card {
  max-width: 480px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--medium-200);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.denied-card h2 {
  color: var(--bs-danger);
  margin-bottom: 1rem;
}