> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversations et projets

> Comprenez quand poursuivre un travail dans une Conversation et quand utiliser un Projet pour un travail de construction ou de design substantiel.

export const ConversationsProjectsCover = ({handoff = false}) => <div className="chat-mkt" role="img" aria-label={handoff ? "A Replit Conversation flowing into a structured Project window" : "A frosted Replit Conversation window linked to a structured Project window"} style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  gap: handoff ? "clamp(5px, 1vw, 13px)" : "clamp(3px, .8vw, 10px)",
  padding: "clamp(10px, 1.6vw, 18px)"
}}>
        <div style={{
  position: "relative",
  flex: handoff ? "0 1 38%" : "0 1 45%",
  width: handoff ? "38%" : "45%",
  minWidth: 0,
  maxWidth: "none"
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  left: "10%",
  top: "9%",
  transform: "rotate(3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gap: "clamp(7px, 1.5vw, 14px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "grid",
  width: "clamp(20px, 4vw, 36px)",
  minWidth: "clamp(20px, 4vw, 36px)",
  alignContent: "start",
  gap: 8,
  paddingRight: "clamp(6px, 1vw, 11px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  background: "rgba(255,255,255,.9)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  border: "1px solid rgba(255,255,255,.66)",
  background: "rgba(255,255,255,.12)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 999,
  border: "1px solid rgba(255,255,255,.48)"
}} />
            </div>
            <div style={{
  display: "grid",
  minWidth: 0,
  flex: "1 1 auto",
  alignContent: "space-between",
  gap: 8
}}>
              <div style={{
  display: "grid",
  gap: 7
}}>
                <span style={{
  width: "66%",
  height: 17,
  border: "1px solid rgba(255,255,255,.44)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.17)"
}} />
                <span style={{
  justifySelf: "end",
  width: "56%",
  height: 17,
  borderRadius: "10px 10px 3px 10px",
  background: "rgba(255,255,255,.76)"
}} />
                <span style={{
  width: "76%",
  height: 21,
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.14)"
}} />
              </div>
              <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 6,
  padding: "7px 8px",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 10,
  background: "rgba(255,255,255,.14)"
}}>
                <span style={{
  width: "65%",
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.7)"
}} />
                <span style={{
  width: 14,
  height: 14,
  borderRadius: 5,
  background: "rgba(255,255,255,.88)"
}} />
              </div>
            </div>
          </div>
        </div>

        <div aria-hidden="true" style={{
  position: "relative",
  width: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  minWidth: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  height: "clamp(38px, 6vw, 56px)"
}}>
          <span style={{
  position: "absolute",
  left: 0,
  right: 0,
  top: "50%",
  width: "100%",
  height: 2,
  borderRadius: 999,
  background: "linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.86), rgba(255,255,255,.18))",
  boxShadow: "0 0 12px rgba(255,255,255,.36)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "7%" : "13%",
  top: "calc(50% - 5px)",
  width: handoff ? 7 : 10,
  height: handoff ? 7 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: "rgba(255,255,255,.18)",
  boxShadow: "0 0 10px rgba(255,255,255,.24)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "39%" : "46%",
  top: handoff ? "calc(50% - 6px)" : "calc(50% - 8px)",
  width: handoff ? 12 : 16,
  height: handoff ? 12 : 16,
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 999,
  background: "rgba(255,255,255,.28)",
  boxShadow: "0 0 14px rgba(255,255,255,.34)"
}} />
          <span style={{
  position: "absolute",
  right: handoff ? "3%" : "8%",
  top: handoff ? "calc(50% - 9px)" : "calc(50% - 5px)",
  width: handoff ? 18 : 10,
  height: handoff ? 18 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: handoff ? "rgba(255,255,255,.42)" : "rgba(255,255,255,.18)",
  boxShadow: handoff ? "0 0 18px rgba(255,255,255,.46)" : "0 0 10px rgba(255,255,255,.24)"
}} />
        </div>

        <div style={{
  position: "relative",
  flex: handoff ? "0 1 52%" : "0 1 45%",
  width: handoff ? "52%" : "45%",
  minWidth: 0,
  maxWidth: "none",
  transform: handoff ? "translateX(1%)" : undefined
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  right: "10%",
  top: "9%",
  transform: "rotate(-3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "grid",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gridTemplateRows: "auto 1fr",
  gap: "clamp(9px, 1.8vw, 15px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.92)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.52)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.32)"
}} />
              <span style={{
  width: "34%",
  height: 6,
  marginLeft: 6,
  borderRadius: 999,
  background: "rgba(255,255,255,.62)"
}} />
            </div>
            <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(18px, .45fr) minmax(0, 1fr)",
  gap: "clamp(7px, 1.5vw, 14px)",
  minWidth: 0
}}>
              <div style={{
  display: "grid",
  alignContent: "start",
  gap: 7,
  paddingRight: "clamp(5px, 1vw, 10px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
                <span style={{
  width: "80%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.8)"
}} />
                <span style={{
  width: "64%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.42)"
}} />
                <span style={{
  width: "74%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.26)"
}} />
              </div>
              <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
  gridTemplateRows: "repeat(2, minmax(0, 1fr))",
  gap: 7,
  minWidth: 0
}}>
                <span style={{
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 9,
  background: "rgba(255,255,255,.2)"
}} />
                <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.1)"
}} />
                <span style={{
  gridColumn: "span 2",
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

export const chatIcon = (name, size = 19) => {
  const paths = {
    MessageCircle: <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />,
    ChartNoAxesCombined: <>
        <path d="M12 16v5" />
        <path d="M16 14v7" />
        <path d="M20 10v11" />
        <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.708 0L2 15" />
        <path d="M4 18v3" />
        <path d="M8 14v7" />
      </>,
    Workflow: <>
        <rect width="8" height="8" x="3" y="3" rx="2" />
        <path d="M7 11v4a2 2 0 0 0 2 2h4" />
        <rect width="8" height="8" x="13" y="13" rx="2" />
      </>,
    Lightbulb: <>
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
        <path d="M9 18h6" />
        <path d="M10 22h4" />
      </>,
    Code2: <>
        <path d="m18 16 4-4-4-4" />
        <path d="m6 8-4 4 4 4" />
        <path d="m14.5 4-5 16" />
      </>,
    Presentation: <>
        <path d="M2 3h20" />
        <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
        <path d="m7 21 5-5 5 5" />
      </>,
    PanelsTopLeft: <>
        <rect width="18" height="18" x="3" y="3" rx="2" />
        <path d="M3 9h18" />
        <path d="M9 21V9" />
      </>,
    Keyboard: <>
        <rect width="20" height="14" x="2" y="5" rx="2" />
        <path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 17h8" />
      </>,
    Layers3: <>
        <path d="m12 2 9 5-9 5-9-5 9-5Z" />
        <path d="m3 12 9 5 9-5M3 17l9 5 9-5" />
      </>,
    CalendarClock: <>
        <path d="M16 2v4M8 2v4M3 10h18" />
        <rect width="18" height="19" x="3" y="4" rx="2" />
        <path d="M12 14v3l2 1" />
      </>,
    ConversationProject: <>
        <path d="M3 4h8v6H6l-3 2V4Z" />
        <rect width="9" height="9" x="12" y="11" rx="1.5" />
        <path d="M12 14h9M15 11v9" />
      </>,
    CursorDesign: <>
        <path d="m5 3 13 7-6 2-2 6L5 3Z" />
        <path d="M15 16h6M18 13v6" />
      </>,
    AppWindow: <>
        <rect width="20" height="18" x="2" y="3" rx="2" />
        <path d="M2 8h20M6 5.5h.01M9 5.5h.01" />
      </>,
    CloudUpload: <>
        <path d="M12 13v8M8 17l4-4 4 4" />
        <path d="M20 16.5A5 5 0 0 0 18 7h-1.3A7 7 0 0 0 3.3 9.4 4.5 4.5 0 0 0 5 18h2" />
      </>,
    Image: <>
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
        <circle cx="9" cy="9" r="2" />
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
      </>,
    FileUp: <>
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
        <path d="M12 12v6" />
        <path d="m15 15-3-3-3 3" />
      </>,
    Search: <>
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </>,
    Sparkles: <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />,
    Briefcase: <>
        <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
        <rect width="20" height="14" x="2" y="6" rx="2" />
      </>,
    WandSparkles: <>
        <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
        <path d="m14 7 3 3" />
        <path d="M5 6v4" />
        <path d="M19 14v4" />
        <path d="M10 2v2" />
        <path d="M7 8H3" />
        <path d="M21 16h-4" />
        <path d="M11 3H9" />
      </>
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] ?? paths.Sparkles}
    </svg>;
};

<ConversationsProjectsCover handoff />

Vous avez étudié le quartier, connecté vos outils et construit un plan de
lancement. Il est maintenant temps de faire connaître votre café. Pour cela,
vous allez créer un site d'ouverture.

Avant de commencer, il est utile de comprendre les deux endroits où ce travail
vit dans Replit : les conversations et les projets.

## Du plan au projet

Le lancement du café a commencé dans une Conversation. C'est là que vous avez
façonné l'idée, étudié le marché, connecté des outils et créé une Routine.

Vous êtes maintenant prêt à construire un site d'ouverture. Un Projet est
l'endroit pour ce travail de design et de construction substantiel. Replit
peut utiliser le contexte déjà présent dans la Conversation, vous n'avez donc
pas besoin de repartir de zéro.

## Qu'est-ce qu'une Conversation ?

Une **Conversation** est un seul fil où vous posez des questions, explorez
des informations, exécutez des Routines et poursuivez le travail par des
suivis. Dans cette histoire, elle contient la recherche sur le café et le
plan de lancement.

## Qu'est-ce qu'un Projet ?

Un **Projet** est un espace durable et structuré pour un travail de
construction et de design substantiel. Dans cette histoire, c'est là que
vous allez créer et affiner le site d'ouverture.

## Comment ils fonctionnent ensemble

| Domaine    | Conversation                                                                          | Projet                                                                             |
| ---------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Idéal pour | Explorer l'idée, étudier les concurrents et exécuter la veille de marché hebdomadaire | Concevoir et construire le site d'ouverture                                        |
| Structure  | Un seul fil avec vos recherches, décisions et suivis                                  | Un espace structuré pour le site, son design et d'autres artefacts de construction |
| Routines   | Créer et gérer une recherche récurrente                                               | Utiliser les résultats qui reviennent dans la Conversation                         |
| Contexte   | Contient le plan de lancement qui vous a amené ici                                    | Démarre avec l'orientation que vous avez établie dans la Conversation              |

Commencez dans une Conversation lorsque vous voulez poser des questions ou
explorer. Passez à un Projet lorsque vous êtes prêt à construire. La
transmission conserve l'orientation que vous avez déjà créée.

## Voir aussi

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/fr/chat/conversations">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-icon">
        {chatIcon("MessageCircle", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Demander et explorer</div>
    <div className="chat-card-title">Conversations</div>

    <p>
      Découvrez comment les Conversations prennent en charge les questions,
      l'exploration, les Routines et les résultats.
    </p>

    <div className="chat-card-link">Explorer →</div>
  </a>

  <a className="chat-example has-visual" href="/fr/features/projects-and-artifacts/projects">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-icon">
        {chatIcon("PanelsTopLeft", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Construire et organiser</div>
    <div className="chat-card-title">Projets</div>

    <p>
      Découvrez comment les Projets organisent un travail de construction et
      de design substantiel avec plusieurs artefacts.
    </p>

    <div className="chat-card-link">Explorer →</div>
  </a>
</section>

## Suivant

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/fr/home/design-an-opening-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">Site d'ouverture</div>
    <div className="chat-card-title">Concevoir le site d'ouverture</div>
    <p>Utilisez la conversation et le plan de lancement pour créer un site pour votre café.</p>
    <div className="chat-card-link">Continuer →</div>
  </a>
</section>