/* U-juris — feuille de style du site.

   Cinq pages, aucune dépendance, aucun cadriciel, aucun appel distant : les
   polices sont celles du système, les rares dessins (chevron des listes,
   bouée de l'assistance) sont tracés dans le balisage ou en `data:`. Le
   cabinet a retiré les appels distants de ses applications ; le site n'en
   rouvre aucun.

   ═════════════════════════════════════════════════════════════════════════
   LE PARTI PRIS
   ═════════════════════════════════════════════════════════════════════════

   1. LA COULEUR — cinq pigments, et rien d'autre.

      --marine  #12345A  l'institution : le bandeau, les titres, l'action
                         première. C'est la couleur de l'application, on la
                         garde telle quelle.
      --or      #C9A24B  l'accent, tenu en laisse : le filet du bandeau, la
                         porte d'entrée, le repère de focus, l'étiquette
                         « cette fenêtre ». Jamais du texte courant sur fond
                         clair — il n'y contraste qu'à 2,3 pour 1.
      --papier  #FBF8F1  le fond, un crème et non un blanc : un écran de
                         lecture professionnelle se lit des heures.
      --encre   #111C27  le texte, un marine si sombre qu'il se lit comme un
                         noir. Les gris qui en dérivent sont bleutés, choisis :
                         un gris pur se verrait comme un gris pur, posé là.
      --grave   #8A3323  la terre brûlée des gestes sans retour : refuser une
                         inscription, retirer un contenu. Elle ne sert qu'à ça.

      Tout le reste (surfaces, filets, voiles) descend de ces cinq-là. Le
      thème sombre ne redéfinit QUE des variables — aucune couleur du site
      n'existe seulement dans un bloc de média.

   2. LA TYPOGRAPHIE — trois rôles, en piles système.

      --serif  ui-serif (New York sur Apple), Iowan, Palatino, Georgia. Pour
               ce qui NOMME : la devise, les titres, l'auteur d'une
               publication, l'objet d'une demande. Elle a du caractère et
               signe le document.
      --sans   -apple-system, Segoe UI, Roboto. Pour ce qui SE LIT et ce qui
               S'ACTIONNE : le corps, les formulaires, les boutons.
      --mono   ui-monospace, Menlo. Pour ce qui SE COMPTE : le code à six
               chiffres, les dates du journal, les minutes du minuteur.

      Une échelle de neuf pas (--pas-0 à --pas-8), et l'on s'y tient : aucune
      taille n'est écrite ailleurs qu'ici. Le texte courant est tenu à
      --mesure (56ch, soit environ 65 signes) : au-delà, l'œil perd la ligne
      suivante.

   3. LA MISE EN PAGE — un document, pas un tableau de bord.

      Une colonne unique, cadencée par des filets horizontaux : un filet et
      un blanc avant chaque titre de section, un filet plus léger entre les
      éléments d'une liste. C'est tout ce qui structure la page — pas de
      carte à ombre portée répétée, pas de barre d'accent sur chaque bloc.
      Le bandeau marine tient le haut de chaque page et sépare l'outil du
      contenu ; sous lui, la page est du papier.

   ═════════════════════════════════════════════════════════════════════════ */


/* ── 1. Les jetons ──────────────────────────────────────────────────────── */

:root{
  color-scheme:light;

  /* Les cinq pigments. */
  --marine:#12345A;
  --or:#C9A24B;
  --papier:#FBF8F1;
  --encre:#111C27;
  --grave:#8A3323;

  /* Ce qui en descend : surfaces et traits. */
  --carte:#FFFFFF;          /* la feuille posée sur le papier */
  --voile:#F1EDE3;          /* un fond tenu, pour les notes et les citations */
  --filet:#D9D2C4;          /* le trait entre deux éléments d'une liste */
  --filet-fort:#C6BCA8;     /* le trait qui ouvre une section */
  --doux:#55657A;           /* le texte second — 5,8:1 sur le papier */
  --marine-fonce:#0D2743;   /* l'appui d'un bouton marine */
  --bord-action:#12345A;    /* le contour d'un bouton plein : en sombre, il
                               s'éclaircit pour que le bouton garde un bord
                               visible (4,5:1) contre le fond de la page */
  --bord-champ:#7E8B99;     /* le contour d'un champ — 3,5:1, il se voit */

  /* L'or, dans ses deux emplois. */
  --or-fonce:#9A7A2E;       /* son contour, quand il faut border une pastille */
  --or-lu:#7D5B14;          /* l'or quand il doit se LIRE — 6:1 sur le papier */
  --or-voile:#F5EAD1;       /* son fond, très dilué */

  /* Le grave, et son fond. */
  --grave-voile:#F7EAE6;

  /* L'ambre : la couleur du service d'assistance, et de lui seul. */
  --ambre:#E09B12;
  --ambre-fonce:#B87708;

  /* Les encres posées sur un fond coloré. Elles ne changent pas avec le
     thème : le fond, lui, ne change pas non plus. */
  --sur-marine:#FFFFFF;
  --sur-marine-doux:#CBD8E7;
  --sur-or:#20180A;
  --sur-ambre:#20180A;

  /* Les rôles qui BASCULENT d'un thème à l'autre. Sur le papier, un titre
     marine ; sur fond sombre, le marine s'éteint et c'est l'or qui prend
     le relais. */
  --titre:var(--marine);
  --lien:var(--marine);
  --focus:var(--marine);

  --ombre-feuille:0 22px 56px rgba(13,39,71,.22);
  --ombre-bouton:0 4px 14px rgba(13,39,71,.18);
  --fond-modal:rgba(17,28,39,.55);

  /* Le chevron des listes déroulantes : dessiné ici, pas téléchargé.
     Sa couleur suit le thème, donc il est déclaré comme une couleur. */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 6 6.2l4.8-4.6' fill='none' stroke='%2355657A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Les polices. */
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* L'échelle. Neuf pas, aucun autre. */
  --pas-0:12.5px;
  --pas-1:13.5px;
  --pas-2:14.5px;
  --pas-3:16px;
  --pas-4:18px;
  --pas-5:21px;
  --pas-6:25px;
  --pas-7:clamp(24px,3.9vw,32px);
  --pas-8:clamp(34px,7vw,52px);

  /* Les blancs. */
  --e-1:6px;
  --e-2:10px;
  --e-3:16px;
  --e-4:24px;
  --e-5:36px;
  --section:clamp(38px,6vw,56px);
  --marge:clamp(20px,5vw,28px);

  /* La mesure du texte courant : environ 65 signes. */
  --mesure:56ch;

  /* Les rayons. Trois seulement : le bloc, le champ, la pastille. La forme
     est porteuse de sens ici — voir `button.grave`. */
  --r-bloc:6px;
  --r-champ:8px;
  --r-pastille:999px;
}

/* Le thème sombre, dans ses DEUX états : la préférence du système, et le
   choix explicite. Les deux blocs ne redéfinissent que des variables. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --marine:#2E5C8F;
    --or:#D9B463;
    --papier:#0C141C;
    --encre:#E7EDF4;
    --grave:#E9A392;

    --carte:#131E29;
    --voile:#17222E;
    --filet:#2A3743;
    --filet-fort:#3A4956;
    --doux:#94A5B8;
    --marine-fonce:#1E4271;
    --bord-action:#4E80B8;
    --bord-champ:#5E6E7D;

    --or-fonce:#B08F45;
    --or-lu:#E3C480;
    --or-voile:#2A2415;

    --grave-voile:#2C1D19;

    --ambre:#D9950F;
    --ambre-fonce:#A96C06;

    --titre:var(--or-lu);
    --lien:var(--or-lu);
    --focus:var(--or);

    --ombre-feuille:0 22px 56px rgba(0,0,0,.6);
    --ombre-bouton:0 4px 14px rgba(0,0,0,.55);
    --fond-modal:rgba(4,8,12,.72);
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 6 6.2l4.8-4.6' fill='none' stroke='%2394A5B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --marine:#2E5C8F;
  --or:#D9B463;
  --papier:#0C141C;
  --encre:#E7EDF4;
  --grave:#E9A392;

  --carte:#131E29;
  --voile:#17222E;
  --filet:#2A3743;
  --filet-fort:#3A4956;
  --doux:#94A5B8;
  --marine-fonce:#1E4271;
  --bord-action:#4E80B8;
  --bord-champ:#5E6E7D;

  --or-fonce:#B08F45;
  --or-lu:#E3C480;
  --or-voile:#2A2415;

  --grave-voile:#2C1D19;

  --ambre:#D9950F;
  --ambre-fonce:#A96C06;

  --titre:var(--or-lu);
  --lien:var(--or-lu);
  --focus:var(--or);

  --ombre-feuille:0 22px 56px rgba(0,0,0,.6);
  --ombre-bouton:0 4px 14px rgba(0,0,0,.55);
  --fond-modal:rgba(4,8,12,.72);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 6 6.2l4.8-4.6' fill='none' stroke='%2394A5B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ── 2. La base ─────────────────────────────────────────────────────────── */

*{box-sizing:border-box}

/* `hidden` est le seul mécanisme d'affichage qu'`app.js` manipule : il doit
   l'emporter sur toute règle de disposition posée ici. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);          /* le fond est peint, jamais emprunté */
  color:var(--encre);
  font-family:var(--sans);
  font-size:var(--pas-3);
  line-height:1.62;
  overflow-wrap:break-word;
}

::selection{background:var(--or-voile);color:var(--encre)}

/* Un seul repère de focus, visible partout : le site doit s'utiliser au
   clavier seul. Il est marine sur le papier, or sur fond sombre — dans les
   deux cas au-delà de 3:1 contre ce qu'il entoure. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
dialog:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
/* Dans le bandeau marine, le marine ne se verrait pas : l'or y prend le
   relais (5,3:1 contre le marine). */
.bandeau a:focus-visible,
.bandeau button:focus-visible{outline-color:var(--or)}

/* Rien ne bouge sans raison, et rien ne bouge du tout pour qui l'a demandé. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* ⚠ Raccourcir une transition ne supprime pas le déplacement : elle le rend
     instantané. Pour qui a demandé que rien ne bouge, on retire le relief
     lui-même — la couleur du survol, elle, reste. */
  button:hover,button:active,.chip:hover,.pub-action:hover,.geste:hover,
  .bac-role-bouton:hover{transform:none !important}
}


/* ── 3. Le bandeau ──────────────────────────────────────────────────────── */
/* Marine plat, fermé par un filet d'or. Pas de dégradé : la bande n'a rien à
   raconter, elle tient le haut de la page. */

.bandeau{
  background:var(--marine);
  color:var(--sur-marine);
  border-bottom:1px solid var(--or);
  padding:clamp(40px,7vw,68px) var(--marge) clamp(32px,5vw,48px);
  text-align:center;
}

/* Le monogramme de l'accueil public : la lettre, le filet, le nom. */
.bandeau .u{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--pas-8);
  line-height:1;
  color:var(--or);
  margin:0;
}
.bandeau .trait{
  width:96px;height:1px;background:var(--or);
  margin:clamp(14px,2.5vw,20px) auto clamp(10px,2vw,14px);
}
.bandeau .nom{
  font-size:var(--pas-0);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  margin:0;
}

.devise{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:var(--pas-6);
  line-height:1.42;
  color:var(--sur-marine-doux);
  max-width:19em;
  margin:clamp(22px,4vw,32px) auto 0;
  text-wrap:balance;
}

/* À qui le service s'adresse, en une ligne : c'est la question qu'un
   confrère se pose avant toute autre. Elle n'est PAS en or : le bandeau en
   porte déjà deux (le monogramme et son filet, le bouton d'entrée), et l'or
   sur le marine du thème sombre ne contraste qu'à 3,5 pour 1 — sous le seuil
   pour un texte de cette taille. Elle prend donc l'encre seconde du bandeau,
   ce qui remet l'or là où il compte : sur le geste. */
.publics{
  font-size:var(--pas-0);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sur-marine-doux);
  margin:clamp(18px,3vw,26px) auto 0;
  max-width:26em;
  text-wrap:balance;
}

/* La porte d'entrée. C'est le seul endroit où l'or remplit une surface :
   une fois dans le bandeau, une fois au bas de la présentation. */
.entree{
  display:inline-block;
  background:var(--or);
  color:var(--sur-or);
  border:1px solid var(--or-fonce);
  border-radius:var(--r-pastille);
  text-decoration:none;
  font-weight:600;
  font-size:var(--pas-2);
  letter-spacing:.02em;
  padding:13px 30px;
  transition:background-color .12s ease;
}
.entree:hover{background:var(--or-fonce);color:var(--sur-or)}
.entree-ligne{margin:clamp(24px,4vw,34px) 0 0}
/* Le lien d'inscription, dans la bande : il suit la note, en or lisible sur le
   marine, souligné pour se voir comme un lien et non comme un second bouton. */
.entree-lien{
  display:inline-block;
  margin-left:.4em;
  color:var(--or);
  text-decoration:underline;
  text-underline-offset:3px;
}
.entree-lien:hover{color:var(--sur-marine)}

.entree-note{
  font-size:var(--pas-1);
  color:var(--sur-marine-doux);
  margin:var(--e-2) 0 0;
}

/* Le bandeau des pages de travail : une barre, un monogramme à gauche, un
   retour à droite. On ne rejoue pas le portail à chaque écran. */
.bandeau.mince{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--e-3);
  text-align:left;
  padding:12px var(--marge);
}
.marque{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  text-decoration:none;
  color:var(--sur-marine);
}
.bandeau.mince .u{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  font-size:var(--pas-4);
  border:1px solid var(--or);
  border-radius:var(--r-bloc);
}
.bandeau.mince .nom{font-size:var(--pas-0)}
.retour{
  color:var(--sur-marine-doux);
  font-size:var(--pas-1);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:1px solid transparent;
}
.retour:hover{color:var(--sur-marine);border-bottom-color:var(--or)}


/* ── 4. Le document ─────────────────────────────────────────────────────── */

main{
  max-width:calc(var(--mesure) + 2 * 28px);
  margin:0 auto;
  padding:clamp(30px,5vw,44px) var(--marge) clamp(56px,8vw,80px);
}
/* Les écrans qui portent des lignes à deux colonnes — un dossier et ses
   gestes, un appareil et son bouton — ont besoin de plus de large. Le texte
   courant, lui, reste tenu à la mesure. */
main.large{max-width:840px}

/* La ligne de conduite du service, posée sur le papier entre l'annonce et la
   démonstration : elle se lit comme une invitation, pas comme une réclame. */
.slogan{
  /* La phrase est SEULE sur le papier : elle se compose en frontispice, pas en
     paragraphe. Les deux membres n'ont pas le même poids — la réserve se dit à
     voix basse, l'invitation se lit de loin. */
  margin:0;
  padding:0 var(--marge);
  max-width:780px;
  text-align:center;
  font-family:var(--serif);
  color:var(--marine);
}

/* Le filet d'or reprend celui de la bande : il relie le haut et le bas de la
   page, qui n'ont plus rien d'autre en commun. */
.slogan::before{
  content:"";
  display:block;
  width:44px;
  height:1px;
  margin:0 auto clamp(26px,4vw,38px);
  background:var(--or);
}

.slogan>span{display:block}

.slogan .mesure{
  font-size:var(--pas-6);
  line-height:1.35;
  color:var(--doux);
  margin-bottom:clamp(10px,1.7vw,16px);
}

/* Le deux-points n'est pas lu, il articule. En or il marque la charnière sans
   peser dans la phrase — et c'est le seul or du papier, donc --or-lu (6:1) et
   non --or, qui ne se lirait pas. */
.slogan .pivot{color:var(--or-lu)}

.slogan .affirmation{
  font-size:var(--pas-8);
  line-height:1.18;
  /* Aux grandes tailles la chasse se resserre, sinon la ligne se délite. */
  letter-spacing:-0.015em;
  text-wrap:balance;
}

/* La phrase se pose au lieu d'apparaître. Deux temps seulement, et rien qui
   bouge pour qui a demandé l'immobilité. */
@media (prefers-reduced-motion:no-preference){
  .slogan::before,
  .slogan .mesure,
  .slogan .affirmation{animation:slogan-parait .7s cubic-bezier(.2,.7,.3,1) backwards}
  .slogan .mesure{animation-delay:.06s}
  .slogan .affirmation{animation-delay:.17s}
}
@keyframes slogan-parait{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* Un filet et un blanc ouvrent chaque section : c'est tout le squelette de
   la page. Le premier titre d'un écran n'a rien au-dessus de lui. */
h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-5);
  line-height:1.3;
  color:var(--titre);
  margin:var(--section) 0 var(--e-2);
  text-wrap:balance;
}
main>h2,
#espace>h2,
#centre-assistance>h2{
  border-top:1px solid var(--filet-fort);
  padding-top:var(--e-4);
}
h2:first-child{margin-top:0}
main>h2:first-child,
#espace>h2:first-child,
#centre-assistance>h2:first-child{border-top:0;padding-top:0}

h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-4);
  line-height:1.32;
  color:var(--titre);
  margin:0 0 var(--e-2);
}

p{margin:0 0 var(--e-3)}
main>p,
.encart p,
.averti,
.chapeau{max-width:var(--mesure)}

ul,ol{margin:0 0 var(--e-3);padding-left:1.2em;max-width:var(--mesure)}
li{margin-bottom:var(--e-1)}

strong{font-weight:640}

a{color:var(--lien);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

.doux{color:var(--doux)}
.petit{font-size:var(--pas-1)}

/* Le chapeau : la phrase qui explique l'écran, sous son titre. */
.chapeau{
  font-size:var(--pas-4);
  line-height:1.55;
  color:var(--doux);
  margin:0 0 var(--e-4);
}

/* Un bloc encadré, sans ombre et presque sans coin : il pose une réserve ou
   une liste de faits, il ne se met pas en avant. */
.encart{
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:var(--r-bloc);
  padding:var(--e-4) clamp(18px,4vw,26px);
  margin:var(--e-4) 0;
}
.encart>:last-child{margin-bottom:0}
.encart ul{margin-bottom:0}
.encart+.encart{margin-top:var(--e-3)}

/* La reprise de la porte d'entrée, au bas de la présentation : un lecteur
   qui vient de tout lire ne doit pas remonter chercher le bouton. */
.reprise{margin:var(--section) 0;text-align:center}

/* La réserve de bas de page : ni encadré, ni alarme — un fond tenu. */
.averti{
  font-size:var(--pas-1);
  color:var(--doux);
  background:var(--voile);
  border-radius:var(--r-bloc);
  padding:var(--e-3) var(--e-4);
  margin:var(--section) 0 0;
}

footer{
  border-top:1px solid var(--filet-fort);
  margin-top:var(--section);
  padding-top:var(--e-4);
  font-size:var(--pas-1);
  color:var(--doux);
}
footer p{margin:0 0 var(--e-1);max-width:var(--mesure)}
footer p:last-child{margin-bottom:0}

/* L'attente et le vide : la même voix, en retrait, jamais une alarme. */
.attente{
  color:var(--doux);
  font-style:italic;
  margin:0;
  padding:var(--e-2) 0;
}

/* Le message d'état. Il porte aussi bien un refus du serveur qu'un avis
   neutre (« Vous avez quitté l'espace ») : d'où un texte teinté et non un
   encadré rouge, qui crierait dans les deux cas. */
.message{
  margin:var(--e-3) 0 0;
  font-size:var(--pas-2);
  font-weight:500;
  color:var(--grave);
  max-width:var(--mesure);
}
.message:empty{margin:0}

/* Un dénombrement, sous le titre d'une section : trois demandes en attente
   ne se traitent pas comme trente. Rien d'autre n'est compté. */
.compte{
  font-size:var(--pas-1);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--doux);
  margin:calc(var(--e-2) * -1) 0 var(--e-2);
}
.compte:empty{display:none}


/* ── 5. Les formulaires ─────────────────────────────────────────────────── */

fieldset{border:0;margin:0 0 var(--e-4);padding:0;min-width:0}
legend{padding:0}

/* L'intitulé d'un groupe : petites capitales, en retrait — il annonce, il
   ne titre pas. */
.legende{
  display:block;
  font-family:var(--sans);
  font-size:var(--pas-0);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--doux);
  margin:0 0 var(--e-2);
}

label{display:block;font-size:var(--pas-2);font-weight:600;margin:0 0 var(--e-1)}

/* La mise en forme commune des champs est posée dans un `:where()` : sa
   spécificité est nulle, donc tout ce qui suit (le champ de code, les
   filtres, un champ en erreur) l'emporte sans avoir à surenchérir. */
:where(input:not([type=radio]):not([type=checkbox]),select,textarea){
  width:100%;
  min-width:0;
  font-family:var(--sans);
  font-size:var(--pas-3);
  line-height:1.5;
  color:var(--encre);
  background:var(--carte);
  border:1px solid var(--bord-champ);
  border-radius:var(--r-champ);
  padding:11px 13px;
  margin:0 0 var(--e-3);
  transition:border-color .12s ease;
}
:where(input:not([type=radio]):not([type=checkbox]),select,textarea):hover{
  border-color:var(--encre);
}
input::placeholder{color:var(--doux);opacity:1}
textarea{min-height:120px;resize:vertical;line-height:1.6}

select{
  appearance:none;
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
  padding-right:36px;
}

/* Le code : six chiffres, chassés, lisibles d'un coup d'œil. Son étiquette
   suit la boîte, sinon elle flotte seule à gauche. */
label[for=code],
label[for=code-admin],
label[for=code-demo]{text-align:center}
input.code{
  display:block;
  font-family:var(--mono);
  font-size:var(--pas-6);
  font-weight:600;
  letter-spacing:.3em;
  text-indent:.3em;               /* recentre : l'interlettrage pousse à droite */
  text-align:center;
  max-width:12ch;
  margin-inline:auto;
  padding:12px 10px;
}

/* Les boutons. La forme dit le poids du geste : pastille pour ce qui se
   défait, angle vif pour ce qui ne se défait pas (voir `.grave`). */
button{
  font-family:var(--sans);
  font-size:var(--pas-3);
  font-weight:600;
  line-height:1.2;
  color:var(--sur-marine);
  background:var(--marine);
  border:1px solid var(--bord-action);
  border-radius:var(--r-pastille);
  padding:13px 26px;
  min-height:46px;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,
             box-shadow .16s ease,transform .16s ease;
}
button[disabled]{opacity:.45;cursor:default}

button.discret{
  background:transparent;
  color:var(--lien);
  border-color:var(--bord-champ);
  font-weight:500;
  font-size:var(--pas-2);
  padding:9px 18px;
  min-height:40px;
}
button.discret:hover{background:var(--voile);border-color:var(--encre)}

/* Un geste sans retour ne se distingue pas par la seule couleur : il change
   de FORME. L'angle est vif là où les autres sont ronds, le trait est plus
   épais, et le mot reste celui de l'acte (« Confirmer le refus »). */
button.grave{
  border-radius:var(--r-bloc);
  border-width:1.5px;
  border-color:var(--grave);
  color:var(--grave);
  font-weight:600;
  letter-spacing:.01em;
}
button.grave:hover{background:var(--grave-voile);border-color:var(--grave)}


/* ── LE SURVOL D'UN BOUTON ───────────────────────────────────────────────
   Le client, 2026-09-11 : « mets les boutons jolis et bien designés, avec
   effet flagrant lorsque le curseur passe. »

   Flagrant, mais pas bavard : le bouton MONTE de deux pixels et porte une
   ombre — le geste se voit du coin de l'œil, à la souris comme au clavier
   (`:focus-visible` reçoit le même relief). À l'appui, il redescend : on sent
   qu'on a appuyé.

   Trois rôles, trois comportements, et c'est voulu :
   · le bouton plein monte et s'assombrit — c'est l'action première ;
   · le discret monte aussi, mais il se remplit du voile : il pèse moins ;
   · le GRAVE ne monte pas. Un geste sans retour ne doit pas paraître léger :
     il se remplit de terre brûlée et reste planté. C'est la même règle que
     son angle vif — la forme dit le poids du geste, pas seulement la couleur.

   Ce qui n'est pas un bouton plein — un onglet, un en-tête d'accordéon, un
   lien déguisé en bouton — ne monte pas : cela glisserait sous le doigt d'un
   élément qui est censé tenir sa place. Ils reçoivent un fond, pas un relief.

   Et rien ne bouge pour qui a demandé que rien ne bouge (voir le bloc
   `prefers-reduced-motion` plus haut, complété en fin de fichier). */

button:hover{
  background:var(--marine-fonce);
  border-color:var(--marine-fonce);
  box-shadow:var(--ombre-bouton);
  transform:translateY(-2px);
}
button:focus-visible{box-shadow:var(--ombre-bouton)}
button:active{transform:translateY(0);box-shadow:0 1px 3px rgba(13,39,71,.20)}
button[disabled]:hover,button[disabled]:active{
  background:var(--marine);border-color:var(--bord-action);
  box-shadow:none;transform:none;
}

button.discret:hover{
  background:var(--voile);
  border-color:var(--encre);
  color:var(--titre);
  box-shadow:0 4px 12px rgba(13,39,71,.12);
  transform:translateY(-2px);
}
button.discret:active{transform:translateY(0);box-shadow:0 1px 3px rgba(13,39,71,.14)}

/* Le geste sans retour : il se REMPLIT, et il ne monte pas. */
button.grave:hover{
  background:var(--grave);
  border-color:var(--grave);
  color:#fff;
  box-shadow:none;
  transform:none;
}
button.grave:active{background:var(--grave);transform:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}

button.ambre:hover{
  box-shadow:0 4px 14px rgba(184,119,8,.28);
  transform:translateY(-2px);
}
button.ambre:active{transform:translateY(0);box-shadow:0 1px 3px rgba(184,119,8,.3)}

/* Les pastilles — filtres, gestes d'une publication, étiquettes actionnables.
   Elles sont petites : un pixel de relief suffit à les faire répondre. */
.chip,.pub-action,.geste,.bac-role-bouton{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,
             box-shadow .16s ease,transform .16s ease;
}
.chip:hover,.pub-action:hover,.geste:hover,.bac-role-bouton:hover{
  box-shadow:0 3px 10px rgba(13,39,71,.14);
  transform:translateY(-1px);
}
.chip:active,.pub-action:active,.geste:active,.bac-role-bouton:active{
  transform:translateY(0);box-shadow:none;
}

/* Ce qui tient sa place : onglets, en-têtes d'accordéon, liens déguisés en
   boutons. Un fond, jamais un relief. */
.uj-onglet:hover,.repli-bouton:hover,.uj-lien:hover,.uj-lien-danger:hover,
.situations button:hover,.fil-bascule button:hover,.ecran-onglet:hover{
  transform:none;box-shadow:none;
}

.boutons{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  align-items:center;
  margin-top:var(--e-2);
}

/* Les deux voies d'identification. Le bouton radio reste VISIBLE, dessiné :
   on doit voir qu'il s'agit d'un choix entre deux, et lequel est pris, sans
   rien lire. Les flèches du clavier y circulent nativement. */
.voies{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0}   /* le blanc vient du fieldset */
.voie{
  flex:1 1 190px;
  display:flex;
  align-items:flex-start;
  gap:var(--e-2);
  margin:0;
  padding:14px 16px;
  background:var(--carte);
  border:1px solid var(--bord-champ);
  border-radius:var(--r-champ);
  cursor:pointer;
  font-weight:400;
  transition:border-color .12s ease,background-color .12s ease;
}
.voie:hover{border-color:var(--encre)}
.voie input{
  appearance:none;
  flex:0 0 auto;
  width:18px;height:18px;
  margin:3px 0 0;
  border:1.5px solid var(--bord-champ);
  border-radius:var(--r-pastille);
  background:var(--carte);
  cursor:pointer;
}
.voie input:checked{
  border-color:var(--marine);
  border-width:5px;               /* l'anneau se referme : le point est plein */
}
/* Le second anneau, en `box-shadow`, épaissit la bordure sans déplacer d'un
   pixel ce qui est autour. */
.voie:has(input:checked){
  border-color:var(--marine);
  box-shadow:inset 0 0 0 1px var(--marine);
  background:var(--voile);
}
/* Le choix de clé de l'avocat est un choix SECOND : il se pose sous le choix
   de profession, et ne doit pas peser autant. Des tuiles plus basses, sans la
   ligne d'explication — l'aide vit sous les champs. */
.voies.serrees .voie{padding:10px 14px;flex:1 1 140px}
.voies.serrees .voie-nom{font-size:var(--pas-2)}

.voie-corps{min-width:0}
.voie-nom{display:block;font-weight:600;font-size:var(--pas-3)}
.voie-dit{display:block;font-size:var(--pas-1);color:var(--doux);margin-top:2px}

/* Le parcours en deux temps. Chaque formulaire porte son propre rail : c'est
   `app.js` qui montre l'un ou l'autre, et le rail suit sans une ligne de
   script. Fait / en cours / à venir se distinguent par le remplissage, pas
   par la seule teinte. */
.rail{
  display:flex;
  gap:var(--e-3);
  list-style:none;
  padding:0;
  margin:0 0 var(--e-4);
  max-width:none;
}
.rail li{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--e-2);
  margin:0;
  padding-bottom:var(--e-2);
  border-bottom:2px solid var(--filet);
  font-size:var(--pas-1);
  color:var(--doux);
}
.rail .n{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border:1px solid var(--bord-champ);
  border-radius:var(--r-pastille);
  font-family:var(--mono);
  font-size:var(--pas-0);
  font-weight:600;
}
.rail .faite{color:var(--doux)}
.rail .faite .n{background:var(--or);border-color:var(--or-fonce);color:var(--sur-or)}
.rail .en-cours{color:var(--encre);font-weight:600;border-bottom-color:var(--marine)}
.rail .en-cours .n{background:var(--marine);border-color:var(--marine);color:var(--sur-marine)}

/* L'indice envoyé par le serveur (« Code envoyé à j…@… ») : c'est la seule
   preuve que le premier temps a abouti. Il se voit. */
.indice{
  font-size:var(--pas-2);
  color:var(--encre);
  background:var(--voile);
  border-radius:var(--r-bloc);
  padding:var(--e-2) var(--e-3);
  margin:0 0 var(--e-4);
  max-width:var(--mesure);
}
.indice:empty{display:none}

/* Le bac à sable. Il ne s'ouvre qu'à l'adresse « ?demo » : quand il paraît,
   son trait discontinu dit qu'on n'est pas dans le site réel. */
#forme-demo{
  border:1px dashed var(--bord-champ);
  border-radius:var(--r-bloc);
  padding:var(--e-4) clamp(18px,4vw,26px);
  margin:var(--section) 0 0;
}
#forme-demo h3{margin-top:0}
#forme-demo .actions{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2)}


/* ── 6. L'espace du membre ──────────────────────────────────────────────── */

.entete-membre{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-3);
  align-items:flex-start;
  justify-content:space-between;
  padding-bottom:var(--e-3);
}
.entete-membre h2{margin:0}
.entete-membre>div{min-width:0}
.entete-membre>div>p{margin:var(--e-1) 0 0;max-width:var(--mesure)}

/* Un appareil : son nom, sa date, et le geste qui le retire — à droite tant
   qu'il y a de la place, dessous quand il n'y en a plus. */
.appareil{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2) var(--e-3);
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--filet);
  padding:var(--e-3) 0;
}
.appareil:first-of-type{border-top:0}
.appareil>div{min-width:0}
.appareil-nom{font-weight:600;margin:0}
.appareil-detail{
  font-size:var(--pas-1);
  color:var(--doux);
  margin:2px 0 0;
  font-variant-numeric:tabular-nums;
}
.appareil .boutons{margin-top:0;justify-content:flex-end}

/* « cette fenêtre » : l'or remplit, l'encre se lit dessus (8:1). L'or en
   texte sur le papier ne passerait pas. */
.ici{
  display:inline-block;
  font-size:var(--pas-0);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sur-or);
  background:var(--or);
  border-radius:var(--r-pastille);
  padding:1px 9px;
  white-space:nowrap;
}

/* Le fil. C'est le vrai travail de cette page : du texte professionnel,
   souvent dense. L'auteur en serif tient la ligne de tête, les repères
   s'effacent, et le texte est tenu à la mesure de lecture. */
.publication{
  border-top:1px solid var(--filet);
  padding:var(--e-4) 0;
}
.publication:first-of-type{border-top:0;padding-top:var(--e-2)}
.publication-auteur{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-4);
  line-height:1.3;
  color:var(--titre);
  margin:0;
}
.publication-repere{
  font-size:var(--pas-1);
  color:var(--doux);
  margin:2px 0 var(--e-2);
}
.publication-texte{
  margin:0 0 var(--e-2);
  max-width:var(--mesure);
  font-size:16.5px;               /* un demi-point de plus : c'est ici qu'on lit */
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.publication-compte{
  font-size:var(--pas-1);
  color:var(--doux);
  margin:0;
  font-variant-numeric:tabular-nums;
}
.publication p:last-child{margin-bottom:0}

/* L'accès à l'assistance, dans le flux de la page. Depuis qu'`app.js` pose
   aussi un bouton flottant (section 9), il y a deux routes vers le même
   service : la tuile est celle qu'on trouve en lisant, le bouton celle qu'on
   trouve sans chercher. Elles portent donc la même marque — l'ambre marque,
   elle ne remplit pas. */
.acces-assistance{
  display:flex;
  align-items:flex-start;   /* la bouée s'aligne sur le titre, pas sur le milieu */
  gap:var(--e-3);
  width:100%;
  text-align:left;
  text-decoration:none;
  color:var(--encre);
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:var(--r-bloc);
  padding:var(--e-3) var(--e-4);
  transition:border-color .12s ease,background-color .12s ease;
}
.acces-assistance:hover{border-color:var(--ambre-fonce);background:var(--voile)}
.acces-assistance .bouee{
  flex:0 0 auto;
  width:40px;height:40px;
  margin-top:2px;
  color:var(--sur-ambre);
  background:var(--ambre);
  border:1px solid var(--ambre-fonce);
  border-radius:var(--r-bloc);
  padding:7px;
}
.acces-assistance .quoi{flex:1 1 auto;min-width:0}
.acces-assistance .titre{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-4);
  color:var(--titre);
}
.acces-assistance .dit{display:block;font-size:var(--pas-1);color:var(--doux)}
.acces-assistance .fleche{flex:0 0 auto;font-size:var(--pas-5);line-height:1.3;color:var(--doux)}

/* -- l'espace du membre, réorganisé en tableau de bord ----------------------
   L'ordre de la page dit ce qui compte : les applications d'abord, le fil
   ensuite, puis les appareils, l'assistance, et en bas seulement ce que la
   version web ne sait pas faire. Tous les blocs tiennent la même grille et la
   même largeur : c'est ce qui fait qu'on lit une page et non six. */

/* Deux colonnes au bureau, une seule au téléphone — et JAMAIS trois : à trois,
   les cartes deviennent des vignettes et leur phrase ne tient plus. */
@media (min-width:760px){
  .applications-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assistance-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.assistance-grille{display:grid;gap:var(--e-2)}
/* Les cartes d'une même rangée finissent à la même hauteur : sans cela, deux
   phrases de longueur inégale décalent les bords et la grille se voit. */
.applications-grille .application,
.assistance-grille .acces-assistance{height:100%}

/* Le fil ne doit plus manger la page : moins d'air entre deux publications,
   un filet pour les séparer, et le texte ramené à la mesure de lecture. */
.fil-compact .publication{
  padding:var(--e-2) 0;
  border-bottom:1px solid var(--filet);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.fil-compact .publication:last-child{border-bottom:0}
.fil-compact .publication-texte{
  font-size:var(--pas-1);
  line-height:1.6;
  max-width:var(--mesure,60ch);
  margin:4px 0 0;
}
.fil-compact .publication-repere{margin:1px 0 0}

/* Les appareils : une feuille posée sur le papier, comme les autres blocs. */
.carte-bloc{
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:var(--r-bloc);
  padding:var(--e-2) var(--e-3);
}
.carte-bloc .appareil:last-child{border-bottom:0;padding-bottom:0}

/* Ce que la page ne fait pas encore : présent, lisible, mais visiblement
   second. Pas de fond de carte — il ne dispute rien aux fonctions réelles. */
.encart.discret-bas{
  background:none;
  border:0;
  border-top:1px solid var(--filet);
  border-radius:0;
  margin-top:var(--e-5,32px);
  padding:var(--e-3) 0 0;
}
.encart.discret-bas h3{font-size:var(--pas-1);color:var(--doux);margin:0 0 6px}
.encart.discret-bas p{font-size:var(--pas-0)}

/* Le bouton flottant ferait doublon avec la carte « Assistance technique » qui
   est maintenant dans le flux : sur CETTE page, il garde son rond et perd son
   libellé. Il reste atteignable, il cesse de répéter. */

/* Un code qu'on recopie : en chasse fixe, sur un fond léger, pour qu'aucun
   chiffre ne se confonde avec une lettre. */
.code-en-ligne{
  font-family:var(--mono);
  font-size:.95em;
  background:var(--voile);
  border:1px solid var(--filet);
  border-radius:6px;
  padding:1px 7px;
}

/* Le bouton d'un repli : le contour d'un champ, pas d'un bouton d'action — il
   ne dispute rien aux gestes de la page. Le chevron dit dans quel état on est. */
.repli-ligne{margin:var(--e-3) 0}
.repli-bouton{
  display:inline-flex;
  align-items:center;
  gap:var(--e-1);
  padding:9px 16px;
  border:1px solid var(--filet);
  border-radius:var(--r-pastille);
  background:var(--carte);
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--pas-1);
  color:var(--lien);
  cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease;
}
.repli-bouton:hover{border-color:var(--bord-champ);background:var(--voile)}
.repli-bouton::after{
  content:"";
  width:8px;height:8px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.repli-bouton[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-1px,-1px)}
.repli-compte{font-weight:400;color:var(--doux)}
@media (prefers-reduced-motion:reduce){.repli-bouton::after{transition:none}}

/* -- les domaines, dans l'espace d'administration --------------------------
   Une fiche par nom : le nom lui-même est le lien, ce qu'il sert en dessous.
   Pas de grille ici — cette liste se PARCOURT du regard, de haut en bas, et
   des colonnes casseraient l'ordre de lecture. */
.domaine{
  padding:var(--e-2) 0;
  border-bottom:1px solid var(--filet);
}
.domaine:last-child{border-bottom:0}
.domaine-nom{
  display:inline-block;
  font-family:var(--mono);
  font-size:var(--pas-2);
  color:var(--lien);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.domaine-nom:hover{color:var(--marine-fonce)}
.domaine-role{margin:4px 0 0;font-size:var(--pas-1);color:var(--doux)}
.domaine-porte{margin:3px 0 0;font-size:var(--pas-0);color:var(--doux)}
/* Ce qu'il faut savoir AVANT d'ouvrir : la réserve, ou le mot qui dit ce que
   l'application ne fait pas. La terre brûlée, comme partout ailleurs. */
.domaine-reserve{margin:4px 0 0;font-size:var(--pas-0);color:var(--grave)}

/* -- les applications du cabinet -------------------------------------------
   Même grammaire que la tuile d'assistance — une carte bordée, un titre en
   serif, une ligne qui dit ce que c'est, un chevron — mais en grille : elles
   sont plusieurs, et de longueur voisine. Pas d'icône : chacune aurait fallu
   la dessiner, et un jeu d'icônes inégales vaut moins que pas d'icône du tout. */
.famille-applications{
  font-family:var(--sans);
  font-size:var(--pas-0);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--doux);
  margin:var(--e-4) 0 var(--e-2);
}
.famille-applications:first-child{margin-top:0}

.applications-grille{
  display:grid;
  /* auto-fill et non auto-fit : une seule application ne s'étire pas sur toute
     la largeur, elle garde la taille des autres. */
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--e-2);
}

.application{
  display:flex;
  align-items:flex-start;
  gap:var(--e-2);
  text-decoration:none;
  color:var(--encre);
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:var(--r-bloc);
  padding:var(--e-3);
  transition:border-color .12s ease,background-color .12s ease;
}
.application:hover{border-color:var(--marine);background:var(--voile)}
.application .quoi{flex:1 1 auto;min-width:0}
.application .titre{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-3);
  color:var(--titre);
}
.application .dit{display:block;font-size:var(--pas-1);color:var(--doux);margin-top:2px}
/* L'avertissement se lit AVANT d'ouvrir : il prend la teinte des gestes qu'on
   pèse, et se détache du reste par un filet, pas par une couleur criarde. */
.application .reserve{
  display:block;
  font-size:var(--pas-0);
  color:var(--grave);
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--filet);
}
.acces-assistance .reserve{
  display:block;
  font-size:var(--pas-0);
  color:var(--grave);
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--filet);
}
.application .fleche{flex:0 0 auto;font-size:var(--pas-4);line-height:1.2;color:var(--doux)}

/* Le bouton qui ouvre une demande porte lui aussi la couleur du service.
   Encre sombre sur ambre : 7,4:1. Du blanc y tomberait à 2,6. */
button.ambre{
  background:var(--ambre);
  border-color:var(--ambre-fonce);
  color:var(--sur-ambre);
}
button.ambre:hover{background:var(--ambre-fonce);border-color:var(--ambre-fonce);color:var(--sur-ambre)}


/* ── 7. L'espace d'administration ───────────────────────────────────────── */
/* On y décide du sort de confrères : aucun chiffre décoratif, aucune tuile
   de tableau de bord. Une ligne par dossier, les faits à gauche, les gestes
   à droite, et le second temps du geste en toutes lettres. */

.dossier{border-top:1px solid var(--filet);padding:var(--e-4) 0}
.dossier:first-child{border-top:0;padding-top:var(--e-2)}
.dossier-corps{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-3) var(--e-4);
  justify-content:space-between;
}
.dossier-faits{flex:1 1 280px;min-width:0}
.dossier-titre{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-4);
  line-height:1.3;
  color:var(--titre);
  margin:0 0 var(--e-1);
}
.dossier-detail{
  font-size:var(--pas-1);
  color:var(--doux);
  margin:0 0 3px;
  max-width:var(--mesure);
}
.dossier-faits p:last-child{margin-bottom:0}
.dossier-gestes{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  align-items:flex-start;
  justify-content:flex-end;
}
.dossier-gestes select{margin-bottom:0;width:auto}

/* Sur un téléphone, les gestes tombent sous les faits : alignés à gauche
   comme eux, plutôt qu'en escalier contre le bord droit. */
@media (max-width:560px){
  .dossier-gestes{justify-content:flex-start}
}

/* Le second temps d'un geste : la phrase prend toute la largeur, sous les
   faits, pour être lue avant que le bouton soit atteint. Le bloc s'encadre —
   on est sorti du repos, et cela se voit sans lire. */
.dossier-gestes.en-question{
  flex:1 1 100%;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:var(--e-2);
  background:var(--voile);
  border:1px solid var(--filet-fort);
  border-radius:var(--r-bloc);
  padding:var(--e-3);
}
/* Quand la question porte sur un geste sans retour, le cadre prend la teinte
   du grave — en plus de l'angle vif du bouton, jamais à sa place. */
.dossier-gestes.en-question:has(button.grave){
  background:var(--grave-voile);
  border-color:var(--grave);
}
.consequence{
  font-size:var(--pas-2);
  line-height:1.55;
  margin:0;
  max-width:var(--mesure);
}
.dossier-gestes.en-question .boutons{margin-top:0}

/* Le contenu signalé, tel que le serveur le rend : le texte d'un membre,
   cité, jamais mis en forme et jamais rendu cliquable. */
.cite{
  margin:var(--e-2) 0 0;
  padding:var(--e-2) var(--e-3);
  background:var(--voile);
  border:1px solid var(--filet);
  border-left:3px solid var(--filet-fort);
  border-radius:0 var(--r-bloc) var(--r-bloc) 0;
  font-size:var(--pas-2);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:var(--mesure);
}

/* Une durée, jamais un tarif : cet espace ouvre un droit, il ne vend rien. */
select.duree{
  width:auto;
  font-size:var(--pas-2);
  padding:9px 34px 9px 13px;
  border-radius:var(--r-pastille);
  margin:0;
}

/* Le minuteur des trente minutes : des chiffres qui ne dansent pas. */
#minuteur{font-variant-numeric:tabular-nums}

/* La vérification de session, avant que la page ne sache qui elle sert. */
#attente{text-align:center;padding:var(--e-5) 0}

/* Le journal : la date d'abord, en colonne, pour que l'œil descende le long
   des heures. */
.journal-ligne{
  display:flex;
  flex-wrap:wrap;
  gap:2px var(--e-4);
  border-top:1px solid var(--filet);
  padding:var(--e-3) 0;
}
.journal-ligne:first-child{border-top:0}
.journal-quand{
  flex:0 0 auto;
  min-width:15em;
  font-family:var(--mono);
  font-size:var(--pas-0);
  font-variant-numeric:tabular-nums;
  color:var(--doux);
  margin:0;
}
.journal-fait{flex:1 1 240px;min-width:0}
.journal-geste{margin:0 0 2px;font-size:var(--pas-2)}


/* ── 8. L'assistance ────────────────────────────────────────────────────── */

/* La fenêtre : un vrai <dialog>, pour le focus, la touche Échap et le fond
   inerte — trois choses qu'une div ne sait pas faire seule. C'est le seul
   endroit du site qui porte une ombre : elle y est fonctionnelle, elle
   détache un plan qui flotte réellement au-dessus de la page. */
dialog.feuille{
  border:0;
  border-radius:12px;
  padding:0;
  width:min(640px,calc(100vw - 24px));
  max-height:min(88vh,900px);
  background:var(--carte);
  color:var(--encre);
  box-shadow:var(--ombre-feuille);
}
/* Seulement à l'ouverture : sans le `[open]`, on écraserait le
   `display:none` que le navigateur applique à un dialogue fermé. */
dialog.feuille[open]{display:flex;flex-direction:column}
dialog.feuille::backdrop{background:var(--fond-modal)}
dialog.feuille .tete{
  position:relative;
  flex:0 0 auto;
  background:var(--marine);
  color:var(--sur-marine);
  border-bottom:1px solid var(--or);
  padding:var(--e-4) 56px var(--e-3) var(--e-4);
  border-radius:12px 12px 0 0;
}
dialog.feuille .tete h2{
  color:var(--sur-marine);
  border:0;
  padding:0;
  margin:0 0 var(--e-1);
  font-size:var(--pas-5);
}
dialog.feuille .tete p{margin:0;font-size:var(--pas-1);color:var(--sur-marine-doux);max-width:none}
dialog.feuille .dedans{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:var(--e-4);
}
dialog.feuille .dedans>p{max-width:var(--mesure)}
dialog.feuille .pied{
  flex:0 0 auto;
  display:flex;
  gap:var(--e-2);
  justify-content:flex-end;
  flex-wrap:wrap;
  border-top:1px solid var(--filet);
  padding:var(--e-3) var(--e-4);
}
.fermer-feuille{
  position:absolute;
  top:14px;right:14px;
  width:36px;height:36px;
  min-height:0;
  padding:0;
  font-size:var(--pas-5);
  line-height:1;
  color:var(--sur-marine);
  background:transparent;
  border:1px solid var(--sur-marine-doux);
  border-radius:var(--r-pastille);
}
.fermer-feuille:hover{background:var(--marine-fonce);border-color:var(--sur-marine)}

.champ{margin:0 0 var(--e-3)}
.champ>label{display:block;font-weight:600;font-size:var(--pas-2);margin:0 0 var(--e-1)}
.champ .aide{font-size:var(--pas-1);color:var(--doux);margin:0 0 var(--e-1);max-width:var(--mesure)}
.champ>select,.champ>textarea,.champ>input{margin-bottom:0}
/* Le sélecteur exact qu'`app.js` interroge pour porter le focus sur le
   premier champ fautif : ne pas le renommer. */
.champ.faux select,.champ.faux input,.champ.faux textarea{
  border-color:var(--grave);
  box-shadow:inset 0 0 0 1px var(--grave);
}
.erreur-champ{color:var(--grave);font-size:var(--pas-1);margin:var(--e-1) 0 0}
.erreur-champ:empty{display:none}

/* Un repli : ce qui s'allonge tout seul — la liste des appareils, par exemple —
   ne doit pas occuper la page entière. Le bouton en dit le nombre, on n'ouvre
   que pour agir. <details> plutôt qu'un bouton en script : il marche au clavier
   et sans JavaScript, et rien ne reste caché si le script échoue. */
.repli{border:0;padding:0;margin:0 0 var(--e-3)}
.repli>summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:var(--e-1);
  /* Discret : le contour d'un champ, pas d'un bouton d'action. Il ne dispute
     rien aux gestes de la page. */
  padding:9px 16px;
  border:1px solid var(--filet);
  border-radius:var(--r-pastille);
  background:var(--carte);
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--pas-1);
  color:var(--lien);
  list-style:none;
  transition:border-color .12s ease,background-color .12s ease;
}
/* Le triangle par défaut de Safari et de Chrome, retiré des deux façons : la
   pseudo-classe standard et celle de WebKit. */
.repli>summary::-webkit-details-marker{display:none}
.repli>summary::marker{content:""}
.repli>summary:hover{border-color:var(--bord-champ);background:var(--voile)}
/* Le chevron est dessiné en CSS : pas d'image à aller chercher, et il tourne
   quand le repli s'ouvre — c'est ce qui dit dans quel état on est. */
.repli>summary::after{
  content:"";
  width:8px;height:8px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.repli[open]>summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.repli-compte{font-weight:400;color:var(--doux)}
.repli>summary+*{margin-top:var(--e-2)}
.repli p{margin:0 0 var(--e-1)}
@media (prefers-reduced-motion:reduce){
  .repli>summary::after{transition:none}
}

.case{
  display:flex;
  gap:var(--e-2);
  align-items:flex-start;
  font-size:var(--pas-2);
  font-weight:400;
  margin:0 0 var(--e-3);
}
.case input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:var(--marine)}

/* Une demande : son objet en serif, son état en étiquette, sa fiche en
   petit. On la consulte, on ne la survole pas. */
.demande{border-top:1px solid var(--filet);padding:var(--e-4) 0}
.demande:first-of-type{border-top:0;padding-top:var(--e-2)}
.demande-tete{display:flex;gap:var(--e-2);align-items:baseline;flex-wrap:wrap}
.demande-objet{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-4);
  line-height:1.3;
  color:var(--titre);
  margin:0;
}
.demande-detail{
  font-size:var(--pas-1);
  color:var(--doux);
  margin:var(--e-1) 0 var(--e-2);
  max-width:var(--mesure);
}
.demande .boutons{margin-top:0}

.etiquette{
  display:inline-block;
  font-size:var(--pas-0);
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid var(--filet-fort);
  border-radius:var(--r-pastille);
  padding:2px 10px;
  color:var(--doux);
  white-space:nowrap;
}
.etiquette.vif{border-color:var(--or-fonce);color:var(--or-lu);background:var(--or-voile)}
.etiquette.rouge{border-color:var(--grave);color:var(--grave);background:var(--grave-voile)}

.echange{border-top:1px solid var(--filet);padding:var(--e-3) 0;display:flex;gap:var(--e-3)}
/* Le premier échange suit immédiatement l'entête de la fenêtre : un filet
   de plus y ferait doublon avec le bord de l'entête. */
.dedans>.echange:first-child{border-top:0;padding-top:0}
.echange-corps{flex:1 1 auto;min-width:0}
.echange-auteur{font-weight:600;font-size:var(--pas-2);margin:0 0 2px}
.echange-texte{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:var(--mesure);
}
.echange-date{
  font-size:var(--pas-0);
  color:var(--doux);
  margin:var(--e-1) 0 0;
  font-variant-numeric:tabular-nums;
}
/* Une note interne ne va pas au demandeur : elle ne ressemble pas à un
   message qui part. */
.echange.interne{
  background:var(--voile);
  border:1px dashed var(--filet-fort);
  border-radius:var(--r-bloc);
  padding:var(--e-3);
  margin:var(--e-2) 0;
}
.echange.interne .echange-auteur{color:var(--grave)}

.pieces{list-style:none;padding:0;margin:var(--e-2) 0 0;display:flex;flex-wrap:wrap;gap:var(--e-2)}
.pieces li{margin:0}
.pieces a{
  display:inline-block;
  font-size:var(--pas-1);
  border:1px solid var(--filet-fort);
  border-radius:var(--r-bloc);
  padding:6px 11px;
  text-decoration:none;
  color:var(--lien);
}
.pieces a:hover{background:var(--voile);border-color:var(--encre)}

/* Le centre privé. Il n'a ni fichier, ni balise dans la page : le script ne
   le construit qu'à la réponse du serveur. */
#centre-assistance{
  margin-top:var(--section);
  border-top:1px solid var(--filet-fort);
  padding-top:var(--e-4);
}

/* Les seuls chiffres du site. Ils viennent du serveur, ils changent la
   façon de travailler, et ils sont sobres : un cadre, un nombre, un mot. */
.chiffres{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--e-2);
  margin:0 0 var(--e-4);
}
.chiffre{
  border:1px solid var(--filet);
  border-radius:var(--r-bloc);
  padding:var(--e-2) var(--e-3);
  background:var(--carte);
}
.chiffre .n{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--pas-6);
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:var(--titre);
}
.chiffre .quoi{font-size:var(--pas-0);color:var(--doux)}
.chiffre.alerte{border-color:var(--grave)}
.chiffre.alerte .n{color:var(--grave)}

.filtres{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0 0 var(--e-4)}
.filtres select,.filtres input{
  width:auto;
  flex:0 1 auto;
  font-size:var(--pas-2);
  padding:9px 13px;
  margin:0;
}
.filtres select{padding-right:34px}
.filtres input{flex:1 1 200px;min-width:0}

.pagination{
  display:flex;
  gap:var(--e-2);
  align-items:center;
  flex-wrap:wrap;
  margin:var(--e-4) 0 0;
}
.pagination span{font-variant-numeric:tabular-nums}


/* ── 9. Le bouton flottant d'assistance ─────────────────────────────────── */
/* Il est posé par `app.js` (`poserLeBoutonAssistance`) sur toute page où
   quelqu'un est identifié, et il vient d'un autre chantier. Ces règles
   remplacent celles d'avant la refonte : elles disaient le même geste avec un
   dégradé, une ombre bleue et deux couleurs écrites en clair, dont une
   variable `--profond` qui n'existe plus.

   Le parti pris ne change pas pour autant : l'ambre est la MARQUE du service,
   pas son remplissage. Le bouton est donc du papier bordé d'ambre, avec le
   rond d'ambre pour seul signal — la même grammaire que la tuile « Assistance
   technique » de l'espace du membre, à qui il mène.

   L'ombre est ici fonctionnelle, comme celle de la fenêtre modale : elle
   détache un plan qui flotte réellement au-dessus du texte qui défile. */

body.avec-assistance main{
  /* Le bouton ne recouvre RIEN : le pied de page garde sa hauteur sous lui. */
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px) + var(--e-5));
}

.bouton-assistance{
  position:fixed;
  right:max(16px,env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:var(--e-2);
  min-height:48px;
  padding:12px 20px;
  background:var(--carte);
  color:var(--encre);
  border:1px solid var(--ambre-fonce);
  border-radius:var(--r-pastille);
  font-family:var(--sans);
  font-size:var(--pas-2);
  font-weight:600;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--ombre-bouton);
}
.bouton-assistance:hover{background:var(--voile);border-color:var(--ambre-fonce)}
.bouton-assistance:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.bouton-assistance[disabled]{opacity:.5;cursor:default}
.bouton-assistance[disabled]:hover{background:var(--carte)}

.bouton-assistance .rond{
  flex:0 0 auto;
  width:10px;height:10px;
  border-radius:var(--r-pastille);
  background:var(--ambre);
  border:1px solid var(--ambre-fonce);
}
/* `app.js` ne pose pas encore la classe `attend` ; la règle et son animation
   sont gardées ensemble pour qu'elle ne pende pas dans le vide le jour où il
   la posera. `prefers-reduced-motion` la neutralise, comme tout le reste. */
.bouton-assistance.attend .rond{background:var(--grave);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

/* Sous 420 px, le libellé s'efface et le bouton devient un rond franc de
   48 px — c'est ce que dit le commentaire d'`app.js`, et ce que la feuille
   d'avant la refonte faisait à TOUTE largeur, par un `@media` perdu. */
@media (max-width:420px){
  .bouton-assistance{padding:0;min-width:48px;justify-content:center}
  .bouton-assistance .libelle{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

/* Pendant qu'une fenêtre modale est ouverte, le bouton s'efface : c'est ce
   que l'ancienne feuille annonçait sans jamais l'écrire. `visibility` et non
   `display` — le <dialog> lui rend le focus en se refermant, et il faut
   qu'il soit encore là pour le recevoir. */
body:has(dialog[open]) .bouton-assistance{visibility:hidden}


/* ═════════════════════════════════════════════════════════════════════════
   LA PAGE D'ACCUEIL NUE — la bande, la phrase, rien d'autre.
   Deux éléments seulement : c'est leur ÉQUILIBRE qui fait le dessin. La page
   occupe la hauteur de la fenêtre pour que la phrase se pose au milieu du
   papier restant plutôt que de flotter sous la bande ; `min-height` et non
   `height`, pour qu'un petit écran ou un gros caractère puissent déborder et
   défiler au lieu de rogner le texte.
   ═════════════════════════════════════════════════════════════════════════ */

body.page-nue{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body.page-nue .bandeau{flex:0 0 auto}

.page-nue-corps{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(40px,8vw,80px) 24px;
  /* Le corps de la page nue n'a pas la largeur de lecture des autres pages :
     la phrase se cadre elle-même. */
  max-width:none;
  margin:0;
}
.page-nue-corps .slogan{margin:0}

/* ── Le bac à sable ─────────────────────────────────────────────────────────
   Une barre au-dessus de l'espace, dans un compte de démonstration seulement.
   Elle est TEINTÉE et posée en haut pour qu'on ne l'oublie pas : la confusion
   qu'elle prévient — croire consulter un vrai compte — est la seule faute que
   ce genre d'outil permette de commettre. */
.barre-bac{
  border:1px solid var(--ambre-fonce);
  border-left:3px solid var(--ambre-fonce);
  background:var(--voile);
  border-radius:var(--r-bloc);
  padding:14px 16px;
  margin:0 0 22px;
}
.bac-mot{margin:0 0 10px;font-size:var(--pas-1);color:var(--encre)}
.bac-mot b{font-variant-numeric:tabular-nums}
.bac-roles{display:flex;flex-wrap:wrap;gap:7px}
.bac-role-bouton{
  font:inherit;font-size:var(--pas-0);
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--filet);background:var(--papier);color:var(--encre);
  cursor:pointer;
}
.bac-role-bouton:hover:not(:disabled){border-color:var(--ambre-fonce)}
/* Le rôle courant n'est pas un bouton mort : il est MARQUÉ. Sans cela on ne
   sait plus lequel des sept on regarde. */
.bac-role-bouton[aria-current="true"]{
  background:var(--ambre-fonce);border-color:var(--ambre-fonce);
  color:var(--sur-ambre);font-weight:600;opacity:1;cursor:default;
}
.bac-role-bouton:disabled:not([aria-current]){opacity:.45;cursor:progress}
.bac-role-lien{font-size:var(--pas-0)}
.barre-bac .message{margin:8px 0 0;font-size:var(--pas-0)}
/* La sortie du bac. Discrète mais toujours là : on y entre facilement, il faut
   pouvoir en sortir aussi facilement — sinon on croit sa vraie session perdue. */
.bac-sortie{margin:10px 0 0;font-size:var(--pas-0)}
.bac-quitter{
  font:inherit;font-size:var(--pas-0);
  padding:0;border:0;background:none;cursor:pointer;
  color:var(--lien);text-decoration:underline;text-underline-offset:3px;
}
.bac-quitter:disabled{opacity:.5;cursor:progress}

/* ── La veille ──────────────────────────────────────────────────────────────
   En tête de l'espace, teinté grave : ce bandeau existe parce qu'un
   détournement de domaine est resté six heures invisible. Il doit se voir
   avant tout le reste, et se retirer d'un geste une fois lu. */
.bandeau-veille{
  border:1px solid var(--grave);
  border-left:3px solid var(--grave);
  background:var(--grave-voile);
  border-radius:var(--r-bloc);
  padding:13px 16px;
  margin:0 0 22px;
}
.veille-tete{display:flex;align-items:baseline;gap:12px;margin:0 0 8px}
.veille-tete strong{color:var(--grave);font-size:var(--pas-2)}
.veille-vu{
  margin-left:auto;font:inherit;font-size:var(--pas-0);
  padding:4px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--grave);background:transparent;color:var(--grave);
}
.veille-vu:hover{background:var(--grave);color:var(--papier)}
.veille-liste{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.veille-liste li{display:grid;gap:1px}
.veille-sujet{font-size:var(--pas-1);color:var(--encre);font-weight:600}
.veille-mot{font-size:var(--pas-0);color:var(--doux)}
.veille-quand{font-size:var(--pas-0);color:var(--doux);font-variant-numeric:tabular-nums}

/* ── Le menu de l'espace ────────────────────────────────────────────────────
   Son style est en fin de feuille (« Le bandeau de l'espace », 2026-09-23).
   Cette seule règle reste ici, à spécificité (0,1,0) : les rôles (plus bas)
   et `.menu-cache` la battent par display:none — elle ne doit pas grossir. */
.menu-halo-lien{display:flex}


/* La barre de la porte (entrer, inscrire, presentation) : la marque à gauche,
   le lien de retour à sa suite. */
.bandeau.mince{justify-content:flex-start}


/* ── LES ONGLETS, POUR TOUT LE SITE ──────────────────────────────────────
   Le client, 2026-09-11 : « organise toutes les pages du site dans ce style,
   mais seulement si le design s'y prête. » La barre est née dans RDV-Avocat,
   a servi dans Missive ; elle vit ici désormais, écrite une fois. Une page ne
   s'y prête QUE si ses parties sont des tâches indépendantes — jamais une
   suite d'étapes, jamais un formulaire : masquer ce qu'on doit remplir, c'est
   perdre ce qu'on a saisi.

   Le comportement est dans `app.js` (`rangerEnOnglets`), et la rubrique
   choisie s'inscrit dans l'adresse : on revient où l'on était. */
.uj-onglets{
  display:flex;gap:2px;position:sticky;top:0;z-index:6;padding:6px 0;
  background:var(--papier);
  border-bottom:1px solid var(--filet);
  overflow-x:auto;scrollbar-width:none;margin:0 0 var(--e-3);
}
.uj-onglets::-webkit-scrollbar{display:none}
.uj-onglet{
  font:inherit;font-weight:600;font-size:var(--pas-2);color:var(--doux);
  background:none;border:0;padding:9px 14px;border-radius:10px 10px 0 0;
  cursor:pointer;white-space:nowrap;min-height:0;
  border-bottom:3px solid transparent;
}
.uj-onglet:hover{color:var(--titre);background:var(--voile);transform:none;box-shadow:none}
.uj-onglet.actif{color:var(--titre);border-bottom-color:var(--or)}
.uj-onglet:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.uj-onglet .pastille-compte{
  display:inline-block;margin-left:7px;font-size:var(--pas-0);font-weight:700;
  background:var(--grave);color:#fff;border-radius:999px;padding:0 7px;
}

/* Une seule rubrique à l'écran. ⚠ `[hidden]` porte un `!important` : une
   section encore en chargement reste invisible même si son onglet est actif. */
[data-rubrique]{display:none}
[data-rubrique].rubrique-active{display:block}


/* ── SUR ───────────────────────────────────────────────────────────────────
   Le bouton de l'administrateur, dans l'en-tête de l'espace : une pastille
   d'or pleine — la seule de la page — parce que c'est la porte de ce qui
   n'est ouvert qu'à lui. */
.entete-gestes{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.sur{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#E3C481 0%,var(--or) 46%,#B98F30 100%);
  color:var(--sur-or);
  border:1px solid var(--or-fonce);border-radius:var(--r-pastille);
  font-weight:800;font-size:var(--pas-2);letter-spacing:.2em;
  padding:11px 22px 11px 18px;text-decoration:none;
  box-shadow:0 2px 10px rgba(154,122,46,.30);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.sur:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(154,122,46,.44);
  filter:brightness(1.05);
  color:var(--sur-or);
}
.sur:active{transform:translateY(0);box-shadow:0 2px 8px rgba(154,122,46,.34)}
.sur:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* LE VOYANT. Au repos il est là, discret : la porte existe, rien ne presse.
   Il ne CLIGNOTE que lorsqu'il y a quelque chose à voir — un signalement de
   surveillance non lu. Un voyant qui clignote tout le temps ne dit plus rien ;
   celui-ci ne s'allume que quand il a une raison, et s'éteint dès qu'on a
   regardé.
   (La leçon du 2026-09-07 : l'alerte était bien partie, dans une boîte que
   personne ne relevait. Ce n'est pas l'expédition qu'il fallait réparer,
   c'est l'endroit. Elle est désormais SOUS LES YEUX, là où l'on entre.) */
.sur-voyant{
  width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:var(--sur-or);opacity:.38;
}
.sur-compte{
  font-size:var(--pas-0);font-weight:700;letter-spacing:0;
  background:rgba(32,24,10,.16);border-radius:999px;padding:1px 8px;
}
.sur.alerte{border-color:#8E2B1E}
.sur.alerte .sur-voyant{
  background:#C7402F;opacity:1;
  animation:sur-clignote 1.5s ease-in-out infinite;
}
@keyframes sur-clignote{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(199,64,47,.8)}
  50%{opacity:.45;box-shadow:0 0 0 7px rgba(199,64,47,0)}
}
/* Pour qui a demandé que rien ne bouge : le voyant reste ALLUMÉ. On ne retire
   pas l'information, on retire le mouvement. */
@media (prefers-reduced-motion:reduce){
  .sur.alerte .sur-voyant{animation:none;opacity:1}
  .sur:hover{transform:none}
}


/* ── L'en-tête d'écran de l'application, transporté ─────────────────────────
   Habillage.swift:208-306 — `EnTete` : dégradé marine → marine profond en
   diagonale, halo d'or radial en haut à droite, filet d'or de 1,5 px en bas,
   titre d'écran serif 27 px blanc souligné d'un trait d'or de 44×2. C'est la
   bande que le client voit sur son iPhone ; le site la reprend. */
.bandeau.mince{
  flex-wrap:wrap;
  row-gap:8px;
  background:
    radial-gradient(circle at 92% 0%, rgba(201,162,75,.30), transparent 55%),
    linear-gradient(135deg, var(--marine), var(--marine-fonce));
  border-bottom:1.5px solid rgba(201,162,75,.55);
  padding:12px var(--marge) 13px;
}

/* ── La tuile de l'application, transportée ──────────────────────────────────
   VueOutils.swift:218-233 — un carré 78×78, rayon 20, fond dégradé de la
   teinte, ombre de la teinte à 32 %, glyphe blanc de 30 px, libellé 12 px/600
   sous le carré. Grille adaptative 96–130 px, espacement 14×16. */
.tuiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:18px 14px;
  padding:6px 0 2px;
  list-style:none;
  margin:0 0 var(--e-3);
}
.tuile{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;color:var(--encre);
  text-align:center;
}
.tuile-carre{
  --teinte:var(--marine);
  width:78px;height:78px;flex:0 0 78px;
  display:grid;place-items:center;
  border-radius:20px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--teinte) 82%, white) 0%, var(--teinte) 55%, color-mix(in srgb, var(--teinte) 86%, black) 100%);
  box-shadow:0 3px 6px color-mix(in srgb, var(--teinte) 32%, transparent);
  color:#fff;
  transition:transform .16s ease, box-shadow .16s ease;
}
.tuile-carre svg{width:30px;height:30px}
.tuile:hover .tuile-carre,
.tuile:focus-visible .tuile-carre{
  transform:translateY(-2px);
  box-shadow:0 8px 16px color-mix(in srgb, var(--teinte) 38%, transparent);
}
.tuile:focus-visible{outline:none}
.tuile:focus-visible .tuile-carre{outline:2px solid var(--focus);outline-offset:3px}
.tuile-nom{
  font-size:12px;font-weight:600;line-height:1.25;
  max-width:130px;
}
.tuile-dit{
  font-size:11px;line-height:1.35;color:var(--doux);
  max-width:140px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* L'avertissement se lit AVANT d'ouvrir — c'est la règle de la maison, et
   l'app la tient dans son catalogue. Terre brûlée, petit, mais là. */
.tuile-reserve{
  font-size:10.5px;line-height:1.3;color:var(--grave);
  max-width:140px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Le titre d'une famille, comme la rubrique de l'app (11 pt, capitales
   espacées, encre douce) — déjà `.famille-applications`, on l'aligne. */
.famille-applications{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);margin:var(--e-4) 0 var(--e-2);
}


/* ── La carte de publication de l'application, transportée ──────────────────
   VueFil.swift:101-166 : en-tête (cercle d'initiales 38 px serif, nom,
   repères, capsule de catégorie), texte, pied de capsules. Fond carte,
   rayon 12, filet 1 px, padding 13. Le fil compact du site gardait des
   paragraphes séparés d'un filet ; il prend les cartes de l'iPhone. */
.fil-compact .publication{
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:12px;
  padding:13px;
  margin:0 0 10px;
}
.fil-compact .publication:first-of-type{padding-top:13px}
.fil-compact .publication:last-child{margin-bottom:0}
.publication-tete{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.publication-cercle{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--marine);color:var(--sur-marine);
  font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.02em;
}
.publication-qui{flex:1 1 auto;min-width:0}
.publication-qui .publication-auteur{margin:0}
.publication-qui .publication-repere{margin:1px 0 0}
.publication-categorie{
  flex:0 0 auto;align-self:flex-start;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pastille);
  background:var(--or-voile);color:var(--or-lu);border:1px solid var(--or);
}
.publication-pied{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.publication-capsule{
  font-size:11px;padding:3px 9px;border-radius:var(--r-pastille);
  background:var(--voile);color:var(--doux);border:1px solid var(--filet);
}


/* ── L'espace à deux colonnes : la colonne des applications, puis le reste ─────
   Dessiné par le client le 2026-09-09 : une colonne de blocs larges dans la
   marge gauche, l'espace à droite. Sous 1000 px, le rail passe au-dessus en
   grille de blocs — la colonne étroite y mangerait tout. */
.espace-colonnes{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:0 clamp(24px,4vw,48px);
  /* Pas de plafond : l'écran prend toute la largeur qui reste, comme dessiné. */
  max-width:none;
  margin:0 auto;
  padding:0 var(--marge);
  align-items:start;
}
/* `align-self:stretch` : main prend la hauteur de la rangée (la colonne), sans
   quoi le cadre collant n'a aucun jeu et défile comme un bloc ordinaire. */
.espace-colonnes > main.large{padding:16px 0;margin:0;max-width:none;align-self:stretch}
.colonne-apps{padding:16px 0 clamp(56px,8vw,80px)}
.colonne-apps-titre{
  font-family:var(--serif);font-weight:600;font-size:var(--pas-5);
  color:var(--titre);margin:0 0 4px;
}
.colonne-apps-mot{margin:0 0 var(--e-3)}
.colonne-apps-annuaire{margin:var(--e-3) 0 0}
.colonne-apps .famille-applications{margin:var(--e-3) 0 var(--e-2)}

/* Le bloc : la tuile de l'app, élargie à la colonne — le glyphe à gauche, le
   nom en grand, ce que fait l'application dessous. Fond dégradé de la teinte,
   ombre de la teinte, texte blanc. */
.paves{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.pave{
  --teinte:var(--marine);
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:4px 14px;
  align-items:center;
  min-height:84px;
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(160deg, color-mix(in srgb, var(--teinte) 84%, white) 0%, var(--teinte) 50%, color-mix(in srgb, var(--teinte) 84%, black) 100%);
  box-shadow:0 3px 8px color-mix(in srgb, var(--teinte) 32%, transparent);
  transition:transform .16s ease, box-shadow .16s ease;
}
.pave:hover,.pave:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 20px color-mix(in srgb, var(--teinte) 40%, transparent);
  color:#fff;
}
.pave:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pave-glyphe{
  grid-row:1 / span 3;
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
}
.pave-glyphe svg{width:26px;height:26px}
.pave-nom{font-family:var(--serif);font-weight:600;font-size:var(--pas-5);line-height:1.15}
.pave-dit{font-size:var(--pas-0);line-height:1.35;color:rgba(255,255,255,.82)}
/* L'avertissement se lit AVANT d'ouvrir : sur le bloc, en clair, sur un voile
   sombre — la terre brûlée ne se verrait pas sur ces fonds. */
.pave-reserve{
  font-size:10.5px;line-height:1.3;
  padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.28);color:#fff;
  justify-self:start;
}
/* « À raccorder » : le bloc existe, la porte n'est pas encore branchée. */
.pave.a-raccorder{
  background:repeating-linear-gradient(135deg, var(--marine) 0 10px, color-mix(in srgb, var(--marine) 80%, black) 10px 20px);
  opacity:.85;cursor:default;
}
.pave.a-raccorder:hover{transform:none}

@media (max-width:1000px){
  .espace-colonnes{display:block;padding:0}
  .colonne-apps{padding:clamp(24px,4vw,36px) var(--marge) 0}
  .espace-colonnes > main.large{padding:clamp(24px,4vw,36px) var(--marge) clamp(56px,8vw,80px);margin:0 auto;max-width:840px}
  .paves{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
}

/* Une page sans écran (Outils) : la colonne s'étale en grille de pavés. */
.espace-colonnes.sans-ecran{display:block;max-width:1240px}
.sans-ecran .colonne-apps{padding-top:clamp(24px,4vw,36px)}
.sans-ecran .paves{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}

/* ── L'écran de l'accueil ───────────────────────────────────────────────────
   Le grand rectangle du dessin du client (2026-09-09) : l'application choisie
   s'affiche à droite de la colonne, dans un cadre, sans quitter la page. Au
   chargement il tient exactement dans la fenêtre sous la bande ; si la
   colonne est plus longue que la fenêtre, la bande et le cadre restent en
   place pendant qu'elle défile (main est étiré à la rangée pour que le
   collant ait du jeu). --bande = hauteur de .bandeau.mince au-dessus de
   1000 px, mesurée en production (59 px). Sous 1000 px il n'existe pas — un
   cadre sur un téléphone ne sert personne — et les pavés ouvrent un onglet ;
   une application DÉJÀ ouverte y reste visible (data-ouvert) : on ne fait pas
   disparaître le travail en cours quand on tourne un iPad. */
.ecran-app{
  --bande:59px;
  position:sticky;
  top:calc(var(--bande) + 16px);
  height:calc(100vh - var(--bande) - 32px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--filet);
  border-radius:14px;
  background:var(--carte);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(11,18,32,.08);
}
.ecran-barre{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px 8px 12px;
  border-bottom:1px solid var(--filet);
  background:var(--papier);
}
.ecran-glyphe{
  --teinte:var(--marine);
  width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--teinte);color:#fff;
}
.ecran-glyphe svg{width:17px;height:17px}
.ecran-nom{
  flex:1 1 auto;min-width:0;
  font-family:var(--serif);font-weight:600;font-size:var(--pas-3);color:var(--titre);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ecran-onglet,.ecran-fermer{
  font:inherit;font-size:var(--pas-0);line-height:1;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--bord-action);background:transparent;color:var(--lien);
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.ecran-onglet:hover,.ecran-fermer:hover{background:var(--marine);color:var(--sur-marine)}
.ecran-onglet:focus-visible,.ecran-fermer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Vide : le gris du dessin, et une phrase. */
.ecran-vide{
  flex:1 1 auto;display:grid;place-items:center;text-align:center;
  padding:24px;color:var(--doux);
  background:color-mix(in srgb, var(--filet) 45%, var(--carte));
}
.ecran-vide p{margin:0;max-width:34ch}
.ecran-cadre{flex:1 1 auto;min-height:0;width:100%;border:0;background:#fff;overscroll-behavior:contain}
/* Une page encadrée (?encadre=1) garde son défilement pour elle : arrivé au
   bout, il ne fait plus bouger l'accueil qui l'entoure (le téléphone, vidéo
   du client, 2026-09-10). */
html.encadre,html.encadre body{overscroll-behavior:contain}
/* Le pavé ouvert : un anneau d'or. */
.pave[aria-current]{outline:3px solid var(--or);outline-offset:2px}
@media (max-width:1000px){
  /* Une application déjà ouverte reste visible si l'on tourne l'iPad ou
     réduit la fenêtre : on ne fait pas disparaître le travail en cours. Les
     ouvertures NOUVELLES, elles, vont en onglet (ecranPresent()). */
  .ecran-app:not([data-ouvert]){display:none}
}

/* ── Le fil (fil.html) ─────────────────────────────────────────────────────
   Brief du client (2026-09-09) : gazette professionnelle + fil privé. La
   bascule Avocat / Particuliers d'abord, des filtres discrets, une carte
   blanche par publication, coins 14 px, ombre nulle, bordure d'or au survol.
   L'or ne sert qu'à ce qui est choisi (segment, filtre) et au geste principal. */
main.fil-page{max-width:776px}
.fil-bascule{
  display:inline-flex;gap:2px;padding:3px;
  border-radius:999px;background:var(--carte);border:1px solid var(--filet);
  margin:0 0 var(--e-4);
}
.fil-bascule button{
  font:inherit;font-weight:600;font-size:var(--pas-1);line-height:1;
  padding:9px 20px;border-radius:999px;border:0;
  background:transparent;color:var(--lien);cursor:pointer;
}
.fil-bascule button[aria-checked="true"]{background:var(--marine);color:var(--sur-marine)}
.fil-bascule button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fil-filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--e-3)}
.chip{
  font:inherit;font-size:var(--pas-0);line-height:1;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--filet);background:transparent;color:var(--doux);cursor:pointer;
}
.chip:hover{color:var(--titre);border-color:var(--doux)}
.chip[aria-pressed="true"]{border-color:var(--or);color:var(--titre);background:var(--or-voile)}
.chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fil-cartes .publication{
  border-radius:14px;padding:16px;margin:0 0 12px;
  transition:border-color .15s ease;
}
.fil-cartes .publication:hover{border-color:var(--or)}
.fil-cartes .publication-tete{align-items:flex-start}
.publication-etiquettes{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.publication-type{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;
  border:1px solid var(--filet);color:var(--doux);
}
/* Les institutions et les ordres, un peu plus officiels : l'étiquette en
   marine, et un filet d'or autour du cercle. */
.type-institution .publication-type,.type-ordre .publication-type{border-color:var(--marine);color:var(--marine)}
.type-institution .publication-cercle,.type-ordre .publication-cercle{box-shadow:inset 0 0 0 2px var(--or)}
.type-question .publication-type{border-color:var(--or);color:var(--or-lu);background:var(--or-voile)}
.fil-cartes .publication-texte a,.fil-cartes .publication-lien a{text-decoration:underline;text-underline-offset:2px}
.publication-bas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.publication-bas .publication-pied{margin:0 0 0 auto}
.pub-action{
  font:inherit;font-size:var(--pas-0);line-height:1;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--bord-action);background:transparent;color:var(--lien);cursor:pointer;
}
.pub-action.principal{background:var(--or);border-color:var(--or);color:var(--sur-or);font-weight:600}
.pub-action.principal:hover{filter:brightness(.96)}
.pub-action.inactif{opacity:.5;cursor:not-allowed}
.pub-action:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.publication-note{font-size:var(--pas-0);color:var(--doux);margin:8px 0 0}
@media (max-width:620px){
  .fil-bascule{display:flex}
  .fil-bascule button{flex:1 1 0}
}


/* ── Les discussions (discussion.html) ────────────────────────────────────
   La liste à gauche, le fil à droite ; des bulles, les miennes en marine à
   droite ; le composeur en bas. Un message qu'on ne peut pas ouvrir se dit
   (verrou), il ne se déguise pas. */
.discussions{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start;margin:0 0 var(--e-4)}
.discussion-liste{display:grid;gap:12px}
.discussion-nouvelle{display:grid;gap:6px;padding:12px;border:1px solid var(--filet);border-radius:12px;background:var(--carte)}
.discussion-nouvelle input{font:inherit;font-size:var(--pas-1);padding:8px 10px;border:1px solid var(--bord-champ);border-radius:8px;background:var(--papier);color:var(--encre)}
.discussion-resultats{display:grid;gap:4px}
.discussion-resultats button{font:inherit;font-size:var(--pas-0);text-align:left;padding:6px 8px;border:1px solid var(--filet);border-radius:8px;background:transparent;color:var(--encre);cursor:pointer}
.discussion-resultats button:hover,.discussion-resultats button:focus-visible{border-color:var(--or)}
.discussion-resultats .doux{font-size:10.5px}
.liste-discussions{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:60vh;overflow:auto}
.liste-discussions button{
  width:100%;text-align:left;font:inherit;padding:10px 12px;cursor:pointer;
  border:1px solid var(--filet);border-radius:12px;background:var(--carte);color:var(--encre);
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;align-items:center;
}
.liste-discussions button[aria-current="true"]{border-color:var(--or);background:var(--or-voile)}
.liste-discussions .publication-cercle{grid-row:1 / span 2;width:34px;height:34px;flex:0 0 34px;font-size:13px}
.liste-discussions .qui{font-weight:600;font-size:var(--pas-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liste-discussions .quand{font-size:10.5px;color:var(--doux)}
.discussion-fil{display:grid;gap:10px;min-height:50vh;border:1px solid var(--filet);border-radius:14px;background:var(--carte);padding:12px}
.discussion-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:2px 4px 10px;border-bottom:1px solid var(--filet)}
.discussion-tete h3{margin:0;font-family:var(--serif);font-size:var(--pas-3)}
.discussion-tete .doux{margin:0;font-size:var(--pas-0)}
.discussion-titre{min-width:0;flex:1 1 200px}
/* Les deux appels (Avocat-Call), à droite du titre ; sous 600 px ils passent
   dessous, sur toute la largeur. Pendant l'ouverture, le bouton le dit
   (aria-busy) et l'attente se voit au curseur. */
.discussion-appels{display:flex;gap:8px;margin-left:auto;align-items:center;flex-wrap:wrap}
.discussion-appels .pub-action{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.discussion-appels svg{width:16px;height:16px;flex:0 0 16px}
.discussion-appels .pub-action[aria-busy="true"]{cursor:progress}
@media (max-width:600px){
  .discussion-appels{margin-left:0;flex:1 0 100%}
  .discussion-appels .pub-action{flex:1 1 0;justify-content:center}
}
.messages-discussion{list-style:none;margin:0;padding:4px;display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.bulle{max-width:78%;padding:9px 12px;border-radius:14px;background:var(--papier);border:1px solid var(--filet);align-self:flex-start}
.bulle.mienne{align-self:flex-end;background:var(--marine);color:var(--sur-marine);border-color:var(--marine)}
.bulle-qui{font-size:11px;color:var(--doux);margin:0 0 2px}
.bulle.mienne .bulle-qui{color:rgba(255,255,255,.72)}
.bulle-texte{margin:0;white-space:pre-wrap;word-break:break-word;font-size:var(--pas-1);line-height:1.45}
.bulle-quand{display:block;font-size:10.5px;opacity:.7;margin:4px 0 0;text-align:right}
.bulle.verrou .bulle-texte{font-style:italic;color:var(--doux)}
.bulle.mienne.verrou .bulle-texte{color:rgba(255,255,255,.75)}
.bulle .pub-action{margin-top:6px}
/* L'invitation à un appel : une ligne qui dit la nature, le bouton-lien vers
   la salle (appel.html), et — s'il y a lieu — l'indice « pas de clé à ce
   moment-là ». Dans ma bulle (marine), le contour et le texte passent en blanc. */
.bulle-invitation{margin:0;font-weight:600;font-size:var(--pas-1);line-height:1.45}
.bulle a.pub-action{display:inline-block;text-decoration:none}
.bulle.mienne .pub-action{border-color:rgba(255,255,255,.7);color:var(--sur-marine)}
.bulle-indice{margin:6px 0 0;font-size:var(--pas-0);line-height:1.4;color:var(--doux)}
.bulle.mienne .bulle-indice{color:rgba(255,255,255,.75)}
/* La pastille « Nouveau » d'un fil qui a bougé pendant qu'on lisait ailleurs
   (relevé toutes les 15 s) : or, en troisième ligne sous l'heure. */
.liste-discussions .nouveau{grid-column:2;justify-self:start;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sur-or);background:var(--or);border-radius:999px;padding:2px 7px;margin-top:2px}
.bulle img,.bulle video{max-width:100%;border-radius:8px;display:block;margin-top:6px}
.bulle audio{display:block;margin-top:6px;max-width:100%}
.discussion-envoi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.discussion-envoi textarea{font:inherit;font-size:var(--pas-1);padding:9px 11px;border:1px solid var(--bord-champ);border-radius:10px;background:var(--papier);color:var(--encre);resize:vertical;min-height:44px}
@media (max-width:760px){
  .discussions{grid-template-columns:1fr}
  .liste-discussions{max-height:32vh}
  .bulle{max-width:92%}
}

/* ── Le menu selon le rôle (le client, 2026-09-09 : au particulier, ni
   Confrères, ni Cabinet, ni Jurak — Marché à la place). Le rôle est écrit
   sur <body data-role> par app.js : d'abord depuis sessionStorage, avant le
   premier rendu, puis confirmé par /session. */
/* Le marché : à TOUS les membres — avocats, notaires, commissaires,
   sociétés, particuliers — (le client, le soir même : « je ne vois pas le
   bouton marché, il est où ? »). Seules les institutions ne l'ont pas : le
   serveur le leur refuse sur toutes ses routes. */
body[data-role="barreau"] .menu-halo-lien[data-menu="marche"],
body[data-role="chambre-notaires"] .menu-halo-lien[data-menu="marche"],
body[data-role="chambre-commissaires"] .menu-halo-lien[data-menu="marche"],
body[data-role="juridiction"] .menu-halo-lien[data-menu="marche"]{display:none}
/* Cabinet (Mon Cher Cabinet) et Jurak : à l'avocat seul (le client,
   2026-09-09 : « adapter selon chaque situation »). */
body[data-role]:not([data-role="avocat"]) .menu-halo-lien[data-menu="cabinet"],
body[data-role]:not([data-role="avocat"]) .menu-halo-lien[data-menu="jurak"]{display:none}
/* L'annuaire des avocats : pas au particulier (il le trouve depuis
   l'accueil) ; « Annuaire » et non « Confrères » pour qui n'est pas avocat. */
body[data-role="particulier"] .menu-halo-lien[data-menu="confreres"]{display:none}
.passe-accueil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--e-3) 0 0}
.passe-accueil .bac-role-bouton[aria-current="true"]{background:var(--marine);color:var(--sur-marine);border-color:var(--marine)}

/* ── Le marché (marche.html) ──────────────────────────────────────────────
   Des cartes comme celles du fil : la nature en étiquette, le prix en
   évidence, la photo si elle est là, l'auteur signé, et la rangée des gestes.
   Pour l'auteur : les réactions reçues, conclure, retirer, qui la voit. */
.marche-depot{display:grid;gap:10px;padding:16px;border:1px solid var(--filet);border-radius:14px;background:var(--carte);margin:0 0 var(--e-3)}
.marche-depot label{font-size:var(--pas-0);color:var(--doux)}
.marche-depot input[type="text"],.marche-depot input[type="search"],.marche-depot textarea,.marche-depot select{
  width:100%;box-sizing:border-box;font:inherit;font-size:var(--pas-1);padding:8px 10px;
  border:1px solid var(--bord-champ);border-radius:8px;background:var(--papier);color:var(--encre)}
.marche-depot textarea{resize:vertical}
.marche-depot > div{display:grid;gap:4px}
.marche-natures{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.marche-natures legend{padding:0;margin:0 0 4px;width:100%}
.marche-natures label{font-size:var(--pas-1);color:var(--encre);display:inline-flex;align-items:center;gap:6px}
.marche-ligne{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.marche-ligne > div{display:grid;gap:4px}
.marche-depot-actions{display:flex;gap:8px;flex-wrap:wrap}
.marche-recherche{font:inherit;font-size:var(--pas-0);padding:5px 10px;border:1px solid var(--filet);border-radius:999px;background:var(--carte);color:var(--encre);min-width:220px;margin-left:auto}
.marche-cartes{display:grid;gap:12px;margin:0 0 var(--e-4)}
.annonce{border:1px solid var(--filet);border-radius:14px;background:var(--carte);padding:14px 16px;display:grid;gap:8px}
.annonce.conclue{opacity:.8}
.annonce-photo{max-height:320px;width:auto;max-width:100%;border-radius:10px;display:block;object-fit:cover}
.annonce-tete{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nature{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid transparent}
.nature-vente{background:#EEF4F0;color:#1F5A3D;border-color:#C9DED2}
.nature-don{background:#FBF1E6;color:#8A4B12;border-color:#EBD2B8}
.nature-echange{background:#EEF0F8;color:#3A3F73;border-color:#CED3EA}
.annonce-etat{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--or-voile);color:var(--titre);border:1px solid var(--or)}
.annonce-portee{font-size:11px;color:var(--doux)}
.annonce-titre{margin:0;font-family:var(--serif);font-size:var(--pas-3);color:var(--titre)}
.annonce-prix{font-weight:700;font-size:var(--pas-2);color:var(--titre)}
.annonce-texte{margin:0;white-space:pre-wrap;word-break:break-word;font-size:var(--pas-1);line-height:1.5}
.annonce-pied{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:var(--pas-0);color:var(--doux)}
.annonce-pied .publication-cercle{width:28px;height:28px;font-size:11px}
.annonce-gestes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.geste{font:inherit;font-size:var(--pas-0);padding:5px 10px;border-radius:999px;border:1px solid var(--bord-action);background:transparent;color:var(--lien);cursor:pointer;white-space:nowrap}
.geste:hover{background:var(--or-voile)}
.geste[aria-pressed="true"]{background:var(--marine);color:var(--sur-marine);border-color:var(--marine)}
.geste[disabled]{opacity:.55;cursor:default}
.geste-compte{font-variant-numeric:tabular-nums;opacity:.85}
.annonce-saisie{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}
.annonce-saisie input{font:inherit;font-size:var(--pas-1);padding:6px 10px;border:1px solid var(--bord-champ);border-radius:8px;background:var(--papier);color:var(--encre);min-width:0}
.annonce-reactions{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--filet);display:grid;gap:6px;font-size:var(--pas-0)}
.annonce-reactions li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.annonce-reactions .quoi{font-weight:600}
.annonce-mienne{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--pas-0);color:var(--doux)}
.annonce-mienne select{font:inherit;font-size:var(--pas-0);padding:4px 8px;border:1px solid var(--bord-champ);border-radius:8px;background:var(--papier);color:var(--encre)}
@media (prefers-color-scheme: dark){
  .nature-vente{background:#12291D;color:#9BD3B4;border-color:#1F5A3D}
  .nature-don{background:#2C1C0C;color:#F0BF8F;border-color:#8A4B12}
  .nature-echange{background:#1B1D33;color:#B7BCF0;border-color:#3A3F73}
}
@media (max-width:640px){
  .marche-recherche{margin-left:0;width:100%}
  .annonce-saisie{grid-template-columns:1fr}
}


/* ── L'espace personnel (espace.html), comme dans l'application ─────────── */
.espace-bloc{margin:0 0 var(--e-4);padding:16px 18px;border:1px solid var(--filet);border-radius:14px;background:var(--carte);display:grid;gap:10px}
.espace-bloc h3{margin:0;font-family:var(--serif);font-size:var(--pas-3);color:var(--titre)}
.espace-bloc h4{margin:6px 0 0;font-size:var(--pas-1);color:var(--titre)}
.espace-bloc label{font-size:var(--pas-0);color:var(--doux)}
.espace-bloc input[type="text"],.espace-bloc input[type="tel"],.espace-bloc input[type="email"],.espace-bloc input[type="url"],.espace-bloc textarea,.espace-bloc select{
  width:100%;box-sizing:border-box;font:inherit;font-size:var(--pas-1);padding:8px 10px;
  border:1px solid var(--bord-champ);border-radius:8px;background:var(--papier);color:var(--encre)}
.espace-bloc textarea{resize:vertical}
.espace-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.espace-ligne input,.espace-ligne select{flex:1 1 200px;width:auto}
.espace-forme{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.espace-champs{display:grid;gap:6px}
.espace-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.espace-trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.espace-deux > div,.espace-trois > div{display:grid;gap:4px}
.espace-photo{display:grid;gap:8px;justify-items:center;width:132px}
.espace-photo img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--or)}
.espace-photo-vide{width:120px;height:120px;border-radius:50%;background:var(--or-voile);border:2px solid var(--filet);display:grid;place-items:center}
.espace-photo label{cursor:pointer}
.espace-case{display:inline-flex;align-items:center;gap:6px;font-size:var(--pas-1);color:var(--encre)}
.espace-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.espace-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.espace-liste li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--filet);border-radius:8px;background:var(--papier);font-size:var(--pas-0)}
.espace-liste li .statut{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--or-voile);color:var(--titre)}
.espace-liste li .statut.verifie{background:#EEF4F0;color:#1F5A3D}
.espace-liste li button{margin-left:auto}
.espace-liens{margin:0;padding:0 0 0 18px;display:grid;gap:4px;font-size:var(--pas-1)}
.espace-danger{border-color:#D9A6A6}
.pub-action.danger{border-color:#B03A3A;color:#B03A3A}
.pub-action.danger:hover{background:#B03A3A;color:#fff}
.pub-action[disabled]{opacity:.5;cursor:default}
#dispo-etats .chip[aria-checked="true"]{border-color:var(--or);color:var(--titre);background:var(--or-voile)}
@media (max-width:640px){.espace-forme{grid-template-columns:1fr}.espace-photo{width:auto}}


/* ── Les annuaires (annuaire.html), comme dans l'application ─────────────── */
.annuaire-volets{margin-bottom:var(--e-3)}
.annuaire-forme{display:flex;gap:8px;align-items:center;margin:0 0 var(--e-2)}
.annuaire-forme input{flex:1 1 240px;font:inherit;font-size:var(--pas-1);padding:9px 12px;border:1px solid var(--bord-champ);border-radius:10px;background:var(--papier);color:var(--encre)}
.annuaire-liens{display:grid;gap:6px;margin:0 0 var(--e-3);padding:12px 14px;border:1px solid var(--filet);border-radius:12px;background:var(--carte)}
.annuaire-liens h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux)}
.annuaire-liens a{text-decoration:underline;text-underline-offset:2px}
.annuaire-liens .petit{color:var(--doux)}
.annuaire-resultats{display:grid;gap:10px}
.fiche-annuaire{padding:12px 14px;border:1px solid var(--filet);border-radius:12px;background:var(--carte);display:grid;gap:4px}
.fiche-annuaire h4{margin:0;font-family:var(--serif);font-size:var(--pas-2);color:var(--titre)}
.fiche-annuaire .genre{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8A6E2E}
.fiche-annuaire .ligne{font-size:var(--pas-1);color:var(--encre)}
.fiche-annuaire .doux{font-size:var(--pas-0)}
.fiche-annuaire a{text-decoration:underline;text-underline-offset:2px}
.fiche-annuaire .etiquettes{display:flex;flex-wrap:wrap;gap:4px}
.fiche-annuaire .etiquette{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--or-voile);color:var(--titre)}
.fiche-annuaire .etiquette.fermee{background:#F3E6E6;color:#8A2E2E}
.fiche-annuaire .etiquette.collective{background:#F3E6E6;color:#8A2E2E}
.fiche-annuaire ul{margin:2px 0 0;padding:0 0 0 18px;font-size:var(--pas-0)}
.fiche-annuaire .pub-action{justify-self:start;margin-top:4px}
.fiche-annuaire .annonces{display:grid;gap:6px;margin-top:6px}
.fiche-annuaire .annonce-bodacc{padding:8px 10px;border:1px solid var(--filet);border-radius:8px;background:var(--papier);font-size:var(--pas-0);display:grid;gap:2px}
.fiche-annuaire .juridictions{display:grid;gap:4px;margin-top:4px}
.fiche-annuaire .juridiction{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;font-size:var(--pas-0);align-items:start}
.fiche-annuaire .juridiction .quoi{color:var(--doux)}
@media (max-width:640px){.fiche-annuaire .juridiction{grid-template-columns:1fr}}


/* ── L'apparence, personnalisable sur chaque page (2026-09-09) ──────────── */
.menu-halo-lien.menu-cache{display:none !important}
.apparence-entete{position:sticky;top:-14px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-14px -16px 0;padding:14px 16px 8px;background:var(--carte);border-bottom:1px solid var(--filet)}
.apparence-fermer{width:32px;height:32px;border-radius:50%;border:1px solid var(--bord-action);background:transparent;color:var(--encre);font:inherit;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.apparence-fermer:hover{background:var(--fond-doux,rgba(0,0,0,.05))}
.apparence-fermer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.apparence-panneau{position:fixed;right:12px;top:66px;z-index:30;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 80px);overflow:auto;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:var(--carte);color:var(--encre);box-shadow:0 14px 40px rgba(11,18,32,.18);display:grid;gap:10px;font-size:var(--pas-0)}
.apparence-panneau[hidden]{display:none}
.apparence-panneau h3{margin:0;font-family:var(--serif);font-size:var(--pas-3);color:var(--titre)}
.apparence-panneau h4{margin:4px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);font-weight:600}
.apparence-panneau .choix:not(.choix-radios){display:flex;flex-wrap:wrap;gap:8px 16px}
.apparence-panneau .choix:not(.choix-radios) label{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.apparence-panneau .poste-palette{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Les ronds de couleur : LES COMMANDES, en fin de feuille. */
.apparence-panneau .poste-teinte-autre{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--doux)}
.apparence-panneau .poste-teinte-autre input{width:26px;height:26px;padding:0;border:1px solid var(--filet);border-radius:50%;background:transparent;cursor:pointer}
.apparence-menu{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.apparence-menu li{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;background:var(--papier)}
.apparence-menu li .nom{flex:1 1 auto}
.apparence-panneau .poste-lien{justify-self:start}

/* Une page encadrée dans la scène du poste : ni bande, ni pied, ni roue, ni
   titre de page — la barre de l'écran nomme déjà la page (le titre vivait
   hier dans la bande masquée ; sorti d'elle le 2026-09-23, il réapparaissait
   sous la barre « RDV-Avocat … Fermer »). */
body.encadre .bandeau.mince,body.encadre .titre-page,body.encadre footer,body.encadre .apparence-panneau{display:none !important}
body.encadre main{padding-top:10px}
/* Et elle prend la largeur qu'on lui donne. La mesure prise chez le cabinet le
   2026-09-10 : cadre de 1612 px, contenu tenu à 840 — près de la moitié du
   cadre vide, et une console à l'étroit. La mesure du texte courant vaut pour
   une page qu'on lit de bout en bout, pas pour une fenêtre qu'on a soi-même
   dimensionnée. */
body.encadre main.large{max-width:none;padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px)}

/* La case « Reconnaître cet ordinateur » de la porte. */
.case-reconnaitre{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:start;margin:10px 0 14px;font-size:var(--pas-1);color:var(--encre)}
.case-reconnaitre input{margin-top:3px}
.case-reconnaitre .petit{grid-column:2}


/* ── MOBILE (le client, 2026-09-09 : « les boutons occupent toute la page…
   il faut que ça s'ouvre sur la même page ») ──────────────────────────────
   Sous 1000 px, l'accueil garde son écran : la colonne devient une RANGÉE de
   pavés compacts qui défile au doigt, l'application s'ouvre dessous, dans la
   page. Les descriptions et avertissements des pavés se lisent dans l'écran. */
@media (max-width:1000px){
  /* ⚠ `align-items:start` (hérité de la grille large) laissait la colonne
     prendre la largeur de son CONTENU : 899 px pour huit pavés, et toute la
     page défilait de côté (captures iPhone du client, 2026-09-09, 19 h 06).
     `stretch` : la colonne fait la largeur de l'écran, le rail défile DEDANS. */
  body[data-page="accueil"] .espace-colonnes{display:flex;flex-direction:column;align-items:stretch;padding:0;max-width:100%;overflow-x:clip}
  body[data-page="accueil"] .colonne-apps,body[data-page="accueil"] .espace-colonnes > main.large{min-width:0;width:auto;max-width:100%}
  body[data-page="accueil"] .colonne-apps{padding:8px var(--marge) 0}
  body[data-page="accueil"] .colonne-apps #applications{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
  body[data-page="accueil"] .colonne-apps .paves{display:flex !important;flex-wrap:nowrap;gap:8px;grid-template-columns:none}
  body[data-page="accueil"] .colonne-apps .pave{
    flex:0 0 88px;width:88px;min-height:0;padding:8px 6px;
    display:grid;grid-template-columns:1fr;gap:4px;justify-items:center;text-align:center;
    border-left:0;border-radius:12px;scroll-snap-align:start;
  }
  body[data-page="accueil"] .colonne-apps .pave-glyphe{grid-row:auto;width:36px;height:36px;border-radius:10px}
  body[data-page="accueil"] .colonne-apps .pave-glyphe svg{width:21px;height:21px}
  body[data-page="accueil"] .colonne-apps .pave-nom{font-family:inherit;font-weight:600;font-size:11px;line-height:1.15;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body[data-page="accueil"] .colonne-apps .pave-dit,body[data-page="accueil"] .colonne-apps .pave-reserve{display:none}
  body[data-page="accueil"] .pave[aria-current]::after{display:none}
  body[data-page="accueil"] .colonne-apps-annuaire{display:none}
  body[data-page="accueil"] .poste-colonne-pied{margin:4px 0 0}
  /* « Voir le site comme… » : une bande qui défile au doigt, une seule ligne. */
  body[data-page="accueil"] .passe-accueil{margin:6px 0 0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  body[data-page="accueil"] .passe-accueil > *{flex:0 0 auto;white-space:nowrap}
  body[data-page="accueil"] .espace-colonnes > main.large{padding:6px var(--marge) 12px;margin:0;max-width:none}
  body[data-page="accueil"] .ecran-app{display:flex;position:static;height:calc(100vh - 168px);min-height:440px;border-radius:12px}
  body[data-page="accueil"] .ecran-vide{padding:0}
  /* Les autres pages sans écran (Outils) : des pavés serrés, deux par rangée. */
  .sans-ecran .paves{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  .sans-ecran .pave{min-height:0;padding:10px 10px;grid-template-columns:36px minmax(0,1fr);gap:2px 10px}
  .sans-ecran .pave-glyphe{width:36px;height:36px;border-radius:10px}
  .sans-ecran .pave-glyphe svg{width:21px;height:21px}
  .sans-ecran .pave-nom{font-size:var(--pas-1)}
  .sans-ecran .pave-dit,.sans-ecran .pave-reserve{display:none}
}
@media (max-width:1000px) and (max-height:700px){
  body[data-page="accueil"] .ecran-app{min-height:360px}
}


/* ══════════════════════════════════════════════════════════════════════════
   LES COMMANDES — « le style iPhone et Samsung confondus » (le client,
   2026-09-10 : « mets ces parties dans tout le site… élégant, créatif »).
   Une seule grammaire pour tout le site :
   · la GLISSIÈRE — les options sur une piste, un curseur blanc qui glisse
     sous l'option choisie (le sélecteur segmenté d'iOS, animé par app.js) ;
   · l'INTERRUPTEUR — long et souple comme celui de One UI ; ouvert, sa
     pastille se ceint d'or ;
   · la PASTILLE — le bouton plein et teinté de One UI, sans filet ; enfoncée,
     elle passe marine et se lisère d'or ;
   · la PALETTE — des ronds, un anneau d'or autour du choisi ;
   · les GROUPES EN CARTE — angles de 18 px, rangées de 44 px, un losange d'or
     devant chaque titre de section ;
   · la FEUILLE — sur téléphone, les panneaux montent du bas, poignée en tête.
   L'or reste la signature : il souligne l'état, jamais le décor.
   Les feuilles chargées après (poste.css, cabinet.css) ne redéfinissent
   plus ces règles : elles s'y appuient.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --cmd-piste:color-mix(in srgb,var(--encre) 7%,var(--papier));
  --cmd-pouce:var(--carte);
  --cmd-teinte:color-mix(in srgb,var(--marine) 10%,var(--carte));
  --cmd-teinte-forte:color-mix(in srgb,var(--marine) 17%,var(--carte));
  --cmd-ombre:0 1px 2px rgba(17,28,39,.10),0 4px 14px rgba(17,28,39,.08);
  --cmd-duree:.22s;
  --cmd-courbe:cubic-bezier(.2,.8,.2,1);
}

/* La pastille. */
.chip,.poste-lien,.cabinet-lien{
  font:inherit;font-size:var(--pas-0);font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:8px 14px;border-radius:999px;
  border:1px solid transparent;background:var(--cmd-teinte);color:var(--marine);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--cmd-duree) var(--cmd-courbe),color var(--cmd-duree),transform var(--cmd-duree) var(--cmd-courbe),box-shadow var(--cmd-duree)
}
.chip:hover,.poste-lien:hover,.cabinet-lien:hover{background:var(--cmd-teinte-forte);color:var(--marine);border-color:transparent}
.chip:active,.poste-lien:active,.cabinet-lien:active{transform:scale(.96)}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.poste-lien[aria-expanded="true"],#dispo-etats .chip[aria-checked="true"]{
  background:var(--marine);color:var(--sur-marine);border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--or)
}
.chip.danger,.cabinet-lien.danger{background:var(--grave-voile);color:var(--grave)}
.chip.danger:hover,.cabinet-lien.danger:hover{background:color-mix(in srgb,var(--grave) 16%,var(--carte));color:var(--grave)}
.chip:focus-visible,.poste-lien:focus-visible,.cabinet-lien:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chip:disabled,.poste-lien:disabled{opacity:.45;cursor:default;transform:none}
.chip.petite{min-height:30px;padding:5px 11px;font-size:11px}

/* La glissière. */
.choix-radios,.segmente{
  position:relative;display:inline-flex;flex-wrap:nowrap;gap:0;align-items:stretch;
  max-width:100%;overflow-x:auto;scrollbar-width:none;
  padding:3px;border-radius:999px;background:var(--cmd-piste);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--encre) 6%,transparent)
}
.choix-radios::-webkit-scrollbar,.segmente::-webkit-scrollbar{display:none}
.choix-radios > label,.segmente > button{
  position:relative;z-index:1;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:32px;padding:0 14px;border-radius:999px;border:0;background:transparent;
  font:inherit;font-size:var(--pas-0);font-weight:600;color:var(--doux);cursor:pointer;user-select:none;white-space:nowrap;
  transition:color var(--cmd-duree)
}
.choix-radios > label > input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choix-radios > label:has(input:checked),.segmente > button[aria-pressed="true"],.segmente > button[aria-checked="true"]{color:var(--marine)}
/* Sans script, l'option choisie porte elle-même le blanc ; avec, c'est le curseur. */
.choix-radios:not(.a-curseur) > label:has(input:checked),.segmente:not(.a-curseur) > button[aria-pressed="true"],.segmente:not(.a-curseur) > button[aria-checked="true"]{
  background:var(--cmd-pouce);box-shadow:var(--cmd-ombre),inset 0 0 0 1px color-mix(in srgb,var(--or) 60%,transparent)
}
.choix-curseur{
  position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--cmd-pouce);
  box-shadow:var(--cmd-ombre),inset 0 0 0 1px color-mix(in srgb,var(--or) 60%,transparent);
  transition:transform .28s var(--cmd-courbe),width .28s var(--cmd-courbe),height .28s var(--cmd-courbe),opacity .2s;
  will-change:transform;pointer-events:none
}
.choix-radios > label:has(input:focus-visible),.segmente > button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* L'interrupteur : toute case à cocher des panneaux de réglage. */
.interrupteur,
.poste-reglages input[type="checkbox"],
.apparence-panneau input[type="checkbox"],
.cabinet-reglages input[type="checkbox"],
.choix > label > input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:44px;height:26px;margin:0;
  border-radius:999px;border:0;background:color-mix(in srgb,var(--encre) 22%,var(--filet));
  position:relative;cursor:pointer;vertical-align:middle;
  transition:background var(--cmd-duree) var(--cmd-courbe)
}
.interrupteur::before,
.poste-reglages input[type="checkbox"]::before,
.apparence-panneau input[type="checkbox"]::before,
.cabinet-reglages input[type="checkbox"]::before,
.choix > label > input[type="checkbox"]::before{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform var(--cmd-duree) var(--cmd-courbe),box-shadow var(--cmd-duree)
}
.interrupteur:checked,
.poste-reglages input[type="checkbox"]:checked,
.apparence-panneau input[type="checkbox"]:checked,
.cabinet-reglages input[type="checkbox"]:checked,
.choix > label > input[type="checkbox"]:checked{background:var(--marine)}
.interrupteur:checked::before,
.poste-reglages input[type="checkbox"]:checked::before,
.apparence-panneau input[type="checkbox"]:checked::before,
.cabinet-reglages input[type="checkbox"]:checked::before,
.choix > label > input[type="checkbox"]:checked::before{transform:translateX(18px);box-shadow:0 1px 3px rgba(0,0,0,.28),inset 0 0 0 2px var(--or)}
.interrupteur:disabled,
.poste-reglages input[type="checkbox"]:disabled,
.apparence-panneau input[type="checkbox"]:disabled,
.cabinet-reglages input[type="checkbox"]:disabled{opacity:.4;cursor:default}
.interrupteur:focus-visible,
.poste-reglages input[type="checkbox"]:focus-visible,
.apparence-panneau input[type="checkbox"]:focus-visible,
.cabinet-reglages input[type="checkbox"]:focus-visible,
.choix > label > input[type="checkbox"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Les groupes en carte, et leurs rangées. */
.poste-reglages,.apparence-panneau,.cabinet-reglages,.cabinet-panneau{
  border:0;border-radius:18px;background:var(--carte);
  box-shadow:var(--cmd-ombre),0 0 0 1px color-mix(in srgb,var(--encre) 6%,transparent)
}
.poste-reglages h4,.apparence-panneau h4,.cabinet-reglages h4,.cabinet-panneau h4{
  display:flex;align-items:center;gap:8px;margin:6px 0 0;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--doux)
}
.poste-reglages h4::before,.apparence-panneau h4::before,.cabinet-reglages h4::before,.cabinet-panneau h4::before{
  content:"";width:6px;height:6px;background:var(--or);transform:rotate(45deg);flex:0 0 auto
}
/* ⚠ Une grille à colonne « auto » se dimensionne sur son contenu le plus long
   (« Mon Cher Cabinet — spécification » + flèches + interrupteur) et déborde
   de la colonne (vu le 2026-09-10) : on la contraint à la largeur disponible,
   et chaque rangée peut rétrécir — le nom, lui, se coupe en points de suspension. */
.poste-reglages,.apparence-panneau,.cabinet-reglages,.poste-reglages ul,.apparence-menu,.cabinet-reglages ul,.cabinet-masquees{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}
.poste-reglages li,.apparence-menu li,.cabinet-reglages li{
  display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;padding:6px 8px 6px 10px;
  border-radius:12px;background:var(--papier)
}
.poste-reglages li .nom,.apparence-menu li .nom,.cabinet-reglages li .nom{flex:1 1 0}
.poste-reglages li .nom,.apparence-menu li .nom,.cabinet-reglages li .nom{order:1;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poste-reglages li .poignee,.cabinet-reglages li .poignee{order:0}
.poste-reglages li button,.apparence-menu li button,.cabinet-reglages li button{
  order:2;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--doux);
  font:inherit;font-size:11px;line-height:1;display:grid;place-items:center;cursor:pointer;
  transition:background var(--cmd-duree),color var(--cmd-duree)
}
.poste-reglages li button:hover:not(:disabled),.apparence-menu li button:hover:not(:disabled),.cabinet-reglages li button:hover:not(:disabled){background:var(--cmd-teinte);color:var(--marine)}
.poste-reglages li button:disabled,.apparence-menu li button:disabled,.cabinet-reglages li button:disabled{opacity:.3;cursor:default}
.poste-reglages li button.chip,.cabinet-reglages li button.chip{width:auto;height:auto;border-radius:999px;min-height:30px;padding:5px 11px}
.poste-reglages li input[type="checkbox"],.apparence-menu li input[type="checkbox"],.cabinet-reglages li input[type="checkbox"]{order:3;margin-left:4px}
.apparence-menu{gap:6px}

/* La palette : des ronds pleins, un reflet en haut à gauche comme une perle,
   un anneau d'or et une coche autour du choisi. ⚠ `button{min-height:46px}`
   (plus haut) allongeait ces ronds en ovales (vu le 2026-09-10) : tout rond
   ou carré de commande remet `min-height:0`. */
.poste-palette{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:4px 2px}
.poste-teinte,.cabinet-teinte{
  position:relative;width:32px;height:32px;min-height:0;min-width:0;flex:0 0 auto;
  border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.62),rgba(255,255,255,0) 48%),var(--teinte);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 1px 2px rgba(17,28,39,.14);
  transition:transform var(--cmd-duree) var(--cmd-courbe),box-shadow var(--cmd-duree)
}
.poste-teinte:hover,.cabinet-teinte:hover{transform:scale(1.1)}
.poste-teinte[aria-checked="true"],.poste-teinte[aria-pressed="true"],.cabinet-teinte[aria-pressed="true"],.cabinet-teinte[aria-checked="true"]{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 2px var(--carte),0 0 0 4px var(--or),0 2px 6px rgba(17,28,39,.16);transform:scale(1.06)
}
/* La coche : blanche en différence, elle se lit sur un fond clair comme sur un fond sombre. */
.poste-teinte[aria-checked="true"]::after,.poste-teinte[aria-pressed="true"]::after,.cabinet-teinte[aria-pressed="true"]::after,.cabinet-teinte[aria-checked="true"]::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;border-radius:1px;
  transform:translate(-50%,-62%) rotate(45deg);mix-blend-mode:difference
}
.poste-teinte:focus-visible,.cabinet-teinte:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.poste-teinte-autre{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--doux)}
.poste-teinte-autre input{width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
/* Les autres ronds et carrés de commande : jamais allongés. */
.poste-reglages li button,.apparence-menu li button,.cabinet-reglages li button{min-height:0}

/* La feuille : sur téléphone, le panneau d'apparence monte du bas. */
@media (max-width:620px){
  .apparence-panneau{
    left:0;right:0;top:auto;bottom:0;width:auto;max-height:82vh;
    border-radius:22px 22px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(11,18,32,.22)
  }
  .apparence-panneau::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--filet-fort);margin:0 auto 4px}
  .apparence-entete{top:-8px;margin-top:-8px}
}
@media (prefers-reduced-motion:reduce){
  .chip,.poste-lien,.cabinet-lien,.choix-curseur,.poste-teinte,.cabinet-teinte,
  .poste-reglages input[type="checkbox"],.apparence-panneau input[type="checkbox"],.cabinet-reglages input[type="checkbox"],.choix > label > input[type="checkbox"],
  .poste-reglages input[type="checkbox"]::before,.apparence-panneau input[type="checkbox"]::before,.cabinet-reglages input[type="checkbox"]::before,.choix > label > input[type="checkbox"]::before{transition:none}
}

/* Mail a été retiré du site le 2026-09-12 : le guide du raccord et l'écran
   des clés d'hébergeur sont partis avec lui, et leur dessin aussi. */


/* ═══ LE BANDEAU DE L'ESPACE (2026-09-23) ═══════════════════════════════════
   Le cabinet, capture de fil.html à l'appui : « menu est différent d'un espace
   à l'autre, il faut harmoniser ». Le bandeau de l'accueil (né dans travail.css
   le 2026-09-14) devient celui de TOUTES les pages de l'espace : une barre
   claire de 64 px, la marque, la navigation à ordre fixe, Aide, la roue
   Apparence, le compte ; sous 1024 px une seconde bande de 52 px où les sept
   entrées restent visibles, icône sur libellé, sans jamais défiler. Le HTML est
   généré (Deploiement/bandeau.py, gabarit Deploiement/gabarits/bandeau.html) ;
   la feuille vit ICI, chargée par toutes les pages.
   Scoppée `.bandeau-espace` : entrer.html, inscrire.html et presentation.html
   portent `bandeau mince` SANS ce menu et gardent le marine (§ 3 plus haut).
   ⚠ Jamais de `display` sur `.menu-halo-lien` : les rôles et `.menu-cache`
   masquent par display:none (spécificité (0,3,0) et !important) — la seule
   règle qui en pose un est `.menu-halo-lien{display:flex}`, à (0,1,0).
   Le bandeau n'est collant que sur l'accueil (travail.css), dont la coquille
   est calée sur --t-entete ; ailleurs il défile avec la page, comme le marine.

   Les jetons `--t-*` (ex-travail.css) portent des noms neufs : le panneau
   Apparence réécrit `--papier`, `--carte`, `--encre`… en style en ligne sur
   <html> et écraserait une palette qui garderait ces noms. Ils vivent sur
   <body> (le panneau Apparence, frère du bandeau, en hérite). Le sombre suit
   le système ; `.t-theme-clair` / `.t-theme-sombre` sont posées par app.js
   quand l'Apparence impose un fond (travail.js les pose aussi sur l'accueil :
   la classe est la même, l'ordre est indifférent). */
body{
  --t-fond:#F6F5F2;
  --t-surface:#FFFFFF;
  --t-surface-2:#F0F3F6;
  --t-nuit:#142D47;
  --t-sur-nuit:#FFFFFF;
  --t-texte:#172536;
  --t-texte-2:#586779;         /* 5,78:1 sur la surface : le texte des entrées au repos */
  --t-bord:#DFE4E8;
  --t-bord-champ:#7D8B99;       /* le contour d'un champ : 3,5:1 sur blanc */
  --t-laiton:#AD8848;           /* décor seulement, jamais du texte */
  --t-erreur:#A52D38;
  --t-actif-fond:color-mix(in srgb,var(--t-nuit) 7%,var(--t-surface));
  --t-focus:#142D47;
  --t-squelette:#E4E8EC;
  --t-ombre:0 16px 40px rgba(20,45,71,.16);
  --t-voile:rgba(15,22,32,.45);
  --t-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --t-barre:64px;
  --t-bande:52px;               /* la seconde bande de la navigation, sous 1024 px */
  --t-entete:var(--t-barre);    /* la hauteur totale de l'en-tête (barre + bande) */
  --t-rail:64px;                /* la colonne des applications de l'accueil, pliée */
  --t-colonne:232px;            /* la même, ouverte */
  --t-marge:32px;
  --t-duree:160ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:not(.t-theme-clair){
    --t-fond:#0F1620;--t-surface:#16202C;--t-surface-2:#1C2835;
    --t-nuit:#9DB8D9;--t-sur-nuit:#0F1620;
    --t-texte:#E6ECF2;--t-texte-2:#9AA9B9;--t-bord:#2A3747;--t-bord-champ:#5E6E7D;--t-laiton:#C9A86A;
    --t-erreur:#F2A7AF;
    --t-actif-fond:color-mix(in srgb,var(--t-nuit) 14%,var(--t-surface));
    --t-focus:#9DB8D9;--t-squelette:#243142;--t-ombre:0 16px 40px rgba(0,0,0,.5);--t-voile:rgba(4,8,12,.62);
  }
}
:root[data-theme="dark"] body:not(.t-theme-clair),
body.t-theme-sombre{
  --t-fond:#0F1620;--t-surface:#16202C;--t-surface-2:#1C2835;
  --t-nuit:#9DB8D9;--t-sur-nuit:#0F1620;
  --t-texte:#E6ECF2;--t-texte-2:#9AA9B9;--t-bord:#2A3747;--t-bord-champ:#5E6E7D;--t-laiton:#C9A86A;
  --t-erreur:#F2A7AF;
  --t-actif-fond:color-mix(in srgb,var(--t-nuit) 14%,var(--t-surface));
  --t-focus:#9DB8D9;--t-squelette:#243142;--t-ombre:0 16px 40px rgba(0,0,0,.5);--t-voile:rgba(4,8,12,.62);
}
/* Le schéma de couleur des commandes natives suit les jetons : sombre avec le
   système, ou quand l'Apparence impose un fond sombre (.t-theme-sombre) ;
   clair quand elle impose un fond clair sous un système sombre. */
body{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body:not(.t-theme-clair){color-scheme:dark}}
:root[data-theme="dark"] body:not(.t-theme-clair),body.t-theme-sombre{color-scheme:dark}

/* ── La barre ──────────────────────────────────────────────────────────────
   (0,3,0) : bat `.bandeau.mince` (0,2,0, § 3 et « EnTete transporté »), dont
   le dégradé marine, le padding, le retour à la ligne et le filet d'or.
   `height:auto` + `min-height` et non une hauteur fixe : par sûreté (texte
   « Grande » de l'Apparence, police plus large), une rangée qui ne tient pas
   passe sur deux rangées (`.menu-halo{flex-wrap:wrap}`) — jamais de
   défilement, jamais de coupe. Le ruban impose 63 px : la barre fait 64. */
.bandeau.mince.bandeau-espace{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:12px;
  height:auto;min-height:var(--t-barre);margin:0;padding:0 24px;
  background:var(--t-surface);color:var(--t-texte);
  border-bottom:1px solid var(--t-bord);text-align:left;
  font-family:var(--t-sans);
}
.bandeau-espace .marque{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-height:44px;margin:0;color:var(--t-texte);text-decoration:none}
.bandeau.mince.bandeau-espace .u{
  display:grid;place-items:center;width:32px;height:32px;margin:0;
  border:0;border-radius:8px;background:var(--t-nuit);color:var(--t-sur-nuit);
  box-shadow:inset 0 -2px 0 var(--t-laiton);
  font:600 17px/1 var(--t-sans);
}
.bandeau.mince.bandeau-espace .nom{font:600 15px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--t-texte);white-space:nowrap}

/* La bande de navigation : jamais de défilement (overflow visible), la place
   qu'il faut, et deux rangées si la largeur l'impose (§ ci-dessus). */
.bandeau-espace .t-ruban{display:flex;align-self:stretch;flex:0 1 auto;min-width:0;min-height:calc(var(--t-barre) - 1px);margin-left:12px}
.bandeau.mince.bandeau-espace .menu-halo{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;gap:0;
  width:auto;min-width:0;margin:0;padding:0;border-radius:0;overflow:visible;
}
.bandeau.mince.bandeau-espace .menu-halo-lien{
  position:relative;flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;
  min-height:44px;margin:0;padding:0 10px;border-radius:0;
  background:transparent;color:var(--t-texte-2);
  font:500 14px/1.2 var(--t-sans);white-space:nowrap;text-decoration:none;
  transition:color var(--t-duree) ease;
}
.bandeau-espace .menu-halo-icone{width:18px;height:18px;flex:0 0 auto}
/* La page courante : le texte nuit et un filet de 2 px au pied — pas de
   pastille, jamais la couleur seule. Graisse inchangée : l'entrée ne
   s'élargit pas en devenant courante. */
.bandeau.mince.bandeau-espace .menu-halo-lien::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:transparent;
}
.bandeau.mince.bandeau-espace .menu-halo-lien:hover{background:transparent;color:var(--t-texte)}
.bandeau.mince.bandeau-espace .menu-halo-lien:hover::after{background:var(--t-bord)}
.bandeau.mince.bandeau-espace .menu-halo-lien[aria-current="page"],
.bandeau.mince.bandeau-espace .menu-halo-lien[aria-current="page"]:hover{background:transparent;color:var(--t-nuit);font-weight:500}
.bandeau.mince.bandeau-espace .menu-halo-lien[aria-current="page"]::after{background:var(--t-nuit)}
/* L'entrée fait toute la hauteur de la barre (d'où le filet à son pied) ;
   l'anneau de focus garde la taille d'une commande, 44 px, en retrait. */
.bandeau.mince.bandeau-espace .menu-halo-lien:focus-visible{outline:none}
.bandeau.mince.bandeau-espace .menu-halo-lien:focus-visible::before{
  content:"";position:absolute;left:2px;right:2px;top:50%;height:44px;margin-top:-22px;
  border:2px solid var(--t-focus);border-radius:8px;pointer-events:none;
}

/* ── À droite : Aide, la roue, le compte ──────────────────────────────────── */
.bandeau-espace a:focus-visible,
.bandeau-espace button:focus-visible{outline:2px solid var(--t-focus);outline-offset:2px;box-shadow:none}
.bandeau-espace .t-barre-droite{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Aide : icône et libellé ; l'icône seule quand la place manque (sous
   1180 px), le libellé restant lu. */
.bandeau-espace .t-barre-aide{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 12px;border-radius:8px;
  color:var(--t-texte-2);font:500 14px/1.2 var(--t-sans);text-decoration:none;white-space:nowrap;
}
.bandeau-espace .t-barre-aide svg{width:20px;height:20px;flex:0 0 auto}
.bandeau-espace .t-barre-aide:hover{background:var(--t-surface-2);color:var(--t-texte)}
.bandeau-espace .t-barre-aide[aria-current="page"]{background:var(--t-actif-fond);color:var(--t-nuit)}
/* La roue, posée là par app.js (poserLApparence). La base des boutons du site
   (§ 5 : pastille marine qui monte au survol) est neutralisée trait par trait. */
.bandeau-espace .t-barre-droite .menu-apparence{
  order:0;margin:0;width:44px;height:44px;min-height:0;padding:0;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid transparent;border-radius:8px;background:transparent;color:var(--t-texte-2);
  transform:none;box-shadow:none;cursor:pointer;
}
.bandeau-espace .t-barre-droite .menu-apparence svg{width:20px;height:20px}
.bandeau-espace .t-barre-droite .menu-apparence:hover{background:var(--t-surface-2);border-color:transparent;color:var(--t-texte);transform:none;box-shadow:none}
.bandeau-espace .t-barre-droite .menu-apparence:active{transform:none;box-shadow:none}
.bandeau-espace .t-barre-droite .menu-apparence[aria-expanded="true"]{background:var(--t-actif-fond);color:var(--t-nuit)}
.bandeau-espace .t-barre-droite .menu-apparence:focus-visible{outline:2px solid var(--t-focus);outline-offset:2px;box-shadow:none}
/* Le compte : un rond de 44 px ; sur espace.html il est la page courante. Son
   contour (--t-bord) est un décor : le sens est porté par l'icône (5,78:1). */
.bandeau.mince.bandeau-espace .vers-espace{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
  border:1px solid var(--t-bord);border-radius:50%;
  background:var(--t-surface);color:var(--t-texte-2);text-decoration:none;
  transition:background-color var(--t-duree) ease,color var(--t-duree) ease;
}
.bandeau.mince.bandeau-espace .vers-espace:hover{background:var(--t-surface-2);color:var(--t-texte)}
.bandeau.mince.bandeau-espace .vers-espace svg{width:20px;height:20px}
.bandeau.mince.bandeau-espace .vers-espace[aria-current="page"]{background:var(--t-actif-fond);color:var(--t-nuit);border-color:var(--t-nuit)}

/* Le panneau Apparence, en surplomb sous l'EN-TÊTE, à droite. Sous 620 px, la
   règle « sur téléphone, le panneau monte du bas » (plus haut) reste seule.
   ⚠ --t-entete et non --t-barre : de 621 à 1023 px l'en-tête a une seconde
   bande (116 px) ; calé sur la barre, le panneau cachait Marché et Outils. */
@media (min-width:621px){
  .apparence-panneau{
    top:calc(var(--t-entete) + 8px);right:16px;z-index:70;border-radius:12px;box-shadow:var(--t-ombre);
    max-height:calc(100vh - var(--t-entete) - 16px);max-height:calc(100dvh - var(--t-entete) - 16px);
  }
}

/* ── Le titre de page ──────────────────────────────────────────────────────
   Le titre d'écran que la bande marine portait (« Annuaire national »…) est
   désormais SOUS le bandeau, premier titre de la page : même famille et même
   taille que le premier titre d'un écran du poste (travail.css, .ecran-nom :
   600 16px/1.3). Une fois par page ; l'espace autour reste celui de main. */
/* Le titre hérité de l'ancienne bande marine (Annuaire national, Administration…)
   prend le style des titres de page du site (h2 : « Votre fil », « Cabinet »),
   pour qu'un titre soit le même d'un espace à l'autre — le cabinet, 2026-09-23 :
   « il faut harmoniser ». Sans marge haute : c'est le premier enfant sous le bandeau. */
.titre-page{margin:0 0 var(--e-2);font-family:var(--serif);font-weight:600;font-size:var(--pas-5);line-height:1.3;color:var(--titre);letter-spacing:0;text-wrap:balance}
.titre-page + *{margin-top:0}

/* ── Points de rupture ─────────────────────────────────────────────────── */
/* Sous 1180 px : la barre se resserre ; Aide passe en icône (le libellé reste
   lu). Identique sur toutes les pages, avec ou sans bouton « Applications » :
   c'est l'uniformité qui est demandée. */
@media (max-width:1179.98px){
  .bandeau.mince.bandeau-espace{padding:0 16px;column-gap:8px}
  .bandeau-espace .t-barre-droite{gap:4px}
  .bandeau-espace .t-barre-aide{padding:0}
  .bandeau-espace .t-barre-aide-texte{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 1024 à 1179 px : la navigation reste dans la barre. La marque passe en
   monogramme (son nom reste lu), les entrées se resserrent. */
@media (min-width:1024px) and (max-width:1179.98px){
  .bandeau-espace .marque{min-width:44px;justify-content:center}
  .bandeau.mince.bandeau-espace .nom{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bandeau-espace .t-ruban{margin-left:4px}
  .bandeau.mince.bandeau-espace .menu-halo-lien{padding:0 8px;gap:6px}
  .bandeau.mince.bandeau-espace .menu-halo-lien::after{left:8px;right:8px}
}
/* Sous 1024 px : la navigation passe sur une SECONDE BANDE de 52 px, sous la
   barre. Les sept entrées, icône AU-DESSUS du libellé, chacune large comme
   son texte puis élargie à parts égales (flex:1 1 auto, min-width:0) : mesuré
   sans débordement de 320 à 1023 px (contrat § 4.4 : à 390 px, Fil fait
   37 px, Discussion 70). Rien ne défile, rien n'est coupé. */
@media (max-width:1023.98px){
  body{--t-entete:calc(var(--t-barre) + var(--t-bande))}
  .bandeau.mince.bandeau-espace{
    display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:calc(var(--t-barre) - 1px) var(--t-bande);
    column-gap:8px;row-gap:0;height:auto;min-height:0;align-items:center;
  }
  .bandeau-espace .t-menu{grid-row:1;grid-column:1}          /* accueil seulement */
  .bandeau-espace .marque{grid-row:1;grid-column:2}
  /* Sans bouton « Applications », la colonne 1 serait vide et laisserait sa
     gouttière de 8 px devant la marque : la marque, premier enfant, couvre
     les deux colonnes. Sur l'accueil, le bouton la précède. */
  .bandeau-espace > .marque:first-child{grid-column:1 / 3}
  .bandeau-espace .t-barre-droite{grid-row:1;grid-column:3;justify-self:end;margin-left:0}
  .bandeau-espace .t-ruban{grid-row:2;grid-column:1 / -1;align-self:stretch;min-height:0;height:var(--t-bande);margin:0 -16px;border-top:1px solid var(--t-bord)}
  .bandeau.mince.bandeau-espace .menu-halo{flex:1 1 auto;flex-wrap:nowrap;padding:0 8px}
  .bandeau.mince.bandeau-espace .menu-halo-lien{
    flex:1 1 auto;min-width:0;flex-direction:column;justify-content:center;gap:3px;
    min-height:44px;padding:0 2px;font-size:12px;line-height:1.15;
  }
  .bandeau-espace .menu-halo-icone{width:20px;height:20px}
  .bandeau.mince.bandeau-espace .menu-halo-lien::after{left:4px;right:4px}
  .bandeau.mince.bandeau-espace .menu-halo-lien:focus-visible::before{left:1px;right:1px;top:2px;bottom:2px;height:auto;margin:0}
}
/* Sous 480 px : la marque en monogramme (son nom reste lu). */
@media (max-width:479.98px){
  .bandeau-espace .marque{min-width:44px;justify-content:center}
  .bandeau.mince.bandeau-espace .nom{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Sous 360 px : à 12 px, la somme des sept entrées à leur largeur de contenu
   (libellés 296 px + marges) dépasse la bande et « Fil » descendait à 22,5 px
   à 320 px, sous la cible de 24 px (mesuré par le banc). À 11 px (275 px) et
   avec 4 px de marge, tout tient sans rétrécir : Fil ≥ 24 px. */
@media (max-width:359.98px){
  .bandeau.mince.bandeau-espace .menu-halo{padding:0 4px}
  .bandeau.mince.bandeau-espace .menu-halo-lien{font-size:11px}
}
/* Sous 320 px (par sûreté : une police plus large, un libellé futur) : la
   bande passe sur deux rangées plutôt que de couper. */
@media (max-width:319.98px){
  .bandeau.mince.bandeau-espace{grid-template-rows:calc(var(--t-barre) - 1px) auto}
  .bandeau-espace .t-ruban{height:auto;min-height:var(--t-bande)}
  .bandeau.mince.bandeau-espace .menu-halo{flex-wrap:wrap}
}
/* Rien ne bouge pour qui l'a demandé. */
@media (prefers-reduced-motion:reduce){
  .bandeau-espace *,.bandeau-espace *::before,.bandeau-espace *::after{transition:none !important;animation:none !important}
}