/* Fractality product UI — les écrans secondaires.
   Connexion, Applications, Automatisations, Espaces connectés, Réglages.
   Aucune couleur d'accent nouvelle : tout est tiré de tokens.css. Les volumes
   viennent d'écarts de gris et de filets, comme dans le prototype. */


/* ── Titres et intertitres ─────────────────────────────────────────── */

.fr-screen-title {
  margin: 0;
  color: var(--fr-color-ink);
  font-size: 20px;
  font-weight: var(--fr-font-weight-semibold);
  letter-spacing: -0.02em;
}

.fr-screen-lede {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--fr-color-muted);
  font-size: 13px;
  line-height: 1.6;
}

.fr-section { display: grid; gap: var(--fr-space-4); }

.fr-section-title {
  margin: 0;
  color: var(--fr-color-faint);
  font-size: 11px;
  font-weight: var(--fr-font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Carte générique ───────────────────────────────────────────────── */

.fr-card {
  padding: var(--fr-space-5);
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-card);
  background: var(--fr-card-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] .fr-card {
  border-color: rgba(206, 220, 243, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Grille de catalogue — Applications, Automatisations ───────────── */

.fr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--fr-space-4);
}

.fr-tile {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--fr-space-3);
  min-height: 168px;
  padding: var(--fr-space-5);
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-card);
  color: inherit;
  background: var(--fr-card-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--fr-duration-default) var(--fr-ease),
    border-color var(--fr-duration-default) var(--fr-ease),
    transform var(--fr-duration-default) var(--fr-ease);
}

.fr-tile:hover,
.fr-tile:focus-visible {
  border-color: rgba(70, 82, 71, 0.18);
  background: #fff;
  outline: none;
  transform: translateY(-1px);
}

.fr-tile-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--fr-radius-subaction);
  background: rgba(255, 255, 255, 0.82);
}
.fr-tile-icon img { width: 20px; height: 20px; opacity: 0.68; }

.fr-tile-name {
  margin: 0;
  color: var(--fr-color-ink);
  font-size: 14px;
  font-weight: var(--fr-font-weight-medium);
  letter-spacing: -0.01em;
}

.fr-tile-desc {
  margin: 0;
  color: var(--fr-color-muted);
  font-size: 12px;
  line-height: 1.5;
}

.fr-tile-foot {
  display: flex;
  align-items: center;
  gap: var(--fr-space-2);
  color: var(--fr-color-faint);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* La tuile de création : contour, pas de surface pleine. */
.fr-tile--new {
  place-content: center;
  place-items: center;
  grid-template-rows: auto auto;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.fr-tile--new .fr-tile-icon { background: rgba(255, 255, 255, 0.62); }

html[data-theme="dark"] .fr-tile {
  border-color: rgba(206, 220, 243, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .fr-tile:hover,
html[data-theme="dark"] .fr-tile:focus-visible {
  border-color: rgba(211, 224, 245, 0.14);
  background: #202733;
}
html[data-theme="dark"] .fr-tile-icon { background: rgba(255, 255, 255, 0.055); }
html[data-theme="dark"] .fr-tile-icon img { filter: invert(1); }
html[data-theme="dark"] .fr-tile--new .fr-tile-icon { background: rgba(255, 255, 255, 0.04); }

/* ── Rangée — Espaces connectés, Réglages ─────────────────────────── */

.fr-rows {
  display: grid;
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-card);
  overflow: hidden;
  background: var(--fr-card-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.fr-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fr-space-4);
  padding: var(--fr-space-4) var(--fr-space-5);
  border-top: 1px solid var(--fr-color-line);
}
.fr-row:first-child { border-top: 0; }
.fr-row--plain { grid-template-columns: minmax(0, 1fr) auto; }

.fr-row-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--fr-radius-subaction);
  background: rgba(255, 255, 255, 0.82);
}
.fr-row-icon img { width: 20px; height: 20px; opacity: 0.68; }

.fr-row-copy { min-width: 0; display: grid; gap: 3px; }
.fr-row-name {
  margin: 0;
  color: var(--fr-color-ink);
  font-size: 13px;
  font-weight: var(--fr-font-weight-medium);
}
.fr-row-meta {
  margin: 0;
  color: var(--fr-color-muted);
  font-size: 11px;
  line-height: 1.5;
}

/* Marque d'un service tiers : tuile blanche tenue dans les deux thèmes.
   Surtout PAS d'inversion — elle retournerait les couleurs du logo. Même
   traitement que la carte source du flux. */
.fr-row-icon--service { background: rgba(255, 255, 255, 0.92); }
.fr-row-icon--service img { width: 22px; height: 22px; opacity: 1; object-fit: contain; }

html[data-theme="dark"] .fr-row-icon--service { background: rgba(255, 255, 255, 0.92); }
html[data-theme="dark"] .fr-row-icon--service img { filter: none; }

html[data-theme="dark"] .fr-rows {
  border-color: rgba(206, 220, 243, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .fr-row-icon { background: rgba(255, 255, 255, 0.055); }
html[data-theme="dark"] .fr-row-icon img { filter: invert(1); }

/* ── Pastille d'état ───────────────────────────────────────────────── */

.fr-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-pill);
  background: rgba(255, 255, 255, 0.62);
  color: var(--fr-color-muted);
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.fr-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fr-color-faint);
}
/* L'état actif est le seul usage du vert, et il reste fonctionnel.
   La forme porte déjà l'information : le libellé est écrit, jamais déduit
   de la couleur seule. */
.fr-state--on::before { background: var(--fr-color-accent-deep); }

html[data-theme="dark"] .fr-state {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(206, 220, 243, 0.08);
}
html[data-theme="dark"] .fr-state--on::before { background: var(--fr-color-accent-deep); }

/* ── Bouton texte ──────────────────────────────────────────────────── */

.fr-button {
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-pill);
  color: var(--fr-color-ink);
  background: rgba(255, 255, 255, 0.72);
  font: var(--fr-font-weight-medium) 12px var(--fr-font-sans);
  cursor: pointer;
  transition:
    background var(--fr-duration-default) var(--fr-ease),
    transform var(--fr-duration-default) var(--fr-ease);
}
.fr-button:hover,
.fr-button:focus-visible { background: #fff; outline: none; transform: translateY(-1px); }

.fr-button--primary {
  border-color: transparent;
  color: #fff;
  background: var(--fr-color-send);
  box-shadow: 0 7px 18px rgba(25, 29, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.fr-button--primary:hover,
.fr-button--primary:focus-visible { background: var(--fr-color-send-hover); }

html[data-theme="dark"] .fr-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(206, 220, 243, 0.1);
}
html[data-theme="dark"] .fr-button:hover,
html[data-theme="dark"] .fr-button:focus-visible { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .fr-button--primary { color: #11151b; background: var(--fr-color-send); }
html[data-theme="dark"] .fr-button--primary:hover { background: var(--fr-color-send-hover); }

/* ── Interrupteur ──────────────────────────────────────────────────── */

.fr-switch {
  --fr-switch-w: 40px;
  position: relative;
  width: var(--fr-switch-w);
  height: 23px;
  flex: none;
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-pill);
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background var(--fr-duration-default) var(--fr-ease);
}
.fr-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--fr-color-faint);
  transition: transform var(--fr-duration-default) var(--fr-ease), background var(--fr-duration-default) var(--fr-ease);
}
.fr-switch[aria-checked="true"] { background: var(--fr-color-soft); }
.fr-switch[aria-checked="true"]::after {
  background: var(--fr-color-accent-deep);
  transform: translateX(calc(var(--fr-switch-w) - 23px));
}
.fr-switch:focus-visible { outline: none; background: #fff; }

html[data-theme="dark"] .fr-switch {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(206, 220, 243, 0.1);
}
html[data-theme="dark"] .fr-switch:focus-visible { background: rgba(255, 255, 255, 0.12); }

/* ── Connexion ─────────────────────────────────────────────────────── */

/* La page d'entrée n'a pas de rail : rien à naviguer tant qu'on n'est pas
   entré. Elle garde le fond de l'application, et le panneau est fait de la
   même matière que l'espace de travail — papier, filet blanc au sommet, ombre
   très diffuse. */

.fr-gate {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--fr-space-6);
  overflow: hidden;
  background: var(--fr-app-background);
}

/* Halo : une seule source de lumière douce derrière le panneau, qui détache
   le papier du fond sans ajouter ni cadre ni couleur. */
.fr-gate::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(940px, 150vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

html[data-theme="dark"] .fr-gate::before {
  background: radial-gradient(circle, rgba(126, 152, 205, 0.11) 0%, rgba(126, 152, 205, 0) 62%);
}

.fr-gate-theme {
  position: absolute;
  top: var(--fr-space-6);
  right: var(--fr-space-6);
  z-index: 2;
}

.fr-gate-panel {
  position: relative;
  width: min(404px, 100%);
  display: grid;
  gap: var(--fr-space-7);
  padding: 46px 40px 32px;
  border: 1px solid var(--fr-workspace-border);
  border-radius: 30px;
  background: var(--fr-workspace-background);
  box-shadow: inset 0 1px 0 #fff, 0 26px 80px rgba(48, 58, 73, 0.09);
  /* Même vocabulaire que les menus du produit : opacité, 8px, très légère
     réduction d'échelle. La page arrive, elle n'apparaît pas d'un coup. */
  animation: fr-gate-monte var(--fr-duration-panel) var(--fr-ease) both;
}

html[data-theme="dark"] .fr-gate-panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 30px 90px rgba(0, 0, 0, 0.32);
}

@keyframes fr-gate-monte {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* ── Signature ── */

.fr-gate-eyebrow {
  margin: 0 0 14px;
  color: var(--fr-color-faint);
  font-size: 10px;
  font-weight: var(--fr-font-weight-medium);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* Le mot-symbole tel que la marque l'écrit : Montserrat 500, interlettrage
   négatif. Aucune icône : le design system l'interdit tant qu'aucune n'est
   validée. */
.fr-gate-mark {
  margin: 0;
  color: var(--fr-color-ink);
  font-size: clamp(30px, 8vw, 36px);
  font-weight: var(--fr-font-weight-medium);
  letter-spacing: -0.055em;
  line-height: 1;
  text-align: center;
}

/* Le logo de Raph, tel quel (le mot en gras, fichier du 2026-09-08). Il est
   noir : en thème sombre on l'inverse, plutôt que de maintenir un second
   fichier qui finirait par diverger du premier. */
.fr-gate-logo {
  display: block;
  width: min(200px, 60vw);
  height: auto;
  margin: 0 auto;
}
[data-theme="dark"] .fr-gate-logo { filter: invert(1); }

/* Un filet qui s'efface aux extrémités : il pose la signature sans
   l'encadrer. */
.fr-gate-rule {
  width: 62px;
  height: 1px;
  margin: 22px auto 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--fr-color-line), transparent);
}

.fr-gate-lede {
  margin: 18px auto 0;
  max-width: 27ch;
  color: var(--fr-color-muted);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

/* ── Formulaire ── */

.fr-gate-form { display: grid; gap: var(--fr-space-3); }

.fr-gate-field {
  width: 100%;
  height: var(--fr-size-field);
  padding: 0 20px;
  border: 1px solid var(--fr-workspace-border);
  border-radius: var(--fr-radius-pill);
  outline: none;
  color: var(--fr-color-ink);
  background: var(--fr-field-background);
  box-shadow: var(--fr-shadow-field);
  font: var(--fr-font-weight-regular) 13px var(--fr-font-sans);
  letter-spacing: 0.06em;
  caret-color: var(--fr-color-send);
  transition: background var(--fr-duration-default) var(--fr-ease), border-color var(--fr-duration-default) var(--fr-ease);
}

.fr-gate-field::placeholder { letter-spacing: normal; color: var(--fr-color-faint); }

/* Le focus se voit à la surface, jamais à la couleur seule. */
.fr-gate-field:focus {
  border-color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 255, 255, 0.86);
}

.fr-gate-submit {
  height: var(--fr-size-field);
  border-radius: var(--fr-radius-pill);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Indice de verrouillage majuscule : n'existe que quand il sert. */
.fr-gate-indice {
  margin: 0;
  padding: 0 20px;
  color: var(--fr-color-muted);
  font-size: 11px;
  line-height: 1.4;
}
.fr-gate-indice[hidden] { display: none; }

/* ── Erreur ── */

.fr-gate-error {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 10px;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-quote);
  color: var(--fr-color-ink);
  background: var(--fr-quote-background);
  font-size: 12px;
  line-height: 1.45;
}
.fr-gate-error img { width: 16px; height: 16px; margin-top: 1px; opacity: 0.55; }

.fr-gate-foot {
  margin: 0;
  color: var(--fr-color-faint);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

html[data-theme="dark"] .fr-gate-panel { border-color: var(--fr-workspace-border); }
html[data-theme="dark"] .fr-gate-field { border-color: rgba(224, 231, 241, 0.24); caret-color: #f2f4f6; }
html[data-theme="dark"] .fr-gate-field::placeholder { color: #707b8b; }
html[data-theme="dark"] .fr-gate-field:focus {
  border-color: rgba(224, 231, 241, 0.42);
  background: rgba(38, 46, 58, 0.98);
}
html[data-theme="dark"] .fr-gate-error img { filter: invert(1); opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .fr-gate-panel { animation: none; }
}


@media (max-width: 680px) {
  .fr-grid { grid-template-columns: 1fr; }
  .fr-gate-panel { padding: 32px 24px 28px; }
  .fr-row { grid-template-columns: 42px minmax(0, 1fr); row-gap: var(--fr-space-3); }
  .fr-row > :last-child { grid-column: 1 / -1; justify-self: start; }
  .fr-row--plain { grid-template-columns: minmax(0, 1fr); }
}