# Organisation par FEATURE plutôt que par TYPE de fichier -- scalable au-delà de quelques écrans
src/
  features/
    panier/
      components/
        ResumePanier.jsx
        LignePanier.jsx
      hooks/
        usePanier.js
      api/
        panierApi.js
      panierSlice.js
      index.js          # point d'entrée public de la feature (barrel export)
    authentification/
      components/
      hooks/
        useAuth.js
      api/
        authApi.js
  composants-partages/    # UI générique, sans logique métier : Bouton, Modale, Input
    Bouton.jsx
    Modale.jsx
  lib/                    # utilitaires purs, sans dépendance React
    formatage.js
    validation.js
  routes/

// Barrel export : contrôle explicite de ce qu'une feature expose vers l'extérieur
// features/panier/index.js
export { ResumePanier } from "./components/ResumePanier";
export { usePanier } from "./hooks/usePanier";
// tout le reste (panierSlice, panierApi...) reste un détail d'implémentation INTERNE à la feature

// Ailleurs dans l'app : import uniquement via le point d'entrée public
import { ResumePanier, usePanier } from "@/features/panier";
// jamais : import { panierSlice } from "@/features/panier/panierSlice" -- casse l'encapsulation

// Couche API isolée : les composants ne connaissent jamais fetch/axios directement
// features/panier/api/panierApi.js
export async function recupererPanier() {
    const res = await fetch("/api/panier");
    if (!res.ok) throw new Error("Impossible de charger le panier");
    return res.json();
}

export async function ajouterArticle(article) {
    const res = await fetch("/api/panier/articles", {
        method: "POST",
        body: JSON.stringify(article),
    });
    return res.json();
}

// features/panier/hooks/usePanier.js
export function usePanier() {
    return useQuery({ queryKey: ["panier"], queryFn: recupererPanier });
}
// changer de client HTTP (fetch -> axios) ne touche QU'un seul fichier

// Composants "container" (logique) vs "présentation" (affichage pur) -- séparation utile à grande échelle
function ResumePanierContainer() {
    const { data: panier, isLoading } = usePanier();
    if (isLoading) return <Squelette />;
    return <ResumePanierUI articles={panier.articles} total={panier.total} />;
}

// composant purement présentationnel : testable isolément, réutilisable, sans dépendance réseau
function ResumePanierUI({ articles, total }) {
    return (
        <div>
            {articles.map((a) => <LignePanier key={a.id} article={a} />)}
            <p>Total : {total}€</p>
        </div>
    );
}

// Design system interne : centraliser les primitives UI évite la dérive visuelle
// composants-partages/Bouton.jsx
function Bouton({ variante = "primaire", taille = "md", ...props }) {
    return (
        <button
            className={`bouton bouton--${variante} bouton--${taille}`}
            {...props}
        />
    );
}
// toute l'app utilise CE bouton -- un changement de style se propage partout,
// et aucune équipe ne réinvente son propre bouton légèrement différent