/* =========================================================
   BLOCK — Menu modèles (maquette)

   - Titre : Pharmacologie + the_title() (IN VIVO/IN VITRO en italique)
     -> font-size-m / font-weight 500

   - Accordéon parent:
     -> flèche ↑ à gauche en --page-accent
     -> flèche: 180° fermé, 0° ouvert (animée)
     -> titre parent font-size-s / 500

   - Enfants:
     -> font-size-s / 400
     -> hover color page-accent avec fondu

   - Dernier lien : Nos plateformes (page 175)

   - Sticky sidebar:
     -> .menu-modeles__inner passe en fixed puis en absolute (stop)
     -> le padding DOIT rester en fixed => padding sur __inner (pas sur .menu-modeles)

========================================================= */


/* =========================================================
   WRAPPER
========================================================= */

.menu-modeles{
  width: 100%;
  position: relative; /* nécessaire pour le mode "stopped" en absolute */
  padding: 0;         /* ✅ padding déplacé sur __inner */
  box-sizing: border-box;
}

/* l’élément qui est déplacé (fixed/absolute) */
.menu-modeles__inner{
  width: 100%;
  box-sizing: border-box;

  padding: 22px;      /* ✅ reste identique même en fixed */
  /* background: var(--color-blanc); */ /* si besoin, mets-le ici */
}


/* =========================================================
   TITLE
========================================================= */

.menu-modeles__head{
  margin-bottom: 14px;
}

.menu-modeles__title{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  font-size: var(--font-size-m);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-noir);
}

.menu-modeles__title-em{
  font-style: italic;
  font-weight: 500;
}


/* =========================================================
   BODY
========================================================= */

.menu-modeles__body{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
}


/* =========================================================
   GROUPS (details/summary)
========================================================= */

.menu-modeles__groups{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-modeles__group{
  padding: 0;
  margin: 10px 0 0;
  border: 0;
}

/* retirer le marker natif */
.menu-modeles__group > summary{
  list-style: none;
}
.menu-modeles__group > summary::-webkit-details-marker{
  display: none;
}

.menu-modeles__group-summary{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;

  cursor: pointer;
  user-select: none;

  font-size: var(--font-size-s);
  font-weight: 500;
  color: var(--color-noir);

  transition: color .22s ease;
}

/* Flèche animée : fermé 180° -> ouvert 0° */
.menu-modeles__group-arrow{
  display: inline-block;
  color: var(--page-accent);
  font-weight: 500;
  line-height: 1;

  transform: rotate(180deg);
  transform-origin: center;
  transition: transform .28s ease;
}

.menu-modeles__group[open] .menu-modeles__group-arrow{
  transform: rotate(0deg);
}

/* Hover parent */
.menu-modeles__group:hover .menu-modeles__group-summary{
  color: var(--page-accent);
}

/* Panel */
.menu-modeles__group-panel{
  padding: 5px 0 0 25px; /* alignement sous le titre (après flèche) */
}

/* Classe pilotée par JS (animation hauteur) */
.menu-modeles__group-panel.is-animating{
  overflow: hidden;
}

/* Inner pour fondu */
.menu-modeles__group-panel-inner{
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .22s ease, transform .22s ease;
}

.menu-modeles__group[open] .menu-modeles__group-panel-inner{
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   ITEMS (children)
========================================================= */

.menu-modeles__items{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 9px;
}

.menu-modeles__item{
  margin: 0;
  padding: 0;
}

/* ✅ IMPORTANT :
   On sort du flex pour que la flèche suive le texte (wrap naturel)
   La flèche est injectée via ::after sur le label.
*/
.menu-modeles__link{
  display: inline;

  text-decoration: none;
  font-size: var(--font-size-s);
  font-weight: 400;
  color: var(--color-noir);

  transition: color .22s ease;
}

/* texte libre : peut passer sur plusieurs lignes */
.menu-modeles__link-label{
  display: inline;
}

/* flèche intégrée au flux du texte => même comportement 1 ou 2 lignes */
.menu-modeles__link-label::after{
  content: "→";
  display: inline-block;
  margin-left: 8px;

  color: var(--page-accent);
  opacity: .9;

  transition: transform .22s ease, opacity .22s ease;
}

/* on masque la flèche HTML (sinon double flèche) */
.menu-modeles__link-arrow{
  display: none;
}

.menu-modeles__link:hover{
  color: var(--page-accent);
}

.menu-modeles__link:hover .menu-modeles__link-label::after{
  transform: translateX(2px);
  opacity: 1;
}


/* =========================================================
   FOOTER (Nos plateformes)
========================================================= */

.menu-modeles__footer{
  padding-top: 10px;
}

.menu-modeles__plateformes{
  display: inline-block;

  text-decoration: none;
  font-size: var(--font-size-s);
  font-weight: 500;
  color: var(--color-noir);

  transition: color .22s ease;
}

.menu-modeles__plateformes:hover{
  color: var(--page-accent);
}


/* =========================================================
   STICKY / STOP (sidebar)
   - fixed quand on scrolle (respecte le layout via left/width en variables JS)
   - stop en bas (absolute dans .menu-modeles)
========================================================= */

.menu-modeles__inner.is-fixed{
  position: fixed;
  top: 0;

  left: var(--menu-modeles-fixed-left, 0px);
  width: var(--menu-modeles-fixed-width, auto);

  z-index: 20;
}

.menu-modeles__inner.is-stopped{
  position: absolute;
  top: var(--menu-modeles-stop-top, 0px);
  left: 0;
  right: 0;
}

/* optionnel : si ton menu peut être trop grand */
@media (min-width: 782px){
  .menu-modeles__inner.is-fixed{
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
}