> ## 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.

# Projets

> Comprenez comment un Projet réunit le code, les données, et les artefacts pour un travail de construction et de design conséquent.

export const ArtifactGrid = () => {
  if (typeof document !== "undefined" && !document.getElementById("artifact-grid-styles")) {
    const style = document.createElement("style");
    style.id = "artifact-grid-styles";
    style.textContent = `
      .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #F6F6F4);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #F1F1EE);
        --ag-icon-border: var(--replit-docs-border, #DEDAD5);
        --ag-text: var(--replit-docs-text-muted, #5C5C5C);
        --ag-icon-color: var(--replit-docs-text-muted, #5C5C5C);
      }
      .dark .artifact-grid-wrap,
      html.dark .artifact-grid-wrap,
      [data-theme="dark"] .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #1E1E1F);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #222223);
        --ag-icon-border: var(--replit-docs-border, #39393D);
        --ag-text: var(--replit-docs-text-muted, #B8B8BE);
        --ag-icon-color: var(--replit-docs-text-muted, #B8B8BE);
      }
      @keyframes ag-fade-in {
        from { transform: translateY(8px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      @media (hover: hover) {
        .artifact-grid-wrap .ag-icon-btn:hover {
          background: var(--ag-icon-border) !important;
        }
      }
    `;
    document.head.appendChild(style);
  }
  const types = [{
    name: "Web",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm-9.217 11.5a9.25 9.25 0 0 0 7.468 8.333 15.25 15.25 0 0 1-2.982-8.333H2.783Zm13.948 0a15.249 15.249 0 0 1-2.983 8.333 9.25 9.25 0 0 0 7.469-8.333H16.73Zm-7.958 0A13.748 13.748 0 0 0 12 20.876a13.748 13.748 0 0 0 3.227-8.126H8.773Zm1.478-9.834a9.251 9.251 0 0 0-7.468 8.334H7.27a15.251 15.251 0 0 1 2.982-8.334ZM12 3.123a13.747 13.747 0 0 0-3.227 8.127h6.454A13.748 13.748 0 0 0 12 3.123Zm1.748-.207a15.25 15.25 0 0 1 2.983 8.334h4.486a9.251 9.251 0 0 0-7.469-8.334Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Mobile",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M7 2.75c-.69 0-1.25.56-1.25 1.25v16c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V4c0-.69-.56-1.25-1.25-1.25H7ZM4.25 4A2.75 2.75 0 0 1 7 1.25h10A2.75 2.75 0 0 1 19.75 4v16A2.75 2.75 0 0 1 17 22.75H7A2.75 2.75 0 0 1 4.25 20V4Zm7 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Slides",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M20 2.25A2.75 2.75 0 0 1 22.75 5v14A2.75 2.75 0 0 1 20 21.75h-8A2.75 2.75 0 0 1 9.25 19V5A2.75 2.75 0 0 1 12 2.25h8Zm-8 1.5c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V5c0-.69-.56-1.25-1.25-1.25h-8Z" clipRule="evenodd" />
          <path d="M6 4.25a.75.75 0 0 1 .75.75v14a.75.75 0 0 1-1.5 0V5A.75.75 0 0 1 6 4.25ZM2 6.25a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7A.75.75 0 0 1 2 6.25Z" />
        </svg>
  }, {
    name: "Design",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M6.5 11.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM17.5 9.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM8.5 6.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM13.5 5.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" />
          <path fillRule="evenodd" d="M12 1.25c2.827 0 5.553 1.01 7.573 2.828C21.596 5.9 22.75 8.388 22.75 11A5.749 5.749 0 0 1 17 16.75h-2.25a1 1 0 0 0-.8 1.6l.3.4.1.143a2.5 2.5 0 0 1-2.1 3.857H12a10.75 10.75 0 1 1 0-21.5Zm0 1.5a9.25 9.25 0 1 0 0 18.5h.25a1 1 0 0 0 .8-1.6l-.3-.4a2.5 2.5 0 0 1 2-4H17l.21-.005A4.25 4.25 0 0 0 21.25 11c0-2.161-.953-4.252-2.68-5.807C16.84 3.636 14.476 2.75 12 2.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Animation",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M10.024 7.25c.31.004.613.091.878.251l4.996 2.996a1.752 1.752 0 0 1 .625 2.367 1.75 1.75 0 0 1-.625.639v-.001l-4.995 2.995.001.001a1.75 1.75 0 0 1-2.654-1.505v-5.99a1.75 1.75 0 0 1 1.774-1.753Zm-.02 1.5a.252.252 0 0 0-.22.124.253.253 0 0 0-.034.127v5.998a.252.252 0 0 0 .127.219.253.253 0 0 0 .252-.004l.002-.001 4.997-2.997.002-.001a.252.252 0 0 0 .122-.215.25.25 0 0 0-.122-.215h-.002L10.13 8.786h-.002a.25.25 0 0 0-.125-.037Z" clipRule="evenodd" />
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm0 1.5a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Data Viz",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M5 14.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75ZM12 8.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75ZM19 2.25a.75.75 0 0 1 .75.75v18a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75Z" />
        </svg>
  }, {
    name: "3D Game",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M11.25 9.675A3.751 3.751 0 0 1 12 2.25a3.75 3.75 0 0 1 .75 7.425v4.575H19A2.75 2.75 0 0 1 21.75 17v2A2.75 2.75 0 0 1 19 21.75H5A2.75 2.75 0 0 1 2.25 19v-2A2.75 2.75 0 0 1 5 14.25h.25V13a.75.75 0 0 1 1.5 0v1.25h4.5V9.675ZM9.75 6a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 0 0-4.5 0ZM4.116 16.116A1.25 1.25 0 0 1 5 15.75h14A1.25 1.25 0 0 1 20.25 17v2A1.25 1.25 0 0 1 19 20.25H5a1.25 1.25 0 0 1-1.244-1.126L3.75 19v-2c0-.331.132-.65.366-.884Z" clipRule="evenodd" />
        </svg>
  }];
  const rows = [types.slice(0, 4), types.slice(4, 7)];
  const iconBtnStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "48px",
    height: "48px",
    border: "1px solid var(--ag-icon-border)",
    borderRadius: "12px",
    background: "var(--ag-icon-bg)",
    cursor: "default",
    color: "var(--ag-icon-color)",
    padding: 0,
    transition: "background 120ms ease-out",
    flexShrink: 0
  };
  return <div className="artifact-grid-wrap" style={{
    fontFamily: "'IBM Plex Sans', sans-serif",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "12px",
    padding: "32px",
    background: "var(--ag-bg)",
    borderRadius: "16px",
    width: "100%",
    maxWidth: "460px",
    margin: "32px auto",
    opacity: 0,
    animation: "ag-fade-in 300ms ease-out forwards"
  }}>
      {rows.map((row, ri) => <div key={ri} style={{
    display: "flex",
    gap: "12px",
    justifyContent: "center"
  }}>
          {row.map(type => <div key={type.name} style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "6px"
  }}>
              <div className="ag-icon-btn" style={iconBtnStyle}>
                {type.icon}
              </div>
              <span style={{
    fontSize: "11px",
    color: "var(--ag-text)",
    textAlign: "center",
    lineHeight: "1.2"
  }}>
                {type.name}
              </span>
            </div>)}
        </div>)}
    </div>;
};

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

Un projet est le conteneur pour tout ce que vous construisez sur Replit. Il contient votre code, vos données et tous les artefacts que vous créez — applications web, applications mobiles, présentations, tableaux de bord de données et vidéos. Lorsque vous indiquez à Agent ce que vous voulez, il crée un projet et construit les artefacts à l'intérieur.

Pensez à un projet comme à un espace de travail sur votre bureau. Tout se trouve au même endroit et peut partager les mêmes informations, mais chaque élément a un rôle différent.

Par exemple, si vous demandez à Agent de créer une application de suivi de fitness, il crée un projet avec un artefact d'application mobile, ainsi que le backend, la base de données et le stockage nécessaires à son fonctionnement.

<ArtifactGrid />

Concepts clés :

* **Projet** : le conteneur qui contient tout — votre code, vos données et tous vos artefacts
* **Artefact** : un résultat publiable au sein d'un projet (une application web, une présentation, une vidéo, etc.)
* **Ressources** : chaque artefact bénéficie d'un accès automatique à un backend, une base de données et un stockage de fichiers — sans aucune configuration

<Note>
  La publication met en ligne l'ensemble de votre projet en une seule fois.
  Tous les artefacts sont publiés ensemble, afin qu'ils restent toujours
  synchronisés.
</Note>

## Ce que vous pouvez créer

| Type                                                                       | Ce que c'est                                                                     | Exemple                                                                               |
| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| **[Application web](/fr/features/artifact-types/web-apps)**                | Un site ou une application web que les visiteurs consultent dans leur navigateur | Une boutique en ligne, un outil de réservation, un site portfolio                     |
| **[Application mobile](/fr/features/artifact-types/building-mobile-apps)** | Une application native que les utilisateurs installent sur leur téléphone        | Un suivi de fitness, une application de commande pour un restaurant                   |
| **[Visualisation de données](/fr/features/artifact-types/data-apps)**      | Un tableau de bord interactif avec graphiques, filtres et données en direct      | Un rapport de ventes, un suivi de métriques, une vue analytique                       |
| **[Présentation](/fr/features/artifact-types/slide-decks)**                | Une présentation que vous pouvez présenter ou exporter                           | Un pitch deck, une mise à jour d'équipe, une présentation de produit                  |
| **[Animation](/fr/features/artifact-types/animated-videos)**               | Une vidéo d'animation que vous pouvez exporter en MP4                            | Une vidéo de lancement de produit, un explicatif, du contenu pour les réseaux sociaux |
| **Jeu 3D**                                                                 | Un jeu 3D, une simulation ou une expérience interactive                          | Un jeu de puzzle, une simulation physique, une expérience interactive                 |
| **[Design](/fr/design/canvas)**                                            | Des directions visuelles et des prototypes explorés sur le canevas de design     | Des mood boards, des maquettes, de l'exploration de design                            |

Un même projet peut contenir plusieurs artefacts. Par exemple, vous pourriez créer une application web pour vos clients, une application mobile pour votre équipe et une présentation pour des investisseurs — le tout dans le même projet. Lorsque des artefacts vivent dans le même projet, ils partagent automatiquement les mêmes données et la même logique backend. Pour en savoir plus, consultez [Artefacts](/fr/features/projects-and-artifacts/artifacts#multiple-artifacts-in-one-project).

## Gérer vos projets

Votre page Projets répertorie chaque projet que vous avez créé ou auquel vous avez été invité. C'est le moyen le plus rapide de reprendre un travail récent et de retrouver le bon projet dans un espace de travail chargé.

### Voir en un coup d'œil ce que contient chaque projet

Chaque carte de projet affiche de petites icônes pour les artefacts qu'elle contient, pour chaque application web, application mobile, présentation, visualisation de données ou animation du projet. Survolez une icône pour prévisualiser la capture d'écran de cet artefact directement sur la carte, afin de distinguer les projets sans avoir à les ouvrir.

<Frame>
  <img src="https://mintcdn.com/replit/IDyPuGH-IuCET9Hi/images/replitai/projects-page-artifacts.png?fit=max&auto=format&n=IDyPuGH-IuCET9Hi&q=85&s=c6a8bbd53ed0fb847c7e94a96f446962" alt="Carte de projet sur la page Projets avec des icônes d'artefacts et un menu déroulant listant chaque artefact du projet" width="721" height="1022" data-path="images/replitai/projects-page-artifacts.png" />
</Frame>

### Filtrer par artefact

Utilisez le menu déroulant **Type de build** en haut de la page Projets pour filtrer votre liste par artefact. Choisissez-en un pour ne voir que les projets qui contiennent ce type d'artefact :

* **Web** — projets contenant une application web
* **Mobile** — projets contenant une application mobile
* **Data** — projets contenant une visualisation de données
* **Slides** — projets contenant une présentation
* **Design** — projets en mode Design
* **3D Game**, **Agent & Automation**, et plus

Sélectionnez **Any build type** pour supprimer le filtre.

<Frame>
  <img src="https://mintcdn.com/replit/IDyPuGH-IuCET9Hi/images/replitai/projects-page-build-type-filter.png?fit=max&auto=format&n=IDyPuGH-IuCET9Hi&q=85&s=0b328400d8b1f1edde4575cc2184eec7" alt="Menu déroulant Type de build sur la page Projets filtrant par artefact, avec les options Design, Web, Data, Mobile, 3D Game et Slides" width="472" height="622" data-path="images/replitai/projects-page-build-type-filter.png" />
</Frame>

### Trier par dernière ouverture

La page Projets est triée par **dernière ouverture par vous** par défaut — les projets dans lesquels vous avez passé du temps le plus récemment apparaissent en haut. C'est particulièrement utile dans les espaces de travail d'équipe, où les modifications récentes des autres membres pourraient sinon masquer votre travail en cours.

Vous pouvez changer le tri en sélectionnant un autre en-tête de colonne (par exemple, **Dernière mise à jour** ou **Nom**).

### Épingler les projets que vous utilisez le plus

Épinglez un projet pour le garder en haut de votre liste. Les épingles sont **privées** — épingler un projet dans un espace de travail d'équipe ne change pas ce que voient les autres membres.

Pour épingler un projet, ouvrez le menu débordant (trois points) sur la carte du projet et sélectionnez **Pin**. Sélectionnez **Unpin** dans le même menu pour retirer l'épingle.

## Prochaines étapes

<CardGroup cols={3}>
  <Card title="Artefacts" href="/fr/features/projects-and-artifacts/artifacts" icon="layer-group">
    Découvrez comment créer, basculer entre et gérer des artefacts
  </Card>

  <Card title="Applications web" href="/fr/features/artifact-types/web-apps" icon="globe">
    Créez des applications web full-stack
  </Card>

  <Card title="Applications mobiles" href="/fr/features/artifact-types/building-mobile-apps" icon="mobile">
    Créez des applications iOS et Android natives
  </Card>

  <Card title="Visualisation de données" href="/fr/features/artifact-types/data-apps" icon="chart-bar">
    Créez des tableaux de bord interactifs et des outils d'exploration de données
  </Card>

  <Card title="Présentations" href="/fr/features/artifact-types/slide-decks" icon="presentation-screen">
    Créez des présentations par la conversation
  </Card>
</CardGroup>