/* ============================================================================
   BANDEAU DE REPÉRAGE (espace professionnel)
   ----------------------------------------------------------------------------
   Objectif : à tout moment, savoir où l'on est et comment remonter.

   Deux niveaux de repère :
     1. Le FIL D'ARIANE  — « Dossiers > Mariage Duval » — toujours visible.
     2. Les ONGLETS DE SECTION — Accueil, Campagnes, Faire signer… — affichés
        à partir de 860 px (ordinateur), où la barre du bas n'a plus lieu d'être
        la seule navigation. Sur téléphone, les onglets principaux restent dans
        la barre du bas : on ne les affiche pas deux fois, c'est inutile et ça
        mange l'écran.

   Les sous-onglets d'une page (Personnes / Dossiers / Suivi…) existent déjà
   dans les pages concernées et se placent naturellement sous ce bandeau.

   Ce fichier est chargé en dernier : il ne modifie aucune règle de style.css.
   ========================================================================== */

/* BLOC D'ACTIONS DE L'EN-TÊTE — un seul groupe, ancré à droite.
   Défaut corrigé : les icônes « recherche » et « profil » se décalaient d'un
   écran à l'autre et se mélangeaient à l'action de la page. Cause réelle :
   elles étaient posées dans un bloc flottant, sans largeur fixe, à la merci
   de la longueur du titre (un nom de dossier long les poussait, un titre
   court les tirait vers le centre).
   Désormais : UN seul groupe ancré à droite, jamais compressé, qui ne bouge
   plus quelle que soit la longueur du titre. Ordre de gauche à droite :
     1. les deux promesses (ce qui fait vivre l'abonnement) ;
     2. l'action propre à la page (« Nouveau contrat », « Ajouter »…) ;
     3. le compte — recherche et profil — séparé par un fin filet, car cela
        ne sert pas la tâche en cours.
   Le titre est la seule partie élastique de la barre : c'est lui qui se
   rétrécit, plus les boutons. */
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;   /* ancre le groupe à droite */
  flex: 0 0 auto;      /* jamais compressé, jamais déplacé */
  min-width: 0;
}
.hdr-compte {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Les deux promesses dans l'en-tête : sur ordinateur uniquement.
   « Faire signer » et « Ma boutique » sont les deux gestes qui justifient
   l'abonnement. Sur ordinateur, elles vivent DANS la barre du haut, à droite :
   c'est l'endroit le plus visible de l'écran, et cela libère une rangée.
   Sur téléphone, la barre du haut est trop étroite pour deux boutons
   supplémentaires : elles restent dans la petite barre juste en dessous
   (voir .navband), là où le pouce les atteint sans effort. */
.promesses.in-header { display: none; }
@media (min-width: 860px) {
  .promesses.in-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .promesses.in-header .promesse { flex: 0 0 auto; }
  /* Un fin trait vertical sépare ce qui AGIT (promesses + action de la page)
     de ce qui sert au COMPTE (recherche, profil). Sans lui, les boutons se
     lisaient comme une seule série et on ne voyait plus la hiérarchie. */
  .hdr-compte {
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid var(--line);
  }
  /* Les icônes du compte restent sobres : elles ne doivent pas attirer l'œil
     plus que le geste principal de la maison. */
  .hdr-actions .icon-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
  /* Hiérarchie des deux promesses dans l'en-tête : « Faire signer » est le
     geste n°1 de la maison, il est donc plein ; « Ma boutique » reste violet
     clair, bien visible mais sans lui voler la vedette. Sur une page dont
     l'une des deux est l'écran courant, elle prend le plein (voir .on). */
  .promesses.in-header .promesse:first-child {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    box-shadow: 0 3px 10px rgba(108, 76, 224, .24);
  }
  .promesses.in-header .promesse:first-child svg { opacity: 1; }
  .promesses.in-header .promesse:not(:first-child) {
    background: #fff;
    border-color: var(--line);
  }
  .promesses.in-header .promesse:not(:first-child).on {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
    color: #fff;
  }
  /* Elles sont maintenant dans l'en-tête : on retire celles du bandeau, pour
     ne pas les afficher deux fois sur le même écran. */
  .navband .promesses { display: none; }
}

/* Le bandeau reprend EXACTEMENT le fond de l'en-tête : les deux se lisent comme
   une seule barre en haut de l'écran, au lieu de deux blocs empilés qu'on
   prenait pour deux navigations différentes. */
.navband {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.navband .navband-in {
  max-width: 980px;
  margin: 0 auto;
  padding: 7px 16px 9px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---------- LES DEUX PROMESSES DE LA MAISON ----------
   « Faire signer » et « Ma boutique » : les deux gestes qui justifient
   l'abonnement. Elles étaient rangées dans les onglets, où elles se perdaient
   parmi les autres — et sur téléphone, noyées dans une barre du bas de sept
   entrées. Elles sont donc sorties de la navigation et posées en évidence
   juste sous l'en-tête, sur TOUS les écrans, ordinateur comme téléphone.
   Boutons volontairement fins et rectangulaires (8 px d'angle, ~37 px de
   haut) : des actions, pas des onglets. */
.promesses {
  display: flex;
  gap: 8px;
  padding: 1px 0 7px;
}
.promesse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 15, 26, .05);
}
.promesse svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.promesse:active { transform: scale(.985); }
.promesse.on {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(108, 76, 224, .28);
}
.promesse.on svg { opacity: 1; }

/* ---------- Sur téléphone, le bandeau se réduit aux DEUX PROMESSES ----------
   C'est le correctif des « trois bandeaux empilés ». Sur un écran de
   téléphone, on avait en haut : l'en-tête (flèche retour ET titre de l'écran),
   puis le fil d'Ariane qui répétait ce même chemin, puis la barre du bas qui
   portait déjà les onglets principaux. Trois barres pour une seule navigation.
   Le fil d'Ariane et les onglets de section sont donc masqués : sur téléphone,
   l'en-tête suffit (sa flèche remonte, son titre dit où l'on est) et la barre
   du bas reste le geste du pouce.
   Les deux promesses, elles, RESTENT : c'est le seul endroit d'où l'on peut
   « Faire signer » ou ouvrir « Ma boutique » en un tap depuis n'importe quel
   écran. Une barre de deux boutons d'action ne se confond pas avec un menu.
   Sur ordinateur, au contraire, le bandeau est INDISPENSABLE : la barre du bas
   y disparaît, c'est donc lui qui porte la navigation, et le fil d'Ariane y est
   utile pour remonter d'un cran. */
@media (max-width: 859px) {
  .navband:not(.has-promesses) { display: none; }
  .navband .crumbs,
  .navband .sectabs { display: none; }
  .navband .navband-in { padding: 7px 14px 8px; }
}
/* Sur ordinateur : les onglets à gauche, les deux promesses à droite, SUR UNE
   SEULE LIGNE. Le fil d'Ariane, quand il apprend vraiment quelque chose (une
   sous-page), occupe sa propre ligne au-dessus.
   Correctif : six onglets et deux boutons ne tenaient pas dans les 980 px du
   bandeau — mesuré environ 945 px de contenu pour 932 px de place. Les
   promesses passaient donc à la ligne et le bandeau faisait deux rangées.
   Les onglets sont resserrés et n'ont plus le droit de passer à la ligne :
   ils se compriment, et défilent horizontalement si l'écran est vraiment
   étroit (voir plus bas). */
@media (min-width: 860px) {
  /* L'en-tête et le bandeau se lisent comme UNE SEULE barre : on retire le
     trait de séparation de l'en-tête. Sinon on voyait deux traits collés, et
     l'ensemble ressemblait à deux blocs empilés plutôt qu'à une barre unique.
     (:has est ignoré par un très vieux navigateur : on garde alors le trait,
     rien ne casse.) */
  .app-header:has(+ .navband) { border-bottom: none; }
  .navband {
    /* Le bandeau est la partie basse de la barre haute : fond blanc plein,
       sans transparence, pour se raccorder exactement à l'en-tête. */
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navband .navband-in {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
  }
  .crumbs { order: 0; flex: 1 1 100%; }
  .sectabs { order: 1; flex: 1 1 auto; min-width: 0; }
  .promesses { order: 2; margin-left: auto; padding: 0; flex: 0 0 auto; }
  .promesse { flex: 0 0 auto; }
  /* Onglets plus compacts : c'est ce qui fait tenir les six libellés et les
     deux boutons sur une seule rangée. */
  .sectab { padding: 7px 10px; gap: 6px; font-size: 13px; }
}

/* ---------- Fil d'Ariane ---------- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  font-size: 12.5px;
  color: var(--muted);
  min-width: 0;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand-dark);
  font-weight: 650;
  white-space: nowrap;
  flex: none;
}
.crumbs a:active { opacity: .7; }
.crumbs a svg { width: 14px; height: 14px; flex: none; }
.crumbs .sep { opacity: .4; flex: none; padding: 0 1px; }
/* Le dernier niveau est le plus long (nom d'un dossier) : il se coupe
   proprement au lieu de pousser le fil hors de l'écran. */
.crumbs .here {
  color: var(--ink);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Une seule ligne suffit sur téléphone : le niveau 1 se réduit à son icône. */
@media (max-width: 520px) {
  .crumbs .lbl-lvl1 { display: none; }
  .crumbs a { gap: 0; }
}

/* ---------- Onglets de section (ordinateur) ---------- */
.sectabs { display: none; }
.sectab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-2);
  white-space: nowrap;
}
.sectab svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.sectab.on { background: var(--brand-soft); color: var(--brand-dark); }
.sectab.on svg { opacity: 1; }
.sectab:active { transform: scale(.98); }

@media (min-width: 860px) {
  /* 16 px comme l'en-tête (et non 24) : le premier onglet démarre exactement
     sous le logo. Avec deux marges différentes, on voyait tout de suite que
     les deux barres n'étaient pas alignées. */
  .navband .navband-in { padding: 6px 16px 8px; }
  /* UNE SEULE RANGÉE, garantie : les onglets ne passent jamais à la ligne.
     Si l'écran est trop étroit pour les six, la rangée défile latéralement
     (molette, trackpad ou glissement) au lieu de casser en deux étages —
     c'était exactement le défaut signalé. Les deux promesses, elles, restent
     fixes à droite : on ne défile jamais pour « Faire signer ». */
  .sectabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 2px 0 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .sectabs::-webkit-scrollbar { display: none; }
  .sectab { flex: 0 0 auto; }
  .sectab:hover { background: #fff; border-color: var(--line); }
  .sectab.on:hover { background: var(--brand-soft); border-color: transparent; }
}

/* ---------- Sous-onglets d'une PAGE (Personnes / Dossiers / Suivi) ----------
   Ce ne sont pas des onglets de navigation : ce sont les sections d'un même
   écran. Avec le même aspect que les onglets du bandeau, on croyait voir trois
   barres empilées et on ne savait plus laquelle commandait quoi. Ils sont donc
   volontairement plus petits et posés sur un fond grisé, comme des onglets de
   dossier posés sur le contenu : on comprend d'un regard qu'ils appartiennent
   à la page, pas au menu. */
/* Le préfixe « main » n'est pas décoratif : certaines pages embarquent encore
   leur propre copie de ces styles dans la page, et ces copies-là passent après
   cette feuille dans l'ordre du document. Avec « main », la règle commune est
   plus précise et gagne partout — l'aspect des sous-onglets est donc identique
   sur tous les écrans, sans exception. */
main .ctabs {
  margin: 12px 0 0;
  padding: 5px 5px 0;
  gap: 3px;
  background: #F7F6FC;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 11px 11px 0 0;
}
main .ctab {
  padding: 8px 11px;
  font-size: 13.5px;
  border-radius: 8px 8px 0 0;
}
main .ctab.on { background: #fff; }
/* Le trait sous le libellé servait à marquer l'onglet actif quand il flottait
   seul : sur une barre déjà encadrée, le fond blanc suffit et le trait
   dépassait sous le cadre. */
main .ctab.on::after { display: none; }
/* Les onglets d'une page se posent SUR le contenu, sans trou : le cadre gris
   s'ouvre sur la première carte, comme des onglets de dossier. */
main .ctabs + .cpane > .card:first-child,
main .ctabs + .cpane > .camp-item:first-child { margin-top: 0; }

/* Sur ordinateur, la barre du bas fait doublon avec les onglets du bandeau :
   elle est réservée au téléphone, où c'est le geste naturel du pouce. */
@media (min-width: 860px) {
  .bottom-nav { display: none; }
  body.has-bottom-nav { padding-bottom: 28px; }
}