/* ==========================================================================
   medias7 — structure : coquille, en-tete, navigation, pied de page
   ========================================================================== */

.page {
  width: min(90rem, calc(100% - 2rem));
  margin: clamp(0.75rem, 3vw, 2.5rem) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(8, 8, 25, 0.94) 0 48%, rgba(23, 34, 76, 0.76)),
    radial-gradient(circle at 69% 24%, rgba(92, 110, 187, 0.75), transparent 17rem),
    linear-gradient(135deg, rgba(9, 8, 29, 0.98), rgba(23, 27, 70, 0.96));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 5rem);
}

/* ---------- Barre superieure ---------- */

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
  padding: 1.35rem var(--gutter);
  border-top: 6px solid rgba(143, 155, 213, 0.2);
}
.topbar::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22%;
  width: 4.6rem;
  height: 6px;
  background: var(--accent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.brand small { color: var(--muted); font-style: italic; font-size: 0.75em; font-weight: 600; }
.brand-mark {
  width: 1.35rem;
  height: 1.35rem;
  position: relative;
  flex: 0 0 auto;
}
.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 7px 0 rgba(255, 255, 255, 0.85);
}
.brand-mark::after {
  left: 45%;
  top: 14px;
  box-shadow: none;
  background: var(--accent);
}

.subnav {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 0.4vw, 0.35rem);
  flex-wrap: wrap;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
  padding: 0.55rem 0.9rem;
  transition: background 160ms ease, color 160ms ease;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav-link.is-active { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav-link.is-active::after {
  content: "";
  width: 0.35rem; height: 0.35rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Menu principal : l icone au-dessus du libelle, dans une tuile de largeur
   commune pour que les rubriques s alignent quelle que soit la longueur du
   texte. La pastille active devient un trait sous le libelle, la colonne
   n ayant plus de place a droite pour le point. */
.nav-link--stacked {
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 3.9rem;
  padding: 0.5rem 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.nav-link--stacked .nav-icon { flex: 0 0 auto; }
.nav-link--stacked.is-active .nav-icon { color: var(--accent-2); }
.nav-link--stacked.is-active::after {
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  width: 1.1rem;
  height: 2px;
  margin-left: -0.55rem;
  border-radius: 999px;
}

/* Filet entre deux groupes de rubriques (menu/topMenu.phtml). */
.subnav__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 2.4rem;
  margin-inline: clamp(0.15rem, 0.4vw, 0.35rem);
  background: var(--line-strong);
}

/* Bouton burger : visible seulement en petite largeur */
/* Pastille des tâches en attente (file en arrière-plan) : un lien, nommé
   par son aria-label, à côté du menu. Sur mobile, elle reste visible et le
   bouton du menu garde son margin-left: auto. */
.topbar-taches {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--touch);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-taches:hover,
.topbar-taches:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

/* ---------- Recherche globale ---------- */

/* Le declencheur de la palette. Base nulle : le menu a icones (plus de 900px
   a dix rubriques) garde sa largeur, et le declencheur prend le reste, jusqu
   a n etre plus qu une loupe. Le texte et la touche disparaissent alors par
   requete de conteneur, le libelle accessible restant celui du lien. */
.search-trigger {
  flex: 1 1 0;
  min-width: var(--touch);
  max-width: 15rem;
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.6rem 0 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: none;
  container-type: inline-size;
  overflow: hidden;
}
.search-trigger:hover,
.search-trigger:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.search-trigger svg { flex: 0 0 auto; }
.search-trigger__label { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-trigger__key { flex: 0 0 auto; font-size: 0.75rem; }
@container (max-width: 7.5rem) {
  .search-trigger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .search-trigger__key { display: none; }
}

/* La palette : une boite de dialogue modale, dans la couche superieure. */
.search-palette {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100dvh - 16vh));
  margin: 8vh auto auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(25, 30, 70, 0.99), rgba(13, 16, 40, 0.99));
  color: var(--muted);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.search-palette[open] { display: flex; flex-direction: column; }
.search-palette::backdrop { background: rgba(3, 4, 14, 0.72); backdrop-filter: blur(4px); }

.search-palette__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem 0.75rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
/* Le contour du champ est retire : c est la ligne sous le champ, sur toute
   la largeur de la boite, qui porte le focus — deux pixels d accent, et non
   un simple changement de teinte, pour rester visible sans percevoir la
   couleur (WCAG 2.4.7). */
.search-palette__form:focus-within {
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.search-palette__icon { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.search-palette__input,
.search-palette__input:focus {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-size: 1.12rem;
  color: #fff;
  outline: none;
}
.search-palette__input::-webkit-search-cancel-button { display: none; }
.search-palette__close {
  flex: 0 0 auto;
  min-height: 2.2rem;
  padding: 0 0.3rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.search-palette__close kbd { font-size: 0.72rem; color: var(--muted); }
.search-palette__close:hover kbd,
.search-palette__close:focus-visible kbd { color: #fff; border-color: var(--line-strong); }

/* Chargement : la loupe cede la place a un anneau qui tourne, a la meme
   place et a la meme taille — rien ne bouge autour. Un anneau CSS et non un
   GIF : transparence nette sur le degrade, couleurs du theme, aucune requete,
   et il respecte la preference de mouvement reduit. Il n apparait qu apres
   un court delai, pour ne pas clignoter sur une reponse rapide. */
.search-palette__icon { position: relative; width: 18px; height: 18px; }
.search-palette__spinner {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
}
.search-palette.is-loading .search-palette__spinner {
  visibility: visible;
  animation: search-palette-tour 0.7s linear infinite, search-palette-apparition 0s linear 0.15s forwards;
}
.search-palette.is-loading .search-palette__icon svg {
  animation: search-palette-effacement 0s linear 0.15s forwards;
}
@keyframes search-palette-tour { to { transform: rotate(360deg); } }
@keyframes search-palette-apparition { to { opacity: 1; } }
@keyframes search-palette-effacement { to { opacity: 0; } }
/* Mouvement reduit : l anneau reste visible, immobile, et pulse doucement. */
@media (prefers-reduced-motion: reduce) {
  .search-palette.is-loading .search-palette__spinner {
    animation: search-palette-pulsation 1.6s ease-in-out infinite;
    opacity: 1;
  }
}
@keyframes search-palette-pulsation { 50% { opacity: 0.4; } }

.search-palette__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.35rem 0.5rem 0.6rem; }
.search-palette__state { margin: 0; padding: 2.2rem 1.5rem; text-align: center; font-size: 0.9rem; }
.search-palette__group + .search-palette__group { margin-top: 0.35rem; }
.search-palette__group-title {
  padding: 0.7rem 0.75rem 0.35rem;
  /* --muted et non --faint : 3,99:1 seulement sur le haut clair du degrade,
     mesure, sous les 4,5:1 d un texte de cette taille. */
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.search-palette__option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
}
.search-palette__option[aria-selected="true"] {
  background: rgba(255, 11, 88, 0.16);
  box-shadow: inset 3px 0 0 var(--accent);
}
.search-palette__option--absent .search-palette__thumb,
.search-palette__option--absent .search-palette__text { opacity: 0.55; }
.search-palette__option--absent[aria-selected="true"] .search-palette__thumb,
.search-palette__option--absent[aria-selected="true"] .search-palette__text { opacity: 1; }
.search-palette__thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 3.1rem;
  overflow: hidden;
  border-radius: 0.45rem;
  background: linear-gradient(145deg, rgba(255, 11, 88, 0.28), rgba(108, 92, 231, 0.28));
  color: #fff;
  font-weight: 800;
}
.search-palette__thumb--rond { width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.search-palette__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-palette__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.search-palette__label,
.search-palette__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-palette__label { color: #fff; font-weight: 700; font-size: 0.95rem; }
.search-palette__label mark { background: transparent; color: #ff8bae; }
.search-palette__sub { font-size: 0.8rem; }

.search-palette__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
}
.search-palette__keys kbd { font-size: 0.7rem; margin-right: 0.15rem; }
.search-palette__all { margin-left: auto; color: #ff8bae; font-weight: 800; text-decoration: none; }
.search-palette__all:hover,
.search-palette__all:focus-visible { text-decoration: underline; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-left: auto;
  min-height: var(--touch);
  min-width: var(--touch);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* ---------- Tiroir de navigation (mobile) ---------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(3, 4, 14, 0.72);
  backdrop-filter: blur(3px);
}

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: var(--z-drawer);
  width: min(21rem, 86vw);
  overflow-y: auto;
  padding: 1.25rem;
  border-right: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(16, 21, 52, 0.99), rgba(9, 10, 30, 0.99));
  box-shadow: var(--shadow);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.drawer__close {
  min-height: var(--touch);
  min-width: var(--touch);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.drawer details { border-bottom: 1px solid var(--line); }
.drawer details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch);
  padding: 0.6rem 0.4rem;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details > summary::after {
  content: "\25BE";
  color: var(--faint);
  transition: transform 160ms ease;
}
.drawer details[open] > summary::after { transform: rotate(180deg); }
.drawer details[open] > summary { color: var(--accent-2); }
.drawer .nav-list { padding: 0 0 0.6rem 0.6rem; }
.drawer .nav-link { width: 100%; }
.drawer > .nav-link { gap: 0.7rem; }
.drawer__label { display: inline-flex; align-items: center; gap: 0.7rem; }
.drawer .nav-icon { flex: 0 0 auto; }
/* Les rubriques du tiroir ont deja leur bordure : un groupe s y marque par un
   blanc, un second filet doublerait le premier. */
.drawer__sep { display: block; height: 0.9rem; }

/* ---------- Corps : sous-navigation + contenu ---------- */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Les rangees gardent la hauteur de leur contenu. Sans cela, .layout etant
     un flex-item extensible, une page courte laissait de l espace libre que
     les rangees auto se partageaient : la barre de sous-navigation passait de
     60 a 177px de haut sur les ecrans peu remplis. */
  align-content: start;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 4vw, 2.2rem) var(--gutter) 2rem;
  background: linear-gradient(90deg, rgba(45, 55, 116, 0.74), rgba(38, 45, 101, 0.48));
  border-top-right-radius: 4.4rem;
}
/* Sous-navigation : un bandeau pleine largeur sous l en-tete.
   Elle vit dans la zone sombre, a la suite de la marque et du menu principal,
   parce qu elle est de la navigation et non du contenu. C etait une colonne
   collante de 15rem, soit 272 gouttiere comprise, prise au contenu sur toute
   la hauteur pour une poignee de liens — et d autant plus couteuse sur les
   pages de collection, ou chaque pixel de largeur vaut une carte de plus par
   rangee.

   Le titre de rubrique reste affiche, en tete de bandeau : le masquer comme le
   faisait l ancienne regle mobile le retirait aussi de l arbre d accessibilite,
   et c est la seule chose qui nomme la section parcourue. */
.section-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.9rem;
  padding: 0.5rem var(--gutter) 0.6rem;
  border-top: 1px solid var(--line);
  background: rgba(5, 6, 20, 0.32);
}
.section-nav > h2 {
  flex: 0 0 auto;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0;
  padding-right: 0.9rem;
  border-right: 1px solid var(--line);
}
.nav-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.nav-list .nav-link { width: 100%; }
.nav-list__sub .nav-link { font-size: 0.82rem; }

/* La liste defile plutot que de passer a la ligne : le bandeau garde une
   hauteur d une seule rangee quoi qu il arrive. min-width a zero est
   indispensable, sans quoi la largeur intrinseque des pastilles devient le
   minimum de la page entiere et tout deborde sur telephone. */
.section-nav > .nav-list {
  flex: 1 1 auto;
  min-width: 0;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.section-nav .nav-link { white-space: nowrap; }
/* Un troisieme niveau (Parametres -> Qualites, Roles, Supports) se deplie a la
   suite de son parent, sur la meme ligne. */
.section-nav .nav-list > li { display: flex; align-items: center; gap: 0.25rem; }
.section-nav .nav-list__sub {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0.25rem;
  margin: 0;
  padding-left: 0.5rem;
  border-left: 1px solid var(--line);
}

.main { min-width: 0; display: grid; gap: 1.4rem; align-content: start; }

/* ---------- En-tete d'ecran ---------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.page-head__text { min-width: 0; }
.page-head__text .eyebrow { margin-bottom: 0.6rem; }
.page-head__text h1 { margin: 0; }
.page-head__text .meta { margin-top: 0.35rem; }
.page-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-left: auto;
}

/* ---------- Hero (accueil deconnecte uniquement) ---------- */

.hero {
  position: relative;
  /* Le hero vit dans .main, qui porte deja la gouttiere laterale. */
  padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 3rem);
}
.hero::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: -3%;
  width: min(31rem, 48vw);
  aspect-ratio: 0.78;
  max-width: 100%;
  border-radius: 50% 50% 8% 8%;
  background:
    radial-gradient(circle at 45% 18%, rgba(255, 255, 255, 0.34), transparent 4rem),
    linear-gradient(145deg, transparent 0 35%, rgba(255, 11, 88, 0.45) 36% 58%, rgba(9, 12, 34, 0.82) 59%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  opacity: 0.55;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 12ch; line-height: 1.06; }
.hero p { max-width: 42rem; }
.hero .button-row { margin-top: 2rem; }

/* ---------- Pied de page ---------- */

.footer {
  padding: 1.4rem var(--gutter) 1.8rem;
  color: var(--faint);
  background: rgba(8, 9, 27, 0.42);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
}
.footer p { margin: 0; color: inherit; }
.footer a, .footer a:not(.btn):not(.nav-link) { color: var(--muted); }

/* ---------- Adaptations ---------- */

/* Le menu principal a icones passe sur deux lignes quand il manque de place,
   d ou une bascule vers le tiroir plus tot que le reste de la mise en page.
   Mesure le 08/10/2026 avec dix rubriques (amiibo compris) : le menu resserre
   ci-dessus demande environ 795px et tient sur une ligne des 1200px de
   fenetre ; 1240 garde une marge pour les polices d un autre poste. Toute
   rubrique de plus oblige a refaire la mesure. Le seuil est repete dans
   initDrawer() de ui.js, qui referme le tiroir au-dela. */
@media (max-width: 1240px) {
  .subnav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Le menu parti dans le tiroir, le declencheur prend la place libre. */
  .search-trigger { max-width: none; }
}

@media (max-width: 900px) {
  .layout { border-top-right-radius: 2rem; }
  .hero::after { opacity: 0.25; right: -8%; }
}

@media (max-width: 680px) {
  .page {
    width: 100%;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    min-height: 100vh;
  }
  .topbar { padding-block: 1rem; }
  .brand { font-size: 1.05rem; }
  /* La palette occupe tout le haut de l ecran ; l aide clavier n a pas de
     sens au doigt. */
  .search-palette { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0 auto auto; border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .search-palette__keys { display: none; }
  .page-head { align-items: stretch; }
  .page-head__actions { width: 100%; }
  .page-head__actions > .btn { flex: 1 1 auto; }
  .footer { justify-content: flex-start; }
}

/* ---------- Mosaique du tableau de bord ---------- */

/* Deux panneaux cote a cote sous le flux des derniers ajouts. Le meme ecart
   que .main entre ses enfants, pour que la page garde un rythme unique. */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}