/* ============================================================
   SOCING — features.css
   Feuille d'intégration (vague V4, REINE-INTÉGRATRICE).
   Rôle : styliser le shell réel d'index.html (en-tête, navigation
   basse, bandeaux, écrans système) et les classes signalées par
   FORGERON-CORE (.champ, .etat-vide, .actions-carte,
   .confirmation-douce, .progression, .ligne-badges), plus le layout
   d'accueil (grille de cartes), la bannière de mise à jour et les
   bannières de rappels.

   Règles :
   - UNIQUEMENT les variables de tokens.css (jamais de couleur hors
     palette Cristallo) ;
   - cibles tactiles ≥ 44 px (--cible) ;
   - chargée APRÈS components.css : les rares recouvrements du shell
     (position du bouton Masquer au-dessus de la barre de navigation)
     sont volontaires et commentés.
   ============================================================ */

/* ---- Garde : l'attribut hidden prime toujours sur les display ----
   Plusieurs règles ci-dessous posent un display (flex, grid…) : sans
   cette garde, elles écraseraient le display:none implicite de hidden. */
#app [hidden],
#badge-fiction-entete[hidden],
#nav-principale[hidden],
#nav-plus[hidden] {
  display: none !important;
}

/* ============ En-tête de l'application ============ */
.entete-app {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  flex-wrap: wrap;
  padding: var(--espace-3) var(--espace-4);
  background: var(--surface);
  border-bottom: 4px solid var(--sarcelle);
}
.entete-app .mot-signe {
  font-size: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  letter-spacing: -0.035em;
  color: var(--prune);
  margin: 0;
}
.entete-app .mot-signe img {
  display: block;
  width: clamp(7.5rem, 6.8rem + 4vw, 10.5rem);
  height: auto;
}
.entete-app .sceau-parent {
  width: 32px;
  height: 32px;
  flex: none;
}
.entete-app .badge-fiction {
  margin-left: auto;
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  font-size: var(--texte-s);
  font-weight: 700;
  line-height: 1.3;
}

/* ============ Badge persistant du mode découverte ============
   Hors #app : visible sur toutes les routes, tant que la session
   découverte est ouverte (promesse honnête affichée). */
.badge-decouverte {
  position: sticky;
  top: 0;
  z-index: var(--z-collant);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--espace-2) var(--espace-4);
  background: var(--sarcelle);
  color: var(--creme);
  font-weight: 700;
  text-align: center;
}
.badge-decouverte :focus-visible {
  outline: var(--focus-ring-sur-prune);
}
.repere-decouverte {
  border-color: var(--sarcelle);
  background: color-mix(in srgb, var(--sarcelle-clair) 22%, var(--surface));
}
.repere-decouverte .actions-carte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}
.parcours-evaluation-social {
  min-width: 0;
  max-width: 100%;
  margin-top: var(--espace-4);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
}
.parcours-evaluation-social > summary {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  cursor: pointer;
  color: var(--prune);
  font-weight: 800;
}
.parcours-evaluation-social > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.etapes-evaluation-social {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: var(--espace-3);
  padding-left: var(--espace-6);
}
.etapes-evaluation-social li {
  min-width: 0;
  max-width: 100%;
  padding-left: var(--espace-1);
  overflow-wrap: anywhere;
}
.etapes-evaluation-social a {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--cible);
  color: var(--sarcelle-sombre);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.etapes-evaluation-social p {
  min-width: 0;
  max-width: 100%;
  margin-block: 0 var(--espace-2);
  overflow-wrap: anywhere;
}
.questions-evaluation-social {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: var(--espace-2);
  padding-left: var(--espace-6);
}
.questions-evaluation-social li {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.orientation-aide {
  margin-block: var(--espace-4) var(--espace-5);
  border-color: var(--sarcelle);
}
.grille-orientation-aide {
  display: grid;
  gap: var(--espace-3);
  margin-top: var(--espace-4);
}
.orientation-aide-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--espace-4);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--surface);
}
.orientation-aide-item[data-intention="preparer"] {
  border-color: var(--sarcelle);
}
.orientation-aide-item[data-intention="accompagner"] {
  border-color: var(--corail);
}
.orientation-aide-item[data-intention="repondre"] {
  border-color: var(--prune-clair);
}
.orientation-aide-item[data-intention="trouver-csr"] {
  border-color: var(--or);
}
.icone-orientation-aide {
  width: 40px;
  height: 40px;
  flex: none;
}
.orientation-aide-item h3 {
  margin-block: var(--espace-3) var(--espace-2);
  color: var(--prune);
}
.orientation-aide-item > p:not(.action-orientation-aide) {
  flex: 1;
}
.action-orientation-aide {
  margin: var(--espace-3) 0 0;
}
.action-orientation-aide .btn {
  width: 100%;
  min-height: var(--cible);
}

.retour-terrain {
  margin-block: var(--espace-4) var(--espace-5);
  border-color: var(--corail);
}
.retour-terrain-form {
  max-width: 48rem;
}
.retour-terrain-form textarea {
  min-height: calc(var(--cible) * 2.5);
}
.retour-terrain-apercu {
  margin-top: var(--espace-5);
  padding-top: var(--espace-4);
  border-top: 2px solid var(--bordure);
}
#apercu-retour-terrain {
  min-height: calc(var(--cible) * 5);
  background: var(--creme);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.55;
}

@media (min-width: 42rem) {
  .grille-orientation-aide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 70rem) {
  .grille-orientation-aide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============ Sas des trois points de départ ============
   Le choix est une navigation immédiate, jamais un profil. Une colonne sur
   mobile, trois cartes seulement quand chacune garde une largeur lisible. */
.grille-chemins-bienvenue {
  display: grid;
  gap: var(--espace-3);
  margin-top: var(--espace-4);
}
.chemin-bienvenue {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--espace-5);
  border: 3px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--surface);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--prune) 12%, transparent);
}
.chemin-bienvenue[data-chemin="personne"] {
  border-color: var(--sarcelle);
  background: color-mix(in srgb, var(--sarcelle-clair) 42%, var(--surface));
}
.chemin-bienvenue[data-chemin="proche"] {
  border-color: var(--corail);
  background: color-mix(in srgb, var(--corail-pale) 55%, var(--surface));
}
.chemin-bienvenue[data-chemin="professionnel"] {
  border-color: var(--bleu);
  background: color-mix(in srgb, var(--bleu-clair) 58%, var(--surface));
}
.coupole-chemin-bienvenue {
  width: 72px;
  height: 72px;
  flex: none;
  align-self: flex-start;
}
.chemin-bienvenue h3 {
  margin-block: var(--espace-2) var(--espace-2);
  color: var(--prune);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.85rem);
  letter-spacing: -0.025em;
}
.chemin-bienvenue > p:not(.action-chemin-bienvenue) {
  flex: 1;
}
.action-chemin-bienvenue {
  margin: var(--espace-3) 0 0;
}
.action-chemin-bienvenue .btn {
  width: 100%;
  min-height: var(--cible);
}
.actions-chemin-professionnel {
  display: grid;
  gap: var(--espace-2);
}

@media (min-width: 42rem) {
  .grille-chemins-bienvenue {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* La bienvenue exprime IDEAING sans révéler la marque dans l'onglet ou
   l'icône installée. Le bleu nuit reste une encre, jamais un mur brun. */
#ecran-verrouillage:not([data-etat="verrouille"]) {
  background:
    radial-gradient(circle at 12% 8%, var(--or-clair) 0 8rem, transparent 8.1rem),
    radial-gradient(circle at 92% 22%, var(--sarcelle-clair) 0 9rem, transparent 9.1rem),
    var(--creme);
  color: var(--prune);
}
#ecran-verrouillage:not([data-etat="verrouille"]) > h1 {
  color: var(--prune);
  font-size: clamp(2.3rem, 1.8rem + 2.4vw, 3.7rem);
  letter-spacing: -0.045em;
}
#ecran-verrouillage:not([data-etat="verrouille"]) > .titre-bienvenue-marque {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.22em;
  row-gap: 0.08em;
  flex-wrap: wrap;
}
.titre-bienvenue-mot-signe {
  display: inline-block;
  width: auto;
  height: 1.05em;
  max-width: min(100%, 6em);
  flex: none;
}
#ecran-verrouillage:not([data-etat="verrouille"]) > .introduction-bienvenue {
  color: var(--prune);
  font-size: var(--texte-l);
  text-align: center;
}
#ecran-verrouillage:not([data-etat="verrouille"]) a {
  color: var(--sarcelle-sombre);
}

.installation-pwa {
  border: 3px solid var(--or);
  background: color-mix(in srgb, var(--or-clair) 45%, var(--surface));
}
.installation-pwa h2 {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}

/* ============ Région principale ============ */
#app {
  display: block;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--espace-4);
  /* Place réservée : barre de navigation fixe + bouton Masquer. */
  padding-bottom: calc(var(--cible) * 2 + var(--espace-16) + var(--espace-8)
    + env(safe-area-inset-bottom, 0px));
}
#app:focus,
#app:focus-visible,
#vue-route h1[tabindex="-1"]:focus,
#vue-route h1[tabindex="-1"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ============ Navigation principale (barre basse fixe) ============ */
#nav-principale {
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  bottom: 0;
  z-index: var(--z-collant);
  container: socing-nav / inline-size;
  background: var(--surface);
  border-top: 2px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#nav-principale .nav-liste {
  list-style: none;
  display: flex;
  gap: var(--espace-1);
  margin: 0;
  padding: var(--espace-1) var(--espace-2);
  overflow-x: hidden;
}
#nav-principale .nav-liste li {
  flex: 1 1 0;
  min-width: 0;
}
#nav-plus .nav-plus-primaire {
  display: none;
}
/* Liens ET bouton « Plus » : même cible, même aspect. */
#nav-principale .nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-2);
  border: 2px solid transparent;
  border-radius: var(--rayon-m);
  background: transparent;
  color: var(--prune);
  text-decoration: none;
  font-size: var(--texte-s);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
#nav-principale .nav-item:hover {
  background: var(--creme-sombre);
}
#nav-principale .nav-item[aria-current="page"] {
  color: var(--corail-sombre);
  background: var(--creme-sombre);
  font-weight: 700;
}
#btn-nav-plus[aria-expanded="true"] {
  border-color: var(--sarcelle);
}

/* Menu « Plus » : s'ouvre AU-DESSUS de la barre, jamais hors écran. */
#nav-plus {
  position: absolute;
  right: var(--espace-2);
  bottom: calc(100% + var(--espace-1));
  list-style: none;
  margin: 0;
  padding: var(--espace-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--espace-1);
  max-width: calc(100vw - var(--espace-4));
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-m);
  box-shadow: 0 4px 16px rgba(51, 32, 43, 0.25);
}
#nav-plus .nav-item {
  justify-content: flex-start;
  text-align: left;
}
@media (max-width: 22rem) {
  #nav-plus {
    width: calc(100vw - var(--espace-4));
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Quand la largeur disponible vaut moins de vingt caractères courants, la
   barre garde deux commandes lisibles et déplace les trois autres dans Plus.
   L'unité em suit ici l'agrandissement du texte : le repli fonctionne donc
   aussi sur un téléphone large configuré à 200 %, pas seulement à 320 px. */
@container socing-nav (max-width: 20em) {
  #nav-principale .nav-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #nav-principale .nav-liste > .nav-primaire-repliee {
    display: none;
  }
  #nav-principale .nav-liste > li:not(.nav-primaire-repliee) .nav-item {
    height: 100%;
  }
  #nav-plus .nav-plus-primaire {
    display: list-item;
  }
}

/* Le bouton de sortie reste toujours atteignable, mais il ne doit jamais
   masquer une entrée de Plus. Sur mobile, l'ouverture du menu le place dans
   la zone haute et borne le menu entre ce bouton et la barre basse. */
@media (max-width: 63.99rem) {
  body:has(#nav-plus:not([hidden])) .btn-masquer {
    top: calc(var(--espace-2) + env(safe-area-inset-top, 0px));
    bottom: auto;
    display: grid;
    place-items: center;
    width: var(--cible);
    min-width: var(--cible);
    max-width: var(--cible);
    height: var(--cible);
    padding: 0;
    font-size: 0;
  }
  body:has(#nav-plus:not([hidden])) .btn-masquer::before {
    content: "";
    width: 70%;
    height: 70%;
    background: var(--creme);
    -webkit-mask: url("../assets/derives/prive.svg") center / contain no-repeat;
    mask: url("../assets/derives/prive.svg") center / contain no-repeat;
  }
  body:has(#nav-plus:not([hidden])) #nav-plus {
    max-height: min(60dvh,
      calc(100dvh - (var(--cible) * 2) - var(--espace-4)));
  }
}

/* Bouton Masquer : remonté AU-DESSUS de la barre de navigation fixe
   (recouvrement volontaire de components.css, sinon superposition). */
.btn-masquer {
  /* --espace-16 grandit avec le texte utilisateur : contrairement à une
     hauteur figée, le bouton remonte quand les libellés de navigation passent
     sur deux lignes. */
  bottom: calc(var(--cible) + var(--espace-16)
    + env(safe-area-inset-bottom, 0px));
}

/* Les écrans système n'affichent aucune barre de navigation. Masquer reste
   fixé au bord sûr au lieu de réserver la place d'une barre absente et de
   recouvrir le premier geste de la bienvenue. */
body:not(.session-ouverte) .btn-masquer {
  bottom: calc(var(--espace-3) + env(safe-area-inset-bottom, 0px));
}

/* ============ Pied de page ============ */
.pied-app {
  padding: var(--espace-6) var(--espace-4);
  padding-bottom: calc(var(--cible) * 2 + var(--espace-16) + var(--espace-8)
    + env(safe-area-inset-bottom, 0px));
  font-size: var(--texte-s);
  color: var(--prune-clair);
  border-top: 2px solid var(--bordure);
}
.pied-app .etat-securite {
  font-weight: 600;
  color: var(--corail-sombre);
}
.pied-app a {
  min-width: var(--cible);
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
}

/* ============ Page publique : confidentialité et limites ============
   Page statique, accessible avant tout coffre et sans JavaScript. */
.page-information-publique {
  background: var(--creme);
}
.entete-information-publique,
.contenu-information-publique,
.pied-information-publique {
  width: min(100% - (2 * var(--espace-4)), 68rem);
  margin-inline: auto;
}
.entete-information-publique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  padding-block: var(--espace-4);
  border-bottom: 2px solid var(--bordure);
}
.marque-information-publique {
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  color: var(--prune);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.marque-information-publique img {
  height: auto;
}
.marque-information-publique .brand-symbol {
  width: 2.8rem;
}
.marque-information-publique .brand-wordmark {
  width: min(7.8rem, 31vw);
}
.contenu-information-publique {
  padding-block: var(--espace-8) var(--espace-12);
}
.contenu-information-publique > * + * {
  margin-top: var(--espace-5);
}
.sur-titre-information-publique {
  color: var(--corail-sombre);
  font-size: var(--texte-s);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.introduction-information-publique {
  font-size: var(--texte-l);
}
.carte-information-principale {
  border-width: 2px;
  border-color: var(--sarcelle);
}
.contenu-information-publique .carte > * + * {
  margin-top: var(--espace-3);
}
.contenu-information-publique li + li {
  margin-top: var(--espace-2);
}
.grille-information-publique {
  display: grid;
  gap: var(--espace-4);
}
.grille-information-publique .carte {
  margin: 0;
}
.etat-publication-information {
  padding: var(--espace-5);
  color: var(--creme);
  background: var(--prune);
  border-radius: var(--rayon-l);
}
.etat-publication-information > * + * {
  margin-top: var(--espace-3);
}
.etat-publication-information .btn-secondaire {
  color: var(--creme);
  border-color: var(--creme);
}
.etat-publication-information .btn-secondaire:hover {
  color: var(--prune-sombre);
  background: var(--creme);
}
.actions-information-publique {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
}
.pied-information-publique {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-3);
  padding-block: var(--espace-5);
  border-top: 2px solid var(--bordure);
}
.pied-information-publique a {
  min-width: var(--cible);
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
}

@media (min-width: 42rem) {
  .grille-information-publique {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .entete-information-publique {
    align-items: flex-start;
    flex-direction: column;
  }
  .actions-information-publique .btn {
    width: 100%;
  }
}

/* ============ Écran de verrouillage / choix initial (ID réel) ======
   Recouvre toute l'application ; fond prune : texte crème, accent
   corail clair (règle de pairage tokens.css). Défile si le contenu
   dépasse (formulaire de création). */
#ecran-verrouillage {
  position: fixed;
  inset: 0;
  z-index: var(--z-verrou);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-4);
  padding: calc(var(--espace-8) + env(safe-area-inset-top, 0px)) var(--espace-4)
    calc(var(--espace-8) + env(safe-area-inset-bottom, 0px));
  scroll-padding-block: var(--espace-4);
  overscroll-behavior: contain;
  background: var(--prune);
  color: var(--creme);
}
#ecran-verrouillage > * {
  width: 100%;
  max-width: 32rem;
}
#ecran-verrouillage h1 {
  text-align: center;
}
#ecran-verrouillage a {
  color: var(--corail-clair);
}
/* Un lien transformé en action primaire doit garder le même couple de
   couleurs que les boutons du sas. Le sélecteur générique ci-dessus est plus
   spécifique que `.btn-primaire` et colorait sinon le texte corail clair sur
   fond corail (2:1). */
#ecran-verrouillage a.btn-primaire {
  background: var(--corail-clair);
  border-color: var(--corail-clair);
  color: var(--prune-sombre);
}
#ecran-verrouillage .rappel-local {
  color: var(--creme-sombre);
  text-align: center;
  font-size: var(--texte-s);
}
#ecran-verrouillage .aide-champ {
  color: var(--creme-sombre);
}
/* Une limite utilise un panneau clair : elle doit donc reprendre l'encre
   sombre même lorsqu'elle vit directement sur le fond prune de bienvenue. */
#ecran-verrouillage .limite-visible {
  color: var(--prune);
}
/* Les cartes du choix initial restent claires (lisibilité du formulaire). */
#ecran-verrouillage .carte {
  background: var(--surface);
  color: var(--prune);
  border-color: var(--prune-sombre);
}
#ecran-verrouillage .carte .aide-champ {
  color: var(--prune-clair);
}
#ecran-verrouillage .message-erreur {
  color: var(--corail-clair);
}
#ecran-verrouillage .carte .message-erreur {
  color: var(--danger);
}
#ecran-verrouillage :focus-visible {
  outline: var(--focus-ring-sur-prune);
}
#ecran-verrouillage .carte :focus-visible {
  outline: var(--focus-ring);
}

/* ============ Écran de prérequis (ID réel) ============ */
#ecran-prerequis {
  background: var(--surface);
  border: 2px solid var(--corail);
  border-radius: var(--rayon-l);
  padding: var(--espace-6);
  margin-block: var(--espace-6);
}
#ecran-prerequis ul {
  padding-left: var(--espace-6);
}
#ecran-prerequis li {
  margin-block: var(--espace-2);
}

/* ============ Champs de formulaire (classe FORGERON .champ) ====== */
.champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  margin-block: var(--espace-3);
}
.champ label {
  font-weight: 600;
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-3);
  border: 2px solid var(--prune);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--prune);
}
.champ textarea {
  min-height: calc(var(--cible) * 2);
  resize: vertical;
}
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.aide-champ {
  font-size: var(--texte-s);
  color: var(--prune-clair);
}
.message-erreur {
  color: var(--danger);
  font-weight: 600;
  margin-block: var(--espace-2);
}

/* ============ États et actions (classes FORGERON) ============ */
.etat-vide {
  padding: var(--espace-5);
  border: 2px dashed var(--prune-clair);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--prune-clair);
  text-align: center;
}
.actions-carte,
.actions-principales,
.actions-confirmation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  align-items: center;
  margin-block: var(--espace-3);
}
/* Les liens stylés en bouton gardent une cible ≥ 44 px. */
.actions-carte .btn,
.actions-principales .btn,
.actions-confirmation .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  text-decoration: none;
}
/* Confirmation douce : une carte qui demande, jamais qui piège. */
.confirmation-douce {
  border: 2px solid var(--corail);
  background: var(--surface);
}
/* Progression du préparateur (« Étape X sur 5 »). */
.progression {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  align-items: center;
  font-weight: 700;
  color: var(--sarcelle-sombre);
}
.rendez-vous-gere {
  border-color: var(--sarcelle);
}
.rendez-vous-gere .actions-carte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}
.statut-gestion-rdv:empty {
  display: none;
}
.statut-succes-gestion-rdv {
  border-color: var(--sarcelle);
  background: color-mix(in srgb, var(--sarcelle-clair) 22%, var(--surface));
}
.statut-succes-gestion-rdv:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.autres-rendez-vous {
  margin-top: var(--espace-4);
  padding-top: var(--espace-3);
  border-top: 2px solid var(--bordure);
}
.autres-rendez-vous > summary {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  cursor: pointer;
  color: var(--prune);
  font-weight: 800;
}
.autres-rendez-vous > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* Ligne de badges (famille, état, fiction…) : enroulée, jamais coupée. */
.ligne-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  align-items: center;
  margin-block: var(--espace-2);
}

.zone-repere-revision-document:empty {
  display: none;
}
.repere-revision-document {
  margin-block-start: var(--espace-4);
  padding-block-start: var(--espace-4);
  border-block-start: 2px solid var(--bordure);
}
.repere-revision-document > :first-child {
  margin-block-start: 0;
}

/* ============ Dossier : visionneuse locale sans export ============ */
.visionneuse-document {
  margin-block-start: var(--espace-4);
  padding: var(--espace-4);
  border: 2px solid var(--sarcelle);
  border-radius: var(--rayon-l);
  background: var(--creme-sombre);
}
.visionneuse-document h4 {
  margin-block-start: 0;
  color: var(--prune);
}
.visionneuse-corps {
  min-width: 0;
  margin-block: var(--espace-3);
}
.visionneuse-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 65svh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--rayon-s);
  background: var(--surface);
}
.visionneuse-pdf {
  display: grid;
  gap: var(--espace-3);
  width: 100%;
  min-width: 0;
}
.visionneuse-pdf-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  background: var(--surface);
  box-shadow: var(--ombre-s);
}
.visionneuse-pdf-commandes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
}
.visionneuse-pdf-commandes .btn {
  flex: 1 1 8rem;
}
.visionneuse-pdf-statut {
  flex: 1 0 100%;
  text-align: center;
  font-weight: 800;
  color: var(--prune);
}
.visionneuse-pdf-details {
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  background: var(--surface);
}
.visionneuse-pdf-details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--sarcelle-sombre);
}
.visionneuse-pdf-texte {
  max-height: 35svh;
  overflow: auto;
  margin-block-end: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}
.visionneuse-texte {
  max-width: 100%;
  max-height: 60svh;
  overflow: auto;
  margin: 0;
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  background: var(--surface);
  color: var(--prune);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font: inherit;
}
/* Limite visible d'une miniature (borne honnête). */
.limite-visible {
  padding: var(--espace-3) var(--espace-4);
  border-left: 4px solid var(--corail);
  background: var(--surface);
  border-radius: var(--rayon-s);
  font-size: var(--texte-s);
}

/* ============ Langage simple : phrase volatile -> brouillon choisi ===== */
.ls-resultat {
  display: grid;
  gap: var(--espace-4);
  margin-block: var(--espace-5);
}
.ls-source {
  padding: var(--espace-3);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-m);
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ls-grille-termes,
.ls-liste-glossaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--espace-3);
}
.ls-terme {
  margin: 0;
}
.ls-reperes {
  display: grid;
  gap: var(--espace-2);
  padding: 0;
  list-style: none;
}
.ls-reperes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  overflow-wrap: anywhere;
}
.ls-questions {
  display: grid;
  gap: var(--espace-3);
  margin-block: var(--espace-4);
}
.ls-question {
  padding: var(--espace-3);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-m);
  background: var(--surface);
}
.ls-question p:first-child {
  font-weight: 700;
}
.ls-glossaire > summary {
  min-height: var(--cible);
  padding-block: var(--espace-2);
  cursor: pointer;
  font-weight: 700;
}
.ls-glossaire > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ls-email-meta {
  display: grid;
  gap: var(--espace-1);
  min-width: 0;
}
.ls-email-meta p {
  margin: 0;
  overflow-wrap: anywhere;
}
.ls-entetes-eml {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espace-1) var(--espace-3);
  margin-block: 0 var(--espace-3);
}
.ls-entetes-eml dt {
  font-weight: 800;
}
.ls-entetes-eml dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 28rem) {
  .ls-entetes-eml { grid-template-columns: 1fr; }
  .ls-entetes-eml dd { margin-block-end: var(--espace-2); }
}

/* ============ Accueil : boucle rendez-vous + grille de cartes ===== */
.accueil-maintenant {
  border: 2px solid var(--sarcelle);
  border-left-width: var(--espace-2);
  background: var(--surface);
}
.accueil-maintenant h3 {
  margin-block: var(--espace-3) var(--espace-2);
  color: var(--prune);
  font-size: var(--texte-l);
}
.accueil-maintenant .actions-carte .btn {
  width: 100%;
  max-width: 20rem;
}
.zone-rappels-accueil:empty {
  display: none;
}
.boucle-rdv .rdv-date {
  font-size: var(--texte-l);
  font-weight: 700;
  color: var(--prune);
}
.boucle-rdv .rdv-lieu {
  color: var(--prune-clair);
}
.prochains-pas {
  padding-left: var(--espace-6);
  display: grid;
  gap: var(--espace-2);
}
.prochains-pas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
}
.grille-cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--espace-3);
}
.carte-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: calc(var(--cible) * 2.5);
  padding: var(--espace-4) var(--espace-3);
  background: var(--surface);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-l);
  color: var(--prune);
  text-decoration: none;
  text-align: center;
  font-weight: 600;
}
.carte-accueil:hover {
  border-color: var(--sarcelle);
  background: var(--creme-sombre);
}
.carte-accueil .icone-carte {
  width: 40px;
  height: 40px;
  flex: none;
}
.carte-accueil-titre {
  line-height: 1.3;
}

/* ============ Bannière de mise à jour du service worker ==========
   Discrète, non bloquante : le rechargement est un geste choisi (D2). */
.banniere-maj {
  position: fixed;
  top: var(--espace-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-maj);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-3);
  max-width: calc(100vw - var(--espace-6));
  padding: var(--espace-2) var(--espace-4);
  background: var(--prune);
  color: var(--creme);
  border-radius: var(--rayon-plein);
  box-shadow: 0 4px 16px rgba(51, 32, 43, 0.35);
}
.banniere-maj .btn {
  min-height: var(--cible);
  color: var(--creme);
  border-color: var(--creme);
  background: transparent;
}
.banniere-maj .banniere-fermer {
  min-height: var(--cible);
  min-width: var(--cible);
  padding: var(--espace-2) var(--espace-3);
  background: transparent;
  color: var(--creme-sombre);
  border: 2px solid transparent;
  border-radius: var(--rayon-plein);
  cursor: pointer;
}
.banniere-maj .banniere-fermer:hover {
  border-color: var(--creme);
}
.banniere-maj :focus-visible {
  outline: var(--focus-ring-sur-prune);
}

/* ============ Bannière des rappels dus (reminderUI) ==============
   Non intrusive (role=status), mention honnête permanente. */
.banniere-rappels {
  background: var(--surface);
  border: 2px solid var(--sarcelle);
  border-radius: var(--rayon-l);
  padding: var(--espace-4);
  margin-block: var(--espace-4);
}
.banniere-rappels .mention-rappel-local {
  font-size: var(--texte-s);
  color: var(--sarcelle-sombre);
  font-weight: 600;
}
.banniere-rappels ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espace-2);
}
.banniere-rappels .rappel-du {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  padding: var(--espace-2) 0;
  border-bottom: 1px solid var(--bordure);
}
.banniere-rappels .rappel-actions {
  display: flex;
  gap: var(--espace-2);
}
.banniere-rappels button,
.banniere-rappels .banniere-fermer {
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-4);
  border: 2px solid var(--prune);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--prune);
  font-weight: 600;
  cursor: pointer;
}
.banniere-rappels button:hover {
  background: var(--creme-sombre);
}

/* ============ Persistance (résultat réel affiché) ============ */
.persistance .resultat-persistance {
  font-weight: 600;
  color: var(--sarcelle-sombre);
}
.persistance .resultat-persistance:empty {
  display: none;
}

/* ============ Questions fréquentes locales =====================
   Le filtre vit uniquement dans le DOM : aucune requête ni persistance. */
.faq-locale {
  min-width: 0;
  max-width: 100%;
  margin-block: var(--espace-5);
}
.articles-aide,
.articles-aide .carte,
.articles-aide .carte > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.retour-terrain-form,
.retour-terrain-form .champ,
.retour-terrain-form select,
.retour-terrain-form textarea {
  min-width: 0;
  max-width: 100%;
}
.guides-aide {
  margin-block: var(--espace-5);
}
.guides-aide > summary {
  min-height: var(--cible);
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}
.guides-aide[open] > summary {
  margin-bottom: var(--espace-3);
  border-bottom: 1px solid var(--bordure);
}
.appareil-partage {
  margin-block: var(--espace-5);
  border-color: var(--sarcelle);
}
.appareil-partage ol {
  padding-left: var(--espace-6);
}
.appareil-partage li {
  margin-block: var(--espace-2);
}
.session-accompagnement-outils {
  border-color: var(--sarcelle);
  background: color-mix(in srgb, var(--sarcelle-clair) 38%, var(--surface));
}
.session-accompagnement-outils fieldset {
  margin-block: var(--espace-4);
}
.question-discrete-outils {
  margin-block: var(--espace-5);
  padding-block: var(--espace-5);
  border-block: 2px solid var(--sarcelle);
}
.question-discrete-outils .btn {
  width: 100%;
}
.session-accompagnee {
  border: 3px solid var(--sarcelle);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sarcelle-clair) 55%, transparent);
}
.session-accompagnee:focus {
  outline: 3px solid var(--corail);
  outline-offset: 3px;
}
.session-accompagnee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
}
/* Pendant la lecture commune, l'écran reste focalisé et aucun contrôle fixe
   ne recouvre les décisions « modifier » / « terminer ». Le bouton Masquer
   reste disponible comme sortie immédiate. */
body.session-a-deux-active .badge-decouverte {
  position: static;
}
body.session-a-deux-active #nav-principale,
body.session-a-deux-active .pied-app {
  display: none;
}
body.session-a-deux-active .btn-masquer {
  bottom: calc(var(--espace-3) + env(safe-area-inset-bottom, 0px));
}
body.session-a-deux-active .session-accompagnee-actions {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: calc(var(--cible) + var(--espace-12) + env(safe-area-inset-bottom, 0px));
}
body.session-a-deux-active .session-accompagnee-actions .btn {
  width: 100%;
}

/* Une question à la fois : surface opaque, sans navigation ni donnée voisine.
   La couche reste sous Masquer (--z-session < --z-masquer). */
body.session-question-discrete-active {
  overflow: hidden;
}
body.session-question-discrete-active .entete-app,
body.session-question-discrete-active .badge-decouverte,
body.session-question-discrete-active #nav-principale,
body.session-question-discrete-active .pied-app {
  display: none;
}
.question-discrete {
  position: fixed;
  inset: 0;
  z-index: var(--z-session);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--espace-4);
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: calc(var(--espace-8) + env(safe-area-inset-top, 0px)) var(--espace-5)
    calc(var(--cible) + var(--espace-10) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: var(--prune);
  color: var(--creme);
  box-shadow: none;
}
.question-discrete > * {
  justify-self: center;
  max-width: min(100%, 46rem);
}
.question-discrete .question-discrete-badge {
  justify-self: start;
  color: var(--prune);
  background: var(--creme);
  border-color: var(--creme);
}
.question-discrete .question-discrete-position,
.question-discrete h2,
.question-discrete .question-discrete-limite {
  text-align: center;
}
.question-discrete .question-discrete-position {
  font-weight: 700;
}
.question-discrete .question-discrete-texte {
  align-self: center;
  max-width: 24ch;
  font-size: clamp(1.75rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.question-discrete .question-discrete-limite {
  font-size: var(--texte-s);
}
.question-discrete .question-discrete-navigation {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-3);
  width: 100%;
}
.question-discrete .question-discrete-navigation .btn {
  width: 100%;
}
.question-discrete .btn-secondaire {
  color: var(--creme);
  border-color: var(--creme);
}
.question-discrete .btn-secondaire:hover {
  color: var(--prune);
  background: var(--creme);
}
.question-discrete:focus,
.question-discrete:focus-visible,
.question-discrete .question-discrete-texte:focus,
.question-discrete .question-discrete-texte:focus-visible {
  outline: var(--focus-ring-sur-prune);
  outline-offset: var(--focus-ring-offset);
}

@media (min-width: 42rem) {
  .question-discrete .question-discrete-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sur un écran large la navigation devient une barre haute : elle ne coupe
   plus les cartes comme une barre mobile géante. Le DOM et l'ordre clavier
   restent identiques. */
@media (min-width: 64rem) {
  body.session-ouverte #nav-principale {
    top: calc(var(--cible) + var(--espace-6));
    bottom: auto;
    border-top: 0;
    border-bottom: 2px solid var(--bordure);
    padding-bottom: 0;
  }
  body.session-ouverte #nav-principale .nav-liste {
    max-width: 64rem;
    margin-inline: auto;
    overflow: visible;
  }
  body.session-ouverte #nav-plus {
    top: calc(100% + var(--espace-1));
    bottom: auto;
  }
  body.session-ouverte #app {
    padding-top: calc(var(--cible) + var(--espace-10));
    padding-bottom: var(--espace-12);
  }
  body.session-ouverte .badge-decouverte {
    position: relative;
    top: auto;
    margin-top: calc(var(--cible) + var(--espace-6));
  }
  body.session-ouverte .badge-decouverte + #app {
    padding-top: var(--espace-6);
  }
  body.session-ouverte .btn-masquer {
    bottom: var(--espace-4);
  }
  body.session-ouverte .pied-app {
    padding-bottom: var(--espace-8);
  }
}
.limite-appareil-partage {
  padding: var(--espace-3);
  border-left: 4px solid var(--corail);
  background: var(--creme-sombre);
  font-weight: 600;
}
.faq-intro,
.faq-compteur {
  color: var(--prune-clair);
}
.faq-compteur {
  font-size: var(--texte-s);
  font-weight: 600;
}
.faq-outils {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--espace-3);
}
.faq-liste {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: var(--espace-2);
  margin-block: var(--espace-3);
}
.faq-item {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-m);
  background: var(--surface);
  overflow: clip;
}
.faq-item summary {
  min-width: 0;
  max-width: 100%;
  min-height: var(--cible);
  display: flex;
  align-items: center;
  padding: var(--espace-3);
  color: var(--prune);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.faq-item[open] summary {
  background: var(--creme-sombre);
  border-bottom: 1px solid var(--bordure);
}
.faq-reponse,
.faq-avertissement,
.faq-meta {
  min-width: 0;
  max-width: calc(100% - var(--espace-6));
  margin-inline: var(--espace-3);
  overflow-wrap: anywhere;
}
.faq-reponse {
  margin-block: var(--espace-3);
}
.faq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  margin-block: var(--espace-3);
  font-size: var(--texte-s);
}
.faq-badge {
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-plein);
  background: var(--sarcelle-clair);
  color: var(--prune-sombre);
  font-weight: 700;
}
.faq-badge-alerte {
  background: var(--corail-clair);
}
.faq-date {
  color: var(--prune-clair);
}
.faq-source {
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.faq-avertissement {
  padding: var(--espace-2) var(--espace-3);
  border-left: 4px solid var(--corail);
  color: var(--prune-clair);
  font-size: var(--texte-s);
}
@media (max-width: 38rem) {
  .faq-outils { grid-template-columns: 1fr; }
  .faq-source { width: 100%; margin-left: 0; }
}

/* ============ Projet : banque d'idées publique et locale ============ */
.banque-idees-projets,
.banque-idees-outils,
.banque-idees-liste,
.piste-projet {
  min-width: 0;
  max-width: 100%;
}

.banque-idees-outils {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--espace-3);
  margin-block: var(--espace-4);
}

.banque-idees-outils .champ {
  min-width: 0;
  margin: 0;
}

.banque-idees-compteur {
  color: var(--prune-clair);
  font-size: var(--texte-s);
  font-weight: 700;
}

.banque-idees-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--espace-3);
}

.piste-projet {
  padding: var(--espace-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-m);
  background: var(--surface);
  overflow-wrap: anywhere;
}

.piste-projet > * {
  max-width: 100%;
}

.piste-projet h3 {
  margin-block: var(--espace-2);
}

.piste-projet-idee,
.piste-projet-premier-pas {
  font-weight: 600;
}

.piste-projet .actions-carte {
  margin-block-end: 0;
}

.piste-projet .actions-carte .btn {
  width: 100%;
  white-space: normal;
}

@media (max-width: 38rem) {
  .banque-idees-outils,
  .banque-idees-liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ Zone dangereuse (« Tout effacer ») ============ */
.zone-danger {
  border: 2px solid var(--danger);
}

/* ============ Écran neutre du masquage rapide ===================
   Volontairement banal : aucun vocabulaire révélateur (M3). */
.ecran-neutre-titre {
  color: var(--prune);
}
.ecran-neutre-liste {
  padding-left: var(--espace-6);
  color: var(--prune);
}
.ecran-neutre-liste li {
  margin-block: var(--espace-2);
}
.ecran-neutre-actions {
  margin-top: var(--espace-5);
}
.lien-retour {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
}

/* ============ Voile d'arrière-plan (menaces M2/M3) ================
   Posé dès `visibilitychange → hidden` : le multitâche et les captures
   système ne montrent plus que « Notes personnelles ». La session n'est
   pas détruite : retour dans la grâce → le voile se retire ; au-delà,
   le verrouillage automatique existant prend le relais. */
.voile-arriere-plan {
  position: fixed;
  inset: 0;
  z-index: var(--z-voile);
  background-color: var(--fond);
  padding: var(--espace-6) var(--espace-4);
  overflow: auto;
}

/* ============ Message sans JavaScript ============ */
.message-noscript {
  margin: var(--espace-6) var(--espace-4);
  padding: var(--espace-5);
  background: var(--surface);
  border: 2px solid var(--corail);
  border-radius: var(--rayon-l);
  font-weight: 600;
}
.passage-relais,
.import-retour-relais,
.apercu-relais-demande,
.apercu-retour-relais {
  min-width: 0;
}

.passage-relais input[type="file"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.875rem;
}

.passage-relais pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============ Mon cercle / Salle d'équipe — démonstration locale =====
   Une surface mobile d'abord, issue de la coupole IDEAING déjà embarquée.
   Elle ne représente aucun compte : les cartes sont des repères fictifs. */
.cercle-local-demo,
.cercle-local-demo * {
  box-sizing: border-box;
}

.cercle-local-demo {
  min-width: 0;
  max-width: 100%;
  border: 3px solid var(--sarcelle);
  background:
    radial-gradient(circle at 100% 0,
      color-mix(in srgb, var(--or-clair) 55%, transparent) 0 7rem,
      transparent 7.1rem),
    color-mix(in srgb, var(--sarcelle-clair) 24%, var(--surface));
  overflow: hidden;
}

.cercle-demo-entete {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--espace-3);
}

.coupole-cercle-local {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}

.cercle-demo-entete > div {
  min-width: 0;
}

.cercle-demo-entete h2 {
  margin: 0;
  color: var(--prune);
  overflow-wrap: anywhere;
}

.cercle-demo-badge,
.cercle-demo-ecran-seul {
  display: inline-block;
  margin-block: var(--espace-2) 0;
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  background: var(--prune);
  color: var(--creme);
  font-size: var(--texte-s);
  font-weight: 800;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
}

.cercle-demo-verite {
  margin-block: var(--espace-4);
  padding: var(--espace-3);
  border: 2px solid var(--corail);
  border-radius: var(--rayon-m);
  background: var(--surface);
}

.cercle-demo-verite p {
  margin-block: 0 var(--espace-2);
  overflow-wrap: anywhere;
}

.cercle-demo-verite p:last-child {
  margin-bottom: 0;
  font-weight: 800;
}

.cercle-demo-onglets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-1);
  min-width: 0;
  padding: var(--espace-1);
  border: 2px solid var(--prune);
  border-radius: var(--rayon-l);
  background: var(--prune);
}

.cercle-demo-onglet {
  min-width: 0;
  min-height: var(--cible);
  padding: var(--espace-2);
  border: 2px solid transparent;
  border-radius: var(--rayon-m);
  background: transparent;
  color: var(--creme);
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.cercle-demo-onglet[aria-selected="true"] {
  border-color: var(--corail-clair);
  background: var(--creme);
  color: var(--prune);
}

.cercle-demo-onglet:focus-visible {
  outline: var(--focus-ring-sur-prune);
  outline-offset: 2px;
}

.cercle-demo-panneau {
  min-width: 0;
  max-width: 100%;
  padding-top: var(--espace-4);
  overflow-wrap: anywhere;
}

.cercle-demo-panneau:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.cercle-demo-intro {
  margin-top: 0;
}

.cercle-demo-personnes,
.cercle-demo-messages {
  display: grid;
  min-width: 0;
  gap: var(--espace-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cercle-demo-personne {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--espace-3);
  min-width: 0;
  padding: var(--espace-3);
  border: 2px solid var(--bordure);
  border-left: 6px solid var(--sarcelle);
  border-radius: var(--rayon-l);
  background: var(--surface);
}

.cercle-demo-personne:nth-child(2) {
  border-left-color: var(--corail);
}

.cercle-demo-personne:nth-child(3) {
  border-left-color: var(--or);
}

.coupole-personne-cercle {
  width: 56px;
  height: 56px;
}

.cercle-demo-identite {
  min-width: 0;
}

.cercle-demo-identite h3,
.cercle-demo-identite p {
  margin: 0;
  overflow-wrap: anywhere;
}

.cercle-demo-repere {
  color: var(--sarcelle-sombre);
  font-weight: 800;
}

.cercle-demo-role {
  color: var(--prune-clair);
  font-size: var(--texte-s);
}

.cercle-demo-messages {
  margin-block: var(--espace-4);
}

.cercle-demo-message {
  min-width: 0;
  max-width: 92%;
  padding: var(--espace-3);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-l) var(--rayon-l) var(--rayon-l) var(--rayon-s);
  background: var(--surface);
}

.cercle-demo-message:nth-child(even) {
  justify-self: end;
  border-color: var(--sarcelle);
  border-radius: var(--rayon-l) var(--rayon-l) var(--rayon-s) var(--rayon-l);
  background: color-mix(in srgb, var(--sarcelle-clair) 32%, var(--surface));
}

.cercle-demo-message.message-personne {
  justify-self: end;
  border-color: var(--corail);
  background: color-mix(in srgb, var(--corail-pale) 55%, var(--surface));
}

.cercle-demo-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cercle-demo-message-auteur {
  margin-bottom: var(--espace-1) !important;
  color: var(--prune);
  font-size: var(--texte-s);
  font-weight: 800;
}

.cercle-demo-composer {
  display: grid;
  min-width: 0;
  gap: var(--espace-2);
  padding: var(--espace-4);
  border: 2px solid var(--prune);
  border-radius: var(--rayon-l);
  background: var(--surface);
}

.cercle-demo-composer label {
  font-weight: 800;
}

.cercle-demo-composer textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(var(--cible) * 2);
  resize: vertical;
}

.cercle-demo-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}

.cercle-demo-mention {
  flex: 1 1 7rem;
}

.cercle-demo-statut {
  min-height: 1.5em;
  margin: 0;
  color: var(--sarcelle-sombre);
  font-weight: 700;
}

.cercle-demo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.cercle-demo-actions .btn {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (min-width: 38rem) {
  .cercle-demo-personnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cercle-demo-personne {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .cercle-demo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 22rem) {
  .cercle-demo-entete {
    align-items: flex-start;
  }

  .coupole-cercle-local {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .cercle-demo-personne {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .coupole-personne-cercle {
    width: 44px;
    height: 44px;
  }
}

/* ============ Mon mois : agrégats simples, sans tableau large ===== */
.grille-budget-mensuel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 var(--espace-4);
}

.liste-totaux-budget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espace-2) var(--espace-4);
  margin: 0;
}

.liste-totaux-budget dt {
  font-weight: 700;
}

.liste-totaux-budget dd {
  margin: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 24rem) {
  .liste-totaux-budget {
    grid-template-columns: minmax(0, 1fr);
  }
  .liste-totaux-budget dd {
    margin-bottom: var(--espace-2);
    text-align: start;
  }
}

/* ============ Tutoriel local en six ecrans ===================== */
.tutoriel-dialogue {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: calc(100% - (var(--espace-4) * 2));
  max-width: 42rem;
  max-height: calc(100dvh - (var(--espace-4) * 2));
  margin: auto;
  padding: 0;
  border: 2px solid var(--prune);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--prune);
  overflow: auto;
  overflow-x: hidden;
  z-index: var(--z-dialogue);
}

.tutoriel-dialogue::backdrop {
  background: color-mix(in srgb, var(--prune-sombre) 72%, transparent);
}

.tutoriel-coque,
.tutoriel-entete,
.tutoriel-contenu,
.tutoriel-complement,
.tutoriel-actions,
.tutoriel-langues {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.tutoriel-coque {
  padding: var(--espace-5);
}

.tutoriel-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2) var(--espace-4);
  padding-bottom: var(--espace-3);
  border-bottom: 1px solid var(--bordure);
}

.tutoriel-progression {
  margin: 0;
  color: var(--prune-clair);
  font-size: var(--texte-s);
  font-weight: 700;
}

.tutoriel-masquer {
  min-height: var(--cible);
  min-width: var(--cible);
  white-space: normal;
}

.tutoriel-contenu {
  padding-block: var(--espace-4);
  overflow-wrap: anywhere;
}

.tutoriel-illustration {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--espace-4);
}

.tutoriel-contenu h2 {
  margin-block: 0 var(--espace-3);
}

.tutoriel-langues {
  display: grid;
  gap: var(--espace-2);
  margin-block: var(--espace-5);
}

.tutoriel-langues label {
  font-weight: 700;
}

.tutoriel-langues select {
  width: 100%;
  min-width: 0;
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-3);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--prune);
  font: inherit;
}

.tutoriel-langues select:focus-visible,
.tutoriel-lien-officiel:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.tutoriel-lien-officiel {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: var(--cible);
  color: var(--sarcelle-sombre);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tutoriel-avis-traduction {
  margin-block: var(--espace-3);
  color: var(--prune-clair);
  font-size: var(--texte-s);
}

.tutoriel-sortie-externe {
  margin-block: var(--espace-2) 0;
  color: var(--prune-clair);
  font-size: var(--texte-s);
}

.tutoriel-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--espace-2);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
}

.tutoriel-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: var(--cible);
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 22rem) {
  .tutoriel-coque {
    padding: var(--espace-3);
  }

  .tutoriel-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le sens du texte saisi suit son contenu, y compris dans le relais. */
#vue-route input:is([type="text"], [type="search"]),
#vue-route textarea,
.contenu-relais input:is([type="text"], [type="search"]),
.contenu-relais textarea {
  direction: auto;
  unicode-bidi: plaintext;
}