/* ==========================================================================
   Candivio — layout.css
   En-tête global, sous-navigation, gabarit de page, sections, ancres,
   navigation mobile. Dépend de tokens.css. Charte UI, sections 3, 4 et 8.
   ========================================================================== */

/* --- Conteneurs ----------------------------------------------------------- */
.cv-container {
  box-sizing: border-box; /* autonome : ne dépend pas de base.css */
  width: 100%;
  max-width: var(--cv-container);
  margin-inline: auto;
  padding-inline: var(--cv-gutter);
}
.cv-container--wide { max-width: var(--cv-container-wide); }

/* --- En-tête global ------------------------------------------------------- */
/* AppHeader (maquettes v2) : logo, navigation centrée, menu de compte. */
.cv-header { background: var(--cv-navy); color: var(--cv-on-dark); position: sticky; top: 0; z-index: 50; }
.cv-header__inner {
  display: flex; align-items: center; gap: var(--cv-space-5);
  min-height: var(--cv-header-h);
}
.cv-logo { color: var(--cv-on-dark); font-weight: var(--cv-fw-bold); font-size: var(--cv-fs-26); letter-spacing: var(--cv-ls-tight); line-height: var(--cv-lh-ui); text-decoration: none; }
.cv-logo:hover { color: var(--cv-on-dark); }
.cv-logo span { color: var(--cv-brand-dot); }

.cv-mainnav { display: flex; gap: var(--cv-space-1); margin-inline: auto; }
.cv-mainnav a {
  display: flex; align-items: center; gap: var(--cv-space-2);
  padding: var(--cv-sp-10) var(--cv-space-4); border-radius: var(--cv-r-8);
  color: var(--cv-nav-inactive); font-size: var(--cv-fs-15); font-weight: var(--cv-fw-medium); text-decoration: none;
  transition: background var(--cv-transition), color var(--cv-transition);
}
.cv-mainnav a:hover { color: var(--cv-on-dark); background: var(--cv-nav-hover-bg); }
.cv-mainnav a[aria-current="page"] { color: var(--cv-on-dark); background: var(--cv-nav-active-bg); font-weight: var(--cv-fw-semibold); }

.cv-account { position: relative; }
.cv-account__trigger {
  display: flex; align-items: center; gap: var(--cv-sp-10); min-height: var(--cv-touch); padding: var(--cv-sp-1) var(--cv-sp-6);
  background: transparent; border: 0; color: var(--cv-on-dark); font-weight: var(--cv-fw-semibold); font-size: var(--cv-fs-15);
}
.cv-avatar {
  width: var(--cv-avatar); height: var(--cv-avatar); border-radius: 50%; object-fit: cover;
  background: var(--cv-brand-dot); color: var(--cv-navy);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--cv-fs-15); font-weight: var(--cv-fw-bold);
}
.cv-account__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px;
  background: var(--cv-surface); color: var(--cv-navy-800);
  border: 1px solid var(--cv-line); border-radius: var(--cv-radius-md); box-shadow: var(--cv-shadow-2);
  padding: var(--cv-space-2); display: none;
}
.cv-account[data-open="true"] .cv-account__menu { display: block; }
.cv-account__menu a {
  display: flex; align-items: center; gap: var(--cv-space-3); min-height: var(--cv-touch); padding: 0 var(--cv-space-3);
  border-radius: var(--cv-radius-sm); color: inherit; text-decoration: none; font-size: var(--cv-fs-15); white-space: nowrap;
}
.cv-account__menu a > svg { flex: none; color: var(--cv-text-2); }
.cv-account__menu a:hover { background: var(--cv-canvas); }
/* Page courante (Guide de démarrage, Mon compte, Administration) : fond doux, texte vert. */
.cv-account__menu a[aria-current="page"] { background: var(--cv-primary-soft); color: var(--cv-primary); font-weight: var(--cv-fw-semibold); }
.cv-account__menu a[aria-current="page"] > svg { color: var(--cv-primary); }
.cv-account__menu hr { border: 0; border-top: 1px solid var(--cv-line); margin: var(--cv-space-2) 0; }

.cv-menu-button { display: none; }

/* --- Sous-navigation de rubrique ----------------------------------------- */
/* SubTabs (maquettes v2) : soulignement de 3 px, compteur en pastille marine sur l'onglet actif. */
.cv-subnav { background: var(--cv-surface); border-bottom: 1px solid var(--cv-border); }
.cv-subnav__list { display: flex; gap: var(--cv-space-2); overflow-x: auto; scrollbar-width: none; }
.cv-subnav__list::-webkit-scrollbar { display: none; }
.cv-subnav a {
  flex: none; display: flex; align-items: center; gap: var(--cv-space-2); white-space: nowrap;
  padding: var(--cv-space-4) var(--cv-sp-14) var(--cv-sp-14); border-bottom: 3px solid transparent;
  color: var(--cv-text-2); font-size: var(--cv-fs-15); font-weight: var(--cv-fw-medium); line-height: var(--cv-lh-ui); text-decoration: none;
}
.cv-subnav a:hover { color: var(--cv-text); }
.cv-subnav a[aria-current="page"] { color: var(--cv-text); font-weight: var(--cv-fw-semibold); border-bottom-color: var(--cv-primary); }
.cv-subnav .cv-count { font-size: var(--cv-fs-13); }
.cv-subnav a[aria-current="page"] .cv-count {
  padding: var(--cv-sp-1) var(--cv-space-2); border-radius: var(--cv-r-10);
  background: var(--cv-navy); color: var(--cv-on-dark); font-size: var(--cv-fs-12);
}

/* --- Gabarit de page ------------------------------------------------------ */
.cv-page { padding-block: var(--cv-sp-40) var(--cv-space-8); }
/* Pages des maquettes v2 : sections empilées avec un écart fixe (24 px Accueil, 20 px Ma recherche). */
.cv-page--stack { display: flex; flex-direction: column; gap: var(--cv-space-5); }
.cv-page--search { padding-top: var(--cv-space-6); gap: var(--cv-sp-20); }
.cv-page--stack > .cv-page-header { margin-bottom: 0; }
.cv-page--stack .cv-page-header { gap: var(--cv-sp-20); }
.cv-page--stack .cv-page-header h1 { font-size: var(--cv-fs-30); letter-spacing: var(--cv-ls-tight); line-height: var(--cv-lh-ui); margin-bottom: var(--cv-space-1); }
.cv-page--stack .cv-page-header__lead { margin-top: 0; font-size: var(--cv-fs-14); line-height: var(--cv-lh-ui); max-width: none; }
.cv-page--home .cv-page-header h1 { font-size: var(--cv-fs-32); margin: var(--cv-sp-6) 0 var(--cv-space-1); }
.cv-page--home .cv-page-header__lead { font-size: var(--cv-fs-15); }

.cv-page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--cv-space-5); flex-wrap: wrap; margin-bottom: var(--cv-space-5);
}
.cv-eyebrow {
  font-size: var(--cv-fs-12); font-weight: var(--cv-fw-semibold);
  letter-spacing: var(--cv-ls-eyebrow); text-transform: uppercase; color: var(--cv-primary);
  margin-bottom: var(--cv-space-2); line-height: var(--cv-lh-ui);
}
.cv-page-header h1 .cv-count { font-size: var(--cv-fs-18); font-weight: var(--cv-fw-medium); color: var(--cv-text-2); letter-spacing: 0; }
.cv-page-header__lead { margin-top: var(--cv-space-2); color: var(--cv-ink-500); max-width: 60ch; }
.cv-page-header__actions { display: flex; gap: var(--cv-space-2); flex-wrap: wrap; }

/* --- Sections ------------------------------------------------------------- */
.cv-section + .cv-section { margin-top: var(--cv-space-7); }
.cv-section__header { margin-bottom: var(--cv-space-4); }
.cv-section__header p { margin-top: var(--cv-space-1); color: var(--cv-ink-500); font-size: var(--cv-fs-small); }
.cv-block {
  background: var(--cv-surface); border: 1px solid var(--cv-line);
  border-radius: var(--cv-radius-lg); box-shadow: var(--cv-shadow-1);
  padding: var(--cv-space-5);
}
.cv-grid {
  display: grid; gap: var(--cv-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/* --- Page longue avec sommaire d'ancres ---------------------------------- */
.cv-with-anchors { display: flex; flex-wrap: wrap; gap: var(--cv-space-6); align-items: flex-start; }
.cv-with-anchors > .cv-content { flex: 999 1 560px; min-width: 0; }
.cv-anchors { flex: 0 0 220px; position: sticky; top: calc(var(--cv-header-h) + var(--cv-space-5)); }
.cv-anchors ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--cv-line); }
.cv-anchors a {
  display: block; padding: 8px 0 8px var(--cv-space-4); margin-left: -2px;
  border-left: 2px solid transparent; color: var(--cv-ink-500);
  font-size: var(--cv-fs-small); font-weight: var(--cv-fw-semibold); text-decoration: none;
}
.cv-anchors a[aria-current="true"] { color: var(--cv-navy-800); border-left-color: var(--cv-teal-600); background: var(--cv-turquoise-50); }
[id] { scroll-margin-top: calc(var(--cv-header-h) + var(--cv-space-5)); }

/* --- Barre d'actions collante (formulaires en étapes) --------------------- */
.cv-actionbar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--cv-surface); border-top: 1px solid var(--cv-line);
  padding: var(--cv-space-3) 0;
}
.cv-actionbar__inner { display: flex; align-items: center; gap: var(--cv-space-2); }
.cv-actionbar__inner > :first-child { margin-right: auto; }

/* --- Pied de page --------------------------------------------------------- */
.cv-footer-note { margin-top: var(--cv-space-6); font-size: var(--cv-fs-small); color: var(--cv-ink-500); text-align: center; }

/* ==========================================================================
   Mobile (< 900 px)
   ========================================================================== */
.cv-bottomnav, .cv-drawer { display: none; }

@media (max-width: 899px) {
  .cv-mainnav, .cv-account { display: none; }
  .cv-header__inner { justify-content: space-between; gap: var(--cv-space-3); }
  .cv-logo { font-size: 1.375rem; }
  .cv-menu-button {
    display: inline-flex; align-items: center; gap: var(--cv-space-2);
    min-height: var(--cv-touch); padding: 0 var(--cv-space-3);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--cv-radius-sm);
    background: transparent; color: #fff; font-weight: var(--cv-fw-semibold); font-size: 0.875rem;
  }
  /* Guide de démarrage : l'avatar ouvre le menu (bouton de 44 × 44, sans cadre). */
  .cv-menu-button--avatar { justify-content: center; width: var(--cv-touch); padding: 0; border: 0; }

  /* Menu plein écran (maquette du 06/11/2026) : logo et Fermer, carte du profil, rubriques avec pictos,
     pied Administration / Se déconnecter. Défilement interne, page non verrouillée artificiellement. */
  .cv-drawer {
    position: fixed; inset: 0; z-index: 60;
    flex-direction: column; gap: var(--cv-space-5);
    background: var(--cv-navy); color: var(--cv-on-dark);
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--cv-space-2) var(--cv-space-4) calc(var(--cv-space-4) + env(safe-area-inset-bottom, 0px));
  }
  .cv-drawer[data-open="true"] { display: flex; }
  .cv-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--cv-header-h); padding-left: var(--cv-space-1); }
  .cv-drawer__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--cv-touch); height: var(--cv-touch); padding: 0;
    border: 1px solid var(--cv-drawer-border); border-radius: var(--cv-r-12);
    background: transparent; color: var(--cv-on-dark); cursor: pointer;
  }
  .cv-drawer__profile {
    display: flex; align-items: center; gap: var(--cv-space-3);
    padding: var(--cv-sp-14) var(--cv-space-4); border-radius: var(--cv-r-16);
    background: var(--cv-drawer-card); color: var(--cv-on-dark); text-decoration: none;
  }
  .cv-drawer__profile .cv-avatar { flex: none; width: var(--cv-sp-40); height: var(--cv-sp-40); font-size: var(--cv-fs-16); }
  .cv-drawer__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--cv-sp-2); }
  .cv-drawer__who strong { font-size: var(--cv-fs-16); font-weight: var(--cv-fw-semibold); }
  .cv-drawer__who span { color: var(--cv-nav-inactive); font-size: var(--cv-fs-14); }
  .cv-drawer__profile > svg { flex: none; color: var(--cv-nav-inactive); }

  .cv-drawer__main { flex: 1; display: flex; flex-direction: column; gap: var(--cv-space-1); }
  /* Rubrique : picto, libellé, chevron éventuel */
  .cv-drawer__rubric {
    display: flex; align-items: center; gap: var(--cv-space-4);
    min-height: var(--cv-btn-lg-h); padding: 0 var(--cv-space-3);
    color: var(--cv-nav-inactive); font-size: var(--cv-fs-16); font-weight: var(--cv-fw-medium);
    text-decoration: none; list-style: none; cursor: pointer;
  }
  .cv-drawer__rubric > svg:first-child { flex: none; }
  .cv-drawer__rubric > span { flex: 1; }
  .cv-drawer__rubric[aria-current="page"],
  .cv-drawer__group[data-active] > summary { color: var(--cv-on-dark); font-weight: var(--cv-fw-bold); }
  .cv-drawer__rubric[aria-current="page"] > svg:first-child,
  .cv-drawer__group[data-active] > summary > svg:first-child { color: var(--cv-brand-dot); }
  .cv-drawer summary::-webkit-details-marker { display: none; }
  .cv-drawer summary > svg:last-child { flex: none; transition: transform var(--cv-transition); }
  .cv-drawer details[open] > summary > svg:last-child { transform: rotate(180deg); }

  /* Pages de la rubrique : trait vertical aligné sur le picto, onglet courant en pastille avec point */
  .cv-drawer__items {
    display: flex; flex-direction: column; gap: var(--cv-sp-2);
    margin: 0 0 var(--cv-space-2) var(--cv-sp-20); padding-left: var(--cv-space-3);
    border-left: 1px solid var(--cv-drawer-line);
  }
  .cv-drawer__items a {
    display: flex; align-items: center; gap: var(--cv-space-2);
    min-height: var(--cv-touch); padding: 0 var(--cv-space-3);
    border-radius: var(--cv-r-10); color: var(--cv-nav-inactive);
    font-size: var(--cv-fs-15); font-weight: var(--cv-fw-medium); text-decoration: none;
  }
  .cv-drawer__items a[aria-current="page"] { background: var(--cv-nav-active-bg); color: var(--cv-on-dark); font-weight: var(--cv-fw-bold); }
  .cv-drawer__items a[aria-current="page"]::before {
    content: ""; flex: none; width: var(--cv-dot); height: var(--cv-dot); border-radius: 50%; background: var(--cv-brand-dot);
  }
  .cv-drawer__items .cv-count {
    margin-left: auto; min-width: var(--cv-pill-h); padding: var(--cv-sp-3) var(--cv-space-2);
    border-radius: var(--cv-radius-pill); text-align: center;
    font-size: var(--cv-fs-14); font-weight: var(--cv-fw-medium);
  }
  .cv-drawer__items a[data-cv-alert] .cv-count { background: var(--cv-drawer-count-soft); color: var(--cv-brand-dot); font-weight: var(--cv-fw-semibold); }
  .cv-drawer__items a[aria-current="page"] .cv-count { background: var(--cv-brand-dot); color: var(--cv-navy); font-weight: var(--cv-fw-bold); }

  .cv-drawer__foot {
    display: flex; flex-direction: column; gap: var(--cv-space-1);
    margin-inline: calc(var(--cv-space-4) * -1); padding: var(--cv-space-3) var(--cv-space-4) 0;
    border-top: 1px solid var(--cv-drawer-line);
  }

  /* Sous-navigation : onglets compacts qui défilent sur le côté (la barre du bas porte les rubriques). */
  .cv-subnav a { min-width: 0; padding: 12px 12px 10px; font-size: 0.8125rem; }
  .cv-subnav__list { gap: 0; padding-inline: var(--cv-space-2); }
  .cv-bottomnav {
    box-sizing: border-box;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--cv-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cv-surface); border-top: 1px solid var(--cv-line);
    box-shadow: 0 -4px 16px rgba(15, 31, 51, 0.08);
  }
  .cv-bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cv-space-1);
    border-top: 3px solid transparent; color: var(--cv-ink-500);
    font-size: 0.6875rem; font-weight: var(--cv-fw-semibold); text-decoration: none;
  }
  /* Onglet courant : pastille turquoise clair autour de l'icône et du libellé. */
  .cv-bottomnav a[aria-current="page"] {
    color: var(--cv-teal-700); font-weight: var(--cv-fw-bold);
    margin: 6px 4px; border-top-color: transparent; border-radius: var(--cv-radius-md); background: var(--cv-turquoise-50);
  }
  body.cv-has-bottomnav { padding-bottom: calc(var(--cv-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

  .cv-page { padding-top: var(--cv-space-5); }
  .cv-page-header { margin-bottom: var(--cv-space-4); }
  .cv-page-header__actions .cv-btn--primary { display: none; } /* remplacée par .cv-fab */
  .cv-section + .cv-section { margin-top: var(--cv-space-6); }
  .cv-block { padding: var(--cv-space-4); }

  .cv-anchors {
    flex: 1 1 100%; min-width: 0; /* sinon la liste de liens élargit la page au lieu de défiler */ position: sticky; top: var(--cv-header-h); z-index: 10;
    background: var(--cv-canvas); margin-inline: calc(var(--cv-gutter) * -1); padding: var(--cv-space-2) var(--cv-gutter);
  }
  .cv-anchors ol { display: flex; gap: var(--cv-space-2); overflow-x: auto; border: 0; }
  .cv-anchors a {
    white-space: nowrap; margin: 0; padding: 8px 14px; border: 1px solid var(--cv-line);
    border-radius: var(--cv-radius-pill); background: var(--cv-surface);
  }
  .cv-anchors a[aria-current="true"] { background: var(--cv-navy-800); border-color: var(--cv-navy-800); color: #fff; }

  .cv-actionbar { bottom: calc(var(--cv-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}