/*
  Hub candidat - feuille autonome (aucune dependance externe).
  Composition : polices de la charte v4 (Manrope et DM Sans) declarees dans
  assets/charte-v4.css, vendorisees (RGPD : pas de Google Fonts), tokens design
  remappes sur la charte v4 par E-274 C, classes
  de base necessaires (copie ciblee de components.css), regles hub-candidate.css adaptees.
  HORS SCOPE de cette tranche : panneau chat (.giancarlo-chat) et capsule LinkedIn
  (.founder-contact) - ajoutes ulterieurement. Wordmark d'en-tete en miroir 16 degres.
*/

/* ============================================================
   LES POLICES VIENNENT DE assets/charte-v4.css
   Manrope et DM Sans y sont declarees, vendorisees, en faces variables.
   Cette feuille n en declare aucune : une seule declaration, un seul endroit.
   La face Inclusive Sans qui vivait ici est RETIREE parce que plus aucune
   regle ne la demande. LE FICHIER woff2 RESTE EN PLACE :
   diagnostic/index.html le charge depuis /hub/assets/fonts/.
   ============================================================ */

/* ============================================================
   TOKENS (copie de design/v2-mockups/assets/tokens.css)
   ============================================================ */
:root {
  color-scheme: light;

  --color-ivory: #ffffff;
  --color-paper: #ffffff;
  --color-surface: #f2f5f3;
  --color-anthracite: #153a39;
  --color-secondary: #526762;
  --color-border: #d8e2dd;
  --color-institutional: #153a39;
  --color-institutional-dark: #103431;
  --color-accent: #c55c3d;
  --color-success: #356b50;
  --color-warning: #95652e;
  --color-error: #954a45;
  --color-white: #ffffff;

  --color-success-soft: #e5eee8;
  --color-warning-soft: #f3e9d9;
  --color-error-soft: #f2e3e0;
  --color-info-soft: #e9efec;
  --color-accent-soft: #f7e6df;
  --color-focus: #c55c3d;
  --color-overlay: rgb(16 52 49 / 42%);

  /* E-274 C : Manrope aux titres, DM Sans au texte, comme la landing. */
  --font-display: "Manrope", Arial, sans-serif;
  --font-sans: "DM Sans", Arial, sans-serif;

  --text-caption: 0.75rem;
  --text-meta: 0.875rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-block-title: 1.55rem;
  --text-page-title: 2.15rem;
  --text-editorial: 3rem;
  --text-hero: 4.5rem;

  --leading-tight: 0.98;
  --leading-heading: 1.1;
  --leading-body: 1.58;
  --leading-meta: 1.45;

  --tracking-label: 0.12em;
  --tracking-tight: -0.045em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --border-thin: 1px solid var(--color-border);
  --border-strong: 1px solid rgb(24 63 70 / 38%);
  --shadow-subtle: 0 1px 2px rgb(36 37 34 / 4%), 0 12px 32px rgb(36 37 34 / 7%);
  --shadow-raised: 0 24px 60px rgb(16 47 53 / 12%);

  --content-max: 80rem;
  --content-reading: 46rem;
  --sidebar-width: 17rem;
  --header-height: 4.75rem;
  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;
  --focus-ring: 0 0 0 3px rgb(197 92 61 / 24%);

  /* hub-candidate.css, remappe sur la charte v4 par E-274 C.
     LES NOMS SONT CONSERVES, seules les valeurs changent : renommer
     --hub-petrol en --hub-ink aurait touche des centaines de lignes pour
     zero effet visuel, et rendu le diff illisible. */
  --hub-petrol: #153a39;
  --hub-petrol-deep: #103431;
  --hub-terracotta: #c55c3d;
  --hub-terracotta-soft: #f7e6df;
  --hub-ivory: #ffffff;
  --hub-paper: #ffffff;
  --hub-ink: #153a39;
  --hub-muted: #526762;
  --hub-line: #d8e2dd;

  /* E-274 C. LA TERRE CUITE DE TEXTE, ET ELLE EXISTE POUR UNE RAISON MESUREE.
     --accent #c55c3d rend 4.22:1 sur blanc et 3.85:1 sur --soft, quand le
     seuil AA du texte courant est 4.50:1. La charte v4 en fait donc une
     couleur de DECORATION, jamais de texte courant sur fond clair
     (assets/charte-v4.css). Partout ou le hub s en servait POUR DU TEXTE,
     c est ce jeton-ci qui prend la place : meme teinte, assombrie jusqu a
     passer AA. Mesures : 5.28:1 sur blanc, 4.81:1 sur --soft #f2f5f3. */
  --accent-text: #b04e31;

  /* Lot A : teintes auparavant en dur, tokenisees sans changement visuel. */
  --hub-band: #f2f5f3;            /* bandeau topline de profile-focus */
  --hub-chip: #f2f5f3;           /* fond des puces type-context */
  --hub-inactive: #e8edea;       /* tuiles et boutons inactifs */
  --hub-terracotta-deep: #99401f; /* survol de button--terracotta */
  --hub-terracotta-pale: #efb58a; /* next-step-label sur aside sombre, valeur de la landing */
  --hub-paper-hover: #f2f5f3;    /* survol de button--paper */
  --hub-state-muted: #526762;    /* etat service-state--coming */

  /* Re-skin v2 : dernieres teintes en dur du hub, tokenisees sans
     changement visuel (meme methode que le lot A ci-dessus). */
  --hub-chat-user: #f2f5f3;      /* fond du message utilisateur, chat.css */
}

@media (max-width: 760px) {
  :root {
    --text-page-title: 1.75rem;
    --text-editorial: 2.25rem;
    --text-hero: 2.75rem;
    --space-20: 3.5rem;
    --space-24: 4rem;
  }
}

/* ============================================================
   BASE (reset minimal + composants copies de components.css)
   ============================================================ */
* {
  box-sizing: border-box;
}

/* E-274 C : les titres prennent --font-display (Manrope), le texte courant
   --font-sans (DM Sans). Avant ce lot les deux jetons portaient la MEME
   police et aucune regle ne distinguait les titres ; il en fallait donc une. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--hub-ivory);
  color: var(--hub-ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
a {
  font: inherit;
}

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  border: var(--border-strong);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: min(calc(100% - 3rem), var(--content-max));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 var(--space-4);
  /* E-274 C : --accent-text et non --accent. 12px gras, donc du texte courant
     au sens AA - le seuil "grand texte" ne commence qu a 18.66px gras. */
  color: var(--accent-text);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--leading-meta);
  text-transform: uppercase;
}

.muted,
.meta {
  color: var(--color-secondary);
}

.meta {
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.button {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.15rem;
  /* E-274 C : forme des boutons de la landing - fond --deep, coins a 6px et
     non en gelule, graisse 600. L encombrement du hub (min-height, padding)
     est CONSERVE : la landing a ses propres marges, les reprendre ici
     deplacerait des mises en page que ce lot n a pas a toucher. */
  border: 1px solid var(--color-institutional-dark);
  border-radius: 6px;
  background: var(--color-institutional-dark);
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--text-meta);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.button:hover {
  background: var(--color-institutional-dark);
  transform: translateY(-1px);
}

.button--secondary {
  border-color: var(--color-institutional);
  background: transparent;
  color: var(--color-institutional);
}

.button--secondary:hover {
  background: rgb(21 58 57 / 8%);
  transform: none;
}

.button[hidden] {
  display: none;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  min-height: 1.8rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-info-soft);
  color: var(--color-institutional);
  font-size: var(--text-caption);
  font-weight: 650;
}

.status-tag::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-tag--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.status-tag--neutral {
  background: var(--color-surface);
  color: var(--color-secondary);
}

.site-footer {
  padding: var(--space-10) 0;
  border-top: var(--border-thin);
  color: var(--color-secondary);
  font-size: var(--text-meta);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HUB (copie adaptee de hub-candidate.css)
   ============================================================ */
.hub-header {
  border-bottom: 1px solid var(--hub-line);
  background: rgb(255 255 255 / 94%);
}

.hub-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-8);
  align-items: center;
  min-height: 4.8rem;
}

/* ============================================================
   E-274 C. L EN-TETE DE MARQUE, SUR LE BALISAGE DE LA LANDING.
   Le wordmark incline a 16 degres (.wm-lockup, .wm-inner, .wm-final)
   est RETIRE : il portait une identite que la charte v4 ne porte plus.
   LA FORME DU MONOGRAMME VIENT DE assets/charte-v4.css (.gai-mark), qui
   en est la source unique. On ne pose ici que la mise en page de
   l en-tete : le filet vertical, le nom en toutes lettres, la portee.
   ============================================================ */
.giancarlo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--hub-ink);
  text-decoration: none;
}

.hub-header .gai-mark {
  font-size: 2.6rem;
  letter-spacing: -0.11em;
}

.giancarlo-wordmark .brand-name {
  border-left: 1px solid var(--hub-line);
  padding-left: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.25;
}

/* Le "AI" du nom est un LOGOTYPE, pas du texte courant : il garde --accent,
   exactement comme .brand-name > b sur la landing. La regle sur --accent
   vise la prose, pas la marque. */
.giancarlo-wordmark .brand-name > b {
  color: var(--color-accent);
  font-weight: 650;
}

.giancarlo-wordmark small {
  display: block;
  margin-top: 0.3rem;
  color: var(--hub-muted);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hub-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.hub-nav a {
  color: var(--hub-muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.hub-nav a[aria-current="page"] {
  color: var(--hub-petrol);
}

.hub-main {
  padding: clamp(2.5rem, 6vw, 5rem) 0 5rem;
}

.hub-main > .shell {
  display: block;
  width: calc(100% - 3rem);
  max-width: var(--content-max);
  margin-inline: auto;
}

.hub-main > .shell > * {
  width: 100%;
}

.hub-intro {
  margin-bottom: var(--space-6);
}

.hub-intro h1 {
  max-width: 16ch;
  margin: 0.35rem 0 0;
  color: var(--hub-petrol-deep);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.profile-focus {
  overflow: hidden;
  border: 1px solid rgb(21 58 57 / 24%);
  border-radius: 1.35rem;
  background: var(--hub-paper);
  box-shadow: 0 1.5rem 4rem rgb(16 52 49 / 9%);
}

.profile-focus__topline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: center;
  padding: 1rem clamp(1.25rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--hub-line);
  background: var(--hub-band);
}

.state-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hub-petrol);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.state-label::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.state-label--draft {
  color: var(--accent-text); /* E-274 C : texte courant sur fond clair */
}

.state-label--muted {
  color: var(--hub-muted);
}

.profile-focus__body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr);
}

.profile-focus__content {
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.profile-focus__content h2 {
  max-width: 19ch;
  margin: 0.8rem 0 1.35rem;
  color: var(--hub-petrol-deep);
  font-size: clamp(1.8rem, 3.8vw, 3.15rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.profile-focus__expertise {
  max-width: 48rem;
  margin: 0;
  color: var(--hub-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.profile-focus__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--hub-petrol-deep);
  color: var(--hub-paper);
}

.profile-focus__aside p {
  margin: 0.4rem 0 0;
  color: rgb(255 255 255 / 78%);
  line-height: 1.55;
}

.next-step-label {
  color: var(--hub-terracotta-pale);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-focus__aside h3 {
  margin: 0.75rem 0 0;
  color: white;
  font-size: 1.35rem;
  line-height: 1.2;
}

.profile-focus__aside .button {
  align-self: flex-start;
}

/* E-274 C. FOND --accent-text ET NON --accent : du blanc sur #c55c3d ne rend
   que 4.22:1, sous le seuil AA, et ce bouton porte du texte de 14px. Sur
   #b04e31 il rend 5.28:1. Meme teinte, meme role, contraste tenu. */
.button--terracotta {
  border-color: var(--accent-text);
  background: var(--accent-text);
  color: white;
}

.button--terracotta:hover {
  background: var(--hub-terracotta-deep);
}

.button--paper {
  border-color: var(--hub-paper);
  background: var(--hub-paper);
  color: var(--hub-petrol-deep);
}

.button--paper:hover {
  background: var(--hub-paper-hover);
  color: var(--hub-petrol-deep);
}

.type-context {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hub-line);
}

.type-context__title {
  margin: 0 0 0.8rem;
  color: var(--hub-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.type-context__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.type-context__items span {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hub-line);
  background: var(--hub-chip);
  color: var(--hub-petrol);
  font-size: 0.79rem;
  font-weight: 600;
}

.services-section {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.services-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-6);
}

.services-heading h2 {
  max-width: 18ch;
  margin: 0.35rem 0 0;
  color: var(--hub-petrol-deep);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.service-tile {
  display: flex;
  min-height: 16.5rem;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--hub-line);
  background: var(--hub-paper);
}

/* L'attribut hidden doit reellement masquer la tuile : sans cette regle, le
   display:flex ci-dessus (auteur) ecrase le [hidden]{display:none} de l'UA. */
.service-tile[hidden] {
  display: none;
}

.service-tile--primary {
  border-top: 4px solid var(--hub-petrol);
}

.service-tile--coming {
  background: var(--hub-inactive);
}

.service-state {
  align-self: flex-start;
  padding: 0.35rem 0.55rem;
  border: 1px solid currentColor;
  color: var(--hub-petrol);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.service-state--coming {
  color: var(--hub-state-muted);
}

.service-state--locked {
  color: var(--hub-muted);
}

.service-tile h3 {
  margin: 1.5rem 0 0.8rem;
  color: var(--hub-petrol-deep);
  font-size: 1.35rem;
  line-height: 1.18;
}

.service-tile__deliverable {
  margin: 0;
  color: var(--hub-ink);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Voie A : note de divulgation de la tuile de service. Corps reduit, poids normal,
   couleur attenuee : elle informe sans concurrencer le libelle du livrable. */
.service-tile__note {
  margin: 0.4rem 0 0;
  color: var(--hub-muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
}

.service-tile__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-6);
}

.service-price {
  display: block;
  color: var(--hub-petrol-deep);
  font-size: 1.25rem;
  font-weight: 700;
}

.service-tile__footer small {
  display: block;
  max-width: 12rem;
  margin-top: 0.25rem;
  color: var(--hub-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.button--disabled {
  border-color: var(--hub-line);
  background: var(--hub-inactive);
  color: var(--hub-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.hub-footer {
  border-top: 1px solid var(--hub-line);
  background: var(--hub-paper);
}

/* Lien de deconnexion en pied de page : bouton rendu comme le texte du footer. */
.footer-signout {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.footer-signout:hover {
  text-decoration: underline;
}

/* Debordement mobile de l en-tete. Cause mesuree : .account-actions est un
   element de grille de .hub-header__inner, donc son min-width vaut auto ; il ne
   peut pas devenir plus etroit que son contenu. Avec une adresse longue et le
   bouton de deconnexion sur une seule ligne, la colonne exigeait 409 px sur un
   ecran de 390, ce qui elargissait toute la page (scrollWidth 665). min-width:0
   rend l element compressible ; le retour a la ligne est autorise plus bas, au
   point de rupture mobile. */
.account-actions {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.user-email {
  color: var(--hub-muted);
  font-size: 0.82rem;
  min-width: 0;
  /* L adresse est une donnee d identification : elle est coupee en fin de ligne
     plutot que tronquee, pour rester lisible en entier, domaine compris. */
  overflow-wrap: anywhere;
}

/* Ecran d'attente recruteur (phase 2). */
/* R1-B : formulaire du profil recruteur. Dix-huit lignes, aucune feuille nouvelle. */
.recruiter-form {
  max-width: 34rem;
  margin: 1.4rem 0 2rem;
}

.recruiter-field {
  display: block;
  margin-bottom: 0.9rem;
}

.recruiter-field > span {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.recruiter-field input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
}

.recruiter-error {
  margin: 0 0 0.9rem;
  color: #954a45;
}

/* E-277 A : la phrase de retour de paiement, en tete de l espace recruteur
   (hub/recruteur-paiement.js). Elle emprunte la forme de .recruiter-needs__status :
   le meme geste doit avoir la meme apparence, et une seconde serie de styles aurait
   derive a la premiere retouche. */
.recruiter-checkout-notice {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--hub-terracotta);
  background: var(--hub-paper);
  color: var(--hub-ink);
  font-size: var(--text-meta);
  font-weight: 600;
}

.recruiter-checkout-notice[hidden] {
  display: none;
}

.recruiter-lede {
  max-width: 40rem;
  margin: var(--space-6) 0 var(--space-8);
  color: var(--hub-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* E-252 B : ecran "Mes besoins" (hub/recruteur-besoins.js). Tokens existants
   uniquement : aucune couleur nouvelle, aucun gradient, aucune feuille ajoutee.
   Les bulles du dialogue reprennent .float-chat__message de chat.css. */
.recruiter-needs__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.recruiter-needs__title {
  margin: 0;
  color: var(--hub-petrol-deep);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.recruiter-needs__status {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--hub-terracotta);
  background: var(--hub-paper);
  color: var(--hub-ink);
  font-size: var(--text-meta);
  font-weight: 600;
}

.recruiter-needs__status:empty {
  display: none;
}

.recruiter-need-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.recruiter-need-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--hub-line);
  background: var(--hub-paper);
}

.recruiter-need-card--other {
  background: var(--hub-inactive);
  color: var(--hub-muted);
}

.recruiter-need-card p {
  margin: 0;
}

.recruiter-need-card__problem {
  color: var(--hub-petrol-deep);
  font-weight: 600;
  line-height: var(--leading-body);
}

.recruiter-need__title {
  margin: 0 0 var(--space-2);
  color: var(--hub-petrol-deep);
  font-size: var(--text-block-title);
  font-weight: 600;
}

.recruiter-need__subtitle {
  margin: 0 0 var(--space-3);
  color: var(--hub-petrol-deep);
  font-size: var(--text-body-lg);
  font-weight: 600;
}

.recruiter-need__block {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--hub-line);
  background: var(--hub-paper);
}

.recruiter-need__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

.recruiter-need__field {
  margin-bottom: 0;
}

.recruiter-need__textarea {
  min-height: 5rem;
  resize: vertical;
  line-height: var(--leading-body);
}

.recruiter-need__textarea:disabled {
  background: var(--hub-inactive);
  color: var(--hub-muted);
}

.recruiter-need__counter {
  margin: var(--space-1) 0 0;
  text-align: right;
}

.recruiter-need__counter--over {
  color: var(--color-error);
  font-weight: 600;
}

.recruiter-need__thread {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--hub-chip);
}

.recruiter-need__thread:empty {
  display: none;
}

.recruiter-need__questions,
.recruiter-need__declinations {
  margin: 0;
  padding-left: 1.25rem;
}

.recruiter-need__questions li + li,
.recruiter-need__declinations li + li {
  margin-top: var(--space-2);
}

.recruiter-need__central {
  font-weight: 600;
}

.recruiter-need__form,
.recruiter-need__context {
  display: block;
}

.recruiter-need__comment {
  color: var(--hub-muted);
}

.recruiter-need__turns {
  margin: var(--space-3) 0 0;
}

/* E-252 G : aide au-dessus de la formulation (V2 et V3). Tokens existants. */
.recruiter-need__help {
  max-width: var(--content-reading);
  margin: var(--space-5) 0 0;
  color: var(--hub-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
}

.recruiter-need__notice {
  margin: 0 0 var(--space-4);
  color: var(--color-warning);
  font-size: var(--text-meta);
  font-weight: 600;
}

.recruiter-need__decl {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hub-line);
}

/* E-252 C : champs obligatoires, message sous le champ fautif, champs a reprendre
   (is-revise, bordure terracotta) et message au-dessus des champs. Tokens existants. */
.recruiter-field.recruiter-need__field > span:first-child {
  display: inline;
}

.recruiter-need__required {
  margin-left: var(--space-1);
  color: var(--accent-text); /* E-274 C : texte courant sur fond clair */
  font-weight: 700;
}

.recruiter-need__field .recruiter-need__textarea {
  display: block;
  margin-top: 0.3rem;
}

.recruiter-need__field-error {
  margin: var(--space-1) 0 0;
  color: var(--color-error);
  font-size: var(--text-meta);
  font-weight: 600;
}

.recruiter-need__field.is-revise .recruiter-need__textarea {
  border-color: var(--hub-terracotta);
  box-shadow: 0 0 0 2px var(--hub-terracotta-soft);
}

.recruiter-need__revise-notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--hub-terracotta);
  background: var(--hub-terracotta-soft);
  color: var(--hub-ink);
  font-size: var(--text-meta);
  font-weight: 600;
}

.recruiter-need__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.recruiter-needs .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.recruiter-need__block > summary {
  color: var(--hub-petrol-deep);
  font-weight: 600;
  cursor: pointer;
}

/* E-264 : LIGNE D ATTENTE. Un tour dure 5 a 25 s, une validation 23 s (essais des 16 et
   17/09). Sans rien a l ecran, le recruteur croit a un blocage et reclique, ce qui consomme
   des tours. Trois points qui pulsent, decales, puis le texte du moment. Tokens existants. */
.recruiter-need__wait {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  color: var(--hub-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
}

.recruiter-need__wait-dots {
  display: inline-flex;
  flex: none;
  gap: 4px;
}

.recruiter-need__wait-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hub-petrol-deep);
  animation: recruiterNeedWait 1.2s ease-in-out infinite;
}

.recruiter-need__wait-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.recruiter-need__wait-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes recruiterNeedWait {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

/* Mouvement reduit : les points restent, ils ne bougent plus. Une attente MUETTE serait
   pire qu une attente immobile : on retire l animation, jamais l indicateur. */
@media (prefers-reduced-motion: reduce) {
  .recruiter-need__wait-dot {
    animation: none;
    opacity: 0.6;
  }
}

/* E-264 C : L AMORCE FIXE, EN ITALIQUE. Clic-verif du 17/09 : pre-remplir le champ ne
   suffisait pas, l amorce s effacait. Elle sort de la zone de saisie. LE CONTENEUR porte la
   bordure, le fond et le rayon du champ ; la zone de saisie les perd, pour que l ensemble se
   lise comme un seul champ. Tokens existants, aucun nouveau. */
.recruiter-need__amorce-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: 0.3rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hub-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

/* L ANNEAU DE FOCUS PASSE SUR LE CONTENEUR. Dessine autour de la seule zone de saisie, il
   aurait coupe l amorce de la phrase qu elle commence. */
.recruiter-need__amorce-wrap:focus-within {
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.recruiter-need__amorce {
  font-style: italic;
  color: var(--hub-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* La zone de saisie perd bordure, fond, rayon et marge : c est le conteneur qui les porte.
   Elle garde sa largeur, sa police et sa couleur d encre. */
.recruiter-need__field .recruiter-need__amorce-suite {
  min-height: 4.2rem;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.recruiter-need__field .recruiter-need__amorce-suite:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 860px) {
  .recruiter-need__fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hub-header__inner {
    grid-template-columns: 1fr auto;
  }

  .hub-nav {
    display: none;
  }

  .services-heading {
    display: block;
  }

  .profile-focus__body,
  .services-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hub-main {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .hub-main > .shell {
    width: calc(100% - 2rem);
  }

  .profile-focus__topline,
  .service-tile__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-focus__body {
    display: block;
  }

  /* Sous 560 px, l en-tete passe sur une seule colonne et le bloc compte prend
     la ligne entiere : l adresse dispose de toute la largeur, elle reste entiere
     et lisible, et le bouton de deconnexion garde sa largeur, donc reste
     entierement visible et cliquable. Sans la colonne pleine, l adresse se
     repliait dans une colonne de 110 px, soit cinq lignes d en-tete. */
  .hub-header__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .account-actions {
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .user-email {
    flex-basis: 100%;
  }
}

/* Lot 2 - toast de confirmation post-publication (?published=1) */
.hub-published-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90vw;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--hub-petrol);
  color: var(--color-white);
  font-size: 14px;
  box-shadow: 0 8px 24px rgb(16 52 49 / 18%);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.hub-published-toast.is-hiding {
  opacity: 0;
}

/* ============================================================ */
/* Mon compte + zone de suppression (porte candidat).           */
/* Tokens charte v2 uniquement : aucune couleur nouvelle,       */
/* aucun gradient, aucun fichier CSS ajoute.                    */
/* ============================================================ */
.account-section {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.account-section__head {
  margin-bottom: var(--space-6);
}

.account-section__head h2 {
  max-width: 18ch;
  margin: 0.35rem 0 0;
  color: var(--hub-petrol-deep);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.account-facts {
  margin: 0 0 var(--space-8);
  padding: 0;
}

.account-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hub-line);
}

.account-facts__key {
  min-width: 12rem;
  color: var(--hub-muted);
  font-size: var(--text-meta);
}

.account-facts__value {
  margin: 0;
  color: var(--hub-ink);
  font-size: var(--text-body);
  font-weight: 600;
}

.danger-zone {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--hub-paper);
}

.danger-zone__title {
  margin: 0 0 var(--space-3);
  color: var(--color-error);
  font-size: var(--text-block-title);
  font-weight: 600;
}

.danger-zone__lede {
  max-width: 46rem;
  margin: 0 0 var(--space-5);
  color: var(--hub-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
}

.danger-zone__panel {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hub-line);
}

.delete-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 30rem;
}

.delete-step__label,
.delete-step__sent {
  margin: 0;
  color: var(--hub-ink);
  font-size: var(--text-meta);
}

.delete-step__email {
  font-weight: 600;
}

.delete-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.delete-step__error {
  margin: var(--space-4) 0 0;
  color: var(--color-error);
  font-size: var(--text-meta);
  font-weight: 600;
}

.delete-step__busy {
  margin: var(--space-4) 0 0;
  color: var(--hub-muted);
  font-size: var(--text-meta);
}

.account-input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hub-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--hub-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
}

.account-input:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.account-input--otp {
  max-width: 9rem;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Bouton destructif : tokens error existants. Survol assombri via     */
/* filter (pas de nouveau token de couleur), coherent avec la charte.  */
.button--danger {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-white);
}

.button--danger:hover {
  background: var(--color-error);
  filter: brightness(0.93);
  transform: translateY(-1px);
}

.button--danger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.button--danger:disabled,
.button--danger[disabled] {
  border-color: var(--hub-line);
  background: var(--hub-inactive);
  color: var(--hub-muted);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.button--secondary:disabled,
.button--secondary[disabled] {
  border-color: var(--hub-line);
  color: var(--hub-muted);
  cursor: not-allowed;
  transform: none;
}

/* E-267 C : ECRAN "RESULTATS" DU RECRUTEUR.
   La section reutilise le chassis de .recruiter-needs (meme classe dans le balisage) et
   la ligne d attente de E-264 (.recruiter-need__wait*) : le meme geste doit avoir la meme
   apparence, et une seconde serie de styles aurait derive a la premiere retouche.
   AUCUNE COULEUR NEUVE. Les pastilles de verdict n emploient que les tokens existants, et
   AUCUNE ne dit "bon" ou "mauvais" a la place du texte : elles aident a balayer la page,
   le libelle porte le sens. */
.recruiter-result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--hub-line);
  background: var(--hub-paper);
}

.recruiter-result p {
  margin: 0;
}

.recruiter-result .button {
  margin-top: var(--space-4);
}

/* La pastille : en tete de carte, lisible seule. */
.recruiter-result__verdict {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--hub-line);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.recruiter-result__verdict--fort {
  border-color: var(--hub-petrol-deep);
  background: var(--hub-petrol-deep);
  color: var(--hub-paper);
}

.recruiter-result__verdict--plausible {
  border-color: var(--hub-petrol);
  background: var(--hub-chip);
  color: var(--hub-petrol-deep);
}

.recruiter-result__verdict--insuffisant {
  border-color: var(--hub-terracotta);
  background: var(--hub-terracotta-soft);
  color: var(--hub-ink);
}

.recruiter-result__verdict--non,
.recruiter-result__verdict--attente {
  background: var(--hub-inactive);
  color: var(--hub-muted);
}

/* "Pourquoi" : l explication du juge. Une seule barre a gauche, comme les encadres du
   dialogue, pour la distinguer de la matiere de la fiche sans l enfermer dans un cadre. */
.recruiter-result__why {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--hub-petrol);
  background: var(--hub-chip);
  color: var(--hub-ink);
  line-height: var(--leading-body);
}

.recruiter-result__why-title {
  margin: 0 0 var(--space-1);
  color: var(--hub-petrol-deep);
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.recruiter-result__subtitle {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--hub-muted);
  font-size: var(--text-meta);
  font-weight: 600;
}

.recruiter-result__declinations {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--hub-ink);
  line-height: var(--leading-body);
}

.recruiter-result__declinations li + li {
  margin-top: var(--space-2);
}

/* E-269 : LA PROBLEMATIQUE DE LA FICHE DEVIENT LE TITRE DE LA CARTE, et les declinaisons
   ne sont plus affichees - elles disaient la meme chose sous quatre formes et noyaient
   l explication du juge, qui est la seule chose qui aide a decider.
   .recruiter-result__declinations et .recruiter-result__subtitle restent definis : ils ne
   servent plus a cet ecran, mais rien d autre ne les remplace et les retirer ne gagnerait
   que des octets. */
.recruiter-result__title {
  margin: 0 0 var(--space-3);
  color: var(--hub-petrol-deep);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: var(--leading-body);
}

/* E-277 A : le bloc d achat d une carte de resultat. Il n existe que sur les fiches que
   le serveur declare achetables. Le bouton est le .button ordinaire - il prend son
   margin-top de .recruiter-result .button, comme le lien "Voir la fiche". */
.recruiter-result__buy {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hub-line);
}

/* La ligne de refus, SOUS le bouton. Vide, elle ne prend pas de place : une carte ne
   doit pas reserver un blanc pour un message qui n arrivera peut-etre jamais. */
.recruiter-result__buy-msg {
  margin-top: var(--space-3);
  color: var(--hub-muted);
  font-size: var(--text-meta);
}

.recruiter-result__buy-msg:empty {
  display: none;
}

/* Le compte des fiches examinees sans concordance. Discret : c est une information de
   travail, pas un resultat. */
.recruiter-result__others {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hub-line);
  color: var(--hub-muted);
  font-size: var(--text-meta);
}

/* ============================================================
   E-270 B2 - SECTION "FICHES OBTENUES"
   Aucune couleur en dur : tout vient des jetons de la charte v4
   (assets/charte-v4.css, remappes ici en E-274 C). Aucune police
   ajoutee : --font-sans et --font-display suffisent.
   ============================================================ */

.reveal-card__date {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--hub-muted);
  font-size: var(--text-meta);
}

/* E-282 B : boutons de depart du hub (heroPrimaryAction, publishAction), libelle long "J'identifie et publie mon
   expertise distinctive". Police, taille et graisse inchangees ; texte equilibre sur deux lignes quand la largeur
   manque. Le pied de la seule tuile de publication passe a la ligne pour laisser au bouton toute la largeur de la
   tuile au lieu de le comprimer a cote de la mention de paiement. Aucune regle display (piege E-117 / E-279 B). */
#heroPrimaryAction,
#publishAction {
  text-wrap: balance;
  text-align: center;
}

#publishTile .service-tile__footer {
  flex-wrap: wrap;
}

@media (min-width: 861px) and (max-width: 1100px) {
  #heroPrimaryAction {
    padding-inline: 0.75rem;
  }
}

/* E-293 V5. Tuile "Ma vitrine web pro" (hub/vitrine-tuile.js) et achat partage
   (place/profile/vitrine-achat.js, classes .vt-buy). */
.showcase-tile__body {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.showcase-tile__consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.showcase-tile__meta,
.showcase-tile__error {
  margin: 0;
}

.showcase-tile__error,
#showcaseTile .vt-buy__error,
#showcaseTile .vt-buy__domain {
  font-size: 0.88rem;
  color: var(--hub-muted);
}

.showcase-tile__link {
  font-weight: 700;
  color: var(--hub-petrol-deep);
}

#showcaseTile .vt-buy,
#showcaseTile .vt-buy__form,
#showcaseTile .vt-buy__field {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  width: 100%;
}

#showcaseTile .vt-buy__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--hub-line);
  font: inherit;
}

#showcaseTile .vt-buy__domain,
#showcaseTile .vt-buy__error {
  margin: 0;
}

/* Le hub n a pas de regle [hidden] globale : sans celle-ci, display:grid ci-dessus
   afficherait le formulaire LinkedIn masque. */
#showcaseTile [hidden] {
  display: none !important;
}