/* Le MENU DU COMPTE (Figma 1626:2653, et 1626:2856 quand l'app est installée).
   Construit par assets/js/compte.js (« MENU DU COMPTE ») quand un talent est connecté : sa
   photo dans la barre ouvre ce menu au lieu de partir dans l'app. Même mécanique que
   « Se connecter » : position fixe calée par le script sous la barre, à droite ; feuille sur
   téléphone. 344 px.

   POURQUOI UNE FEUILLE À PART (CFT-2019, rouvert). Le menu appartient à la BARRE, pas à la
   page, et les pages ne chargent pas la même feuille : celles du site prennent styles.css,
   /talent/ prend v3.css (la refonte du 6 novembre 2026) et /en/talent/ prend encore v2.css.
   La première version du correctif avait recopié ces règles dans v3.css : le menu s'ouvrait
   sur /talent/, et restait sur /en/talent/ une boîte sans style, tout en bas du document.
   Une seule copie, chargée par TOUTES les pages qui chargent compte.js : c'est ce que
   server/menu-compte.selftest.js vérifie, page par page.

   La photo de la barre, menu ouvert, garde l'anneau teal du survol. */

.cf-compte {
  position: fixed; top: 0; left: 0; z-index: 60; width: 344px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 8px; border-radius: 28px; background: #fff; color: #111110;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10); text-align: left; font-weight: 400;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}
.cf-compte.is-open { opacity: 1; visibility: visible; transform: none; }
.cf-compte > * { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.cf-compte.is-open > * { opacity: 1; transform: none; }
.cf-compte.is-open > :nth-child(2) { transition-delay: 0.04s; }
.cf-compte.is-open > :nth-child(3) { transition-delay: 0.08s; }
.cf-compte.is-open > :nth-child(n+4) { transition-delay: 0.12s; }
.cf-compte p { margin: 0; }

.cf-compte__identite { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
.cf-compte__photo { display: flex; }
.cf-compte__photo .cf-avatar { width: 44px; height: 44px; font-size: 15px; }
.cf-compte__qui { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cf-compte__qui b { font-size: 16px; font-weight: 500; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-compte__qui span { font-size: 13px; line-height: 17px; color: #6b747c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La carte de l'app : le dégradé de la carte Castflow du menu Application, le téléphone
   de l'ouverture de l'accueil (écran « Projets », exporté de Figma, fond transparent). */
.cf-compte__app {
  position: relative; flex: none; overflow: hidden; height: 236px; padding: 22px 20px 0; border-radius: 20px; color: #fff;
  background: linear-gradient(24.56deg, #007692 21.6%, #009dc2 98.9%);
}
.cf-compte__telephone { position: absolute; right: 8px; top: 30px; width: 124px; height: 206px; pointer-events: none; filter: drop-shadow(0 15px 18px rgba(0, 0, 0, 0.18)); }
.cf-compte__titre { position: relative; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; line-height: 23px; letter-spacing: -0.015em; }
.cf-compte .cf-compte__desc { position: relative; max-width: 160px; margin-top: 11px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.78); }
.cf-compte__cta {
  position: absolute; left: 20px; top: 148px; display: inline-flex; align-items: center; gap: 14px; height: 42px; padding: 0 6px 0 21px;
  border-radius: 999px; background: #fff; color: #111110; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.42s ease;
}
.cf-compte__cta--seul { top: 172px; }
.cf-compte__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 40, 50, 0.28); }
.cf-compte__rond { flex: none; width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: #111110; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cf-compte__cta:hover .cf-compte__rond { transform: translateX(2px); }
.cf-compte__rond img { width: 14px; height: 14px; display: block; }
.cf-compte__deja { position: absolute; left: 20px; top: 204px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.78); }
.cf-compte__deja a { color: #fff; font-weight: 500; text-decoration: none; }
.cf-compte__deja a:hover { text-decoration: underline; }

/* « Castflow, ça t'aide ? » : note en cinq tuiles, mot, envoi dans le champ. */
.cf-compte__avis { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px 16px 16px; border-radius: 20px; background: #f5f6f7; }
.cf-compte__question { font-size: 18px; font-weight: 500; line-height: 23px; letter-spacing: -0.02em; }
.cf-compte__note { display: flex; flex-direction: column; gap: 8px; }
.cf-compte__tuiles { display: flex; gap: 6px; }
.cf-compte__tuile {
  flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border-radius: 12px; border: 1px solid #e4e7ea; background: #fff; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cf-compte__tuile svg { fill: none; stroke: #c9ced3; stroke-width: 1.5; transition: fill 0.2s ease, stroke 0.2s ease; }
.cf-compte__tuile:hover { border-color: #007692; }
.cf-compte__tuile:active { transform: scale(0.96); }
.cf-compte__tuile.is-on { background: #007692; border-color: #007692; }
.cf-compte__tuile.is-on svg { fill: #fff; stroke: #fff; }
.cf-compte__libelle { font-size: 12px; line-height: 16px; color: #6b747c; }
.cf-compte__libelle b { font-weight: 500; color: #007692; }
.cf-compte__champ { position: relative; display: block; border-radius: 16px; border: 1px solid #e4e7ea; background: #fff; transition: border-color 0.2s ease; cursor: text; }
.cf-compte__champ:focus-within { border-color: #111110; }
.cf-compte__champ textarea {
  display: block; width: 100%; height: 94px; margin: 0; padding: 12px 54px 12px 14px; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 13px; line-height: 18px; color: #111110; box-sizing: border-box;
}
.cf-compte__champ textarea::placeholder { color: #9aa1a8; opacity: 1; }
.cf-compte__champ textarea:focus-visible { outline: none; }
.cf-compte__envoyer {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 99px; background: #111110; cursor: pointer; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}
.cf-compte__envoyer:hover { background: #007692; transform: translateX(2px); }
.cf-compte__envoyer[disabled] { cursor: progress; opacity: 0.6; transform: none; }
.cf-compte__envoyer img { width: 16px; height: 16px; display: block; }
.cf-compte__etat { font-size: 12px; line-height: 16px; color: #6b747c; }
.cf-compte__etat.is-erreur { color: #c62828; }
.cf-compte__merci { font-size: 14px; line-height: 20px; color: #3f4750; }

/* CFT-1761 : la porte vers la page de bienvenue (les quatre questions du profil),
   sous la carte de l'app. Même forme que « Se déconnecter », la flèche poussée à droite. */
.cf-compte__lien {
  flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 16px; border-radius: 16px;
  color: #111110; text-decoration: none; font-size: 15px; font-weight: 500; transition: background 0.2s ease;
}
.cf-compte__lien:hover { background: #f5f6f7; }
.cf-compte__lien svg { flex: none; color: #007692; }
.cf-compte__lien span:first-of-type { flex: 1; min-width: 0; }
.cf-compte__chevron { display: flex; color: #9aa1a8; }

.cf-compte__filet { flex: none; margin: 0 4px; height: 0; border: 0; border-top: 1px solid #ecedee; }
.cf-compte__sortir {
  flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 0; border-radius: 16px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: #111110; text-align: left; transition: background 0.2s ease;
}
.cf-compte__sortir:hover { background: #f5f6f7; }
.cf-compte__sortir[disabled] { cursor: progress; color: #6b747c; }
.cf-compte__sortir svg { flex: none; }

.cf-compte :focus-visible { outline: 2px solid #111110; outline-offset: 2px; }
.cf-compte__cta:focus-visible { outline-color: #fff; }
/* La photo de la barre, menu ouvert : l'anneau teal du survol reste. */
.cf-membre[aria-expanded="true"] .cf-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007692; }

/* Téléphone : une feuille sous la barre, sur le voile de « Se connecter ». */
.cf-compte--feuille { top: 84px; left: 16px; right: 16px; width: auto; max-width: 360px; margin: 0 auto; max-height: calc(100dvh - 100px); z-index: 80; }
@media (prefers-reduced-motion: reduce) {
  .cf-compte, .cf-compte > * { transition: none; transform: none; }
}

/* ── SOUS-MENU « SE CONNECTER » (Figma 1492:25281, qui remplace 1490:24861) ───────
   Construit par assets/js/compte.js (CFT-2038, avant : main.js, que les deux pages du talent
   ne chargent pas), en position fixe calée par le script sur la barre (.cf-nav n'est pas
   positionnée : le panneau « Application » en dépend). Ces règles vivent ici, dans la feuille
   que TOUTES les pages qui chargent compte.js chargent aussi, /talent/ et /en/talent/ compris :
   c'est la leçon de CFT-2019, où un menu recopié dans v3.css restait sans style sur /en/talent/. Bloc acteur blanc : le visuel des
   castings dans un téléphone (image exportée de Figma, 372 × 200 affichés, ×2 dans le fichier),
   puis la connexion de l'app ; ligne noire « Castflow Studio » pour les agences. 400 px, calé sur le bord
   droit de la barre, 16 px dessous ; sur téléphone, une feuille sous la barre. */
.cf-connexion {
  position: fixed; top: 0; left: 0; z-index: 60; width: 400px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 12px; border-radius: 32px; background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14); text-align: left; font-weight: 400;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}
.cf-connexion.is-open { opacity: 1; visibility: visible; transform: none; }
.cf-connexion > * { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.cf-connexion.is-open > * { opacity: 1; transform: none; }
.cf-connexion.is-open > :nth-child(2) { transition-delay: 0.06s; }

.cf-connexion__acteurs {
  display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 20px; border-radius: 24px;
  background: #fff; color: #0b0c0d;
}
.cf-connexion__visuel {
  height: 200px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(24.56deg, #007692 21.6%, #009dc2 98.9%);
}
.cf-connexion__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-connexion__corps { display: flex; flex-direction: column; gap: 12px; padding: 8px 12px 0; }
.cf-connexion__titre { margin: 0; font-size: 22px; font-weight: 500; line-height: 29px; letter-spacing: -0.44px; color: #0b0c0d; }
.cf-connexion__fournisseurs { display: flex; gap: 12px; }
.cf-connexion__fournisseurs[hidden] { display: none; }
.cf-connexion__fournisseur {
  flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 18px; background: #fff; border: 1px solid #e6e8eb; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cf-connexion__fournisseur[hidden] { display: none; }
.cf-connexion__fournisseur:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.cf-connexion__fournisseur img { width: 24px; height: 24px; display: block; }
.cf-connexion__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cf-connexion__champs { display: flex; flex-direction: column; gap: 10px; }
.cf-connexion__champ {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px; border-radius: 18px;
  background: #f5f6f7; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.2s ease; cursor: text;
}
.cf-connexion__champ:focus-within { box-shadow: inset 0 0 0 2px #0b0c0d; }
.cf-connexion__champ.is-erreur { box-shadow: inset 0 0 0 2px #e5484d; }
.cf-connexion__boite { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cf-connexion__etiquette { font-size: 12px; font-weight: 500; line-height: 16px; color: rgba(11, 12, 13, 0.55); }
.cf-connexion__champ input {
  width: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; line-height: 21px; color: #0b0c0d;
}
.cf-connexion__champ input::placeholder { color: rgba(11, 12, 13, 0.45); opacity: 1; }
.cf-connexion__afficher {
  flex: none; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 18px; color: #0b0c0d;
}
.cf-connexion__oubli {
  align-self: flex-end; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 18px; color: rgba(107, 114, 128, 0.9);
}
.cf-connexion__oubli:hover, .cf-connexion__afficher:hover { text-decoration: underline; }
.cf-connexion__oubli:hover { color: #0b0c0d; }
.cf-connexion__envoyer {
  display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 9px 0 28px;
  border: 0; border-radius: 999px; background: #0b0c0d; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 500; line-height: 22px; color: #fff;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.42s ease;
}
.cf-connexion__envoyer:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 10, 10, 0.22); }
.cf-connexion__envoyer[disabled] { cursor: progress; opacity: 0.75; transform: none; box-shadow: none; }
.cf-connexion__rond {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 99px; background: #fff; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-connexion__envoyer:hover .cf-connexion__rond { transform: translateX(2px); }
.cf-connexion__rond img { width: 16px; height: 16px; display: block; }
.cf-connexion__etat { margin: -2px 0 0; min-height: 0; font-size: 13px; line-height: 18px; color: #3f4750; text-align: center; }
.cf-connexion__etat:empty { display: none; }
.cf-connexion__etat.is-erreur { color: #c62828; }
.cf-connexion__compte { margin: 0; font-size: 13px; line-height: 17px; color: rgba(107, 114, 128, 0.8); text-align: center; }
.cf-connexion__compte a { font-weight: 600; color: #0b0c0d; text-decoration: none; }
.cf-connexion__compte a:hover { text-decoration: underline; }

.cf-connexion__agences {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px;
  border-radius: 24px; background: #161616; color: #fff; text-decoration: none;
}
.cf-connexion__studio { display: flex; align-items: center; gap: 10px; }
.cf-connexion__tuile {
  flex: none; width: 39px; height: 39px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(255, 255, 255, 0.1);
}
.cf-connexion__tuile img { width: 23.42px; height: 29.06px; display: block; margin: 2px 0 0 1px; }
.cf-connexion__nom { display: flex; flex-direction: column; gap: 2px; }
.cf-connexion__nom b { font-size: 15px; font-weight: 500; line-height: 20px; }
.cf-connexion__nom span { font-size: 13px; line-height: 17px; color: rgba(255, 255, 255, 0.6); }
.cf-connexion__agences .cf-connexion__rond { width: 38px; height: 38px; background: #fff; }
.cf-connexion__agences:hover .cf-connexion__rond { transform: translateX(3px); }

.cf-connexion :focus-visible { outline: 2px solid #0b0c0d; outline-offset: 3px; }
.cf-connexion__agences:focus-visible { outline-color: #007692; }

/* Téléphone : une feuille sous la barre, sur un voile. */
.cf-connexion--feuille {
  top: 84px; left: 16px; right: 16px; width: auto; max-width: 400px; margin: 0 auto;
  max-height: calc(100dvh - 100px); z-index: 80;
}
.cf-connexion-voile { position: fixed; inset: 0; z-index: 79; background: rgba(10, 10, 10, 0.35); opacity: 0; transition: opacity 0.3s ease; }
.cf-connexion-voile.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cf-connexion, .cf-connexion > * { transition: none; transform: none; }
}