/* ============================================================
   BOUTIQUE - liste des produits en vente.

   L'en-tete reutilise .top-pagedeux / .project-header (headerproject.css),
   comme les pages projet : meme gabarit, meme animation de titre.
   Cette feuille ne couvre que la grille de produits.

   ⚠️ Comme partout sur le site, base.css impose aux <p> le mono justifie avec
   cesures et aux <a> un hover bleu clair. Les regles ci-dessous les annulent
   dans la grille, et cette feuille doit etre chargee EN DERNIER.

   ⚠️ Piege 4K : la grille est un bloc PLEINE LARGEUR, donc --espacecote (qui
   passe a 17.5% au-dessus de 2000px) est ici le comportement voulu. Ne jamais
   lui ajouter un max-width sur le meme element.
   ============================================================ */

/* ⚠️ Meme raison que sur les pages legales : tant qu'il n'y a qu'un produit,
   la page est plus courte qu'un grand ecran et le footer flottait au milieu
   avec du creme vide en dessous. Le body devient une colonne flex d'au moins
   une hauteur d'ecran et c'est la grille qui absorbe le surplus.
   Les enfants en position fixe (navbar, overlay, bouton remonter) ne sont pas
   des elements flex, ils ne bougent pas. */
body:has(.storegrid) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Sur une page projet, les 10rem de bas de .project-header servent a espacer le
   texte de l'image de couverture qui suit. Ici il n'y a pas d'image, juste la
   grille : on resserre pour remonter les vignettes. */
body:has(.storegrid) .project-header {
    padding-bottom: 4rem;
}

.storegrid {
    width: 100%;
    flex: 1 0 auto;
    padding-inline: var(--espacecote);
    padding-bottom: 8rem;
    background-color: var(--backgroundaccueil);
}

/* 3 colonnes : en 2 colonnes la vignette devenait enorme sur un grand ecran
   (1240px de large sur un 4K). Trois colonnes la ramenent a environ un tiers
   de moins, et laissent de la place pour les produits a venir.
   ⚠️ minmax(0, 1fr) et pas 1fr : sans le minmax, la largeur INTRINSEQUE de
   l'image elargit la colonne et fait exploser la grille. */
.storegrid-liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gapimage);
}

/* ---------- carte produit ---------- */

.storecard {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: var(--anglesprojets);
    background-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

a.storecard:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 18px 40px rgba(0, 0, 0, 0.07);
    color: #000000;   /* annule le a:hover bleu de base.css */
}

.storecard__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000000;
}

.storecard__media video,
.storecard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge du type de produit, pose en bas a gauche du visuel.
   Il repond a une question qu'aucune autre partie de la carte ne traite : ce
   qu'EST le produit. Les etiquettes du corps decrivent ce qu'il contient
   (15 styles, tuiles perso, licence), le badge Ae dit ou ca tourne.

   ⚠️ `left` valait 1.8rem, cale sur le padding de .storecard__corps pour que
   le badge tombe sur la verticale du nom du produit en dessous. Abandonne :
   contre 1.2rem en haut et en bas, ca faisait 28,8px d'un cote contre 19,2px
   de l'autre, et les deux pastilles paraissaient poussees vers la droite dans
   le cadre du visuel. Les trois cotes partagent maintenant la MEME valeur,
   donc l'ecart reste nul quel que soit le palier et quelle que soit la base
   rem -- ne pas les desynchroniser.

   Aplat creme plutot qu'un fond translucide : le visuel est noir ici, mais
   rien ne garantit que la prochaine vignette le sera, et un badge translucide
   deviendrait illisible sur une image claire. */
.storecard__type {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 1;
    padding: 6px 12px;
    border-radius: var(--anglebouton);
    background-color: var(--backgroundaccueil);
    font-family: var(--police);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #1b1b18;
}

/* Pastille NEW, en haut du visuel, au MEME fer que l'etiquette de type qui en
   ferme le bas : les deux partagent le `left`, donc elles restent sur la meme
   verticale que le nom du produit a chaque palier de largeur.
   Couleurs des badges de l'accueil (#9bee68 / #1b3a1d, contraste 8,9:1).
   ⚠️ Reste VISIBLE en permanence, la ou ceux de l'accueil n'apparaissent qu'au
   survol de la carte : sur telephone il n'y a pas de survol, et une nouveaute
   qu'il faut decouvrir a la souris ne s'annonce pas. */
.storecard__new {
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    z-index: 1;
    padding: 5px 10px;
    border-radius: var(--anglebouton);
    background-color: var(--vertmarque);
    color: var(--vertmarquedeux);
    font-family: var(--police);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}

/* Organisation reprise des fiches aescripts : editeur et plateforme sur une
   premiere ligne, puis le nom, la description, et en PIED de carte le prix
   face a l'action. Le pied est ferre en bas par margin-top:auto, donc deux
   cartes cote a cote alignent leurs prix meme si leurs textes different de
   longueur. */
.storecard__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.9rem;
    padding: 1.8rem 1.8rem 1.8rem;
}

.storecard__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.storecard__vendeur {
    font-family: var(--police);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #64645d;
}

/* pastille After Effects : les vraies couleurs Adobe (bleu nuit + periwinkle),
   nette a toute taille, aucun asset. Elle remplace l'ancienne etiquette
   AFTER EFFECTS posee sur l'image, qui faisait doublon avec le logo Ae du
   visuel lui-meme.
   ⚠️ Carre arrondi et pas un cercle : c'est la forme du badge de la fiche
   Typix, et le site n'a pas d'autre element rond. */
.storecard__ae {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--anglesindex);
    background-color: #00005b;
    color: #9999ff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.storecard__nom {
    margin: 0;
    padding: 0;
    font-family: var(--police);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #000000;
}

/* ⚠️ Pastille lime avec texte vert fonce : c'est le SEUL emploi lisible du lime
   de la marque. En texte sur blanc il donne 1,4:1 de contraste, donc illisible ;
   en aplat avec du #1b3a1d par-dessus il monte a 8,9:1. */
/* Le prix de reference reste HORS de la pastille lime : glisse dedans, il
   allongeait la pastille et deux nombres se cotoyaient sur le meme aplat, on ne
   voyait plus lequel etait barre. */
.storecard__prixbloc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.storecard__prixavant {
    font-family: var(--police);
    font-size: 0.95rem;
    font-weight: 400;
    color: #6c6c66;
    text-decoration-thickness: 1px;
}

.storecard__prix {
    flex: none;
    padding: 5px 12px;
    border-radius: var(--anglebouton);
    background-color: var(--vertmarque);
    font-family: var(--police);
    font-size: 1rem;
    font-weight: 500;
    color: #1b3a1d;
}

.storecard__desc {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #4a4a44;
    text-align: left;
    word-spacing: normal;
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
}

.storecard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.2rem;
}

.storecard__tag {
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--anglebouton);
    font-family: var(--police);
    font-size: 0.8rem;
    color: #64645d;
}

/* pied de carte : le prix face a l'action, ferre en bas.
   margin-top:auto pousse la ligne tout en bas du corps, donc deux cartes
   voisines alignent leurs prix quelle que soit la longueur de leur texte. */
.storecard__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.4rem;
}

/* Le lien de fin de carte, souligne qui se dessine au survol.
   Ce n'est pas un vrai bouton : toute la carte est deja un lien, un <a> dans
   un <a> serait invalide.
   ⚠️ transform-origin different au repos et au survol : avec la meme origine,
   le trait revient sur ses pas au lieu de sortir par l'autre bord. */
.storecard__cta {
    position: relative;
    flex: none;
    font-family: var(--police);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #000000;
}

.storecard__cta::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 0.9px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
    will-change: transform;
}

a.storecard:hover .storecard__cta::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- carte « bientot » ---------- */

.storecard--soon {
    justify-content: center;
    align-items: center;
    min-height: 260px;
    padding: 3rem 2rem;
    background-color: transparent;
    box-shadow: none;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    text-align: center;
}

.storecard--soon .storecard__nom {
    font-size: 1.3rem;
    color: #64645d;
}

.storecard--soon .storecard__desc {
    max-width: 34ch;
    text-align: center;
    color: #8a8a81;
}

/* ---------- responsive ---------- */

/* en dessous de 1200px, trois cartes deviennent trop etroites pour que le prix
   et le bouton tiennent sur la meme ligne : on repasse a deux */
@media (max-width: 1200px) {
    .storegrid-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 968px) {
    .storegrid-liste {
        grid-template-columns: minmax(0, 1fr);
    }

    .storecard__corps {
        padding: 1.4rem 1.4rem 1.6rem;
    }

    /* meme valeur sur les trois cotes, comme au palier du dessus : c'est ce qui
       garantit un degagement identique en haut, en bas et sur le cote */
    .storecard__type {
        left: 1rem;
        bottom: 1rem;
    }

    .storecard__new {
        left: 1rem;
        top: 1rem;
    }

    .storecard__nom {
        font-size: 1.6rem;
    }
}

/* ============================================================
   Taille du texte sur telephone, meme correctif que typix.css.
   base.css fait tomber la base rem a 13px sous 768px alors que les cartes
   de la boutique ont ete dessinees pour 16px : elles perdaient 19 %, et
   trois etiquettes passaient sous 12px. On redeclare en px (rem x 16).
   Le titre reprend la valeur de son bloc 968px, seule qui s'applique ici.
   /!\ Bloc a garder en FIN de fichier, sinon la cascade l'annule.
   ============================================================ */
@media (max-width: 768px) {
  .storecard__vendeur { font-size: 12.8px; }
  .storecard__ae { font-size: 13.1px; }
  .storecard__nom { font-size: 25.6px; }
  .storecard--soon .storecard__nom { font-size: 20.8px; }
  .storecard__prix { font-size: 16px; }
  .storecard__desc { font-size: 16px; }
  .storecard__tag { font-size: 12.8px; }
  .storecard__type { font-size: 12.8px; }
  .storecard__new { font-size: 12.8px; }
  .storecard__cta { font-size: 15.2px; }
}