/*
 * theme.css — thème Material Design 3 commun (ADR-009, FR-000-20).
 *
 * Fichier généré/composé une fois puis COPIÉ À L'IDENTIQUE dans les deux
 * sous-modules (app-conseiller/app/static/theme.css et
 * app-recruteur/app/static/theme.css) — T023 vérifie par un test d'identité
 * que les deux copies ne divergent jamais. Voir docs/design/theme.md.
 *
 * Régénérer les rôles de couleur : docs/design/tools/generate_theme.py
 * (algorithme HCT officiel, déterministe — jamais de valeur choisie à la
 * main).
 */

/* Source : #5356d6 — généré par docs/design/tools/generate_theme.py (HCT, spec 2021, variant TonalSpot) */
:root {
  --md-sys-color-background: #fcf8ff;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-inverse-on-surface: #f3eff7;
  --md-sys-color-inverse-primary: #c0c1ff;
  --md-sys-color-inverse-surface: #303036;
  --md-sys-color-on-background: #1b1b21;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-on-primary-container: #3f4178;
  --md-sys-color-on-primary-fixed: #13144b;
  --md-sys-color-on-primary-fixed-variant: #3f4178;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-on-secondary-container: #454559;
  --md-sys-color-on-secondary-fixed: #191a2c;
  --md-sys-color-on-secondary-fixed-variant: #454559;
  --md-sys-color-on-surface: #1b1b21;
  --md-sys-color-on-surface-variant: #46464f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-on-tertiary-container: #5f3c51;
  --md-sys-color-on-tertiary-fixed: #2e1125;
  --md-sys-color-on-tertiary-fixed-variant: #5f3c51;
  --md-sys-color-outline: #777680;
  --md-sys-color-outline-variant: #c8c5d0;
  --md-sys-color-primary: #575992;
  --md-sys-color-primary-container: #e1e0ff;
  --md-sys-color-primary-fixed: #e1e0ff;
  --md-sys-color-primary-fixed-dim: #c0c1ff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-secondary: #5d5c72;
  --md-sys-color-secondary-container: #e2e0f9;
  --md-sys-color-secondary-fixed: #e2e0f9;
  --md-sys-color-secondary-fixed-dim: #c6c4dd;
  --md-sys-color-shadow: #000000;
  --md-sys-color-surface: #fcf8ff;
  --md-sys-color-surface-bright: #fcf8ff;
  --md-sys-color-surface-container: #f0ecf4;
  --md-sys-color-surface-container-high: #eae7ef;
  --md-sys-color-surface-container-highest: #e4e1e9;
  --md-sys-color-surface-container-low: #f6f2fa;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-dim: #dcd9e0;
  --md-sys-color-surface-tint: #575992;
  --md-sys-color-surface-variant: #e4e1ec;
  --md-sys-color-tertiary: #79536a;
  --md-sys-color-tertiary-container: #ffd8ec;
  --md-sys-color-tertiary-fixed: #ffd8ec;
  --md-sys-color-tertiary-fixed-dim: #e9b9d3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-background: #131318;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-inverse-on-surface: #303036;
    --md-sys-color-inverse-primary: #575992;
    --md-sys-color-inverse-surface: #e4e1e9;
    --md-sys-color-on-background: #e4e1e9;
    --md-sys-color-on-error: #690005;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-on-primary: #292a60;
    --md-sys-color-on-primary-container: #e1e0ff;
    --md-sys-color-on-primary-fixed: #13144b;
    --md-sys-color-on-primary-fixed-variant: #3f4178;
    --md-sys-color-on-secondary: #2e2f42;
    --md-sys-color-on-secondary-container: #e2e0f9;
    --md-sys-color-on-secondary-fixed: #191a2c;
    --md-sys-color-on-secondary-fixed-variant: #454559;
    --md-sys-color-on-surface: #e4e1e9;
    --md-sys-color-on-surface-variant: #c8c5d0;
    --md-sys-color-on-tertiary: #46263a;
    --md-sys-color-on-tertiary-container: #ffd8ec;
    --md-sys-color-on-tertiary-fixed: #2e1125;
    --md-sys-color-on-tertiary-fixed-variant: #5f3c51;
    --md-sys-color-outline: #918f9a;
    --md-sys-color-outline-variant: #46464f;
    --md-sys-color-primary: #c0c1ff;
    --md-sys-color-primary-container: #3f4178;
    --md-sys-color-primary-fixed: #e1e0ff;
    --md-sys-color-primary-fixed-dim: #c0c1ff;
    --md-sys-color-scrim: #000000;
    --md-sys-color-secondary: #c6c4dd;
    --md-sys-color-secondary-container: #454559;
    --md-sys-color-secondary-fixed: #e2e0f9;
    --md-sys-color-secondary-fixed-dim: #c6c4dd;
    --md-sys-color-shadow: #000000;
    --md-sys-color-surface: #131318;
    --md-sys-color-surface-bright: #39383f;
    --md-sys-color-surface-container: #1f1f25;
    --md-sys-color-surface-container-high: #2a292f;
    --md-sys-color-surface-container-highest: #35343a;
    --md-sys-color-surface-container-low: #1b1b21;
    --md-sys-color-surface-container-lowest: #0e0e13;
    --md-sys-color-surface-dim: #131318;
    --md-sys-color-surface-tint: #c0c1ff;
    --md-sys-color-surface-variant: #46464f;
    --md-sys-color-tertiary: #e9b9d3;
    --md-sys-color-tertiary-container: #5f3c51;
    --md-sys-color-tertiary-fixed: #ffd8ec;
    --md-sys-color-tertiary-fixed-dim: #e9b9d3;
  }
}

/* Gabarit visuel de smartphone (A4, app-conseiller uniquement) : thème
 * FORCÉ en clair, indépendamment de `prefers-color-scheme` — décision du
 * directeur (2026-09-09), qui prime sur le critère « souhaitable, non
 * bloquant » de FR-000-33. La simulation de smartphone reproduit la
 * maquette de référence (cahier-des-charges/workspace/app-m3-evenements),
 * qui n'a jamais eu de variante sombre ; le mode sombre du système ne doit
 * pas s'y appliquer. Redéclare les mêmes valeurs que le bloc :root clair
 * ci-dessus, scopées à l'élément — la cascade des propriétés personnalisées
 * CSS les fait gagner sur celles posées par le bloc @media plus haut, sans
 * dépendre de l'ordre des règles ni de leur spécificité (élément différent).
 * `app-recruteur` n'utilise jamais cette classe : son thème continue de
 * suivre `prefers-color-scheme` normalement (FR-000-33 inchangée pour lui). */
.crust-gabarit-smartphone {
  --md-sys-color-background: #fcf8ff;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-inverse-on-surface: #f3eff7;
  --md-sys-color-inverse-primary: #c0c1ff;
  --md-sys-color-inverse-surface: #303036;
  --md-sys-color-on-background: #1b1b21;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-on-primary-container: #3f4178;
  --md-sys-color-on-primary-fixed: #13144b;
  --md-sys-color-on-primary-fixed-variant: #3f4178;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-on-secondary-container: #454559;
  --md-sys-color-on-secondary-fixed: #191a2c;
  --md-sys-color-on-secondary-fixed-variant: #454559;
  --md-sys-color-on-surface: #1b1b21;
  --md-sys-color-on-surface-variant: #46464f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-on-tertiary-container: #5f3c51;
  --md-sys-color-on-tertiary-fixed: #2e1125;
  --md-sys-color-on-tertiary-fixed-variant: #5f3c51;
  --md-sys-color-outline: #777680;
  --md-sys-color-outline-variant: #c8c5d0;
  --md-sys-color-primary: #575992;
  --md-sys-color-primary-container: #e1e0ff;
  --md-sys-color-primary-fixed: #e1e0ff;
  --md-sys-color-primary-fixed-dim: #c0c1ff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-secondary: #5d5c72;
  --md-sys-color-secondary-container: #e2e0f9;
  --md-sys-color-secondary-fixed: #e2e0f9;
  --md-sys-color-secondary-fixed-dim: #c6c4dd;
  --md-sys-color-shadow: #000000;
  --md-sys-color-surface: #fcf8ff;
  --md-sys-color-surface-bright: #fcf8ff;
  --md-sys-color-surface-container: #f0ecf4;
  --md-sys-color-surface-container-high: #eae7ef;
  --md-sys-color-surface-container-highest: #e4e1e9;
  --md-sys-color-surface-container-low: #f6f2fa;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-dim: #dcd9e0;
  --md-sys-color-surface-tint: #575992;
  --md-sys-color-surface-variant: #e4e1ec;
  --md-sys-color-tertiary: #79536a;
  --md-sys-color-tertiary-container: #ffd8ec;
  --md-sys-color-tertiary-fixed: #ffd8ec;
  --md-sys-color-tertiary-fixed-dim: #e9b9d3;
}

/* ---------------------------------------------------------------------- *
 * Typographie — échelle M3 complète (m3.material.io/styles/typography).
 * Police système par défaut, aucune police distante (ADR-009, Principe I).
 * ---------------------------------------------------------------------- */
:root {
  --md-ref-typeface-brand: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-ref-typeface-plain: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight: 400;

  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight: 400;

  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight: 400;

  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: 400;

  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight: 400;

  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight: 400;

  --md-sys-typescale-title-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: 400;

  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: 500;

  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: 500;

  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: 400;

  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight: 400;

  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight: 400;

  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: 500;

  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: 500;

  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: 500;
}

/* ---------------------------------------------------------------------- *
 * Formes — échelle M3 (m3.material.io/styles/shape).
 * ---------------------------------------------------------------------- */
:root {
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

/* ---------------------------------------------------------------------- *
 * Cibles tactiles — accessibilité (constitution).
 * ---------------------------------------------------------------------- */
:root {
  --crust-touch-target-min: 48px;
}

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

body {
  margin: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--md-ref-typeface-plain);
}

/* ---------------------------------------------------------------------- *
 * Breakpoints M3 (ADR-009) : Compact < 600dp · Medium 600-839 ·
 * Expanded 840-1199 · Large >= 1200 (Extra-large traité comme Large).
 * En rendu web, 1dp = 1px (aucune mise à l'échelle d'écran physique ici).
 * ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- *
 * Classes de disposition — mises en page canoniques M3 absentes de
 * Material Web Components (ADR-007 conséquence négative, ADR-009).
 *
 * .crust-layout-une-zone      : Compact/Medium, une seule colonne de contenu.
 * .crust-layout-list-detail   : Expanded/Large, deux zones côte à côte
 *                                (liste à gauche, détail à droite).
 * .crust-layout-supporting-pane : Expanded/Large, contenu principal + panneau
 *                                de support (largeur fixe) à droite.
 * ---------------------------------------------------------------------- */
.crust-layout-une-zone {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}

.crust-layout-list-detail,
.crust-layout-supporting-pane {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}

@media (min-width: 840px) {
  .crust-layout-list-detail {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 2fr;
    gap: 24px;
    align-items: start;
  }

  .crust-layout-supporting-pane {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 320px);
    gap: 24px;
    align-items: start;
  }
}

/* Enveloppe rail + contenu (FIX-T057) — à utiliser à la place de
 * `.crust-layout-list-detail`/`.crust-layout-supporting-pane` quand l'écran
 * n'a qu'UNE zone de contenu réelle (ex. une liste) à côté du rail : ces deux
 * autres classes dimensionnent leur première colonne pour un contenu
 * comparable en importance (`minmax(320px, 1fr)`), ce qui est correct pour
 * une vraie deuxième zone mais laisse un vide non fonctionnel si on y loge le
 * rail (80px de large). Le rail garde son affichage propre
 * (`.crust-navigation-rail`, display:none en dessous de 840px) ; seule la
 * mise en page du conteneur change ici. */
.crust-avec-rail {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}

@media (min-width: 840px) {
  .crust-avec-rail {
    display: flex;
    align-items: stretch;
  }

  .crust-avec-rail > :not(.crust-navigation-rail) {
    flex: 1;
    min-width: 0;
  }
}

/* Barre de navigation en bas (Compact/Medium) devient un rail latéral en
 * Expanded/Large — convention M3. Le composant `<md-navigation-bar>` est
 * disponible (labs) ; le rail n'a pas d'équivalent en composant (T018,
 * theme.md § Composants manquants) et est donc réimplémenté ci-dessous en
 * pur CSS/HTML, avec les mêmes tokens de couleur/forme que la barre. */
.crust-navigation-rail {
  display: none;
}

@media (min-width: 840px) {
  .crust-navigation-bas {
    display: none;
  }

  .crust-navigation-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 80px;
    padding-block: 44px;
    background: var(--md-sys-color-surface);
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }

  .crust-navigation-rail .crust-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: var(--crust-touch-target-min);
    min-height: var(--crust-touch-target-min);
    padding: 8px 12px;
    border-radius: var(--md-sys-shape-corner-large);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);
    text-decoration: none;
    cursor: pointer;
  }

  .crust-navigation-rail .crust-rail-item[aria-current="page"] {
    color: var(--md-sys-color-on-secondary-container);
  }

  .crust-navigation-rail .crust-rail-item[aria-current="page"] .crust-rail-indicator {
    background: var(--md-sys-color-secondary-container);
  }

  .crust-navigation-rail .crust-rail-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border-radius: var(--md-sys-shape-corner-full);
  }
}

/* ---------------------------------------------------------------------- *
 * Barre d'application (top app bar) — pas de composant `<md-*>` dans
 * @material/web (T018, theme.md § Composants manquants) : réimplémentée en
 * CSS/HTML sur les tokens M3 « small » (m3.material.io/components/top-app-bar).
 * ---------------------------------------------------------------------- */
.crust-top-app-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding-inline: 4px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.crust-top-app-bar .crust-top-app-bar-titre {
  flex: 1;
  font: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);
  padding-inline-start: 12px;
}

/* ---------------------------------------------------------------------- *
 * Snackbar — pas de composant `<md-*>` dans @material/web (T018, theme.md
 * § Composants manquants) : réimplémentée en CSS/HTML + `<dialog>` ou zone
 * `aria-live`, sur les tokens M3 (m3.material.io/components/snackbar).
 * ---------------------------------------------------------------------- */
.crust-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--crust-touch-target-min);
  max-width: min(90vw, 560px);
  padding: 8px 8px 8px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);
  box-shadow: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
}

/* ---------------------------------------------------------------------- *
 * Gabarit visuel de smartphone (amendement A4, ADR-004) — encadre le
 * contenu de app-conseiller d'un cadre CSS statique évoquant un Samsung
 * Galaxy A9 (ratio d'écran 20:9, coins arrondis, caméra perforée, boutons
 * latéraux, barre de navigation Android). Purement décoratif : aucune
 * émulation fonctionnelle. Absent de la vitrine (FR-000-23). Dimensions et
 * silhouette reprises de la maquette fournie par le directeur
 * (cahier-des-charges/workspace.zip, app-m3-evenements/css/tokens.css) —
 * seule la palette de couleurs vient du thème M3 commun (ADR-009).
 * Implémenté ici (thème commun) alors que seul app-conseiller l'active —
 * cohérent avec la duplication assumée du thème.
 * ---------------------------------------------------------------------- */
.crust-gabarit-smartphone {
  --crust-phone-largeur: 384px;
  --crust-phone-hauteur: 864px;
  --crust-phone-bordure: 11px;
  --crust-phone-rayon: 46px;

  position: relative;
  margin-inline: auto;
  /* FIX-T056 : largeur fluide plutôt que fixe — un châssis figé à 406px
     (384 + 2×11 de bezel) déborde de tout viewport plus étroit que ça, ce
     qui inclut le point de recette Compact à 400px (SC-000-05). `min(...,
     100%)` + `aspect-ratio` laissent le châssis remplir sa zone disponible
     sans jamais la dépasser, tout en gardant les proportions du Galaxy A9. */
  width: min(calc(var(--crust-phone-largeur) + var(--crust-phone-bordure) * 2), 100%);
  /* FIX-2026-09-09 : `aspect-ratio` n'accepte pas deux `calc()` combinant
     des `var()` comme paire de <ratio> — Chromium ignore silencieusement
     la déclaration entière (`getComputedStyle().aspectRatio` retombe à
     `auto`, vérifié empiriquement), et le châssis perdait alors toute
     hauteur imposée : sa hauteur devenait celle de son contenu (~624px au
     lieu de 886px), d'où le ratio 20:9 non respecté signalé en revue.
     Valeurs numériques littérales (406 = 384 + 2×11, 886 = 864 + 2×11) —
     `aspect-ratio` exige un <ratio> de deux <number>, pas des longueurs. */
  aspect-ratio: 406 / 886;
  padding: var(--crust-phone-bordure);
  border-radius: var(--crust-phone-rayon);
  background: linear-gradient(145deg, #2c2c36 0%, #101017 45%, #34343f 100%);
  box-shadow:
    0 40px 80px -20px rgb(20 18 48 / 45%),
    0 10px 24px rgb(20 18 48 / 28%),
    inset 0 0 0 1px rgb(255 255 255 / 10%),
    inset 0 0 0 3px #06060a;
}

.crust-gabarit-smartphone .crust-phone-camera {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #3c4358 0 25%, #0b0d16 62%);
  box-shadow: inset 0 0 0 1.5px #000, 0 0 2px rgb(255 255 255 / 14%);
  z-index: 3;
}

.crust-gabarit-smartphone .crust-phone-bouton {
  position: absolute;
  background: linear-gradient(90deg, #23232c, #3a3a46);
  border-radius: 3px;
}

.crust-gabarit-smartphone .crust-phone-bouton--power {
  right: -3px;
  top: 200px;
  width: 3px;
  height: 64px;
}

.crust-gabarit-smartphone .crust-phone-bouton--volume-haut {
  left: -3px;
  top: 170px;
  width: 3px;
  height: 34px;
}

.crust-gabarit-smartphone .crust-phone-bouton--volume-bas {
  left: -3px;
  top: 212px;
  width: 3px;
  height: 34px;
}

.crust-gabarit-smartphone .crust-phone-ecran {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--crust-phone-rayon) - var(--crust-phone-bordure) + 2px);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: inset 0 0 0 1px #000;
  display: flex;
  flex-direction: column;
}

.crust-gabarit-smartphone .crust-phone-contenu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Barre d'état Android (statique, décorative). */
.crust-phone-statusbar {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 20px;
  font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

/* FIX-2026-09-09 : `@media (min-width: 840px)` (règle `.crust-navigation-rail`
 * ci-dessus) répond à la largeur du VIEWPORT du navigateur, pas à la largeur
 * de la zone de contenu (384px, fixe) à l'intérieur du gabarit — sur tout
 * navigateur de bureau normal (≥ 840px de large), la règle bascule vers le
 * rail, mais `accueil.html`/`detail.html` de app-conseiller ne rendent
 * jamais de `.crust-navigation-rail` : résultat, plus aucune navigation
 * visible du tout (bug signalé en revue : « il manque la bottom bar »).
 * Rappel A4 : le contenu à l'intérieur du cadre reste soumis aux critères
 * Compact SEULS, indépendamment de la fenêtre du navigateur qui l'entoure —
 * cette redéclaration (2 classes, plus spécifique que la règle 1 classe du
 * bloc @media ci-dessus) le fait respecter sans dépendre de l'ordre des
 * règles. */
.crust-gabarit-smartphone .crust-navigation-bas {
  display: flex;
}

.crust-gabarit-smartphone .crust-navigation-rail {
  display: none;
}

/* Puces M3 (assistives/tonales) et bouton chevron des cartes d'accueil,
 * repris à l'identique de la maquette de référence
 * (cahier-des-charges/workspace/app-m3-evenements/css/styles.css, règles
 * .chip / .chip--tonal / .icon-btn--filled) — revue graphique du
 * 2026-09-09 : l'existant sert de base, la fonctionnalité cible s'y
 * ajoute sans le réinventer. */
.crust-carte-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crust-chip {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-label-large-weight) 13px/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);
  white-space: nowrap;
}

.crust-chip svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.crust-chip--tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-primary);
}

.crust-chip--outline {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.crust-chip--compte {
  font-weight: 500;
}

.crust-icon-chevron {
  margin-left: auto;
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.crust-icon-chevron svg {
  width: 20px;
  height: 20px;
}

/* Scène qui centre le gabarit de smartphone à l'écran (app-conseiller
 * uniquement — A4). Fond dégradé décoratif repris À L'IDENTIQUE (mêmes
 * couleurs hexadécimales, pas de jeton M3) de la maquette de référence
 * (cahier-des-charges/workspace/app-m3-evenements/css/styles.css, règle
 * `body`) — volontairement HORS cascade de thème pour rester fixe, clair,
 * quel que soit `prefers-color-scheme` (voir `.crust-gabarit-smartphone`
 * ci-dessus pour le même principe appliqué au contenu de l'écran). */
.crust-scene {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 12px;
  background:
    radial-gradient(1200px 800px at 20% 0%, #eef0ff 0%, rgba(238, 240, 255, 0) 55%),
    radial-gradient(1000px 900px at 90% 100%, #e9e6f5 0%, rgba(233, 230, 245, 0) 60%),
    #dfe1ec;
}