/* ==========================================================================
   cbmercier.com — feuille de style de la page publique
   --------------------------------------------------------------------------
   Autonome : aucune police, image ou ressource distante, aucune règle d'import.
   Compatible CSP stricte (aucun style inline requis dans le HTML).
   Palette et tokens issus de la charte visuelle interne. Thème sombre
   unique — voir section 1.

   Ce fichier est servi en clair sur l'apex : il ne doit rien contenir qui
   ne soit déjà public. Pas de nom d'application non listée sur cette page,
   pas de chemin de code source, pas de référence d'infrastructure. La
   traçabilité détaillée des tokens vit dans le README du livrable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — charte visuelle interne
   --------------------------------------------------------------------------
   Valeurs reprises telles quelles de la charte, à une exception près
   (--faint, voir la note). Les ratios indiqués sont mesurés contre --bg.

   THÈME UNIQUE, SOMBRE, et volontairement : la charte ne prévoit pas de
   bascule clair/sombre. Un portail qui passerait au blanc chez un visiteur
   en mode clair créerait une rupture avec ce qui s'ouvre derrière.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --bg: #0d0d0d; /* canvas des sections les plus profondes */
  --surface: #202020; /* cartes */
  --surface-hover: #242424; /* carte survolée */
  --line: #262626; /* hairline douce */
  --line-strong: #2e2e2e; /* hairline */

  --text: #ebdfd2; /* 14.8:1 */
  --text-soft: #e1d5c8; /* 13.5:1 */
  --muted: #989189; /* 6.2:1 */
  /* Le niveau « texte discret » de la charte (#6f6862) plafonne à 3.6:1 :
     sous le seuil AA pour les 11-12 px que porte ce rôle ici. Relevé dans la
     même teinte chaude jusqu'à tenir AA y compris posé sur --surface
     (l'apex du panneau « Mes applications »). */
  --faint: #8e8880; /* 5.5:1 sur --bg — 4.6:1 sur --surface */

  --accent: #df8f48; /* 7.6:1 */
  --accent-bright: #eaa05c; /* 9.0:1 */
  --focus: #df8f48;

  /* Rythme */
  /* 43rem et non 50 : à deux entrées, une mesure large creuse la ligne au
     lieu de la remplir. Resserrée jusqu'au point où les descriptions
     courtes tiennent sur une ligne et où le pied de page ne se scinde pas. */
  --measure: 43rem;
  --pad-x: 1.5rem;
  --radius: 12px; /* rayon carte de la charte */
  --radius-sm: 6px; /* rayon boutons/champs de la charte */

  /* Familles — piles système, aucun téléchargement.
     La charte s'appuie sur des polices chargées par le réseau, ce qui est
     exclu ici. La pile système rend SF Pro sur Mac et iPhone, le gabarit le
     plus proche. */
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --motion: 0.16s cubic-bezier(0.4, 0, 0.2, 1); /* transition de la charte */
}

@media (min-width: 40rem) {
  :root {
    --pad-x: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px; /* corps de la charte */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

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

/* --------------------------------------------------------------------------
   3. Ossature
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem var(--pad-x) 3rem;
}

@media (min-width: 40rem) {
  .page {
    padding-top: 5.5rem;
    padding-bottom: 4rem;
  }
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   4. Bandeau — l'apex du domaine tient lieu de titre
   -------------------------------------------------------------------------- */

.masthead {
  margin-bottom: 3rem;
}

@media (min-width: 40rem) {
  .masthead {
    margin-bottom: 3.75rem;
  }
}

.masthead__title {
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}

.masthead__lede {
  margin: 1.125rem 0 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. Répertoire d'applications
   Une liste réglée à la hairline, pas une grille de cartes flottantes :
   les sous-domaines forment une colonne verticale lisible d'un coup d'oeil.
   -------------------------------------------------------------------------- */

.directory {
  margin: 0 0 3rem;
}

.directory__label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.25rem;
}

.directory__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--line);
}

.directory__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.directory__list > li {
  border-top: 1px solid var(--line);
}

.directory__list > li:last-child {
  border-bottom: 1px solid var(--line);
}

/* --- Une entrée = un lien pleine largeur --- */

.app {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "id     arrow"
    "desc   desc";
  column-gap: 1rem;
  row-gap: 0.5rem;
  padding: 1.125rem 0.75rem 1.25rem;
  margin: 0 -0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--motion);
}

@media (min-width: 40rem) {
  .app {
    grid-template-columns: 12.5rem 1fr auto;
    grid-template-areas: "id desc arrow";
    align-items: start;
    column-gap: 1.5rem;
    padding-top: 1.375rem;
    padding-bottom: 1.375rem;
  }
}

.app:hover {
  background-color: var(--surface-hover);
}

.app__id {
  grid-area: id;
  min-width: 0;
}

.app__name {
  display: inline;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* --- États d'application ---------------------------------------------------
   Système à deux niveaux, parce que deux choses différentes sont à dire.

   1. `.app__state` seul — NEUTRE. Un statut assumé et durable, pas un
      incident : « Prototype ». Rien à réparer, donc rien qui doive alerter.
   2. ALERTE — un service qui devrait marcher et ne marche pas. Ce niveau
      n'est PAS défini ici : aucune entrée publique ne le porte aujourd'hui, et
      une règle inutilisée est du code mort. Pour le rétablir, ajouter le token
      `--state-down: #e57a62;` (variante claire du rouge de la charte : le rouge
      de base tombe à 4.47:1 sur une ligne survolée) et la règle
      `.app__state--down { color: var(--state-down); }`. La feuille du tableau
      de bord en porte une copie de référence.

   Ne pas confondre les deux : peindre un parti pris en rouge fait croire à une
   panne, et afficher une panne en gris la fait manquer.

   Un constat conjoncturel (« les images ne s'affichent plus ») n'a rien à
   faire dans une pastille : il vit dans la description, d'où il se retire sans
   toucher au statut. La ligne reste cliquable dans tous les cas : l'état
   informe, il ne bloque pas.
   -------------------------------------------------------------------------- */

.app__state {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.03125rem 0.4375rem 0.09375rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
  color: var(--muted); /* niveau 1 — statut neutre (6.2:1 / 5.0:1 survolé) */
}

.app__host {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* Le sous-domaine en or, l'apex en retrait : répété sur chaque ligne, cela
   dessine une colonne d'adresses — la structure du domaine devient lisible. */
.host-sub {
  color: var(--accent);
  font-weight: 500;
}

.host-apex {
  color: var(--faint);
  transition: color var(--motion);
}

.app:hover .host-apex,
.app:focus-visible .host-apex,
.gateway:hover .host-apex,
.gateway:focus-visible .host-apex {
  color: var(--muted);
}

.app__desc {
  grid-area: desc;
  margin: 0;
  max-width: 52ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.app__arrow {
  grid-area: arrow;
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.125rem;
  color: var(--faint);
  transition: color var(--motion), transform var(--motion);
}

.app:hover .app__arrow,
.app:focus-visible .app__arrow {
  color: var(--accent-bright);
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   6. Passerelle vers le tableau de bord privé
   Seule surface pleine de la page : c'est l'action principale.
   -------------------------------------------------------------------------- */

.gateway {
  display: block;
  padding: 1.25rem 1.25rem 1.375rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--motion), background-color var(--motion);
}

@media (min-width: 44rem) {
  .gateway {
    padding: 1.25rem 1.5rem 1.375rem;
  }
}

.gateway:hover {
  border-color: var(--line-strong);
  background-color: var(--surface-hover);
}

.gateway__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.gateway__lock {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--accent);
}

.gateway__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

.gateway__arrow {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-left: auto;
  color: var(--faint);
  transition: color var(--motion), transform var(--motion);
}

.gateway:hover .gateway__arrow,
.gateway:focus-visible .gateway__arrow {
  color: var(--accent-bright);
  transform: translate(2px, -2px);
}

.gateway__desc {
  display: block;
  margin: 0.5rem 0 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.gateway__host {
  display: block;
  margin-top: 0.875rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7. Pied de page
   -------------------------------------------------------------------------- */

.colophon {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.375rem 2rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--faint);
}

.colophon p {
  margin: 0;
}

.colophon__note {
  font-family: var(--mono);
  letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   8. Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .app:hover .app__arrow,
  .app:focus-visible .app__arrow,
  .gateway:hover .gateway__arrow,
  .gateway:focus-visible .gateway__arrow {
    transform: none;
  }
}