/* ---------------------------------- TOPBAR --------------------------------------- */

/* Base */
.ro-topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  height: var(--ro-topbar-h);                         /* desktop */
  background: var(--ro-dolphing-100);   /* desktop */
  box-shadow: 0 2px 0 var(--ro-dolphing-300);

  display: flex;
  align-items: center;
}



/* Décalage topbar à droite de la sidebar (desktop + tablette) */
@media (min-width: 441px){
  .ro-topbar{
    margin-left: var(--ro-sidebar-current-w);
  }
}

/* Inner layout desktop/tablette */
.ro-topbar__inner{
  width: 100%;
  display: grid;
  grid-template-columns: 180px minmax(0, 560px) auto;
  justify-content: space-between; /* brand à gauche, actions à droite */
  gap: 16px;
  align-items: center;
  padding: 0 16px; /* pas de padding vertical : la hauteur est gérée par .ro-topbar */
}

.ro-topbar__brand{ text-decoration: none; color: inherit; }
.ro-topbar__logo{ font-weight: 700; }

/* Search (desktop/tablette) */
.ro-topbar__search{
  height: var(--ro-size-44);
  width: 100%;
  justify-self: center;                 
  display: flex;
  align-items: center;
  gap: var(--ro-space-10);
  padding: 0 var(--ro-space-14);
  border-radius: var(--ro-radius-8);
  background: rgba(255,255,255,.55); /* léger, cohérent topbar dolphing */
  border: 1px solid rgba(0,0,0,.08);
}

.ro-topbar__search i{
  font-size: 18px;
  line-height: 1;
  opacity: .75;
}

.ro-topbar__input{
  height: 100%;
  padding: 0;
  border: 0;
  border-width: 0 !important;
  outline: 0;
  background: transparent;
  font: inherit;
}


.ro-topbar__input::placeholder{
  opacity: .65;
}

/* Focus clair (sans cadre noir) */
.ro-topbar__search:focus-within{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.ro-topbar__clear{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: scale(.85);

  transition: 
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

.ro-topbar__clear i{
  font-size: 18px;
}

/* état visible */
.ro-topbar__clear.is-visible{
  opacity: .6;
  visibility: visible;
  transform: scale(1);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}

.ro-topbar__clear.is-visible:hover{
  opacity: 1;
}

/* Actions wrapper */
.ro-topbar__actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Desktop: texte visible / icônes cachées */
.ro-topbar__actionsDesktop{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ro-topbar__actionsMobile{
  display: none;
}

/* ---------------------------------- ACCOUNT --------------------------------------- */
/* =========================================================
   MENU COMPTE DESKTOP
   Popover ancré sous l’icône compte
========================================================= */

/* le conteneur qui porte le bouton + le menu */
.ro-accountmenu{
  position: relative;
}

/* bouton trigger */
.ro-accountmenu__trigger{
  position: relative;
}

/* panel */
.ro-accountmenu__panel{
  position: absolute;
  top: calc(100% + var(--ro-space-10));
  right: 0;
  z-index: 1200;

  width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow: auto;

  background: var(--ro-bg-0);
  border: 1px solid var(--ro-dolphing-300);
  border-radius: var(--ro-radius-16);
  box-shadow:
    0 12px 30px rgba(0,0,0,.10),
    0 2px 8px rgba(0,0,0,.06);

  padding: var(--ro-space-12);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

/* état ouvert */
.ro-accountmenu.is-open .ro-accountmenu__panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}

/* petite flèche discrète */
.ro-accountmenu__panel::before{
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 14px;
  height: 14px;
  background: var(--ro-bg-0);
  border-top: 1px solid var(--ro-dolphing-300);
  border-left: 1px solid var(--ro-dolphing-300);
  transform: rotate(45deg);
}

/* header user */
.ro-accountmenu__head{
  display: flex;
  align-items: center;
  gap: var(--ro-space-12);
  padding: var(--ro-space-8);
  margin-bottom: var(--ro-space-8);
  border-radius: var(--ro-radius-12);
  background: color-mix(in srgb, var(--ro-dolphing-100) 60%, white);
}

.ro-accountmenu__avatar{
  flex: 0 0 auto;
  width: var(--ro-size-44);
  height: var(--ro-size-44);
  border-radius: 999px;
  border: 1px solid var(--ro-dolphing-300);
  background: var(--ro-dolphing-50);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ro-dolphing-700);
}

.ro-accountmenu__avatar i{
  font-size: var(--ro-size-24);
}

.ro-accountmenu__meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ro-accountmenu__name{
  margin: 0;
  font-size: var(--ro-font-size-m);
  font-weight: var(--ro-font-weight-bold);
  color: var(--ro-text-900);
  line-height: var(--ro-line-height-sm);
}

.ro-accountmenu__sub{
  margin: 0;
  font-size: var(--ro-font-size-s);
  color: var(--ro-neutral-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* séparateurs */
.ro-accountmenu__sep{
  height: 1px;
  margin: var(--ro-space-8) 0;
  background: var(--ro-neutral-150);
}

/* liste */
.ro-accountmenu__list{
  display: grid;
  gap: var(--ro-space-4);
}

/* item */
.ro-accountmenu__item{
  width: 100%;
  min-height: var(--ro-size-44);
  padding: var(--ro-space-10) var(--ro-space-12);
  border-radius: var(--ro-radius-12);

  display: flex;
  align-items: center;
  gap: var(--ro-space-10);

  text-decoration: none;
  color: var(--ro-text-900);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ro-accountmenu__item:hover{
  background: var(--ro-dolphing-100);
}

.ro-accountmenu__item:focus-visible{
  outline: 2px solid var(--ro-focus-ring-color);
  outline-offset: 2px;
}

.ro-accountmenu__item i{
  font-size: var(--ro-size-20);
  color: var(--ro-dolphing-700);
  flex: 0 0 auto;
}

.ro-accountmenu__label{
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ro-font-size-s);
  font-weight: var(--ro-font-weight-semB);
  color: var(--ro-text-900);
}

.ro-accountmenu__hint{
  flex: 0 0 auto;
  font-size: var(--ro-font-size-xs);
  color: var(--ro-neutral-600);
}

/* item logout plus marqué */
.ro-accountmenu__item--danger{
  color: var(--ro-err-700);
}

.ro-accountmenu__item--danger i,
.ro-accountmenu__item--danger .ro-accountmenu__label{
  color: var(--ro-err-700);
}

.ro-accountmenu__item--danger:hover{
  background: var(--ro-err-50);
}

/* =========================================
   ITEMS INTERACTIFS : hover / focus / actif
========================================= */

.ro-accountmenu__item{
  position: relative;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* hover */
.ro-accountmenu__item:hover{
  background: color-mix(in srgb, var(--ro-dolphing-100) 78%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ro-dolphing-400) 28%, transparent);
  
}

/* petit retour visuel sur l’icône et le texte */
.ro-accountmenu__item:hover .ro-accountmenu__label,
.ro-accountmenu__item:hover i{
  color: var(--ro-dolphing-800);
}

/* focus clavier */
.ro-accountmenu__item:focus-visible{
  outline: 2px solid var(--ro-focus-ring-color);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--ro-dolphing-100) 82%, white);
}

/* active click */
.ro-accountmenu__item:active{
  transform: translateY(1px);
}

/* état courant / page active */
.ro-accountmenu__item.is-current,
.ro-accountmenu__item[aria-current="page"]{
  background: color-mix(in srgb, var(--ro-dolphing-100) 92%, white);
}

.ro-accountmenu__item.is-current .ro-accountmenu__label,
.ro-accountmenu__item.is-current i,
.ro-accountmenu__item[aria-current="page"] .ro-accountmenu__label,
.ro-accountmenu__item[aria-current="page"] i{
  color: var(--ro-dolphing-800);
  font-weight: var(--ro-font-weight-bold);
}

/* petit marqueur gauche pour l’item actif */
.ro-accountmenu__item.is-current::before,
.ro-accountmenu__item[aria-current="page"]::before{
  content: "";
  position: absolute;
  
}
/* -----------------------POPOVER DISPLAY NONE ----------------- */

/* desktop only */
@media (max-width: 440px){
  .ro-accountmenu__panel{
    display: none;
  }
}


/* ---------------------------------- MOBILE --------------------------------------- */
@media (max-width: 440px){

  header.ro-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    
  }

  .ro-topbar{
    
    height: var(--ro-topbar-h);    /* mobile */
    background: var(--ro-dolphing-100); /* mobile */
    margin-left: 0;
  }

  .ro-topbar__inner{
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 0 12px;
  }

  /* Search cachée en mobile  */
  .ro-topbar__search{
    display: none;
  }

  /* Mobile: texte caché / icônes visibles */
  .ro-topbar__actionsDesktop{
    display: none;
  }

  .ro-topbar__actionsMobile{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  
}