/* Feuille de style de la porte d'entrée, aux couleurs bleuebuzz et dans la forme d'Axonaut
   (D:\ia\bleuebuzz\design-system-axonaut.md). Polices et styles de champs, de boutons et de
   messages repris de gestion.bleuebuzz.net, puis le cadre connecté (cadre-axonaut.md), les
   tuiles de l'accueil et la grille des univers. Aucun style en ligne : la CSP les refuse. */

/* --- Polices : Montserrat (titres, écran de connexion) et Open Sans (corps des pages) --------- */

@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/open-sans-latin-ext-400-normal.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: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/open-sans-latin-400-normal.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: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/open-sans-latin-ext-600-normal.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: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/open-sans-latin-600-normal.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: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/open-sans-latin-ext-700-normal.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: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/open-sans-latin-700-normal.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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/montserrat-latin-ext-500-normal.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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/montserrat-latin-500-normal.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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/montserrat-latin-ext-600-normal.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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/montserrat-latin-600-normal.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: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/montserrat-latin-ext-700-normal.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: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/montserrat-latin-700-normal.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;
}

/* --- Jetons ------------------------------------------------------------------------------------ */

:root {
  --color-navy: #263E90;
  --color-navy-hover: #1E3274;
  --color-navy-soft: #e8ebf8;
  /* Le cadre (barre latérale et bandeau), dessiné comme celui d'Axonaut : dégradés de la couleur
     +20 à la couleur −20. Le pinceau remplace ces trois valeurs à l'exécution (static/cadre.js). */
  --color-shell: #263E90;
  --color-shell-light: #3A52A4;
  --color-shell-dark: #122A7C;
  --color-cyan: #46B6F2;
  --color-page: #f5f5f5;
  --color-line: #e3e9f3;
  --color-thead: #f5f9fe;
  --color-ink: #333333;
  --color-muted: #707070;
  --color-link: #0079B3;
  --color-field: #d3d3d3;
  --color-field-focus: #66afe9;
  --color-rule: #e5e5e5;
  /* Messages : fond et texte (aussi le filet de gauche). */
  --color-alert-success-soft: #dff0d8;
  --color-alert-success: #3c763d;
  --color-alert-error-soft: #f2dede;
  --color-alert-error: #a94442;

  --font-shell: "Montserrat", "Open Sans", system-ui, sans-serif;
  --font-title: "Montserrat", system-ui, sans-serif;
  --font-sans: "Open Sans", system-ui, sans-serif;
  --radius-card: 10px;
  --radius-field: 8px;
  --radius-pill: 22px;
  --shadow-card: 0 20px 35px rgba(227, 220, 218, 0.62);
  --shadow-menu: 0 6px 12px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.43;
}

/* Titre de page comme Axonaut : Montserrat 22 px semi-gras, #333, interligne 24,2 px. */
h1 {
  margin: 0 0 18px;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  line-height: 24.2px;
}

a { color: var(--color-link); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }

/* --- Boutons d'Axonaut aux couleurs bleuebuzz : pilules de 43 px -------------------------------- */

.bouton {
  display: inline-flex;
  height: 43px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0 15px;
  background: var(--color-navy);
  color: #fff;
  font: 600 14px var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s;
}
.bouton:hover { background: var(--color-navy-hover); }
.bouton:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.bouton:disabled { opacity: 0.5; pointer-events: none; }
.bouton-plein { width: 100%; }
/* Secondaire (design system, colonne bleuebuzz) : fond blanc, texte #0079B3, bordure #C9D3EF. */
.bouton-secondaire { border-color: #C9D3EF; background: #fff; color: var(--color-link); }
.bouton-secondaire:hover { background: var(--color-navy-soft); color: var(--color-navy); }

/* --- Champs : exactement le champ « Rechercher dans le tableau » d'Axonaut -------------------------
   34 px, bordure #d3d3d3, coins à 8 px, texte de 14 px #333, texte indicatif #d3d3d3 ; au focus,
   bordure bleue et halo de 8 px. */

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--color-field);
  border-radius: var(--radius-field);
  padding: 7px 10px;
  background: #fff;
  color: var(--color-ink);
  font: 14px var(--font-sans);
}
input:focus {
  border-color: var(--color-field-focus);
  outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
::placeholder { color: var(--color-field); opacity: 1; }

.libelle { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 500; }
.champ { position: relative; margin-bottom: 14px; }

/* Œil du champ de mot de passe : un bouton posé sur la droite du champ. */
.champ-secret input { padding-right: 36px; }
.oeil {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 32px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}
.oeil:hover { color: var(--color-ink); }
.oeil:focus-visible { outline: 2px solid var(--color-link); outline-offset: -2px; border-radius: 8px; }
.oeil svg { width: 18px; height: 18px; }
.oeil .oeil-barre { display: none; }
.oeil[data-visible] .oeil-ouvert { display: none; }
.oeil[data-visible] .oeil-barre { display: block; }

/* --- Messages d'Axonaut : fond teinté, filet de 7 px à gauche ---------------------------------- */

.message {
  margin: 0 0 14px;
  border-left: 7px solid var(--color-alert-success);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--color-alert-success-soft);
  color: var(--color-alert-success);
  font-size: 13px;
}
.message-erreur {
  border-left-color: var(--color-alert-error);
  background: var(--color-alert-error-soft);
  color: var(--color-alert-error);
}

/* Bouton de Microsoft selon sa charte (thème clair) : pas une de nos pilules. */
.bouton-microsoft {
  display: flex;
  width: 100%;
  height: 41px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #8C8C8C;
  padding: 0 12px;
  background: #fff;
  color: #5E5E5E;
  font: 600 14px "Segoe UI", sans-serif;
  text-decoration: none;
}
.bouton-microsoft:hover { background: #F3F3F3; }
.bouton-microsoft:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.bouton-microsoft svg { flex: none; }

/* --- Écrans hors connexion (maquette A) : bleu et logo à gauche, formulaire à droite ---------- */

/* Tout l'écran en Montserrat, comme la maquette ; les champs et boutons suivent `--font-sans`. */
.connexion-page { font-family: var(--font-title); --font-sans: var(--font-title); }

.connexion { display: flex; min-height: 100vh; min-height: 100dvh; }

.connexion-marque {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  background: linear-gradient(160deg, #2d4aa8 0%, #263E90 55%, #1E3274 100%);
}
.connexion-marque img { width: 260px; height: auto; }
.connexion-marque p {
  margin: 0;
  color: #fff;
  opacity: 0.85;
  font-size: 13px;
  text-align: center;
}

.connexion-formulaire {
  flex: 1;
  min-width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #fff;
}
.connexion-carte { width: 320px; padding: 30px 28px; }

.oublie {
  display: block;
  margin: -6px 0 16px;
  font-size: 12px;
  text-align: right;
  text-decoration: none;
}
.oublie:hover { text-decoration: underline; }

.intro { margin: 0 0 16px; font-size: 13px; }
.aide { margin: -8px 0 14px; color: var(--color-muted); font-size: 12px; }
.lien-retour { display: block; margin-top: 16px; font-size: 13px; text-align: center; }

.separateur {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--color-muted);
  font-size: 12px;
}
.separateur::before, .separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-rule);
}

/* --- Téléphone : bandeau bleu en haut, formulaire dessous, coins arrondis de l'iPhone --------- */

@media (max-width: 767px) {
  .connexion { flex-direction: column; }
  .connexion-marque {
    flex: none;
    height: calc(160px + env(safe-area-inset-top, 0px));
    gap: 10px;
    padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right))
      0 max(20px, env(safe-area-inset-left));
  }
  .connexion-marque img { width: 200px; }
  .connexion-formulaire {
    min-width: 0;
    align-items: flex-start;
    padding: 24px max(16px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .connexion-carte { width: 100%; max-width: 400px; padding: 0; }

  /* Champs en 16 px et 40 px : Safari zoome sur tout champ plus petit à la saisie. */
  input[type="text"], input[type="email"], input[type="password"] { height: 40px; font-size: 16px; }
  .oeil { height: 40px; }
  .oublie { padding: 8px 0; margin: -14px 0 8px; }
}

/* --- Cadre connecté (AppLayout, Sidebar, TopBar, ThemePicker de marge) ------------------------
   Les couleurs du cadre viennent de --color-shell*, que le pinceau remplace ; le repli de la barre
   est l'attribut data-folded de <html>. Mesures : D:\ia\bleuebuzz\cadre-axonaut.md. */

body.shell { min-height: 100dvh; background: var(--color-page); }
.contenu { background: var(--color-page); padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }

/* Contenu des pages : la même place qu'Axonaut, marge, mecenat et gestion (section Page de la
   fiche). Toute la largeur, sans colonne centrée ; une grille dont les blocs sont espacés de 16 px,
   20 px à partir de 1024 px. Sur grand écran, le titre commence à 30 px de la barre latérale et à
   42 px sous le bandeau. */
.contenu main {
  --ecart-page: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ecart-page);
  padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
}
.contenu main > * { margin: 0; }
.contenu h1 { overflow-wrap: anywhere; }

/* Ligne d'état sous le titre : 12 px sur 16 px d'interligne, 4 px sous la ligne du titre (l'écart
   de la grille moins le surplus). */
.contenu main > .etat {
  margin-top: calc(4px - var(--ecart-page));
  color: var(--color-muted);
  font-size: 12px;
  line-height: 16px;
}
.vide { color: var(--color-muted); }

/* Carte blanche d'Axonaut : coins de 10 px, ombre chaude, sans bordure. */
.carte {
  border-radius: var(--radius-card);
  padding: 20px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.carte-refus { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 30px; }
.carte-refus p { margin: 0; }

/* --- Écran « Accès » : tableau des comptes dans une carte (tableaux d'Axonaut) ----------------------
   Sur téléphone, c'est la carte qui défile à l'horizontale ; la page ne bouge pas. */
.carte-table { padding: 25px; overflow-x: auto; }
.acces-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.7px;
}
.acces-table th {
  padding: 15px 10px;
  background: var(--color-thead);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.acces-table th:first-child { border-top-left-radius: var(--radius-card); }
.acces-table th:last-child { border-top-right-radius: var(--radius-card); }
.acces-table td {
  padding: 15px 10px;
  border-bottom: 1px solid rgba(200, 215, 229, 0.5);
  vertical-align: middle;
}
.acces-table tbody tr:hover { background: rgba(245, 245, 245, 0.38); }
.acces-table .centre { text-align: center; }
.acces-table .nowrap { white-space: nowrap; }
.acces-table form { display: contents; }
.acces-table input[type="checkbox"], .acces-ajout input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-navy);
  vertical-align: middle;
}
.acces-actions { display: flex; gap: 10px; }

.acces-ajout h2 {
  margin: 0 0 16px;
  font: 600 16px/1.3 var(--font-title);
}
.acces-ajout-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 20px;
  max-width: 640px;
}
.acces-univers { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 18px; border: 0; padding: 0; }
.acces-univers legend { padding: 0; }
.acces-case { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

@media (max-width: 760px) {
  .carte-table { padding: 12px; }
}

/* Bouton rond sur le cadre : déconnexion. */
.rond {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  padding: 0;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.rond:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.rond:focus-visible { outline: 2px solid #fff; }
.rond svg { width: 18px; height: 18px; }

/* Barre latérale fixe à partir de 1024 px : 200 px, 70 px repliée, dégradé vertical de la couleur
   +20 (jusqu'à 100 px) à la couleur −20. */
.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  width: 200px;
  padding-top: 20px;
  background: linear-gradient(var(--color-shell-light) 100px, var(--color-shell-dark));
  color: #fff;
  font-family: var(--font-shell);
}
/* Le « b » bleu dans un rond blanc de 120 px. */
.sidebar-disque {
  display: block;
  flex: none;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.1);
}
.sidebar-disque img { display: block; width: 100%; height: 100%; }
.sidebar-disque:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Entrées de 56 px séparées par des filets blancs à 10 % ; l'entrée active, plus foncée, pointe
   vers la page. */
.sidebar-nav { display: flex; flex-direction: column; }
.sidebar-nav a {
  position: relative;
  display: flex;
  height: 56px;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s;
}
.sidebar-nav a::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.1); }
.sidebar-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sidebar-nav a.actif { background: var(--color-shell-dark); }
.sidebar-nav a.actif::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-block: 10px solid transparent;
  border-left: 10px solid var(--color-shell-dark);
}
.sidebar-icone { display: grid; width: 48px; flex: none; place-items: center; }
.sidebar-icone svg { width: 18px; height: 18px; }
/* Le pinceau au pied de la barre : bande de 40 px en couleur −20, trait fin au-dessus, paint-brush
   de Font Awesome en 14 px. */
.sidebar-pied { position: relative; margin-top: auto; padding-top: 16px; }
.pinceau-bande {
  position: relative;
  display: grid;
  width: 100%;
  height: 40px;
  place-items: center;
  border: 0;
  padding: 0;
  background: var(--color-shell-dark);
  color: rgba(255, 255, 255, 0.7); /* blanc à 70 %, le gris léger d'Axonaut mesuré sur axonaut.com */
  font-size: 14px;
  cursor: pointer;
}
.pinceau-bande::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.pinceau-bande:hover { background: rgba(255, 255, 255, 0.1); }
.pinceau-bande:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

:root[data-folded="true"] .sidebar { width: 70px; }
:root[data-folded="true"] .sidebar-disque { width: 48px; height: 48px; }
:root[data-folded="true"] .sidebar-nav a { justify-content: center; }
:root[data-folded="true"] .sidebar-icone { width: 100%; }
:root[data-folded="true"] .sidebar .sidebar-libelle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Fenêtre du pinceau, à droite de la barre : le bleu bleuebuzz, les pastilles d'Axonaut et une
   couleur libre. */
.pinceau {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  z-index: 50;
  width: 16rem;
  border: 1px solid var(--color-line);
  border-radius: 0.75rem;
  background: #fff;
  padding: 16px;
  color: var(--color-ink);
  font-family: var(--font-sans);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.pinceau[hidden] { display: none; }
.pinceau p { margin: 0 0 12px; color: var(--color-navy); font-size: 14px; font-weight: 600; }
.pinceau-pastilles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pinceau-pastilles button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  padding: 0;
  color: #fff;
  cursor: pointer;
}
/* Couleur de chaque pastille : pas d'attribut style, que la CSP refuse. */
.pinceau-pastilles [data-couleur="#263E90"] { background: #263E90; }
.pinceau-pastilles [data-couleur="#454545"] { background: #454545; }
.pinceau-pastilles [data-couleur="#656565"] { background: #656565; }
.pinceau-pastilles [data-couleur="#F09E0E"] { background: #F09E0E; }
.pinceau-pastilles [data-couleur="#68BD2E"] { background: #68BD2E; }
.pinceau-pastilles [data-couleur="#4285F4"] { background: #4285F4; }
.pinceau-pastilles [data-couleur="#21406B"] { background: #21406B; }
.pinceau-pastilles [data-couleur="#A15AF1"] { background: #A15AF1; }
.pinceau-pastilles [data-couleur="#EA629F"] { background: #EA629F; }
.pinceau-pastilles [data-couleur="#E00035"] { background: #E00035; }
.pinceau-pastilles svg { width: 16px; height: 16px; visibility: hidden; }
.pinceau-pastilles button[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-navy); }
.pinceau-pastilles button[aria-checked="true"] svg { visibility: visible; }
.pinceau-pastilles button:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 4px; }
.pinceau-autre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--color-muted);
  font-size: 13px;
}
.pinceau-autre input {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}
.pinceau-autre input.choisie { box-shadow: 0 0 0 2px var(--color-navy); }

/* Bandeau du haut, 80 px, à partir de 1024 px : repli, logo, personne connectée à droite. Son
   dégradé horizontal est posé sur .cadre, pour paraître derrière le coin arrondi. Le logo commence
   à 64 px de la barre latérale, comme dans Axonaut : zone de repli de 51 px, 20 px d'écart, −7 px. */
.topbar {
  display: none;
  height: 5rem;
  align-items: center;
  gap: 20px;
  padding: 0 20px 0 0;
  color: #fff;
  font-family: var(--font-shell);
}
/* Bouton de repli : zone de 51 px collée à la barre latérale, caret puis bars de Font Awesome en
   14 px ; caret-right une fois la barre repliée. */
.repli {
  display: flex;
  width: 51px;
  height: 5rem;
  flex: none;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0 0 0 15px;
  background: none;
  color: rgba(255, 255, 255, 0.6); /* blanc à 60 %, le gris léger d'Axonaut mesuré sur axonaut.com */
  font-size: 14px;
  cursor: pointer;
}
/* En bloc, comme le fait la base de Tailwind dans marge et mécénat : en ligne, le caret, dans son
   span, se posait sur la ligne de base et dépassait les bars de 2 px vers le haut. */
.repli .glyphe-fa { display: block; }
.repli:hover { background: rgba(255, 255, 255, 0.1); }
.repli:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.topbar .si-replie { display: none; }
:root[data-folded="true"] .topbar .si-ouvert { display: none; }
:root[data-folded="true"] .topbar .si-replie { display: contents; }
.topbar-logo { display: flex; flex: none; align-items: center; margin-left: -7px; border-radius: 4px; }
.topbar-logo img { display: block; width: auto; height: 32px; }
.topbar-logo:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.topbar-user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar-user form { margin: 0; }
.topbar-user .initiales {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9999px;
  background: #fff;
  color: var(--color-shell);
  font-size: 13px;
  font-weight: 700;
}
.topbar-user .nom { font-size: 14px; font-weight: 500; white-space: nowrap; }

/* === Grille des univers : début (à copier d'un seul tenant avec _grille.html, section « Grille des
   univers » d'app.js et les icônes de _icones.html) ======================================
   Le menu du haut de page, dans le bandeau (grand écran) et dans la barre du haut (téléphone).
   Variables utilisées, avec la valeur de repli de chaque `var()` (rien à déclarer si elles
   manquent) : --color-navy #263E90 (pastilles, ligne courante), --color-navy-soft #e8ebf8
   (survol), --color-thead #f5f9fe (ligne courante), --color-link #0079B3 (focus), --color-ink
   #333333 et --color-muted #707070 (textes), --shadow-menu 0 6px 12px rgba(0,0,0,.18),
   --radius-card 10px, --radius-field 8px, --font-title "Montserrat", --font-sans "Open Sans".
   Le panneau est ancré à droite du bouton et reste dans l'écran dès 250 px de large. */

.grille { position: relative; }
.grille summary {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.85);
  list-style: none;
  cursor: pointer;
}
.grille summary::-webkit-details-marker { display: none; }
.grille summary:hover, .grille[open] summary { background: rgba(255, 255, 255, 0.1); color: #fff; }
.grille summary:focus-visible { outline: 2px solid #fff; }
.grille summary svg { width: 18px; height: 18px; }
.grille-panneau {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 60;
  width: 230px;
  border-radius: var(--radius-card, 10px);
  padding: 8px;
  background: #fff;
  color: var(--color-ink, #333333);
  font-family: var(--font-sans, "Open Sans", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.43;
  box-shadow: var(--shadow-menu, 0 6px 12px rgba(0, 0, 0, 0.18));
}
.grille-titre {
  margin: 0;
  padding: 6px 8px 8px;
  color: var(--color-muted, #707070);
  font-family: var(--font-title, "Montserrat", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
}
.grille-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-field, 8px);
  padding: 6px 8px;
  color: var(--color-ink, #333333);
  font-size: 14px;
  text-decoration: none;
}
.grille-ligne:hover { background: var(--color-navy-soft, #e8ebf8); }
.grille-ligne:focus-visible { outline: 2px solid var(--color-link, #0079B3); outline-offset: -2px; }
.grille-ligne.courant {
  background: var(--color-thead, #f5f9fe);
  color: var(--color-navy, #263E90);
  font-weight: 600;
}
.grille-pastille {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: 9999px;
  background: var(--color-navy, #263E90);
  color: #fff;
}
.grille-pastille svg { width: 16px; height: 16px; }

/* === Grille des univers : fin ================================================================ */

/* --- Accueil : une tuile par univers ouvert ----------------------------------------------------- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--ecart-page, 16px);
}
.tuile {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--radius-card);
  padding: 20px;
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s, transform 0.15s;
}
.tuile:hover { box-shadow: 0 20px 35px rgba(38, 62, 144, 0.18); transform: translateY(-2px); }
.tuile:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.tuile-icone {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border-radius: var(--radius-card);
  background: var(--color-navy);
  color: #fff;
}
.tuile-icone svg { width: 24px; height: 24px; }
.tuile-texte { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.tuile-nom { font-family: var(--font-title); font-size: 15.4px; font-weight: 600; }
.tuile-description { color: var(--color-muted); font-size: 13px; line-height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .tuile { transition: none; }
  .tuile:hover { transform: none; }
}

/* --- Téléphone : barre en haut, barre d'onglets blanche en bas ------------------------------- */

/* Barre en haut d'un écran de téléphone, dans le dégradé du cadre : le « b » blanc et le nom. */
.mobile-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: calc(3.5rem + env(safe-area-inset-top));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0
    max(16px, env(safe-area-inset-left));
  background: linear-gradient(to right, var(--color-shell-light), var(--color-shell-dark));
  color: #fff;
  font-family: var(--font-shell);
}
.mobile-bar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.mobile-bar .logo img { width: 28px; height: 28px; }

/* Barre d'onglets blanche fixée en bas : « Accueil », les univers ouverts et « Plus ». Le nombre
   d'onglets varie (de deux à six), les colonnes se partagent la largeur. */
.bottom-tabs {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--color-line);
  background: #fff;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.bottom-tabs a, .bottom-tabs summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  color: var(--color-muted);
  font-size: 11px;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-tabs summary::-webkit-details-marker { display: none; }
.bottom-tabs a:focus-visible, .bottom-tabs summary:focus-visible { outline: 2px solid var(--color-cyan); }
.bottom-tabs a.actif, .bottom-tabs details.actif summary { color: var(--color-navy); font-weight: 700; }
.bottom-tabs svg { width: 20px; height: 20px; }

/* « Plus » : panneau qui monte du bas (Sheet de marge), avec « Accès » (administration) et la
   déconnexion. */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: default;
}
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 85dvh;
  overflow-y: auto;
  border-top: 1px solid var(--color-line);
  border-radius: 1rem 1rem 0 0;
  background: #fff;
  padding: 16px;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  color: var(--color-ink);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}
.sheet-header { display: flex; flex-direction: column; gap: 2px; padding-right: 32px; }
.sheet-header h2 { margin: 0; font-family: var(--font-title); font-size: 16px; font-weight: 600; }
.sheet-header p { margin: 0; color: var(--color-muted); font-size: 12px; }
.sheet-close {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}
.sheet-close:hover { background: var(--color-navy-soft); }
.sheet-close svg { width: 16px; height: 16px; }
.sheet nav { display: flex; flex-direction: column; }
.sheet form { margin: 0; }
.sheet nav a, .sheet .deconnexion {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 0.5rem;
  padding: 12px 8px;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sheet nav a:hover, .sheet .deconnexion:hover { background: var(--color-navy-soft); }
.sheet .deconnexion { border-top: 1px solid var(--color-line); border-radius: 0; }
.sheet svg { width: 16px; height: 16px; color: var(--color-navy); }

@media (max-width: 760px) {
  .contenu h1 { font-size: 19px; }
}

/* --- Grand écran : barre latérale et bandeau --------------------------------------------------- */

@media (min-width: 1024px) {
  .shell { padding-left: 200px; }
  :root[data-folded="true"] .shell { padding-left: 70px; }
  .sidebar, .topbar { display: flex; }
  .cadre { background: linear-gradient(to right, var(--color-shell-light), var(--color-shell-dark)); }
  .contenu { min-height: calc(100dvh - 5rem); border-top-left-radius: 10px; padding-bottom: 0; }
  .mobile-bar, .bottom-tabs { display: none; }
  .contenu main { --ecart-page: 20px; padding: 42px 30px 30px; }
}