/* =============================================================================
   OPC Keyward — habillage de la console.

   LA CHARTE VIENT DU PROJET « REFONTE SITE WEB ». Les couleurs, les rayons,
   les polices et l'echelle typographique sont repris tels quels de
   `theme/snippets/opc-tokens.liquid` et `theme/sections/opc-style.liquid`.
   Un client qui passe du site au gestionnaire doit reconnaitre la maison.

   Trois ecarts assumes, chacun motive plus bas :
     1. les polices sont SERVIES D'ICI, pas depuis Google ;
     2. `--muted` prend la valeur CORRIGEE de la charte, pas celle du theme ;
     3. l'echelle du corps de texte est resserree pour un usage applicatif.

   =============================================================================
   1. POURQUOI LES POLICES SONT HEBERGEES ICI
   =============================================================================

   Le site les charge depuis `fonts.googleapis.com`. Ici, ce serait dire a
   Google QUI ouvre son coffre-fort et QUAND — a chaque ouverture, depuis
   l'adresse IP du cabinet ou du garage. Un produit dont l'argument est que le
   serveur lui-meme ne voit rien ne peut pas commencer par prevenir un tiers.

   Sora, Manrope et IBM Plex Mono sont sous licence SIL OFL : les heberger est
   expressement permis, et chacune a son fichier de licence dans
   `/polices/`. Huit fichiers, 133 Ko, sous-ensembles latin et latin-ext.
   Sora et Manrope sont VARIABLES : un fichier par sous-ensemble couvre
   toute la plage de graisses.

   La charte O'PC PHONE (ADR-016) veut Sora pour la titraille et Manrope
   pour le texte. Archivo tenait leur place depuis le 2026-09-26 ; elle est
   retiree le 2026-09-28, en meme temps que ses deux fichiers — elle n'avait
   plus de role, et sa licence OFL n'avait jamais ete jointe, ce qui rendait
   sa distribution irreguliere.
   ============================================================================= */

/* Sora — la titraille. Variable : un fichier couvre 400 a 800. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/polices/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/polices/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — le texte courant. Variable : 400 a 700. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/polices/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/polices/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/polices/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/polices/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/polices/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/polices/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================================
   2. LES JETONS
   ============================================================================= */

:root {
  /* Couleurs, identiques a `--opc-*` de la charte. */
  --bg:      #0c0912;
  --surf:    #151020;
  --surf2:   #1c1529;
  --line:    #2c2340;
  --line2:   #3a2d52;
  --ink:     #f4eff9;
  --ink2:    #c3b8d3;

  /* LA VALEUR CORRIGEE, ET NON CELLE DU THEME.
     `theme/assets/opc-a.css` porte encore `#857a99`. La charte l'a releve a
     `#9a90b0` apres mesure : 52 textes du site portaient ce gris, 13 tombaient
     a 4,16:1 sur les fonds translucides, pour un seuil WCAG de 4,5. Reprendre
     l'ancienne valeur ici serait recopier un defaut deja corrige ailleurs. */
  --muted:   #9a90b0;

  /* DEUX USAGES OPPOSES, DEUX JETONS — arbitrage de la charte, 18 sept.
     `--acc2` est assez SOMBRE pour porter du texte blanc en fond de bouton
     (4,61:1). `--acc2-txt` est le meme ton eclairci de 8 points, pour du TEXTE
     sur fond sombre. Une seule valeur ne peut pas servir les deux sens. */
  --acc:      #7b3fe4;
  --acc2:     #b843b8;
  --acc2-txt: #c55fc5;

  --rad:  14px;
  --rad-s: 9px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  --disp: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Etats. Deduits de la charte : le violet pour l'action, le magenta pour ce
     qui attire l'oeil. Le danger et le succes n'y figuraient pas — un site
     vitrine n'a rien a refuser. Choisis dans la meme famille de saturation. */
  --danger:   #e0566b;
  --danger-f: rgba(224, 86, 107, .12);
  --ok:       #3fbf87;
  --alerte-f: rgba(224, 86, 107, .09);

  --max: 74rem;
}

/* L'attribut `hidden` doit VRAIMENT cacher.
   Il ne pose `display: none` que par la feuille du NAVIGATEUR, dont la
   specificite est nulle : la moindre regle d'auteur portant `display:`
   l'emporte. Sans cette ligne, `.chargement { display: grid }` maintenait un
   voile sur toute la page, en permanence, et `nav { display: flex }` affichait
   la navigation sur l'ecran de connexion. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font-family: var(--body);
  /* 3. ECHELLE RESSERREE. La charte pose le corps a clamp(1.15rem … 1.3rem) :
     juste pour une page vitrine qu'on lit une fois, enorme pour une liste de
     quarante identifiants qu'on parcourt tous les jours. On garde le rapport
     entre les niveaux, un cran plus bas. */
  font-size: 15px;      /* le corps de la maquette */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(123, 63, 228, .45); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acc2-txt);
  outline-offset: 3px;
  border-radius: 6px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line2); border-radius: 99px; border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--acc); }


/* =============================================================================
   3. LA CONSOLE — Preact (D42). Refonte du 2026-10-05, apres la disparition du coffre.

   Ce qui est repris de la charte : couleurs, rayons, polices, le trait degrade des
   onglets. Ce qui est propre a l'application : la densite. Une liste de quarante
   elements se parcourt tous les jours, elle n'a pas la respiration d'une page vitrine.

   Un seul accent par ecran (le violet de l'action), le rouge reserve a ce qui est
   irreversible ou refuse. Toute information passe par un TEXTE, jamais par la seule
   couleur.
   ============================================================================= */

h1, h2, h3 { font-family: var(--disp); letter-spacing: -.028em; text-wrap: balance; color: var(--ink); margin: 0; }
h1 { font-size: clamp(1.45rem, 1.25rem + .9vw, 2rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
code, .mono { font-family: var(--mono); }
a { color: var(--acc2-txt); }
p { margin: 0 0 .8rem; }

/* --- Les commandes ----------------------------------------------------------- */

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.5rem; padding: .5rem 1rem;
  font-family: var(--disp); font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  /* Le degrade violet-rose de la maquette (`.b--p`), pas un aplat. */
  color: #fff; background: linear-gradient(90deg, var(--acc), var(--acc2));
  border: 1px solid transparent; border-radius: var(--rad-s);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.bouton:hover:not(:disabled) { filter: brightness(1.12); }
.bouton-discret { color: var(--ink); background: var(--surf2); border-color: var(--line2); }
.bouton-discret:hover:not(:disabled) { background: var(--line); }
.bouton-danger { color: #fff; background: var(--danger); }
.bouton-danger:hover:not(:disabled) { background: #ec6f82; }
.bouton-discret.bouton-danger { color: var(--danger); background: var(--surf2); border-color: rgba(224, 86, 107, .4); }
.bouton-plein { width: 100%; min-height: 2.9rem; }

.lien { background: none; border: 0; padding: .3rem 0; color: var(--acc2-txt); text-decoration: underline; text-underline-offset: 3px; }

/* La cible tactile fait 40 px minimum : on tape ces boutons au pouce, sur un telephone. */
.icone-bouton {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  color: var(--ink2); background: none; border: 1px solid transparent; border-radius: var(--rad-s);
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icone-bouton:hover { color: #fff; background: rgba(123, 63, 228, .2); }
.icone { flex: none; }

input, select, textarea {
  width: 100%; min-height: 2.6rem; padding: .55rem .8rem;
  background: var(--surf); border: 1px solid var(--line2); border-radius: var(--rad-s);
  color: var(--ink);
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder { color: var(--muted); }
input:hover, select:hover, textarea:hover { border-color: var(--acc); }
label { display: block; margin: 1rem 0 .3rem; font-size: .85rem; font-weight: 600; color: var(--ink2); }
.requis { color: var(--acc2-txt); }
.aide { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); }
.aide-erreur { color: var(--danger); }

/* --- Etats : bandeaux, pastilles, ecrans vides ------------------------------------ */

.bandeau { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--rad-s); border: 1px solid var(--line2); background: var(--surf); font-size: .92rem; }
.bandeau > :last-child { margin-bottom: 0; }
.bandeau-erreur { color: #ffd9de; background: var(--danger-f); border-color: rgba(224, 86, 107, .45); }
.bandeau-alerte { color: #ffe9bf; background: rgba(224, 163, 60, .12); border-color: rgba(224, 163, 60, .45); }
.bandeau-ok { color: #cdf6e3; background: rgba(63, 191, 135, .12); border-color: rgba(63, 191, 135, .45); }
.bandeau-info { color: var(--ink2); border-left: 3px solid var(--acc); }
.bandeau .lien { margin-left: .6rem; }
.erreurs { margin: 0; padding-left: 1.1rem; }

.pastille {
  display: inline-block; padding: .12rem .55rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink2); background: var(--surf2); border: 1px solid var(--line2);
}
.pastille-ok { color: var(--ok); border-color: rgba(63, 191, 135, .5); }
.pastille-alerte { color: #e0a33c; border-color: rgba(224, 163, 60, .55); }
.pastille-danger { color: var(--danger); border-color: rgba(224, 86, 107, .55); }

.vide { padding: 2.5rem 1rem; text-align: center; border: 1px dashed var(--line2); border-radius: var(--rad); color: var(--muted); }
.vide-titre { font-family: var(--disp); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.chargement { padding: 2rem 0; text-align: center; color: var(--muted); }

/* --- L'ecran d'entree ------------------------------------------------------------------ */

.entree { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 1.2rem; padding: 1.5rem 1rem; }
.carte-entree {
  width: min(26rem, 100%); padding: 1.75rem 1.5rem 1.5rem;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--rad);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.carte-entree h1 { margin: .9rem 0 1rem; font-size: 1.5rem; }
.carte-entree .bouton-plein { margin-top: 1.4rem; }
.carte-entree .lien { display: block; margin: 1rem auto 0; font-size: .88rem; }
.pied-entree { width: min(26rem, 100%); margin: 0 auto; text-align: center; font-size: .82rem; color: var(--muted); }
.marque { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--disp); font-weight: 400; color: var(--muted); text-decoration: none; white-space: nowrap; }
.marque strong { color: var(--ink); font-weight: 800; }
.marque-grande { font-size: 1.15rem; }

/* --- La coque ------------------------------------------------------------------------------- */

.coque { min-height: 100vh; }
.bandeau-haut {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .6rem clamp(1rem, 3vw, 2rem);
  background: rgba(12, 9, 18, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bandeau-haut nav { display: flex; gap: .15rem; }
.onglet {
  position: relative; padding: .5rem .7rem; border-radius: var(--rad-s);
  font-family: var(--disp); font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink2); text-decoration: none;
}
.onglet:hover { color: #fff; background: rgba(123, 63, 228, .15); }
/* Le trait de la charte, deploye sous l'onglet courant. */
.onglet::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), var(--acc2)); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.onglet.active { color: #fff; background: rgba(123, 63, 228, .12); }
.onglet.active::after { transform: scaleX(1); }
.compte { display: flex; align-items: center; gap: .8rem; margin-left: auto; font-size: .88rem; }
.compte select { width: auto; min-height: 2.2rem; }
.organisation, .nom-utilisateur { color: var(--muted); white-space: nowrap; }
.contenu { width: min(var(--max), 100%); margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem; }

.entete-page { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.entete-page h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.entete-titre { flex: 1; min-width: 0; }
.entete-titre h1 { overflow-wrap: anywhere; font-size: 22px; font-weight: 700; }
.entete-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sous-titre { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }

/* --- Le catalogue -------------------------------------------------------------------------------- */

.recherche { position: relative; display: flex; align-items: center; margin-bottom: .8rem; }
.recherche .icone { position: absolute; left: .85rem; color: var(--muted); pointer-events: none; }
.recherche input { padding-left: 2.5rem; min-height: 2.9rem; }

.familles { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: .9rem; scrollbar-width: thin; }
.famille {
  flex: none; padding: .4rem .9rem; border-radius: 99px;
  font-size: .85rem; font-weight: 600; color: var(--ink2);
  background: var(--surf); border: 1px solid var(--line2);
}
.famille:hover { border-color: var(--acc); color: #fff; }
.famille.active { color: #fff; background: var(--acc); border-color: var(--acc); }
.compte-lignes, .compte { margin: 0 0 .5rem; font-size: .82rem; color: var(--muted); }
.compte { margin-left: 0; }
.catalogue .compte { display: block; }

.liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surf); }
.ligne { display: flex; align-items: center; border-top: 1px solid var(--line); }
.ligne:first-child { border-top: 0; }
.ligne:hover { background: var(--surf2); }
.ligne-principale {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem;
  padding: .7rem .75rem .7rem 1rem; text-align: left; background: none; border: 0;
}
.ligne-type { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; color: var(--acc2-txt); background: rgba(123, 63, 228, .16); }
.ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-nom { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-sous { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-etats { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.ligne-actions { flex: none; display: flex; padding-right: .5rem; }

/* --- La fiche et le formulaire ------------------------------------------------------------------------ */

.fiche { max-width: 46rem; }
.etats { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.titre-section { margin: 1.6rem 0 .7rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--mono); font-weight: 600; }
.valeurs { margin: 0; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.valeurs:empty { display: none; }
.valeur { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: .25rem 1rem; padding: .65rem 1rem; border-top: 1px solid var(--line); align-items: center; }
.valeur:first-child { border-top: 0; }
.valeur dt { color: var(--muted); font-size: .85rem; }
.valeur dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.valeur-texte { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--ink); }
.valeur-texte.secret { font-family: var(--mono); font-size: .92rem; }
.valeur-actions { flex: none; display: flex; }
.pied-fiche { margin-top: 1.5rem; font-size: .82rem; color: var(--muted); }

.formulaire fieldset { margin: 0 0 1.2rem; padding: .3rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.formulaire legend { padding: 0 .5rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.type-courant { margin: 0 0 1rem; color: var(--acc2-txt); font-family: var(--mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.champ-secret { display: flex; gap: .4rem; align-items: center; }
.champ-secret input { flex: 1; font-family: var(--mono); }
.actions-formulaire { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.choix-type { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.choix { width: 100%; padding: .9rem 1rem; text-align: left; font-weight: 600; color: var(--ink); background: var(--surf); border: 1px solid var(--line2); border-radius: var(--rad-s); }
.choix:hover { border-color: var(--acc); background: var(--surf2); }

/* La robustesse : la barre ET le mot ET les bits, pour qu'aucune couleur ne porte seule le sens. */
.robustesse { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-size: .82rem; }
.robustesse-barre { flex: 1; max-width: 12rem; height: .4rem; border-radius: 99px; background: var(--line); overflow: hidden; }
.robustesse-barre > span { display: block; height: 100%; border-radius: 99px; background: var(--danger); transition: width .25s var(--ease), background .25s var(--ease); }
.robustesse-moyen .robustesse-barre > span { background: #e0a33c; }
.robustesse-bon .robustesse-barre > span, .robustesse-excellent .robustesse-barre > span { background: var(--ok); }
.robustesse-texte { color: var(--ink2); }
.conseils { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--muted); }

/* --- Le telephone ------------------------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .bandeau-haut { gap: .5rem .9rem; }
  .compte { width: 100%; justify-content: space-between; margin-left: 0; }
  .nom-utilisateur { flex: 1; }
  .ligne { flex-wrap: wrap; }
  .ligne-principale { flex-basis: 100%; padding-right: .5rem; }
  .ligne-actions { flex-basis: 100%; justify-content: flex-end; padding: 0 .5rem .4rem; margin-top: -.3rem; }
  .ligne-etats { display: none; }
  .valeur { grid-template-columns: 1fr; }
  .entete-page { flex-wrap: wrap; }
  .entete-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.valeurs + .bouton, .valeurs + .aide { margin-top: .8rem; }
.entete-page > .icone-bouton { align-self: flex-start; margin-top: .2rem; }

/* --- Les demandes ------------------------------------------------------------------------------ */
.compteur {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; margin-left: .3rem;
  border-radius: 99px; color: #fff; font-family: var(--mono); font-size: .72rem; font-weight: 700;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
}
.beneficiaires { list-style: none; margin: .6rem 0 1rem; padding: 0; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.beneficiaire { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1rem; border-top: 1px solid var(--line); }
.beneficiaire:first-child { border-top: 0; }
.beneficiaire.coche { background: rgba(123, 63, 228, .1); }
.beneficiaire-choix { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.beneficiaire-choix select { width: auto; min-height: 2.2rem; }
.case { display: inline-flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer; font-weight: 500; color: var(--ink); }
.case input { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; accent-color: var(--acc); }
.secondaire { color: var(--muted); font-size: .85rem; margin-left: .35rem; }
@media (max-width: 640px) { .beneficiaire { flex-direction: column; align-items: flex-start; } }

/* --- Les personnes et l'invitation ------------------------------------------------------------ */
.inviter { margin: 0 0 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.inviter h2 { margin-bottom: .2rem; }
.inviter-champs { display: grid; grid-template-columns: 1fr 12rem auto; gap: .75rem; align-items: end; }
.inviter-champs label { margin-top: .6rem; }
.inviter-champs-egaux { grid-template-columns: 1fr 1fr auto; }
.equipes-preparees { margin: 1rem 0 0; padding: .6rem .9rem .8rem; border: 1px solid var(--line); border-radius: var(--rad-s); background: var(--surf2); }
.equipes-preparees legend { padding: 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--ink2); }
.equipes-preparees .case { margin: .35rem 1.2rem .2rem 0; }
.remises { margin: 0 0 1.5rem; }
.lien-invitation, .cle-recuperation {
  margin: .6rem 0; padding: .7rem .9rem; border-radius: var(--rad-s); background: var(--bg); border: 1px dashed var(--line2);
  font-family: var(--mono); font-size: .88rem; color: var(--ink); overflow-wrap: anywhere; user-select: all;
}
.cle-recuperation { font-size: 1rem; letter-spacing: .06em; line-height: 1.8; text-align: center; }
.membres .membre { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 14rem; gap: .5rem 1.25rem; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.membres .membre:first-child { border-top: 0; }
.membres .membre > .membre-actions { grid-column: 3; }   /* une ligne sans colonne d'etats garde ses actions a droite */
.membre-id { display: flex; flex-direction: column; min-width: 0; }
.membre-etats { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; font-size: .85rem; }
.membre-actions { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.membre-actions select { width: auto; min-height: 2.2rem; }
.empreinte { font-family: var(--mono); font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.case-bloc { display: flex; margin: 1rem 0 0; align-items: flex-start; font-size: .9rem; }
@media (max-width: 640px) {
  .inviter-champs { grid-template-columns: 1fr; }
  .membres .membre { grid-template-columns: 1fr; }
  .membres .membre > .membre-actions { grid-column: auto; }
  .membre-actions { justify-content: flex-start; }
}

/* --- La securite du compte --------------------------------------------------------------------- */
.cartes { display: grid; gap: 1rem; max-width: 46rem; }
.carte-secu { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.carte-secu h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.codes-secours { list-style: none; margin: .6rem 0; padding: .8rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .4rem 1rem;
  border: 1px dashed var(--line2); border-radius: var(--rad-s); background: var(--bg); font-family: var(--mono); color: var(--ink); }
.lien-compte { color: var(--muted); text-decoration: none; }
.lien-compte:hover, .lien-compte.active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Qui peut l'ouvrir ----------------------------------------------------------------------- */
.detenteurs .detenteur { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--line); }
.detenteurs .detenteur:first-child { border-top: 0; }
.partage { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.sous-section { margin: 0 0 .3rem; font-family: var(--disp); font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: -.01em; }
@media (max-width: 640px) { .detenteurs .detenteur { flex-direction: column; align-items: flex-start; } }

/* --- Le journal ------------------------------------------------------------------------------------ */
.journal .ligne-journal { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .5rem 1rem; align-items: baseline; padding: .65rem 1rem; border-top: 1px solid var(--line); }
.journal .ligne-journal:first-child { border-top: 0; }
.journal .ligne-journal.notable { background: rgba(224, 163, 60, .07); }
.journal-quand { color: var(--muted); font-size: .82rem; font-family: var(--mono); }
.journal-texte { color: var(--ink2); overflow-wrap: anywhere; }
.journal-texte strong { color: var(--ink); }
.journal-code { display: block; margin-top: .15rem; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.journal-etats { display: flex; gap: .3rem; }
@media (max-width: 640px) { .journal .ligne-journal { grid-template-columns: 1fr; } .bandeau-haut nav { flex-wrap: wrap; } }
.fuite { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .5rem 0 0; }
.fuite p { flex-basis: 100%; margin: 0; font-weight: 600; }
.fuite-ok { color: var(--ok); }
.fuite-oui { color: var(--danger); }
.fuite-panne { color: var(--muted); }
.verif-chaine { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .75rem 0 1rem; }
.verif-chaine label { margin: 0; }
.verif-chaine select { width: auto; min-width: 12rem; }
code { overflow-wrap: anywhere; }
input[type=file] { color: var(--ink2); }
input[type=file]::file-selector-button { margin-right: .75rem; padding: .45rem .85rem; border: 1px solid var(--line2); border-radius: var(--rad-s); background: var(--surf2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }

/* --- Favoris (ADR-026) ------------------------------------------------------------------------------------------------ */
/* Une ligne de favori n'est pas un bouton : le titre est un lien, les actions sont a cote. */
.ligne-statique { cursor: default; }
/* La pastille est une LETTRE tiree de l'hote : aucune icone n'est demandee a un tiers. */
.pastille-lettre { font-weight: 700; font-size: 1rem; text-transform: uppercase; }
.lien-favori { color: inherit; text-decoration: none; }
.lien-favori:hover, .lien-favori:focus-visible { text-decoration: underline; color: #fff; }
.resume-import { margin-top: 1rem; }
/* Deux champs egaux, sans colonne vide a droite (le formulaire de favori) ; une colonne sur telephone, comme `.inviter-champs`. */
.inviter-champs-deux { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .inviter-champs-deux { grid-template-columns: 1fr; } }

/* La liste des entreprises : les actions (corriger, supprimer, confirmer) vont sur leur propre ligne, a toute largeur — dans la colonne de droite
   de `.membre` elles etaient ecrasees (« Supprimer » coupe). Le formulaire de correction aussi. */
.membres .membre > .membre-actions.pleine-largeur { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
.membres .membre > .inviter { grid-column: 1 / -1; margin-top: .5rem; }

/* L'en-tete sur un petit ecran : un nom d'entreprise long (le selecteur) + le nom de la personne + « Verrouiller » ne tiennent pas sur une ligne ;
   sans retour a la ligne, « Verrouiller » sortait de l'ecran a 372 px. Le selecteur se plafonne a la largeur disponible. */
@media (max-width: 640px) {
  .compte { flex-wrap: wrap; row-gap: .4rem; }
  .compte select { max-width: 100%; }
  .nom-utilisateur { white-space: normal; overflow-wrap: anywhere; }
}

/* La barre d'onglets : un onglet ne se coupe JAMAIS en deux lignes (« Mots de / passe » a 780 px, quand Favoris et Entreprises se sont ajoutes) ;
   c'est la barre qui passe a la ligne, onglet entier par onglet entier. */
.onglet { white-space: nowrap; }
.bandeau-haut nav { flex-wrap: wrap; min-width: 0; }

/* --- Le generateur (maquette : pageGenerateur) ------------------------------------------------------------------------------------------- */
.gen-sortie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 1rem 1.2rem; margin-bottom: 1rem;
  border: 1px solid var(--line2); border-radius: var(--rad); background: var(--surf2); }
.gen-sortie code { flex-grow: 1; min-width: 13rem; font-family: var(--mono); font-size: 1.15rem; word-break: break-all; color: var(--ink); }
.carte-gen { display: grid; gap: .9rem; max-width: 35rem; padding: 1.1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.reglage { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.reglage > label, .reglage > span:first-child { width: 9.8rem; flex-shrink: 0; font-size: .9rem; color: var(--ink2); }
.reglage input[type=range] { flex-grow: 1; min-width: 9rem; accent-color: var(--acc2); }
.reglage .mono { font-family: var(--mono); font-size: .8rem; color: var(--ink2); min-width: 2rem; text-align: right; }
.bascules { display: flex; gap: .45rem; flex-wrap: wrap; }
.bascules button { min-height: 2.25rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--ink2); font-size: .8rem; cursor: pointer; }
.bascules button[aria-pressed="true"] { border-color: var(--acc2); background: var(--surf2); color: var(--ink); }
.jauge { flex-grow: 1; min-width: 5.5rem; height: 7px; border-radius: 20px; background: var(--surf2); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 20px; background: var(--ok); }
.jauge-moyenne i { background: var(--acc2); }
.jauge-basse i { background: var(--danger); }
.avert { display: flex; gap: .8rem; padding: .95rem 1.1rem; border: 1px solid var(--line2); border-radius: var(--rad); background: var(--surf2); max-width: 44rem; }
.avert .pt { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-txt, var(--acc2)); margin-top: .45rem; }
.avert strong { display: block; margin-bottom: .3rem; }
#avert-fichier-clair { margin-top: 1.2rem; }
.avert p { margin: 0; font-size: .88rem; color: var(--ink2); }

/* Le segmenteur de familles (corbeille) : maquette `.segm`. */
.segm { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 11px; }
.segm button { min-height: 2.25rem; padding: 0 .8rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: .85rem; font-weight: 600; cursor: pointer; }
.segm button[aria-pressed="true"] { background: var(--surf2); }
.segm .n { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-left: .25rem; }

/* L'historique des versions (maquette : `.versions`, `.ver`). */
.versions { list-style: none; margin: 0 0 1rem; padding: .3rem 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.ver { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--surf2); flex-wrap: wrap; }
.ver:last-child { border-bottom: 0; }
.ver .pastel { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); margin-top: .5rem; flex-shrink: 0; }
.ver[data-cur="1"] .pastel { background: var(--ok); }
.ver .corps-ver { flex-grow: 1; min-width: 12rem; }
.ver .corps-ver b { display: block; font-size: .95rem; font-weight: 600; }
.ver .corps-ver span { display: block; font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.ver .ver-actions { display: flex; gap: .45rem; flex-wrap: wrap; }

/* Personnes : le parcours en trois temps, le detail d'une personne, le dialogue de role (maquette : pagePersonnes). */
.etapes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .8rem; color: var(--muted); }
.etapes li { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 20px; color: var(--ink2); }
.etapes li[aria-current="step"] { border-color: var(--acc2); color: var(--ink); font-weight: 600; }
.detail-personne, .dialogue-role { flex-basis: 100%; margin-top: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--bg); }
.dialogue-role h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.dialogue-role select { max-width: 24rem; margin-bottom: .8rem; }
.detail-personne .titre-section { margin-top: .4rem; }
.invitations-en-cours { margin: 1.2rem 0; }
.avert.depart { margin-top: 1rem; }

/* Donner des accès (maquette : pageAttribution). */
.attribution .deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.colonne { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); overflow: hidden; }
.colonne > header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .85rem 1.1rem .7rem; border-bottom: 1px solid var(--line); }
.colonne-outils { display: flex; flex-direction: column; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.colonne-outils input[type=search] { width: 100%; min-height: 2.6rem; padding: 0 .8rem; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); color: var(--ink); }
.colonne-contenu { padding: .5rem; display: grid; gap: .3rem; max-height: 22rem; overflow-y: auto; }
.filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtres button { min-height: 2rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--ink2); font-size: .75rem; cursor: pointer; }
.filtres button[aria-pressed="true"] { border-color: var(--acc2); color: var(--ink); }
.outils-selection { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.outils-selection .aide { margin: 0 0 0 auto; }
.coche { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.coche:hover { border-color: var(--line2); }
.coche[aria-pressed="true"] { border-color: var(--line2); background: var(--surf2); }
.coche .case { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--line2); flex-shrink: 0; display: grid; place-items: center; font-size: .7rem; color: #fff; }
.coche[aria-pressed="true"] .case { background: var(--acc2); border-color: var(--acc2); }
.coche .t { flex-grow: 1; min-width: 0; }
.coche .t b { display: block; font-size: .9rem; font-weight: 600; }
.coche .t span { display: block; font-size: .72rem; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.etiquette-liste { margin: .4rem .3rem 0; font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-txt, var(--acc2)); }
.resume { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.resume-ligne { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.resume-titre { min-width: 6rem; font-size: .88rem; font-weight: 600; color: var(--ink2); }
.jetons { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; min-width: 11rem; }
.jeton { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border: 1px solid var(--line); border-radius: 20px; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.jeton button { border: 0; background: transparent; color: var(--muted); padding: 0 0 0 .2rem; font-size: .9rem; line-height: 1; cursor: pointer; }
.phrase-resume { margin: 0; font-size: .92rem; line-height: 1.5; }
.barre-confirmation { position: sticky; bottom: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.1rem; margin-top: 1rem; border: 1px solid var(--line2); border-radius: var(--rad); background: var(--surf); }
.barre-confirmation .aide { flex-grow: 1; margin: 0; min-width: 14rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Les gestes a un clic de la liste, avec leur nom (maquette : `.b--s`). */
.bouton.petit { min-height: 2.25rem; padding: .3rem .75rem; font-size: .8rem; }
.ligne-actions .bouton.petit { white-space: nowrap; }

/* Liste : suggestions de recherche et raccourci (maquette : `.suggest`, `.kbd`). */
.recherche .kbd { font-family: var(--mono); font-size: .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: .15rem .45rem; flex-shrink: 0; }
.suggestions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.2rem 0 1rem; font-size: .8rem; color: var(--muted); }
.suggestions button { min-height: 2rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--ink2); font-family: var(--mono); font-size: .72rem; cursor: pointer; }
.suggestions button:hover { border-color: var(--acc2); color: var(--ink); }
.pied-liste { margin-top: .8rem; }

/* Favoris : « Enregistré comme » et ce qui est retiré de l'adresse (maquette : dlgFavori, `.apercu-url`, `.retire`). */
.apercu-adresse { margin-top: .4rem; }
.apercu-url { font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; padding: .5rem .7rem; margin: .2rem 0; border-radius: var(--rad-s); background: var(--bg); border: 1px solid var(--line); }
.retire { display: flex; gap: .55rem; align-items: baseline; font-size: .78rem; padding: .15rem 0; margin: 0; }
.retire code { font-family: var(--mono); color: var(--danger); text-decoration: line-through; flex-shrink: 0; }
.retire span { color: var(--muted); }

/* Le niveau plateforme (maquette : `.bandeau-plateforme`, `.stats`, `.stat`, `.tab`, `.etiq`). */
.bandeau-plateforme { display: flex; align-items: center; gap: .8rem; padding: .6rem 1.2rem; background: linear-gradient(90deg, rgba(123, 63, 228, .22), rgba(184, 67, 184, .14)); border-bottom: 1px solid var(--line2); font-size: .82rem; color: var(--ink2); flex-wrap: wrap; }
.bandeau-plateforme strong { font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--acc-txt, var(--acc2)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.stat { border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); padding: .95rem; }
.stat b { display: block; font-family: var(--disp); font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.stat--ok b { color: var(--ok); }
.enroule { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); padding: 1rem; margin-bottom: 1rem; }
.tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tab th { text-align: left; font-family: var(--mono); font-size: .65rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 0 .75rem .55rem; border-bottom: 1px solid var(--line); }
.tab td { padding: .7rem .75rem; border-bottom: 1px solid var(--surf2); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.etiq { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .65rem; font-weight: 500; padding: .25rem .6rem; border-radius: 20px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.etiq--ok { color: var(--ok); border-color: var(--ok); }
.etiq--dng { color: var(--danger); border-color: var(--danger); }

/* « Le départ de X » (maquette : pageDepart) — les six étapes. */
.etapes-depart { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .1rem; }
.etape-depart { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem; padding: .7rem 0; border-bottom: 1px solid var(--surf2); }
@media (max-width: 560px) { .etape-depart { grid-template-columns: 28px minmax(0, 1fr); align-items: start; } .etape-depart .etiq { grid-column: 2; justify-self: start; } }
.etape-depart:last-child { border-bottom: 0; }
.rond-etape { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surf2); color: var(--acc-txt, var(--acc2)); font-family: var(--disp); font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.etape-depart .t { min-width: 0; }
.etape-depart .t b { display: block; font-size: .92rem; font-weight: 600; }
.etape-depart .t span { display: block; font-size: .78rem; color: var(--muted); }
.etiq--att { color: var(--acc-txt, var(--acc2)); border-color: var(--acc2); }
@media (max-width: 560px) { .enroule { padding: .6rem; } .enroule .tab th, .enroule .tab td { padding-left: .3rem; padding-right: .3rem; } .enroule .tab .jauge { min-width: 3rem; } .enroule .tab .bouton.petit { padding: 0 .55rem; } }
.grille-dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; margin: 0 0 1rem; }
.dossier-carte { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); color: var(--ink); text-align: left; cursor: pointer; }
.dossier-carte:hover { border-color: var(--acc2); }
.dossier-carte span { font-size: .8rem; color: var(--muted); }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.2rem; align-items: start; margin: 0 0 1rem; }
.deux > .cartes { max-width: none; }
.bandeau-suspension { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.2rem; background: rgba(214, 69, 69, .16); border-bottom: 1px solid var(--danger); font-size: .88rem; color: var(--ink); flex-wrap: wrap; }
.heure-journal { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .1rem; }

/* =============================================================================
   CONFORMITE A LA MAQUETTE — mesuree le 2026-10-06, style calcule contre style calcule.

   La maquette (`index.html`) est la SOURCE DE VERITE de l'interface. Ce bloc, charge en dernier, aligne la console sur ses valeurs MESUREES (getComputedStyle des memes
   composants) : couleurs, tailles en px, graisses, rayons, hauteurs. Les anciennes regles, en rem, donnaient 14,08 px la ou la maquette pose 14 px ; ce n'est pas un detail,
   c'est ce qu'une mesure attrape et qu'un oeil ne voit pas.

   UN ECART ASSUME : la maquette cache le rail a 860 px. On le garde visible (en bandeau qui se replie, regle a 900 px de la maquette) : sans lui, un telephone n'atteindrait
   plus ni les familles, ni les favoris, ni la supervision. Le fonctionnement prime sur l'interface quand elles se contredisent.
   ============================================================================= */
:root {
  --acc-txt: #c55fc5;      /* maquette : 5,0:1 — #7b3fe4 ne rend que 3,2:1 en texte */
  --danger-txt: #ef7f8e;
  --ok-doux: #122a1d;
}
body { color: var(--ink); line-height: 1.55; }
h1, h2, h3 { letter-spacing: -.025em; line-height: 1.55; }
h1 { font-size: 22px; font-weight: 700; }
.eyebrow { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--acc-txt); }
a { color: var(--acc-txt); }
:focus-visible { outline-color: var(--acc-txt); outline-offset: 2px; }

/* --- la coque : barre, rail, page (maquette .barre, .rail, .corps, .page) ----------------------------------------------------------- */
.coque { min-height: 100%; display: flex; flex-direction: column; }
.barre { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 13px; padding: 11px 18px; background: var(--bg); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bandeau-haut { position: sticky; }
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); font-family: var(--disp); font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0; }
.nom { font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.onglets { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; }
.onglet-haut { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.onglet-haut:hover { color: var(--ink); }
.onglet-haut[aria-current="page"] { background: var(--surf2); color: var(--ink); }
.espace { flex-grow: 1; }
.etat-ouvert { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); }
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--surf2); border: 1px solid var(--line2); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink2); flex-shrink: 0; text-decoration: none; }
.avatar.active, .avatar:hover { color: var(--ink); border-color: var(--acc2); text-decoration: none; }
.bascule { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0; }
.bascule select { min-height: 38px; width: auto; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line2); background: var(--surf); color: var(--ink); font-size: 13px; font-weight: 600; }
.organisation { font-size: 13px; color: var(--ink2); white-space: nowrap; }

.corps { flex-grow: 1; display: flex; align-items: stretch; min-height: 0; }
.rail { width: 236px; flex-shrink: 0; border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.rail .eyebrow { padding: 0 12px; margin: 8px 0 7px; }
.rlien, .onglet.rlien { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--rad-s); background: transparent; color: var(--ink2); font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-align: left; text-decoration: none; white-space: normal; }
.rlien::after, .onglet.rlien::after { display: none; }
.rlien:hover, .onglet.rlien:hover { background: var(--surf); color: var(--ink2); }
.rlien[aria-current="page"], .onglet.rlien.active { background: var(--surf2); color: var(--ink); font-weight: 600; }
.rlien .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.rlien .badge { font-family: var(--mono); font-size: 11px; font-weight: 600; color: #fff; background: var(--acc2); border-radius: 20px; padding: 2px 8px; }
.sep { height: 1px; background: var(--line); margin: 12px 12px; }
.page, .contenu { flex-grow: 1; min-width: 0; width: auto; max-width: none; margin: 0; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.contenu > * { max-width: 100%; }
@media (max-width: 900px) {
  .corps { flex-direction: column; }
  .rail { width: auto; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 12px; }
  .rail .eyebrow, .rail .sep { display: none; }
  .rlien, .onglet.rlien { width: auto; padding: 8px 12px; border: 1px solid var(--line); }
}

/* --- boutons (maquette .b) ---------------------------------------------------------------------------------------------------------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 17px; border-radius: var(--rad-s); border: 1px solid var(--line2); background: transparent; color: var(--ink2);
  font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: normal;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.bouton:hover:not(:disabled) { color: var(--ink); border-color: var(--acc2); background: transparent; filter: none; }
.bouton:not(.bouton-discret):not(.bouton-danger):not(.bouton-plein) { background: linear-gradient(90deg, var(--acc), var(--acc2)); border-color: transparent; color: #fff; }
.bouton:not(.bouton-discret):not(.bouton-danger):hover:not(:disabled) { color: #fff; filter: brightness(1.12); border-color: transparent; }
.bouton-discret { background: transparent; color: var(--ink2); border-color: var(--line2); }
.bouton-discret:hover:not(:disabled) { background: transparent; color: var(--ink); border-color: var(--acc2); }
.bouton-danger, .bouton-discret.bouton-danger { background: transparent; color: var(--danger-txt); border-color: var(--danger); }
.bouton-danger:hover:not(:disabled), .bouton-discret.bouton-danger:hover:not(:disabled) { color: #fff; background: var(--danger); border-color: var(--danger); }
.bouton.petit { min-height: 36px; padding: 0 12px; font-size: 13px; }
.bouton:disabled, .bouton[disabled] { opacity: .38; cursor: not-allowed; }

/* --- champs (maquette .form) -------------------------------------------------------------------------------------------------------- */
label { font-size: 13px; font-weight: 600; color: var(--ink2); margin: 0 0 6px; }
input, select, textarea { min-height: 44px; padding: 10px 13px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; line-height: normal; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--acc2); }
input:hover, select:hover, textarea:hover { border-color: var(--line2); }
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; }
textarea { min-height: 82px; resize: vertical; }

/* --- cartes, avertissements, tuiles, tableaux, etiquettes (maquette .carte .avert .stat .tab .etiq) ------------------------------------- */
.carte-secu, .carte { border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); padding: 18px; }
.avert { display: flex; gap: 13px; padding: 15px 17px; border: 1px solid var(--line2); border-radius: var(--rad); background: var(--surf2); flex-wrap: wrap; max-width: none; }
.avert .pt { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-txt); margin-top: 7px; }
.avert strong { display: block; font-size: 14.5px; margin-bottom: 5px; }
.avert p { margin: 0; font-size: 13.5px; color: var(--ink2); line-height: 1.55; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); padding: 15px; }
.stat b { display: block; font-family: var(--disp); font-size: 27px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.stat--dng b { color: var(--danger-txt); }
.stat--ok b { color: var(--ok); }
.enroule { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); padding: 16px; }
.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 0 12px 9px; border-bottom: 1px solid var(--line); }
.tab td { padding: 11px 12px; border-bottom: 1px solid var(--surf2); vertical-align: middle; color: var(--ink); }
.etiq { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.etiq--ok { color: var(--ok); border-color: var(--ok); }
.etiq--att { color: var(--acc-txt); border-color: var(--acc2); }
.etiq--dng { color: var(--danger-txt); border-color: var(--danger); }
.segm { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; flex-shrink: 0; width: fit-content; }
.segm button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; }
.segm button[aria-pressed="true"] { background: var(--surf2); }
.entete-page { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --- la liste plate (maquette .liste .el .chip) et la recherche (maquette .recherche .kbd .suggest) ----------------------------------------- */
.chip { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; min-width: 46px; text-align: center; flex-shrink: 0; }
.ligne-type.chip { display: inline-block; width: auto; height: auto; background: transparent; place-items: initial; }
.liste { border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surf); }
.liste > .ligne { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-top: 0; border-bottom: 1px solid var(--surf2); background: var(--surf); flex-wrap: wrap; }
.liste > .ligne:nth-child(even) { background: var(--bg); }
.liste > .ligne:last-child { border-bottom: 0; }
.liste > .ligne:hover { background: var(--surf2); }
.liste > .ligne > .ligne-principale { padding: 0; gap: 13px; min-width: 172px; }
.ligne-nom { font-size: 15px; font-weight: 600; color: var(--ink); }
.ligne-sous { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ligne-actions { padding-right: 0; gap: 7px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.recherche { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 15px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surf); margin-bottom: 0; }
.recherche .icone { position: static; color: var(--muted); }
.recherche input { flex-grow: 1; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 15px; outline: none; }
.recherche input::placeholder { color: var(--muted); }
.recherche .kbd { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; flex-shrink: 0; }
.suggestions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--muted); }
.suggestions button { min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--ink2); font-family: var(--mono); font-size: 11.5px; }
.suggestions button:hover { border-color: var(--acc2); color: var(--ink); }
.vide { padding: 36px 20px; text-align: center; color: var(--muted); font-size: 14.5px; background: var(--surf); }

/* --- creation et modification : le formulaire est UNE carte, sans cadres imbriques (maquette .carte > .form) --------------------------------- */
.segm--types { flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.formulaire { display: grid; gap: 14px; max-width: none; padding: 18px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); }
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.formulaire legend { display: block; padding: 0; margin: 0 0 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--acc-txt); }
.formulaire .champ { margin: 0; }
.formulaire .champ label { margin: 0 0 6px; }
.type-courant { display: none; }
.deux-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; }

/* --- Employes : liste a gauche, detail a droite (maquette .deux 258px + .gens) ------------------------------------------------------------ */
.deux--personnes { grid-template-columns: 258px minmax(0, 1fr); align-items: start; }
.gens-carte { padding: 10px; }
.gens { display: grid; gap: 4px; }
.gens button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px; padding: 8px 11px; border: 0; border-radius: var(--rad-s); background: transparent; color: inherit; text-align: left; }
.gens button:hover, .gens button[aria-current="true"] { background: var(--surf2); }
.gens .av { width: 32px; height: 32px; border-radius: 50%; background: var(--surf2); border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink2); flex-shrink: 0; }
.gens-texte { min-width: 0; }
.gens b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gens-texte span { display: block; font-size: 12px; color: var(--muted); }
.personne-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.personne-entete { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.avatar--grand { width: 50px; height: 50px; font-size: 16px; }
.personne-id { flex-grow: 1; min-width: 150px; }
.personne-id h2 { font-size: 22px; font-weight: 700; }
.personne-id .aide { margin: 3px 0 0; font-size: 13.5px; }
.personne-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .deux--personnes { grid-template-columns: minmax(0, 1fr); } }

.deux--equipes { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); align-items: start; }
.qui { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--surf2); flex-wrap: wrap; }
.qui:last-child { border-bottom: 0; }
.qui .av { width: 30px; height: 30px; border-radius: 50%; background: var(--surf2); border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink2); flex-shrink: 0; }
.qui .nm { flex-grow: 1; min-width: 76px; font-size: 14px; }
.lien-texte { color: var(--acc-txt); text-decoration: underline; text-underline-offset: 3px; }

/* --- la fiche (maquette .fiche : le contenu a gauche, l'acces et l'historique a droite) --------------------------------------------------- */
.fiche { max-width: none; }
.fiche-titre { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.fiche-titre h1 { font-size: 25px; }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 20px; align-items: start; }
.fiche-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fiche-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .fiche-grille { grid-template-columns: minmax(0, 1fr); } }

.segm .n { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.deplacer { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
.deplacer label { margin: 0; }
.deplacer select { width: auto; min-width: 12rem; }

/* --- « Mot de passe maitre oublie » : trois chemins (maquette .roles .role) ------------------------------------------------------------------ */
.carte-entree--large { max-width: 960px; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin: 26px 0; }
.role { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); padding: 20px; color: inherit; transition: border-color .18s var(--ease), background .18s var(--ease); }
button.role:hover, button.role:focus-visible { border-color: var(--acc2); background: var(--surf2); }
.role h3 { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.role p { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.role ul { margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.role li { font-size: 13px; color: var(--ink2); padding-left: 15px; position: relative; }
.role li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc-txt); }
.role--indisponible { opacity: .72; cursor: default; }
.cle-neuve { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; word-break: break-all; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--rad-s); background: var(--bg); color: var(--ink); }

.tab td .actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* Import : « D'où vient le fichier ? » — une grille de sources (maquette pageImport). */
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.source { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 12px 14px; background: var(--panel, #1b1b22); color: inherit; border: 1px solid var(--bord, #34343f); border-radius: 12px; cursor: pointer; font: inherit; }
.source span { font-size: 12px; opacity: .7; }
.source:hover { border-color: var(--acc, #a64ca6); }
.source[aria-pressed="true"] { border-color: var(--acc, #a64ca6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc, #a64ca6) 35%, transparent); }
.source:focus-visible { outline: 2px solid var(--acc, #a64ca6); outline-offset: 2px; }

/* Mon compte : « Ouvrir le coffre » = UNE carte a lignes (maquette pageCompte), pas quatre cartes empilees. */
#mon-compte > .cartes { gap: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); align-content: start; }
#mon-compte > .cartes .eyebrow { margin-bottom: 10px; }
#mon-compte > .cartes .carte-secu { padding: 12px 0; border: 0; border-bottom: 1px solid var(--surf2); border-radius: 0; background: transparent; }
#mon-compte > .cartes .carte-secu:last-child { border-bottom: 0; padding-bottom: 0; }
#mon-compte > .cartes .carte-secu h2 { font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink); }

/* Generateur : valeurs exactes de la maquette (px, pas rem) — mesure getComputedStyle du 2026-10-07. */
.gen-sortie { padding: 17px 19px; gap: 13px; }
.gen-sortie code { font-size: 18px; min-width: 210px; }
.carte-gen { padding: 18px; display: grid; gap: 14px; max-width: 560px; }
.carte-gen .reglage { gap: 14px; }
.carte-gen .reglage > span:first-child, .carte-gen .reglage > label { width: 158px; flex-shrink: 0; font-size: 13.5px; font-weight: 400; color: var(--ink2); margin: 0; }
.carte-gen .bascules { gap: 7px; }
.carte-gen .bascules button { padding: 0 12px; font-size: 12.5px; }

/* Versions : valeurs exactes de la maquette (pageVersions). */
.versions { padding: 4px 18px; margin: 0; }
.ver { gap: 14px; padding: 13px 0; }
.ver .pastel { margin-top: 7px; }
.ver .corps-ver { min-width: 198px; }
.ver .corps-ver b { font-size: 14px; }
.ver .corps-ver span { font-size: 12.5px; margin-top: 2px; }
.ver .ver-actions { gap: 7px; }

/* Inviter quelqu'un (maquette pageInviter) : un formulaire en carte, 640 px au plus. */
.formulaire-invitation { display: grid; gap: 14px; max-width: 640px; padding: 18px; }
.formulaire-invitation label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }

/* Entreprises clientes : une carte par entreprise (maquette pageEntreprises, .cartes / .ent). */
.liste-entreprises { list-style: none; margin: 0; padding: 0; max-width: none; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 14px; align-items: start; }
.liste-entreprises > .ent { display: grid; gap: 8px; padding: 17px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surf); transition: border-color .16s var(--ease); }
.liste-entreprises > .ent:hover { border-color: var(--acc2); }
.liste-entreprises .ent .ligne-nom { font-family: var(--disp); font-size: 16.5px; font-weight: 700; display: block; margin-bottom: 3px; }
.liste-entreprises .ent .ligne-sous, .liste-entreprises .ent .secondaire { font-size: 12.5px; color: var(--muted); }
.liste-entreprises .membre-actions { justify-content: flex-start; flex-wrap: wrap; }

/* « Votre compte a bien été enregistré » (maquette pageEnvoye). */
.rendu { display: flex; align-items: flex-start; gap: 11px; padding: 14px 17px; border: 1px solid var(--ok); border-radius: var(--rad); background: var(--ok-doux); flex-wrap: wrap; }
.rendu .point { margin-top: 7px; }
.rendu > div { flex-grow: 1; min-width: 220px; }
.rendu .titre-rendu { margin: 0 0 6px; font-family: var(--body); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.rendu p { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.6; }

/* Demande : les deux encadres « Ce qui se passe » / « Si vous refusez » (maquette pageDemandes). */
#apres-decision { margin-top: 6px; }
#apres-decision .carte p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
#apres-decision .carte strong { color: var(--ink); }

/* La raison d'une modification, sous la ligne de sa version (historique). */
.ver .corps-ver .note-version { font-style: italic; color: var(--ink2); }

/* --- Le telephone, 2026-10-08 : l'en-tete tient sur UNE ligne, la banniere operateur se resume, le rail defile, une ligne = une rangee d'actions ---------------- */
@media (max-width: 640px) {
  .bandeau-haut { flex-wrap: nowrap; gap: .5rem; padding: .5rem .75rem; }
  .bandeau-haut .onglets, .bandeau-haut .organisation, .bandeau-haut .bascule { display: none; }   /* les niveaux se retrouvent dans le rail juste dessous */
  .bandeau-haut .etat-ouvert { font-size: 0; }                                                        /* le point vert reste, le mot s'efface */
  .bandeau-haut .bouton-discret { font-size: 0; gap: 0; padding: 0 .7rem; }                          /* « Refermer » : l'icone seule (le nom reste lisible par les lecteurs d'ecran) */
  .bandeau-haut .nom-utilisateur, .bandeau-haut .avatar { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; }
  .bandeau-plateforme span { display: none; }                                                         /* la banniere garde son mot « Plateforme » */
  .bandeau-plateforme { padding: .3rem .75rem; }
  .rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rail .rlien, .rail .onglet { white-space: nowrap; flex: 0 0 auto; }
  .ligne-actions { flex-wrap: wrap; justify-content: flex-start; gap: .4rem; }
  .ligne-actions .bouton.petit { padding: 0 .6rem; }
  .ligne-actions .icone-bouton { margin-left: auto; }
}

/* --- La palette Ctrl K (2026-10-08) ------------------------------------------------------------------------------------------------------------- */
.palette-voile { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: rgba(6, 4, 10, .72); }
.palette { width: 100%; max-width: 560px; border: 1px solid var(--line2); border-radius: var(--rad); background: var(--surf); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden; }
.palette input { width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg); color: var(--ink); font: 500 16px var(--body); outline: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.palette-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 600 14px var(--body); text-align: left; cursor: pointer; }
.palette-ligne.choisi { background: var(--surf2); box-shadow: inset 0 0 0 1px var(--acc2); }
.palette-detail { color: var(--muted); font: 12px var(--mono); text-align: right; overflow-wrap: anywhere; }
.palette-vide { padding: 14px; color: var(--muted); text-align: center; }
.palette-aide { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font: 11.5px var(--mono); }

/* Le choix du type d'element (`.segm--types`) est un SEGMENTEUR (maquette), pas la liste pleine largeur des anciens `.choix` : sans cette regle les onze types
   s'empilaient sur 440 px avant le formulaire (constate sur capture, 2026-10-08). */
.segm .choix { width: auto; padding: 0 13px; text-align: center; background: transparent; border: 0; border-radius: 8px; }
.segm .choix:hover { background: var(--surf2); border-color: transparent; }
.segm .choix[aria-pressed="true"] { background: var(--surf2); }

/* --- Les groupes de pages « Acces » et « Donnees » : une barre d'onglets au-dessus de la page (2026-10-09) ---------------------------------------------------- */
.onglets-page { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; width: fit-content; max-width: 100%; }
.onglet-page { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; color: var(--ink2); font-size: 13px; font-weight: 600; text-decoration: none; }
.onglet-page:hover { color: var(--ink); }
.onglet-page.active { background: var(--surf2); color: var(--ink); }
@media (max-width: 640px) { .onglets-page { overflow-x: auto; flex-wrap: nowrap; } .onglet-page { white-space: nowrap; flex: 0 0 auto; } }

/* Le rappel « double verification » d'un chef ou d'un administrateur (2026-10-09). */
.bandeau-mfa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 18px; border-bottom: 1px solid var(--warn, #7a5b1c); background: rgba(250, 204, 21, .08); color: var(--ink2); font-size: 13.5px; }
.bandeau-mfa strong { color: var(--ink); }
.bandeau-mfa a { margin-left: auto; color: var(--acc2-txt); font-weight: 600; }

/* --- LE THEME CLAIR (2026-10-09) : `:root[data-theme="light"]` ; le sombre reste le defaut, le clair se CHOISIT (Mon compte, Ctrl K). Les jetons viennent de `packages/design`
   (`JETONS_CLAIRS`, mesures de contraste rejouees par `jetons.test.ts`) ; le reste de ce bloc reprend ce que le sombre ecrivait en dur (texte blanc au survol, bandeaux, voiles). ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1f8; --surf: #ffffff; --surf2: #ece7f4; --line: #d9d0e6; --line2: #c2b6d6; --ink: #17101f; --ink2: #4a3f5f; --muted: #655b7a;
  --acc2-txt: #9b2a9b; --danger: #c0273f; --danger-txt: #b3213a; --danger-f: rgba(192, 39, 63, .10); --ok: #146b46; --ok-doux: #e3f5ec; --alerte-f: rgba(192, 39, 63, .08); --attention: #8a5600;
  --acc-txt: #6a2fd0;
}
:root[data-theme="light"] ::selection { background: rgba(123, 63, 228, .25); color: var(--ink); }
:root[data-theme="light"] .barre { background: rgba(244, 241, 248, .92); }
:root[data-theme="light"] .onglet:hover, :root[data-theme="light"] .onglet.active, :root[data-theme="light"] .famille:hover, :root[data-theme="light"] .lien-compte:hover,
:root[data-theme="light"] .lien-compte.active, :root[data-theme="light"] .lien-favori:hover, :root[data-theme="light"] .lien-favori:focus-visible, :root[data-theme="light"] .icone-bouton:hover { color: var(--ink); }
:root[data-theme="light"] .famille.active { color: #fff; }
:root[data-theme="light"] .bandeau-erreur { color: #7a1426; }
:root[data-theme="light"] .bandeau-alerte { color: #5c3c00; background: rgba(224, 163, 60, .16); }
:root[data-theme="light"] .bandeau-ok { color: #0c4a2f; }
:root[data-theme="light"] .pastille-alerte { color: var(--attention); }
:root[data-theme="light"] .robustesse-moyen .robustesse-barre > span { background: var(--attention); }
:root[data-theme="light"] .bouton-discret.bouton-danger { background: var(--surf); }
:root[data-theme="light"] .palette-voile { background: rgba(23, 16, 31, .45); }
:root[data-theme="light"] .palette, :root[data-theme="light"] .carte, :root[data-theme="light"] .modale { box-shadow: 0 10px 30px rgba(23, 16, 31, .14); }
:root[data-theme="light"] .bandeau-mfa { background: rgba(224, 163, 60, .16); border-bottom-color: #c98a1f; }
:root[data-theme="light"] .bandeau-plateforme { background: linear-gradient(90deg, rgba(123, 63, 228, .12), rgba(184, 67, 184, .10)); }
:root[data-theme="light"] .bandeau-suspension { background: rgba(192, 39, 63, .10); }
:root[data-theme="light"] .journal .ligne-journal.notable { background: rgba(224, 163, 60, .12); }
:root[data-theme="light"] .beneficiaire.coche { background: rgba(123, 63, 228, .08); }
:root[data-theme="light"] .source { background: var(--surf); }
/* L'apparence : deux boutons dans Mon compte. */
.choix-theme { display: flex; gap: 6px; flex-wrap: wrap; }
.choix-theme button[aria-pressed="true"] { border-color: var(--acc2); background: var(--surf2); color: var(--ink); }
.apparence { display: grid; gap: 6px; margin-top: 14px; }

/* Le formulaire « Partager » de la fiche vit dans la colonne ETROITE de droite (318 px) : une colonne, chaque controle sur toute la largeur. La grille `.inviter-champs` (trois colonnes) est faite pour la page
   d'invitation ; ici elle faisait deborder « Partager » de la carte et ajoutait un defilement horizontal a la page (constate sur la fiche d'un secret). */
.partage .inviter-champs { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.partage .inviter-champs select, .partage .inviter-champs .bouton { width: 100%; }
.partage .inviter-champs label { margin-top: .2rem; }

/* Le theme avant la connexion (connexion, invitation, recuperation : pas de coque, donc un bouton a soi). */
.bouton-theme-flottant { position: fixed; top: 14px; right: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surf2); color: var(--ink2); font: 500 13px var(--body); cursor: pointer; }
.bouton-theme-flottant:hover { color: var(--ink); border-color: var(--acc-txt); }

:root[data-theme="light"] .carte-entree { box-shadow: 0 18px 44px rgba(60, 40, 100, .14); }

/* --- Audit visuel (2026-10-09) : ce que les mesures ont montre a 375 px --- */
.detenteurs .membre-id { min-width: 0; max-width: 100%; }
.detenteurs .ligne-nom, .detenteurs .ligne-sous { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .detenteurs .detenteur { align-items: stretch; }
  .detenteurs .membre-actions { display: flex; align-items: center; gap: .5rem; }
  .carte-entree .lien { min-height: 44px; }
  a.marque { display: inline-flex; align-items: center; min-height: 40px; }
  .lien-favori { display: inline-block; padding: .5rem 0; }
}

#export-favoris .bouton { margin-top: .7rem; }
#detection-extension .aide { margin: .3rem 0 .6rem; }

/* --- Audit visuel (suite) : un segmenteur de la largeur de la recherche qui le suit ; un rail qui defile montre qu'il defile --- */
.segm-plein { width: 100%; }
.segm-plein button { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) {
  .rail { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 28px; }
}

/* --- Ecrans d'entree : le bouton de theme ne recouvre plus la carte (mobile) ; des libelles qui respirent --- */
.bouton-theme-flottant { position: absolute; }
@media (max-width: 640px) { .entree { padding-top: 4.2rem; } }
.carte-entree label:not(:first-of-type) { margin-top: .9rem; }
.segm-plein button { white-space: nowrap; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }

/* --- Confirmation en deux temps (toute suppression) : « Confirmer / Annuler » a la place du bouton --- */
.confirmation-ligne { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.confirmation-question { font-size: .85rem; font-weight: 600; color: var(--ink2); }

/* Cles de securite enregistrees (Mon compte) */
.liste-cles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.liste-cles li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--bordure, rgba(128,128,128,.3)); border-radius: 12px; }
.liste-cles li > span:first-child { display: grid; gap: 4px; min-width: 0; flex: 1 1 14rem; }
.liste-cles .secondaire { font-size: 13px; }

/* --- La page des doublons ----------------------------------------------------------------------------------------------------------------- */
.doublons { display: grid; gap: 14px; }
.doublons-resume { display: flex; flex-wrap: wrap; gap: 8px; }
.onglet-doublons { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: 999px; background: var(--surf); color: var(--ink2); font: inherit; cursor: pointer; }
.onglet-doublons.actif { border-color: var(--acc-txt); background: var(--surf2); color: var(--ink); }
.onglet-doublons .badge-neutre { background: var(--surf2); color: var(--ink2); border: 1px solid var(--line2); }
.doublons-auto { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; }
.doublons-auto > div { flex: 1 1 22rem; min-width: 0; }
.doublons-auto details { margin-top: 8px; }
.doublons-auto summary { cursor: pointer; color: var(--acc-txt); }
.liste-simple { margin: 8px 0 0; padding-left: 18px; max-height: 14rem; overflow: auto; display: grid; gap: 4px; }
.vide-doublons { padding: 18px; border: 1px dashed var(--line2); border-radius: 14px; }
.groupes-doublons { display: grid; gap: 12px; }
.groupe-doublon { padding: 16px; display: grid; gap: 10px; }
.groupe-doublon.groupe-exact { border-left: 3px solid var(--danger-txt); }
.groupe-doublon.groupe-probable { border-left: 3px solid var(--acc-txt); }
.groupe-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.groupe-entete h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; min-width: 0; }
.membres-doublon { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.membre-doublon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.membre-doublon.garde { border-color: var(--acc-txt); background: var(--surf2); }
.choix-garder { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; }
.choix-garder input { width: 18px; height: 18px; accent-color: var(--acc); }
.membre-texte { display: grid; gap: 4px; flex: 1 1 14rem; min-width: 0; }
.membre-texte .secondaire { margin-left: 0; overflow-wrap: anywhere; }
.membre-texte strong { overflow-wrap: anywhere; }
.membre-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.membre-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 640px) { .membre-actions { margin-left: 0; width: 100%; } .doublons-auto > button, .doublons-auto > span { width: 100%; } }

/* Le titre ne se casse pas lettre par lettre quand le sous-titre est long : il passe a la ligne, a pleine largeur. */
.doublons .entete-page { flex-wrap: wrap; row-gap: 4px; }
.doublons .entete-page h1 { flex: 0 0 auto; }
.doublons .entete-page .aide { flex: 1 1 14rem; min-width: 0; }