/* Formation en ligne : menu desktop, carte de parcours et espace connecté harmonisés. */
.dashboard-welcome-copy {
  display: none;
}

@media (min-width: 900px) {
  /* Menu invité : le bouton reste visible sur PC et ouvre un vrai menu ancré à droite. */
  .learn-header {
    overflow: visible;
  }

  .learn-nav-toggle[data-guest-only] {
    display: inline-flex;
  }

  .learn-mnav {
    position: absolute;
    top: calc(100% + 10px);
    right: max(20px, calc((100vw - 1180px) / 2));
    z-index: 95;
    width: min(330px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid rgba(15, 157, 140, .24);
    border-radius: 17px;
    /* Le flou d arriere-plan coutait 25,5 ms par image sur les 420 ms suivant le
       clic, 14 intervalles sur 16 au dessus de 20 ms, pic a 40,5 ms. Sans lui et
       sans la seconde couche d ombre : 17,2 ms, soit 56 pour cent d images en
       plus. Le fond passe opaque, faute de quoi les liens deviennent illisibles
       quand le panneau surplombe une carte. */
    background: #fff;
    box-shadow: 0 24px 60px rgba(20, 34, 79, .18);
    transform-origin: top right;
    animation: learningMenuOpen .18s cubic-bezier(.16, 1, .3, 1) both;
  }

  .learn-mnav a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    border-top: 1px solid rgba(231, 225, 210, .82);
    color: var(--learn-navy);
    font-size: .9rem;
    font-weight: 780;
  }

  .learn-mnav a::after {
    color: var(--learn-teal-dark);
    content: "→";
    font-size: 1rem;
  }

  .learn-mnav a:hover {
    color: var(--learn-navy);
    background: linear-gradient(90deg, rgba(15, 157, 140, .08), rgba(217, 149, 33, .06));
  }
  /* Espace connecté : navigation latérale et contenu principal plus lisibles sur PC. */
  .learning-dashboard {
    position: relative;
    overflow: clip;
    padding: 20px 0 56px;
    background: var(--learn-ivory);
  }

  body.is-authenticated .dashboard-welcome {
    display: none !important;
  }

  .learning-dashboard.dashboard-experience-ready .dashboard-home-resume {
    max-width: none;
  }

  .learning-dashboard.dashboard-experience-ready .dashboard-home-resume-card .lapp-card-action.learn-btn-teal {
    border: 0;
    color: #fff;
    background: var(--learn-teal);
  }

  .learning-dashboard > .learn-wrap {
    width: min(1180px, calc(100% - 40px));
  }

  /* Bandeau d'accueil PC : format horizontal compact, le titre reste dominant
     sans manger le haut de page. */
  .dashboard-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .5fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
    padding: 15px 22px;
    border: 1px solid rgba(15, 157, 140, .22);
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0, rgba(217, 149, 33, .10), transparent 35%),
      rgba(255, 255, 255, .84);
    box-shadow: 0 12px 30px rgba(20, 34, 79, .06);
  }

  .dashboard-welcome h1 {
    font-size: clamp(1.65rem, 2.1vw, 2.15rem);
  }

  .dashboard-welcome-copy {
    display: block;
    max-width: 46ch;
    margin: 0;
    color: var(--learn-slate);
    font-size: .86rem;
    line-height: 1.5;
  }

  .dashboard-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    align-items: start;
  }

  /* Le tiroir mobile ne doit plus occuper une colonne gauche sur PC. */
  .learning-dashboard .dashboard-navigation,
  .learning-dashboard .dashboard-drawer-backdrop {
    display: none !important;
  }

  .learning-dashboard [data-learn-view="cours"] > .dashboard-tabs {
    grid-column: 1 / -1;
    grid-row: auto;
    width: min(1180px, calc(100% - 40px));
    max-width: none;
    margin: 0 auto 20px;
    justify-self: center;
  }

  .dashboard-panel,
  #dashboard-panel-courses,
  #dashboard-panel-progress {
    min-width: 0;
    width: 100%;
    max-width: none;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
  }

  #dashboard-panel-courses {
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(231, 225, 210, .92);
    border-radius: 24px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 18px 48px rgba(20, 34, 79, .07);
  }

  .dashboard-choice-result {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
  }

  .dashboard-choice-result-actions {
    grid-column: 1 / -1;
    min-width: 0;
    width: min(100%, 420px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .dashboard-choice-result-actions .learn-btn {
    width: auto;
    min-width: 186px;
    flex: 1 1 180px;
  }

  [data-learn-view="cours"] [data-learning-positioning]:not([hidden]) {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    padding: 24px 28px 28px;
    border: 1px solid rgba(231, 225, 210, .92);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(20, 34, 79, .06);
  }

  .dashboard-level-list img,
  [data-learning-positioning] .lapp-card-media {
    display: none !important;
  }

  .dashboard-level-list ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .dashboard-level-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
  }

  .dashboard-level-list li a:first-child {
    flex: 1 1 220px;
    min-width: 0;
  }

  .dashboard-level-list .lapp-card-action {
    flex: 0 0 auto;
    width: auto;
    min-width: 168px;
    padding: 0 16px;
  }

  .dashboard-choice-heading {
    max-width: 760px;
    margin: 0 0 24px;
    text-align: left;
  }

  .dashboard-choice-heading h2 {
    max-width: 20ch;
    font-size: clamp(1.85rem, 3vw, 2.65rem);
  }

  .dashboard-choice-heading p,
  .dashboard-choice-note {
    text-align: left;
  }

  .dashboard-choice-gateway {
    max-width: none;
    gap: 14px;
    margin-inline: 0;
  }

  .dashboard-choice-option {
    min-height: 136px;
    padding: 21px;
    border-radius: 18px;
  }

  .dashboard-panel-heading {
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(231, 225, 210, .9);
  }

  .dashboard-intelligence-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .dashboard-intelligence-grid .dashboard-notice,
  .dashboard-intelligence-grid .dashboard-privacy-line {
    grid-column: 1 / -1;
  }

  .dashboard-intelligence-grid .dashboard-next-card,
  .dashboard-intelligence-grid .dashboard-chapters-card,
  .dashboard-intelligence-grid .dashboard-progress-card,
  .dashboard-intelligence-grid .dashboard-outcomes-card,
  .dashboard-intelligence-grid .dashboard-recommendations-card,
  .dashboard-intelligence-grid .dashboard-consolidation-card {
    grid-column: 1;
  }

  .dashboard-intelligence-grid .dashboard-card {
    min-width: 0;
    height: 100%;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(20, 34, 79, .07);
  }

  .dashboard-next-card {
    padding: 0 0 28px;
  }

  .dashboard-next-media {
    margin: 0 0 20px;
    border-radius: 18px 18px 0 0;
  }

  .dashboard-next-card h2,
  .dashboard-next-progress,
  .dashboard-next-footer,
  .dashboard-next-why {
    padding-inline: 28px;
  }

  .dashboard-next-card h2 {
    max-width: 19ch;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
  }

  /* La grille de la vue Parametres vivait ici en douze colonnes, et quatre
     cartes seulement y declaraient leur place : « Son du parcours » tombait
     donc dans une piste de 86,16 px. Elle est desormais declaree en un seul
     endroit, section « Vue Parametres » de kolytica-learning.css, avec une
     place pour chaque carte. */

  .dashboard-adaptive-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Vue Explorer sur PC : la section-vue est un enfant direct de la grille du
     shell. Sans cette regle elle atterrit dans la colonne de navigation
     (environ 220px) et le catalogue reste comprime comme sur mobile. */
  .dashboard-shell > [data-learn-view="explorer"]:not([hidden]) {
    min-width: 0;
    grid-column: 1 / -1;
    padding-inline: 0;
  }

  /* Vue Parametres sur PC : meme anomalie que la vue Explorer. La section porte
     aussi .dashboard-panel (grid-column: 2), elle restait donc calee dans la
     seule colonne de contenu et laissait la colonne de navigation vide alors
     que cette vue s'affiche seule, sans navigation laterale. Elle occupe
     desormais toute la largeur utile du shell.
     grid-row: auto est necessaire depuis que .dashboard-panel est cale en
     rangee 2 pour laisser la rangee 1 au tablist : sans cela la vue Parametres,
     qui porte la meme classe, laissait une rangee vide au-dessus d elle. */
  .dashboard-shell > [data-learn-view="parametres"]:not([hidden]) {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: auto;
    padding-inline: 0;
  }

  /* Le rail mobile devient une vraie grille multi-colonnes (2 a 3 colonnes
     selon la largeur), avec la meme carte que « Mes cours ». */
  .lapp-explore {
    width: min(1240px, 100%);
    margin-inline: auto;
  }

  .lapp-screen--flush .lapp-explore .lapp-rail-head {
    padding-inline: 0;
  }

  .lapp-screen .lapp-rail.learn-explore-rail {
    width: 100%;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    align-items: stretch;
    margin: 14px 0 0;
    padding: 2px 0 4px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .lapp-screen .lapp-rail.learn-explore-rail > .lapp-card {
    scroll-snap-align: none;
  }
}

@media (min-width: 1360px) {
  .dashboard-adaptive-catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .dashboard-level-list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .dashboard-intelligence-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .7fr);
  }

  .dashboard-intelligence-grid .dashboard-next-card {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-intelligence-grid .dashboard-chapters-card {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-intelligence-grid .dashboard-privacy-line {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 1280px) {
  .learning-dashboard.dashboard-experience-ready .dashboard-home-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .learning-dashboard.dashboard-experience-ready .dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  /* Recette PC : serrer le vide entre le header et les onglets Parcours. */
  .learning-dashboard {
    padding-top: 8px;
    padding-bottom: 40px;
  }

  .learning-dashboard [data-learn-view="cours"] > .dashboard-tabs {
    margin-bottom: 12px;
  }
}

@keyframes learningMenuOpen {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-mnav {
    animation: none;
  }
}