/* Enveloppe web (PF-029) et console (PF-035) : habillage à la charte Archie « Manifeste », version 2 (PF-063, 21/10/2026).
   - Version 2 : angles légèrement arrondis (rayon.champ, rayon.carte, rayon.bloc), ombres douces en deux couches
     (ombre.douce, ombre.haute), pages plus aérées, rubriques posées en cartes plutôt que sous des filets d'encre.
   - Jetons sémantiques de @archie/theme seulement (U-2, K-21) : ni couleur, ni police, ni longueur, ni ressource propres.
   - Couleurs d'un cabinet : par la surcharge du noyau de @archie/theme (PF-110, PF-117) ; cette feuille ne change pas.
   - Les éléments nus d'une page (section, h2, form, table, dl, role="status"…) sont habillés d'office : un nouvel écran
     du socle est à la charte sans classe à ajouter. */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-size: var(--typo-corps-taille);
  font-weight: var(--typo-texte-graisse);
  line-height: var(--typo-corps-interligne);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
::selection {
  background: var(--couleur-marque-doux);
  color: var(--couleur-texte);
}

/* ————— Marque et icônes ————— */

.enveloppe-marque {
  display: flex;
  align-items: center;
  gap: calc(var(--espace-1) * 1.25);
  margin: 0;
  font-family: var(--police-titre);
  font-style: var(--typo-titre-style);
  font-weight: var(--typo-titre-graisse);
  font-size: var(--typo-chapeau-taille);
  line-height: var(--typo-titre-3-interligne);
}
/* Logo d'Archie (charte § 2, décision d'Esteban du 21/10/2026) : une arche au trait, couleur du texte des boutons, sur un
   carré de 30 px de la couleur des boutons (paire garantie AA) ; le logo du cabinet prend sa place s'il existe (PF-110). */
.enveloppe-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--icone-taille) * 1.5);
  height: calc(var(--icone-taille) * 1.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
  box-shadow: var(--ombre-douce);
}
.enveloppe-logo-archie {
  width: 78%;
  height: 78%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Logo d'un cabinet (PF-110, charte § 2 ; recette du 22/10) : une hauteur COMMUNE à tous les cabinets (48 px), proportions
   gardées (object-fit: contain, jamais étiré ni écrasé), calé à gauche ; il ne dépasse jamais la largeur de son emplacement. */
.enveloppe-marque-cabinet {
  min-height: var(--espace-6);
}
.enveloppe-logo-cabinet {
  flex: none;
  display: block;
  width: auto;
  height: var(--espace-6);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.enveloppe-ico {
  flex: none;
  width: var(--icone-taille);
  height: var(--icone-taille);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icone-trait);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.enveloppe-evitement {
  position: absolute;
  left: var(--espace-2);
  top: calc(var(--espace-1) * -8);
  z-index: 20;
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-texte);
  color: var(--couleur-fond);
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-evitement:focus {
  top: var(--espace-2);
}

/* ————— Menu (charte § 7 : inversé en clair, surface en sombre) ————— */

.enveloppe-menu {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  width: var(--mise-en-page-menu-largeur);
  height: 100vh;
  overflow-y: auto;
  padding: var(--espace-3) var(--espace-2);
  background: var(--couleur-nav-fond);
  color: var(--couleur-nav-texte);
}
.enveloppe-menu .enveloppe-marque {
  padding: 0 var(--espace-1) var(--espace-3);
  border-bottom: var(--filet-fin) solid var(--couleur-nav-bord);
  color: var(--couleur-nav-texte-fort);
}
.enveloppe-menu ul {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.enveloppe-menu a {
  display: flex;
  align-items: center;
  gap: calc(var(--espace-1) * 1.5);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-champ);
  color: var(--couleur-nav-texte);
  font-size: var(--typo-corps-taille);
  text-decoration: none;
  transition: background-color var(--mouvement-rapide), color var(--mouvement-rapide);
}
.enveloppe-menu a:hover {
  background: var(--couleur-nav-survol);
  color: var(--couleur-nav-texte-fort);
  /* Repère de survol qui ne dépend pas d'un fond : thématique « Classique », où le fond ne change pas (R130-1). */
  text-decoration: underline;
  text-decoration-thickness: var(--filet-fin);
  text-underline-offset: var(--focus-decalage);
}
.enveloppe-menu a[aria-current="page"] {
  background: var(--couleur-nav-actif-fond);
  color: var(--couleur-nav-actif-texte);
  box-shadow: inset var(--filet-rubrique) 0 0 var(--couleur-marque);
  font-weight: var(--typo-fort-graisse);
}
/* Groupe « Le cabinet » et pied (Ma boîte, outils à venir, déconnexion) : un panneau ordinaire sur ordinateur, ouvert
   par le bouton « Menu » sur téléphone (attribut popover). Les règles qui suivent annulent l'allure par défaut d'un popover. */
.enveloppe-menu .enveloppe-menu-bouton {
  display: none;
}
.enveloppe-menu-plus {
  position: static;
  inset: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
}
.enveloppe-menu-groupe {
  margin: var(--espace-2) 0 calc(var(--espace-1) * 0.5);
  padding: 0 calc(var(--espace-1) * 1.5);
  font-family: var(--police-mono);
  font-size: var(--typo-petit-taille);
  letter-spacing: var(--typo-rubrique-interlettrage);
  text-transform: uppercase;
  opacity: 0.75;
}
.enveloppe-menu-pied {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
  margin-top: auto;
  padding-top: var(--espace-2);
}
.enveloppe-menu-pied > p {
  margin: 0;
  padding: 0 var(--espace-1);
  font-size: var(--typo-petit-taille);
  overflow-wrap: anywhere;
}
.enveloppe-menu form {
  margin: 0;
  padding-top: var(--espace-2);
  border-top: var(--filet-fin) solid var(--couleur-nav-bord);
}
.enveloppe-menu button {
  width: 100%;
  justify-content: flex-start;
  padding: 0 calc(var(--espace-1) * 1.5);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--couleur-nav-texte);
  font-weight: var(--typo-texte-graisse);
}
.enveloppe-menu button:hover {
  background: var(--couleur-nav-survol);
  border-color: transparent;
  box-shadow: none;
  color: var(--couleur-nav-texte-fort);
  transform: none;
}

/* ————— Page : grands blancs, titre en italique, rubriques en cartes ————— */

/* Grille commune (recette du 22/10) : le contenu est CENTRÉ dans la place laissée par le menu, sur 1160 px au plus ; il ne
   reste plus collé à gauche d'un grand écran. */
.enveloppe-page {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--page-largeur);
  margin-inline: auto;
  padding: var(--page-marge-haut) clamp(var(--page-marge-cote-min), 4vw, var(--page-marge-cote)) var(--espace-8);
  counter-reset: rubrique;
}
.enveloppe-page-ecran {
  display: flex;
  max-width: none;
  padding: 0;
}
.enveloppe-cadre {
  flex: 1;
  min-height: 100vh;
  border: 0;
  background: var(--couleur-fond);
}
/* Surtitre : en pilule douce, au-dessus du titre. */
.enveloppe-surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  margin: 0 0 var(--espace-2);
  padding: calc(var(--espace-1) * 0.5) calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-family: var(--typo-surtitre-police);
  font-size: var(--typo-surtitre-taille);
  font-weight: var(--typo-surtitre-graisse);
  letter-spacing: var(--typo-surtitre-interlettrage);
  line-height: var(--typo-surtitre-interligne);
  text-transform: uppercase;
}
h1 {
  margin: 0 0 var(--espace-2);
  font-family: var(--typo-titre-1-police);
  font-style: var(--typo-titre-style);
  font-weight: var(--typo-titre-1-graisse);
  /* Titre de page unique (ADR-PF-089) : de 28 px (téléphone) à 40 px (grand écran), jetons du gabarit. */
  font-size: clamp(var(--page-titre-taille-min), 1.6vw + var(--espace-2), var(--page-titre-taille));
  line-height: var(--typo-titre-1-interligne);
  letter-spacing: var(--typo-titre-1-interlettrage);
  text-wrap: balance;
}
/* Le chapeau : la première phrase sous le titre. */
h1 + p {
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.62);
  margin-bottom: var(--espace-5);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-chapeau-taille);
  line-height: var(--typo-chapeau-interligne);
}
/* Rubriques : numéro dans une pastille douce, titre en italique ; plus de filet d'encre. */
h2 {
  display: flex;
  align-items: center;
  gap: calc(var(--espace-1) * 1.5);
  margin: var(--espace-6) 0 var(--espace-2);
  font-family: var(--typo-titre-3-police);
  font-style: var(--typo-titre-style);
  font-weight: var(--typo-titre-3-graisse);
  font-size: calc(var(--typo-titre-3-taille) * 1.18);
  line-height: var(--typo-titre-3-interligne);
  text-wrap: balance;
}
h2::before {
  counter-increment: rubrique;
  content: counter(rubrique, decimal-leading-zero);
  flex: none;
  padding: calc(var(--espace-1) * 0.25) var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-family: var(--typo-rubrique-police);
  font-style: normal;
  font-weight: var(--typo-fort-graisse);
  font-size: var(--typo-rubrique-taille);
  letter-spacing: var(--typo-rubrique-interlettrage);
  line-height: var(--typo-surtitre-interligne);
}
h3 {
  margin: var(--espace-3) 0 var(--espace-1);
  font-family: var(--police-titre);
  font-style: var(--typo-titre-style);
  font-weight: var(--typo-titre-graisse);
  font-size: calc(var(--typo-titre-3-taille) * 0.86);
}
p {
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.7);
  margin: 0 0 var(--espace-2);
}
a {
  color: var(--couleur-marque-texte);
  text-decoration-thickness: var(--filet-fin);
  text-underline-offset: var(--focus-decalage);
  transition: color var(--mouvement-rapide);
}
a:hover {
  text-decoration-thickness: calc(var(--filet-fin) * 2);
}
code {
  padding: var(--filet-fin) calc(var(--espace-1) * 0.75);
  border-radius: calc(var(--rayon-champ) / 2);
  background: var(--couleur-surface-2);
  font-family: var(--police-mono);
  font-size: var(--typo-petit-taille);
  overflow-wrap: anywhere;
}
.enveloppe-garantie {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-1);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  line-height: var(--typo-petit-interligne);
}
.enveloppe-garantie .enveloppe-ico {
  color: var(--couleur-succes);
}

/* Cartes : une rubrique, un formulaire, un tableau ou une liste de définitions posés sur le papier. */
.enveloppe-page section:not(.enveloppe-decision),
.enveloppe-page > form:has(input:not([type="hidden"]), select),
.enveloppe-page > dl {
  margin: 0 0 var(--espace-3);
  padding: var(--espace-4);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.enveloppe-page section > h2:first-child {
  margin-top: 0;
}
.enveloppe-page section > :last-child,
.enveloppe-page section > form:last-child {
  margin-bottom: 0;
}

/* ————— Boutons (charte § 7) ————— */

button,
.enveloppe-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--espace-1) * 2.75);
  border: var(--filet-fin) solid var(--couleur-bouton-fond);
  border-radius: var(--rayon-champ);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
  box-shadow: var(--ombre-douce);
  font: inherit;
  font-size: var(--typo-corps-taille);
  font-weight: var(--typo-fort-graisse);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mouvement-rapide), color var(--mouvement-rapide), border-color var(--mouvement-rapide),
    box-shadow var(--mouvement-elevation), transform var(--mouvement-elevation);
}
/* Survol : le bouton se soulève ; ses couleurs restent celles que la dérivation garantit AA. */
button:hover,
.enveloppe-action:hover {
  box-shadow: var(--ombre-haute);
  transform: translateY(calc(var(--filet-fin) * -1));
}
button:active,
.enveloppe-action:active {
  box-shadow: var(--ombre-douce);
  transform: none;
}
.enveloppe-action .enveloppe-ico {
  transition: transform var(--mouvement-elevation);
}
.enveloppe-action:hover .enveloppe-ico {
  transform: translateX(var(--focus-decalage));
}
/* Secondaire : les actions de ligne (tableaux, listes) et celles qui défont. */
td button,
ul li button,
.enveloppe-secondaire {
  background: var(--couleur-surface);
  border-color: var(--couleur-bord-fort);
  color: var(--couleur-texte);
  box-shadow: none;
}
td button:hover,
ul li button:hover,
.enveloppe-secondaire:hover {
  background: var(--couleur-surface-2);
  border-color: var(--couleur-texte-doux);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}

/* ————— Formulaires ————— */

.enveloppe-page form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espace-1) var(--espace-2);
  margin: 0 0 var(--espace-3);
}
.enveloppe-page form > label,
.enveloppe-page form > fieldset,
.enveloppe-page form > p {
  flex: 1 0 100%;
}
.enveloppe-page form > label {
  margin: var(--espace-1) 0 calc(var(--espace-1) * -0.5);
}
.enveloppe-page form > label:first-child {
  margin-top: 0;
}
.enveloppe-page form > p {
  max-width: none;
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-page form > input,
.enveloppe-page form > select {
  flex: 1 1 calc(var(--espace-1) * 32);
}
label {
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="color"])),
select {
  width: 100%;
  max-width: calc(var(--espace-1) * 56);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--espace-1) * 1.5);
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font: inherit;
  transition: border-color var(--mouvement-rapide), background-color var(--mouvement-rapide);
}
/* Dépôt d'un fichier (logo, icône, police) : une zone de dépôt arrondie aux pointillés doux et un bouton à la couleur douce de
   la marque, à la place de la petite case grise du navigateur (retour d'Esteban du 22/10/2026). */
input[type="file"] {
  width: 100%;
  max-width: calc(var(--espace-1) * 60);
  padding: var(--espace-1);
  border: calc(var(--filet-fin) * 2) dashed var(--couleur-bord-fort);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  color: var(--couleur-texte-doux);
  font: inherit;
  font-size: var(--typo-petit-taille);
  cursor: pointer;
  transition: border-color var(--mouvement-rapide), background-color var(--mouvement-rapide);
}
input[type="file"]:hover {
  border-color: var(--couleur-marque);
  background: var(--couleur-marque-doux);
}
input[type="file"]::file-selector-button {
  margin-right: var(--espace-2);
  padding: var(--espace-1) var(--espace-2);
  border: 0;
  border-radius: var(--rayon-champ);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font: inherit;
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
}
/* Zones de saisie multilignes : mêmes angles doux, même cadre que les champs (refonte du 22/10/2026 : plus d'angle vif). */
textarea {
  width: 100%;
  max-width: calc(var(--espace-1) * 90);
  min-height: calc(var(--espace-1) * 16);
  padding: calc(var(--espace-1) * 1.25) calc(var(--espace-1) * 1.5);
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font: inherit;
  line-height: var(--typo-corps-interligne);
  resize: vertical;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--couleur-texte-doux);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--couleur-focus);
  background: var(--couleur-surface);
}
input[type="checkbox"] {
  width: var(--icone-taille);
  height: var(--icone-taille);
  margin: 0;
  accent-color: var(--couleur-marque-texte);
}
/* Choix d'une couleur (habillage, console) : la pastille reste visible, à la taille d'une cible tactile. */
input[type="color"] {
  width: var(--espace-8);
  height: var(--cible-tactile);
  padding: calc(var(--espace-1) * 0.5);
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface);
}
/* Code à usage unique : grand, espacé, en chasse fixe. */
.enveloppe-code {
  max-width: calc(var(--espace-1) * 36);
  font-family: var(--police-mono);
  font-size: var(--typo-titre-3-taille);
  letter-spacing: var(--typo-surtitre-interlettrage);
}
fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin: var(--espace-1) 0 0;
  padding: var(--espace-2);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-champ);
}
legend {
  padding: 0 calc(var(--espace-1) * 0.75);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
/* Choix (charte § 7) : pilule à bord fin ; une fois coché, teinte de marque et bord net (jamais la couleur seule). */
fieldset label {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2) 0 calc(var(--espace-1) * 1.5);
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface);
  font-weight: var(--typo-texte-graisse);
  cursor: pointer;
  transition: background-color var(--mouvement-rapide), border-color var(--mouvement-rapide);
}
fieldset label:hover {
  border-color: var(--couleur-texte-doux);
}
fieldset label:has(input:checked) {
  background: var(--couleur-marque-doux);
  border-color: var(--couleur-marque-texte);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
}
fieldset label:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
fieldset label:has(input:checked) code {
  background: transparent;
  color: inherit;
}
fieldset > p {
  margin: 0;
}
td form,
li form {
  display: inline-flex;
  margin: 0;
}

/* ————— Tableaux, définitions, listes ————— */

.enveloppe-page table {
  width: 100%;
  margin: 0 0 var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
th {
  padding: calc(var(--espace-1) * 1.5) var(--espace-2);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-doux);
  font-family: var(--typo-surtitre-police);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-surtitre-graisse);
  letter-spacing: var(--typo-rubrique-interlettrage);
  text-align: left;
  text-transform: uppercase;
}
td {
  padding: calc(var(--espace-1) * 1.5) var(--espace-2);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
  vertical-align: middle;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr {
  transition: background-color var(--mouvement-rapide);
}
tbody tr:hover {
  background: var(--couleur-fond);
}
td a {
  font-weight: var(--typo-fort-graisse);
}
td code {
  white-space: nowrap;
}
dl {
  display: grid;
  grid-template-columns: minmax(calc(var(--espace-1) * 20), max-content) 1fr;
  margin: 0 0 var(--espace-3);
}
dt,
dd {
  margin: 0;
  padding: calc(var(--espace-1) * 1.25) var(--espace-3) calc(var(--espace-1) * 1.25) 0;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
dt:last-of-type,
dd:last-of-type {
  border-bottom: 0;
}
dt {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-page ul:not([class]) {
  margin: 0 0 var(--espace-3);
  padding: 0;
  list-style: none;
}
.enveloppe-page ul:not([class]) > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) calc(var(--espace-1) * 1.5);
  padding: calc(var(--espace-1) * 1.25) 0;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.enveloppe-page ul:not([class]) > li:last-child {
  border-bottom: 0;
}

/* ————— Messages, pastilles, décision ————— */

[role="status"],
[role="alert"] {
  display: block;
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.75);
  padding: calc(var(--espace-1) * 1.5) var(--espace-2) calc(var(--espace-1) * 1.5) var(--espace-3);
  border-radius: var(--rayon-champ);
  background: var(--couleur-succes-doux);
  box-shadow: inset calc(var(--filet-fin) * 4) 0 0 var(--couleur-succes);
  color: var(--couleur-texte);
  font-weight: var(--typo-fort-graisse);
}
[role="alert"] {
  background: var(--couleur-erreur-doux);
  box-shadow: inset calc(var(--filet-fin) * 4) 0 0 var(--couleur-erreur);
}
.enveloppe-pastille {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--espace-1) * 0.75);
  padding: calc(var(--espace-1) * 0.375) calc(var(--espace-1) * 1.25);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
  line-height: var(--typo-surtitre-interligne);
  white-space: nowrap;
}
/* Un point devant le mot : repère visuel, jamais seul porteur de sens. */
.enveloppe-pastille::before {
  content: "";
  width: calc(var(--espace-1) * 0.75);
  height: calc(var(--espace-1) * 0.75);
  border-radius: var(--rayon-compteur);
  background: currentColor;
}
.enveloppe-pastille[data-ton="succes"] {
  background: var(--couleur-succes-doux);
  color: var(--couleur-succes);
}
.enveloppe-pastille[data-ton="alerte"] {
  background: var(--couleur-alerte-doux);
  color: var(--couleur-alerte);
}
.enveloppe-pastille[data-ton="erreur"] {
  background: var(--couleur-erreur-doux);
  color: var(--couleur-erreur);
}
.enveloppe-pastille[data-ton="marque"] {
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
/* Bloc de décision (charte § 3) : la seule couleur franche de l'écran ; boutons inversés. */
.enveloppe-decision {
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.75);
  margin: var(--espace-4) 0;
  padding: var(--espace-5);
  border-radius: var(--rayon-bloc);
  background: var(--couleur-bloc-fond);
  color: var(--couleur-bloc-texte);
  box-shadow: var(--ombre-haute);
}
.enveloppe-decision p {
  font-size: var(--typo-chapeau-taille);
}
.enveloppe-decision p:last-child {
  margin-bottom: 0;
}
.enveloppe-decision .enveloppe-garantie,
.enveloppe-decision .enveloppe-garantie .enveloppe-ico {
  color: var(--couleur-bloc-texte);
  font-size: var(--typo-corps-taille);
}
.enveloppe-decision .enveloppe-action {
  background: var(--couleur-bloc-texte);
  border-color: var(--couleur-bloc-texte);
  color: var(--couleur-bloc-fond);
}
.enveloppe-decision :focus-visible {
  outline-color: var(--couleur-fond);
}

/* ————— Accueil : tuiles et grands chiffres ————— */

.enveloppe-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 30), 1fr));
  gap: var(--espace-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.enveloppe-tuile {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 1.5);
  height: 100%;
  min-height: calc(var(--espace-1) * 24);
  padding: var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
  color: var(--couleur-texte);
  text-decoration: none;
  transition: box-shadow var(--mouvement-elevation), transform var(--mouvement-elevation), border-color var(--mouvement-rapide);
}
/* L'icône posée sur une teinte douce, arrondie comme un champ (charte § 6, version 2). */
.enveloppe-tuile > .enveloppe-ico {
  width: calc(var(--icone-taille) * 2.2);
  height: calc(var(--icone-taille) * 2.2);
  padding: calc(var(--espace-1) * 1.25);
  border-radius: var(--rayon-champ);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.enveloppe-tuile-titre {
  font-family: var(--police-titre);
  font-style: var(--typo-titre-style);
  font-weight: var(--typo-titre-graisse);
  font-size: calc(var(--typo-titre-3-taille) * 1.18);
  line-height: var(--typo-titre-2-interligne);
}
.enveloppe-tuile-action {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--espace-1) * 0.75);
  margin-top: auto;
  color: var(--couleur-marque-texte);
  font-size: var(--typo-corps-taille);
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-tuile-action .enveloppe-ico {
  transition: transform var(--mouvement-elevation);
}
.enveloppe-tuile:hover {
  border-color: var(--couleur-marque-bord);
  box-shadow: var(--ombre-haute);
  transform: translateY(calc(var(--filet-fin) * -2));
}
.enveloppe-tuile:hover .enveloppe-tuile-action .enveloppe-ico {
  transform: translateX(var(--focus-decalage));
}
.enveloppe-chiffre,
.enveloppe-chiffres li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
  margin: 0;
}
.enveloppe-chiffre b,
.enveloppe-chiffres b {
  font-family: var(--typo-chiffre-police);
  font-style: var(--typo-titre-style);
  font-weight: var(--typo-chiffre-graisse);
  font-size: var(--typo-chiffre-taille);
  line-height: var(--typo-chiffre-interligne);
  letter-spacing: var(--typo-chiffre-interlettrage);
  font-variant-numeric: tabular-nums;
}
.enveloppe-chiffre span,
.enveloppe-chiffres span {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--espace-1) * 18), 1fr));
  gap: var(--espace-2);
  margin: 0 0 var(--espace-2);
  padding: 0;
  list-style: none;
}
.enveloppe-chiffres li {
  padding: var(--espace-2) var(--espace-2) calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
}
/* État vide (charte § 6, version 2) : une illustration sobre (un dossier posé), le chiffre et une phrase. */
.enveloppe-vide {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--espace-2);
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.75);
  margin-top: var(--espace-2);
  padding: var(--espace-6) var(--espace-4) var(--espace-5);
  border: calc(var(--filet-fin) * 2) dashed var(--couleur-bord-fort);
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  text-align: center;
}
.enveloppe-vide::before {
  content: "";
  width: calc(var(--espace-1) * 14);
  height: calc(var(--espace-1) * 10);
  border-radius: var(--rayon-champ);
  background:
    linear-gradient(var(--couleur-marque-doux), var(--couleur-marque-doux)) 0 0 / 45% calc(var(--espace-1) * 1.75) no-repeat,
    linear-gradient(var(--couleur-surface-2), var(--couleur-surface-2)) 0 calc(var(--espace-1) * 1.5) / 100% calc(100% - var(--espace-1) * 1.5) no-repeat;
  box-shadow: var(--ombre-douce);
  transform: rotate(calc(-4deg * var(--decor-expressif)));
}
.enveloppe-vide .enveloppe-chiffre {
  align-items: center;
}
.enveloppe-vide .enveloppe-chiffre b {
  font-size: calc(var(--typo-chiffre-taille) * 1.25);
}

/* Accueil du cabinet (maquette validée le 22/10/2026, écran 04) : la date, « Bonjour », l'espace du cabinet ; puis ce qui
   attend la personne, en bandeau aux couleurs du menu (donc du cabinet) ; puis les outils et, pour l'administrateur, le
   groupe « Le cabinet » ; la vitrine des outils à venir en simple lien. */
.enveloppe-accueil > h1 {
  margin-bottom: calc(var(--espace-1) * 0.5);
}
.enveloppe-accueil-espace {
  margin: 0 0 var(--espace-4);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-chapeau-taille);
  line-height: var(--typo-chapeau-interligne);
}
.enveloppe-a-faire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2) var(--espace-3);
  margin: 0 0 var(--espace-3);
  padding: var(--espace-3);
  border-radius: var(--rayon-carte);
  background: var(--couleur-nav-fond);
  color: var(--couleur-nav-texte-fort);
  box-shadow: var(--ombre-douce);
}
.enveloppe-a-faire > p {
  flex: 1 1 calc(var(--espace-1) * 40);
  margin: 0;
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-a-faire .enveloppe-action {
  background: var(--couleur-nav-texte-fort);
  border-color: var(--couleur-nav-texte-fort);
  color: var(--couleur-nav-fond);
}
.enveloppe-accueil > h2 {
  margin-top: var(--espace-5);
}
.enveloppe-accueil > h2::before {
  content: none;
}
.enveloppe-accueil > h2:first-of-type {
  margin-top: var(--espace-2);
}
/* Tous les connecteurs (accueil, 22/10/2026) : une rubrique ouverte, sans carte autour ; les cartes des briques dedans. */
.enveloppe-page section:not(.enveloppe-decision).enveloppe-accueil-connecteurs {
  margin: var(--espace-5) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.enveloppe-accueil-connecteurs > h2::before {
  content: none;
}
.enveloppe-accueil-connecteurs > p {
  max-width: none;
  margin: 0 0 var(--espace-3);
  color: var(--couleur-texte-doux);
}
/* Repère « En service » d'un outil ouvert : sous son nom, avant « Ouvrir ». */
.enveloppe-tuile > .enveloppe-pastille {
  align-self: flex-start;
}

/* ————— Bientôt sur votre plateforme : cartes des connecteurs à venir, maquettes sans aucune donnée ————— */

.enveloppe-bientot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 34), 1fr));
  gap: var(--espace-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.enveloppe-bientot > li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.enveloppe-bientot-texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-1);
  padding: var(--espace-3);
}
.enveloppe-bientot h2,
.enveloppe-bientot h3 {
  margin: 0;
}
.enveloppe-bientot h3 {
  font-size: calc(var(--typo-titre-3-taille) * 1.18);
  line-height: var(--typo-titre-3-interligne);
}
.enveloppe-bientot h2::before {
  content: none;
  counter-increment: none;
}
.enveloppe-bientot-texte p {
  flex: 1;
  margin: 0 0 var(--espace-1);
  color: var(--couleur-texte-doux);
}
.enveloppe-bientot-note {
  margin-top: var(--espace-4);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
/* Maquette : une fenêtre d'écran dessinée, sans texte ni donnée (aria-hidden). */
.enveloppe-maquette {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  aspect-ratio: 16 / 9;
  max-width: 100%;
  padding: var(--espace-5) var(--espace-3) var(--espace-2);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
  background: var(--couleur-surface-2);
}
/* Barre de fenêtre : trois points. */
.enveloppe-maquette::before {
  content: "";
  position: absolute;
  top: calc(var(--espace-1) * 1.75);
  left: var(--espace-3);
  width: calc(var(--espace-1) * 5);
  height: var(--espace-1);
  background: radial-gradient(circle, var(--couleur-bord-fort) 45%, transparent 50%) 0 0 / calc(var(--espace-1) * 1.75) var(--espace-1) repeat-x;
}
.enveloppe-maquette i {
  display: block;
  border-radius: calc(var(--rayon-champ) * 0.75);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
/* Tri des mails : des lignes de mails, la première proposée dans un dossier. */
.enveloppe-maquette[data-maquette="mails"] i {
  height: calc(var(--espace-1) * 3.5);
  background:
    radial-gradient(circle, var(--couleur-marque-doux) 55%, transparent 60%) var(--espace-1) 50% / calc(var(--espace-1) * 2.25) calc(var(--espace-1) * 2.25) no-repeat,
    linear-gradient(var(--couleur-bord), var(--couleur-bord)) calc(var(--espace-1) * 4.5) 35% / 40% calc(var(--espace-1) * 0.6) no-repeat,
    linear-gradient(var(--couleur-surface-2), var(--couleur-surface-2)) calc(var(--espace-1) * 4.5) 70% / 60% calc(var(--espace-1) * 0.5) no-repeat,
    var(--couleur-surface);
}
.enveloppe-maquette[data-maquette="mails"] i:first-child {
  box-shadow: inset calc(var(--filet-fin) * 3) 0 0 var(--couleur-marque), var(--ombre-douce);
}
/* Contacts : un carnet de fiches, chacune avec son repère de catégorie. */
.enveloppe-maquette[data-maquette="contacts"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.enveloppe-maquette[data-maquette="contacts"] i {
  color: var(--couleur-categorie-bleu);
  background:
    radial-gradient(circle, currentColor 55%, transparent 60%) var(--espace-1) 50% / calc(var(--espace-1) * 3) calc(var(--espace-1) * 3) no-repeat,
    linear-gradient(var(--couleur-bord), var(--couleur-bord)) calc(var(--espace-1) * 5) 38% / 45% calc(var(--espace-1) * 0.6) no-repeat,
    linear-gradient(var(--couleur-surface-2), var(--couleur-surface-2)) calc(var(--espace-1) * 5) 66% / 30% calc(var(--espace-1) * 0.5) no-repeat,
    var(--couleur-surface);
}
.enveloppe-maquette[data-maquette="contacts"] i:nth-child(2) {
  color: var(--couleur-categorie-vert);
}
.enveloppe-maquette[data-maquette="contacts"] i:nth-child(3) {
  color: var(--couleur-categorie-ocre);
}
.enveloppe-maquette[data-maquette="contacts"] i:nth-child(4) {
  color: var(--couleur-categorie-violet);
}
/* IA protégée : un document dont les passages sensibles sont masqués avant l'envoi. */
.enveloppe-maquette[data-maquette="ia"] {
  align-items: center;
}
.enveloppe-maquette[data-maquette="ia"] i {
  width: 62%;
  height: 100%;
  background:
    linear-gradient(var(--couleur-texte), var(--couleur-texte)) 18% 22% / 22% calc(var(--espace-1) * 0.9) no-repeat,
    linear-gradient(var(--couleur-texte), var(--couleur-texte)) 70% 48% / 26% calc(var(--espace-1) * 0.9) no-repeat,
    linear-gradient(var(--couleur-texte), var(--couleur-texte)) 30% 74% / 18% calc(var(--espace-1) * 0.9) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 1.4), var(--couleur-bord) calc(var(--espace-1) * 1.4) calc(var(--espace-1) * 1.4 + var(--filet-fin))) 50% 50% / 80% 70% no-repeat,
    var(--couleur-surface);
}
/* Documents à la charte : la même page avant et après, la seconde aux couleurs du cabinet. */
.enveloppe-maquette[data-maquette="charte"] {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--espace-3);
}
.enveloppe-maquette[data-maquette="charte"] i {
  width: 32%;
  height: 92%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 1.2), var(--couleur-bord) calc(var(--espace-1) * 1.2) calc(var(--espace-1) * 1.2 + var(--filet-fin))) 50% 70% / 76% 56% no-repeat,
    linear-gradient(var(--couleur-bord-fort), var(--couleur-bord-fort)) 50% 18% / 60% calc(var(--espace-1) * 0.9) no-repeat,
    var(--couleur-surface);
  transform: rotate(calc(-3deg * var(--decor-expressif)));
}
.enveloppe-maquette[data-maquette="charte"] i:last-child {
  background:
    linear-gradient(var(--couleur-marque), var(--couleur-marque)) 0 0 / 100% calc(var(--espace-1) * 1.25) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 1.2), var(--couleur-bord) calc(var(--espace-1) * 1.2) calc(var(--espace-1) * 1.2 + var(--filet-fin))) 50% 70% / 76% 56% no-repeat,
    linear-gradient(var(--couleur-marque-texte), var(--couleur-marque-texte)) 50% 22% / 60% calc(var(--espace-1) * 0.9) no-repeat,
    var(--couleur-surface);
  transform: rotate(calc(3deg * var(--decor-expressif)));
}
/* Recherche : un champ de recherche, puis des résultats dont un passage est surligné. */
.enveloppe-maquette[data-maquette="recherche"] i {
  height: calc(var(--espace-1) * 3);
  background:
    linear-gradient(var(--couleur-marque-doux), var(--couleur-marque-doux)) calc(var(--espace-1) * 1.5) 50% / 18% calc(var(--espace-1) * 1.1) no-repeat,
    linear-gradient(var(--couleur-bord), var(--couleur-bord)) 34% 50% / 46% calc(var(--espace-1) * 0.6) no-repeat,
    var(--couleur-surface);
}
.enveloppe-maquette[data-maquette="recherche"] i:first-child {
  height: calc(var(--espace-1) * 4);
  margin-bottom: calc(var(--espace-1) * 0.5);
  border: calc(var(--filet-fin) * 2) solid var(--couleur-marque-bord);
  border-radius: var(--rayon-compteur);
  background:
    radial-gradient(circle, transparent 38%, var(--couleur-texte-doux) 42%, var(--couleur-texte-doux) 54%, transparent 58%) calc(var(--espace-1) * 1.5) 50% / calc(var(--espace-1) * 2) calc(var(--espace-1) * 2) no-repeat,
    linear-gradient(var(--couleur-bord), var(--couleur-bord)) calc(var(--espace-1) * 5) 50% / 30% calc(var(--espace-1) * 0.6) no-repeat,
    var(--couleur-surface);
}

/* Cartes de la vitrine : le lien « Voir la maquette », et trois maquettes dessinées de plus. */
.enveloppe-bientot-lien {
  margin-top: var(--espace-1);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
}
/* Le lien couvre toute la carte : un clic n'importe où ouvre la maquette. */
.enveloppe-bientot > li {
  position: relative;
}
.enveloppe-bientot-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}
.enveloppe-bientot > li:hover {
  box-shadow: var(--ombre-haute);
}
/* Connecteur à plusieurs écrans ouverts : un lien par écran ; aucun ne couvre la carte (chacun reste cliquable). */
.enveloppe-bientot-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espace-2);
}
.enveloppe-bientot-liens .enveloppe-bientot-lien::after {
  content: none;
}
/* Accueil sans outil : la vitrine se pose sous l'état vide. */
.enveloppe-vide + .enveloppe-tuiles {
  margin-top: var(--espace-3);
}
/* Lecture de documents : une page scannée, puis le texte reconnu. */
.enveloppe-maquette[data-maquette="lecture"] {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--espace-3);
}
.enveloppe-maquette[data-maquette="lecture"] i {
  width: 32%;
  height: 92%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 1.2), var(--couleur-bord-fort) calc(var(--espace-1) * 1.2) calc(var(--espace-1) * 1.2 + var(--filet-fin))) 50% 60% / 76% 70% no-repeat,
    var(--couleur-surface);
  transform: rotate(calc(-2deg * var(--decor-expressif)));
}
.enveloppe-maquette[data-maquette="lecture"] i:last-child {
  background:
    linear-gradient(var(--couleur-marque-doux), var(--couleur-marque-doux)) 50% 24% / 70% calc(var(--espace-1) * 0.9) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 1.2), var(--couleur-texte-doux) calc(var(--espace-1) * 1.2) calc(var(--espace-1) * 1.2 + var(--filet-fin))) 50% 66% / 76% 56% no-repeat,
    var(--couleur-surface);
  transform: rotate(calc(2deg * var(--decor-expressif)));
}
/* Dossiers : des chemises, chacune avec son onglet. */
.enveloppe-maquette[data-maquette="dossiers"] i {
  height: calc(var(--espace-1) * 4);
  background:
    linear-gradient(var(--couleur-marque-doux), var(--couleur-marque-doux)) var(--espace-1) 50% / 12% calc(var(--espace-1) * 1.1) no-repeat,
    linear-gradient(var(--couleur-bord), var(--couleur-bord)) 28% 50% / 42% calc(var(--espace-1) * 0.6) no-repeat,
    var(--couleur-surface);
  border-top: calc(var(--filet-fin) * 3) solid var(--couleur-marque);
}
/* Assistant : une question, puis une réponse. */
.enveloppe-maquette[data-maquette="assistant"] i {
  width: 70%;
  height: calc(var(--espace-1) * 4.5);
  border-radius: var(--rayon-carte);
  background: linear-gradient(var(--couleur-bord), var(--couleur-bord)) 12% 40% / 60% calc(var(--espace-1) * 0.6) no-repeat, var(--couleur-surface);
}
.enveloppe-maquette[data-maquette="assistant"] i:nth-child(2) {
  align-self: flex-end;
  background: linear-gradient(var(--couleur-marque-texte), var(--couleur-marque-texte)) 12% 35% / 70% calc(var(--espace-1) * 0.6) no-repeat, linear-gradient(var(--couleur-marque-texte), var(--couleur-marque-texte)) 12% 70% / 40% calc(var(--espace-1) * 0.6) no-repeat, var(--couleur-marque-doux);
}

/* ————— Maquettes cliquables (vitrine des briques) : écrans de démonstration, données fictives ————— */

.vitrine h2::before {
  content: none;
  counter-increment: none;
}
.vitrine-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  margin: var(--espace-3) 0;
  padding: var(--espace-2) var(--espace-3);
  border: var(--filet-fin) dashed var(--couleur-bord-fort);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.vitrine-ecran {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}
.vitrine-liste,
.vitrine-grille,
.vitrine-documents {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vitrine-liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}
.vitrine-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espace-1) var(--espace-3);
  align-items: center;
  padding: var(--espace-2) var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
}
.vitrine-ligne-texte,
.vitrine-ligne-dossier {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
}
.vitrine-ligne-dossier {
  align-items: flex-end;
}
.vitrine-pourquoi,
.vitrine-boutons {
  grid-column: 1 / -1;
}
.vitrine-pourquoi summary {
  color: var(--couleur-marque-texte);
  cursor: pointer;
  font-weight: var(--typo-fort-graisse);
}
.vitrine-pourquoi p {
  margin: var(--espace-1) 0 0;
  color: var(--couleur-texte-doux);
}
.vitrine-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin: 0;
}
.vitrine-bouton {
  cursor: default;
}
.vitrine-bouton:hover {
  transform: none;
}
.vitrine-bouton-principal {
  background: var(--couleur-bouton-fond);
  border-color: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
  box-shadow: var(--ombre-douce);
}
.vitrine-garantie,
.vitrine-resume {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.vitrine-champ {
  margin: 0;
  padding: var(--espace-2) var(--espace-3);
  border: calc(var(--filet-fin) * 2) solid var(--couleur-marque-bord);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface);
  color: var(--couleur-texte-doux);
}
.vitrine-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 34), 1fr));
  gap: var(--espace-2);
}
.vitrine-fiche {
  display: flex;
  gap: var(--espace-2);
  align-items: center;
  padding: var(--espace-2) var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
}
.vitrine-fiche > div {
  display: flex;
  flex-direction: column;
}
.vitrine-repere {
  flex: none;
  width: calc(var(--espace-1) * 4);
  height: calc(var(--espace-1) * 4);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-categorie-bleu);
}
.vitrine-fiche[data-repere="c2"] .vitrine-repere {
  background: var(--couleur-categorie-vert);
}
.vitrine-fiche[data-repere="c3"] .vitrine-repere {
  background: var(--couleur-categorie-ocre);
}
.vitrine-fiche[data-repere="c4"] .vitrine-repere {
  background: var(--couleur-categorie-violet);
}
.vitrine-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 40)), 1fr));
  gap: var(--espace-3);
}
.vitrine-ecran .vitrine-papier,
.vitrine-feuille .vitrine-papier {
  margin: 0;
  background: var(--couleur-surface-2);
}
.vitrine-papier h3 {
  margin: 0 0 var(--espace-2);
  font-size: var(--typo-corps-taille);
}
.vitrine-papier p {
  margin: 0 0 var(--espace-1);
}
.vitrine-nom {
  background: var(--couleur-alerte-doux);
}
.vitrine-code {
  padding: 0 calc(var(--espace-1) * 0.5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-family: var(--police-mono);
}
.vitrine-feuille {
  margin: 0;
}
.vitrine-feuille figcaption {
  margin-bottom: var(--espace-1);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.vitrine-entete {
  height: calc(var(--espace-1) * 2);
  margin: calc(var(--espace-1) * -1) calc(var(--espace-1) * -1) var(--espace-2);
  background: var(--couleur-bord);
}
.vitrine-feuille[data-version="apres"] .vitrine-entete {
  background: var(--couleur-marque);
}
.vitrine-feuille[data-version="apres"] h3 {
  color: var(--couleur-marque-texte);
  font-family: var(--police-titre);
  font-style: var(--typo-titre-style);
}
.vitrine-scan .vitrine-lignes {
  display: block;
  height: calc(var(--espace-1) * 16);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 1.6), var(--couleur-bord-fort) calc(var(--espace-1) * 1.6) calc(var(--espace-1) * 1.6 + var(--filet-fin)));
  opacity: 0.6;
}
.vitrine-ecran mark {
  background: var(--couleur-alerte-doux);
  color: var(--couleur-texte);
}
.vitrine-documents li {
  padding: var(--espace-1) 0;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.vitrine-echange {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}
.vitrine-bulle {
  max-width: 80%;
  margin: 0;
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-carte);
}
.vitrine-bulle-question {
  align-self: flex-end;
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.vitrine-bulle-reponse {
  background: var(--couleur-surface-2);
  border: var(--filet-fin) solid var(--couleur-bord);
}
.vitrine-bulle-reponse h3 {
  margin: var(--espace-2) 0 var(--espace-1);
  font-size: var(--typo-petit-taille);
}
.vitrine-retour {
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
}
@media (max-width: 699px) {
  .vitrine-ligne {
    grid-template-columns: 1fr;
  }
  .vitrine-ligne-dossier {
    align-items: flex-start;
  }
  .vitrine-bulle {
    max-width: 100%;
  }
}

/* ————— Console d'Archie, direction « Studio » (PF-029, maquette B choisie par Esteban le 22/10/2026) ————— */

/* Une toile claire et douce (retour d'Esteban du 22/10/2026 : « plus de toile noire »), un rail d'icônes à gauche, de grands
   panneaux blancs ; le magenta d'Archie seulement en accent (marque du rail, boutons). Jetons seulement :
   la forme (rayons) et les couleurs viennent du thème, rien n'est écrit ici. Sur téléphone, le rail devient une barre en tête. */
.console-studio {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: calc(var(--espace-1) * 11) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.console-cache,
.enveloppe-cache {
  position: absolute;
  width: var(--filet-fin);
  height: var(--filet-fin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.console-rail {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-2);
  height: 100vh;
  padding: var(--espace-4) var(--espace-2);
}
.console-rail a,
.console-rail button {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
  min-height: 0;
  padding: 0;
  border: var(--filet-fin) solid transparent;
  border-radius: var(--rayon-carte);
  background: transparent;
  color: var(--couleur-texte-doux);
  box-shadow: none;
}
.console-rail a:hover,
.console-rail button:hover {
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: none;
  transform: none;
}
.console-rail a[aria-current="page"] {
  background: var(--couleur-surface);
  color: var(--couleur-marque-texte);
  box-shadow: var(--ombre-douce);
}
.console-rail a:focus-visible,
.console-rail button:focus-visible {
  outline-color: var(--couleur-focus);
}
.console-rail .console-rail-marque {
  margin-bottom: var(--espace-2);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.console-rail .console-rail-marque:hover {
  background: var(--couleur-bouton-fond);
}
/* Menu du compte, ouvert par le « A » du rail (maquette validée le 22/10/2026) ; popover natif, sans script. */
.console-rail .console-compte {
  position: fixed;
  inset: calc(var(--espace-1) * 4) auto auto calc(var(--espace-1) * 11);
  width: min(calc(var(--espace-1) * 38), calc(100vw - var(--espace-4)));
  margin: 0;
  padding: var(--espace-1);
  border: 0;
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-haute);
}
.console-compte-tete {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-bottom: var(--espace-1);
  padding: var(--espace-1);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.console-compte-tete > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--espace-1) * 0.5);
  min-width: 0;
}
.console-rail .console-compte a,
.console-rail .console-compte button {
  display: flex;
  justify-content: flex-start;
  gap: var(--espace-1);
  width: 100%;
  height: auto;
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-champ);
  color: var(--couleur-texte);
  font-weight: var(--typo-fort-graisse);
  text-decoration: none;
}
.console-rail .console-compte a[aria-current="page"] {
  background: var(--couleur-surface-2);
  box-shadow: none;
}
.console-rail .console-compte form {
  margin: calc(var(--espace-1) * 0.5) 0 0;
  padding-top: calc(var(--espace-1) * 0.5);
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
.console-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
}
.console-avatar-grand {
  width: calc(var(--espace-1) * 11);
  height: calc(var(--espace-1) * 11);
  font-size: var(--typo-titre-3-taille);
}
/* « Administration » : tuiles ; « Mon compte » : deux cartes. */
.console-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--espace-1) * 40)), 1fr));
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.console-tuile {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  height: 100%;
  padding: var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  text-decoration: none;
}
.console-tuile:hover {
  border-color: var(--couleur-bord-fort);
}
.console-tuile b {
  display: block;
}
.console-tuile small {
  color: var(--couleur-texte-doux);
}
.console-tuile-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
  border-radius: var(--rayon-champ);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.console-tuile-fleche {
  margin-left: auto;
  color: var(--couleur-texte-doux);
}
.console-administrateurs {
  margin-top: var(--espace-3);
}
.console-administrateurs > h2 {
  margin-top: 0;
}
.console-administrateurs table {
  width: 100%;
}
.console-compte-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 56)), 1fr));
  gap: var(--espace-3);
  align-items: start;
}
.console-compte-carte {
  display: grid;
  gap: var(--espace-2);
  padding: var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
}
.console-compte-carte h2 {
  margin: 0;
}
.console-compte-carte h2::before {
  content: none;
}
.console-compte-identite {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
}
.console-compte-identite > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-1);
}
.console-compte-note {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-compte-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  padding: var(--espace-2) 0;
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
.console-compte-ligne > div {
  display: flex;
  flex: 1 1 calc(var(--espace-1) * 28);
  flex-direction: column;
  min-width: 0;
}
.console-compte-ligne small {
  color: var(--couleur-texte-doux);
}
.console-compte-ligne form {
  margin: 0;
}
/* « Mon compte » (ADR-PF-086) : formulaires du profil, du mot de passe et des codes de secours ; liste des appareils. */
.console-compte-large {
  grid-column: 1 / -1;
}
/* L'avatar du profil reste grand (une règle `.console-avatar` plus loin, celle des rangées, le réduirait). */
.console-compte-identite .console-avatar-grand {
  width: calc(var(--espace-1) * 11);
  height: calc(var(--espace-1) * 11);
  font-size: var(--typo-titre-3-taille);
}
.console-compte-message {
  margin: 0 0 var(--espace-3);
  padding: var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-succes-doux);
  color: var(--couleur-succes);
  font-weight: var(--typo-fort-graisse);
}
.console-compte-bloc {
  display: grid;
  gap: var(--espace-1);
  padding: var(--espace-2) 0;
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
.console-compte-bloc > small {
  color: var(--couleur-texte-doux);
}
.console-compte-carte form.console-compte-formulaire {
  display: grid;
  gap: var(--espace-1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.console-compte-formulaire input:where(:not([type="checkbox"], [type="hidden"])) {
  max-width: none;
}
.console-compte-formulaire > label:not(.enveloppe-case) {
  margin-top: var(--espace-1);
}
.console-compte-carte form.console-compte-en-ligne {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.console-compte-en-ligne > label {
  grid-column: 1 / -1;
}
.console-compte-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin: var(--espace-1) 0 0;
}
.console-avatar-photo {
  overflow: hidden;
  padding: 0;
}
.console-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.console-compte-secours {
  padding: var(--espace-2);
  border: var(--filet-fin) solid var(--couleur-alerte);
  border-radius: var(--rayon-champ);
  background: var(--couleur-alerte-doux);
}
.console-compte-secours p {
  margin: 0 0 var(--espace-1);
  font-weight: var(--typo-fort-graisse);
}
.console-compte-secours ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 22), 1fr));
  gap: calc(var(--espace-1) * 0.5) var(--espace-2);
  margin: 0;
  padding-left: var(--espace-3);
}
.console-appareils {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.console-appareil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) 0;
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
.console-appareil > div {
  display: flex;
  flex: 1 1 calc(var(--espace-1) * 30);
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--espace-1) * 0.5) var(--espace-1);
  min-width: 0;
}
.console-appareil > div > small {
  flex: 1 0 100%;
  color: var(--couleur-texte-doux);
}
.console-appareil-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--espace-1) * 5);
  height: calc(var(--espace-1) * 5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.console-appareil form {
  margin: 0;
}

.console-rail .enveloppe-logo {
  width: 100%;
  height: 100%;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.console-rail form {
  margin: auto 0 0;
  padding: 0;
  border: 0;
}
.console-corps {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-4) var(--espace-6) 0;
}
.console-moi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espace-2);
  max-width: none;
  margin: 0;
  color: var(--couleur-texte-doux);
  text-align: right;
  font-size: var(--typo-petit-taille);
}

/* Les trois rôles (maquette « accès et rôles » du 22/10/2026) : la même pastille partout, une teinte par rôle. */
/* Le mot sur un fond neutre (contraste du texte garanti), la teinte du rôle dans la pastille ronde. */
.enveloppe-role {
  border: var(--filet-fin) solid var(--couleur-bord);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
}
.enveloppe-role[data-role="archie"]::before {
  background: var(--couleur-categorie-rose);
}
.enveloppe-role[data-role="administrateur"]::before {
  background: var(--couleur-categorie-bleu);
}
.enveloppe-role[data-role="membre"]::before {
  background: var(--couleur-categorie-vert);
}
.console-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 26)), 1fr));
  gap: var(--espace-3);
  margin: 0 0 var(--espace-4);
  padding: 0;
  list-style: none;
}
.console-roles > li {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--espace-2);
  padding: var(--espace-3);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.console-roles p {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-acces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 90)), 1fr));
  gap: var(--espace-3);
  align-items: start;
}
.console-acces-carte {
  display: grid;
  gap: var(--espace-3);
  min-width: 0;
  padding: clamp(var(--espace-3), 2.5vw, var(--espace-5));
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.console-acces-carte h2 {
  margin: 0;
}
.console-acces-carte h2::before {
  content: none;
}
.console-acces-aide {
  max-width: none;
  margin: 0;
  color: var(--couleur-texte-doux);
}
.console-acces-form {
  display: grid;
  gap: var(--espace-2);
}
.console-acces-form input,
.console-acces-form select {
  width: 100%;
  max-width: none;
}
.console-acces-form button {
  justify-self: start;
  min-height: calc(var(--cible-tactile) * 1.2);
  margin-top: var(--espace-1);
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-carte);
  background: var(--couleur-bouton-fond);
  border-color: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.console-acces-pli {
  padding: var(--espace-3);
  border: var(--filet-fin) dashed var(--couleur-bord);
  border-radius: var(--rayon-carte);
}
.console-acces-pli summary {
  cursor: pointer;
  color: var(--couleur-texte-doux);
  font-weight: var(--typo-fort-graisse);
}
.console-personnes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.console-personne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espace-2) var(--espace-3);
  align-items: center;
  padding: var(--espace-3) 0;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.console-personne:last-child {
  border-bottom: 0;
}
.console-personne[data-desactive] {
  opacity: 0.6;
}
.console-avatar {
  display: grid;
  place-items: center;
  width: calc(var(--espace-1) * 5);
  height: calc(var(--espace-1) * 5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
  font-size: var(--typo-petit-taille);
}
.console-personne-texte {
  display: grid;
  gap: var(--espace-1);
  min-width: 0;
}
.console-personne-texte b {
  overflow-wrap: anywhere;
}
.console-personne-reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) var(--espace-2);
}
.console-personne-reperes small {
  color: var(--couleur-texte-doux);
}
.console-personne-gestes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  grid-column: 2;
}
.console-personne-gestes form {
  margin: 0;
}
form.console-acces-role,
form.collegues-role {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  align-items: center;
}
form.console-acces-role select,
form.collegues-role select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}
form.console-acces-role button,
form.collegues-role button {
  flex: none;
  margin: 0;
}
.console-acces-discret {
  border-color: transparent;
  background: transparent;
  color: var(--couleur-texte-doux);
}
.console-panneaux {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--espace-3);
  align-items: start;
}
.console-panneaux.console-seul {
  grid-template-columns: minmax(0, 1fr);
}
.console-liste,
.console-creer,
.console-panneaux .console-fiche,
.console-corps > .console-fiche {
  min-width: 0;
  padding: clamp(var(--espace-3), 3vw, var(--espace-6));
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}
.console-corps > .console-fiche {
  max-width: none;
  margin: 0;
}
.console-liste h2::before,
.console-creer h2::before,
.console-connecteur h2::before {
  content: none;
}
.console-liste > h1 {
  margin: 0 0 var(--espace-1);
  font-size: clamp(calc(var(--espace-1) * 6), 5vw, calc(var(--espace-1) * 12));
  letter-spacing: var(--typo-titre-1-interlettrage);
}
.console-sous {
  max-width: none;
  margin: 0 0 var(--espace-4);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-chapeau-taille);
}
.console-liste > .console-supervision {
  margin: 0 0 var(--espace-3);
}
.console-supervision .enveloppe-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-3);
  margin: 0 0 var(--espace-2);
}
.console-supervision .enveloppe-chiffres li {
  flex-direction: row;
  align-items: baseline;
  gap: var(--espace-1);
  padding: 0;
  background: transparent;
}
.console-supervision .enveloppe-chiffres b {
  font-size: var(--typo-chapeau-taille);
}
.console-supervision .enveloppe-garantie {
  margin: 0;
}
.console-liste > section {
  margin: var(--espace-5) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Rangées : monogramme, nom et identifiant, état, flèche. */
.console-rangees,
.console-connecteurs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.console-rangees > li + li,
.console-connecteurs > li + li {
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
.console-rangee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-1);
  border-radius: var(--rayon-carte);
  color: var(--couleur-texte);
  text-decoration: none;
  transition: background-color var(--mouvement-rapide);
}
.console-rangee:hover {
  background: var(--couleur-marque-doux);
  text-decoration: none;
}
.console-rangee .enveloppe-ico {
  color: var(--couleur-marque-texte);
}
.console-rangee:hover .enveloppe-ico {
  transform: translateX(var(--focus-decalage));
}
.console-mono {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
  overflow: hidden;
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
}
.console-mono img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.console-fiche-tete {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin: 0 0 var(--espace-2);
}
.console-fiche-tete h1 {
  margin: 0;
}
.console-fiche-tete .console-mono {
  width: calc(var(--espace-1) * 8);
  height: calc(var(--espace-1) * 8);
}
.console-technique {
  margin-top: var(--espace-2);
  padding-top: var(--espace-2);
  border-top: var(--filet-fin) dashed var(--couleur-bord-fort);
  color: var(--couleur-texte-doux);
}
.console-choix.console-technique {
  border-top: var(--filet-fin) dashed var(--couleur-bord-fort);
}
.console-choix legend {
  font-size: var(--typo-petit-taille);
}
.console-technique-titre {
  margin: var(--espace-4) 0 0;
  font-size: var(--typo-petit-taille);
  color: var(--couleur-texte-doux);
}
.console-technique-titre::before {
  content: none;
}
.console-technique .console-connecteur-etat button:not(.enveloppe-secondaire) {
  background: var(--couleur-surface);
  border-color: var(--couleur-bord-fort);
  color: var(--couleur-texte);
}
.console-rangee-texte {
  min-width: 0;
}
.console-rangee-texte b {
  display: block;
  font-size: var(--typo-chapeau-taille);
  overflow-wrap: anywhere;
}
.console-rangee-texte small {
  display: block;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}

/* Nouveau cabinet : trois pas, un bouton. */
.console-creer h2 {
  margin: 0 0 var(--espace-3);
  font-style: normal;
  font-size: calc(var(--typo-titre-3-taille) * 1.4);
}
.console-creer form {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin: 0;
}
.console-pas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espace-2);
  align-items: start;
}
.console-pas-n {
  display: grid;
  place-items: center;
  width: calc(var(--espace-1) * 4.5);
  height: calc(var(--espace-1) * 4.5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
  font-weight: var(--typo-fort-graisse);
}
.console-pas label,
.console-pas-titre {
  display: block;
  margin: 0 0 var(--espace-1);
  font-size: var(--typo-corps-taille);
  font-weight: var(--typo-fort-graisse);
}
.console-pas label + input,
.console-pas label + select {
  margin-bottom: var(--espace-2);
}
.console-pas input:where(:not([type="checkbox"])),
.console-pas select {
  max-width: none;
}
.console-pas p:not(.console-pas-titre) {
  margin: var(--espace-1) 0 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin: 0;
  padding: 0;
  border: 0;
}
.console-choix label {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  margin: 0;
  padding: 0 var(--espace-2);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-texte);
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
}
.console-choix label:has(input:checked) {
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.console-creer button[type="submit"] {
  align-self: flex-start;
  min-height: calc(var(--cible-tactile) * 1.2);
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-carte);
}

/* Noms affichés des connecteurs : un champ par connecteur, en grille ; la fonction en étiquette, le nom par défaut dessous. */
.console-noms {
  min-width: 0;
  padding: clamp(var(--espace-3), 3vw, var(--espace-6));
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}
.console-noms h2 {
  margin: 0 0 var(--espace-1);
}
.console-noms h2::before {
  content: none;
}
.console-noms [role="status"],
.console-noms [role="alert"] {
  margin: 0 0 var(--espace-3);
}
.console-noms-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--espace-1) * 56)), 1fr));
  gap: var(--espace-3);
}
.console-nom {
  display: grid;
  gap: calc(var(--espace-1) * 0.75);
  min-width: 0;
}
.console-nom label {
  font-weight: var(--typo-fort-graisse);
}
.console-nom input {
  width: 100%;
  font-size: var(--typo-chapeau-taille);
}
.console-nom small {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-noms-actions {
  margin: var(--espace-4) 0 0;
}
.console-noms-actions button {
  min-height: calc(var(--cible-tactile) * 1.2);
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-carte);
  background: var(--couleur-bouton-fond);
  border-color: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}

/* Connecteurs : une ligne par connecteur, son repère en jauge à 4 crans (le mot l'accompagne toujours). */
.console-connecteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2) var(--espace-4);
  padding: var(--espace-3) var(--espace-1);
}
.console-connecteur-texte {
  flex: 1 1 calc(var(--espace-1) * 30);
  min-width: 0;
}
.console-connecteur-texte h2,
.console-connecteur-texte h3 {
  display: block;
  margin: 0 0 calc(var(--espace-1) * 0.5);
  font-size: var(--typo-chapeau-taille);
}
.console-connecteur-texte p {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-connecteur-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}
.console-connecteur-etat form {
  margin: 0;
}
/* « Activer » : le geste que l'on cherche, donc le bouton principal ; « Désactiver » reste discret. */
.console-connecteur-etat button:not(.enveloppe-secondaire) {
  background: var(--couleur-bouton-fond);
  border-color: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.console-connecteur-etat button:not(.enveloppe-secondaire):hover {
  background: var(--couleur-bouton-fond);
  border-color: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.console-connecteur-note,
.console-connecteur-usage {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-repere {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  font-weight: var(--typo-fort-graisse);
}
.console-crans {
  display: inline-flex;
  gap: calc(var(--espace-1) * 0.5);
}
.console-crans i {
  width: var(--espace-3);
  height: var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-bord-fort);
}
.console-crans i[data-plein] {
  background: var(--couleur-marque-texte);
}
.console-repere[data-repere="service"] .console-crans i[data-plein] {
  background: var(--couleur-succes);
}
.console-legende {
  max-width: none;
  margin: var(--espace-3) 0 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-retour {
  margin: 0 0 var(--espace-2);
}
.console-retour a {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
}
.console-retour .enveloppe-ico {
  transform: scaleX(-1);
}

/* Accueil de la console : une carte par cabinet, et la carte « Nouveau cabinet » qui ouvre la création en fenêtre (sans script :
   la fenêtre est la cible de l'ancre `#nouveau`). */
.console-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 32), 1fr));
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.console-cartes > li {
  display: flex;
  margin: 0;
}
.console-carte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  min-height: calc(var(--espace-1) * 25);
  padding: var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
  color: var(--couleur-texte);
  text-decoration: none;
  transition: box-shadow var(--mouvement-elevation), transform var(--mouvement-elevation);
}
.console-carte:hover {
  box-shadow: var(--ombre-haute);
  transform: translateY(calc(var(--filet-fin) * -2));
}
.console-carte .console-mono {
  width: calc(var(--espace-1) * 7);
  height: calc(var(--espace-1) * 7);
}
.console-carte-texte {
  min-width: 0;
}
.console-carte-texte b {
  display: block;
  margin-bottom: calc(var(--espace-1) * 0.5);
  font-size: var(--typo-chapeau-taille);
  overflow-wrap: anywhere;
}
.console-carte-lignes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin-top: auto;
}
.console-carte-nouveau {
  justify-content: center;
  border: calc(var(--filet-fin) * 2) dashed var(--couleur-bord-fort);
  background: transparent;
  box-shadow: none;
}
.console-carte-nouveau .console-carte-texte span {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-plus {
  display: grid;
  place-items: center;
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.console-voile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  place-items: center;
  padding: var(--espace-2);
  overflow: auto;
  background: color-mix(in srgb, var(--couleur-texte) 55%, transparent);
}
.console-voile:target {
  display: grid;
}
.console-modale {
  width: min(calc(var(--espace-1) * 70), 100%);
  max-height: 100%;
  overflow: auto;
  box-shadow: var(--ombre-haute);
}
.console-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
}
.console-creer .console-actions button[type="submit"] {
  align-self: auto;
}

/* Fiche d'un cabinet à onglets (sans script) : les boutons radio précèdent les onglets et les panneaux. */
.console-onglet-choix {
  position: absolute;
  width: var(--filet-fin);
  height: var(--filet-fin);
  opacity: 0;
  pointer-events: none;
}
.console-onglets {
  display: flex;
  gap: calc(var(--espace-1) * 0.5);
  width: max-content;
  max-width: 100%;
  margin: var(--espace-2) 0 var(--espace-3);
  padding: calc(var(--espace-1) * 0.5);
  overflow-x: auto;
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
}
.console-onglets label {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  border-radius: var(--rayon-compteur);
  color: var(--couleur-texte-doux);
  font-weight: var(--typo-fort-graisse);
  white-space: nowrap;
  cursor: pointer;
}
.console-onglets label {
  gap: var(--espace-1);
}
.console-onglets label .enveloppe-ico {
  width: var(--espace-2);
  height: var(--espace-2);
}
.console-onglets label:hover {
  color: var(--couleur-texte);
}
#onglet-connecteurs:checked ~ .console-onglets label[for="onglet-connecteurs"],
#onglet-acces:checked ~ .console-onglets label[for="onglet-acces"],
#onglet-habillage:checked ~ .console-onglets label[for="onglet-habillage"],
#onglet-apparence:checked ~ .console-onglets label[for="onglet-apparence"],
#onglet-journal-onglet:checked ~ .console-onglets label[for="onglet-journal-onglet"],
#onglet-essai:checked ~ .console-onglets label[for="onglet-essai"],
#onglet-attribution:checked ~ .console-onglets label[for="onglet-attribution"],
#onglet-versions:checked ~ .console-onglets label[for="onglet-versions"] {
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}
#onglet-connecteurs:focus-visible ~ .console-onglets label[for="onglet-connecteurs"],
#onglet-acces:focus-visible ~ .console-onglets label[for="onglet-acces"],
#onglet-habillage:focus-visible ~ .console-onglets label[for="onglet-habillage"],
#onglet-apparence:focus-visible ~ .console-onglets label[for="onglet-apparence"],
#onglet-journal-onglet:focus-visible ~ .console-onglets label[for="onglet-journal-onglet"],
#onglet-essai:focus-visible ~ .console-onglets label[for="onglet-essai"],
#onglet-attribution:focus-visible ~ .console-onglets label[for="onglet-attribution"],
#onglet-versions:focus-visible ~ .console-onglets label[for="onglet-versions"] {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.console-panneau {
  display: none;
}
#onglet-connecteurs:checked ~ #panneau-connecteurs,
#onglet-acces:checked ~ #panneau-acces,
#onglet-habillage:checked ~ #panneau-habillage,
#onglet-apparence:checked ~ #panneau-apparence,
#onglet-journal-onglet:checked ~ #panneau-journal-onglet,
#onglet-essai:checked ~ #panneau-essai,
#onglet-attribution:checked ~ #panneau-attribution,
#onglet-versions:checked ~ #panneau-versions,
.console-panneau:has(:target) {
  display: block;
}
.console-fiche:has(.console-panneau :target) .console-panneau:not(:has(:target)) {
  display: none !important;
}

/* Pictogramme d'un connecteur, sur la teinte de sa catégorie (jetons de catégorie de la DA mêlés à la surface). */
.console-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--espace-1) * 5.5);
  height: calc(var(--espace-1) * 5.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.console-ic[data-brique="mails"],
.console-ic[data-brique="recherche"] {
  background: color-mix(in srgb, var(--couleur-categorie-bleu) 55%, var(--couleur-surface));
}
.console-ic[data-brique="contacts"] {
  background: color-mix(in srgb, var(--couleur-categorie-rose) 55%, var(--couleur-surface));
}
.console-ic[data-brique="ia"] {
  background: color-mix(in srgb, var(--couleur-categorie-violet) 55%, var(--couleur-surface));
}
.console-ic[data-brique="charte"] {
  background: color-mix(in srgb, var(--couleur-categorie-vert) 55%, var(--couleur-surface));
}
.console-ic[data-brique="lecture"] {
  background: color-mix(in srgb, var(--couleur-categorie-ocre) 55%, var(--couleur-surface));
}

/* ————— Collègues, fiches et profil (maquette « fiches des collègues » validée le 22/10/2026) ————— */
.equipe-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espace-2) var(--espace-4);
}
.equipe-tete > div {
  flex: 1 1 calc(var(--espace-1) * 60);
  min-width: 0;
}
.equipe-annuaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--espace-1) * 32)), 1fr));
  gap: var(--espace-2);
  margin: var(--espace-3) 0 0;
  padding: 0;
  list-style: none;
}
.equipe-carte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  height: 100%;
  padding: var(--espace-3);
  border: calc(var(--filet-fin) * 2) solid transparent;
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
  text-decoration: none;
  transition: transform var(--mouvement-rapide), border-color var(--mouvement-rapide);
}
.equipe-carte:hover {
  transform: translateY(calc(var(--espace-1) * -0.4));
}
.equipe-carte[aria-current] {
  border-color: var(--couleur-marque);
}
.equipe-carte-haut {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-width: 0;
}
.equipe-carte-texte {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.equipe-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equipe-carte-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1);
}
.equipe-intitule {
  overflow: hidden;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equipe-vous {
  padding: calc(var(--espace-1) * 0.4) var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-size: var(--typo-petit-taille);
  vertical-align: middle;
}
/* Photo ronde ou initiales, avec la pastille du statut posée sur le bord. */
.equipe-photo {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--espace-1) * 7);
  height: calc(var(--espace-1) * 7);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
}
.equipe-photo[data-taille="petite"] {
  width: calc(var(--espace-1) * 5);
  height: calc(var(--espace-1) * 5);
  font-size: var(--typo-petit-taille);
}
.equipe-photo[data-taille="grande"] {
  width: calc(var(--espace-1) * 14);
  height: calc(var(--espace-1) * 14);
  font-size: var(--typo-titre-3-taille);
}
.equipe-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--rayon-compteur);
  object-fit: cover;
}
.equipe-photo > i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 30%;
  border: calc(var(--filet-fin) * 3) solid var(--couleur-surface);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-succes);
}
.equipe-photo[data-statut="ne_pas_deranger"] > i {
  background: var(--couleur-erreur);
}
.equipe-photo[data-statut="absent"] > i {
  background: var(--couleur-alerte);
}
.equipe-statut {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(var(--espace-1) * 0.75);
  padding: calc(var(--espace-1) * 0.4) calc(var(--espace-1) * 1.25);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-succes-doux);
  color: var(--couleur-succes);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
.equipe-statut::before {
  content: "";
  width: calc(var(--espace-1) * 0.9);
  height: calc(var(--espace-1) * 0.9);
  border-radius: var(--rayon-compteur);
  background: currentColor;
}
.equipe-statut[data-statut="ne_pas_deranger"] {
  background: var(--couleur-erreur-doux);
  color: var(--couleur-erreur);
}
.equipe-statut[data-statut="absent"] {
  background: var(--couleur-alerte-doux);
  color: var(--couleur-alerte);
}
/* Fiche : un panneau à droite, le fond verrouillé ; plein écran sur téléphone, où il défile en entier. */
body:has(.equipe-fiche) {
  overflow: hidden;
}
.equipe-voile {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--couleur-texte) 38%, transparent);
}
.equipe-fiche {
  position: fixed;
  top: var(--espace-2);
  right: var(--espace-2);
  bottom: var(--espace-2);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  width: min(calc(var(--espace-1) * 56), calc(100vw - var(--espace-4)));
  overflow: auto;
  padding: var(--espace-4);
  border-radius: calc(var(--rayon-carte) * 1.6);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-haute);
}
.equipe-fermer {
  position: absolute;
  top: var(--espace-2);
  right: var(--espace-2);
  display: grid;
  place-items: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
  font-size: var(--typo-titre-3-taille);
  text-decoration: none;
}
.equipe-identite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-1);
  text-align: center;
}
.equipe-identite h2 {
  margin: var(--espace-1) 0 0;
  padding: 0;
  border: 0;
}
.equipe-identite h2::before {
  content: none;
}
.equipe-identite .equipe-statut {
  align-self: center;
}
.equipe-coordonnees {
  display: block;
  margin: 0;
  padding: 0 var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
}
.equipe-coordonnees > div {
  display: block;
  padding: var(--espace-2) 0;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.equipe-coordonnees > div:last-child {
  border-bottom: 0;
}
.equipe-coordonnees dt {
  position: absolute;
  width: var(--filet-fin);
  height: var(--filet-fin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.equipe-coordonnees dd {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin: 0;
  overflow-wrap: anywhere;
}
.equipe-coordonnees dd small {
  color: var(--couleur-texte-doux);
}
.equipe-note {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  text-align: center;
}
.equipe-actions {
  margin: 0;
}
.equipe-actions .enveloppe-action {
  width: 100%;
}
/* « Mon profil » (retours d'Esteban du 23/10/2026) : l'aperçu de la fiche à gauche, qui suit la saisie ; les champs à
   droite, sur toute leur colonne ; photo compacte ; statut en sélecteur segmenté. */
/* Le formulaire n'est pas une carte ici : l'aperçu et les champs sont chacun la leur. */
.enveloppe-page > form.profil-formulaire:has(.profil-champs) {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--espace-1) * 40)) minmax(0, 1fr);
  align-items: start;
  gap: var(--espace-4);
  max-width: calc(var(--espace-1) * 160);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.profil-apercu {
  position: sticky;
  top: var(--espace-3);
  display: grid;
  gap: var(--espace-2);
}
.profil-apercu-titre {
  align-self: stretch;
  margin: 0 0 var(--espace-1);
  text-align: left;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
.profil-apercu-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-1);
  padding: var(--espace-3);
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
  text-align: center;
}
.profil-apercu-carte .equipe-photo {
  margin-bottom: var(--espace-1);
}
.profil-apercu-nom {
  font-family: var(--typo-titre-3-police);
  font-size: calc(var(--typo-titre-3-taille) * 1.18);
  overflow-wrap: anywhere;
}
.profil-apercu-intitule {
  color: var(--couleur-texte-doux);
  overflow-wrap: anywhere;
}
/* La pastille de l'aperçu : statut et précision dans une seule ligne de texte (qui passe à la ligne entre les mots). */
.profil-apercu-carte .equipe-statut {
  align-self: center;
  max-width: 100%;
}
.profil-apercu-intitule:empty {
  display: none;
}
/* Champs sur deux colonnes : photo, Nom | Intitulé, Statut, Téléphone | Précision ; boutons au bas de la carte. */
.profil-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--espace-2) var(--espace-3);
  min-width: 0;
  padding: var(--espace-3) var(--espace-3) 0;
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.profil-champ {
  display: grid;
  gap: calc(var(--espace-1) * 0.5);
  min-width: 0;
}
.profil-champ > label {
  margin: 0;
}
.profil-champs > .profil-photo,
.profil-champs > .profil-champ-large,
.profil-champs > .profil-actions {
  grid-column: 1 / -1;
}
/* Titre et chapeau plus serrés : l'écran tient sans défiler à 1440 × 900. */
.profil-champs input:where(:not([type="checkbox"], [type="radio"])) {
  max-width: none;
}
/* Bloc photo compact : titre, dépôt et retrait sur une ligne, l'aide dessous. */
.profil-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) var(--espace-2);
}
.profil-photo .profil-photo-titre {
  flex: 1 0 100%;
  margin: 0;
}
.profil-photo input[type="file"] {
  flex: 1 1 calc(var(--espace-1) * 30);
  width: auto;
  max-width: none;
}
.profil-photo .profil-aide {
  flex: 1 0 100%;
  margin: 0;
}
.profil-case {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  margin: 0;
  font-weight: normal;
}
.profil-case input {
  width: auto;
  min-height: 0;
  margin: 0;
}
.profil-aide {
  margin: calc(var(--espace-1) * 0.5) 0 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.profil-statuts {
  display: grid;
  gap: calc(var(--espace-1) * 0.5);
  margin: 0;
  padding: 0;
  border: 0;
}
.profil-statuts legend {
  margin-bottom: calc(var(--espace-1) * 0.75);
  padding: 0;
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
.profil-segments {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espace-1) * 0.5);
  width: fit-content;
  max-width: 100%;
  padding: calc(var(--espace-1) * 0.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
}
.profil-statut {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  margin: 0;
  padding: 0 var(--espace-2);
  border: var(--filet-fin) solid transparent;
  border-radius: var(--rayon-champ);
  color: var(--couleur-texte);
  font-weight: normal;
  cursor: pointer;
}
.profil-statut input {
  position: absolute;
  opacity: 0;
}
.profil-statut b {
  display: inline-flex;
  align-items: center;
  font-weight: var(--typo-fort-graisse);
}
.profil-statut b::before {
  content: "";
  display: inline-block;
  width: var(--espace-1);
  height: var(--espace-1);
  flex: none;
  margin-right: var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-succes);
}
.profil-statut[data-statut="ne_pas_deranger"] b::before {
  background: var(--couleur-erreur);
}
.profil-statut[data-statut="absent"] b::before {
  background: var(--couleur-alerte);
}
.profil-statut:has(input:checked) {
  border-color: var(--couleur-bord);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.profil-statut:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
/* L'aide du statut choisi seulement, sans script. */
.profil-statut-aides > span {
  display: none;
}
.profil-statuts:has(input[value="disponible"]:checked) .profil-statut-aides > [data-statut="disponible"],
.profil-statuts:has(input[value="ne_pas_deranger"]:checked) .profil-statut-aides > [data-statut="ne_pas_deranger"],
.profil-statuts:has(input[value="absent"]:checked) .profil-statut-aides > [data-statut="absent"] {
  display: inline;
}
.profil-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) var(--espace-2);
  margin: 0 calc(var(--espace-3) * -1);
  padding: var(--espace-2) var(--espace-3);
  border-top: var(--filet-fin) solid var(--couleur-bord);
  border-radius: 0 0 var(--rayon-bloc) var(--rayon-bloc);
  background: var(--couleur-surface);
}
.profil-actions .profil-aide {
  margin: 0;
}
/* Menu du compte : le nom et la photo en pied de menu ; un clic ouvre le panneau du compte. */
.enveloppe-moi {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  width: 100%;
  min-height: var(--cible-tactile);
  margin: var(--espace-1) 0;
  padding: var(--espace-1);
  border: 0;
  border-radius: var(--rayon-carte);
  background: var(--couleur-nav-survol);
  color: inherit;
  text-align: left;
}
/* Menu du compte ouvert : le bloc d'identité du bas s'efface, rien ne dépasse sous le menu (retour d'Esteban du 23/10/2026).
   Seuls son contenu et son fond disparaissent : le bouton, qui ouvre le menu, garde le focus et son indicateur (revue de #186). */
.enveloppe-menu:has(#enveloppe-compte:popover-open) .enveloppe-moi {
  background: transparent;
}
.enveloppe-menu:has(#enveloppe-compte:popover-open) .enveloppe-moi > * {
  opacity: 0;
}
.enveloppe-moi > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.enveloppe-moi small {
  opacity: 0.85;
  font-size: var(--typo-petit-taille);
}
.enveloppe-compte {
  position: fixed;
  inset: auto auto calc(var(--espace-1) * 13) var(--espace-2);
  width: min(calc(var(--espace-1) * 38), calc(100vw - var(--espace-4)));
  margin: 0;
  padding: var(--espace-1);
  border: 0;
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-haute);
}
.compte-tete {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1);
  margin-bottom: var(--espace-1);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.compte-tete > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.compte-tete small {
  color: var(--couleur-texte-doux);
}
.enveloppe-compte > a {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  padding: var(--espace-1) calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-champ);
  color: var(--couleur-texte);
  font-weight: var(--typo-fort-graisse);
  text-decoration: none;
}
/* Survol : le panneau est clair sur une navigation qui peut être sombre ; ses éléments ne prennent JAMAIS les couleurs de
   survol de la navigation (texte clair) : fond et texte du panneau, contraste AA (test en vrai navigateur). */
.enveloppe-menu .enveloppe-compte > a:hover,
.enveloppe-menu .enveloppe-compte > a:focus-visible {
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.compte-statuts {
  display: grid;
  gap: calc(var(--espace-1) * 0.5);
  margin: 0;
  padding: var(--espace-1) calc(var(--espace-1) * 1.5);
}
.compte-statuts > span {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.compte-statuts > div {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espace-1) * 0.5);
}
.enveloppe-compte button.compte-statut {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: calc(var(--espace-1) * 0.5) var(--espace-1);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--typo-petit-taille);
}
.enveloppe-compte button.compte-statut[aria-pressed="true"] {
  border-color: var(--couleur-marque);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.enveloppe-menu .enveloppe-compte button.compte-statut:hover {
  border-color: var(--couleur-bord);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.enveloppe-menu .enveloppe-compte button.compte-statut[aria-pressed="true"]:hover {
  border-color: var(--couleur-marque);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
/* « Paramètres du cabinet » : les écrans de réglage en tuiles. */
.parametres-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 36)), 1fr));
  /* Toutes les rangées à la même hauteur : une tuile seule en 2e rangée a la taille des autres (demande d'Esteban). */
  grid-auto-rows: 1fr;
  gap: var(--espace-2);
  margin: var(--espace-3) 0 0;
  padding: 0;
  list-style: none;
}
.parametres-tuiles > li {
  display: flex;
}
.parametres-tuile {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-3);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
  text-decoration: none;
}
.parametres-tuile b {
  display: block;
}
.parametres-tuile small {
  color: var(--couleur-texte-doux);
}
.parametres-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
  border-radius: var(--rayon-champ);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}

@media (max-width: 699px) {
  .console-deux,
  .console-compte-carte form.console-compte-en-ligne {
    grid-template-columns: minmax(0, 1fr);
  }
  .enveloppe-page > form.profil-formulaire:has(.profil-champs) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-3);
  }
  .profil-apercu {
    position: static;
  }
  .profil-champs {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--espace-3) var(--espace-2) 0;
  }
  .profil-actions {
    position: static;
    margin: 0 calc(var(--espace-2) * -1);
    padding: var(--espace-2);
  }
  .profil-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .profil-statut {
    justify-content: center;
    padding: calc(var(--espace-1) * 0.5) var(--espace-1);
    text-align: center;
  }
  .console-version,
  .console-recap {
    grid-template-columns: minmax(0, 1fr);
  }
  .equipe-fiche {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--espace-3) var(--espace-2);
    border-radius: 0;
  }
  nav.console-rail .console-compte {
    inset: calc(var(--espace-1) * 9) var(--espace-1) auto var(--espace-1);
    width: auto;
  }
  form.apparence .apparence-mise {
    grid-template-columns: minmax(0, 1fr);
  }
  .console-studio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .console-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-1);
    height: auto;
    padding: var(--espace-2);
  }
  .console-rail .console-rail-marque {
    margin: 0 var(--espace-1) 0 0;
  }
  .console-rail form {
    margin: 0 0 0 auto;
  }
  .console-corps {
    padding: 0 var(--espace-2) var(--espace-4);
  }
  .console-moi {
    text-align: left;
  }
  .console-panneaux {
    grid-template-columns: minmax(0, 1fr);
  }
  .console-rangee {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .console-rangee .enveloppe-pastille {
    grid-column: 2;
    justify-self: start;
  }
  .console-rangee > .enveloppe-ico {
    grid-column: 3;
    grid-row: 1;
  }
  .console-connecteur {
    flex-direction: column;
    align-items: flex-start;
  }
  .console-connecteur-texte {
    flex: none;
  }
  .console-liste,
  .console-creer,
  .console-panneaux .console-fiche,
  .console-corps > .console-fiche {
    padding: var(--espace-3) var(--espace-2);
  }
  .console-fiche section:not(.enveloppe-decision),
  .console-fiche > dl {
    padding: var(--espace-2);
  }
}

/* ————— Pages d'accès : écran partagé pleine hauteur (refonte du 22/10/2026, après la séance) ————— */

/* À gauche, le formulaire sur le papier ; à droite, le panneau de marque sur la couleur franche. Toute la largeur et toute la
   hauteur de l'écran ; tailles fluides de 1280 à 2560 px (clamp) ; le texte du panneau a SA zone, au-dessus de l'illustration,
   jamais par-dessus (test dans le navigateur : rectangles comparés). `data-mise="large"` (enrôlement) : colonne du
   formulaire plus large, panneau plus étroit. */
.enveloppe-acces {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  font-size: clamp(var(--typo-corps-taille), 0.45vw + var(--espace-1), calc(var(--typo-corps-taille) * 1.3));
}
.enveloppe-acces[data-mise="large"] {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}
.enveloppe-seule {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: clamp(var(--espace-3), 4vw, var(--espace-10)) clamp(var(--espace-3), 6vw, calc(var(--espace-10) * 1.75));
}
.enveloppe-seule > .enveloppe-marque {
  font-size: clamp(var(--typo-titre-3-taille), 1.4vw, var(--typo-titre-2-taille));
}
.enveloppe-seule > .enveloppe-marque .enveloppe-logo {
  width: clamp(calc(var(--icone-taille) * 2), 2.4vw, calc(var(--icone-taille) * 3));
  height: clamp(calc(var(--icone-taille) * 2), 2.4vw, calc(var(--icone-taille) * 3));
  border-radius: calc(var(--rayon-champ) * 1.25);
}
/* Le contenu, centré dans la hauteur, sur une largeur de lecture qui grandit avec l'écran. */
.enveloppe-acces-contenu {
  width: 100%;
  max-width: clamp(calc(var(--espace-1) * 56), 34vw, calc(var(--espace-1) * 90));
  margin: auto 0;
  padding: 0;
}
.enveloppe-acces[data-mise="large"] .enveloppe-acces-contenu {
  max-width: none;
}
.enveloppe-acces-contenu > h1 {
  margin-top: 0;
  font-size: clamp(var(--espace-6), 5.2vw, calc(var(--espace-10) * 1.6));
  line-height: var(--typo-titre-1-interligne);
}
.enveloppe-acces-contenu > p:not([class]) {
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.8);
  font-size: clamp(var(--typo-corps-taille), 0.6vw + var(--espace-1), calc(var(--typo-chapeau-taille) * 1.25));
}
/* Les champs, boutons, messages et cases suivent la taille fluide de la page d'accès (sinon, à 2560 px, le formulaire
   resterait minuscule sous un grand titre). */
.enveloppe-acces-contenu :is(label, input, button, .enveloppe-action, [role="alert"], .enveloppe-garantie, .enveloppe-garanties .enveloppe-garantie, .enveloppe-case, legend, code) {
  font-size: inherit;
}
.enveloppe-acces-contenu .enveloppe-note {
  font-size: clamp(var(--typo-petit-taille), 0.35vw + var(--espace-1), var(--typo-corps-taille));
}
.enveloppe-acces-contenu > .enveloppe-garantie {
  margin-top: var(--espace-5);
  padding: calc(var(--espace-1) * 1.5) var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface);
}
/* Faits rassurants (connexion, codes de secours) : une carte douce, une ligne par fait, chacun avec son icône. */
.enveloppe-garanties {
  display: grid;
  gap: calc(var(--espace-1) * 1.5);
  max-width: calc(var(--mise-en-page-texte-largeur-max) * 0.62);
  margin: var(--espace-5) 0 var(--espace-3);
  padding: var(--espace-2) calc(var(--espace-1) * 2.5);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  list-style: none;
}
.enveloppe-garanties .enveloppe-garantie {
  margin: 0;
  font-size: var(--typo-corps-taille);
  line-height: var(--typo-corps-interligne);
}
.enveloppe-note {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  line-height: var(--typo-petit-interligne);
}
/* Panneau de marque (composition « Accès impossible » préférée par Esteban) : la couleur franche de bord à bord, sur toute la
   hauteur, l'illustration DEDANS et aucun texte dessus. Collé pendant le défilement d'un contenu long (enrôlement).
   Décoratif : caché aux lecteurs d'écran. */
.enveloppe-panneau {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  height: 100vh;
  overflow: hidden;
  padding: clamp(var(--espace-4), 5vw, var(--espace-10));
  background: var(--couleur-bloc-fond);
  color: var(--couleur-bloc-texte);
}
/* Illustration typographique (charte § 6) : deux feuilles légèrement tournées, dans leur propre zone. */
.enveloppe-illustration {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--espace-10) * 2.5);
  margin: 0;
}
/* Couche de décor : effacée chez un hôte non expressif (--decor-expressif à 0, ADR-PF-003). */
.enveloppe-feuille {
  position: absolute;
  opacity: var(--decor-expressif);
  height: 62%;
  aspect-ratio: 21 / 29.7;
  max-width: 46%;
  border-radius: var(--rayon-champ);
  box-shadow: var(--ombre-haute);
  background:
    linear-gradient(var(--couleur-texte), var(--couleur-texte)) 12% 12% / 46% calc(var(--espace-1) * 0.875) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 2.25), var(--couleur-bord) calc(var(--espace-1) * 2.25) calc(var(--espace-1) * 2.25 + var(--filet-fin))) 12% 72% / 76% 52% no-repeat,
    var(--couleur-surface);
}
.enveloppe-feuille:first-child {
  left: 10%;
  top: 6%;
  transform: rotate(calc(-6deg * var(--decor-expressif)));
}
.enveloppe-feuille:nth-child(2) {
  left: 40%;
  top: 26%;
  transform: rotate(calc(5deg * var(--decor-expressif)));
  background:
    linear-gradient(var(--couleur-marque), var(--couleur-marque)) 12% 12% / 76% calc(var(--espace-1) * 1.25) no-repeat,
    linear-gradient(var(--couleur-texte), var(--couleur-texte)) 12% 20% / 52% calc(var(--espace-1) * 0.875) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--espace-1) * 2.25), var(--couleur-bord) calc(var(--espace-1) * 2.25) calc(var(--espace-1) * 2.25 + var(--filet-fin))) 12% 74% / 76% 50% no-repeat,
    var(--couleur-surface);
}
/* Repère « Démonstration » (pages fictives des fournisseurs d'identité) : une pastille, jamais des capitales criées. */
.enveloppe-repere-demo {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  margin: 0 0 var(--espace-2);
  padding: calc(var(--espace-1) * 0.5) calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-alerte-doux);
  color: var(--couleur-alerte);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-repere-demo::before {
  content: "";
  width: var(--espace-1);
  height: var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: currentColor;
}
/* Message d'erreur d'un formulaire d'accès : dessiné par nous (jamais la bulle du navigateur : formulaires `novalidate`). */
.enveloppe-acces-contenu [role="alert"] {
  display: flex;
  gap: var(--espace-1);
  align-items: flex-start;
  margin: var(--espace-1) 0 var(--espace-2);
  padding: calc(var(--espace-1) * 1.5) var(--espace-2);
  border: var(--filet-fin) solid var(--couleur-erreur);
  border-left-width: var(--filet-rubrique);
  border-radius: var(--rayon-champ);
  background: var(--couleur-erreur-doux);
  color: var(--couleur-erreur);
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-etapes {
  display: grid;
  gap: var(--espace-2);
  margin: var(--espace-3) 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.enveloppe-etapes > li {
  padding: var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
/* Une étape titrée (enrôlement) porte son numéro dans son titre ; sinon, le numéro précède le contenu. */
.enveloppe-etapes > li > h2 {
  margin: 0 0 var(--espace-1);
}
.enveloppe-etapes > li > h2::before {
  counter-increment: etape;
  content: counter(etape);
  min-width: calc(var(--espace-1) * 3.5);
  text-align: center;
}
.enveloppe-etapes > li > p:last-child {
  margin-bottom: 0;
}
.enveloppe-etapes > li:not(:has(> h2))::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  display: inline-block;
  margin-bottom: var(--espace-1);
  padding: calc(var(--espace-1) * 0.25) var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-family: var(--typo-rubrique-police);
  font-size: var(--typo-rubrique-taille);
  font-weight: var(--typo-fort-graisse);
  letter-spacing: var(--typo-rubrique-interlettrage);
}
.enveloppe-etapes > li form {
  margin-bottom: 0;
}
/* Enrôlement (recette du 22/10) : les trois étapes à gauche, le QR code à droite, collé en haut pendant le défilement ; une
   colonne sur téléphone, le QR code juste après l'étape qui le demande (voir la requête média). */
.enveloppe-enrolement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--espace-4);
  margin: var(--espace-4) 0 0;
  counter-reset: etape;
}
.enveloppe-enrolement > .enveloppe-etapes {
  margin: 0;
}
.enveloppe-enrolement > .enveloppe-qr-cadre {
  position: sticky;
  top: var(--espace-4);
  margin: 0;
  padding: var(--espace-2);
}
.enveloppe-enrolement .enveloppe-qr {
  width: calc(var(--espace-1) * 30);
  height: calc(var(--espace-1) * 30);
}
/* QR code : toujours foncé sur clair (jetons qr-module et qr-fond, garantis AA dans les deux thèmes), assez grand pour
   l'appareil photo, sur une carte blanche. */
.enveloppe-qr-cadre {
  display: inline-grid;
  margin: var(--espace-1) 0 var(--espace-2);
  padding: var(--espace-1);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-qr-fond);
  box-shadow: var(--ombre-douce);
}
.enveloppe-qr {
  display: block;
  width: calc(var(--espace-1) * 26);
  height: calc(var(--espace-1) * 26);
}
.enveloppe-qr-fond {
  fill: var(--couleur-qr-fond);
}
.enveloppe-qr-modules {
  fill: var(--couleur-qr-module);
}
.enveloppe-cle summary {
  width: fit-content;
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
}
.enveloppe-cle p {
  margin: var(--espace-1) 0;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-etapes .enveloppe-cle-valeur {
  font-size: var(--typo-corps-taille);
  letter-spacing: var(--typo-rubrique-interlettrage);
  word-break: normal;
  overflow-wrap: anywhere;
}
/* Codes de secours : la case « je les ai mis de côté », alignée sur son texte, avant le bouton. */
.enveloppe-page .enveloppe-secours-suite > .enveloppe-case {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  margin: 0;
  font-size: var(--typo-corps-taille);
}
/* « Se souvenir de cet appareil 7 jours » (PF-150) : la case sur sa propre ligne, sous le champ et le bouton. */
.enveloppe-formulaire-code > .enveloppe-case {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  margin: 0;
  font-size: var(--typo-corps-taille);
}
/* Code refusé : un message sur la teinte douce de l'erreur (paire garantie AA), au-dessus du champ, et le champ bordé. */
.enveloppe-erreur-code {
  flex: 1 0 100%;
  max-width: none;
  margin: 0;
  padding: var(--espace-1) calc(var(--espace-1) * 1.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-erreur-doux);
  color: var(--couleur-erreur);
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-page form > .enveloppe-erreur-code {
  color: var(--couleur-erreur);
  font-size: var(--typo-corps-taille);
}
.enveloppe-code[aria-invalid="true"] {
  border-color: var(--couleur-erreur);
}
.enveloppe-etapes code {
  display: block;
  padding: calc(var(--espace-1) * 1.5) var(--espace-2);
  border-radius: var(--rayon-champ);
  font-size: var(--typo-petit-taille);
  line-height: var(--typo-corps-interligne);
  word-break: break-all;
}
.enveloppe-secours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-1);
  margin: var(--espace-3) 0;
  padding: 0;
  list-style: none;
  counter-reset: code;
}
.enveloppe-secours li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--espace-1) * 1.5);
  padding: calc(var(--espace-1) * 1.25) calc(var(--espace-1) * 1.5);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface);
}
.enveloppe-secours li::before {
  counter-increment: code;
  content: counter(code, decimal-leading-zero);
  color: var(--couleur-texte-doux);
  font-family: var(--police-mono);
  font-size: var(--typo-petit-taille);
}
.enveloppe-secours code {
  padding: 0;
  background: transparent;
  font-size: var(--typo-corps-taille);
  letter-spacing: var(--typo-rubrique-interlettrage);
}
/* Un code de secours se lit d'un seul tenant, jamais coupé sur deux lignes (vu à 1440 px le 22/10/2026) : sur la page
   d'accès, l'interlettrage se resserre pour tenir dans sa case. */
.enveloppe-acces-contenu .enveloppe-secours code {
  white-space: nowrap;
  word-break: normal;
  letter-spacing: normal;
}
/* Pied du menu d'un cabinet habillé : « Un produit de {plateforme} » (charte § 2). */
.enveloppe-produit {
  font-size: var(--typo-petit-taille);
  opacity: 0.8;
}

/* Seuil mobile = jeton mise-en-page.mobile-seuil (700 px) : CSS n'admet pas de variable dans une requête média. */
/* ————— Apparence de l'espace (maquette du 22/10/2026, écran 10) : réglages à gauche, aperçu en direct à droite ————— */

.enveloppe-page-large {
  max-width: none;
}
.apparence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espace-5);
  align-items: start;
}
/* Refonte du 22/10/2026 (moins de défilement) : réglages en grille de blocs sur la largeur utile, aperçu collant à droite,
   barre « Enregistrer » collante en bas. */
.enveloppe-page form.apparence {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--espace-4);
  align-items: start;
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.apparence-reglages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-2);
  align-items: start;
}
.apparence-reglages > .apparence-bloc-large {
  grid-column: 1 / -1;
}
/* Mise en page (retour d'Esteban du 22/10/2026) : la disposition et la forme sur des cartes dessinées, côte à côte ; la
   densité et le mode dessous, en sélecteurs segmentés. Aucune pastille noire. */
.apparence-mise {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--espace-4);
  row-gap: var(--espace-3);
}
/* Les choix d'un groupe tiennent toujours sur UNE ligne, en colonnes égales (retour d'Esteban à 2000 px : « Galets » passait
   seul dessous). Densité et clair ou sombre partagent une ligne quand la place le permet. */
.apparence-cartes {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--espace-1);
}
.apparence-mise > .apparence-mise-ligne {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--espace-4);
  row-gap: var(--espace-3);
}
/* Chaque sélecteur reste entier sur une ligne : faute de place, c'est le groupe qui passe dessous, jamais un choix seul. */
.apparence-mise-ligne > .apparence-groupe {
  flex: 0 1 auto;
}
.apparence-mise-ligne .apparence-segments {
  flex-wrap: nowrap;
}
.apparence-carte-choix {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--espace-1);
  padding: var(--espace-1);
  border: calc(var(--filet-fin) * 2) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  font-size: var(--typo-petit-taille);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--mouvement-rapide), background-color var(--mouvement-rapide);
}
.apparence-carte-choix:hover {
  border-color: var(--couleur-bord-fort);
}
.apparence-carte-choix input,
.apparence-segment input {
  position: absolute;
  opacity: 0;
}
.apparence-carte-choix:has(input:checked) {
  border-color: var(--couleur-marque);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.apparence-carte-choix:has(input:focus-visible),
.apparence-segment:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.apparence-carte-choix > .apparence-vignette {
  width: 100%;
}
/* Forme des tuiles, dessinée : trois petites tuiles aux angles de la forme. */
.apparence-forme-dessin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--espace-1) * 0.5);
  width: 100%;
  height: calc(var(--espace-1) * 7);
  padding: calc(var(--espace-1) * 0.75);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
}
.apparence-forme-dessin i {
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: calc(var(--rayon-carte) * 0.45);
  background: var(--couleur-surface);
}
.apparence-forme-dessin[data-forme="nette"] i {
  border-radius: calc(var(--rayon-carte) * 0.1);
}
.apparence-forme-dessin[data-forme="galet"] i {
  border-radius: var(--rayon-carte);
}
.apparence-segments {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espace-1) * 0.5);
  width: fit-content;
  max-width: 100%;
  padding: calc(var(--espace-1) * 0.5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
}
.apparence-segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: var(--espace-1) calc(var(--espace-1) * 1.5);
  flex: 0 0 auto;
  justify-content: center;
  border: 0;
  background: transparent;
  white-space: nowrap;
  border-radius: var(--rayon-compteur);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
  transition: background-color var(--mouvement-rapide), color var(--mouvement-rapide);
}
.apparence-segment:has(input:checked) {
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}
.apparence-couleur-logo {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--espace-1) * 26), 1fr));
  align-items: start;
  column-gap: var(--espace-4);
}
.apparence-groupe {
  display: grid;
  gap: var(--espace-1);
  align-content: start;
  min-width: 0;
}
.apparence-groupe-titre,
label.apparence-groupe-titre {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
.apparence-groupe .apparence-contraste {
  margin: 0;
}
.apparence-avance {
  padding: var(--espace-2) var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
}
.apparence-avance summary {
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
}
.apparence-avance[open] .apparence-themes {
  margin-top: var(--espace-2);
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 22), 1fr));
}
.apparence fieldset {
  display: grid;
  gap: var(--espace-2);
  margin: 0;
  padding: var(--espace-3);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
}
.apparence legend {
  padding: 0 var(--espace-1);
  font-weight: var(--typo-fort-graisse);
}
.apparence-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-2);
}
.apparence-theme {
  position: relative;
  display: grid;
  gap: calc(var(--espace-1) * 0.5);
  padding: var(--espace-1);
  border: calc(var(--filet-fin) * 2) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  cursor: pointer;
}
.apparence-theme input,
.apparence-option input {
  position: absolute;
  opacity: 0;
}
.apparence-theme:has(input:checked) {
  border-color: var(--couleur-marque);
  box-shadow: 0 0 0 var(--focus-epaisseur) var(--couleur-marque-doux);
}
.apparence-theme:has(input:focus-visible),
.apparence-option:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.apparence-theme small {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
  line-height: var(--typo-petit-interligne);
}
/* Vignette d'une thématique : seulement des jetons garantis (bouton, surfaces, encre), jamais une couleur écrite. */
.apparence-vignette {
  display: grid;
  grid-template-columns: 30% 1fr;
  height: calc(var(--espace-1) * 7);
  overflow: hidden;
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-champ);
}
.apparence-vignette > i {
  background: var(--couleur-bouton-fond);
}
.apparence-vignette > span {
  display: grid;
  align-content: center;
  gap: calc(var(--espace-1) * 0.6);
  padding: 0 var(--espace-1);
  background: var(--couleur-fond);
}
.apparence-vignette > span i {
  height: calc(var(--espace-1) * 0.6);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-bord-fort);
}
.apparence-vignette > span i:first-child {
  width: 70%;
  background: var(--couleur-bouton-fond);
}
.apparence-vignette[data-thematique="contemporain"] > i {
  background: var(--couleur-surface-2);
  border-right: var(--filet-fin) solid var(--couleur-bord);
}
.apparence-vignette[data-thematique="contemporain"] > span {
  background: var(--couleur-surface);
}
/* Vignette « Sombre » : encre et papier inversés sur une page claire ; sur une page déjà sombre, les jetons de la page. */
:root:not([data-theme="dark"]) .apparence-vignette[data-thematique="sombre"] > i {
  background: var(--couleur-texte);
}
:root:not([data-theme="dark"]) .apparence-vignette[data-thematique="sombre"] > span {
  background: color-mix(in srgb, var(--couleur-texte) 88%, var(--couleur-fond));
}
:root:not([data-theme="dark"]) .apparence-vignette[data-thematique="sombre"] > span i {
  background: color-mix(in srgb, var(--couleur-fond) 40%, var(--couleur-texte));
}
:root[data-theme="dark"] .apparence-vignette[data-thematique="sombre"] > i {
  background: var(--couleur-nav-fond);
}
.apparence-vignette[data-thematique="doux"] {
  border-radius: var(--rayon-bloc);
}
.apparence-vignette[data-thematique="doux"] > i {
  background: var(--couleur-surface-2);
}
.apparence-couleur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}
.apparence-couleur input[type="color"] {
  width: calc(var(--cible-tactile) * 1.6);
  height: var(--cible-tactile);
  padding: calc(var(--espace-1) * 0.5);
  cursor: pointer;
}
.apparence-couleur button {
  background: var(--couleur-surface);
  border-color: var(--couleur-bord-fort);
  color: var(--couleur-texte);
}
.enveloppe-page .apparence-contraste {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.apparence-contraste {
  margin: 0;
  font-size: var(--typo-petit-taille);
  color: var(--couleur-texte-doux);
}
.apparence-contraste[data-etat="ok"] {
  color: var(--couleur-succes);
}
.apparence-contraste[data-etat="ko"] {
  color: var(--couleur-erreur);
  font-weight: var(--typo-fort-graisse);
}
.apparence-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
}
.apparence-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: var(--rayon-champ);
  cursor: pointer;
}
.apparence-option:has(input:checked) {
  background: var(--couleur-texte);
  border-color: var(--couleur-texte);
  color: var(--couleur-fond);
}
/* « Enregistrer » : une ligne normale en fin de formulaire (revue du 23/10/2026 : la barre collante passait par-dessus les
   titres de la section du dessous). */
.apparence-actions {
  grid-column: 1 / -1;
  max-width: none;
  display: flex;
  justify-content: flex-end;
  margin: var(--espace-1) 0 0;
  padding: var(--espace-2) 0 0;
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
.apparence-cadre-apercu {
  position: sticky;
  top: var(--espace-3);
}
.enveloppe-page .apparence-cadre-apercu > h2 {
  margin-top: 0;
}
.apparence-cadre-apercu > h2::before {
  content: none;
}
/* Aperçu en direct : un petit espace dessiné avec les jetons du thème ; le script de l'enveloppe change la thématique,
   le mode et la densité (attributs) et pose la couleur principale sur le bandeau (et le menu en Classique). */
.apparence-apercu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  min-height: calc(var(--espace-10) * 4);
  overflow: hidden;
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}
.apparence-apercu-menu {
  display: grid;
  /* Une seule colonne bornée à la barre (retour d'Esteban du 23/10/2026) : un nom d'un seul long mot ne l'élargit plus, et ni
     le nom ni les lignes du menu ne passent sous le panneau. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  align-content: start;
  gap: calc(var(--espace-2) * 0.6);
  padding: var(--espace-2) calc(var(--espace-2) * 0.75);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
  font-size: var(--typo-petit-taille);
}
.apparence-apercu-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apparence-apercu-menu i {
  height: calc(var(--espace-1) * 1.2);
  border-radius: var(--rayon-compteur);
  background: currentColor;
  opacity: 0.35;
}
.apparence-apercu-menu i[data-actif] {
  opacity: 0.9;
}
.apparence-apercu-page {
  display: grid;
  align-content: start;
  gap: var(--espace-2);
  padding: calc(var(--espace-2) * 1.4);
}
.apparence-apercu-titre {
  font-family: var(--police-titre);
  font-style: var(--typo-titre-style);
  font-size: var(--typo-titre-3-taille);
}
.apparence-apercu-bandeau {
  height: calc(var(--espace-1) * 6);
  border-radius: var(--rayon-carte);
  background: var(--couleur-bouton-fond);
}
.apparence-apercu-tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--espace-2) * 0.7);
}
.apparence-apercu-tuiles i {
  height: calc(var(--espace-1) * 9);
  border: var(--filet-fin) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
}
.apparence-apercu[data-thematique="contemporain"] {
  background: var(--couleur-surface);
}
.apparence-apercu[data-thematique="contemporain"] .apparence-apercu-menu,
.apparence-apercu[data-thematique="doux"] .apparence-apercu-menu {
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.apparence-apercu[data-thematique="contemporain"] .apparence-apercu-tuiles i {
  background: var(--couleur-fond);
}
.apparence-apercu[data-thematique="contemporain"] .apparence-apercu-tuiles i,
.apparence-apercu[data-thematique="contemporain"] .apparence-apercu-bandeau {
  border-radius: calc(var(--rayon-carte) * 0.6);
}
.apparence-apercu[data-thematique="doux"] .apparence-apercu-tuiles i,
.apparence-apercu[data-thematique="doux"] .apparence-apercu-bandeau {
  border-radius: calc(var(--rayon-carte) * 1.5);
}
.apparence-apercu[data-thematique="contemporain"] .apparence-apercu-titre {
  font-family: var(--police-texte);
  font-style: normal;
}
.apparence-apercu[data-thematique="doux"] .apparence-apercu-titre {
  font-style: normal;
}
/* Aperçu sombre sur une page claire : encre et papier inversés. Sur une page déjà sombre (mode imposé), les jetons de la
   page sont déjà les bons : rien à inverser. */
:root:not([data-theme="dark"]) .apparence-apercu[data-thematique="sombre"],
:root:not([data-theme="dark"]) .apparence-apercu[data-mode="sombre"] {
  background: color-mix(in srgb, var(--couleur-texte) 92%, var(--couleur-fond));
  color: var(--couleur-fond);
}
:root:not([data-theme="dark"]) .apparence-apercu[data-thematique="sombre"] .apparence-apercu-tuiles i,
:root:not([data-theme="dark"]) .apparence-apercu[data-mode="sombre"] .apparence-apercu-tuiles i {
  border-color: color-mix(in srgb, var(--couleur-texte) 65%, var(--couleur-fond));
  background: color-mix(in srgb, var(--couleur-texte) 80%, var(--couleur-fond));
}
:root:not([data-theme="dark"]) .apparence-apercu[data-thematique="sombre"] .apparence-apercu-menu {
  background: var(--couleur-texte);
  color: var(--couleur-fond);
}
:root[data-theme="dark"] .apparence-apercu[data-thematique="sombre"] .apparence-apercu-menu {
  background: var(--couleur-nav-fond);
  color: var(--couleur-nav-texte-fort);
}
/* Disposition dans l'aperçu (retour d'Esteban : l'aperçu ne suivait ni la disposition ni la forme). « Studio » : l'espace
   posé sur la couleur du cabinet, le menu dessus, la page en carte surélevée ; « Bento » : page claire, tuiles en mosaïque. */
.apparence-apercu[data-disposition="studio"] {
  background: var(--couleur-bouton-fond);
}
.apparence-apercu[data-disposition="studio"] .apparence-apercu-menu {
  background: transparent;
  color: var(--couleur-sur-marque);
}
.apparence-apercu[data-disposition="studio"] .apparence-apercu-page {
  margin: var(--espace-1) var(--espace-1) var(--espace-1) 0;
  border-radius: calc(var(--rayon-carte) * 1.2);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
}
.apparence-apercu[data-disposition="bento"] .apparence-apercu-menu {
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.apparence-apercu[data-disposition="bento"] .apparence-apercu-tuiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.apparence-apercu[data-disposition="bento"] .apparence-apercu-tuiles i {
  height: calc(var(--espace-1) * 5);
}
.apparence-apercu[data-disposition="bento"] .apparence-apercu-tuiles i:first-child {
  grid-row: span 2;
  height: auto;
}
/* Mode sombre dans l'aperçu (retour d'Esteban : seules les tuiles changeaient) : la page principale aussi, texte compris,
   en Studio comme en Bento. Sur une page déjà sombre, les jetons de la page sont déjà les bons. */
:root:not([data-theme="dark"]) .apparence-apercu[data-mode="sombre"] .apparence-apercu-page,
:root:not([data-theme="dark"]) .apparence-apercu[data-thematique="sombre"] .apparence-apercu-page {
  background: color-mix(in srgb, var(--couleur-texte) 92%, var(--couleur-fond));
  color: var(--couleur-fond);
}
:root:not([data-theme="dark"]) .apparence-apercu[data-disposition="bento"][data-mode="sombre"] .apparence-apercu-menu {
  background: var(--couleur-texte);
  color: var(--couleur-fond);
}
/* Forme des tuiles dans l'aperçu : mêmes rapports que la feuille du cabinet (« nette » ×0,35, « galet » ×2,2). */
.apparence-apercu[data-forme="nette"] .apparence-apercu-tuiles i,
.apparence-apercu[data-forme="nette"] .apparence-apercu-bandeau,
.apparence-apercu[data-forme="nette"] .apparence-apercu-page {
  border-radius: calc(var(--rayon-carte) * 0.35);
}
.apparence-apercu[data-forme="galet"] .apparence-apercu-tuiles i,
.apparence-apercu[data-forme="galet"] .apparence-apercu-bandeau,
.apparence-apercu[data-forme="galet"] .apparence-apercu-page {
  border-radius: calc(var(--rayon-carte) * 2.2);
}
.apparence-apercu[data-densite="aeree"] .apparence-apercu-page {
  gap: calc(var(--espace-2) * 1.15);
  padding: calc(var(--espace-2) * 1.6);
}
.apparence-apercu[data-densite="compacte"] .apparence-apercu-page {
  gap: calc(var(--espace-2) * 0.85);
  padding: calc(var(--espace-2) * 1.2);
}
.apparence-retour {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  margin-top: var(--espace-5);
}
.enveloppe-page form.apparence-retour > p {
  margin: 0;
  color: var(--couleur-texte-doux);
}
.apparence-retour button {
  background: var(--couleur-surface);
  border-color: var(--couleur-bord-fort);
  color: var(--couleur-texte);
}

/* ═════════ Disposition « Studio » (par défaut ; choix d'Esteban du 22/10/2026, ADR-PF-078) ═════════
   L'espace est posé sur la couleur du cabinet : le menu et la toile prennent le fond des boutons (paire `sur-marque` sur
   `bouton-fond` garantie AA), la page est un grand panneau clair aux angles doux, inséré dans la toile. Le thème (la
   palette) et la forme des tuiles restent des réglages à part : ici, seulement la mise en page et des renvois à des jetons.
   « Bento » (`data-disposition="bento"`) garde la page claire et pose les connecteurs en mosaïque. */
html:not([data-disposition="bento"]) body:has(> .enveloppe-menu) {
  background: var(--couleur-bouton-fond);
}
html:not([data-disposition="bento"]) .enveloppe-menu {
  --couleur-nav-fond: var(--couleur-bouton-fond);
  --couleur-nav-texte: var(--couleur-sur-marque);
  --couleur-nav-texte-fort: var(--couleur-sur-marque);
  --couleur-nav-survol: var(--couleur-bouton-fond);
  --couleur-nav-actif-fond: var(--couleur-surface);
  --couleur-nav-actif-texte: var(--couleur-marque-texte);
  --couleur-nav-bord: color-mix(in srgb, var(--couleur-sur-marque) 24%, var(--couleur-bouton-fond));
}
/* La marque d'Archie posée sur la toile garde un liseré clair : sur une toile de sa couleur, elle reste visible. */
html:not([data-disposition="bento"]) .enveloppe-menu .enveloppe-marque > svg {
  border-radius: var(--rayon-champ);
  box-shadow: 0 0 0 var(--filet-rubrique) var(--couleur-nav-texte-fort);
}
/* Logo du cabinet posé sur une plaque claire : quel que soit son dessin, il reste lisible sur la toile du cabinet. */
html:not([data-disposition="bento"]) .enveloppe-menu .enveloppe-marque-cabinet {
  padding: var(--espace-1) calc(var(--espace-1) * 1.5);
  border-bottom: 0;
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
}
/* Thème sombre imposé : la plaque du logo reste claire (texte clair du thème), un logo foncé reste lisible. */
:root[data-theme="dark"]:not([data-disposition="bento"]) .enveloppe-menu .enveloppe-marque-cabinet {
  background: var(--couleur-texte);
}
/* Vignettes de la disposition (écran « Apparence ») : Studio, la page posée dans la couleur ; Bento, une mosaïque claire. */
.apparence-vignette[data-disposition="studio"] {
  grid-template-columns: 22% 1fr;
  padding: calc(var(--espace-1) * 0.75) calc(var(--espace-1) * 0.75) calc(var(--espace-1) * 0.75) 0;
  background: var(--couleur-bouton-fond);
}
.apparence-vignette[data-disposition="studio"] > i {
  background: transparent;
}
.apparence-vignette[data-disposition="studio"] > span {
  border-radius: var(--rayon-champ);
}
.apparence-vignette[data-disposition="bento"] > span {
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: calc(var(--espace-1) * 0.5);
  padding: calc(var(--espace-1) * 0.75);
}
.apparence-vignette[data-disposition="bento"] > span i,
.apparence-vignette[data-disposition="bento"] > span i:first-child {
  width: auto;
  height: auto;
  border-radius: calc(var(--rayon-champ) * 0.5);
  background: var(--couleur-marque-doux);
}
.apparence-vignette[data-disposition="bento"] > span i:first-child {
  grid-row: span 2;
  background: var(--couleur-bouton-fond);
}
/* Entrée courante : une pastille claire, lisible sur toute couleur de cabinet (texte de marque sur surface, AA). */
html:not([data-disposition="bento"]) .enveloppe-menu a[aria-current="page"] {
  box-shadow: var(--ombre-douce);
}
html:not([data-disposition="bento"]) body:has(> .enveloppe-menu) > .enveloppe-page {
  max-width: none;
  min-height: calc(100vh - var(--espace-2) * 2);
  margin: var(--espace-2) var(--espace-2) var(--espace-2) 0;
  padding: var(--page-marge-haut) clamp(var(--page-marge-cote-min), 4vw, var(--page-marge-cote)) var(--espace-8);
  border-radius: calc(var(--rayon-carte) * 2);
  background: var(--couleur-fond);
  box-shadow: var(--ombre-haute);
}
html:not([data-disposition="bento"]) body:has(> .enveloppe-menu) > .enveloppe-page-ecran {
  overflow: hidden;
  padding: 0;
}
html:not([data-disposition="bento"]) .enveloppe-page-ecran .enveloppe-cadre {
  min-height: calc(100vh - var(--espace-2) * 2);
}
/* Gabarit de page unique (ADR-PF-089) : titre, phrase d'aide, puis le contenu, à la même place sur toutes les pages. Un écran
   de connecteur qui fournit sa phrase d'aide reçoit l'en-tête de l'enveloppe ; son cadre suit, aligné, sans marge propre. */
.enveloppe-page > h1,
.enveloppe-entete-page > h1 {
  margin: 0 0 var(--page-titre-espace);
}
.enveloppe-page > h1 + p,
.enveloppe-entete-page > p {
  max-width: var(--page-chapeau-largeur);
  margin: 0 0 var(--page-entete-contenu-espace);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-chapeau-taille);
}
/* En-tête de page FIXE (retour d'Esteban du 23/10/2026, écrans « liste + détail ») : la page de l'écran occupe exactement la
   hauteur de la fenêtre ; l'en-tête reste visible, le cadre prend le reste et c'est LUI qui défile (le connecteur fait
   défiler sa liste et son détail chacun de son côté). Sur téléphone, la page défile normalement. */
.enveloppe-page.enveloppe-page-ecran-gabarit,
html:not([data-disposition="bento"]) body:has(> .enveloppe-menu) > .enveloppe-page-ecran-gabarit {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--espace-2) * 2);
  min-height: 0;
  padding: var(--page-marge-haut) clamp(var(--page-marge-cote-min), 4vw, var(--page-marge-cote)) 0;
}
.enveloppe-page-ecran-gabarit > .enveloppe-entete-page {
  flex: none;
}
.enveloppe-page-ecran-gabarit .enveloppe-cadre,
html:not([data-disposition="bento"]) .enveloppe-page-ecran-gabarit .enveloppe-cadre {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

/* Accueil : un grand bonjour et l'action principale à gauche, le résumé du jour à droite, puis les connecteurs. */
.enveloppe-accueil-tete {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--espace-3);
  margin: 0 0 var(--espace-6);
}
.enveloppe-accueil-bonjour {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espace-4);
  min-width: 0;
  overflow: hidden;
  padding: clamp(var(--espace-3), 3vw, var(--espace-6));
  border-radius: calc(var(--rayon-carte) * 1.6);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
/* Décor : un grand disque doux et un petit, derrière le texte (aucune donnée, aucun texte dessus). */
.enveloppe-accueil-bonjour::before,
.enveloppe-accueil-bonjour::after {
  content: "";
  position: absolute;
  border-radius: var(--rayon-compteur);
  pointer-events: none;
}
.enveloppe-accueil-bonjour::before {
  top: calc(var(--espace-10) * -1.2);
  right: calc(var(--espace-10) * -1.2);
  width: calc(var(--espace-10) * 5);
  height: calc(var(--espace-10) * 5);
  background: var(--couleur-marque-doux);
}
.enveloppe-accueil-bonjour::after {
  right: var(--espace-6);
  bottom: var(--espace-5);
  width: calc(var(--espace-10) * 1.2);
  height: calc(var(--espace-10) * 1.2);
  background: color-mix(in srgb, var(--couleur-categorie-ocre) 40%, var(--couleur-surface));
}
.enveloppe-accueil-bonjour > * {
  position: relative;
  z-index: 1;
  margin: 0;
}
.enveloppe-accueil-bonjour > .enveloppe-surtitre {
  align-self: flex-start;
}
.enveloppe-accueil .enveloppe-accueil-bonjour h1 {
  display: flex;
  flex-direction: column;
  margin: var(--espace-1) 0 0;
  font-size: clamp(var(--espace-6), 6vw, calc(var(--espace-10) * 1.5));
  line-height: var(--typo-titre-1-interligne);
}
.enveloppe-accueil-bonjour h1 .enveloppe-accueil-espace {
  margin: 0;
  color: var(--couleur-marque-texte);
  font-family: var(--police-texte);
  font-style: normal;
  font-weight: var(--typo-chiffre-graisse);
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Le nom du cabinet tient sur la largeur du panneau : sa taille suit la longueur de son plus long mot (aucune coupure). */
.enveloppe-accueil-bonjour {
  container-type: inline-size;
}
.enveloppe-accueil-bonjour h1 .enveloppe-accueil-espace[data-longueur="moyen"] {
  font-size: min(100%, 13cqi);
}
.enveloppe-accueil-bonjour h1 .enveloppe-accueil-espace[data-longueur="long"] {
  font-size: min(100%, 9.5cqi);
}
/* Accueil resserré (retour d'Esteban du 24/10/2026) : le bonjour, le résumé du jour, « Vos connecteurs » et la première rangée de
   cartes tiennent presque sur un écran à 1440 × 900. */
.enveloppe-accueil-tete {
  margin-bottom: var(--espace-3);
}
.enveloppe-accueil-bonjour {
  gap: var(--espace-3);
  padding: clamp(var(--espace-3), 2vw, var(--espace-4));
}
.enveloppe-accueil .enveloppe-accueil-bonjour h1 {
  font-size: clamp(var(--espace-6), 4.2vw, var(--espace-10));
}
.enveloppe-page section:not(.enveloppe-decision).enveloppe-accueil-connecteurs {
  margin-top: 0;
}
.enveloppe-accueil-connecteurs > h2 {
  margin-top: 0;
}
.enveloppe-accueil-connecteurs > p {
  margin-bottom: var(--espace-2);
}
.enveloppe-accueil-connecteurs .enveloppe-maquette {
  aspect-ratio: 5 / 2;
}
/* Sur l'Accueil, le bénéfice d'un connecteur tient en deux lignes ; son texte entier reste sur sa fiche (« Bientôt »). */
.enveloppe-accueil-connecteurs .enveloppe-bientot-texte > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.enveloppe-accueil-bonjour h1 .enveloppe-accueil-espace[data-longueur="tres-long"] {
  font-size: min(100%, 7cqi);
}
.enveloppe-accueil-action .enveloppe-action {
  min-height: calc(var(--cible-tactile) * 1.3);
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-carte);
  font-size: var(--typo-chapeau-taille);
  box-shadow: var(--ombre-haute);
}
.enveloppe-accueil-bonjour .enveloppe-a-faire {
  margin: 0;
}
/* Résumé : une carte douce (surface secondaire, encre ; refonte du 22/10/2026, moins de couleur franche). */
.enveloppe-accueil-resume {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  min-width: 0;
  padding: var(--espace-4);
  border-radius: calc(var(--rayon-carte) * 1.6);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.enveloppe-accueil-resume p {
  margin: 0;
}
.enveloppe-accueil-resume .enveloppe-chiffre span {
  color: var(--couleur-texte-doux);
}
.enveloppe-accueil-resume .enveloppe-chiffre b {
  font-size: calc(var(--typo-chiffre-taille) * 1.4);
}
.enveloppe-accueil-resume-titre {
  color: var(--couleur-texte-doux);
  font-family: var(--typo-rubrique-police);
  font-size: var(--typo-rubrique-taille);
  letter-spacing: var(--typo-rubrique-interlettrage);
  text-transform: uppercase;
}
.enveloppe-accueil-liens {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.enveloppe-accueil-liens a {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  transition: transform var(--mouvement-rapide), box-shadow var(--mouvement-rapide);
  font-weight: var(--typo-fort-graisse);
  text-decoration: none;
}
.enveloppe-accueil-liens a span {
  flex: 1;
}
.enveloppe-accueil-liens a:hover {
  box-shadow: var(--ombre-douce);
  transform: translateX(var(--focus-decalage));
}
.enveloppe-accueil-liens .enveloppe-ico:last-child {
  transition: transform var(--mouvement-rapide);
}
.enveloppe-accueil-liens a:hover .enveloppe-ico:last-child {
  transform: translateX(var(--focus-decalage));
}

/* Cartes des connecteurs : une teinte par brique (jetons de catégorie de la DA mêlés à la surface), le texte en encre
   (AA), une jauge d'état ; au survol, la carte se lève et son dessin s'anime. */
.enveloppe-bientot > li {
  background: color-mix(in srgb, var(--couleur-categorie-bleu) 16%, var(--couleur-surface));
  transition: transform var(--mouvement-elevation), box-shadow var(--mouvement-elevation);
}
.enveloppe-bientot > li .enveloppe-maquette {
  border-bottom: 0;
  background: color-mix(in srgb, var(--couleur-categorie-bleu) 30%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="contacts"],
.enveloppe-bientot > li[data-brique="dossiers"] {
  background: color-mix(in srgb, var(--couleur-categorie-ocre) 16%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="contacts"] .enveloppe-maquette,
.enveloppe-bientot > li[data-brique="dossiers"] .enveloppe-maquette {
  background: color-mix(in srgb, var(--couleur-categorie-ocre) 30%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="ia"],
.enveloppe-bientot > li[data-brique="assistant"] {
  background: color-mix(in srgb, var(--couleur-categorie-violet) 16%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="ia"] .enveloppe-maquette,
.enveloppe-bientot > li[data-brique="assistant"] .enveloppe-maquette {
  background: color-mix(in srgb, var(--couleur-categorie-violet) 30%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="charte"] {
  background: color-mix(in srgb, var(--couleur-categorie-vert) 16%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="charte"] .enveloppe-maquette {
  background: color-mix(in srgb, var(--couleur-categorie-vert) 30%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="lecture"] {
  background: color-mix(in srgb, var(--couleur-categorie-rose) 16%, var(--couleur-surface));
}
.enveloppe-bientot > li[data-brique="lecture"] .enveloppe-maquette {
  background: color-mix(in srgb, var(--couleur-categorie-rose) 30%, var(--couleur-surface));
}
.enveloppe-bientot > li:hover {
  box-shadow: var(--ombre-haute);
  transform: translateY(calc(var(--espace-1) * -1));
}
.enveloppe-bientot > li .enveloppe-maquette i {
  transition: transform var(--mouvement-elevation);
}
.enveloppe-bientot > li:hover .enveloppe-maquette i:nth-child(odd) {
  transform: translateX(var(--focus-decalage));
}
.enveloppe-bientot > li:hover .enveloppe-maquette i:nth-child(even) {
  transform: translateX(calc(var(--focus-decalage) * -1));
}
.enveloppe-bientot > li .enveloppe-bientot-texte p {
  color: var(--couleur-texte);
}
html:not([data-disposition="bento"]) .enveloppe-accueil .enveloppe-bientot {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 38), 1fr));
}
/* Bento : la première brique en grand, les autres autour, en mosaïque. */
html[data-disposition="bento"] .enveloppe-accueil .enveloppe-bientot {
  grid-auto-flow: dense;
}
html[data-disposition="bento"] .enveloppe-accueil .enveloppe-bientot > li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-disposition="bento"] .enveloppe-accueil .enveloppe-bientot > li:first-child .enveloppe-maquette {
  flex: 1;
  aspect-ratio: auto;
}

/* Jauge d'état : quatre crans, de « Bientôt » (1) à « En service » (4), doublés du mot. */
.enveloppe-jauge::before {
  content: none;
}
.enveloppe-crans {
  display: inline-flex;
  gap: calc(var(--espace-1) * 0.375);
}
.enveloppe-crans i {
  width: calc(var(--espace-1) * 0.75);
  height: calc(var(--espace-1) * 0.75);
  border-radius: var(--rayon-compteur);
  background: currentColor;
  opacity: 0.25;
}
.enveloppe-jauge[data-crans="1"] .enveloppe-crans i:nth-child(-n + 1),
.enveloppe-jauge[data-crans="2"] .enveloppe-crans i:nth-child(-n + 2),
.enveloppe-jauge[data-crans="3"] .enveloppe-crans i:nth-child(-n + 3),
.enveloppe-jauge[data-crans="4"] .enveloppe-crans i {
  opacity: 1;
}
.enveloppe-bientot > li .enveloppe-jauge {
  background: var(--couleur-surface);
  color: var(--couleur-texte);
}


@media (max-width: 699px) {
  html:not([data-disposition="bento"]) body:has(> .enveloppe-menu) > .enveloppe-page {
    min-height: 0;
    margin: 0 var(--espace-1) var(--espace-1);
    padding: var(--espace-3) var(--espace-2) var(--espace-6);
    border-radius: var(--rayon-carte);
  }
  html:not([data-disposition="bento"]) body:has(> .enveloppe-menu) > .enveloppe-page-ecran-gabarit {
    display: block;
    height: auto;
    padding: var(--espace-3) var(--espace-2) 0;
  }
  html:not([data-disposition="bento"]) .enveloppe-page-ecran-gabarit .enveloppe-cadre {
    min-height: calc(100vh - var(--espace-8) * 3);
  }
  .enveloppe-accueil-tete,
  .collegues-grille {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-disposition="bento"] .enveloppe-accueil .enveloppe-bientot > li:first-child {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Thèmes prêts (écran « Apparence ») : une vignette par palette ; ses couleurs viennent de la feuille du cabinet. */
.apparence-palettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--espace-1) * 15), 1fr));
  gap: var(--espace-1);
}
.apparence-palette {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.5);
  padding: var(--espace-1);
  border: calc(var(--filet-fin) * 2) solid var(--couleur-bord);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  cursor: pointer;
  transition: border-color var(--mouvement-rapide), transform var(--mouvement-rapide);
}
.apparence-palette:hover {
  transform: translateY(calc(var(--filet-fin) * -2));
}
.apparence-palette:has(input:checked) {
  border-color: var(--couleur-marque);
  box-shadow: 0 0 0 calc(var(--filet-fin) * 3) var(--couleur-marque-doux);
}
.apparence-palette input {
  position: absolute;
  opacity: 0;
}
.apparence-palette:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.apparence-palette-vignette {
  display: grid;
  align-self: stretch;
  width: 100%;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--espace-1) * 0.5);
  height: calc(var(--espace-1) * 6);
  padding: calc(var(--espace-1) * 0.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
}
.apparence-palette-vignette i {
  border-radius: calc(var(--rayon-champ) * 0.6);
  background: var(--couleur-surface-2);
}
.apparence-palette-vignette i:first-child {
  grid-row: span 2;
  background: var(--couleur-bouton-fond);
}
.apparence-palette b {
  font-size: var(--typo-petit-taille);
}
.apparence-palette small {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}

/* Collègues (refonte du 22/10/2026) : inviter à gauche, l'équipe à droite ; une ligne par personne. */
/* Deux colonnes dès qu'il y a la place, une seule sur téléphone (la règle mobile, placée plus haut, ne l'emportait pas). */
.collegues-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 44)), 1fr));
  gap: var(--espace-3);
  align-items: start;
}
.enveloppe-page section:not(.enveloppe-decision).collegues-inviter,
.enveloppe-page section:not(.enveloppe-decision).collegues-equipe {
  margin: 0;
}
.collegues-inviter form {
  display: grid;
  gap: var(--espace-1);
  justify-items: start;
}
.collegues-avance {
  margin-top: var(--espace-3);
}
.collegues-avance summary {
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
}
.collegues-liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.collegues-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) var(--espace-2);
  padding: var(--espace-2) 0;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.collegues-ligne:last-child {
  border-bottom: 0;
}
.collegues-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--espace-1) * 5);
  height: calc(var(--espace-1) * 5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
  font-size: var(--typo-petit-taille);
}
.collegues-nom {
  display: flex;
  flex: 1 1 calc(var(--espace-1) * 20);
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.collegues-nom > span {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.collegues-ligne form {
  margin: 0;
}
/* Comptes par mot de passe (maquette « accès et rôles ») : rôle et état sous l'adresse, gestes à droite. */
.collegues-vous {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}
.collegues-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin-top: var(--espace-1);
}
.collegues-gestes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1);
}
.collegues-compte[data-desactive] {
  opacity: 0.6;
}
.collegues-inviter select {
  width: 100%;
}
.collegues-retirer {
  min-height: calc(var(--cible-tactile) * 0.85);
  border-color: var(--couleur-bord-fort);
  background: transparent;
  color: var(--couleur-texte);
  box-shadow: none;
}

/* Explorateur « Dossiers » (PF-050, ADR-PF-094), repris de la maquette validée B1/B2/B3 (maquette.css) : trois colonnes (clients,
   documents, document), tableau, puces, fenêtres natives. Jetons du thème seulement ; une colonne sur téléphone. */
/* Trois colonnes quand la place le permet, à la ligne sinon (sans requête média : seules celles du téléphone et du mouvement réduit
   existent dans les feuilles) ; chaque colonne défile seule au-delà de la hauteur de la fenêtre, et toutes ont la même hauteur. */
.dossiers-explorateur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  align-items: stretch;
}
.dossiers-arbre-col {
  flex: 1 1 calc(var(--espace-1) * 30);
  max-width: calc(var(--espace-1) * 36);
}
.dossiers-liste {
  flex: 3 1 calc(var(--espace-1) * 52);
}
.dossiers-detail-col {
  flex: 1 1 calc(var(--espace-1) * 38);
  max-width: calc(var(--espace-1) * 46);
}
.dossiers-col {
  min-width: 0;
  min-height: calc(var(--espace-10) * 6);
  max-height: calc(100vh - var(--espace-10) * 2.6);
  overflow: auto;
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.dossiers-message {
  margin: 0 0 var(--espace-2);
}
.dossiers-message-erreur {
  color: var(--couleur-erreur);
}
.dossiers-arbre {
  padding: var(--espace-2);
}
.dossiers-arbre ul,
.dossiers-arbre li,
.dossiers-versions,
.dossiers-droits {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.dossiers-arbre ul ul {
  padding-left: var(--espace-3);
}
.dossiers-arbre summary {
  list-style: none;
  cursor: pointer;
}
.dossiers-arbre summary::-webkit-details-marker {
  display: none;
}
.dossiers-noeud {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  min-width: 0;
  padding: calc(var(--espace-1) * 0.75) var(--espace-1);
  border-radius: var(--rayon-champ);
  font-size: var(--typo-corps-taille);
  color: var(--couleur-texte);
}
.dossiers-noeud:hover {
  background: var(--couleur-marque-doux);
}
.dossiers-noeud > a,
.dossiers-noeud > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.dossiers-noeud > small {
  margin-left: auto;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.dossiers-noeud[data-courant] {
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
}
.dossiers-noeud .enveloppe-ico {
  flex: none;
}
.dossiers-noeud .dossiers-chev {
  width: var(--espace-2);
  height: var(--espace-2);
}
.dossiers-titre-col,
.dossiers-section-titre {
  margin: var(--espace-1);
  font-family: var(--typo-surtitre-police);
  font-size: var(--typo-surtitre-taille);
  letter-spacing: var(--typo-surtitre-interlettrage);
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}
.dossiers-section-titre {
  margin-left: 0;
}
.dossiers-liste {
  display: flex;
  flex-direction: column;
}
.dossiers-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-1) var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.dossiers-fil {
  display: flex;
  align-items: center;
  gap: calc(var(--espace-1) * 0.5);
  min-width: 0;
  flex-wrap: wrap;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.dossiers-fil a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--espace-1) * 0.5);
  color: inherit;
  text-decoration: none;
}
.dossiers-fil b,
.dossiers-fil b a {
  color: var(--couleur-texte);
}
.dossiers-fil .enveloppe-ico {
  width: var(--espace-2);
  height: var(--espace-2);
}
.dossiers-actions {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
}
.dossiers-bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--puce-hauteur);
  padding: 0 var(--espace-2);
  border: var(--filet-fin) solid var(--couleur-bord-fort);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font: inherit;
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dossiers-bouton.dossiers-principal {
  background: var(--couleur-bouton-fond);
  border-color: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
}
.dossiers-bouton .enveloppe-ico {
  width: var(--espace-2);
  height: var(--espace-2);
}
.dossiers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--typo-corps-taille);
}
.dossiers-table th {
  text-align: left;
  padding: var(--espace-1) var(--espace-3);
  color: var(--couleur-texte-doux);
  font-family: var(--typo-surtitre-police);
  font-size: var(--typo-surtitre-taille);
  letter-spacing: var(--typo-surtitre-interlettrage);
  text-transform: uppercase;
  font-weight: var(--typo-texte-graisse);
  white-space: nowrap;
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
}
.dossiers-table td {
  position: relative;
  padding: calc(var(--espace-1) * 1.25) var(--espace-3);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
  vertical-align: middle;
}
.dossiers-table tbody tr:hover td {
  background: var(--couleur-surface-2);
}
.dossiers-table tr[data-choisi] td {
  background: var(--couleur-marque-doux);
}
.dossiers-table tr[data-choisi] td:first-child {
  box-shadow: inset calc(var(--filet-fin) * 3) 0 0 var(--couleur-marque);
}
.dossiers-nom {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  font-weight: var(--typo-fort-graisse);
}
.dossiers-nom > span {
  min-width: 0;
}
.dossiers-nom a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* Toute la ligne ouvre le document (lien étiré). */
.dossiers-nom a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.dossiers-nom small {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  align-items: center;
  margin-top: calc(var(--espace-1) * 0.5);
  font-weight: var(--typo-texte-graisse);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.dossiers-nom .enveloppe-ico {
  flex: none;
  color: var(--couleur-texte-doux);
}
.dossiers-doux {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.dossiers-vide {
  margin: var(--espace-4) var(--espace-3);
  color: var(--couleur-texte-doux);
}
.dossiers-vide-centre {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  padding: var(--espace-6, calc(var(--espace-1) * 8)) var(--espace-3);
  text-align: center;
  color: var(--couleur-texte-doux);
}
.dossiers-vide-centre .enveloppe-ico {
  width: calc(var(--espace-1) * 6);
  height: calc(var(--espace-1) * 6);
}
.dossiers-vide-centre p {
  margin: 0;
  max-width: var(--page-chapeau-largeur, none);
}
/* Sans dossier ouvert : la carte d'état vide prend toute la largeur restante. */
.dossiers-sans-dossier > .dossiers-liste-vide {
  flex: 1 1 calc(var(--espace-1) * 52);
}
.dossiers-detail > p.dossiers-doux {
  margin: 0 0 var(--espace-2);
}
.dossiers-retour {
  display: none;
  color: var(--couleur-marque-texte);
  font-weight: var(--typo-fort-graisse);
  text-decoration: none;
}
.dossiers-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--espace-1);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
  white-space: nowrap;
}
.dossiers-tag.dossiers-sortie {
  background: color-mix(in srgb, var(--couleur-categorie-violet) 22%, var(--couleur-surface));
}
.dossiers-tag.dossiers-v {
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
.dossiers-depot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  margin: var(--espace-2) var(--espace-3) var(--espace-3);
  padding: var(--espace-3);
  border: calc(var(--filet-fin) * 2) dashed var(--couleur-bord-fort);
  border-radius: var(--rayon-carte);
  text-align: center;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.dossiers-depot b {
  color: var(--couleur-texte);
}
.dossiers-detail {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-3);
}
.dossiers-apercu {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-1) * 0.75);
  aspect-ratio: 3 / 4;
  max-height: calc(var(--espace-10) * 3.6);
  padding: var(--espace-3);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
}
.dossiers-apercu i {
  display: block;
  height: calc(var(--espace-1) * 0.9);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-bord);
}
.dossiers-apercu i.dossiers-apercu-court {
  width: 55%;
}
.dossiers-apercu i.dossiers-apercu-moyen {
  width: 80%;
}
.dossiers-apercu i.dossiers-apercu-titre {
  width: 45%;
  height: calc(var(--espace-1) * 1.6);
  margin-bottom: var(--espace-1);
  background: var(--couleur-bord-fort);
}
.dossiers-detail h3 {
  margin: 0;
  font-family: var(--typo-titre-3-police);
  font-size: var(--typo-titre-3-taille);
  overflow-wrap: anywhere;
}
.dossiers-meta {
  margin: 0;
}
.dossiers-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
}
.dossiers-versions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
}
.dossiers-versions li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--espace-1);
  align-items: start;
  font-size: var(--typo-petit-taille);
}
.dossiers-versions li > span:last-child {
  color: var(--couleur-texte-doux);
}
.dossiers-versions a {
  display: inline-flex;
  vertical-align: middle;
  color: var(--couleur-marque-texte);
}
.dossiers-versions .enveloppe-ico {
  width: var(--espace-2);
  height: var(--espace-2);
}
.dossiers-droits {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
}
.dossiers-droits li {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  font-size: var(--typo-petit-taille);
}
.dossiers-pic {
  display: inline-grid;
  place-items: center;
  width: calc(var(--espace-1) * 4.5);
  height: calc(var(--espace-1) * 4.5);
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
.dossiers-pic .enveloppe-ico {
  width: var(--espace-2);
  height: var(--espace-2);
}
.dossiers-garantie {
  display: flex;
  gap: var(--espace-1);
  align-items: flex-start;
  margin: 0;
  padding: var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
  font-size: var(--typo-petit-taille);
  color: var(--couleur-texte-doux);
}
.dossiers-garantie .enveloppe-ico {
  flex: none;
  width: var(--espace-2);
  height: var(--espace-2);
  color: var(--couleur-succes);
}
/* Fenêtres natives (`popover`, sans script) : filtre de type, dépôt, sous-dossier, nouvelle version, accès. */
.dossiers-popover {
  min-width: min(calc(var(--espace-1) * 40), calc(100vw - var(--espace-4)));
  max-width: calc(100vw - var(--espace-4));
  padding: var(--espace-3);
  border: 0;
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-haute);
}
.dossiers-popover::backdrop {
  background: color-mix(in srgb, var(--couleur-texte) 32%, transparent);
}
.dossiers-popover h2 {
  margin: 0 0 var(--espace-2);
  font-size: var(--typo-titre-3-taille);
}
.dossiers-popover h2::before {
  content: none;
  counter-increment: none;
}
.dossiers-menu {
  min-width: calc(var(--espace-1) * 28);
  padding: var(--espace-1);
}
.dossiers-menu a {
  display: block;
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-champ);
  color: var(--couleur-texte);
  text-decoration: none;
}
.dossiers-menu a:hover,
.dossiers-menu a[aria-current="true"] {
  background: var(--couleur-marque-doux);
  color: var(--couleur-marque-texte);
}
/* Les champs des fenêtres gardent leur hauteur : la règle générale des formulaires leur donne une base de 256 px. */
.enveloppe-page .dossiers-action {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
}
.enveloppe-page .dossiers-action > input,
.enveloppe-page .dossiers-action > select,
.enveloppe-page .dossiers-action > button {
  flex: none;
  width: 100%;
  max-width: none;
}
.enveloppe-page .dossiers-action > label {
  display: block;
  align-self: flex-start;
  text-align: start;
}
.enveloppe-page .dossiers-action > .dossiers-radio {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
}
.enveloppe-page .dossiers-action > .dossiers-radio input {
  flex: none;
  width: auto;
}
@media (max-width: 699px) {
  .dossiers-explorateur {
    display: block;
  }
  .dossiers-col {
    max-height: none;
    margin-bottom: var(--espace-3);
  }
  .dossiers-arbre-col,
  .dossiers-detail-col {
    max-width: none;
  }
  /* Téléphone (B3) : la liste d'abord ; l'arbre quand aucun dossier n'est ouvert (le fil d'Ariane y ramène) ; le panneau quand un document est ouvert. */
  .dossiers-explorateur:not(.dossiers-sans-dossier) > .dossiers-arbre-col,
  .dossiers-explorateur:not(.dossiers-detail-ouvert) > .dossiers-detail-col {
    display: none;
  }
  /* Document choisi : on le montre d'abord, avec un retour à la liste (plus de panneau perdu sous la liste). */
  .dossiers-explorateur.dossiers-detail-ouvert > .dossiers-liste {
    display: none;
  }
  .dossiers-retour {
    display: inline-flex;
  }

  .dossiers-apercu {
    display: none;
  }
  .dossiers-table th:nth-child(3),
  .dossiers-table td:nth-child(3) {
    display: none;
  }
  .dossiers-table td,
  .dossiers-table th {
    padding-left: var(--espace-2);
    padding-right: var(--espace-2);
  }
  .dossiers-actions .dossiers-bouton span {
    display: none;
  }
}

/* Recherche globale (PF-165, maquette validée par Esteban le 24/10/2026) : bouton flottant en bas à droite, panneau centré. */
.enveloppe-recherche-bouton {
  position: fixed;
  right: var(--espace-4);
  bottom: var(--espace-4);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  border: 0;
  border-radius: var(--rayon-compteur);
  background: var(--couleur-bouton-fond);
  color: var(--couleur-sur-marque);
  box-shadow: var(--ombre-haute);
  font: inherit;
  font-weight: var(--typo-fort-graisse);
  cursor: pointer;
}
.enveloppe-recherche-bouton:focus-visible,
.enveloppe-recherche-option:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.enveloppe-recherche-bouton kbd,
.enveloppe-recherche kbd {
  padding: 0 calc(var(--espace-1) * 0.75);
  border: var(--filet-fin) solid currentColor;
  border-radius: var(--rayon-champ);
  font-family: var(--police-mono);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-texte-graisse);
}
.enveloppe-recherche {
  width: min(calc(var(--espace-1) * 90), calc(100vw - var(--espace-4)));
  max-height: calc(100vh - var(--espace-10) * 2);
  margin: calc(var(--espace-10) * 1.3) auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-haute);
  overflow: hidden;
}
.enveloppe-recherche[open] {
  display: flex;
  flex-direction: column;
}
.enveloppe-recherche::backdrop {
  background: color-mix(in srgb, var(--couleur-texte) 32%, transparent);
}
.enveloppe-recherche-champ {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
  color: var(--couleur-texte-doux);
}
.enveloppe-recherche-champ input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--couleur-texte);
  font: inherit;
  font-size: var(--typo-chapeau-taille);
  box-shadow: none;
}
.enveloppe-recherche-champ input:focus {
  outline: none;
}
/* La croix native du champ de recherche fait doublon avec « Échap ». */
.enveloppe-recherche-champ input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
.enveloppe-recherche-resultats {
  overflow: auto;
  padding: var(--espace-1) var(--espace-2) var(--espace-2);
}
.enveloppe-recherche-groupe-titre {
  display: flex;
  justify-content: space-between;
  margin: var(--espace-2) var(--espace-1) var(--espace-1);
  color: var(--couleur-texte-doux);
  font-family: var(--typo-surtitre-police);
  font-size: var(--typo-surtitre-taille);
  letter-spacing: var(--typo-surtitre-interlettrage);
  text-transform: uppercase;
}
.enveloppe-recherche-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-champ);
  color: var(--couleur-texte);
  text-decoration: none;
}
.enveloppe-recherche-option[hidden],
.enveloppe-recherche-groupe[hidden],
.enveloppe-recherche-vide[hidden] {
  display: none;
}
.enveloppe-recherche-option:hover,
.enveloppe-recherche-option[aria-selected="true"] {
  background: var(--couleur-marque-doux);
}
.enveloppe-recherche-option[aria-selected="true"] {
  box-shadow: inset calc(var(--filet-fin) * 3) 0 0 var(--couleur-marque);
}
.enveloppe-recherche-pic {
  display: inline-grid;
  place-items: center;
  width: calc(var(--espace-1) * 4.5);
  height: calc(var(--espace-1) * 4.5);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
}
.enveloppe-recherche-texte b,
.enveloppe-recherche-texte small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enveloppe-recherche-texte small,
.enveloppe-recherche-va {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-recherche-texte mark {
  border-radius: calc(var(--rayon-champ) / 2);
  background: var(--couleur-marque-doux);
  color: inherit;
  box-shadow: inset 0 calc(var(--filet-fin) * -2) 0 var(--couleur-marque);
}
.enveloppe-recherche-vide {
  padding: var(--espace-5) var(--espace-4);
  text-align: center;
}
.enveloppe-recherche-vide p {
  max-width: none;
  margin: var(--espace-1) auto 0;
  color: var(--couleur-texte-doux);
}
.enveloppe-recherche-vide .enveloppe-recherche-vide-titre {
  color: var(--couleur-texte);
  font-weight: var(--typo-fort-graisse);
}
.enveloppe-recherche-pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-3);
  padding: var(--espace-1) var(--espace-3);
  border-top: var(--filet-fin) solid var(--couleur-bord);
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-recherche-garde {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--espace-1) * 0.5);
  margin-left: auto;
}
.enveloppe-recherche-garde .enveloppe-ico {
  color: var(--couleur-succes);
}
@media (max-width: 699px) {
  /* Recherche globale (PF-165) : icône seule au-dessus de la barre du bas, panneau plein écran. */
  .enveloppe-recherche-bouton {
    right: var(--espace-2);
    bottom: calc(var(--espace-10) + var(--espace-1));
    width: var(--cible-tactile);
    justify-content: center;
    padding: 0;
  }
  .enveloppe-recherche-bouton span,
  .enveloppe-recherche-bouton kbd,
  .enveloppe-recherche-pied > span:not(.enveloppe-recherche-garde) {
    display: none;
  }
  .enveloppe-recherche {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .enveloppe-recherche-resultats {
    flex: 1;
  }
  body {
    flex-direction: column;
  }
  .enveloppe-menu {
    z-index: 10;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-1);
    width: 100%;
    height: auto;
    padding: var(--espace-1) var(--espace-2);
    overflow: visible;
  }
  .enveloppe-menu .enveloppe-marque {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }
  /* Accueil sur téléphone : deux tuiles par ligne, plus compactes. */
  .enveloppe-accueil .enveloppe-tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-2);
  }
  .enveloppe-accueil .enveloppe-tuile {
    min-height: 0;
    padding: var(--espace-2);
  }
  .enveloppe-accueil .enveloppe-tuile-titre {
    font-size: var(--typo-titre-3-taille);
  }
  /* Bouton « Menu » dans la barre du haut ; le panneau (groupe « Le cabinet », Ma boîte, déconnexion) s'ouvre par-dessus. */
  .enveloppe-menu .enveloppe-menu-bouton {
    display: inline-flex;
    flex: none;
    width: auto;
    border: var(--filet-fin) solid var(--couleur-nav-bord);
  }
  .enveloppe-menu-plus:not(:popover-open) {
    display: none;
  }
  .enveloppe-menu-plus:popover-open {
    position: fixed;
    inset: calc(var(--cible-tactile) + var(--espace-2)) 0 auto;
    z-index: 30;
    max-height: calc(100vh - var(--cible-tactile) - var(--espace-2));
    overflow-y: auto;
    padding: var(--espace-1) var(--espace-2) var(--espace-3);
    background: var(--couleur-nav-fond);
    color: var(--couleur-nav-texte);
    border-bottom: var(--filet-fin) solid var(--couleur-nav-bord);
    box-shadow: var(--ombre-haute);
  }
  /* Entrées du menu : barre fixe en bas (charte § 5) ; au-delà de 4, elle défile. */
  body:has(> .enveloppe-menu) {
    padding-bottom: calc(var(--cible-tactile) + var(--espace-2));
  }
  .enveloppe-menu .enveloppe-menu-outils {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    flex-direction: row;
    gap: 0;
    padding: calc(var(--espace-1) * 0.5);
    overflow-x: auto;
    background: var(--couleur-nav-fond);
    border-top: var(--filet-fin) solid var(--couleur-nav-bord);
    scrollbar-width: none;
  }
  .enveloppe-menu-outils li {
    flex: 1 0 25%;
    min-width: 0;
  }
  .enveloppe-menu-outils a {
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--espace-1) * 0.25);
    min-height: calc(var(--cible-tactile) + var(--espace-1));
    padding: calc(var(--espace-1) * 0.5) var(--espace-1);
    font-size: var(--typo-petit-taille);
    text-align: center;
  }
  .enveloppe-menu-outils a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .enveloppe-menu-outils a[aria-current="page"] {
    box-shadow: inset 0 var(--filet-rubrique) 0 var(--couleur-marque);
  }
  .enveloppe-page {
    padding: var(--espace-3) var(--espace-2) var(--espace-6);
  }
  h1 {
    font-size: clamp(calc(var(--espace-1) * 3.5), 8vw, calc(var(--espace-1) * 4.5));
  }
  .enveloppe-page section:not(.enveloppe-decision),
  .enveloppe-page > form:has(input:not([type="hidden"]), select),
  .enveloppe-page > dl {
    padding: var(--espace-2);
  }
  .enveloppe-page table {
    display: block;
    overflow-x: auto;
  }
  /* Tableau empilable (console, recette R13) : sur téléphone, chaque ligne devient une carte et chaque valeur est précédée
     de son en-tête (data-libelle) ; aucune colonne n'est coupée ni cachée. */
  .enveloppe-page table.tableau-empile {
    display: block;
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .tableau-empile thead {
    display: none;
  }
  .tableau-empile tbody,
  .tableau-empile tr {
    display: block;
  }
  .tableau-empile tr {
    margin-bottom: var(--espace-2);
    border: var(--filet-fin) solid var(--couleur-bord);
    border-radius: var(--rayon-carte);
    background: var(--couleur-surface);
  }
  .tableau-empile td {
    display: flex;
    justify-content: space-between;
    gap: var(--espace-2);
    overflow-wrap: anywhere;
  }
  .tableau-empile td::before {
    content: attr(data-libelle);
    font-weight: var(--typo-fort-graisse);
  }
  dl {
    grid-template-columns: 1fr;
  }
  dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .enveloppe-decision {
    padding: var(--espace-3) var(--espace-2);
  }
  .enveloppe-decision .enveloppe-action,
  .enveloppe-page form > button {
    width: 100%;
  }
  /* Pages d'accès : une colonne ; le panneau de marque devient un bandeau en tête (illustration seule, sans accroche). */
  .enveloppe-acces,
  .enveloppe-acces[data-mise="large"] {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .enveloppe-panneau {
    order: -1;
    position: static;
    height: calc(var(--espace-1) * 16.5);
    padding: var(--espace-2);
  }
  .enveloppe-illustration {
    min-height: 0;
  }
  .enveloppe-feuille {
    height: 92%;
  }
  .enveloppe-feuille:first-child {
    left: 24%;
    top: 4%;
  }
  .enveloppe-feuille:nth-child(2) {
    left: 48%;
    top: 8%;
  }
  .enveloppe-seule {
    gap: var(--espace-3);
    min-height: 0;
    padding: var(--espace-3) var(--espace-2) var(--espace-6);
  }
  .enveloppe-acces-contenu {
    max-width: none;
    margin: 0;
  }
  /* Enrôlement : une colonne, le QR code entre l'étape 2 (qui le demande) et l'étape 3 (qui demande le code). */
  .enveloppe-enrolement {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-2);
  }
  .enveloppe-enrolement > .enveloppe-etapes {
    display: contents;
  }
  .enveloppe-enrolement > .enveloppe-etapes > li:nth-child(1) {
    order: 1;
  }
  .enveloppe-enrolement > .enveloppe-etapes > li:nth-child(2) {
    order: 2;
  }
  .enveloppe-enrolement > .enveloppe-qr-cadre {
    order: 3;
    position: static;
    justify-self: center;
  }
  .enveloppe-enrolement > .enveloppe-etapes > li:nth-child(3) {
    order: 4;
  }
  .enveloppe-menu .enveloppe-logo-cabinet {
    height: calc(var(--espace-1) * 4.5);
    max-width: 60vw;
  }
  .enveloppe-menu .enveloppe-marque-cabinet {
    min-height: 0;
  }
  .enveloppe-secours {
    grid-template-columns: 1fr;
  }
  .enveloppe-qr {
    width: calc(var(--espace-1) * 24);
    height: calc(var(--espace-1) * 24);
  }
  .apparence-palettes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Apparence de l'espace : une colonne, l'aperçu en tête. */
  .apparence-reglages,
  .apparence,
  .enveloppe-page form.apparence {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-3);
  }
  .apparence-cadre-apercu {
    position: static;
    order: -1;
  }
  .apparence-apercu {
    min-height: calc(var(--espace-10) * 2.5);
  }
}

/* Mouvement : transitions de couleur et soulèvement léger, supprimés sur demande (charte § 8). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .enveloppe-tuile:hover,
  button:hover,
  .enveloppe-action:hover {
    transform: none;
  }
}

/* ————— Messagerie en cartes (maquette de refonte validée le 22/10/2026) ————— */
.messagerie-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espace-2) var(--espace-4);
  margin-bottom: var(--espace-3);
}
.messagerie-tete > div {
  flex: 1 1 calc(var(--espace-1) * 60);
  min-width: 0;
}
.messagerie-tete p {
  margin-bottom: 0;
}
.enveloppe-page .messagerie-accord {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
}
.messagerie-boites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--espace-1) * 40)), 1fr));
  gap: var(--espace-2);
  margin: 0 0 var(--espace-3);
  padding: 0;
  list-style: none;
}
.messagerie-boite {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  min-width: 0;
  padding: var(--espace-3);
  border-radius: var(--rayon-carte);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.messagerie-boite-haut {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-width: 0;
}
.messagerie-boite-haut > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.messagerie-boite-haut b {
  overflow-wrap: anywhere;
}
.messagerie-boite-haut > div > span {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.messagerie-boite-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  margin-top: auto;
}
.messagerie-boite-etat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--espace-1) * 0.5);
  min-width: 0;
}
.messagerie-boite-etat small {
  color: var(--couleur-texte-doux);
}
.messagerie-boite form {
  margin: 0;
}
.messagerie-boite .enveloppe-pastille {
  max-width: 100%;
  white-space: normal;
}
.messagerie-accord a {
  max-width: 100%;
  padding-block: var(--espace-1);
  white-space: normal;
}

/* ————— Connexion par adresse e-mail et mot de passe (ADR-PF-077) ————— */
/* Une colonne : chaque libellé au-dessus de son champ, champs pleine largeur de la colonne, bouton dessous. */
.enveloppe-page form.enveloppe-formulaire-mdp {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  max-width: calc(var(--espace-1) * 56);
}
.enveloppe-page form.enveloppe-formulaire-mdp > input,
.enveloppe-page form.enveloppe-formulaire-mdp > select {
  flex: 0 0 auto;
  max-width: none;
}
.enveloppe-page form.enveloppe-formulaire-mdp > button {
  align-self: flex-start;
  margin-top: var(--espace-1);
}
.enveloppe-page form.enveloppe-formulaire-mdp > p a {
  color: var(--couleur-marque-texte);
}
.enveloppe-mdp-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-1) var(--espace-2);
  margin-top: var(--espace-1);
}
.enveloppe-mdp-ligne label {
  margin: 0;
}
.enveloppe-mdp-oublie {
  color: var(--couleur-marque-texte);
  font-size: var(--typo-petit-taille);
  font-weight: var(--typo-fort-graisse);
}
/* « ou » entre le formulaire et le bouton Microsoft : un filet de chaque côté, décoratif. */
.enveloppe-separateur {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  max-width: calc(var(--espace-1) * 56);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.enveloppe-separateur::before,
.enveloppe-separateur::after {
  content: "";
  flex: 1;
  border-top: var(--filet-fin) solid var(--couleur-bord);
}
/* Comptes par mot de passe dans la console : état (pastille, puis échéance du lien) et actions, chacun en un bloc. */
.console-compte-etat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--espace-1) * 0.5);
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-compte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
}
.enveloppe-page .console-compte-actions form {
  margin: 0;
}
/* Sur téléphone, le libellé des cellules d'état et d'actions ne se coupe pas. */
.tableau-empile td:has(> .console-compte-etat)::before,
.tableau-empile td:has(> .console-compte-actions)::before {
  flex: none;
}

/* Cockpit des connecteurs (PF-158, ADR-PF-085, maquette validée le 23/10/2026) : gestes de chaque carte, fiche d'un
   connecteur (essai, statut, cabinets), case « Cabinet interne » de la création. Jetons de la DA seulement. */
.console-connecteur-gestes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
}
.console-petit {
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  font-size: var(--typo-petit-taille);
}
.console-deux {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--espace-3);
  align-items: start;
}
.console-carte-pleine {
  min-width: 0;
  padding: clamp(var(--espace-3), 2.5vw, var(--espace-5));
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.console-carte-pleine h2 {
  margin: 0 0 var(--espace-1);
}
.console-statuts-ligne {
  min-inline-size: 0;
  margin: 0 0 var(--espace-3);
  padding: 0;
  border: 0;
}
.console-statuts-ligne legend {
  margin: 0 0 var(--espace-1);
  font-weight: var(--typo-fort-graisse);
}
.console-statuts {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--espace-1) * 24)), 1fr));
  gap: var(--espace-1);
}
.console-statut {
  display: grid;
  gap: calc(var(--espace-1) * 0.75);
  padding: var(--espace-2);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
  box-shadow: inset 0 0 0 var(--filet-fin) var(--couleur-bord);
  cursor: pointer;
}
.console-statut input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.console-statut:has(input:checked) {
  background: var(--couleur-surface);
  box-shadow: inset 0 0 0 calc(var(--filet-fin) * 2) var(--couleur-bouton-fond);
}
.console-statut:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.console-statut[data-bloque] {
  cursor: not-allowed;
  opacity: 0.6;
}
.console-statut small {
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-attributions {
  display: grid;
  margin: var(--espace-2) 0 0;
  padding: 0;
  list-style: none;
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.console-attribution label {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  border-bottom: var(--filet-fin) solid var(--couleur-bord);
  cursor: pointer;
}
.console-attribution:last-child label {
  border-bottom: 0;
}
.console-attribution .console-carte-texte {
  flex: 1 1 auto;
  min-width: 0;
}
.console-attribution small {
  display: block;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
/* Bascule : une case à cocher dessinée en interrupteur ; le mot « Activé » ou « Inactif » l'accompagne toujours. */
input.console-bascule {
  appearance: none;
  flex: none;
  position: relative;
  width: calc(var(--cible-tactile) * 1.1);
  height: calc(var(--cible-tactile) * 0.6);
  margin: 0;
  border-radius: var(--rayon-compteur);
  background: var(--couleur-surface-2);
  box-shadow: inset 0 0 0 var(--filet-fin) var(--couleur-bord);
  cursor: pointer;
}
input.console-bascule::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 8%;
  width: 35%;
  height: 70%;
  border-radius: 50%;
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
input.console-bascule:checked {
  background: var(--couleur-succes);
  box-shadow: none;
}
input.console-bascule:checked::after {
  left: 57%;
}
input.console-bascule:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
input.console-bascule:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.console-case {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-1);
  margin: var(--espace-2) 0 0;
  font-weight: var(--typo-fort-graisse);
}
/* Panneau latéral des liens entre connecteurs (ADR-PF-084) : s'ouvre sur le côté de l'écran qui a demandé le lien, jamais à la place.
   Retour d'Esteban du 23/10/2026 : largeur fixe (480 px), en-tête sobre (titre sans numéro de rubrique, fermer discret), marge
   intérieure du gabarit dans le cadre (mode panneau), message d'indisponibilité neutre et seul. */
.enveloppe-fiche {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  inline-size: min(calc(var(--espace-1) * 60), 100vw);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  border-inline-start: var(--filet-fin) solid var(--couleur-bord);
  box-shadow: var(--ombre-haute);
}
.enveloppe-fiche:focus {
  outline: none;
}
.enveloppe-fiche[hidden] {
  display: none;
}
.enveloppe-fiche-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-2) var(--espace-2) var(--espace-3);
  border-block-end: var(--filet-fin) solid var(--couleur-bord);
}
.enveloppe-fiche .enveloppe-fiche-titre {
  margin: 0;
  font-family: var(--typo-titre-3-police);
  font-size: var(--typo-titre-3-taille);
  line-height: var(--typo-titre-3-interligne);
}
.enveloppe-fiche .enveloppe-fiche-titre::before {
  content: none;
}
.enveloppe-fiche-fermer {
  display: inline-grid;
  place-items: center;
  inline-size: var(--cible-tactile);
  block-size: var(--cible-tactile);
  padding: 0;
  border: 0;
  border-radius: var(--rayon-compteur);
  background: transparent;
  color: var(--couleur-texte-doux);
  font: inherit;
  font-size: var(--typo-titre-3-taille);
  cursor: pointer;
}
.enveloppe-fiche-fermer:hover {
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}
.enveloppe-fiche-fermer:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}
.enveloppe-fiche .enveloppe-fiche-message {
  max-width: none;
  margin: var(--espace-3);
  background: var(--couleur-surface-2);
  box-shadow: inset calc(var(--filet-fin) * 4) 0 0 var(--couleur-bord-fort);
  color: var(--couleur-texte);
  font-weight: var(--typo-texte-graisse);
}
.enveloppe-fiche .enveloppe-fiche-message[hidden] {
  display: none;
}
.enveloppe-fiche-corps {
  display: flex;
  flex: 1;
  min-block-size: 0;
}
.enveloppe-fiche-cadre {
  min-height: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* Versions d'un connecteur (PF-158, ADR-PF-085 § 1-2) : une ligne par version (numéro, faits vérifiés, gestes), la version à
   publier bordée ; dépôt de l'archive ; confirmation de publication. Jetons de la DA seulement. */
.console-versions {
  display: grid;
  gap: var(--espace-2);
  margin: var(--espace-3) 0;
  padding: 0;
  list-style: none;
}
.console-version {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--espace-3);
  align-items: start;
  padding: var(--espace-3);
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-douce);
}
.console-version[data-attente] {
  box-shadow: inset 0 0 0 calc(var(--filet-fin) * 2) var(--couleur-bouton-fond), var(--ombre-douce);
}
.console-version-num {
  font-family: var(--police-mono);
  font-size: var(--typo-chapeau-taille);
  font-weight: var(--typo-fort-graisse);
}
.console-version-gestes {
  display: grid;
  gap: var(--espace-1);
  justify-items: stretch;
}
.console-version-gestes form {
  margin: 0;
}
.console-faits {
  margin: var(--espace-1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--couleur-texte-doux);
  font-size: var(--typo-petit-taille);
}
.console-permis {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espace-1) * 0.75);
  margin: var(--espace-1) 0 0;
}
.console-permis span {
  padding: calc(var(--espace-1) * 0.25) var(--espace-1);
  border-radius: var(--rayon-champ);
  background: var(--couleur-surface-2);
  font-family: var(--police-mono);
  font-size: var(--typo-petit-taille);
}
.console-permis span.console-permis-nouvelle {
  background: var(--couleur-alerte-doux);
  color: var(--couleur-alerte);
  font-weight: var(--typo-fort-graisse);
}
.console-depot {
  display: grid;
  gap: var(--espace-2);
  justify-items: start;
  padding: var(--espace-4);
  border: calc(var(--filet-fin) * 2) dashed var(--couleur-bord);
  border-radius: var(--rayon-bloc);
  background: var(--couleur-surface);
}
.console-depot label {
  display: grid;
  gap: calc(var(--espace-1) * 0.5);
}
.console-depot label span {
  color: var(--couleur-texte-doux);
}
.console-publication {
  max-width: calc(var(--espace-1) * 90);
  margin: 0 auto;
}
.console-recap {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--espace-1) * 26)) minmax(0, 1fr);
  gap: var(--espace-1) var(--espace-2);
  margin: var(--espace-3) 0;
  padding: var(--espace-3);
  border-radius: var(--rayon-champ);
  background: var(--couleur-fond);
}
.console-recap dt {
  color: var(--couleur-texte-doux);
  font-weight: var(--typo-fort-graisse);
}
.console-recap dd {
  margin: 0;
}
.console-revenir-code {
  display: grid;
  gap: calc(var(--espace-1) * 0.5);
}