/* ══════════════════════════════════════════════════════════════════
   CRÉER UN COMPTE — d'après « Frenchy Site - Créer un compte »

   Mesures de la maquette : colonne de 452 px, contenu de 660 px avec
   56 px de retrait, titres en Instrument Serif 40 et 36.

   Le socle du corps est déclaré ICI. C'est la leçon de la page
   Politique, qui rendait en blanc, en noir et en Times New Roman parce
   que je l'avais supposé fourni ailleurs : layout.css ne pose que
   `max-width`, rien d'autre.
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* La page comptait deux gris discrets, #5c5a7a et #7e7c99, choisis à
   l'œil sur la maquette. Mesurés, le premier tombait à 3,03 sur le fond
   nuit et 2,58 sur le bouton en attente — sous les 4,5 exigés — et le
   second passait de justesse, puis échouait dès que le fond s'éclairait
   un peu (4,49 sur l'étiquette ENTREPRISE).

   Une seule teinte les remplace, retenue parce qu'elle tient sur TOUS
   nos fonds, du nuit jusqu'à 12 % de blanc : 6,78 / 6,53 / 6,33 / 5,77
   / 5,13. Un ton unique se vérifie d'un coup ; deux tons choisis à
   l'œil se re-vérifient à chaque écran. */
:root { --in-discret: #9694ae; }

body {
  margin: 0;
  background: var(--fy-nuit, #07071a);
  color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
}
input, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--in-discret); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fy-violet, #8b7bff); }

.in-grille {
  display: grid; grid-template-columns: 452px minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
}

/* ══════════════════════════════════════════════════════════════════
   LA COLONNE DE GAUCHE
   ══════════════════════════════════════════════════════════════════ */
.in-cote {
  background: linear-gradient(180deg, var(--fy-carte, #0c0c24), var(--fy-nuit, #07071a));
  border-right: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
  padding: 44px 44px 48px;
  display: flex; flex-direction: column;
}
.in-logo {
  display: flex; align-items: center; gap: 11px;
  color: var(--fy-encre, #f2f1f7); text-decoration: none; flex: none;
  font-size: 1.938rem; line-height: 1;
}
.in-logo-mot { font-family: var(--font-display, 'Instrument Serif', Georgia, serif); }

.in-cote h1 {
  margin: 52px 0 0;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 2.5rem; line-height: 1.08; letter-spacing: -.015em;
  text-wrap: pretty;
}
.in-cote-texte {
  margin: 18px 0 0; font-size: .969rem; line-height: 1.6;
  color: var(--fy-gris, #a5a3bc); text-wrap: pretty;
}

.in-etapes { margin-top: 46px; display: flex; flex-direction: column; gap: 2px; }
.in-etape { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.in-etape-num {
  width: 26px; height: 26px; flex: none; border-radius: 9px;
  border: 1.5px solid rgba(255, 255, 255, .14); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .75rem; font-weight: 500; color: var(--in-discret);
}
.in-etape-nom { flex: 1; min-width: 0; font-size: .906rem; font-weight: 400; color: var(--in-discret); }
.in-etape.en-cours .in-etape-num {
  border-color: var(--fy-violet, #8b7bff); background: rgba(139, 123, 255, .16);
  color: var(--fy-violet, #8b7bff);
}
.in-etape.en-cours .in-etape-nom { color: var(--fy-encre, #f2f1f7); font-weight: 600; }
.in-etape.faite .in-etape-num {
  border-color: var(--fy-cyan, #5cd6e8); background: rgba(92, 214, 232, .14);
  color: var(--fy-cyan, #5cd6e8);
}
.in-etape.faite .in-etape-nom { color: var(--fy-gris, #a5a3bc); }

.in-promesses { margin-top: auto; padding-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.in-promesse { display: flex; align-items: flex-start; gap: 11px; }
.in-promesse::before {
  content: ''; width: 7px; height: 7px; flex: none; margin-top: 7px;
  border-radius: 2px; background: var(--puce, #5cd6e8);
}
.in-promesse span { flex: 1; min-width: 0; font-size: .844rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); }

/* ══════════════════════════════════════════════════════════════════
   LA COLONNE DE DROITE
   ══════════════════════════════════════════════════════════════════ */
.in-principal { padding: 44px 0 80px; display: flex; flex-direction: column; min-width: 0; }

.in-progres { display: flex; align-items: center; gap: 16px; padding: 0 56px; flex: none; }
.in-progres-piste {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.in-progres-fait {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--fy-violet, #8b7bff), var(--fy-cyan, #5cd6e8));
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.in-progres-nb {
  flex: none; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .688rem; font-weight: 500; letter-spacing: .1em; color: var(--in-discret);
}
/* Le texte fait 17 px de haut : la zone cliquable en ferait autant, sous
   les 24 px que demande le critère 2.5.8. Le remplissage agrandit la
   cible, la marge négative le reprend — la rangée garde exactement la
   même hauteur, seule la surface atteignable change.
   (« Renvoyer le lien », lui, est un lien au fil d'une phrase : le
   critère l'exempte, et l'écarter du texte le rendrait moins lisible.) */
.in-deja {
  flex: none; font-size: .844rem; color: var(--in-discret); text-decoration: none;
  padding: 4px 6px; margin: -4px -6px;
}
.in-deja:hover { color: var(--fy-encre, #f2f1f7); }

.in-contenu { flex: 1; padding: 0 56px; max-width: 660px; width: 100%; }
.in-volet { padding-top: 52px; }
.in-volet[hidden] { display: none; }
.in-volet h2 {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 2.25rem; line-height: 1.1;
}
.in-volet-texte { margin: 14px 0 36px; font-size: 1rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }

/* ── LES CHAMPS ──────────────────────────────────────── */
.in-champs { display: flex; flex-direction: column; gap: 22px; }
.in-champ label, .in-etiquette {
  display: block; font-size: .844rem; font-weight: 500;
  color: var(--fy-corps, #d6d4e4); margin-bottom: 9px;
}
.in-saisie {
  width: 100%; background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  padding: 15px 16px; font-size: .969rem; color: var(--fy-encre, #f2f1f7);
}
.in-saisie:disabled { opacity: .55; }
.in-groupe {
  display: flex; align-items: center;
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; padding: 0 16px;
}
.in-groupe input { flex: 1; min-width: 0; background: none; border: 0; padding: 15px 0;
  font-size: .969rem; color: var(--fy-encre, #f2f1f7); }
.in-prefixe {
  flex: none; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .969rem; color: var(--in-discret);
}
.in-pastille {
  flex: none; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .688rem; font-weight: 500; letter-spacing: .08em; color: var(--fy-cyan, #5cd6e8);
}
.in-bascule-mdp {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .688rem; letter-spacing: .08em; color: var(--in-discret);
}
/* Le retour de saisie garde sa hauteur même vide : sans cela, la page
   sautait d'une ligne dès qu'un message apparaissait. */
.in-note { min-height: 18px; margin-top: 8px; font-size: .813rem; color: var(--in-discret); }
.in-note.alerte { color: var(--fy-ambre, #f0b45c); }

.in-ok { border-color: var(--fy-cyan, #5cd6e8); }
.in-alerte { border-color: var(--fy-ambre, #f0b45c); }

.in-jauge { display: flex; gap: 6px; margin-top: 11px; }
.in-jauge span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .09); }
.in-jauge span.faible { background: var(--fy-ambre, #f0b45c); }
.in-jauge span.moyen { background: var(--fy-violet, #8b7bff); }
.in-jauge span.fort { background: var(--fy-cyan, #5cd6e8); }

.in-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── OAUTH ───────────────────────────────────────────── */
.in-oauth { display: flex; gap: 12px; margin-bottom: 28px; }
.in-oauth[hidden] { display: none; }
.in-oauth a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, .14); background: none;
  color: var(--fy-encre, #f2f1f7); text-decoration: none;
  font-size: .906rem; font-weight: 500; padding: 14px; border-radius: 11px;
}
.in-oauth a:hover { background: rgba(255, 255, 255, .06); color: var(--fy-encre, #f2f1f7); }
.in-separateur { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.in-separateur[hidden] { display: none; }
.in-separateur::before, .in-separateur::after {
  content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .09);
}
.in-separateur span {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .688rem; letter-spacing: .1em; color: var(--in-discret);
}

/* ── LES QUATRE CARTES ───────────────────────────────── */
.in-natures { display: flex; flex-direction: column; gap: 12px; }
.in-nature {
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .09); background: var(--fy-carte, #0c0c24);
  border-radius: 16px; padding: 22px 24px;
  display: flex; align-items: flex-start; gap: 18px; font-family: inherit;
  transition: border-color .18s, background .18s;
}
.in-nature:hover { border-color: rgba(255, 255, 255, .2); }
.in-nature.choisie { border-color: var(--fy-violet, #8b7bff); background: rgba(139, 123, 255, .1); }
.in-nature-icone {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  background: rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
}
.in-nature.choisie .in-nature-icone { background: rgba(139, 123, 255, .16); }
.in-nature-icone span { width: 14px; height: 14px; background: var(--pastille, #5cd6e8); }
.in-nature-corps { flex: 1; min-width: 0; }
.in-nature-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.in-nature-nom { font-size: 1.063rem; font-weight: 600; color: var(--fy-encre, #f2f1f7); }
.in-nature-etiquette {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .625rem; letter-spacing: .08em; color: var(--in-discret);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; padding: 3px 7px;
  white-space: nowrap;
}
.in-nature-texte { display: block; font-size: .906rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); margin-top: 8px; }
.in-nature-rond {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .22); background: transparent;
}
.in-nature.choisie .in-nature-rond {
  border-color: var(--fy-violet, #8b7bff); background: var(--fy-violet, #8b7bff);
}

.in-encart {
  margin-top: 20px; background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(92, 214, 232, .28); border-radius: 16px; padding: 22px 24px;
}
.in-encart[hidden] { display: none; }
.in-encart-titre {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em; color: var(--fy-cyan, #5cd6e8);
}
.in-encart-note { margin: 14px 0 0; font-size: .813rem; line-height: 1.55; color: var(--in-discret); }
.in-saisie-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  background: var(--fy-nuit, #07071a);
}

/* ── LE PROFIL ───────────────────────────────────────── */
.in-portrait { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.in-portrait-image {
  width: 76px; height: 76px; flex: none; border-radius: 22px; overflow: hidden;
  background: var(--fy-surface, #14142e); border: 1px dashed rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.625rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.in-portrait-image img { width: 100%; height: 100%; object-fit: cover; }
.in-portrait-corps { flex: 1; min-width: 0; }
.in-btn-sobre {
  border: 1px solid rgba(255, 255, 255, .16); background: none;
  color: var(--fy-encre, #f2f1f7); font-family: inherit;
  font-size: .875rem; font-weight: 500; padding: 11px 18px; border-radius: 10px; cursor: pointer;
}
.in-btn-sobre:hover { background: rgba(255, 255, 255, .06); }
.in-portrait-note { margin: 10px 0 0; font-size: .813rem; color: var(--in-discret); }

.in-compteur {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .75rem; color: var(--in-discret); font-weight: 400;
}
.in-compteur.alerte { color: var(--fy-ambre, #f0b45c); }
.in-etiquette-duo { display: flex; align-items: baseline; justify-content: space-between; }
.in-zone {
  width: 100%; height: 88px; resize: none;
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; padding: 14px 16px;
  font-size: .969rem; line-height: 1.5; color: var(--fy-encre, #f2f1f7);
}

/* ── LES CENTRES D'INTÉRÊT ───────────────────────────── */
.in-sujets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.in-sujet {
  border: 1px solid rgba(255, 255, 255, .14); background: none;
  color: var(--fy-corps, #d6d4e4); font-family: inherit;
  font-size: .906rem; font-weight: 500; padding: 11px 18px;
  border-radius: 100px; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.in-sujet:hover { border-color: rgba(255, 255, 255, .3); }
.in-sujet.choisi {
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-color: var(--fy-clair, #f4f2ee);
}

.in-mono-titre {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em; color: var(--in-discret); margin-bottom: 16px;
}
.in-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.in-suggestion {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 13px;
}
.in-suggestion-photo {
  width: 42px; height: 42px; flex: none; border-radius: 13px; overflow: hidden;
  background: var(--fy-surface, #14142e);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.in-suggestion-photo img { width: 100%; height: 100%; object-fit: cover; }
.in-suggestion-qui { flex: 1; min-width: 0; }
.in-suggestion-nom {
  font-size: .906rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.in-suggestion-meta { font-size: .781rem; color: var(--in-discret); margin-top: 3px; }
.in-suivre {
  flex: none; border: 1px solid var(--fy-violet, #8b7bff); background: var(--fy-violet, #8b7bff);
  color: var(--fy-nuit, #07071a); font-family: inherit;
  font-size: .813rem; font-weight: 600; padding: 9px 14px; border-radius: 9px;
  white-space: nowrap; cursor: pointer;
}
.in-suivre.suivi {
  background: rgba(92, 214, 232, .14); color: var(--fy-cyan, #5cd6e8);
  border-color: rgba(92, 214, 232, .35);
}

/* ── LA CONFIRMATION ─────────────────────────────────── */
.in-coche {
  width: 56px; height: 56px; border-radius: 18px;
  background: rgba(92, 214, 232, .14);
  display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
}
.in-recap {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; padding: 24px; margin-bottom: 20px;
}
.in-recap-ligne {
  display: flex; align-items: center; gap: 18px; padding: 13px 0;
  border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
}
.in-recap-ligne span:first-child { flex: 1; font-size: .906rem; color: var(--fy-gris, #a5a3bc); }
.in-recap-ligne span:last-child { font-size: .906rem; font-weight: 500; }
.in-recap-ligne .mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .875rem; font-weight: 400; color: #9c8cff;
}
.in-fin { display: flex; gap: 12px; flex-wrap: wrap; }
.in-fin a {
  flex: 1 1 200px; text-align: center; font-size: 1rem; font-weight: 600;
  padding: 16px; border-radius: 12px; text-decoration: none;
}
.in-fin .principal { background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); }
.in-fin .principal:hover { background: var(--fy-violet-vif, #a395ff); color: var(--fy-nuit, #07071a); }
.in-fin .second { border: 1px solid rgba(255, 255, 255, .16); color: var(--fy-encre, #f2f1f7); }
.in-fin .second:hover { background: rgba(255, 255, 255, .06); color: var(--fy-encre, #f2f1f7); }
.in-relance { margin: 22px 0 0; font-size: .844rem; color: var(--in-discret); }
.in-relance a { color: var(--fy-violet, #8b7bff); }

/* ── LE PIED ─────────────────────────────────────────── */
.in-pied { flex: none; padding: 32px 56px 0; max-width: 660px; width: 100%; }
.in-pied[hidden] { display: none; }
.in-conditions {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; cursor: pointer;
}
.in-conditions[hidden] { display: none; }
/* La case native se superpose EXACTEMENT au carré dessiné : elle reste
   la cible réelle du clic et du focus, sans être visible. `opacity: 0`
   plutôt que `display: none`, qui la retirerait de l'ordre de
   tabulation et la rendrait inatteignable au clavier. */
.in-case-native {
  position: absolute; width: 24px; height: 24px; margin: 0;
  opacity: 0; cursor: pointer;
}
.in-case {
  flex: none; width: 24px; height: 24px;
  border: 1.5px solid rgba(255, 255, 255, .24); background: transparent;
  border-radius: 7px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
}
.in-case-native:focus-visible + .in-case {
  outline: 2px solid var(--fy-violet, #8b7bff); outline-offset: 2px;
}
.in-case svg { opacity: 0; }
.in-case.cochee { border-color: var(--fy-cyan, #5cd6e8); background: var(--fy-cyan, #5cd6e8); }
.in-case.cochee svg { opacity: 1; }
.in-conditions span { flex: 1; min-width: 0; font-size: .844rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }
.in-conditions a { color: var(--fy-violet, #8b7bff); }

.in-commandes { display: flex; align-items: center; gap: 14px; }
.in-retour {
  flex: none; border: 1px solid rgba(255, 255, 255, .16); background: none;
  color: var(--fy-encre, #f2f1f7); font-family: inherit;
  font-size: .938rem; font-weight: 500; padding: 15px 22px; border-radius: 12px; cursor: pointer;
}
.in-retour:hover { background: rgba(255, 255, 255, .06); }
.in-retour[hidden] { display: none; }
.in-suivant {
  flex: 1; border: 0; font-family: inherit;
  font-size: 1rem; font-weight: 600; padding: 16px; border-radius: 12px;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); cursor: pointer;
}
/* Le bouton reste CLIQUABLE quand le formulaire est incomplet : c'est
   lui qui dit ce qui manque. Désactivé, il laisse chercher. */
.in-suivant.incomplet {
  background: rgba(255, 255, 255, .08); color: var(--in-discret); cursor: not-allowed;
}
.in-blocage { min-height: 20px; margin-top: 12px; font-size: .844rem; color: var(--fy-ambre, #f0b45c); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .in-grille { grid-template-columns: 1fr; }
  /* La colonne devient un en-tête : sa liste d'étapes et ses promesses
     feraient un écran entier avant le premier champ sur téléphone. */
  .in-cote { padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--fy-bord, rgba(255,255,255,.08)); }
  .in-cote h1 { margin-top: 24px; font-size: 1.875rem; }
  .in-etapes, .in-promesses { display: none; }
  .in-principal { padding: 24px 0 60px; }
  .in-progres, .in-contenu, .in-pied { padding-left: 20px; padding-right: 20px; }
  .in-volet { padding-top: 32px; }
  .in-volet h2 { font-size: 1.75rem; }
}
@media (max-width: 640px) {
  .in-oauth { flex-direction: column; }
  .in-duo, .in-suggestions { grid-template-columns: 1fr; }
  .in-progres { flex-wrap: wrap; }
  .in-deja { order: 3; }
  .in-nature { padding: 18px; gap: 14px; }
  .in-fin a { flex: 1 1 100%; }
}