/* La direction du studio : une coque calme, et la personnalité dans les aperçus.
 *
 * Les jetons viennent de l'audit (§9 de `designimprove2.md`, COQUE.md §2.11) : un fond gris
 * très clair, de l'encre presque noire, un seul accent iris. La grammaire, elle, ne change
 * pas (COQUE.md §2.3) : une surface est blanche et posée par son ombre, une commande se dit
 * par son fond, un champ est un creux, une pastille n'a pas de trait. Aucun slogan, aucune
 * italique décorative, aucun texte sous 12 px.
 */
:root {
  --fond: #f6f7f9;
  --fond-2: #ffffff;
  --encre: #20232b;
  --encre-2: #626775;
  --trait: #e0e3e9;
  --accent: #5145b8;
  --accent-2: #efedff;
  --bulle-moi: #efedff;
  --bulle-lui: #fff;
  --barre: 216px;
  --tete: 68px;
  --rayon: 14px;
  /* La grammaire de coque.css, reteintée : mêmes noms, couleurs du studio. L'anneau de 6 %
   * est le SEUL contour d'un bloc blanc — et il est le même partout, sinon il redevient une
   * bordure au hasard. */
  --doux: #eef0f4;
  --doux-2: #e4e7ee;
  --anneau: 0 0 0 1px #20232b0f;
  --ombre: var(--anneau), 0 6px 20px #2023340a, 0 1px 3px #20233406;
  --studio-courbe: cubic-bezier(.22, 1, .36, 1);
}
body { -webkit-font-smoothing: antialiased; letter-spacing: -.015em; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button, a, input, textarea, select {
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--studio-courbe);
}
button:active:not(:disabled), .bouton:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid #8f83e0; outline-offset: 3px; }
/* Aucun champ brut du navigateur, nulle part : un creux neutre, jamais un cadre gris. Le
 * `:where()` garde la règle au poids d'un simple élément, pour qu'une classe de module
 * (`.saisie-champ`, une recherche de la bibliothèque) puisse toujours dire autrement. */
input:where(:not([type='file'], [type='color'], [type='range'], [type='checkbox'], [type='radio'])),
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  /* Le creux est `--doux`, pas `--fond` : posé sur le gris d'une page (le jeton de Compte),
   * un champ de la couleur du fond disparaîtrait purement et simplement. */
  background: var(--doux);
  color: var(--encre);
  font: inherit;
  /* 16 px sur téléphone : en dessous, iOS zoome sur le champ à la première frappe. */
  font-size: 16px;
}
input::placeholder, textarea::placeholder { color: var(--encre-2); }
input:where(:not([type='file'], [type='color'], [type='range'], [type='checkbox'], [type='radio'])):focus-visible,
textarea:focus-visible,
select:focus-visible { background: var(--fond-2); }
@media (min-width: 761px) {
  input:where(:not([type='file'], [type='color'], [type='range'], [type='checkbox'], [type='radio'])),
  textarea,
  select { font-size: 14px; }
}
.ui-icon { width: 19px; height: 19px; flex: none; }

/* ---- L'en-tête : le nom de la vidéo, et ce qui la situe --------------------------------- */

.coque-tete { padding-inline: 18px 30px; background: var(--fond-2); gap: 12px; }
#titre { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.coque-contexte { font-size: 12px; }
.tete-bouton { border-radius: 10px; color: var(--encre-2); }
.tete-bouton svg { width: 20px; height: 20px; }

/* ---- Le menu : trois destinations, une action, et le compte en bas ---------------------- */

#menu { padding: 26px 16px 20px; gap: 6px; background: #fafbfc; }
.studio-marque { display: flex; gap: 10px; align-items: center; margin: 0 8px 26px; text-decoration: none; color: var(--encre); font-size: 19px; font-weight: 700; letter-spacing: -.6px; min-height: 44px; }
.studio-logo { display: grid; place-content: center; position: relative; width: 34px; height: 34px; background: var(--encre); color: #fff; border-radius: 9px; font-size: 26px; font-weight: 650; line-height: 1; padding-bottom: 4px; letter-spacing: -3.5px; padding-right: 3px; }
.studio-logo span { color: #b6acf3; display: contents; }
.menu-lien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--encre-2); font-size: 14px; min-height: 46px; }
.menu-lien .ui-icon { width: 18px; height: 18px; }
.menu-lien:hover { background: #eff0f5; color: var(--encre); }
.menu-lien[aria-current='page'] { color: var(--accent); background: var(--accent-2); font-weight: 650; }
.menu-lien[aria-current='page']::after { content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-left: auto; }
/* « Créer » est l'action, et c'est le seul bouton principal de la barre : un seul traitement. */
.menu-lien-fort { justify-content: center; font-size: 14px; gap: 8px; color: #fff; background: var(--accent); margin: 0 0 8px; font-weight: 650; }
.menu-lien-fort:hover { background: #403599; color: #fff; }

/* ---- Les vues -------------------------------------------------------------------------- */

.vue:not([hidden]) { animation: studio-arrive 220ms var(--studio-courbe) both; }
@keyframes studio-arrive { from { opacity: 0; } to { opacity: 1; } }
.vue { padding: 26px 20px; }
.bouton { font-size: 14px; font-weight: 500; border-radius: 10px; }
.bouton-plein { color: #fff; box-shadow: 0 2px 5px #5145b81f; }
.bouton-plein:hover { background: #403599; }
.carte { border-radius: var(--rayon); box-shadow: var(--ombre); }
.page { gap: 22px; }
.page > h2 { font-size: 30px; letter-spacing: -1px; font-weight: 650; }
.page > h3 { font-size: 17px; font-weight: 650; }
.pastille { font-size: 12px; padding: 3px 9px; }
.badge { height: 22px; min-width: 22px; font-size: 12px; }

/* ---- La carte d'une vidéo, dans Projets -------------------------------------------------- */

.conv { gap: 14px; padding: 16px; position: relative; transition: box-shadow 160ms, transform 160ms; }
/* Une carte cliquable se dit par son ombre qui s'ouvre, jamais par la couleur d'un trait. */
.conv:hover { box-shadow: var(--anneau), 0 8px 22px #2023340f; transform: translateY(-2px); }
.conv-nom { font-size: 15px; }
.conv-quand { font-size: 12px; }
.conv-mot { font-size: 14px; line-height: 1.55; }
.conv .ligne { margin-top: 4px; }

/* ---- Projets : le champ de départ, puis ce qu'on reprend ---------------------------------- */

.studio-page-projets { max-width: 1040px; }
.studio-demarrer { padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); }
.studio-demarrer-question { color: var(--encre); font-size: 16px; font-weight: 600; margin: 0; }
/* Le champ de départ : le même creux que tous les autres, en plus haut. */
.studio-demarrer-champ { min-height: 60px; resize: none; padding: 13px 15px; line-height: 1.5; }
.studio-demarrer[data-depot='oui'] { outline: 2px dashed var(--accent); outline-offset: -6px; }
.studio-demarrer-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-demarrer-envoyer { min-width: 130px; }
.studio-raccourcis { display: flex; gap: 8px; flex-wrap: wrap; }
.studio-raccourci { font-size: 13px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--doux); color: var(--encre); cursor: pointer; display: flex; gap: 8px; align-items: center; }
.studio-raccourci:hover { background: var(--accent-2); color: var(--accent); }
.studio-section-tete { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 8px; }
.studio-section-tete h3 { font-size: 17px; font-weight: 650; margin: 0; }
.studio-section-tete > span { color: var(--encre-2); font-size: 13px; }
.studio-conversations { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.projet-form-mot { margin: 4px 0 0; color: var(--encre-2); font-size: 14px; }

/* Une conversation vide reste un point de départ, même avant le premier rush. */
.studio-bienvenue { margin: clamp(24px, 7vh, 90px) auto 30px; text-align: center; max-width: 600px; padding: 20px; }
.studio-bienvenue .studio-logo { margin: 0 auto 26px; width: 48px; height: 48px; }
.studio-bienvenue h2 { font-size: clamp(26px, 4vw, 32px); letter-spacing: -1px; font-weight: 600; margin: 0 0 12px; }
.studio-bienvenue p { color: var(--encre-2); font-size: 15px; }
.studio-bienvenue .studio-raccourcis { justify-content: center; margin-top: 26px; }

/* ---- Le pied, le fil, le mot de la coque -------------------------------------------------- */

#saisie { background: linear-gradient(0deg, var(--fond) 88%, #f6f7f900); box-shadow: none; padding: 12px 20px max(20px, var(--bas)); }
/* Le pied est une pilule blanche, rayon plein (E6a — retour d'Ahmed du 24 septembre, façon
 * ChatGPT) : anneau et ombre, comme le bloc de départ. Le champ y vit en creux neutre — les
 * deux écrans font alors exactement le même geste. */
.saisie-ligne { width: 100%; background: #fff; border-radius: 999px; padding: 12px; box-shadow: var(--anneau), 0 4px 16px #2023340a; }
/* Retouche du lead (24 septembre, capture prod-390-texte-saisi) : au-delà d'une ligne, le
 * rayon plein tourne la pilule en ellipse — un rayon de carte au-delà de la première ligne. */
.saisie-ligne.saisie-multiligne { border-radius: 28px; }
.saisie-astuce { text-align: center; width: 100%; font-size: 12px; color: var(--encre-2); }
.fil-bulle { padding: 15px 18px; font-size: 15px; line-height: 1.65; border-radius: 15px; }
.fil-lui { background: transparent; box-shadow: none; padding-left: 0; }
.fil-moi { border-bottom-right-radius: 5px; }
.fil { gap: 24px; }
.fil-heure, .fil-systeme { font-size: 12px; }
/* « Garder comme modèle » : la même commande discrète que « Télécharger » (d'où sa classe,
 * qui lui donne la cible de 44 px de `fil.css`) — il ne reste ici qu'à effacer le cadre que
 * le navigateur pose sur un bouton. */
.fil-garder { border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.fil-garder:hover { color: var(--accent); }
#status { background: var(--encre); color: #fff; font-size: 14px; box-shadow: 0 6px 25px #2023342b; }
#status:not(:empty) { animation: studio-toast 220ms ease-out; }
@keyframes studio-toast { from { opacity: 0; translate: 0 5px; } }

/* ---- La porte ----------------------------------------------------------------------------- */

.login-carte { border-radius: 20px; padding: 36px; box-shadow: var(--anneau), 0 12px 70px #20233414; max-width: 440px; }
.login-carte h1 { font-size: 28px; font-weight: 650; letter-spacing: -.8px; }
.login-carte p { font-size: 15px; }
.login-google { width: 100%; }
.login-proprietaire { font-size: 13px; }

/* ---- Grand écran : la barre, et la largeur de chaque famille de vue ------------------------ */

@media (min-width: 900px) {
  .vue { padding: 34px 36px; }
  /* Les galeries partagent une largeur ; la colonne étroite reste aux conversations (§9). */
  #vue-projets > * { max-width: 1040px; }
  #vue-videos > *, #vue-bibliotheque > *, #vue-machines > *, #vue-elements > * { max-width: 1180px; }
  .studio-conversations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coque-tete { padding-inline: 22px 36px; }
  #saisie { padding-inline: 30px; }
  #menu { width: var(--barre); }
}
@media (max-width: 600px) {
  :root { --tete: 62px; }
  .coque-tete { padding-inline: 8px 16px; }
  .studio-demarrer { padding: 16px; }
  .studio-demarrer-bas { gap: 8px; }
  .studio-demarrer-envoyer { flex: 1 1 auto; }
  .conv { padding: 14px; }
  .conv-nom { font-size: 15px; }
  .conv-mot { font-size: 14px; }
  .page > h2 { font-size: 26px; }
  #saisie { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- Les rendus livrés, à la mesure du studio ------------------------------------------- */

.livree-dernier { border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; }
.livree-dernier-chapeau { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.livree-dernier-corps > h4 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.livree-dernier-corps .ligne { margin-top: 6px; }
.livree-filtre { font-size: 14px; border-radius: 999px; }
.livree-filtre[aria-pressed='true'] { color: var(--accent); }
.livree-badge, .livree-tag { font-size: 12px; }
.projets-chip { font-size: 14px; }
@media (max-width: 600px) {
  /* La vignette passe sur sa propre ligne : à 390 px, le texte à côté n'a plus de place. Elle
   * ne prend pas toute la largeur pour autant — une affiche repousserait le reste hors écran. */
  .livree-dernier { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .livree-dernier-vignette { width: 100%; max-width: 220px; }
  .livree-dernier-corps .bouton { flex: 1 1 auto; }
}

/* ---- La vue Crédit (EF-13) : le seul autre endroit qui affiche un montant ---------------- */

.credit-solde { font-size: 34px; letter-spacing: -1px; }
.credit-montant { font-weight: 650; }