/* Tinkly · le studio.
 *
 * Se charge APRES style.css et n'en redefinit aucun jeton : les couleurs, les
 * polices et les rayons viennent de la. Ce fichier ne contient que ce que le
 * studio ajoute, c'est a dire un plan de travail infini et les panneaux qui
 * flottent dessus.
 *
 * TROIS CHOSES QUI NE SE DEVINENT PAS
 *
 * 1. Le canvas ne defile pas, il se TRANSFORME. `#plan` porte un
 *    `translate()` et un `scale()`, et rien d'autre ne bouge. Un canvas qui
 *    defilerait avec overflow ne saurait pas zoomer sous le curseur.
 *
 * 2. Les panneaux sont en `position: fixed` au-dessus du plan, jamais dedans.
 *    Posés dans le plan, ils grossiraient avec le zoom.
 *
 * 3. Les maquettes sont a leur TAILLE REELLE, 390 de large pour un telephone
 *    et 1440 pour un ordinateur. C'est le zoom qui les rend lisibles, pas une
 *    mise a l'echelle du contenu : autrement le rendu mentirait sur ce que la
 *    personne obtiendra vraiment. */

body.studio {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--fond);
  color: var(--texte);
  /* Le doigt sur le canvas deplace la vue, il ne fait pas defiler la page. */
  touch-action: none;
  overscroll-behavior: none;
}

/* ================================================================ le plan == */

#scene {
  position: fixed;
  inset: 0;
  cursor: default;
  /* La trame. Elle se deplace et se densifie avec le zoom, ce qui est le seul
     repere visuel qui dit qu'on se deplace dans un espace et pas dans une
     page. Les deux variables sont posees par studio.js. */
  background-color: var(--fond);
  background-image: radial-gradient(circle at 1px 1px, var(--bord-vif) 1px, transparent 0);
  background-size: var(--pas, 24px) var(--pas, 24px);
  background-position: var(--decalage-x, 0) var(--decalage-y, 0);
}

#scene.main {
  cursor: grab;
}
#scene.main.prise,
#scene.deplace {
  cursor: grabbing;
}

#plan {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ============================================================ une maquette == */

.maquette {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--ombre-maquette);
  /* Pas de transition sur transform : elle se battrait avec le zoom. */
  transition: box-shadow 0.15s ease;
}

.maquette .etiquette {
  position: absolute;
  top: -34px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--texte-2);
  /* L'etiquette garde sa taille quel que soit le zoom : studio.js pose la
     contre-echelle ici. Un titre qui grossit avec le zoom devient illisible
     des qu'on s'eloigne. */
  transform-origin: 0 100%;
  transform: scale(var(--contre, 1));
}

.maquette .etiquette .genre {
  color: var(--texte-3);
}

.maquette .etiquette .genre::after {
  content: "·";
  margin: 0 6px;
  color: var(--texte-3);
}

.maquette .cadre {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 14px;
  display: block;
  background: #fff;
}

/* La selection. Quatre poignees aux angles, comme dans un outil de design :
   c'est le signe que l'objet est manipulable, pas seulement affiche. */
.maquette.choisie {
  box-shadow: var(--ombre-maquette), 0 0 0 2px var(--selection, #4a8cff);
}

.maquette .poignee {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid var(--selection, #4a8cff);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--contre, 1));
}
.maquette.choisie .poignee {
  opacity: 1;
}
.maquette .poignee.ho {
  top: -5px;
  left: -5px;
  transform-origin: 0 0;
}
.maquette .poignee.hd {
  top: -5px;
  right: -5px;
  transform-origin: 100% 0;
}
.maquette .poignee.bo {
  bottom: -5px;
  left: -5px;
  transform-origin: 0 100%;
}
.maquette .poignee.bd {
  bottom: -5px;
  right: -5px;
  transform-origin: 100% 100%;
}

/* ================================================= les panneaux flottants == */

.flottant {
  position: fixed;
  z-index: 5;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--bord);
  border-radius: 14px;
  box-shadow: var(--ombre-panneau);
}

/* --------------------------------------------------------- la colonne -- */

#colonne {
  top: 0;
  left: 0;
  bottom: 0;
  width: 248px;
  border-radius: 0;
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease;
}

body.repliee #colonne {
  width: 56px;
}

#colonne .entete-colonne {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
}

#colonne .marque-studio {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

#colonne .marque-studio img {
  width: 26px;
  height: 26px;
  flex: none;
}

#colonne .atelier {
  margin: 0 10px 10px;
  padding: 8px 10px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--texte-2);
  cursor: pointer;
  background: none;
  width: calc(100% - 20px);
  text-align: left;
}

#colonne nav {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lien-colonne {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--texte-2);
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.lien-colonne:hover {
  background: var(--surface-haut);
  color: var(--texte);
}

.lien-colonne.actif {
  background: var(--surface-haut);
  color: var(--texte);
}

.lien-colonne .ic {
  flex: none;
  width: 18px;
  display: grid;
  place-items: center;
  opacity: 0.85;
}

.lien-colonne .mot {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.repliee .lien-colonne .mot,
body.repliee .titre-groupe,
body.repliee #colonne .atelier .mot,
body.repliee .credits .detail-credits,
body.repliee .marque-studio span {
  display: none;
}

.titre-groupe {
  padding: 16px 18px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-3);
}

#recents {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
}

/* ------------------------------------------------------------ credits -- */

.credits {
  margin: 8px;
  padding: 11px 12px;
  border: 1px solid var(--bord-vif);
  border-radius: 12px;
  background: var(--accent-voile);
}

.credits .ligne-credits {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.credits .nombre {
  font-weight: 600;
  color: var(--texte);
}

.credits .jauge {
  margin-top: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--bord-vif);
  overflow: hidden;
}

.credits .jauge i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

.credits .detail-credits {
  margin-top: 8px;
  font-size: 12px;
  color: var(--texte-3);
  line-height: 1.4;
}

.credits button {
  margin-top: 9px;
  width: 100%;
  padding: 7px;
  border-radius: 8px;
  border: 0;
  background: var(--action);
  color: var(--action-texte);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

/* --------------------------------------------------- le titre du projet -- */

#barre-projet {
  top: 14px;
  left: 272px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  transition: left 0.18s ease;
}

body.repliee #barre-projet {
  left: 80px;
}

#barre-projet .nom-projet {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
}

.bascule {
  display: flex;
  background: var(--fond-2);
  border-radius: 9px;
  padding: 2px;
  border: 1px solid var(--bord);
}

.bascule button {
  padding: 5px 14px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--texte-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.bascule button[aria-pressed="true"] {
  background: var(--surface-haut);
  color: var(--texte);
  box-shadow: 0 1px 3px var(--voile-modale);
}

/* ------------------------------------------------------- haut a droite -- */

#actions-haut {
  /* AU-DESSUS DU PANNEAU DES VOLETS, qui est en 8. Sans ca le panneau couvre
     tout le haut de l'ecran et avale les clics : le bouton de theme et Publier
     devenaient inertes des qu'on ouvrait Mon idee ou Le Radar, alors qu'ils
     restaient parfaitement visibles. Un bouton visible qui ne repond pas est
     pire qu'un bouton absent. */
  z-index: 10;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
}

#actions-haut button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 0;
  background: none;
  color: var(--texte-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

#actions-haut button.principal {
  background: var(--action);
  color: var(--action-texte);
  font-weight: 600;
}

/* ------------------------------------------------- la barre flottante -- */

#outils {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: 14px;
}

#outils .sep {
  width: 1px;
  height: 22px;
  background: var(--bord-vif);
  margin: 0 5px;
}

.outil {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 0;
  background: none;
  color: var(--texte-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.outil:hover {
  background: var(--surface-haut);
  color: var(--texte);
}

.outil[aria-pressed="true"] {
  background: var(--surface-haut);
  color: var(--texte);
}

.outil.muet {
  color: var(--texte-3);
  cursor: not-allowed;
}

/* ------------------------------------------------ le panneau de suites -- */

#suites {
  top: 68px;
  right: 14px;
  width: 262px;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scrollbar-width: thin;
}

#suites .entete-suites {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--texte-2);
  padding: 0 2px 2px;
}

#suites .entete-suites button {
  background: none;
  border: 0;
  color: var(--texte-3);
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}

.suite {
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  display: block;
  width: 100%;
}

.suite:hover {
  border-color: var(--bord-net);
  background: var(--surface-haut);
}

.suite .genre-suite {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 9px;
  border: 1px solid var(--bord-vif);
  color: var(--texte-2);
}

/* Les trois genres, distingues par la seule chose dont on dispose : la
   densite du trait et du fond. Le systeme n'a qu'un accent, on ne va pas en
   inventer trois. */
.suite[data-genre="direction"] .genre-suite {
  background: var(--accent-voile);
  border-color: var(--accent-halo);
  color: var(--accent-clair);
}
.suite[data-genre="incrementale"] .genre-suite {
  background: transparent;
}
.suite[data-genre="refonte"] .genre-suite {
  background: var(--accent);
  color: var(--action-texte);
  border-color: transparent;
}

.suite .texte-suite {
  font-size: 14px;
  line-height: 1.4;
  color: var(--texte);
}

/* ---------------------------------------------------- le fil de l agent -- */

#fil {
  left: 272px;
  bottom: 18px;
  width: 372px;
  max-height: 60dvh;
  display: flex;
  flex-direction: column;
  transition: left 0.18s ease;
}

body.repliee #fil {
  left: 80px;
}

#fil .compte-rendu {
  padding: 13px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#fil .marqueur {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--accent-voile);
  border: 1px solid var(--accent-halo);
  color: var(--accent-clair);
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

#fil .bilan {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texte-2);
  margin-bottom: 9px;
}

#fil .bilan .coche {
  color: var(--accent-clair);
}

#fil ul {
  margin: 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#fil li {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--texte);
}

#fil li.fait {
  color: var(--texte-3);
}

#fil .zone-saisie {
  border-top: 1px solid var(--bord);
  padding: 11px 12px 10px;
}

#fil textarea {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  color: var(--texte);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  min-height: 42px;
  max-height: 140px;
}

#fil textarea::placeholder {
  color: var(--texte-3);
}

#fil .pied-saisie {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}

.puce-contexte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  font-size: 12px;
  color: var(--texte-2);
  max-width: 190px;
}

.puce-contexte span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puce-contexte button {
  background: none;
  border: 0;
  color: var(--texte-3);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 14px;
}

#fil .espace {
  flex: 1;
}

/* Le choix du modele. Chez nous il n'y a PAS de palier gratuit : ce menu ne
   sert pas a faire essayer, il sert a choisir combien on depense. Le cout en
   credits est donc affiche sur chaque ligne, jamais cache. */
#choix-modele {
  position: relative;
}

#choix-modele > button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte-2);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}

#menu-modele {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  width: 286px;
  padding: 7px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--bord-vif);
  box-shadow: var(--ombre-panneau);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#menu-modele[hidden] {
  display: none;
}

.ligne-modele {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.ligne-modele:hover {
  background: var(--surface-haut);
}

.ligne-modele[aria-checked="true"] {
  background: var(--accent-voile);
}

.ligne-modele .corps {
  flex: 1;
  min-width: 0;
}

.ligne-modele .nom {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texte);
}

.ligne-modele .sous {
  font-size: 12px;
  color: var(--texte-3);
  margin-top: 1px;
}

.ligne-modele .cout {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-clair);
  white-space: nowrap;
}

#menu-modele .note-menu {
  padding: 8px 10px 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--texte-3);
  border-top: 1px solid var(--bord);
  margin-top: 4px;
}

#fil .envoyer {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: var(--action);
  color: var(--action-texte);
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* ================================================== le zoom, en bas a droite */

#zoom {
  bottom: 18px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
}

#zoom button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--texte-2);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
}

#zoom button:hover {
  background: var(--surface-haut);
  color: var(--texte);
}

#zoom .taux {
  min-width: 48px;
  text-align: center;
  font-size: 12.5px;
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
}

/* ====================================================== le bouton de menu == */

/* CE BLOC DOIT RESTER AVANT LES REQUETES MEDIA. Pose apres, son `display:
   none` gagnait par ordre de source sur le `display: grid` de la requete a
   640 pixels, et le bouton n'existait tout simplement pas sur telephone. */
#ouvrir-tiroir {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 16;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--bord);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  color: var(--texte-2);
  cursor: pointer;
}

#voile {
  position: fixed;
  inset: 0;
  background: var(--voile-modale);
  z-index: 15;
}

#voile[hidden] {
  display: none;
}

/* ================================================================ mobile == */

/* Sous 1100px le panneau de suites disparait : trois panneaux flottants sur un
   ecran etroit ne laissent plus voir la maquette, qui est la seule chose qu'on
   est venu regarder. */
@media (max-width: 1100px) {
  #suites {
    display: none;
  }
  #fil {
    width: min(372px, calc(100vw - 96px));
  }
}

@media (max-width: 860px) {
  #colonne {
    width: 56px;
  }
  #barre-projet,
  #fil {
    left: 72px;
  }
}

@media (max-width: 640px) {
  /* Le telephone. La colonne sort de l'ecran et revient en tiroir, le fil
     prend toute la largeur en bas, et la barre d'outils perd ses mots pour ne
     garder que ses icones. La maquette occupe tout le reste. */
  #colonne {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: 248px;
    z-index: 20;
  }
  body.tiroir #colonne {
    transform: none;
  }
  #ouvrir-tiroir {
    display: grid;
  }

  /* La barre du haut se chevauchait : le nom du projet, la bascule et le
     bouton Publier ne tiennent pas cote a cote dans 390 pixels. Publier perd
     son mot et garde son icone, la bascule se resserre. */
  #barre-projet {
    left: 58px;
    top: 10px;
    right: auto;
    padding: 4px;
    gap: 3px;
  }
  #barre-projet .nom-projet {
    max-width: 24vw;
    padding: 5px 7px;
    font-size: 13px;
    overflow: hidden;
  }
  #barre-projet .nom-projet .mot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bascule button {
    padding: 5px 10px;
    font-size: 12px;
  }
  #actions-haut {
    top: 10px;
    right: 10px;
  }
  /* Inviter disparait sur telephone, PAS le bouton de theme. Les deux
     portaient la meme classe, donc masquer l'un masquait l'autre : le mode
     jour devenait inatteignable sur telephone, alors que c'est precisement la
     que quelqu'un le cherche, dehors en plein soleil. */
  #actions-haut .secondaire:not(#bascule-theme) {
    display: none;
  }
  #actions-haut .principal .mot {
    display: none;
  }
  #actions-haut .principal {
    padding: 8px 10px;
  }

  #fil {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 76px;
    /* 32dvh et pas 44 : a 44 le fil mangeait les deux tiers de l'ecran et la
       maquette passait derriere. Le fil defile, la maquette non. */
    max-height: 32dvh;
  }

  #outils {
    bottom: 12px;
    left: 10px;
    right: 10px;
    transform: none;
    justify-content: space-around;
    padding: 5px;
  }
  .outil .mot {
    display: none;
  }
  .outil {
    padding: 9px 11px;
  }

  #zoom {
    display: none;
  }
}

/* ============================================ le selecteur de format == */

#formats button {
  padding: 5px 9px;
  display: grid;
  place-items: center;
  color: var(--texte-3);
}

#formats button[aria-pressed="true"] {
  color: var(--texte);
}

/* ================================================ le reste de l'espace == */

/* Le studio n'est qu'un volet sur six. Ce panneau couvre le plan de travail
   quand on ouvre un des cinq autres. Il est opaque et non pas translucide :
   derriere lui vit un canvas quadrille qui donnerait un fond sale a du texte
   qu'on vient lire. */
#panneau {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 248px;
  z-index: 8;
  background: var(--fond);
  overflow-y: auto;
  scrollbar-width: thin;
  transition: left 0.18s ease;
}

#panneau[hidden] {
  display: none;
}

body.repliee #panneau {
  left: 56px;
}

#panneau-corps {
  max-width: 1120px;
  margin: 0 auto;
  /* 68 en haut et pas 34 : les boutons du coin superieur droit flottent
     par-dessus le panneau, et un titre qui passe dessous serait illisible. */
  padding: 68px 32px 60px;
}

.titre-vue {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 5px;
}

.chapo-vue {
  color: var(--texte-2);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 62ch;
}

.bloc {
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: var(--fond-2);
  padding: 18px;
  margin-bottom: 13px;
}

.bloc h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16.5px;
  margin: 0 0 7px;
}

.bloc p {
  margin: 0;
  color: var(--texte-2);
  font-size: 14px;
  line-height: 1.55;
}

.rang-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.etq {
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--bord-vif);
  font-size: 11.5px;
  color: var(--texte-2);
}

.etq.fort {
  background: var(--accent-voile);
  border-color: var(--accent-halo);
  color: var(--accent-clair);
}

/* ---------------------------------------------------------- le depot -- */

.arbre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--texte-2);
}

.arbre .d {
  color: var(--texte);
}

pre.prompt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--texte-2);
  white-space: pre-wrap;
  margin: 0;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* -------------------------------------------------------- les 30 jours -- */

.grille-jours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px;
}

.jour {
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--fond-2);
  padding: 13px;
}

.jour .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--texte-3);
  letter-spacing: 0.05em;
}

.jour b {
  display: block;
  font-size: 14px;
  margin: 5px 0 5px;
}

.jour p {
  font-size: 12.5px;
  color: var(--texte-2);
  margin: 0;
  line-height: 1.5;
}

/* ----------------------------------------------------- le listing SaaS -- */

.barre-listing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.barre-listing input[type="search"] {
  flex: 1;
  min-width: 190px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.barre-listing input[type="search"]:focus {
  border-color: var(--bord-net);
}

.barre-listing select {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte-2);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.compte-listing {
  font-size: 13px;
  color: var(--texte-3);
  margin-bottom: 12px;
}

.grille-saas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
}

.carte-saas {
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: var(--fond-2);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.carte-saas:hover {
  border-color: var(--bord-net);
  background: var(--surface);
}

.carte-saas .haut-carte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.carte-saas .nom-saas {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carte-saas .mrr {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent-clair);
  white-space: nowrap;
}

.carte-saas .quoi-saas {
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--texte-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte-saas .pied-carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--bord);
  font-size: 11.5px;
  color: var(--texte-3);
}

/* LA DATE EST OBLIGATOIRE SUR CHAQUE FICHE. Le revenu est verifie aupres du
   processeur de paiement, mais certaines lignes n'ont pas ete resynchronisees
   depuis avril. Un chiffre sans sa date laisse croire qu'il est d'aujourd'hui. */
.carte-saas .maj {
  font-variant-numeric: tabular-nums;
}

.detail-saas {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--voile-modale);
  display: grid;
  place-items: center;
  padding: 24px;
}

.detail-saas[hidden] {
  display: none;
}

.detail-saas .feuille {
  width: min(680px, 100%);
  max-height: 84dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--surface);
  border: 1px solid var(--bord-vif);
  border-radius: 16px;
  padding: 24px;
}

.detail-saas h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 22px;
  margin: 0 0 3px;
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.chiffre {
  border: 1px solid var(--bord);
  border-radius: 11px;
  padding: 11px;
  background: var(--fond-2);
}

.chiffre i {
  font-style: normal;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-3);
  display: block;
}

.chiffre b {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 19px;
  display: block;
  margin-top: 4px;
}

@media (max-width: 860px) {
  #panneau {
    left: 56px;
  }
}

@media (max-width: 640px) {
  #panneau {
    left: 0;
    top: 58px;
  }
  #panneau-corps {
    padding: 18px 16px 48px;
  }
  .titre-vue {
    font-size: 22px;
  }
}

/* ============================================= le bouton de mode jour == */

#bascule-theme {
  width: 32px;
  padding: 6px;
  display: grid;
  place-items: center;
}

/* ================================================ Mon idee, le parcours == */

.rang-question {
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 8px;
}

.jauge-parcours {
  height: 3px;
  border-radius: 2px;
  background: var(--bord-vif);
  overflow: hidden;
  margin: 0 0 26px;
}

.jauge-parcours i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.25s ease;
}

/* L AIDE EST AU-DESSUS DES CHOIX ET TOUJOURS VISIBLE, jamais dans une bulle a
   survoler : sur telephone il n y a pas de survol, et une aide qu il faut
   chercher n aide personne. C est la demande exacte d Ilyasse. */
.aide-question {
  border-left: 2px solid var(--accent-halo);
  background: var(--accent-voile);
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
  margin-bottom: 20px;
}

.aide-question p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-2);
}

.choix-question {
  display: grid;
  gap: 9px;
}

.option-question {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

.option-question:hover {
  border-color: var(--bord-net);
  background: var(--surface-haut);
}

.option-question.prise {
  border-color: var(--accent-halo);
  background: var(--accent-voile);
}

.option-question .l {
  font-size: 15px;
  font-weight: 600;
}

.option-question .d {
  font-size: 12.5px;
  color: var(--texte-3);
}

.retour-question {
  margin-top: 18px;
  background: none;
  border: 0;
  color: var(--texte-3);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.retour-question:hover {
  color: var(--texte-2);
}

.ligne-recap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bord);
  font-size: 13.5px;
}

.ligne-recap:last-child {
  border-bottom: 0;
}

.ligne-recap .q {
  color: var(--texte-2);
  flex: 1;
}

.ligne-recap .r {
  font-weight: 600;
  white-space: nowrap;
}

.bouton-generer {
  margin-top: 18px;
  padding: 13px 22px;
  border-radius: 11px;
  border: 0;
  background: var(--action);
  color: var(--action-texte);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.bouton-generer:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ====================================== Mon idee, l'ecran de recapitulatif

   « Quand t'arrives a la fin, que tu spam clic, ca te fait revenir en mode
   corriger l'idee alors que la je veux plutot que ca me dise go genere. »

   Le bug de fond est corrige dans espace-idee.js, ou la reconstruction de
   l'ecran sort du gestionnaire de clic. Ce qui suit corrige l'autre moitie :
   le recapitulatif ne pose plus une liste de boutons pleine largeur a l'endroit
   exact ou la question d'avant posait ses options. La zone cliquable est un
   petit bouton en bout de ligne, et les reponses sont repliees.

   `.ligne-recap` EXISTE DEJA (plus haut dans cette feuille) ET SERT A LA
   MAQUETTE, avec des enfants `.q` et `.r`. Tout ce qui suit est donc scope a
   `.recap-reponses`, sinon assets/maquette.js changerait de forme sans que
   personne ne touche a la maquette. */

.actions-recap {
  margin: 4px 0 10px !important;
}

/* Le bouton de tete est le seul de l'ecran a prendre toute la largeur utile :
   c'est lui qui repond a « qu'est-ce que je fais maintenant ». */
.dossier .actions-recap .bouton-large {
  max-width: none;
}

.repli-recap {
  margin: 22px 0 4px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--surface);
  overflow: hidden;
}

.repli-recap > summary {
  padding: 14px 18px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--texte-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
}

.repli-recap > summary::-webkit-details-marker {
  display: none;
}

/* Le chevron est un caractere et pas une image : il tourne, donc il dit dans
   quel sens ca va s'ouvrir, et il ne coute pas une requete. */
.repli-recap > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--texte-3);
  border-bottom: 1.5px solid var(--texte-3);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
}

.repli-recap[open] > summary::before {
  transform: rotate(45deg) translate(-2px, -2px);
}

.repli-recap > summary:hover {
  color: var(--texte);
  background: var(--surface-haut);
}

.recap-reponses {
  padding: 2px 18px 8px;
  border-top: 1px solid var(--bord);
}

/* TROIS COLONNES : le rang, la reponse, l'action. Le rang existe pour la meme
   raison que dans les fiches d'idees : une colonne de quinze lignes sans
   numero se lit comme un paragraphe coupe. */
.recap-reponses .ligne-recap {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 11px 0;
  font-size: 14px;
}

.recap-reponses .rang-recap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--texte-3);
  align-self: start;
  padding-top: 2px;
}

.recap-reponses .texte-recap {
  min-width: 0;
}

.recap-reponses .texte-recap .label {
  display: block;
  font-size: 13px;
  color: var(--texte-3);
  line-height: 1.4;
}

/* LA REPONSE EST CE QU'ON RELIT, PAS LA QUESTION. C'est l'inverse de la
   version d'avant, ou le titre de la question etait en gras et la reponse en
   gris clair : on relisait quinze fois ce qu'on venait de lire. */
.recap-reponses .texte-recap .detail {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--texte);
  line-height: 1.45;
}

.recap-reponses .sans-reponse .texte-recap .detail {
  font-weight: 400;
  color: var(--texte-3);
  font-style: italic;
}

.recap-reponses .modifier-recap {
  flex: none;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--texte-3);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: var(--transition);
}

.recap-reponses .modifier-recap:hover:not(:disabled) {
  color: var(--texte);
  border-color: var(--bord-vif);
  background: var(--surface-haut);
}

.recap-reponses .modifier-recap:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sur telephone, le bouton passe sous la reponse plutot que de lui voler la
   largeur : une reponse coupee a trois mots ne se relit pas. */
@media (max-width: 560px) {
  .recap-reponses .ligne-recap {
    grid-template-columns: 26px 1fr;
    row-gap: 8px;
  }
  .recap-reponses .modifier-recap {
    grid-column: 2;
    justify-self: start;
  }
}

/* ======================================== Le menu du projet, dans le studio

   Le chevron a cote du nom du projet promettait un menu depuis le debut du
   balisage et n ouvrait rien. Il ouvre maintenant les trois seuls gestes qui
   existent sur un projet. */

.menu-projet {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 210px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--bord-vif);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* `[hidden]` perd contre `display:flex` pose sur une classe : c est le meme
   piege que la surimpression du Radar et que `#suites`, deja rencontre deux
   fois dans ce depot. */
.menu-projet[hidden] {
  display: none;
}

/* Le parent doit porter la reference de position, sinon le menu se pose par
   rapport a la fenetre et part en haut a gauche de l ecran. */
#barre-projet {
  position: relative;
}

/* ET IL DOIT SE HISSER PENDANT QUE LE MENU EST OUVERT. `#barre-projet` et
   `#ecrans` sont tous deux `.flottant`, donc tous deux en z-index 5 : l ordre
   du balisage tranche, et la barre des ecrans vient apres. Comme le z-index de
   la barre cree un contexte d empilement, le menu, qui est son enfant, ne peut
   pas en sortir tout seul : c est la BARRE qu il faut monter, pas le menu. */
#barre-projet.menu-ouvert {
  z-index: 41;
}

.menu-projet .ligne-menu {
  text-align: left;
  padding: 9px 11px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--texte-2);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: var(--transition);
}

.menu-projet .ligne-menu:hover {
  background: var(--surface-haut);
  color: var(--texte);
}

.menu-projet .ligne-menu.danger {
  color: var(--texte-3);
}

.menu-projet .ligne-menu.danger:hover,
.menu-projet .ligne-menu.arme {
  color: var(--urgence);
}

.menu-projet .ligne-menu.arme {
  background: var(--surface-haut);
  font-weight: 560;
}

/* ================================= Mes projets, supprimer une page, un projet

   Demande d'Ilyasse du 16 septembre 2026 : « les anciens projets, tu peux les
   enlever » et « il faut pouvoir supprimer les pages generees ». Il n'existait
   aucun moyen de supprimer quoi que ce soit : la liste des fichiers etait un
   mur de `code` sans action, et la carte n'avait qu'un bouton « Ouvrir ». */

.carte-projet .fichier-projet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* LA CROIX NE SE VOIT QU'AU SURVOL DE SA LIGNE, et reste toujours atteignable
   au doigt : sur telephone il n'y a pas de survol, donc `:focus-within` et la
   requete de pointeur grossier la rendent visible d'office. Une croix affichee
   en permanence sur chaque ligne transforme une liste en tableau de bord de
   suppression, et c'est la derniere chose qu'on veut mettre en avant. */
.carte-projet .retirer-page {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texte-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
}

.carte-projet .fichier-projet:hover .retirer-page,
.carte-projet .retirer-page:focus-visible {
  opacity: 1;
}

.carte-projet .retirer-page:hover {
  color: var(--urgence);
  background: var(--surface-haut);
}

@media (hover: none) {
  .carte-projet .retirer-page {
    opacity: 0.7;
  }
}

/* LE BOUTON ARME CHANGE DE COULEUR, pas seulement de texte. Quelqu'un qui
   clique vite lit le mouvement avant de lire la phrase, et c'est le seul
   endroit du produit ou un deuxieme clic efface pour de bon. */
.dossier .carte-projet .bouton.fantome.arme {
  color: var(--urgence);
  border-color: var(--urgence);
}

/* ================================================ Mon idee, les trois fiches

   « La presentation, c'est ce qui compte le plus. » Ce qui suit remplace le
   paragraphe par un dossier : trois etages qui ne se ressemblent pas, un seul
   chiffre gros, un ordre de lecture numerote, et une bande d'action en bas qui
   touche les bords.

   TOUT CE QUI SE BAT AVEC L'EXISTANT EST PREFIXE PAR `.dossier`, ET CE N'EST
   PAS DU ZELE. Les regles de cette carte vivent deja en `.dossier .idee` dans
   style.css (padding 24px, 28px 30px au-dessus de 720px). Une regle
   `.fiche-idee` toute seule pese moins qu'elles : la remise a zero du padding
   ne prendrait pas, et la bande du bas resterait a 24px des bords. */

.dossier .fiche-idee {
  padding: 0;
  overflow: hidden;
  transition: border-color var(--transition);
  /* Le decale a l'arrivee. 70ms entre les trois, pas plus : au-dela on attend,
     et ce qui se fait attendre a l'air lent, pas soigne. */
  opacity: 0;
  transform: translateY(10px);
  animation: fiche-entre 320ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: calc(var(--rang-fiche, 0) * 70ms);
}

.dossier .fiche-idee:hover {
  border-color: var(--bord-vif);
}

@keyframes fiche-entre {
  to {
    opacity: 1;
    transform: none;
  }
}

/* prefers-reduced-motion coupe les transitions a 1ms dans style.css mais PAS
   les animations : chaque animation nouvelle porte sa propre extinction. */
@media (prefers-reduced-motion: reduce) {
  .dossier .fiche-idee {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ------------------------------------------------------------ l'identite -- */

.fiche-idee .tete-idee {
  padding: 22px 24px 20px;
}

.fiche-idee .tete-idee .kicker {
  margin-bottom: 10px;
}

/* LE SELECTEUR EST LONG PARCE QU'IL DOIT L'ETRE. `.carte .intitule`
   (style.css:719) passe TOUT `.intitule` d'une carte en 13px gris majuscules :
   le nom de l'idee, niche dans `.tete-idee`, y tomberait. Et une regle
   `.fiche-idee .intitule` ecraserait au passage `.volet .intitule`, qui doit
   rester une etiquette. On ne vise donc que le nom, par son chemin exact. */
.fiche-idee > .tete-idee > .intitule {
  font-family: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  font-size: clamp(22px, 5.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  text-transform: none;
  color: var(--texte);
  margin: 0 0 12px;
}

/* LA PROMESSE N'EST PAS DU CORPS DE TEXTE. C'est elle qui decide si on lit la
   suite : elle est plus grande que le reste et d'une autre couleur. 17px sur
   17px dans le meme blanc, c'est exactement ce qui faisait bloc. */
.fiche-idee .promesse-idee {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--texte-2);
  max-width: 46ch;
}

/* ------------------------------------------------------- la bande chiffree */

.fiche-idee .bande-chiffres {
  margin: 0;
  padding: 0 24px 2px;
  gap: 10px;
}

/* LES DEUX AUTRES TUILES REDESCENDENT, ET C'EST CE QUI FAIT GAGNER LE PRIX.
   Mesure prise a l'ecran : « Quelques semaines » en 25px sur deux lignes pesait
   plus lourd que « 29 a 49 EUR » en 29px sur une seule. Un ecart de taille ne
   se lit pas sur la taille de la police, il se lit sur la surface d'encre. */
.fiche-idee .tuile-chiffre b {
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  line-height: 1.25;
}

/* LA TUILE FORTE EST LA SEULE, ET C'EST LA REGLE. Trois tuiles mises en avant,
   c'est zero tuile mise en avant : l'oeil n'a plus de premiere marche. Le prix
   la prend parce que c'est la seule ligne de la fiche qui repond a « est-ce
   que ca vaut le coup ».

   TROIS SIGNAUX, PAS UN SEUL. Le fond teinte de --accent-voile est a neuf pour
   cent d'opacite : a l'ecran il ne se distinguait presque pas du fond de la
   carte. Le filet epais a gauche et le corps plus gros font le travail meme
   pour quelqu'un qui ne voit pas la nuance, et ils survivent au niveau de
   gris. */
.fiche-idee .tuile-chiffre.forte {
  background: var(--accent-voile);
  border-color: var(--accent-halo);
  border-left: 3px solid var(--accent);
}

/* LE PRIX NE SE COUPE PAS EN DEUX. Mesure prise a 420px : la bande tombe a
   deux colonnes de 160px, et « 29 a 49 EUR » en 30px renvoyait le symbole euro
   seul a la ligne suivante. Le corps suit donc la largeur de l'ecran, et le
   `nowrap` interdit la coupure meme si un montant a trois chiffres arrive. */
.fiche-idee .tuile-chiffre.forte b {
  font-size: clamp(20px, 5.2vw, 30px);
  line-height: 1.1;
  color: var(--texte);
  white-space: nowrap;
}

/* -------------------------------------------------------------- les jetons */

/* `.bornes` et `.dossier .idee .bornes span` existent depuis toujours dans
   style.css:1646. On ne fait que les poser au bon endroit dans une carte qui
   n'a plus de padding a elle. */
.dossier .fiche-idee .bornes {
  margin: 14px 0 2px;
  padding: 0 24px;
}

/* ------------------------------------------------------ l'ordre de lecture */

/* LE RANG EST UNE MARCHE, PAS UN ORNEMENT. Trois intertitres du meme gris a la
   meme taille se lisent comme un seul paragraphe coupe en trois : c'etait le
   defaut exact de la version d'avant. Un numero en monospace devant chacun dit
   qu'il y a un ordre, et qu'il a ete decide. */
.dossier .fiche-idee .volet {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 14px;
  align-items: start;
  margin: 0;
  padding: 17px 24px;
  border-top: 1px solid var(--bord);
}

.dossier .fiche-idee .volet::before {
  content: attr(data-rang);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--texte-3);
}

.dossier .fiche-idee .volet .intitule {
  grid-column: 2;
  margin-bottom: 5px;
}

.dossier .fiche-idee .volet p {
  grid-column: 2;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--texte-2);
  max-width: 54ch;
}

/* --------------------------------------------------- par ou on commence -- */

/* Traite comme l'aide du questionnaire, le seul fond teinte de la maison. Et
   il touche les bords, donc c'est une bande et pas un paragraphe de plus. */
.dossier .fiche-idee .pied-idee {
  margin: 0;
  padding: 6px 24px 16px;
  border-top: 1px solid var(--accent-halo);
  background: var(--accent-voile);
}

.dossier .fiche-idee .pied-idee .volet {
  padding-left: 0;
  padding-right: 0;
  border-top: 0;
}

.dossier .fiche-idee .pied-idee .volet + .volet {
  border-top: 1px solid var(--bord);
}

/* ------------------------------------------------------------- l'action -- */

.dossier .fiche-idee .action-idee {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--bord);
}

.dossier .fiche-idee .action-idee .bouton {
  font-size: 15.5px;
  padding: 14px 20px;
}

/* -------------------------------------------------------------- au large -- */

@media (min-width: 720px) {
  .fiche-idee .tete-idee {
    padding: 26px 30px 22px;
  }
  .fiche-idee .bande-chiffres {
    padding: 0 30px 2px;
  }
  .dossier .fiche-idee .bornes {
    padding: 0 30px;
  }
  .dossier .fiche-idee .volet {
    padding: 19px 30px;
  }
  .dossier .fiche-idee .pied-idee {
    padding: 6px 30px 18px;
  }
  .dossier .fiche-idee .action-idee {
    padding: 18px 30px 22px;
  }
}

/* ============================================ Mon idee, l'ecran qui travaille

   « J'aimerais bien qu'il y ait une petite animation stylee, mignonne. Un peu
   comme le menu d'etapes de Claude, avec le texte qui apparait. »

   Une generation dure de trente secondes a plus d'une minute. Avant, l'ecran
   ne bougeait pas : le recapitulatif restait affiche avec un bouton grise. Un
   ecran immobile se lit comme un ecran mort, et on recharge, ce qui perd la
   generation qu'on vient de payer.

   .etapes, .etape, .puce et .anneau-calcul viennent de style.css et ne sont pas
   redefinies ici. Ce bloc ne pose que le cadre et les squelettes. */

.attente-idee {
  text-align: center;
  padding: 10px 0 6px;
}

.attente-idee .titre {
  margin-bottom: 8px;
}

/* LE TROISIEME ANNEAU EST INVISIBLE EN MODE JOUR SANS CETTE LIGNE.
   `.anneau-calcul i:nth-child(3)` le colore en var(--bord-fort), un jeton qui
   n'est defini nulle part, avec pour repli un blanc a 30 pour cent. Sur le
   #f6f7f9 du theme clair, ce blanc ne se voit pas. */
.attente-idee .anneau-calcul i:nth-child(3) {
  border-top-color: var(--bord-vif);
}

/* Les etapes reviennent a gauche : centrees, les puces ne s'alignent plus et
   la liste se lit comme un poeme. */
.attente-idee .etapes {
  max-width: 420px;
  margin: 26px auto 18px;
  text-align: left;
  font-size: 15px;
}

/* LE TEXTE APPARAIT, C'EST LA DEMANDE. Chaque ligne se revele a son tour, et
   celle qui travaille avance d'un cran vers la droite : on voit ou on en est
   sans lire. */
.attente-idee .etape {
  opacity: 0.42;
  transform: translateX(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

.attente-idee .etape.en-cours,
.attente-idee .etape.finie {
  opacity: 1;
}

.attente-idee .etape.en-cours {
  transform: translateX(4px);
}

.mention-attente {
  margin: 0;
  font-size: 13px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- les squelettes -- */

/* LA PLACE DU RESULTAT EST OCCUPEE AVANT QU'IL EXISTE. C'est le geste de
   Replit : l'ecran a deja sa forme finale, donc l'arrivee des vraies fiches ne
   fait pas sauter la page, et on sait combien il en vient. */
.squelettes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
}

.squelette {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--surface);
  padding: 22px 24px;
  opacity: 0.55;
}

.squelette i {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface-haut) 0%,
    var(--bord-vif) 50%,
    var(--surface-haut) 100%
  );
  background-size: 220% 100%;
  animation: squelette-passe 1.5s ease-in-out infinite;
  animation-delay: calc(var(--rang-fiche, 0) * 140ms);
}

.squelette .s-titre {
  height: 20px;
  width: 52%;
  margin-bottom: 16px;
}

.squelette .s-ligne {
  width: 100%;
  margin-bottom: 9px;
}

.squelette .s-ligne.court {
  width: 68%;
}

.squelette .s-tuiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.squelette .s-tuiles i {
  height: 54px;
  border-radius: 10px;
}

@keyframes squelette-passe {
  0% {
    background-position: 140% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .squelette i {
    animation: none;
  }
  .attente-idee .etape {
    transition: none;
  }
}

/* =================================================== Le Radar, mise a jour */

.bande-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 11px;
  margin-bottom: 22px;
}

.tuile-chiffre {
  border: 1px solid var(--bord);
  border-radius: 13px;
  background: var(--fond-2);
  padding: 14px 15px;
}

.tuile-chiffre i {
  font-style: normal;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-3);
  display: block;
}

.tuile-chiffre b {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 25px;
  margin-top: 5px;
  letter-spacing: -0.01em;
}

.tuile-chiffre small {
  font-size: 11.5px;
  color: var(--texte-3);
}

/* ------------------------------------------------------------- le logo -- */

.logo-saas {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-haut);
  border: 1px solid var(--bord);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  color: var(--texte-2);
}

.logo-saas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-saas.lettre {
  font-size: 15px;
}

/* ------------------------------------------------------------ la courbe -- */

.courbe {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.courbe .trait {
  fill: none;
  stroke: var(--accent-clair);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.courbe .aire {
  fill: var(--accent-voile);
  stroke: none;
}

.courbe .point {
  fill: var(--accent-clair);
}

.zone-courbe {
  margin: 2px 0;
}

.bloc-courbe {
  border: 1px solid var(--bord);
  border-radius: 13px;
  background: var(--fond-2);
  padding: 14px 16px 10px;
  margin: 18px 0;
}

.legende-courbe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11.5px;
  color: var(--texte-3);
  margin-bottom: 10px;
}

.legende-courbe .echelle {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
}

/* --------------------------------------------------------- les balances -- */

.jauges {
  display: grid;
  gap: 11px;
  margin: 18px 0;
}

.jauge-ligne {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 12px;
}

.jauge-ligne .lib {
  font-size: 13px;
  color: var(--texte-2);
}

.jauge-ligne .val {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.barre {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--bord-vif);
  overflow: hidden;
}

.barre i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.barre.haute i {
  background: var(--accent-clair);
}

.barre.moyenne i {
  background: var(--accent);
}

.barre.basse i {
  background: var(--accent-sombre);
}

/* --------------------------------------------------------- la carte -- */

.carte-saas {
  gap: 11px;
  padding: 15px 15px 13px;
}

.carte-saas .haut-carte {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carte-saas .identite {
  flex: 1;
  min-width: 0;
}

.carte-saas .nom-saas {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carte-saas .site-saas {
  font-size: 11.5px;
  color: var(--texte-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pastille-vente {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent-voile);
  border: 1px solid var(--accent-halo);
  color: var(--accent-clair);
}

.carte-saas .quoi-saas {
  -webkit-line-clamp: 2;
  min-height: 2.9em;
}

.chiffres-carte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gros-chiffre b {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 23px;
  letter-spacing: -0.01em;
}

.gros-chiffre span {
  font-size: 11px;
  color: var(--texte-3);
  margin-left: 5px;
}

.delta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--bord-vif);
}

.delta.haut {
  color: var(--accent-clair);
  background: var(--accent-voile);
  border-color: var(--accent-halo);
}

.delta.bas {
  color: var(--texte-3);
}

.carte-saas .pied-carte {
  align-items: center;
}

.carte-saas .mini {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-width: 150px;
}

.carte-saas .lib-mini {
  font-size: 10.5px;
  color: var(--texte-3);
}

.carte-saas .mini .barre {
  flex: 1;
}

/* ------------------------------------------------------------ la fiche -- */

.haut-feuille {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.sous-feuille {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--texte-3);
}

.quoi-feuille {
  margin: 14px 0 0;
  color: var(--texte-2);
  font-size: 13.8px;
  line-height: 1.6;
}

.sur-titre {
  margin: 18px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-3);
}

.pied-feuille {
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px solid var(--bord);
  font-size: 12px;
  color: var(--texte-3);
}

@media (max-width: 640px) {
  .jauge-ligne {
    grid-template-columns: 1fr auto;
  }
  .jauge-ligne .barre {
    grid-column: 1 / -1;
  }
}

/* Un modele hors formule se VOIT mais ne se choisit pas. Le cacher se lirait
   comme un produit incomplet ; le montrer verrouille dit ce qu il faut pour
   l avoir, et c est exactement ce qu on veut vendre. */
.ligne-modele.fermee {
  cursor: not-allowed;
  opacity: 0.55;
}

.ligne-modele.fermee:hover {
  background: none;
}

.ligne-modele.fermee .cout {
  color: var(--texte-3);
}

/* =============================================== la bande des six ecrans == */

/* Elle remplace les onglets de pages de l ancien atelier. Le produit montre
   desormais un PARCOURS et pas une page : l accueil qui vend, les deux etapes
   d onboarding, le mur de paiement, la creation de compte, puis l application.
   Les numeros disent l ordre du visiteur, pas un classement. */

/* SOUS LA BARRE DU PROJET, ET PAS CENTREE EN HAUT. Centree, elle chevauchait
   le selecteur de format a partir d'une certaine largeur de nom de projet, et
   comme les deux panneaux sont au meme niveau c'est l'ordre du HTML qui
   tranchait : la bande passait devant et avalait les clics du selecteur. Les
   boutons restaient visibles et ne repondaient plus. Calculer un centrage qui
   evite un panneau de largeur variable est un piege permanent ; ne pas se
   croiser du tout n'en est pas un. */
#ecrans {
  top: 66px;
  left: 272px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  max-width: calc(100vw - 300px);
  overflow-x: auto;
  scrollbar-width: none;
  transition: left 0.18s ease;
}

body.repliee #ecrans {
  left: 80px;
}

#ecrans::-webkit-scrollbar {
  display: none;
}

#ecrans button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 0;
  background: none;
  color: var(--texte-3);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

#ecrans button:hover {
  background: var(--surface-haut);
  color: var(--texte-2);
}

#ecrans button[aria-pressed="true"] {
  background: var(--surface-haut);
  color: var(--texte);
}

#ecrans .rang-ecran {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--bord-vif);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  flex: none;
}

#ecrans button[aria-pressed="true"] .rang-ecran {
  background: var(--accent);
  border-color: transparent;
  color: var(--action-texte);
  font-weight: 600;
}

@media (max-width: 860px) {
  #ecrans {
    left: 72px;
    max-width: calc(100vw - 92px);
  }
}

@media (max-width: 640px) {
  #ecrans {
    top: 58px;
    left: 10px;
    right: 10px;
    max-width: none;
  }
  /* Sur telephone on ne garde que le numero : six libelles ne tiennent pas
     dans 390 pixels, et la bande deviendrait un defilement a l aveugle. */
  #ecrans .nom-ecran {
    display: none;
  }
  #ecrans button {
    padding: 7px 9px;
  }
}

/* ============================================== le fil se replie ========== */

/* Sur un cadre de 1440 le fil couvre la moitie gauche de la maquette, titre
   compris. Le deplacer ailleurs le mettrait devant autre chose : pouvoir le
   fermer est la seule reponse qui ne deplace pas le probleme. */

.replier-fil {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--texte-3);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.18s ease;
}

.replier-fil:hover {
  background: var(--surface-haut);
  color: var(--texte);
}

body.fil-plie .replier-fil {
  transform: rotate(180deg);
}

body.fil-plie #fil .compte-rendu,
body.fil-plie #fil .zone-saisie {
  display: none;
}

body.fil-plie #fil {
  width: 42px;
  height: 42px;
  min-height: 0;
}

body.fil-plie .replier-fil {
  top: 7px;
  right: 7px;
}

/* ================================================ le mur du Radar ========= */

/* Il arrive APRES la grille et pas avant. On ne demande pas de payer pour voir
   un catalogue que la personne n a pas encore vu : les douze fiches montrent
   ce que vaut la base, le mur dit seulement ce qui manque. */

.mur-radar {
  margin-top: 26px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid var(--bord-vif);
  background: var(--accent-voile);
  text-align: center;
}

.mur-radar h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 21px;
  margin: 0 0 8px;
}

.mur-radar p {
  margin: 0 auto 18px;
  max-width: 52ch;
  color: var(--texte-2);
  font-size: 14px;
  line-height: 1.55;
}

.mur-radar .bouton-generer {
  margin-top: 0;
}

.vide-recents {
  padding: 10px 12px 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--texte-3);
}

body.repliee .vide-recents {
  display: none;
}

/* ================================================================== */
/* L'ESPACE PAYE, QUAND IL PREND LA FORME DU STUDIO                   */
/* ================================================================== */

/* Chantier du 15 septembre 2026 au soir. `body.espace` est /dossier : la meme
   feuille, la meme mise en page, mais du vrai contenu derriere. Tout ce qui
   suit ne concerne que lui, pour que la maquette de /studio puisse bouger sans
   toucher a ce que voit quelqu'un qui a paye. */

/* L'ECRAN DES VOLETS QUI SE LISENT. Il vit dans le panneau, et il garde son
   id parce que toutes ses regles de largeur sont ecrites dessus dans
   style.css. Le panneau apporte le defilement, le haut et le bas. */
body.espace #panneau > main#ecran {
  /* 68 en haut et pas 28 : les boutons du coin superieur droit flottent
     par-dessus le panneau, et un titre qui passe dessous serait illisible. */
  padding-top: 68px;
}

/* ------------------------------------------------ l etat vide du plan -- */

/* Le studio arrive vide, et un plan de travail vide sans un mot se lit comme
   une page qui a plante. Ce bloc ne bouge pas avec le plan : il est ancre a la
   fenetre, sinon il partirait hors de l ecran au premier deplacement, et
   quelqu un qui cherche quoi faire ne le retrouverait jamais. */
#plan-vide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: 0 24px;
}

#plan-vide[hidden] {
  display: none;
}

.vide-plan {
  text-align: center;
  max-width: 34ch;
}

.vide-plan .ic-vide {
  color: var(--texte-3);
  opacity: 0.5;
  margin-bottom: 14px;
}

.vide-plan .titre-vide {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--texte-2);
}

.vide-plan .texte-vide {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texte-3);
}

/* ------------------------------------------------------- la colonne -- */

.bouton-colonne {
  display: block;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font: 600 13px/1 "Instrument Sans", system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
}

.bouton-colonne:hover {
  border-color: var(--bord-fort);
}

body.repliee .bouton-colonne,
body.repliee .credits .detail-credits,
body.repliee .credits .ligne-credits {
  display: none;
}

/* ------------------------------------------------------------ le fil -- */

.amorce-fil p {
  margin: 0;
  padding: 2px 2px 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--texte-3);
}

#compte-rendu .erreur {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--alerte, #ff8080);
}

/* Le bouton d envoi pendant qu une generation tourne. Sans ca, rien ne dit
   que la demande est partie, et on reclique. */
body.studio-occupe #fil .envoyer {
  opacity: 0.5;
}

/* ------------------------------------------------------ Mes projets -- */

.carte-projet {
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: var(--fond-2);
  padding: 20px;
  margin-bottom: 22px;
}

.carte-projet .tete-projet {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.carte-projet h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.carte-projet .liste-fichiers {
  margin: 12px 0 16px;
}

.bloc-projets {
  margin-top: 26px;
}

.titre-section {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texte-3);
  margin: 0 0 12px;
}

.liste-idees-courte {
  display: grid;
  gap: 8px;
}

.ligne-idee {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--bord);
  background: transparent;
  color: var(--texte);
  cursor: pointer;
}

.ligne-idee:hover {
  border-color: var(--bord-fort);
  background: var(--fond-2);
}

.ligne-idee .nom-idee {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}

.ligne-idee .marche-idee {
  font-size: 12px;
  color: var(--texte-3);
}

/* ================================================================== */
/* LE TELEPHONE : LA COLONNE PASSE EN BARRE BASSE                     */
/* ================================================================== */

/* « Ca s adapte sur telephone, avec tous les trucs sur le cote qui se mettent
   en bas, comme les applications qui se mettent en format mobile. »

   Le studio range sa colonne dans un tiroir, derriere un bouton. Un tiroir
   n est pas une barre basse : il CACHE les volets au lieu de les montrer, et
   sur un telephone c est la difference entre une application et un site qu on
   a retreci. La barre porte donc la navigation, et le tiroir garde le reste de
   la colonne, la marque, le projet et la formule. */

#volets-bas {
  display: none;
}

@media (max-width: 640px) {
  #volets-bas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 14;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
  }

  .volet-bas {
    flex: 1;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 6px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texte-3);
    cursor: pointer;
    min-width: 0;
  }

  .volet-bas .mot {
    font: 500 10px/1.1 "Instrument Sans", system-ui, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .volet-bas.actif {
    color: var(--texte);
    background: var(--fond-3, rgba(255, 255, 255, 0.05));
  }

  /* LE PANNEAU REPART DU BORD GAUCHE, et c est un defaut qui existait avant ce
     chantier : `#panneau` etait cale a `left: 248px` sans aucune reprise sur
     telephone, alors que la colonne, elle, sort de l ecran. Tant que le
     panneau ne servait qu a la maquette on ne le voyait pas. Depuis qu il
     porte l espace paye, il coupait un tiers de chaque page. */
  #panneau {
    left: 0;
    bottom: 64px;
  }

  body.repliee #panneau {
    left: 0;
  }

  body.espace #panneau > main#ecran {
    padding-top: 60px;
  }

  /* Le fil remonte au-dessus de la barre basse. Les deux se chevauchaient
     sinon, et c est l ordre du HTML qui aurait tranche : le fil devant, la
     barre derriere, avec des boutons parfaitement visibles qui ne repondent
     pas. */
  body.espace #fil {
    bottom: 76px;
  }

  body.espace #volets-bas ~ #outils {
    display: none;
  }
}

/* Avant que /api/dossier ait repondu, il n y a ni volet ni formule a montrer :
   la colonne serait une bande vide a gauche de l ecran de connexion. */
body.sans-colonne #colonne,
body.sans-colonne #volets-bas,
body.sans-colonne #ouvrir-tiroir {
  display: none;
}

body.sans-colonne #panneau {
  left: 0;
}

/* L ATTRIBUT `hidden` NE GAGNE PAS CONTRE UN `display` DE CLASSE, et ces deux
   elements en portent un. Ecrit sans ces deux regles, `#ecrans` et la puce de
   contexte restaient visibles, vides, dans le coin d un studio qui vient de
   s ouvrir : une bande grise de cinq pixels et une pastille « Tout le projet »
   qui ne designe aucun projet. */
#ecrans[hidden],
.puce-contexte[hidden] {
  display: none;
}

/* Un bouton desactive doit SE VOIR desactive. Telecharger garde son fond
   blanc tant qu il n y a rien a emporter : un bouton parfaitement visible qui
   ne repond pas est pire qu un bouton absent. */
#actions-haut button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ================================================================== */
/* VOIR UN PEU, PUIS LE MUR AU CLIC                                    */
/* ================================================================== */

/* Ilyasse, le 15 septembre 2026 : « c est fait de maniere intelligente,
   c est-a-dire que l on peut voir un petit peu, et des que l on clique les
   informations sont masquees et on doit s abonner. C est tres intelligent,
   mais tu as tout enleve. »

   Donc : l apercu est entier et lisible, ce qui suit porte la FORME du contenu
   et pas son texte, et le clic trouble l ecran pour amener le mur. */

.tuile-verrouillee {
  position: relative;
  border-style: dashed;
  opacity: 0.55;
}

.tuile-verrouillee:hover {
  opacity: 0.8;
}

.faux-logo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-haut, rgba(255, 255, 255, 0.06));
}

.fausse-ligne {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--surface-haut, rgba(255, 255, 255, 0.06));
}

.fausse-ligne.large { width: 72%; margin-bottom: 6px; }
.fausse-ligne.courte { width: 44%; height: 7px; }
.fausse-ligne.pleine { width: 100%; }
.fausse-ligne.moyenne { width: 62%; }

.cadenas-tuile {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
}

/* Le trouble porte sur la grille, pas sur la page : le mur doit rester net,
   c est le seul endroit ou il y a quelque chose a lire. */
.grille-masquee {
  filter: blur(7px);
  opacity: 0.45;
  transition: filter 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
}

.mur-formule {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.mur-formule.en-avant {
  border-color: var(--bord-fort, rgba(255, 255, 255, 0.28));
  box-shadow: 0 0 0 1px var(--bord-fort, rgba(255, 255, 255, 0.18));
}

/* LA COLONNE FERMEE SORT AUSSI DE L ORDRE DE TABULATION.

   Sur telephone elle est poussee hors de l ecran par une translation, et une
   translation ne retire rien du document : ses sept boutons restaient
   atteignables au clavier, invisibles, AVANT les sept memes boutons de la
   barre basse. Quatorze arrets pour sept destinations, dont sept qu on ne voit
   pas. `visibility` les retire vraiment, et se remet des que le tiroir s ouvre.

   La transition la retarde jusqu au bout du glissement, sinon la colonne
   disparaitrait d un coup au lieu de sortir. */
@media (max-width: 640px) {
  body.espace #colonne {
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }

  body.espace.tiroir #colonne {
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s;
  }
}

/* ================================================================== */
/* LE TELEPHONE : TOUT EN BAS, COMME UNE APPLICATION                  */
/* ================================================================== */

/* Demande d Ilyasse, dite TROIS FOIS les 15 et 16 septembre 2026 : « sur
   l interface mobile les elements doivent etre en bas comme une application
   mobile et tu continues de le mettre en haut ».

   Les deux premieres fois, seule la COLONNE etait descendue en barre basse. La
   barre de projet, la bande des six ecrans et les deux boutons du coin restaient
   en haut, ou aucun pouce ne les atteint. Une application mobile ne met rien en
   haut de l ecran a part son titre.

   L ORDRE, DU BAS VERS LE HAUT, et il suit la frequence d usage :
     1. les volets, la navigation, sous le pouce
     2. le fil et sa saisie, le geste principal
     3. la bande des six ecrans, qu on parcourt
     4. le nom du projet et les deux actions, qu on touche rarement
   Rien au-dessus. */

@media (max-width: 640px) {
  /* 1. LA NAVIGATION, TOUT EN BAS. Deja posee plus haut, on ne fait que
        reserver sa hauteur pour ce qui s empile au-dessus. */
  :root {
    --h-volets: 62px;
    --h-fil: 32dvh;
    --h-ecrans: 46px;
    --h-projet: 46px;
  }

  /* 2. LE FIL, juste au-dessus des volets. */
  body.espace #fil {
    bottom: calc(var(--h-volets) + env(safe-area-inset-bottom) + 8px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: var(--h-fil);
  }

  /* 3. LA BANDE DES SIX ECRANS, au-dessus du fil. Elle defile
        horizontalement : six pastilles ne tiennent pas dans 390 pixels, et les
        replier sur deux lignes ferait bouger tout ce qui est en dessous des
        qu un nom s allonge. */
  body.espace #ecrans {
    top: auto;
    bottom: calc(var(--h-volets) + var(--h-fil) + env(safe-area-inset-bottom) + 18px);
    left: 8px;
    right: 8px;
    max-width: none;
    transition: none;
  }

  /* 4. LE NOM DU PROJET ET LES DEUX ACTIONS, sur la meme rangee, au-dessus.
        `#actions-haut` porte son nom depuis la maquette, ou il etait en haut a
        droite ; ici il est en bas, et le nom ment. Il n est pas renomme : c est
        le meme element dans les deux pages, et un id different par taille
        d ecran demanderait deux balisages. */
  body.espace #barre-projet {
    top: auto;
    left: 8px;
    right: auto;
    bottom: calc(var(--h-volets) + var(--h-fil) + var(--h-ecrans) + env(safe-area-inset-bottom) + 26px);
  }

  body.espace #actions-haut {
    top: auto;
    right: 8px;
    bottom: calc(var(--h-volets) + var(--h-fil) + var(--h-ecrans) + env(safe-area-inset-bottom) + 26px);
  }

  /* LE BOUTON DU TIROIR DESCEND AUSSI. Il etait le dernier element en haut de
     l ecran. Il rejoint le coin bas gauche, a la hauteur de la barre de projet :
     c est le geste le moins frequent des quatre. */
  body.espace #ouvrir-tiroir {
    top: auto;
    bottom: calc(var(--h-volets) + env(safe-area-inset-bottom) + 8px);
    right: 8px;
    left: auto;
    z-index: 16;
  }

  /* LES OUTILS DISPARAISSENT SUR TELEPHONE, et ce n est pas une coupe a la
     legere. Curseur et Main ne veulent rien dire au doigt, qui fait deja les
     deux ; Discuter et Generer posent le curseur dans une saisie qui est a
     trois centimetres. Quatre boutons pour rien, sur l ecran ou la place
     manque le plus. */
  body.espace #outils {
    display: none !important;
  }

  /* Les prochaines etapes ne tiennent pas a cote du reste : elles se lisent
     dans le fil, qui les propose deja en cliquant. */
  body.espace #suites {
    display: none !important;
  }

  /* Le plan de travail garde ce qui reste, c est-a-dire le haut de l ecran. */
  body.espace #zoom {
    display: none;
  }
}

/* TROIS CHEVAUCHEMENTS MESURES SUR LA CAPTURE, ET CORRIGES ICI.

   Le piege est ecrit dans le handoff d Ilyasse : « deux panneaux qui se
   croisent, c est l ordre du HTML qui tranche », et « un bouton visible qui ne
   repond pas est pire qu un bouton absent ». Les trois cas ci-dessous sont
   exactement ca. */

@media (max-width: 640px) {
  /* 1. LE MESSAGE DE L ETAT VIDE passait DERRIERE la barre de projet : il est
        centre sur toute la scene, or la moitie basse est desormais occupee. Il
        remonte dans la moitie haute, qui est ce qui reste du plan de travail. */
  body.espace #plan-vide {
    bottom: auto;
    height: 60dvh;
  }

  /* 2. LE BOUTON DU TIROIR tombait sur le bouton d envoi du fil, dans le meme
        coin bas droit. Il passe a GAUCHE, sur la ligne de la barre de projet,
        et la barre se decale pour lui laisser la place. */
  body.espace #ouvrir-tiroir {
    left: 8px;
    right: auto;
    bottom: calc(var(--h-volets) + var(--h-fil) + var(--h-ecrans) + env(safe-area-inset-bottom) + 26px);
  }

  body.espace #barre-projet {
    left: 56px;
  }

  /* 3. LES SIX ECRANS N AVAIENT QUE LEUR NUMERO. Six pastilles numerotees ne
        disent pas ce qu on genere : la bande defile horizontalement, elle a
        donc la place de porter les noms. */
  body.espace #ecrans {
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.espace #ecrans::-webkit-scrollbar {
    display: none;
  }

  body.espace #ecrans .nom-ecran {
    display: inline;
  }

  body.espace #ecrans button {
    flex: none;
  }
}

/* LE CHAMP LIBRE DE « MON IDEE ».

   Demande d Ilyasse du 16 septembre 2026 : 800 caracteres a la fin du
   questionnaire, pour ce que la personne veut ajouter avec ses mots. */

.champ-idee-libre {
  margin: 26px 0 4px;
  padding: 18px 20px;
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: var(--fond-2);
}

.champ-idee-libre .intitule {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.champ-idee-libre .mention {
  margin: 0 0 12px;
}

.champ-idee-libre .champ {
  width: 100%;
  resize: vertical;
  min-height: 92px;
}

/* LE COMPTEUR DIT CE QUI RESTE. Le `maxlength` arrete la frappe SANS RIEN
   DIRE : on tape, plus rien ne s ecrit, et on croit que le champ a plante. */
.compteur-libre {
  display: block;
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

.compteur-libre.bientot-plein {
  color: var(--alerte, #ff8080);
}

/* ================================================================== */
/* DEUX CHEVAUCHEMENTS MESURES, ET CORRIGES SUR LA MESURE             */
/* ================================================================== */

/* Le handoff d Ilyasse les nomme : « deux panneaux qui se croisent, c est
   l ordre du HTML qui tranche », et « un bouton visible qui ne repond pas est
   pire qu un bouton absent ». Les deux cas ci-dessous ont ete releves par une
   passe de validation qui compare les rectangles, pas a l oeil : ils ne se
   voient pas a la lecture du code, et a l ecran on croit a un choix de mise en
   page tant qu on n a pas essaye de cliquer.

   1. SUR ORDINATEUR, la barre d outils croisait le fil sur 164 x 51 pixels.
      `#outils` se centrait sur la fenetre entiere, `left: 50%`, sans savoir que
      le tiers gauche est occupe par le fil. Elle se centre maintenant sur
      L ESPACE QUI RESTE a droite de lui.

      La borne suit le repli de la colonne : repliee, la colonne fait 56 au lieu
      de 248 et le fil recule d autant. Ecrite en dur, la barre se recentrerait
      au mauvais endroit des qu on replie. */

body.espace {
  --largeur-colonne: 248px;
  --largeur-fil: 372px;
  --ecart-outils: 40px;
}

body.espace.repliee {
  --largeur-colonne: 56px;
}

@media (min-width: 641px) {
  body.espace #outils {
    left: calc(
      var(--largeur-colonne) + var(--largeur-fil) + var(--ecart-outils) +
        (100% - var(--largeur-colonne) - var(--largeur-fil) - var(--ecart-outils)) / 2
    );
    transform: translateX(-50%);
  }
}

/* Sous 1100px le fil se resserre, et sous 900 il passe derriere une maquette
   large : la borne suit la meme regle que `reserves()` dans plan-travail.js,
   qui est le seul endroit ou cette largeur est decidee. */
@media (max-width: 1100px) and (min-width: 641px) {
  body.espace {
    --largeur-fil: min(372px, calc(100vw - 96px));
  }
}

/* 2. SUR TELEPHONE, la barre de projet croisait les deux actions sur 33 x 45
      pixels : elle s etalait de 56 a 358, les actions commencaient a 325. Elle
      s arrete maintenant avant elles, et son contenu defile plutot que de
      deborder : le nom d un projet peut etre long, et une barre qui grandit
      avec son texte finit toujours par retomber sur son voisin. */
@media (max-width: 640px) {
  body.espace #barre-projet {
    right: 104px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.espace #barre-projet::-webkit-scrollbar {
    display: none;
  }

  body.espace #barre-projet .nom-projet {
    max-width: 38vw;
  }
}

/* `#suites` NE RESPECTAIT PAS SON PROPRE `hidden`.

   Releve a l oeil sur une capture, apres qu une passe de mesure l ait manque :
   le cadre « Prochaines etapes » s affichait vide, avec son titre et son bouton
   Masquer, et rien dessous. Le code le posait bien en `hidden` ; mais la regle
   `#suites` porte un `display`, et l attribut `hidden` du navigateur vaut
   `display: none` a une specificite plus faible qu un selecteur d id. Il
   perdait donc a chaque fois.

   C est le meme piege que pour `#ecrans` et la puce de contexte, deja corrige
   plus haut : tout element qui porte un `display` dans une regle d id a besoin
   de sa propre regle `[hidden]`. Un panneau qui annonce une liste et n en
   montre aucune se lit comme un chargement qui n a jamais fini. */
#suites[hidden],
#barre-projet[hidden],
#outils[hidden] {
  display: none !important;
}

/* LE CHAMP D UNE REPONSE ECRITE A LA MAIN, dans « Mon idee ».

   Demande d Ilyasse du 16 septembre 2026 : chaque question doit accepter une
   reponse ecrite. Le champ s ouvre SOUS l option cliquee, parce qu il est la
   suite de ce clic ; pose en bas de l ecran, il se lirait comme une deuxieme
   question. */
.champ-libre-question {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 0 2px;
}

.champ-libre-question .champ {
  flex: 1;
  min-width: 0;
}

.champ-libre-question .bouton {
  flex: none;
}

.option-libre {
  border-style: dashed;
}

@media (max-width: 640px) {
  .champ-libre-question {
    flex-direction: column;
    align-items: stretch;
  }
}

/* L ANNEAU QUI TOURNE PENDANT UNE GENERATION.

   Une demande a Opus prend de trente secondes a plus d une minute. Sans rien a
   l ecran, c est indistinguable d une page morte, et on recharge, ce qui perd
   la generation qu on vient de payer. */
.anneau-studio {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  opacity: 1;
}

.anneau-studio i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--texte-2);
  animation: anneau-studio-tourne 1.4s linear infinite;
}

.anneau-studio i:nth-child(2) {
  inset: 9px;
  border-top-color: var(--texte-3);
  animation-duration: 2.1s;
  animation-direction: reverse;
}

@keyframes anneau-studio-tourne {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .anneau-studio i { animation: none; }
}

/* LE BOUTON D ENVOI APPELLE UNE FOIS quand une demande vient d etre preparee
   par un clic sur un ecran gris. Sans ca, le texte apparaissait en bas a
   gauche pendant qu on regardait en haut, et on concluait que le clic n avait
   rien fait. */
.envoyer.appelle {
  animation: envoyer-appelle 1.1s ease 2;
}

@keyframes envoyer-appelle {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .envoyer.appelle { animation: none; }
}