/* Flawken - les pages de compte (connexion, inscription, mot de passe, Mes espaces, administration).
   Design « Encre & Signal » repris de flawken.com : papier chaud, encre quasi noire, un seul accent chartreuse,
   Fraunces pour les titres, Inter pour le texte, JetBrains Mono pour les surtitres. */
:root {
  --signal: #c8f032; --signal-ink: #5d7400;
  --paper: #f4f3ee; --paper-2: #eae8e0; --surface: #fbfaf6;
  --ink: #15140f; --ink-2: #55514a; --ink-3: #6e6a60;
  --line: rgba(21,20,15,.14); --line-2: rgba(21,20,15,.07); --hair: rgba(21,20,15,.22);
  --danger: #b4232c; --danger-fond: #fbe9e7;
  --ease: cubic-bezier(.2,.7,.2,1);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', 'Times New Roman', serif;
}
[data-theme="dark"] {
  --paper: #100f0c; --paper-2: #171510; --surface: #1b1813;
  --ink: #f4f2ea; --ink-2: #aaa399; --ink-3: #6f6a5f;
  --line: rgba(244,242,234,.15); --line-2: rgba(244,242,234,.07); --hair: rgba(244,242,234,.26);
  --danger: #ff8a7f; --danger-fond: #3a1a17;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); background: var(--paper); color: var(--ink);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* le grain du papier, comme sur la vitrine */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .16; }
a { color: inherit; }
::selection { background: var(--signal); color: #15140f; }
.sprite { position: absolute; }
.fk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

/* En-tête */
.fk-tete { position: relative; z-index: 3; border-bottom: 1px solid var(--line); }
.fk-nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px; }
.fk-marque { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 600; font-size: 1.34rem; letter-spacing: -.01em; text-decoration: none; }
.fk-logo { width: 30px; height: 30px; border-radius: 7px; }
.fk-liens { display: flex; align-items: center; gap: 8px; }
.fk-theme { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.fk-theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fk-theme:hover { border-color: var(--ink); }

/* Boutons en pilule */
.fk-btn, .pv-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 20px;
  border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--ink);
  font: 600 .9rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.fk-btn:hover, .pv-bouton:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
.fk-btn-primary, .pv-bouton.pv-principal { background: var(--signal); border-color: var(--signal); color: #15140f; }
.fk-btn-primary:hover, .pv-bouton.pv-principal:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fk-discret { border-color: transparent; color: var(--ink-2); }
.fk-discret:hover { background: transparent; color: var(--ink); border-color: var(--hair); transform: none; }
.fk-btn:focus-visible, .pv-bouton:focus-visible, .fk-theme:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
[data-theme="dark"] .fk-btn:focus-visible, [data-theme="dark"] .pv-bouton:focus-visible { outline-color: var(--signal); }

/* Corps et pied */
.fk-corps { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 56px 32px 80px; min-height: calc(100vh - 74px - 70px); }
.fk-pied { position: relative; z-index: 2; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .82rem; }
.fk-pied .fk-wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }

/* Formulaires (connexion, inscription, mot de passe) */
.pv-carte-formulaire { max-width: 440px; margin: 8px auto; padding: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pv-carte-formulaire h1 { margin: 0 0 22px; font-family: var(--serif); font-weight: 400; font-size: 2.1rem; letter-spacing: -.015em; line-height: 1.05; }
.pv-carte-formulaire > p { color: var(--ink-2); }
.pv-formulaire { display: grid; gap: 6px; }
.pv-formulaire label { margin-top: 8px; font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pv-formulaire label small { text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.pv-formulaire input[type="text"], .pv-formulaire input[type="email"], .pv-formulaire input[type="password"] {
  height: 46px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 6px;
  background: var(--paper); color: var(--ink); font: 400 1rem var(--sans);
}
.pv-formulaire input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 55%, transparent); }
.pv-formulaire button { margin-top: 18px; height: 48px; }
.pv-liens { margin: 20px 0 0; font-size: .88rem; color: var(--ink-2); text-align: center; }
.pv-liens a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.pv-liens a:hover { text-decoration-color: var(--ink); }
.pv-alerte { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--signal); border-radius: 4px; background: var(--paper-2); font-size: .92rem; }
.pv-alerte.pv-erreur { border-left-color: var(--danger); background: var(--danger-fond); color: var(--danger); }
.pv-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mes espaces */
.pv-tableau-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.pv-tableau-tete h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.8vw, 3.2rem); letter-spacing: -.015em; line-height: 1.04; }
.pv-nouvel-espace { margin: 0; }
.pv-espaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pv-espaces a {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.pv-espaces a:hover { border-color: var(--ink); transform: translateY(-2px); }
.pv-initiale { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--ink); color: var(--signal); font-family: var(--serif); font-size: 1.2rem; }
.pv-espace-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-espace-info { font: 400 .74rem/1.5 var(--mono); color: var(--ink-3); }
.pv-role { font-weight: 700; color: var(--signal-ink); }
[data-theme="dark"] .pv-role { color: var(--signal); }
.pv-vide { color: var(--ink-2); }

.pv-profil { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); max-width: 560px; }
.pv-profil h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.pv-profil > p { margin: 0 0 14px; color: var(--ink-2); }
.pv-formulaire-ligne button { justify-self: start; }
.pv-couleurs { display: flex; gap: 10px; margin: 10px 0 0; padding: 0; border: 0; }
.pv-couleurs legend { padding: 0; margin-bottom: 8px; font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pv-couleur { position: relative; margin: 0 !important; cursor: pointer; }
.pv-couleur input { position: absolute; opacity: 0; }
.pv-couleur span { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--c); }
.pv-couleur input:checked + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.pv-couleur input:focus-visible + span { outline: 2px solid var(--signal-ink); outline-offset: 4px; }
.pv-discret { color: var(--ink-3); font: .74rem/1.6 var(--mono); }

/* Page introuvable et administration (gabarits du socle) */
.socle-etroit { max-width: 560px; }
.socle-etroit h1, .surface-admin h1 { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; letter-spacing: -.015em; }

@media (max-width: 720px) {
  .fk-wrap { padding: 0 16px; }
  .fk-nav { height: 64px; }
  .fk-corps { padding: 32px 16px 56px; }
  .fk-liens .fk-discret, .fk-liens .fk-btn-ghost:not(:first-of-type) { display: none; }
  .fk-btn { padding: 0 14px; font-size: .82rem; height: 38px; }
  .pv-carte-formulaire { padding: 24px 20px; }
  .pv-tableau-tete { flex-direction: column; align-items: flex-start; }
  .fk-pied .fk-wrap { flex-direction: column; gap: 4px; }
}

/* Invitation */
.pv-surtitre { display: inline-block; margin-bottom: 10px; font: 500 .72rem/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--signal-ink); }
[data-theme="dark"] .pv-surtitre { color: var(--signal); }
.pv-invitation h1 { font-size: 1.9rem; }
.pv-invitation p { color: var(--ink-2); }
.pv-choix { display: grid; gap: 10px; margin: 18px 0 8px; }
.pv-invitation .pv-discret { margin-top: 14px; }

/* Claude : les clés d'accès */
.pv-cle-neuve { display: grid; gap: 8px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--signal-ink); border-radius: 10px; background: color-mix(in srgb, var(--signal) 18%, var(--surface)); }
[data-theme="dark"] .pv-cle-neuve { border-color: var(--signal); }
.pv-cle-neuve code, .pv-cles code { font: .82rem/1.5 var(--mono); }
.pv-cle, .pv-commande { display: block; padding: 10px 12px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); word-break: break-all; user-select: all; }
.pv-cles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.pv-cles li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.pv-cles li > span:first-child { flex: 1; min-width: 180px; }
.pv-revoquer { margin: 0 0 0 auto; }
.pv-revoquer .pv-bouton { height: 32px; padding: 0 12px; color: var(--danger); }

/* L'écran de consentement OAuth (CDC_CONNECTEURS K1) : le formulaire vient de c8r (classes h11k et t11d), la coquille
   n'habille que ce que h11k ne couvre pas : les groupes de choix, une case par ligne, les deux gestes. */
.pv-oauth .c8r-consentement fieldset { margin: 1.1rem 0; padding: .7rem 1rem .9rem; border: 1px solid var(--line, rgba(128,128,128,.4)); border-radius: 10px; }
.pv-oauth .c8r-consentement legend { padding: 0 .4rem; font-weight: 600; }
.pv-oauth .c8r-consentement fieldset label { display: block; margin: .45rem 0; line-height: 1.4; }
.pv-oauth .c8r-consentement fieldset input { margin-right: .5rem; }
.pv-oauth .t11d-gestes { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.pv-oauth .t11d-muet { opacity: .75; }
.pv-oauth .pv-oauth-select { display: block; margin: .3rem 0 .4rem 1.6rem; max-width: 100%; padding: .4rem .6rem; border-radius: 8px; }

/* La section « Connecteurs » (CDC_CONNECTEURS K2) : les IA branchées, l'adresse unique, la clé manuelle en repli. */
.pv-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 600 .72rem/1.6 var(--sans, inherit); font-style: normal; background: color-mix(in srgb, var(--signal) 22%, var(--surface)); color: var(--ink); vertical-align: middle; }
.pv-badge-ancien { background: var(--paper); border: 1px solid var(--line); }
.pv-cles .pv-discret { flex-basis: 100%; }
.pv-note { margin: 0 0 18px; font-size: .9rem; }
.pv-invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-connecter { margin-top: 10px; }
.pv-connecter > summary { display: inline-flex; cursor: pointer; list-style: none; }   /* inline-flex : le bouton centre son texte ainsi */
.pv-connecter > summary::-webkit-details-marker { display: none; }
.pv-connecter-corps { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: grid; gap: 12px; }
.pv-connecter-corps p { margin: 0; }
.pv-connecter-corps h3 { margin: 10px 0 0; font-size: 1.05rem; }
.pv-recettes { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
.pv-recettes dt { font-weight: 600; }
.pv-recettes dd { margin: 0; }
.pv-recettes code.pv-commande { display: block; }

/* Le choix à la création d'un espace et la Librairie des modèles (CDC_LIBRAIRIE_ESPACES). */
.pv-choix { margin: auto; width: min(520px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.pv-choix::backdrop { background: rgba(0, 0, 0, .45); }
.pv-choix:not([open]) { display: none; }   /* ceinture : jamais visible sans être ouvert, quoi que dise un navigateur */
.pv-choix h2 { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.pv-choix-options { display: grid; gap: 10px; margin-bottom: 16px; }
.pv-choix-option { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.pv-choix-option b { font-size: 1.05rem; }
.pv-choix-option span { color: var(--ink-2); font-size: .92rem; }
.pv-choix-option:hover, .pv-choix-option:focus-visible { border-color: var(--signal-ink); outline: none; background: color-mix(in srgb, var(--signal) 14%, var(--paper)); }
.pv-sous-titre { margin: 6px 0 0; color: var(--ink-2); max-width: 560px; }
.pv-modeles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pv-modele { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pv-modele h2 { margin: 4px 0 0; font-size: 1.15rem; }
.pv-modele p { margin: 0; }
.pv-modele form { margin-top: 6px; }
.pv-modele-apercu { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; height: 110px; padding: 10px; border-radius: 8px; background: var(--paper); border: 1px dashed var(--line); overflow: hidden; }
.pv-modele-apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-modele-carte { max-width: 46%; padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-modele-vide { margin: auto; color: var(--ink-2); font-size: .85rem; }