/* Lien « Cours en ligne » de la navigation : sortie vers Porte-Notes (autre site).
   Pastille a la couleur d'accent + fleche de sortie. Animations : transform et
   opacity seulement, 280 ms au plus, coupees si l'utilisateur reduit les animations. */

.main-nav a.nav-externe {
  display: inline-flex;
  align-self: center;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 14px;
  border: 1px solid rgba(184, 92, 56, 0.55);
  border-radius: 999px;
  background: rgba(184, 92, 56, 0.07);
  color: #B85C38;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.12s ease-out;
}

/* reflet : une bande d'accent qui traverse la pastille */
.main-nav a.nav-externe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 15%, rgba(184, 92, 56, 0.24) 50%, transparent 85%);
  transform: translateX(-110%);
  transition: transform 0.28s ease-out;
}
.main-nav a.nav-externe:hover::before,
.main-nav a.nav-externe:focus-visible::before {
  transform: translateX(110%);
}

/* onde du clic : remplace le soulignement des autres liens */
nav.main-nav a.nav-externe::after,
nav.main-nav a.nav-externe:hover::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%; bottom: auto;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: rgba(184, 92, 56, 0.35);
  opacity: 0;
  transform: scale(0);
  transition: none;
  pointer-events: none;
}
.main-nav a.nav-externe:active::after { animation: pn-onde 0.28s ease-out; }

/* enfoncement au clic */
.main-nav a.nav-externe:active { transform: scale(0.95); }

.main-nav a.nav-externe:focus-visible {
  outline: 2px solid #B85C38;
  outline-offset: 3px;
}

/* fleche : sort en diagonale puis revient */
.main-nav a.nav-externe .nav-externe-fleche {
  width: 11px; height: 11px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.main-nav a.nav-externe:hover .nav-externe-fleche,
.main-nav a.nav-externe:focus-visible .nav-externe-fleche {
  animation: pn-sortie 0.28s ease-out;
}

@keyframes pn-sortie {
  0%   { transform: translate(0, 0); opacity: 1; }
  49%  { transform: translate(5px, -5px); opacity: 0; }
  50%  { transform: translate(-5px, 5px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes pn-onde {
  from { transform: scale(0); opacity: 0.8; }
  to   { transform: scale(1.6); opacity: 0; }
}

/* alternance « Cours en ligne » / « Porte-Notes » : cycle de 8 s, deux libelles empiles dans la
   meme cellule de grille (la pastille prend la largeur du plus long, elle ne bouge pas).
   Sans animation (mouvement reduit) : « Cours en ligne » reste affiche. */
.main-nav a.nav-externe .pn-libelles {
  display: inline-grid;
  justify-items: center;
  align-items: center;
}
.main-nav a.nav-externe .pn-l {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.main-nav a.nav-externe .pn-l-pn { opacity: 0; }
.main-nav a.nav-externe .pn-l-cours { animation: pn-alt-cours 8s ease-in-out infinite; }
.main-nav a.nav-externe .pn-l-pn    { animation: pn-alt-pn 8s ease-in-out infinite; }
.main-nav a.nav-externe .pn-note {
  width: 12px; height: 12px;
  flex: none;
  transform-origin: 50% 80%;
  animation: pn-note 8s ease-in-out infinite;
}
/* pause au survol et au focus clavier */
.main-nav a.nav-externe:hover .pn-l,
.main-nav a.nav-externe:focus-visible .pn-l,
.main-nav a.nav-externe:hover .pn-note,
.main-nav a.nav-externe:focus-visible .pn-note { animation-play-state: paused; }

@keyframes pn-alt-cours {
  0%, 45%   { opacity: 1; transform: translateY(0); }
  50%       { opacity: 0; transform: translateY(-70%); }
  50.1%     { opacity: 0; transform: translateY(70%); }
  95%       { opacity: 0; transform: translateY(70%); }
  100%      { opacity: 1; transform: translateY(0); }
}
@keyframes pn-alt-pn {
  0%, 45%   { opacity: 0; transform: translateY(70%); }
  50%, 95%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-70%); }
}
/* la note sautille et se balance quand « Porte-Notes » apparait */
@keyframes pn-note {
  0%, 49%   { transform: translateY(0) rotate(0); }
  53%       { transform: translateY(-4px) rotate(-14deg); }
  57%       { transform: translateY(0) rotate(10deg); }
  61%       { transform: translateY(-2px) rotate(-7deg); }
  65%, 100% { transform: translateY(0) rotate(0); }
}

/* menu burger : la pastille garde sa taille, alignee a gauche, cible tactile confortable */
@media (max-width: 720px) {
  .main-nav.is-open a.nav-externe {
    align-self: flex-start;
    padding: 9px 16px 9px 18px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a.nav-externe,
  .main-nav a.nav-externe::before { transition: none; }
  .main-nav a.nav-externe:hover .nav-externe-fleche,
  .main-nav a.nav-externe:focus-visible .nav-externe-fleche,
  .main-nav a.nav-externe:active::after { animation: none; }
  .main-nav a.nav-externe:active { transform: none; }
  .main-nav a.nav-externe .pn-l,
  .main-nav a.nav-externe .pn-note { animation: none; }
  .main-nav a.nav-externe .pn-l-cours { opacity: 1; transform: none; }
  .main-nav a.nav-externe .pn-l-pn { opacity: 0; }
  .main-nav a.nav-externe:hover::before,
  .main-nav a.nav-externe:focus-visible::before { transform: translateX(-110%); }
  .main-nav a.nav-externe:hover,
  .main-nav a.nav-externe:focus-visible { background: rgba(184, 92, 56, 0.16); }
}