/* ============================================================================
   LA VITRINE D'EASYSTORE — une seule feuille, aucune dépendance.

   HORS DE LA CHARTE DU BACK-OFFICE, ET C'EST VOULU : la vitrine est le site d'une boutique,
   pas un écran d'EasyERP. Elle ne charge ni Bootstrap ni les feuilles --et-* ; elle porte une
   seule couleur réglable, --marque (Vitrine:Boutiques:n:Couleur), posée sur <body>.

   PENSÉE POUR LE TÉLÉPHONE D'ABORD : une colonne sous 640 px, des cibles de 44 px, du texte à
   16 px (sous 16 px, iOS zoome sur le champ qu'on touche). Contrastes AA sur fond blanc :
   --encre 15.4:1, --doux 7.0:1, --marque par défaut 6.6:1.
   ============================================================================ */

:root {
    --marque: #0057B8;
    --encre: #0F172A;
    --doux: #475569;
    --filet: #CBD5E1;
    --fond: #FFFFFF;
    --fond-doux: #F1F5F9;
    --succes: #166534;
    --succes-fond: #DCFCE7;
    --alerte: #92400E;
    --alerte-fond: #FEF3C7;
    --danger: #991B1B;
    --danger-fond: #FEE2E2;
    --rayon: 6px;
    /* EasyEvent : le bouton « S'inscrire » est orange (brief EasyEvent § 2). #C4540A et non l'orange
       de marque #F26C16 : le libellé blanc y lit 4.55:1 (AA), contre 3.03:1 — même choix que
       --et-action du back-office. */
    --cta: #C4540A;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Open Sans", sans-serif;
    color: var(--encre);
    background: var(--fond-doux);
}

a { color: var(--marque); }
img { max-width: 100%; display: block; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 12px; }

.cadre { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.cadre { padding-top: 20px; padding-bottom: 40px; min-height: 60vh; }

.masque {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 8px; background: var(--fond); padding: 8px 12px; z-index: 10; }

:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }

/* ---------- En-tête et pied ---------- */
.entete { background: var(--marque); }
.entete-cadre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 60px; }
.marque { color: #FFFFFF; font-weight: 700; font-size: 20px; text-decoration: none; padding: 8px 0; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
    color: #FFFFFF; text-decoration: none; padding: 10px 12px; min-height: 44px;
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--rayon);
}
.nav a:hover { background: rgba(255, 255, 255, .16); }
.pastille {
    background: #FFFFFF; color: var(--encre); border-radius: 999px; font-size: 13px; font-weight: 700;
    min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}

.pied { background: var(--fond); border-top: 1px solid var(--filet); color: var(--doux); font-size: 14px; }
.pied-cadre { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
.pied strong { color: var(--encre); }

/* ---------- Boutons, avis ---------- */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
    font: inherit; font-weight: 600; border-radius: var(--rayon); cursor: pointer; text-decoration: none;
    border: 1px solid var(--marque); background: var(--fond); color: var(--marque);
}
.bouton.est-plein { background: var(--marque); color: #FFFFFF; }
.bouton.est-plein:hover { filter: brightness(.92); }
.bouton.est-danger { background: var(--danger); }   /* lot 10 : le geste qui efface — rouge, pas la couleur de la marque */
.bouton.est-discret { border-color: transparent; color: var(--doux); }
.bouton.est-large { width: 100%; }

.avis { padding: 12px 14px; border-radius: var(--rayon); margin: 0 0 16px; }
.avis.est-succes { background: var(--succes-fond); color: var(--succes); }
.avis.est-erreur { background: var(--danger-fond); color: var(--danger); }
.avis.est-attente { background: var(--alerte-fond); color: var(--alerte); }
.payer { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 20px 16px; max-width: 520px; }
.payer .bouton { margin: 12px 0; }
.relance { max-width: 520px; margin-bottom: 24px; }
.relance .avis { margin-bottom: 12px; }
.note { color: var(--doux); font-size: 14px; }

/* ---------- Catalogue ---------- */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bandeau h1 { margin: 0; }
.recherche { display: flex; gap: 8px; flex: 1 1 280px; max-width: 480px; }
.recherche input { flex: 1; min-width: 0; }

input, textarea, select {
    font: inherit; color: var(--encre); background: var(--fond); border: 1px solid #94A3B8;
    border-radius: var(--rayon); padding: 9px 12px; min-height: 44px; width: 100%;
}
textarea { resize: vertical; }

.familles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.famille {
    white-space: nowrap; text-decoration: none; color: var(--encre); background: var(--fond);
    border: 1px solid var(--filet); border-radius: 999px; padding: 8px 14px; min-height: 44px;
    display: inline-flex; align-items: center; gap: 6px;
}
.famille.est-active { background: var(--marque); border-color: var(--marque); color: #FFFFFF; }
.famille .compte { font-size: 13px; opacity: .85; }

.resume { color: var(--doux); margin: 8px 0 16px; }

.grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.carte {
    background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.carte-lien { text-decoration: none; color: var(--encre); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-image { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; border-radius: var(--rayon); background: var(--fond-doux); }
.carte-image.est-vide {
    display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: var(--doux);
}
.carte-image.est-grande { font-size: 72px; }
.carte-titre { font-weight: 600; }
.carte-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.carte form .bouton { width: 100%; }

.prix { font-weight: 700; font-size: 18px; }
.prix.est-grand { font-size: 26px; margin: 4px 0; }
/* Lot 13 : promotion — le prix d'avant barré, en ton doux ; le libellé en pastille d'alerte. */
.prix-avant { color: var(--doux); font-weight: 400; font-size: .8em; margin-right: 6px; }
.promo { display: inline-block; margin: 0 0 4px; padding: 2px 10px; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte); font-weight: 600; font-size: 14px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ttc { font-size: 14px; font-weight: 400; color: var(--doux); }
.dispo { font-size: 14px; color: var(--succes); }
.dispo.est-limite { color: var(--alerte); }
.dispo.est-rupture { color: var(--danger); }

.pages { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }

.ferme, .vide { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 32px 20px; text-align: center; }

/* ---------- Fiche produit ---------- */
.fil { font-size: 14px; color: var(--doux); display: flex; gap: 8px; margin-bottom: 12px; }
.fiche { display: grid; gap: 24px; grid-template-columns: 1fr; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; }
.fiche-image img { width: 100%; border-radius: var(--rayon); }

/* Lot 25 — LA GALERIE : des vignettes-liens sous l'image. Chacune est une cible de 64 px (au-delà des 44 de la
   règle tactile) ; la vignette courante porte le filet de la marque, les autres le filet ordinaire. */
.galerie { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.galerie a { display: block; width: 64px; height: 64px; border: 2px solid var(--filet); border-radius: var(--rayon); overflow: hidden; background: var(--fond-doux); }
.galerie a[aria-current="true"] { border-color: var(--marque); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0; }
.ajout label { width: 100%; font-weight: 600; }
.ajout input { width: 110px; }
/* Lot 18 — « Prévenez-moi quand il revient », sur la fiche d'un produit épuisé. */
.alerte-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0; }
.alerte-stock label { width: 100%; font-weight: 600; }
.alerte-stock input { flex: 1 1 220px; }
.alerte-stock .note { width: 100%; margin: 0; }
.ajout .bouton { flex: 1 1 200px; }
.unite { color: var(--doux); }
.description { white-space: pre-line; margin-top: 16px; }
.reference { color: var(--doux); font-size: 14px; }
/* Lot 20 — les avis des acheteurs (.eval-* : « .avis » nomme déjà les bandeaux de message). */
.eval-resume a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--encre); }
.eval-etoiles { color: var(--alerte); letter-spacing: 1px; }
.evaluations { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; margin-top: 24px; }
.evaluations h2 { margin-top: 0; }
.eval-moyenne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eval-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.eval { border-top: 1px solid var(--filet); padding: 12px 0; }
.eval-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.eval-date { color: var(--doux); font-size: 14px; }
.eval-texte { white-space: pre-line; margin: 8px 0 0; overflow-wrap: anywhere; }
.eval-invite a { display: inline-flex; align-items: center; min-height: 44px; }
.eval-form { border-top: 1px solid var(--filet); padding-top: 16px; margin-top: 16px; }
.eval-notes { display: flex; flex-direction: column; margin-bottom: 12px; }

/* ---------- Panier, commande, suivi ---------- */
.lignes { list-style: none; margin: 0 0 16px; padding: 0; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); }
.ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; border-top: 1px solid var(--filet); align-items: center; }
.ligne:first-child { border-top: 0; }
.ligne.est-bloquee { background: var(--danger-fond); }
.ligne-produit { display: flex; flex-direction: column; grid-column: 1 / -1; }
.ligne-produit a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ligne-pu { color: var(--doux); font-size: 14px; }
.avis-ligne { color: var(--danger); font-size: 14px; font-weight: 600; }
.ligne-qte { display: flex; gap: 8px; align-items: center; }
.ligne-qte input { width: 90px; }
.ligne-montant { font-weight: 700; text-align: right; }
.lignes.est-lecture .ligne-produit { grid-column: auto; }
.lignes.est-lecture .ligne-geste { grid-column: 1 / -1; justify-self: start; }   /* lot 12 : « Commander à nouveau » sous la ligne */

.totaux { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.totaux-ligne { display: flex; justify-content: space-between; gap: 12px; }
.totaux-ligne.est-second { color: var(--doux); }
/* Lot 16 — le code promo : sa ligne de remise, et le formulaire qui le saisit (sans script). */
.totaux-ligne.est-remise { color: var(--succes); }
.code-promo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.code-promo input { width: 180px; text-transform: uppercase; }

.commande { display: grid; gap: 20px; grid-template-columns: 1fr; }
.formulaire { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; }
.formulaire.est-court { max-width: 480px; }
/* EasyEvent — l'aperçu d'une page (lien du back-office) : un bandeau en tête, et le formulaire montré
   mais inerte (fieldset désactivé, sans cadre propre : il ne fait que porter l'attribut). */
.formulaire-champs { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulaire-champs:disabled { opacity: .6; }
.evt-apercu { margin-top: 16px; }
/* Le bandeau (mise en page par défaut) remonte de 20 px pour toucher l'en-tête ; sous l'avis d'aperçu,
   il le recouvrirait : il reste à sa place. */
.evt-apercu + .evt-bandeau { margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.champ label { font-weight: 600; }
.facultatif { font-weight: 400; color: var(--doux); }
.erreur { color: var(--danger); font-size: 14px; }
.erreur:empty { display: none; }
.choix { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.choix input { width: 22px; height: 22px; min-height: 0; flex: none; }   /* lot 21 : une étiquette sur deux lignes ne rétrécit plus la case */
.paiement { color: var(--doux); }

.recap { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; align-self: start; }
.recap ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.recap li { display: flex; justify-content: space-between; gap: 12px; }

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; }
.etape { display: inline-block; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--fond); border: 1px solid var(--filet); }
.etape.est-ok { background: var(--succes-fond); color: var(--succes); border-color: transparent; }
.etape.est-ko { background: var(--danger-fond); color: var(--danger); border-color: transparent; }
.faits { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 16px 0; }
.faits dt { color: var(--doux); font-size: 14px; }
.faits dd { margin: 0; font-weight: 600; }

/* ---------- Le compte de l'acheteur (lot 4) ---------- */
.liens-compte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 12px 0 0; }
.liens-compte a { display: inline-flex; align-items: center; min-height: 44px; }
.espace-compte { display: grid; gap: 24px; grid-template-columns: 1fr; }
.espace-compte h2 { margin-top: 0; }
.espace-compte h2.titre-carnet { margin-top: 32px; }   /* lot 11 : le carnet suit les coordonnées */
.acheteur { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px 16px; margin: 0 0 16px; }
.acheteur a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- EasyEvent : page publique d'un événement et billet (.evt-*, .billet*) ---------- */
.bouton.est-cta { background: var(--cta); border-color: var(--cta); color: #FFFFFF; font-weight: 700; }
.bouton.est-cta:hover { filter: brightness(.92); }
.evt { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; }
.evt-tete, .evt-bloc, .billet { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; }
.evt-visuel { width: calc(100% + 32px); max-width: none; margin: -16px -16px 16px; aspect-ratio: 16 / 7; object-fit: cover;
              border-radius: var(--rayon) var(--rayon) 0 0; }
.evt-nature { color: var(--doux); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.evt-accroche { font-size: 18px; color: var(--doux); margin: -8px 0 8px; }
.evt-bloc h2 { margin-bottom: 4px; }
.evt-bloc .description { margin-top: 0; }
.billet { max-width: 520px; margin: 0 auto; }
.billet-qr { margin: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.billet-retour { margin: 8px 0 0; }
.billet-retour a { display: inline-flex; align-items: center; min-height: 44px; }
.billet-qr img { width: 240px; height: 240px; background: #FFFFFF; padding: 8px; border: 1px solid var(--filet); border-radius: var(--rayon); }
/* Mise en page BANDEAU : le visuel sur toute la largeur, le titre posé dessus sur un voile sombre.
   Le bandeau sort du cadre (marges négatives) ; la page coupe ce qui dépasse de 100vw (barre de
   défilement) au lieu de défiler en largeur. */
body:has(.evt-bandeau) { overflow-x: clip; }
.evt-bandeau { position: relative; margin: -20px calc(50% - 50vw) 0; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; background: #0F172A; }
.evt-bandeau-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.evt-bandeau-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .15), rgba(15, 23, 42, .78)); }
.evt-bandeau-txt { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 48px 16px 24px; color: #FFFFFF; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.evt-bandeau-txt h1 { color: #FFFFFF; font-size: 28px; margin: 0; text-wrap: balance; }
.evt-bandeau-nature { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #E2E8F0; }
.evt-bandeau + .fil { margin-top: 16px; flex-wrap: wrap; }
.evt-deux { display: grid; gap: 20px; grid-template-columns: 1fr; }
.evt-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.evt-accroche-titre { font-size: 20px; margin: 0; }
.evt-cta-haut { align-self: flex-start; }

/* L'état des inscriptions : une pastille, mêmes mots dans la liste et sur la page. */
.etat { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--fond-doux); color: var(--encre); }
.etat.est-ok { background: var(--succes-fond); color: var(--succes); }
.etat.est-attente { background: var(--alerte-fond); color: var(--alerte); }
.etat.est-ko { background: var(--danger-fond); color: var(--danger); }
.etat.est-info { background: var(--fond); color: var(--marque); border: 1px solid var(--marque); }

/* La colonne : état, date, calendrier, lieu, organisateur, partage. */
.evt-colonne { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.evt-colonne .evt-etat { margin: 0; padding: 12px 14px; border-radius: var(--rayon); }
.evt-date { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); }
.evt-date-jour { font-size: 40px; line-height: 1; font-weight: 700; color: var(--marque); font-variant-numeric: tabular-nums; }
.evt-date-reste { display: flex; flex-direction: column; font-size: 14px; }
.evt-col-bloc { border-top: 1px solid var(--filet); padding-top: 12px; }
.evt-col-bloc h2 { font-size: 16px; margin: 0 0 6px; }
.evt-col-bloc p { margin: 0 0 4px; }
.evt-col-bloc a:not(.bouton) { display: inline-flex; align-items: center; min-height: 44px; }
.evt-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.evt-partage { display: flex; flex-wrap: wrap; gap: 8px; }
.evt-partage a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 999px; background: var(--fond); color: var(--marque); font-weight: 700; text-decoration: none; }
.evt-partage a:hover { border-color: var(--marque); }

/* Mise en page AFFICHE : le visuel et les informations côte à côte (une colonne sur téléphone). */
.evt-affiche { display: grid; gap: 20px; grid-template-columns: 1fr; }
.evt-affiche-visuel img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--rayon); }
.evt-affiche-corps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.evt-affiche-corps h1 { margin: 0; }
.evt-affiche-corps .fil { margin: 0; }

/* La page « Événements » : des cartes, la date en pavé sur le visuel. */
.evt-liste-bloc { margin-bottom: 28px; }
.evt-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.evt-carte a { display: flex; flex-direction: column; position: relative; height: 100%; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; color: var(--encre); text-decoration: none; }
.evt-carte a:hover { border-color: var(--marque); }
.evt-carte img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.evt-carte-date { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 4px 8px; background: var(--fond); border-radius: var(--rayon); box-shadow: 0 1px 4px rgba(15, 23, 42, .25); }
.evt-carte-date b { font-size: 22px; line-height: 1.1; color: var(--marque); }
.evt-carte-date span { font-size: 12px; font-weight: 700; color: var(--doux); }
.evt-carte-corps { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px 14px; }
.evt-carte-corps strong { font-size: 17px; }
.evt-carte.est-passe img { filter: grayscale(.6); }

@media (min-width: 720px) {
    .evt-bandeau { min-height: 300px; }
    .evt-bandeau-txt h1 { font-size: 36px; }
    .evt-deux { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
    .evt-affiche { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; }
    .evt-affiche-visuel { position: sticky; top: 16px; }
    .evt-affiche-visuel img { aspect-ratio: 4 / 5; }
    .evt-cartes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media print {
    .entete, .pied, .billet .bouton { display: none; }
    .billet { border: 0; }
}

@media (min-width: 720px) {
    .espace-compte { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    h1 { font-size: 28px; }
    .grille { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px; }
    .commande { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .ligne { grid-template-columns: minmax(0, 1fr) auto auto auto; }
    .ligne-produit { grid-column: auto; }
}