/* ==========================================================================
   Bilan de santé d'une loge — système de design
   --------------------------------------------------------------------------
   Direction : la clarté et le souffle d'une interface contemporaine, appliqués
   à un sujet qui demande de la tenue.

   Trois principes tenus partout :
   1. Contraste typographique — grands titres en graisse légère (300) face à
      de courts libellés en graisse forte (600). C'est ce qui donne l'air.
   2. Deux accents aux rôles distincts — l'azur porte l'interaction (ce qui
      réagit, ce qui vit), le laiton porte le cérémoniel (scores, verdicts).
      Ils ne se disputent jamais le même élément.
   3. Un mouvement unique — 0.5s cubic-bezier(.4, 0, .2, 1) partout, pour que
      l'application semble mue par une seule main.
   ========================================================================== */

/* --------------------------------------------------------------- polices */

@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url('../assets/fonts/poppins-200-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:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url('../assets/fonts/poppins-200-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+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/poppins-300-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:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/poppins-300-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+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/poppins-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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/poppins-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+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/poppins-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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/poppins-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+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/poppins-600-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/poppins-600-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+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/poppins-700-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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/poppins-700-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+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Le sérif ne sert plus qu'au cérémoniel : scores, verdicts, chiffres de tête. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/cormorant-garamond-600-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/cormorant-garamond-600-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+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/cormorant-garamond-700-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:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/cormorant-garamond-700-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+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------------------------------------------------------------- jetons */

:root {
  color-scheme: dark;

  /* Nuit — fond de l'application */
  --nuit-950: #05070D;
  --nuit-900: #080B14;
  --nuit-850: #0C1120;
  --nuit-800: #111827;
  --nuit-700: #182135;
  --nuit-600: #212C44;

  /* Azur — l'interaction : ce qui réagit, ce qui vit, ce qui se navigue */
  --azur-600: #0075A8;
  --azur-500: #009DDF;
  --azur-400: #38B8F0;
  --azur-300: #7FD2F7;

  /* Laiton — le cérémoniel : scores, verdicts, ornements */
  --laiton-700: #8A6C2C;
  --laiton-600: #B08F45;
  --laiton-500: #D8B36B;
  --laiton-400: #E9CE96;

  --fond: var(--nuit-900);
  --surface: #0E1422;
  --surface-haute: #141C2E;
  --surface-pressee: #0A0F1B;
  --texte: #F2F5FA;
  --texte-doux: #B9C2D4;
  --texte-sourd: #7C899F;
  --brume-sourde: #5A6478;

  --accent: var(--azur-500);
  --accent-vif: var(--azur-400);
  --accent-sourd: var(--azur-600);
  --or: var(--laiton-500);
  --or-vif: var(--laiton-400);

  --ligne: rgba(255, 255, 255, .09);
  --ligne-forte: rgba(0, 157, 223, .38);
  --ligne-or: rgba(216, 179, 107, .30);

  --etat-difficulte: #E8634A;
  --etat-consolider: #E5A93F;
  --etat-bonne-sante: #35B98A;
  --etat-rayonnante: #4FD3AB;
  --etat-neutre: var(--brume-sourde);

  --critique: #E8634A;
  --critique-fond: rgba(232, 99, 74, .12);
  --alerte: #E5A93F;
  --alerte-fond: rgba(229, 169, 63, .12);
  --info: var(--azur-500);
  --info-fond: rgba(0, 157, 223, .12);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-plein: 999px;

  --ombre-douce: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
  --ombre-portee: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px -26px rgba(0, 0, 0, .85);
  --halo-azur: 0 0 0 1px rgba(0, 157, 223, .3), 0 14px 40px -18px rgba(0, 157, 223, .55);

  --sans: 'Poppins', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  --gouttiere: 20px;
  --largeur-max: 760px;
  --largeur-large: 1180px;

  /* Une seule courbe de mouvement dans toute l'application. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-sortie: cubic-bezier(.2, .8, .3, 1);
  --ease-rebond: cubic-bezier(.34, 1.3, .64, 1);
  --duree: .5s;
  --duree-courte: .22s;
}

/* Jour — la même grammaire, sous une lumière blanche. */
:root[data-theme='clair'] {
  color-scheme: light;
  --fond: #FFFFFF;
  --surface: #F7F9FC;
  --surface-haute: #FFFFFF;
  --surface-pressee: #EFF3F8;
  --texte: #0E141C;
  --texte-doux: #3D4A5C;
  --texte-sourd: #66748A;
  --brume-sourde: #94A0B2;

  --accent: #007EB4;
  --accent-vif: #005E88;
  --accent-sourd: #7FD2F7;
  --or: #9A7A2E;
  --or-vif: #7C6122;

  --ligne: rgba(14, 20, 28, .10);
  --ligne-forte: rgba(0, 126, 180, .35);
  --ligne-or: rgba(154, 122, 46, .28);

  --etat-difficulte: #C0432B;
  --etat-consolider: #A87A17;
  --etat-bonne-sante: #1F8A63;
  --etat-rayonnante: #12836A;
  --critique: #C0432B;
  --critique-fond: rgba(192, 67, 43, .09);
  --alerte: #A87A17;
  --alerte-fond: rgba(168, 122, 23, .10);
  --info: #007EB4;
  --info-fond: rgba(0, 126, 180, .09);

  --ombre-douce: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px -18px rgba(16, 24, 40, .28);
  --ombre-portee: 0 2px 6px rgba(16, 24, 40, .07), 0 26px 60px -30px rgba(16, 24, 40, .4);
  --halo-azur: 0 0 0 1px rgba(0, 126, 180, .28), 0 14px 40px -20px rgba(0, 126, 180, .4);
}

/* ------------------------------------------------------------------ base */

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

/* `hidden` doit l'emporter sur les display: flex/grid posés par les classes. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Atmosphère : une lueur haute, très diffuse. Rien de plus. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(90% 50% at 50% -10%, rgba(0, 157, 223, .14), transparent 65%),
    radial-gradient(70% 40% at 88% 2%, rgba(216, 179, 107, .07), transparent 70%);
}
:root[data-theme='clair'] body::before {
  background:
    radial-gradient(90% 46% at 50% -12%, rgba(0, 157, 223, .10), transparent 68%),
    radial-gradient(60% 34% at 90% 0%, rgba(154, 122, 46, .05), transparent 72%);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-vif); text-decoration-color: var(--ligne-forte); text-underline-offset: 3px; }

::selection { background: rgba(0, 157, 223, .3); color: var(--texte); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

button, input, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ligne); border-radius: var(--r-plein); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--brume-sourde); background-clip: content-box; }

/* --------------------------------------------------- échelle typographique */

/* Le contraste fondateur : grand et léger contre petit et ferme. */
.titre-geant {
  font-size: clamp(34px, 8.5vw, 52px);
  font-weight: 200;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.titre-section {
  font-size: clamp(26px, 5.4vw, 34px);
  font-weight: 300;
  letter-spacing: -.015em;
  line-height: 1.12;
}
.titre-carte {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.28;
}

/* Libellé de section : court, ferme, souligné d'un trait d'azur. */
.surtitre {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  padding-bottom: 10px;
  margin-bottom: 16px;
  position: relative;
}
.surtitre::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 2px;
  border-radius: var(--r-plein);
  background: linear-gradient(90deg, var(--accent), transparent);
  transform-origin: left;
  animation: filet .7s var(--ease) both;
}
@keyframes filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.chiffre { font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- ossature app */

#app {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(env(safe-area-inset-top) + 16px) var(--gouttiere) 16px;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--ligne);
  transition: border-color var(--duree) var(--ease);
}

.entete-corps {
  position: relative;
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.entete-titres { min-width: 0; flex: 1; }

.entete h1 {
  /* Le plancher descend à 19 px : « Tableau de bord » tient alors en entier
     sur un écran de 375 px, au lieu d'être coupé au milieu d'un mot. */
  font-size: clamp(19px, 5.2vw, 26px);
  font-weight: 300;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entete .sous-titre {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--texte-sourd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.bouton-retour {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: transform var(--duree-courte) var(--ease), border-color var(--duree) var(--ease), color var(--duree) var(--ease);
}
.bouton-retour:hover { color: var(--accent-vif); border-color: var(--ligne-forte); }
.bouton-retour:active { transform: scale(.9); }

/* Menu : il double la barre du bas en la nommant en toutes lettres. Sur
   ordinateur, le rail latéral le rend inutile — il disparaît. */
.burger {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: transform var(--duree-courte) var(--ease),
              border-color var(--duree) var(--ease), color var(--duree) var(--ease);
}
.burger:hover { color: var(--accent-vif); border-color: var(--ligne-forte); }
.burger:active { transform: scale(.9); }

.menu-liste { display: grid; gap: 8px; }
.menu-entree {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--duree-courte) var(--ease),
              border-color var(--duree) var(--ease), background var(--duree) var(--ease);
}
.menu-entree:hover { border-color: var(--ligne-forte); transform: translateX(2px); }
.menu-entree[aria-current='page'] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--info-fond);
}
.menu-entree[aria-current='page'] .menu-picto { color: var(--accent-vif); }
.menu-picto { flex: none; color: var(--texte-sourd); display: grid; place-items: center; }
.menu-textes { flex: 1; min-width: 0; }
.menu-textes strong { display: block; font-size: 15px; font-weight: 600; }
.menu-textes span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--texte-sourd);
}
.menu-chevron { flex: none; color: var(--brume-sourde); }

.vue {
  flex: 1;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 26px var(--gouttiere) calc(120px + env(safe-area-inset-bottom));
}
.vue.large { max-width: var(--largeur-large); }

/* Révélation : chaque bloc monte à son tour, une seule fois. */
.reveler { opacity: 0; transform: translateY(26px); }
.reveler.vu {
  animation: monte var(--duree) var(--ease-sortie) both;
  animation-delay: var(--retard, 0s);
}
@keyframes monte {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveler { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ navigation */

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--fond) 40%);
  pointer-events: none;
}

.nav-corps {
  pointer-events: auto;
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--nb-onglets, 5), 1fr);
  gap: 2px;
  padding: 7px;
  border-radius: var(--r-plein);
  background: color-mix(in srgb, var(--surface-haute) 86%, transparent);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-portee);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 2px 7px;
  border: 0;
  border-radius: var(--r-plein);
  background: none;
  color: var(--texte-sourd);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color var(--duree-courte) var(--ease), background var(--duree) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Deux lignes réservées à tous les libellés : « Tableau de bord » y tient sans
   décaler les pictogrammes de ses voisins, qui n'en occupent qu'une. */
.nav-item > span {
  display: block;
  min-height: 2.3em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}
.nav-item svg { width: 21px; height: 21px; transition: transform var(--duree) var(--ease-rebond); }
.nav-item:hover { color: var(--texte-doux); }
.nav-item[aria-current='page'] {
  color: var(--accent-vif);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.nav-item[aria-current='page'] svg { transform: translateY(-2px) scale(1.08); }

.nav-pastille {
  position: absolute;
  top: 4px; right: calc(50% - 19px);
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  background: var(--critique);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border: 2px solid var(--surface-haute);
}

/* ------------------------------------------------------------- feuillet */

.feuillet {
  position: relative;
  padding: 22px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--ligne);
  transition: border-color var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.feuillet.compact { padding: 16px; }
.feuillet.accent {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 60%);
  border-color: var(--ligne-forte);
}
.feuillet.ceremonial {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--or) 8%, var(--surface)), var(--surface) 60%);
  border-color: var(--ligne-or);
}

.feuillet-titre { font-size: 21px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 6px; }
.feuillet-note { font-size: 14px; color: var(--texte-sourd); line-height: 1.6; }

.section { margin-bottom: 34px; }

/* ---------------------------------------------------------------- pilules */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--r-plein);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .005em;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duree-courte) var(--ease),
              box-shadow var(--duree) var(--ease),
              border-color var(--duree) var(--ease),
              color var(--duree) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.pleine-largeur { width: 100%; }

/* Balayage au survol : le fond se remplit depuis la gauche. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) var(--ease);
}
.btn:hover::before { transform: scaleX(1); }

.btn-principal {
  background: var(--accent);
  color: #04121B;
  font-weight: 600;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn-principal::before { background: var(--azur-300); }
:root[data-theme='clair'] .btn-principal { color: #fff; }
:root[data-theme='clair'] .btn-principal::before { background: var(--azur-600); }

.btn-secondaire {
  background: transparent;
  border-color: var(--ligne-forte);
  color: var(--accent-vif);
}
.btn-secondaire::before { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.btn-fantome {
  background: transparent;
  border-color: var(--ligne);
  color: var(--texte-doux);
}
.btn-fantome::before { background: color-mix(in srgb, var(--texte) 7%, transparent); }
.btn-fantome:hover { color: var(--texte); border-color: var(--ligne-forte); }

.btn-danger { background: transparent; border-color: rgba(232, 99, 74, .38); color: var(--critique); }
.btn-danger::before { background: var(--critique-fond); }

.btn-petit { min-height: 40px; padding: 0 18px; font-size: 13.5px; }

.rangee-btn { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee-btn > .btn, .rangee-btn > a.btn { flex: 1 1 150px; }

/* ----------------------------------------------------------- formulaires */

.champ { margin-bottom: 18px; }
.champ:last-child { margin-bottom: 0; }

.champ label, .etiquette {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-sourd);
}

.saisie, select.saisie, textarea.saisie {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface-pressee);
  color: var(--texte);
  font-size: 16px;
  font-weight: 400;
  transition: border-color var(--duree-courte) var(--ease),
              background var(--duree-courte) var(--ease),
              box-shadow var(--duree-courte) var(--ease);
  appearance: none;
}
:root[data-theme='clair'] .saisie { background: var(--surface-haute); }
.saisie::placeholder { color: var(--brume-sourde); }
.saisie:hover { border-color: var(--ligne-forte); }
.saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea.saisie { min-height: 100px; resize: vertical; line-height: 1.6; }

select.saisie {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C899F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}

/* ------------------------------------------------------ sélecteur d'atelier */

.selecteur-champ {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 11px 14px 11px 16px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface-pressee);
  color: var(--texte);
  cursor: pointer;
  transition: border-color var(--duree-courte) var(--ease), background var(--duree-courte) var(--ease);
}
:root[data-theme='clair'] .selecteur-champ { background: var(--surface-haute); }
.selecteur-champ:hover { border-color: var(--ligne-forte); }
.selecteur-textes { flex: 1; min-width: 0; display: grid; gap: 2px; }
.selecteur-valeur {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selecteur-champ.vide .selecteur-valeur { color: var(--brume-sourde); font-weight: 400; }
.selecteur-complement {
  font-size: 12px;
  color: var(--texte-sourd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selecteur-chevron { flex: none; color: var(--texte-sourd); display: grid; place-items: center; }

/* Fiche de l'atelier retenu : ce que le référentiel apporte de lui-même. */
.fiche-loge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.trait-loge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-or);
  background: color-mix(in srgb, var(--or) 8%, transparent);
}
.trait-libelle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
}
.trait-valeur { font-size: 13px; font-weight: 500; color: var(--texte); }

.selecteur-compteur {
  font-size: 12px;
  color: var(--texte-sourd);
  margin: -6px 0 10px;
}

/* La liste occupe une hauteur fixe : le panneau ne saute pas à chaque frappe. */
.selecteur-resultats {
  display: grid;
  gap: 6px;
  max-height: min(46dvh, 420px);
  overflow-y: auto;
  margin-inline: -4px;
  padding-inline: 4px;
}

.selecteur-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duree-courte) var(--ease), transform var(--duree-courte) var(--ease);
}
.selecteur-ligne:hover { border-color: var(--ligne-forte); transform: translateX(2px); }
.selecteur-ligne.choisie { border-color: var(--accent); background: var(--info-fond); }

.selecteur-numero {
  flex: none;
  min-width: 48px;
  padding: 5px 8px;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--ligne);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.selecteur-details { flex: 1; min-width: 0; display: grid; gap: 1px; }
.selecteur-nom {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selecteur-meta { font-size: 11.5px; color: var(--texte-sourd); }
.selecteur-coche { flex: none; color: var(--accent); display: grid; place-items: center; }

.aide-champ { margin-top: 7px; font-size: 12.5px; color: var(--texte-sourd); line-height: 1.5; }
.erreur-champ { margin-top: 7px; font-size: 12.5px; color: var(--critique); }

.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grille-champs .champ { margin-bottom: 0; }
.grille-champs.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 400px) { .grille-champs.trois { grid-template-columns: 1fr 1fr; } }

/* Une liste déroulante en demi-colonne tronque ses intitulés sur un téléphone :
   « Réinstallation du VM » devient « Réinstallation d… », et l'on ne sait plus
   ce qu'on a choisi. Elle prend donc toute la ligne. */
@media (max-width: 480px) {
  .grille-champs > .champ:has(select) { grid-column: 1 / -1; }
}

.bascule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; }
.bascule-texte { flex: 1; }
.bascule-texte strong { display: block; font-size: 15px; font-weight: 600; }
.bascule-texte span { font-size: 12.5px; color: var(--texte-sourd); }
.interrupteur {
  flex: none;
  width: 54px; height: 32px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne);
  background: var(--surface-pressee);
  position: relative;
  cursor: pointer;
  transition: background var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.interrupteur::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: var(--r-plein);
  background: var(--brume-sourde);
  transition: transform var(--duree) var(--ease-rebond), background var(--duree) var(--ease);
}
.interrupteur[aria-checked='true'] { background: var(--accent); border-color: var(--accent); }
.interrupteur[aria-checked='true']::after { transform: translateX(22px); background: #fff; }

/* ------------------------------------------------------- question à choix */

.question-carte {
  position: relative;
  padding: 20px 17px 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--ligne);
  overflow: hidden;
}
/* Lueur d'azur en tête de carte : le sujet vivant du moment. */
.question-carte::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  width: 300px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  pointer-events: none;
}

.question-theme {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.question-theme .puce {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-forte);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.question-theme .libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.question-intitule {
  position: relative;
  font-size: clamp(22px, 5.6vw, 28px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.reponses { display: grid; gap: 7px; }

.reponse {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 11px 14px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface-pressee);
  color: var(--texte-doux);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--duree-courte) var(--ease),
              border-color var(--duree-courte) var(--ease),
              color var(--duree-courte) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme='clair'] .reponse { background: var(--surface-haute); }

/* Remplissage progressif au choix, depuis la gauche. */
.reponse::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--teinte, var(--accent)) 12%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) var(--ease);
}
.reponse > * { position: relative; }
.reponse:hover { border-color: var(--ligne-forte); color: var(--texte); }
.reponse:active { transform: scale(.99); }

.reponse-rang {
  flex: none;
  display: grid;
  place-items: center;
  width: 29px; height: 29px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brume-sourde);
  transition: all var(--duree) var(--ease-rebond);
}
.reponse-texte { flex: 1; min-width: 0; }

.reponse[aria-pressed='true'] {
  color: var(--teinte);
  border-color: var(--teinte);
}
.reponse[aria-pressed='true']::before { transform: scaleX(1); }
.reponse[aria-pressed='true'] .reponse-rang {
  color: #06121A;
  border-color: transparent;
  background: var(--teinte);
  transform: scale(1.06);
}
:root[data-theme='clair'] .reponse[aria-pressed='true'] .reponse-rang { color: #fff; }
.reponse[aria-pressed='true'] .reponse-texte { color: var(--texte); font-weight: 500; }

.reponse.etat-1 { --teinte: var(--etat-difficulte); }
.reponse.etat-2 { --teinte: var(--etat-consolider); }
.reponse.etat-3 { --teinte: var(--accent); }
.reponse.etat-4 { --teinte: var(--etat-bonne-sante); }
.reponse.etat-5 { --teinte: var(--etat-rayonnante); }

.reponse-suggestion {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--r-plein);
  border: 1px dashed var(--ligne-forte);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.question-outils {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.lien-commentaire {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--texte-sourd);
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--duree-courte) var(--ease);
}
.lien-commentaire:hover { color: var(--accent-vif); }
.lien-commentaire svg { width: 16px; height: 16px; }

.btn-ignorer {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--texte-sourd);
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--ligne);
  transition: color var(--duree-courte) var(--ease), border-color var(--duree-courte) var(--ease);
}
.btn-ignorer:hover { color: var(--accent-vif); border-color: var(--ligne-forte); }

.zone-commentaire { margin-top: 12px; position: relative; }

/* ------------------------------------------------------- barre d'avancement */

.barre-etat { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.progression { display: flex; align-items: center; gap: 12px; flex: 1; }
.progression-barre {
  flex: 1;
  height: 4px;
  border-radius: var(--r-plein);
  background: var(--surface-pressee);
  overflow: hidden;
}
.progression-jauge {
  height: 100%;
  border-radius: var(--r-plein);
  background: linear-gradient(90deg, var(--azur-600), var(--azur-400));
  transition: width var(--duree) var(--ease);
}
.progression-texte {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--texte-sourd);
  font-weight: 500;
}

.etat-enregistrement {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--etat-bonne-sante);
  white-space: nowrap;
  transition: color var(--duree) var(--ease);
}
.etat-enregistrement::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--r-plein);
  background: currentColor;
  flex: none;
}
.etat-enregistrement.en-cours { color: var(--texte-sourd); }
.etat-enregistrement.en-cours::before { animation: pulse 1s ease-in-out infinite; }
.etat-enregistrement.echec { color: var(--critique); cursor: pointer; text-decoration: underline; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* --------------------------------------------------------------- cadran */

.cadran { display: grid; place-items: center; position: relative; }
.cadran svg { display: block; overflow: visible; }
.cadran-centre { position: absolute; display: grid; place-items: center; text-align: center; }
.cadran-valeur {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cadran-sur {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--texte-sourd);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 5px;
}

.trace-cadran {
  stroke-dasharray: var(--longueur);
  stroke-dashoffset: var(--longueur);
  animation: trace 1.3s var(--ease-sortie) .2s forwards;
}
@keyframes trace { to { stroke-dashoffset: var(--reste); } }

.verdict {
  /* « flex » et non « inline-flex » : sur une boîte de ligne, margin: auto ne
     centre rien, et la pastille restait collée au bord gauche du feuillet. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: var(--r-plein);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.verdict::before { flex: none; }
.verdict::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--r-plein);
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

/* --------------------------------------------------------- barres thèmes */

.theme-barres { display: grid; gap: 16px; }
.theme-barre-ligne { display: grid; gap: 7px; }
.theme-barre-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.theme-barre-nom { color: var(--texte-doux); line-height: 1.35; min-width: 0; }
.theme-barre-nom b { color: var(--accent); font-weight: 600; margin-right: 7px; font-variant-numeric: tabular-nums; }
.theme-barre-tete > .rangee { flex: none; flex-wrap: nowrap; align-items: baseline; }
.theme-barre-val {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.theme-barre-piste {
  height: 6px;
  border-radius: var(--r-plein);
  background: var(--surface-pressee);
  overflow: hidden;
  position: relative;
}
.theme-barre-jauge {
  height: 100%;
  border-radius: var(--r-plein);
  transform-origin: left;
  animation: pousse .9s var(--ease-sortie) both;
}
@keyframes pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.delta {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 9px;
  border-radius: var(--r-plein);
}
.delta.hausse { color: var(--etat-bonne-sante); background: color-mix(in srgb, var(--etat-bonne-sante) 14%, transparent); }
.delta.baisse { color: var(--critique); background: var(--critique-fond); }
.delta.stable { color: var(--texte-sourd); background: var(--surface-pressee); }

/* ---------------------------------------------------------------- alertes */

.alerte-carte {
  display: flex;
  gap: 14px;
  padding: 16px;
  margin-bottom: 11px;
  border-radius: var(--r-md);
  border: 1px solid;
  background: var(--surface);
  transition: transform var(--duree) var(--ease);
}
.alerte-carte:last-child { margin-bottom: 0; }
.alerte-carte .picto {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  background: currentColor;
}
.alerte-carte .picto svg { width: 17px; height: 17px; stroke: var(--surface); }
.alerte-carte .corps { flex: 1; min-width: 0; }
.alerte-carte h4 { font-size: 15px; font-weight: 600; margin-bottom: 3px; color: var(--texte); }
.alerte-carte p { font-size: 13.5px; color: var(--texte-doux); margin: 0; line-height: 1.55; }

.alerte-carte.critique { border-color: rgba(232, 99, 74, .32); background: var(--critique-fond); color: var(--critique); }
.alerte-carte.alerte { border-color: rgba(229, 169, 63, .32); background: var(--alerte-fond); color: var(--alerte); }
.alerte-carte.info { border-color: var(--ligne-forte); background: var(--info-fond); color: var(--info); }

/* Pistes d'action */
.piste {
  padding: 16px;
  margin-bottom: 11px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--or);
}
.piste-tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 9px; }
.piste-note {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: #06121A;
  background: var(--etat-difficulte);
}
.piste-note.deux { background: var(--etat-consolider); }
.piste-critere { font-size: 15px; font-weight: 600; line-height: 1.35; }
.piste-theme { font-size: 11px; color: var(--texte-sourd); letter-spacing: .06em; margin-top: 2px; text-transform: uppercase; }
.piste-action { font-size: 14px; color: var(--texte-doux); line-height: 1.6; }
.piste-observation {
  margin-top: 10px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-pressee);
  font-size: 13.5px;
  font-style: italic;
  color: var(--texte-doux);
  border-left: 2px solid var(--ligne-forte);
}

/* --------------------------------------------------------------- listes */

.liste { display: grid; gap: 11px; }

.ligne-loge {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--ligne);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform var(--duree-courte) var(--ease),
              border-color var(--duree) var(--ease),
              box-shadow var(--duree) var(--ease);
}
.ligne-loge:hover {
  border-color: var(--ligne-forte);
  transform: translateY(-2px);
  box-shadow: var(--ombre-douce);
}
.ligne-loge:active { transform: translateY(0) scale(.995); }

/* Liseré de santé. Seules les lignes qui portent l'attribut en reçoivent un :
   ailleurs — dernières évaluations, référentiel — la couleur n'aurait pas de
   sens et l'œil s'habituerait à l'ignorer. */
.ligne-loge[data-sante] {
  position: relative;
  overflow: hidden;
  padding-left: 20px;
}
.ligne-loge[data-sante]::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brume-sourde);
}
.ligne-loge[data-sante='difficulte']::before { background: var(--critique); }
.ligne-loge[data-sante='vigilance']::before { background: var(--alerte); }
.ligne-loge[data-sante='saine']::before { background: var(--etat-bonne-sante); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--ligne);
}
.legende-groupe { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.legende-titre {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-sourd);
}
.legende-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texte-doux);
}
.legende-trait {
  width: 4px; height: 15px;
  border-radius: 2px;
  background: var(--brume-sourde);
}
.legende-item[data-sante='difficulte'] .legende-trait { background: var(--critique); }
.legende-item[data-sante='vigilance'] .legende-trait { background: var(--alerte); }
.legende-item[data-sante='saine'] .legende-trait { background: var(--etat-bonne-sante); }

.ligne-loge.avec-action { padding: 0; gap: 0; overflow: hidden; }
.ligne-corps {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  min-width: 0;
  padding: 16px 6px 16px 16px;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.ligne-action {
  flex: none;
  align-self: stretch;
  width: 56px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-left: 1px solid var(--ligne);
  color: var(--brume-sourde);
  cursor: pointer;
  transition: color var(--duree-courte) var(--ease), background var(--duree-courte) var(--ease);
}
.ligne-action:hover { color: var(--critique); background: var(--critique-fond); }

/* Le nombre d'évaluations d'un compte : un raccourci vers ses saisies, pas
   une action destructrice — il ne prend donc pas le rouge des corbeilles. */
.ligne-compte-visites {
  width: auto;
  min-width: 78px;
  padding: 0 14px;
  flex-direction: column;
  gap: 1px;
  color: var(--texte-doux);
}
.ligne-compte-visites strong {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ligne-compte-visites span { font-size: 10.5px; color: var(--texte-sourd); }
.ligne-compte-visites:hover { color: var(--accent-vif); background: var(--info-fond); }
.ligne-compte-visites:disabled { opacity: .45; cursor: default; }
.ligne-compte-visites:disabled:hover { background: none; }

/* Filtre en cours dans le registre : visible, et retirable d'un geste. */
.filtre-actif {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 9px 9px 9px 13px;
  border-radius: var(--r-plein);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--info-fond);
  color: var(--accent-vif);
  font-size: 13px;
  font-weight: 600;
}
.filtre-actif > span { flex: 1; min-width: 0; }
.filtre-actif-fermer {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.filtre-actif-fermer:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

.pastille-score {
  flex: none;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 11%, transparent);
}
/* « sans-note » et non « vide » : cette dernière habille les écrans sans
   contenu, avec 48 px de marge intérieure. Portée par une pastille de 50 px de
   côté, elle la faisait doubler de hauteur — le défaut se voyait sur chaque
   brouillon et chaque atelier jamais évalué. */
.pastille-score.sans-note {
  color: var(--brume-sourde);
  font-size: 14px;
  font-family: var(--sans);
  font-weight: 600;
}

.ligne-loge .details { flex: 1; min-width: 0; }
.ligne-loge .nom {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne-loge .meta {
  font-size: 12.5px;
  color: var(--texte-sourd);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.ligne-loge .chevron {
  flex: none;
  color: var(--brume-sourde);
  transition: transform var(--duree) var(--ease), color var(--duree) var(--ease);
}
.ligne-loge:hover .chevron { transform: translateX(4px); color: var(--accent); }

.jeton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-plein);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--ligne);
  color: var(--texte-sourd);
  white-space: nowrap;
}
.jeton.critique { color: var(--critique); border-color: rgba(232, 99, 74, .35); background: var(--critique-fond); }
.jeton.alerte { color: var(--alerte); border-color: rgba(229, 169, 63, .35); background: var(--alerte-fond); }
.jeton.accent { color: var(--accent); border-color: var(--ligne-forte); background: var(--info-fond); }
.jeton.brouillon { color: var(--info); border-color: var(--ligne-forte); }

/* État de suivi : rouge tant que l'atelier n'a jamais été vu, vert à la
   première évaluation, bleu dès qu'il y en a une seconde à comparer. */
.jeton.suivi-jamais {
  color: var(--critique);
  border-color: color-mix(in srgb, var(--critique) 38%, transparent);
  background: var(--critique-fond);
  font-weight: 600;
}
.jeton.suivi-evalue {
  color: var(--etat-bonne-sante);
  border-color: color-mix(in srgb, var(--etat-bonne-sante) 38%, transparent);
  background: color-mix(in srgb, var(--etat-bonne-sante) 12%, transparent);
  font-weight: 600;
}
.jeton.suivi-revu {
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 42%, transparent);
  background: var(--info-fond);
  font-weight: 600;
}

/* ---------------------------------------------------------------- stats */

/* 86px : la largeur juste pour tenir trois colonnes dans un feuillet
   sur un écran de 390 px, sans quoi la grille retombe à deux. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 10px; }
/* Exactement quatre mesures : deux colonnes pleines valent mieux qu'un 3+1
   qui laisse une carte orpheline en bas de grille. */
.stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.stat {
  padding: 15px 8px;
  border-radius: var(--r-md);
  background: var(--surface-pressee);
  border: 1px solid var(--ligne);
  text-align: center;
  transition: border-color var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.stat:hover { border-color: var(--ligne-forte); transform: translateY(-2px); }
.stat-valeur {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stat-nom {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-sourd);
  margin-top: 6px;
  line-height: 1.35;
}

/* Deux mesures face à face. */
.comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.comparaison-part {
  padding: 16px 12px;
  border-radius: var(--r-md);
  background: var(--surface-pressee);
  border: 1px solid var(--ligne);
  text-align: center;
}
.comparaison-valeur {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.comparaison-nom { font-size: 12px; color: var(--texte-doux); line-height: 1.35; margin-top: 6px; }
.comparaison-nb { font-size: 11px; color: var(--brume-sourde); margin-top: 3px; }

/* ---------------------------------------------------------- carrousel */

/* Défilement horizontal avec accroche : la liste garde sa place au doigt. */
.carrousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 78%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin-inline: calc(var(--gouttiere) * -1);
  padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel > * { scroll-snap-align: start; }
@media (min-width: 640px) { .carrousel { grid-auto-columns: minmax(260px, 44%); } }

/* ------------------------------------------------------------ graphiques */

.graphe { width: 100%; overflow-x: auto; }
.graphe svg { display: block; width: 100%; height: auto; }

/* Un graphique carré ne gagne rien à s'élargir : sa hauteur suit sa largeur,
   et sur un écran de bureau il finirait par occuper l'écran entier en
   repoussant hors de vue tout ce qui le suit. Les courbes et les barres, elles,
   profitent de la place. */
.graphe.carre svg { max-width: 380px; margin-inline: auto; }

/* Profil par thèmes : le radar et le détail chiffré disent la même chose de
   deux façons. Les mettre côte à côte quand la place existe évite de faire
   défiler pour comparer l'un à l'autre. */
.profil-themes > :last-child { margin-top: 16px; }
@media (min-width: 1100px) {
  .profil-themes {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
  }
  .profil-themes > :last-child { margin-top: 0; }
}
.graphe-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--texte-sourd);
}
.graphe-legende span { display: inline-flex; align-items: center; gap: 7px; }
.graphe-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Ce que désignent les six sommets — sans quoi ce ne sont que des chiffres. */
.radar-renvoi {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--texte-sourd);
  text-align: center;
}

/* Nomenclature du radar : à quoi correspond chacun des six sommets. */
.radar-themes {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--ligne);
  display: grid;
  gap: 9px;
  counter-reset: none;
}
.radar-themes li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
}
.radar-theme-numero {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.radar-theme-nom { color: var(--texte-doux); line-height: 1.35; }
.radar-theme-score {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trace-ligne {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--longueur);
  stroke-dashoffset: var(--longueur);
  animation: trace-ligne 1.4s var(--ease-sortie) .3s forwards;
}
@keyframes trace-ligne { to { stroke-dashoffset: 0; } }

.radar-forme { animation: eclot .8s var(--ease-rebond) .25s both; transform-origin: center; }
@keyframes eclot { from { transform: scale(.45); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --------------------------------------------------- pilotage / direct */

.direct {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-plein);
  border: 1px solid color-mix(in srgb, var(--etat-bonne-sante) 40%, transparent);
  background: color-mix(in srgb, var(--etat-bonne-sante) 12%, transparent);
  color: var(--etat-bonne-sante);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Sur un téléphone, le titre de l'écran passe avant l'état de la liaison :
   la pastille se réduit à son point, qui suffit à dire que le flux est vivant.
   Le texte reste lu par les lecteurs d'écran. */
@media (max-width: 430px) {
  .direct { padding: 8px; gap: 0; }
  .direct > span:not(.direct-point) {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

/* Présence : combien de frères sont dans l'application à cet instant.
   Le compteur n'apparaît qu'à l'administration, seule à le recevoir. */
.presence {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-forte);
  background: var(--surface);
  color: var(--texte-doux);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.presence svg { color: var(--texte-sourd); }

.direct-point {
  width: 6px; height: 6px;
  border-radius: var(--r-plein);
  background: currentColor;
  position: relative;
}
/* Onde concentrique : le signal est vivant, sans clignoter. */
.direct-point::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--r-plein);
  border: 1px solid currentColor;
  animation: onde 2.4s var(--ease) infinite;
}
@keyframes onde {
  0% { transform: scale(.6); opacity: .9; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}
.direct.interrompu {
  color: var(--alerte);
  border-color: color-mix(in srgb, var(--alerte) 40%, transparent);
  background: var(--alerte-fond);
}

/* Filtres de recherche : lisibles d'un coup d'œil, actionnables au pouce. */
.filtres-rangee {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.puce-filtre {
  padding: 8px 15px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--texte-sourd);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duree-courte) var(--ease),
              border-color var(--duree-courte) var(--ease),
              background var(--duree-courte) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.puce-filtre:hover { color: var(--texte); border-color: var(--ligne-forte); }
.puce-filtre[aria-pressed='true'] {
  color: var(--accent-vif);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight: 600;
}

.compteur-recherche {
  font-size: 12.5px;
  color: var(--texte-sourd);
  margin-bottom: 12px;
}

.journal-ligne {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ligne);
  background: var(--surface);
  align-items: start;
}
.journal-heure { font-size: 11.5px; color: var(--brume-sourde); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .journal-ligne { grid-template-columns: 1fr; gap: 5px; } }

/* --------------------------------------------------------- récapitulatif */

.recap-ligne {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 14px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duree) var(--ease), transform var(--duree-courte) var(--ease);
}
.recap-ligne:hover { border-color: var(--ligne-forte); transform: translateX(3px); }
.recap-rang {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-plein);
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
}
.recap-rang.vide { color: var(--brume-sourde); font-size: 13px; }
.recap-corps { flex: 1; min-width: 0; }
.recap-question { font-size: 13px; color: var(--texte-sourd); line-height: 1.4; }
.recap-reponse { font-size: 14.5px; color: var(--texte); line-height: 1.45; margin-top: 3px; }
.recap-reponse.absente { color: var(--brume-sourde); font-style: italic; }
.recap-groupe-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.recap-groupe-titre span:last-child {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- vide / états */

.vide { text-align: center; padding: 48px 22px; color: var(--texte-sourd); }
.vide-embleme {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-forte);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  color: var(--accent);
}
.vide-embleme svg { width: 30px; height: 30px; }
.vide h3 { font-size: 23px; font-weight: 300; letter-spacing: -.015em; color: var(--texte); margin-bottom: 10px; }
.vide p { font-size: 14px; max-width: 360px; margin: 0 auto 20px; line-height: 1.65; }

/* --------------------------------------------------------------- toasts */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 9px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 17px;
  border-radius: var(--r-plein);
  background: color-mix(in srgb, var(--surface-haute) 92%, transparent);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-portee);
  font-size: 14px;
  animation: toast-entre .45s var(--ease-rebond) both;
  backdrop-filter: blur(16px);
}
.toast.sortie { animation: toast-sort .3s var(--ease) forwards; }
.toast svg { width: 17px; height: 17px; flex: none; }
.toast.succes { color: var(--etat-bonne-sante); border-color: color-mix(in srgb, var(--etat-bonne-sante) 40%, transparent); }
.toast.echec { color: var(--critique); border-color: rgba(232, 99, 74, .4); }
.toast .texte { color: var(--texte); flex: 1; }
@keyframes toast-entre { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toast-sort { to { opacity: 0; transform: translateY(-10px) scale(.97); } }

/* -------------------------------------------------------------- panneau */

.voile {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(3, 6, 12, .72);
  backdrop-filter: blur(6px);
  animation: fondu var(--duree-courte) var(--ease) both;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.panneau {
  width: min(580px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 24px var(--gouttiere) calc(26px + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-haute);
  border: 1px solid var(--ligne);
  border-bottom: 0;
  box-shadow: var(--ombre-portee);
  animation: monte-panneau .42s var(--ease-sortie) both;
}
@keyframes monte-panneau { from { transform: translateY(100%); } to { transform: none; } }
.panneau-poignee {
  width: 42px; height: 4px;
  border-radius: var(--r-plein);
  background: var(--ligne);
  margin: -10px auto 18px;
}
.panneau h3 { font-size: 23px; font-weight: 300; letter-spacing: -.015em; margin-bottom: 8px; }
.panneau .note { font-size: 13.5px; color: var(--texte-sourd); margin-bottom: 20px; line-height: 1.55; }
@media (min-width: 640px) {
  .voile { align-items: center; }
  .panneau { border-radius: var(--r-xl); border-bottom: 1px solid var(--ligne); }
}

/* ------------------------------------------------------------ connexion */

.connexion {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px var(--gouttiere) calc(24px + env(safe-area-inset-bottom));
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Sphères de lumière en fond : la signature d'accueil. */
.orbe {
  position: fixed;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.orbe-1 {
  width: 46vmax; height: 46vmax;
  top: -18vmax; left: -14vmax;
  background: radial-gradient(circle, var(--azur-500), transparent 68%);
  animation: derive-1 26s var(--ease) infinite alternate;
}
.orbe-2 {
  width: 34vmax; height: 34vmax;
  bottom: -14vmax; right: -10vmax;
  background: radial-gradient(circle, var(--laiton-500), transparent 68%);
  opacity: .34;
  animation: derive-2 32s var(--ease) infinite alternate;
}
.orbe-3 {
  width: 26vmax; height: 26vmax;
  top: 42%; right: -8vmax;
  background: radial-gradient(circle, var(--azur-600), transparent 70%);
  opacity: .3;
  animation: derive-3 22s var(--ease) infinite alternate;
}
@keyframes derive-1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes derive-2 { to { transform: translate(-12vmax, -8vmax) scale(1.2); } }
@keyframes derive-3 { to { transform: translate(-9vmax, 7vmax) scale(.85); } }
/* Sous lumière blanche, les sphères doivent rester perceptibles sans salir
   le fond : on gagne en opacité ce qu'on perd en contraste. */
:root[data-theme='clair'] .orbe { opacity: .42; filter: blur(72px); }
:root[data-theme='clair'] .orbe-2 { opacity: .3; }

.connexion-carte {
  position: relative;
  z-index: 2;
  width: min(430px, 100%);
  padding: 36px 28px 28px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface-haute) 88%, transparent);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-portee);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  animation: monte .7s var(--ease-sortie) both;
}

.connexion-embleme {
  width: 66px; height: 66px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-or);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--or) 22%, transparent), transparent 70%);
  color: var(--or);
}
.connexion-embleme svg { width: 30px; height: 30px; }

.connexion-titre {
  font-size: clamp(25px, 6vw, 30px);
  font-weight: 200;
  letter-spacing: -.025em;
  text-align: center;
  line-height: 1.16;
  text-wrap: balance;
}
.connexion-sous-titre {
  text-align: center;
  font-size: 13px;
  color: var(--texte-sourd);
  margin: 10px 0 26px;
}

.connexion-erreur { color: var(--critique); font-size: 13.5px; line-height: 1.5; text-align: center; }
.connexion-erreur:not(:empty) {
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(232, 99, 74, .32);
  background: var(--critique-fond);
  animation: secousse .45s var(--ease);
}
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

.connexion-note {
  margin: 22px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--texte-sourd);
  text-align: center;
}

/* ---------------------------------------------------------- chargement */

.chargement {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--texte-sourd);
  font-size: 14px;
}
.chargement-embleme {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-forte);
  color: var(--accent);
  animation: respire 2s var(--ease) infinite;
}
.chargement-embleme svg { width: 27px; height: 27px; }
@keyframes respire {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.08); opacity: 1; }
}

.rotation { display: inline-flex; animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- avatar */

.avatar {
  width: 74px; height: 74px;
  margin: 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-forte);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  color: var(--accent);
  font-size: 25px;
  font-weight: 300;
  letter-spacing: .04em;
}

/* Section rejointe depuis un raccourci : un halo bref, le temps que l'œil
   la trouve, puis plus rien — un surlignage permanent finirait par gêner. */
.section-appelee > .feuillet {
  animation: appel-section 2.4s var(--ease) both;
}
@keyframes appel-section {
  0%, 55% {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  100% { border-color: var(--ligne); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .section-appelee > .feuillet { animation: none; }
}

/* Invitation à poser un raccourci sur l'écran d'accueil. Discrète : elle se
   ferme d'un geste, et disparaît d'elle-même une fois l'application installée. */
.banniere-installation {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--ligne-forte);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  animation: monte var(--duree) var(--ease-sortie) both;
}
.banniere-installation-picto {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne-forte);
  background: var(--surface-pressee);
  color: var(--accent);
}
.banniere-installation-corps { flex: 1; min-width: 0; }
.banniere-installation-corps strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.banniere-installation-corps span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--texte-sourd);
}
.banniere-installation .btn { flex: none; }
.banniere-installation-fermer {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 0;
  background: none;
  color: var(--brume-sourde);
  cursor: pointer;
  transition: color var(--duree-courte) var(--ease);
}
.banniere-installation-fermer:hover { color: var(--texte); }

/* Sur un téléphone, l'emblème cède la place au texte : la bannière tient alors
   sur une seule ligne de contenu, et ne mange pas le haut de l'accueil. */
@media (max-width: 480px) {
  .banniere-installation { gap: 10px; padding: 12px; }
  .banniere-installation-picto { display: none; }
}
@media (max-width: 360px) {
  .banniere-installation { flex-wrap: wrap; }
  .banniere-installation .btn { width: 100%; order: 3; }
}

/* Lien de texte dans un formulaire : présent sans peser. */
.lien-discret {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px;
  background: none;
  border: 0;
  color: var(--texte-sourd);
  font: inherit;
  font-size: 13px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--duree-courte) var(--ease);
}
.lien-discret:hover { color: var(--accent-vif); }

/* Vignettes du logo : on montre ce qu'Android en fera, cercle compris. */
.logo-apercus { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.logo-vignette { margin: 0; text-align: center; }
.logo-vignette img {
  display: block;
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface-pressee);
  object-fit: contain;
}
.logo-vignette.ronde img { border-radius: var(--r-plein); }
.logo-vignette figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--texte-sourd);
}

/* Rappel de conservation : ce qui part est une copie, l'original reste. */
.note-conservation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--info-fond);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texte-doux);
}
.note-conservation svg { flex: none; margin-top: 1px; color: var(--accent); }

/* Profil : bouton d'en-tête, présent sur tous les écrans. */
.profil-bouton {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne-forte);
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 22%, transparent), var(--surface) 72%);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform var(--duree-courte) var(--ease),
              border-color var(--duree) var(--ease),
              box-shadow var(--duree) var(--ease);
}
.profil-bouton:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.profil-bouton:active { transform: scale(.92); }

.profil-tete {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--surface-pressee);
}
.profil-tete .avatar { margin: 0; flex: none; width: 56px; height: 56px; font-size: 19px; }

/* Adresse d'accès : faite pour être lue de loin et recopiée sans erreur. */
.lien-acces {
  display: block;
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne-forte);
  background: var(--info-fond);
  color: var(--accent-vif);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 17px;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  word-break: break-all;
  user-select: all;
  transition: border-color var(--duree) var(--ease), transform var(--duree-courte) var(--ease);
}
.lien-acces:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Code à scanner : fond blanc en toutes circonstances, sans quoi la moitié
   des téléphones renoncent à le lire. */
.qr-carte {
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne-forte);
  background: var(--surface-pressee);
  text-align: center;
}
.qr-carte .qr {
  display: block;
  margin: 0 auto;
  width: min(208px, 62vw);
  height: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(0 0 0 / .22);
}
.qr-carte .lien-acces { margin-top: 16px; font-size: 15px; }

.installation {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.installation-etapes {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte-doux);
}
.installation-etapes li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }

.secret {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px dashed var(--ligne-forte);
  background: var(--surface-pressee);
}
.secret code {
  flex: 1;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 19px;
  letter-spacing: .08em;
  color: var(--accent-vif);
  word-break: break-all;
  user-select: all;
}

/* ------------------------------------------------------ bandeau liaison */

.bandeau-sync {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--r-plein);
  border: 1px solid var(--ligne);
  background: var(--surface);
  font-size: 13px;
  color: var(--texte-doux);
}
.bandeau-sync .point {
  width: 7px; height: 7px;
  border-radius: var(--r-plein);
  flex: none;
  background: var(--etat-bonne-sante);
}
.bandeau-sync.hors-ligne .point { background: var(--alerte); animation: pulse 2s ease-in-out infinite; }
.bandeau-sync.attente .point { background: var(--info); animation: pulse 1.3s ease-in-out infinite; }
.bandeau-sync .btn { margin-left: auto; }

/* ====================================================== mise en page bureau

   Au-delà de 1024 px, la barre d'onglets passe en colonne latérale : elle
   cesse de manger de la hauteur, la fenêtre est occupée sur toute sa largeur,
   et le contenu défile normalement sans qu'une barre flottante ne masque le
   bas de page.
   ========================================================================= */

@media (min-width: 1024px) {
  :root {
    --gouttiere: 36px;
    /* Sur un ordinateur, l'application occupe l'écran entier : le rail à
       gauche, tout le reste à droite. La largeur gagnée ne sert pas à étirer
       les lignes de texte mais à faire tenir plus de colonnes d'ateliers —
       les grilles ci-dessous s'en chargent. */
    --largeur-max: none;
    --largeur-rail: 236px;
  }

  /* Rail replié sur ses pictogrammes : la place rendue va au contenu, et les
     intitulés restent lisibles au survol grâce à l'attribut title. */
  :root { --largeur-rail-repliee: 74px; }

  #app.coquille.rail-replie { grid-template-columns: var(--largeur-rail-repliee) minmax(0, 1fr); }
  .rail-replie .nav { padding: 26px 11px; }
  .rail-replie .nav-item { justify-content: center; gap: 0; padding: 13px 0; }
  .rail-replie .nav-item > span { display: none; }
  .rail-replie .nav-pastille { position: absolute; top: 6px; right: 8px; margin: 0; }

  #app.coquille {
    display: grid;
    transition: grid-template-columns var(--duree) var(--ease);
    grid-template-columns: var(--largeur-rail) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'rail entete'
      'rail vue';
    min-height: 100dvh;
  }

  /* Colonne latérale */
  .nav {
    grid-area: rail;
    position: sticky;
    top: 0;
    left: auto; right: auto; bottom: auto;
    align-self: start;
    height: 100dvh;
    padding: 26px 16px;
    background: var(--surface);
    border-right: 1px solid var(--ligne);
    display: flex;
    flex-direction: column;
  }
  .nav-corps {
    max-width: none;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 13px 16px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    font-weight: 500;
  }
  /* Le rail est large : les libellés tiennent sur une ligne, à gauche. */
  .nav-item > span { min-height: 0; text-align: left; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item[aria-current='page']::after { display: none; }
  .nav-item[aria-current='page'] svg { transform: none; }
  .nav-pastille { position: static; margin-left: auto; border-width: 0; }

  .entete {
    grid-area: entete;
    padding: 26px var(--gouttiere) 20px;
  }
  .entete-corps { max-width: var(--largeur-max); }

  .vue {
    grid-area: vue;
    max-width: var(--largeur-max);
    padding: 30px var(--gouttiere) 64px;
  }

  .toasts { left: auto; right: 28px; bottom: 28px; transform: none; }

  /* La largeur disponible sert à montrer plus, pas à étirer les lignes. */
  .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  /* Six mesures : deux rangées de trois plutôt qu'une rangée de cinq
     suivie d'une carte orpheline. */
  .stats:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
  .liste { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .grille-champs.trois { grid-template-columns: repeat(3, 1fr); }
  .question-carte { padding: 30px 28px 24px; }
  .reponses { gap: 9px; }
  .reponse { min-height: 58px; padding: 13px 18px; }
}

/* Écran large : la rangée de six mesures tient d'un seul tenant. */
@media (min-width: 1360px) {
  .stats:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr); }
}

/* Très large : marges plus généreuses, et les blocs de prose cessent de
   s'étirer — au-delà d'une certaine longueur, l'œil perd la ligne suivante. */
@media (min-width: 1600px) {
  :root { --gouttiere: 52px; }
  .vue > .section > .feuillet > .feuillet-note,
  .vue > .section > .feuillet > .aide-champ { max-width: 92ch; }
}

/* ------------------------------------------------------------ impression */

@media print {
  body::before, .orbe, .nav, .entete, .toasts, .btn, .bandeau-sync { display: none !important; }
  body { background: #fff; color: #000; }
  .vue { max-width: none; padding: 0; }
  .reveler { opacity: 1 !important; transform: none !important; animation: none !important; }
  .feuillet, .ligne-loge { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; background: #fff; }
}

/* --------------------------------------------------------------- divers */

.centre { text-align: center; }
.muet { color: var(--texte-sourd); }
.petit { font-size: 13px; }
.gras { font-weight: 600; }
.nb { font-variant-numeric: tabular-nums; }
.pile { display: grid; gap: 11px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rangee { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
hr.filet {
  border: 0;
  height: 1px;
  margin: 20px 0;
  background: var(--ligne);
}