/* ==========================================================================
   Corvus — docs.css
   --------------------------------------------------------------------------
   DÉPEND DE, ET DOIT ÊTRE CHARGÉ APRÈS : theme.css, components.css, style.css.

   Chargé UNIQUEMENT par docs.php. Complète .docs-wrap/.doc-group/.cmd-*
   (définis dans style.css, réutilisés tels quels) sans les redéfinir :
   ce fichier n'ajoute que ce qui est propre à la nouvelle mise en page
   (menu déroulant à sous-menus, bloc tableau des fonctionnalités, notice
   des nouveautés, recherche de commandes). Préfixe `dx-` pour ne rien
   laisser fuir ailleurs.
   ========================================================================== */

/* Utilitaire défensif, au cas où le thème global n'en fournit pas déjà un. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- En-tête de section, avec repère visuel façon "constellation" ---------- */
.dx-eyebrow-row{display:flex; align-items:center; gap:10px; margin-bottom:var(--s-4)}
.dx-eyebrow-row .ico{width:15px; height:15px; color:var(--accent-2)}

/* ---------- Bandeau « Nouveautés » ----------
   Variante du .notice existant (components.css), un peu plus presente : elle
   introduit la page, elle merite un peu plus d'air qu'un avertissement de
   formulaire. Le bouton ferme la reference visuelle a la cloche : consulte,
   elle n'a plus rien a signaler. */
.dx-announce{
  display:flex; align-items:flex-start; gap:14px;
  background:linear-gradient(135deg, var(--accent-ghost), transparent 70%);
  border:1px solid var(--accent-line-weak); border-radius:var(--r);
  padding:20px 22px; margin-bottom:var(--s-8);
}
.dx-announce-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:11px; background:var(--accent-ghost-strong); color:var(--accent-2);
}
.dx-announce-ico .ico{width:19px; height:19px}
.dx-announce-body{flex:1; min-width:0}
.dx-announce-title{font-family:var(--f-display); font-weight:600; font-size:var(--fs-6); margin-bottom:4px}
.dx-announce-text{color:var(--text-2); font-size:var(--fs-3); line-height:1.6}
.dx-announce-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.dx-announce-tags a{
  font-family:var(--f-mono); font-size:11.5px; color:var(--accent-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:5px 12px; transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.dx-announce-tags a:hover{border-color:var(--accent); background:var(--accent-ghost); color:var(--text)}

/* ==========================================================================
   Menu déroulant du sommaire
   --------------------------------------------------------------------------
   Une seule barre sticky, sous la nav principale. `.dx-nav-trigger` ouvre
   `.dx-nav-panel`, qui liste les rubriques ; chaque rubrique (`.dx-nav-cat`)
   est elle-même un petit accordéon qui déroule son propre sous-menu
   (`.dx-nav-sub`) listant ses modules. Fonctionne au clic — donc identique
   au clavier, à la souris et au tactile, sans dépendre du survol.
   ========================================================================== */
.dx-nav{
  position:sticky; top:64px; z-index:var(--z-sticky);
  margin:0 0 var(--s-8);
  background:rgba(10,11,14,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.dx-nav-in{
  position:relative;
  max-width:var(--maxw); margin:0 auto; padding:10px 28px;
  display:flex; align-items:center; gap:10px;
}

/* ---------- Déclencheur ---------- */
.dx-nav-trigger{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px 9px 14px; cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.dx-nav-trigger:hover{border-color:var(--accent-line-weak); background:var(--accent-ghost)}
.dx-nav-trigger .ico:first-child{width:16px; height:16px; color:var(--accent-2)}
.dx-nav-caret{width:13px; height:13px; margin-left:2px; transition:transform .2s var(--ease)}
.dx-nav-trigger[aria-expanded="true"]{border-color:var(--accent-line-weak); background:var(--accent-ghost)}
.dx-nav-trigger[aria-expanded="true"] .dx-nav-caret{transform:rotate(180deg)}

.dx-nav-jump{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-display); font-size:12.5px; font-weight:500; color:var(--muted);
  padding:9px 14px; border-radius:var(--r-pill); border:1px solid transparent;
  transition:color .16s var(--ease), background .16s var(--ease);
  white-space:nowrap;
}
.dx-nav-jump:hover{color:var(--text); background:var(--surface)}
.dx-nav-jump .ico{width:14px; height:14px}

/* ---------- Panneau principal ---------- */
.dx-nav-panel{
  position:absolute; top:calc(100% + 10px); left:28px;
  width:min(420px, calc(100vw - 56px));
  max-height:min(70vh, 640px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  padding:10px;
  display:flex; flex-direction:column; gap:4px;
}
.dx-nav-panel[hidden]{display:none}

/* ---------- Rubrique (niveau 1 de l'accordéon) ---------- */
.dx-nav-cat{border-radius:calc(var(--r) - 4px); overflow:hidden}
.dx-nav-cat + .dx-nav-cat{margin-top:2px}

.dx-nav-cat-btn{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:transparent; border:0; border-radius:calc(var(--r) - 4px);
  padding:11px 12px; cursor:pointer;
  transition:background .15s var(--ease);
}
.dx-nav-cat-btn:hover{background:var(--surface-2)}
.dx-nav-cat[data-open="true"] > .dx-nav-cat-btn{background:var(--accent-ghost)}

.dx-nav-cat-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:10px; background:var(--surface-2); color:var(--accent-2);
}
.dx-nav-cat[data-open="true"] .dx-nav-cat-ico{background:var(--accent-ghost-strong)}
.dx-nav-cat-ico .ico{width:17px; height:17px}

.dx-nav-cat-label{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.dx-nav-cat-name{font-family:var(--f-display); font-weight:600; font-size:13.5px; color:var(--text)}
.dx-nav-cat-desc{
  font-size:11.5px; color:var(--muted); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.dx-nav-cat-count{
  flex-shrink:0; font-family:var(--f-mono); font-size:11px; color:var(--muted);
  background:var(--surface-2); border-radius:var(--r-pill); padding:2px 8px;
}
.dx-nav-cat-chev{width:14px; height:14px; flex-shrink:0; color:var(--muted); transition:transform .2s var(--ease)}
.dx-nav-cat[data-open="true"] .dx-nav-cat-chev{transform:rotate(180deg); color:var(--accent-2)}

/* ---------- Sous-menu (niveau 2 : les modules de la rubrique) ---------- */
.dx-nav-sub{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .22s var(--ease);
}
.dx-nav-sub > *{min-height:0}
.dx-nav-cat[data-open="true"] .dx-nav-sub{grid-template-rows:1fr}
.dx-nav-sub-inner{overflow:hidden}

.dx-nav-sub a{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text-2);
  padding:9px 12px 9px 30px; border-radius:calc(var(--r) - 6px);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.dx-nav-sub a:hover{background:var(--surface-2); color:var(--text)}
.dx-nav-sub a.is-active{background:var(--accent-ghost); color:var(--text)}
.dx-nav-sub a .ico{width:14px; height:14px; flex-shrink:0; color:var(--accent-2)}
.dx-nav-sub a span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.dx-nav-sub-all{
  font-family:var(--f-display); font-weight:600; font-size:12px !important;
  color:var(--accent-2) !important; padding-left:12px !important;
  border-bottom:1px solid var(--line-soft); margin-bottom:4px; border-radius:0 !important;
}

.dx-nav-new{
  flex-shrink:0; font-style:normal; font-family:var(--f-display); font-weight:600;
  font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ok);
  background:var(--ok-ghost); border-radius:var(--r-pill); padding:2px 6px;
}

/* ---------- Rubriques (ancres de page) ---------- */
.dx-group{scroll-margin-top:96px; margin-bottom:var(--s-9)}
.dx-group-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; max-width:680px}
.dx-group-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:12px; background:var(--accent-ghost); color:var(--accent-2);
}
.dx-group-ico .ico{width:22px; height:22px}
.dx-group-head h2{margin-bottom:5px}
.dx-group-head p{color:var(--muted); font-size:var(--fs-3); line-height:1.6}

/* ==========================================================================
   Bloc « tableau » des fonctionnalités
   --------------------------------------------------------------------------
   Un vrai <table> par rubrique : Module / Description / Ce qu'il faut savoir
   / Variables. `table-layout:fixed` + largeurs de colonnes figées empêchent
   tout débordement horizontal ; `overflow-wrap` casse les mots trop longs.
   En dessous de 760px, le tableau devient une pile de fiches (chaque <td>
   passe en bloc avec son étiquette de colonne en préfixe) : rien n'est
   jamais tronqué ni poussé hors champ, même sur petit écran.
   ========================================================================== */
.dx-table-wrap{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-sm, none);
}
.dx-table{
  width:100%; border-collapse:collapse; table-layout:fixed;
}
.dx-table th, .dx-table td{
  overflow-wrap:anywhere; word-break:break-word;
  vertical-align:top; text-align:left;
}

.dx-col-mod{width:22%}
.dx-col-desc{width:34%}
.dx-col-details{width:28%}
.dx-col-vars{width:16%}

.dx-table thead th{
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--muted);
  background:var(--surface-2); border-bottom:1px solid var(--line);
  padding:13px 18px;
}

.dx-table tbody tr{border-top:1px solid var(--line-soft)}
.dx-table tbody tr:first-child{border-top:0}
.dx-table tbody tr:hover{background:var(--surface-2)}
.dx-table tbody tr:target{background:var(--accent-ghost)}

.dx-table th[scope="row"], .dx-table td{padding:18px}

/* Colonne Module */
.dx-cell-mod{display:flex; align-items:flex-start; gap:12px}
.dx-cell-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:10px; background:var(--surface-2); color:var(--accent-2);
}
.dx-cell-ico .ico{width:17px; height:17px}
.dx-cell-mod-text{min-width:0; display:flex; flex-direction:column; gap:3px}
.dx-cell-name{font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--text); line-height:1.35}
.dx-cell-sub{font-size:12px; color:var(--muted); line-height:1.4}

.dx-pill-new{
  flex-shrink:0; display:inline-flex; align-items:center; gap:4px;
  background:var(--ok-ghost); color:var(--ok); font-family:var(--f-display); font-weight:600;
  font-size:10px; letter-spacing:.03em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); margin-left:auto;
}

/* Colonne Description : le texte long, complet, jamais tronqué */
.dx-cell-desc{color:var(--text-2); font-size:13.5px; line-height:1.7}

/* Colonne "Ce qu'il faut savoir" */
.dx-cell-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.dx-cell-points li{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--text-2); line-height:1.55}
.dx-cell-points .ico{width:14px; height:14px; color:var(--ok); flex-shrink:0; margin-top:2px}

/* Colonne Variables, en chips */
.dx-vars{display:flex; flex-wrap:wrap; gap:6px}
.dx-vars code{
  font-size:11px; color:var(--accent-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:3px 8px;
  overflow-wrap:anywhere;
}

.dx-cell-empty{color:var(--muted); font-size:12.5px}

/* ---------- Mise en route (carte compacte) ---------- */
.dx-start{display:flex; flex-wrap:wrap; gap:var(--s-6); align-items:center; padding:24px 26px; margin-bottom:var(--s-9)}
.dx-start-text{flex:1 1 320px; min-width:0}
.dx-start-text h2{margin-bottom:6px}
.dx-start-text p{color:var(--muted); font-size:var(--fs-3)}
.dx-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1 1 280px}
.dx-steps li{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--text-2)}
.dx-steps li a{color:var(--accent-2)}
.dx-step-n{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px; border-radius:50%; background:var(--surface-2); color:var(--accent-2);
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
}

/* ---------- Recherche de commandes ---------- */
.dx-cmd-search{position:relative; margin-bottom:22px; max-width:360px}
.dx-cmd-search .ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.dx-cmd-search input{padding-left:40px; width:100%}
.dx-cmd-empty{display:none; color:var(--muted); font-size:var(--fs-3); padding:18px 4px}
.dx-cmd-empty.is-visible{display:block}
/* Une commande masquée par la recherche ne doit ni prendre de place ni
   rester dans l'ordre de tabulation. */
.cmd[hidden]{display:none}
.doc-group[hidden]{display:none}

/* ---------- Animations d'entrée, alignées sur l'esthétique de home.css ---------- */
.dx-table-wrap.reveal, .dx-nav-cat.reveal{transition-delay:calc(var(--i,0)*40ms)}

@media (prefers-reduced-motion:reduce){
  .dx-nav{position:static}
  .dx-nav-sub{transition:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .dx-nav-jump span{display:none}
}

@media (max-width:760px){
  .dx-nav{top:0}
  .dx-nav-in{padding:10px 16px}
  .dx-nav-panel{left:16px; width:calc(100vw - 32px)}
  .dx-group{scroll-margin-top:74px}
  .dx-announce{flex-direction:column}
  .dx-cmd-search{max-width:none}

  /* Le tableau devient une pile de fiches : chaque ligne = une carte,
     chaque cellule affiche son étiquette de colonne au-dessus du contenu.
     Rien ne déborde, rien ne se retrouve coupé par une largeur de colonne
     trop étroite pour un petit écran. */
  .dx-table thead{display:none}
  .dx-table, .dx-table tbody, .dx-table tr, .dx-table th, .dx-table td{display:block; width:100%}
  .dx-table tbody tr{
    border-top:0; border-bottom:8px solid var(--bg, var(--surface-2));
    padding-bottom:2px;
  }
  .dx-table th[scope="row"], .dx-table td{
    padding:12px 16px; border-top:1px solid var(--line-soft);
  }
  .dx-table th[scope="row"]{border-top:0; padding-top:16px}
  .dx-table td::before{
    content:attr(data-label);
    display:block; font-family:var(--f-display); font-weight:600; font-size:10.5px;
    letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
  }
  .dx-pill-new{margin-left:0}
}