/* ============================================================
   GOALBAM — Prototype mobile « Bogolan »
   ------------------------------------------------------------
   Direction : le bogolan est un tissu de coton écru teint à la
   boue. Le fond est donc CLAIR et l'encre sombre — l'inverse du
   prototype v3. Trois conséquences pratiques :
     • les photos produit sur fond blanc s'intègrent sans
       détourage (149 images économisées)
     • lisible en plein soleil à Bamako
     • le maillot reste le seul objet coloré de l'écran

   Une seule couleur dans toute l'interface : le vert WhatsApp,
   réservé à l'action de commande. Rien d'autre n'est vert.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,300..900;1,62..125,400&display=swap');

:root {
    /* Bogolan : coton écru, teinture de boue */
    --papier:      #E8E1D2;
    --papier-haut: #F4F0E7;
    --craie:       #FBF9F4;
    --encre:       #16130D;
    --encre-70:    rgba(22, 19, 13, .70);
    --encre-45:    rgba(22, 19, 13, .45);
    --encre-25:    rgba(22, 19, 13, .25);
    --trait:       #CFC4AC;
    --trait-fin:   rgba(22, 19, 13, .12);

    /* La seule couleur de l'interface — action de commande uniquement */
    --vert:        #0E7A42;
    --vert-fonce:  #0A5E33;

    /* Rupture : pas une couleur, une valeur */
    --alerte:      #8C2F1B;

    --police: 'Archivo', system-ui, -apple-system, sans-serif;

    --r: 2px;              /* presque carré : plus sportif que l'arrondi doux */
    --marge: 20px;
    --barre: 68px;         /* hauteur de la barre d'onglets */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--police);
    font-variation-settings: 'wdth' 100, 'wght' 450;
    background: var(--papier);
    color: var(--encre);
    line-height: 1.55;
    font-size: 15px;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* Motif bogolan — hachures et damiers, tracés en SVG donc quasi gratuits */
.bogolan {
    background-image:
        repeating-linear-gradient(90deg, var(--trait-fin) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(0deg,  var(--trait-fin) 0 1px, transparent 1px 9px);
}

/* ============================================================
   Typographie
   ============================================================ */
.affiche {
    font-variation-settings: 'wdth' 112, 'wght' 880;
    text-transform: uppercase;
    line-height: .92;
    letter-spacing: -.015em;
}
.titre-xl   { font-size: 33px; }
.titre-l    { font-size: 23px; }
.titre-m    { font-size: 19px; }
.titre-s    { font-size: 15px; }

.sur-titre {
    font-size: 11px;
    font-variation-settings: 'wght' 750;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--encre-45);
}

.prix {
    font-variation-settings: 'wdth' 112, 'wght' 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.discret { color: var(--encre-70); font-size: 13px; font-variation-settings: 'wght' 450; }

/* ============================================================
   Coquille de l'application
   ============================================================ */
.app {
    max-width: 440px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--papier);
    position: relative;
    padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}

.entete {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--marge);
    background: color-mix(in srgb, var(--papier) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--trait-fin);
}
.entete img { height: 22px; width: auto; }
.entete-actions { margin-left: auto; display: flex; gap: 6px; }

.icone {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--trait);
    border-radius: var(--r);
    transition: background .15s;
}
.icone:active { background: var(--trait); }
.icone svg { width: 19px; height: 19px; stroke: var(--encre); fill: none; stroke-width: 1.7; }

.ecran { display: none; }
.ecran.actif { display: block; animation: entree .22s ease; }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section { padding: 22px var(--marge); }
.section + .section { border-top: 1px solid var(--trait-fin); }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }

/* ============================================================
   Accueil
   ============================================================ */
.hero {
    padding: 22px var(--marge) 24px;
    border-bottom: 1px solid var(--trait-fin);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, var(--trait-fin) 0 1px, transparent 1px 11px);
    opacity: .8;
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { margin: 10px 0 12px; }
.hero p { font-size: 15px; color: var(--encre-70); max-width: 30ch; }

.bandeau {
    display: flex; align-items: center; gap: 9px;
    padding: 11px var(--marge);
    background: var(--encre);
    color: var(--papier);
    font-size: 12.5px;
}
.bandeau svg { width: 15px; height: 15px; stroke: var(--papier); fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* Rail horizontal */
.rail {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--marge) * -1);
    padding: 2px var(--marge) 6px;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 156px; }

/* ============================================================
   Carte produit
   ============================================================ */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.carte { position: relative; cursor: pointer; }
.carte-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    overflow: hidden;
}
.carte-photo img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6px;
    transition: transform .4s cubic-bezier(.2,.75,.25,1);
}
.carte:active .carte-photo img { transform: scale(1.04); }

.carte-corps { padding-top: 9px; }
.carte-club { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-45); font-variation-settings: 'wght' 650; }
.carte-nom  { font-size: 14px; margin: 2px 0 5px; font-variation-settings: 'wdth' 106, 'wght' 750; line-height: 1.2; }
.carte-prix { font-size: 15px; }

.etiquette {
    /* En bas à gauche : le coin haut-gauche appartient au cœur. */
    position: absolute; bottom: 8px; left: 8px;
    font-size: 10px; font-variation-settings: 'wght' 700;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 4px 7px;
    background: var(--encre); color: var(--papier);
    border-radius: var(--r);
}
.etiquette.rupture { background: var(--alerte); }

.ajout-rapide {
    position: absolute; bottom: 8px; right: 8px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--encre); border-radius: var(--r);
}
.ajout-rapide svg { width: 16px; height: 16px; stroke: var(--papier); stroke-width: 2.4; fill: none; }

/* ============================================================
   Boutons
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px;
    padding: 0 20px;
    border-radius: var(--r);
    font-size: 14px;
    font-variation-settings: 'wdth' 106, 'wght' 780;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn-bloc { width: 100%; }

/* La seule surface colorée de toute l'interface */
.btn-wa { background: var(--vert); color: #fff; }
.btn-wa:active { background: var(--vert-fonce); }
.btn-wa svg { width: 18px; height: 18px; fill: #fff; }

.btn-encre { background: var(--encre); color: var(--papier); }
.btn-ligne { border: 1.5px solid var(--encre); color: var(--encre); }

/* ============================================================
   Filtres
   ============================================================ */
.recherche { position: relative; margin-bottom: 14px; }
.recherche svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--encre-45); fill: none; stroke-width: 1.8; }
.recherche input {
    width: 100%; height: 48px;
    padding: 0 14px 0 40px;
    background: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    font-size: 15px;
}
.recherche input:focus { outline: none; border-color: var(--encre); }

.puces { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--marge) * -1); padding: 0 var(--marge) 2px; }
.puces::-webkit-scrollbar { display: none; }
.puce {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid var(--trait);
    border-radius: var(--r);
    font-size: 12.5px;
    font-variation-settings: 'wght' 680;
    white-space: nowrap;
    background: var(--craie);
}
.puce.on { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* ============================================================
   Fiche produit
   ============================================================ */
.galerie { position: relative; background: var(--craie); border-bottom: 1px solid var(--trait); }
.galerie-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie-piste::-webkit-scrollbar { display: none; }
.galerie-piste img { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1; object-fit: contain; padding: 16px; }
.points { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.point { width: 6px; height: 6px; border-radius: 50%; background: var(--encre-25); transition: background .2s, width .2s; }
.point.on { background: var(--encre); width: 18px; border-radius: 3px; }

.retour {
    position: absolute; top: 12px; left: 12px; z-index: 5;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--craie) 88%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--trait);
    border-radius: var(--r);
}
.retour svg { width: 19px; height: 19px; stroke: var(--encre); fill: none; stroke-width: 2; }

.tailles { display: flex; gap: 8px; flex-wrap: wrap; }
.taille {
    min-width: 54px; height: 50px;
    padding: 0 12px;
    display: grid; place-items: center;
    border: 1.5px solid var(--trait);
    border-radius: var(--r);
    background: var(--craie);
    font-size: 15px;
    font-variation-settings: 'wght' 700;
}
.taille.on { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.taille:disabled { opacity: .3; text-decoration: line-through; pointer-events: none; }

.bascule { display: flex; border: 1.5px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.bascule button { flex: 1; min-height: 48px; font-size: 13px; font-variation-settings: 'wght' 600; }
.bascule button.on { background: var(--encre); color: var(--papier); }

.champ { display: block; margin-bottom: 12px; }
.champ span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-45); margin-bottom: 6px; }
.champ input {
    width: 100%; height: 48px; padding: 0 13px;
    background: var(--craie); border: 1px solid var(--trait); border-radius: var(--r);
    font-size: 15px;
}
.champ input:focus { outline: none; border-color: var(--encre); }
/* Le flocage est toujours brodé en capitales : autant l'afficher tel quel. */
#flocNom, #rNom { text-transform: uppercase; letter-spacing: .04em; }

.avis-flocage {
    display: flex; gap: 9px;
    padding: 12px 13px;
    border-left: 3px solid var(--alerte);
    background: color-mix(in srgb, var(--alerte) 7%, transparent);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Barre d'action collante de la fiche produit */
.barre-action {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 440px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--papier) 95%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--trait);
    z-index: 50;
}
.barre-action .montant { flex-shrink: 0; }
.barre-action .montant small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-45); }
.barre-action .montant strong { font-size: 21px; }

/* ============================================================
   Sélection
   ============================================================ */
.ligne-selection {
    display: flex; gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--trait-fin);
}
.ligne-selection img {
    width: 56px; height: 74px; object-fit: contain;
    background: var(--craie); border: 1px solid var(--trait); border-radius: var(--r);
    flex-shrink: 0;
}
.ligne-selection .corps { flex: 1; min-width: 0; }
.retirer { align-self: flex-start; padding: 4px; }
.retirer svg { width: 17px; height: 17px; stroke: var(--encre-45); fill: none; stroke-width: 2; }

.total {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 16px 0;
    border-top: 2px solid var(--encre);
    margin-top: 4px;
}

/* ============================================================
   Feuille basse
   ============================================================ */
.voile {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(22, 19, 13, .5);
    display: flex; align-items: flex-end; justify-content: center;
    animation: fondu .2s ease;
}
@keyframes fondu { from { opacity: 0 } to { opacity: 1 } }
.feuille {
    width: 100%; max-width: 440px;
    max-height: 88vh; overflow-y: auto;
    background: var(--papier);
    border-radius: 12px 12px 0 0;
    padding: 8px var(--marge) calc(20px + env(safe-area-inset-bottom, 0px));
    animation: monte .26s cubic-bezier(.2,.75,.25,1);
}
@keyframes monte { from { transform: translateY(30px) } to { transform: none } }
.poignee { width: 38px; height: 4px; background: var(--trait); border-radius: 2px; margin: 6px auto 16px; }

/* ============================================================
   Barre d'onglets
   ============================================================ */
.onglets {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 440px;
    display: flex;
    background: color-mix(in srgb, var(--papier) 95%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--trait);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 45;
}
.onglet {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 11px 0 12px;
    color: var(--encre-45);
    position: relative;
    transition: color .15s;
}
.onglet svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.onglet span { font-size: 10px; letter-spacing: .04em; font-variation-settings: 'wght' 600; }
.onglet.on { color: var(--encre); }
.onglet.on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 2px; background: var(--encre);
}
.pastille {
    position: absolute; top: 7px; left: 50%; margin-left: 5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--encre); color: var(--papier);
    border-radius: 9px;
    font-size: 10px; font-variation-settings: 'wght' 700;
}

/* ============================================================
   Divers
   ============================================================ */
.vide { text-align: center; padding: 56px 20px; color: var(--encre-45); }
.vide svg { width: 46px; height: 46px; stroke: var(--trait); fill: none; stroke-width: 1.5; margin: 0 auto 14px; }

.accordeon { border-bottom: 1px solid var(--trait-fin); }
.accordeon summary { padding: 15px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; font-variation-settings: 'wght' 650; font-size: 14.5px; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: '+'; font-size: 19px; color: var(--encre-45); }
.accordeon[open] summary::after { content: '–'; }
.accordeon p { padding-bottom: 15px; font-size: 14px; color: var(--encre-70); }

.toast {
    position: fixed; bottom: calc(var(--barre) + 14px); left: 50%; transform: translateX(-50%);
    width: calc(100% - 40px); max-width: 400px;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px;
    background: var(--encre); color: var(--papier);
    border-radius: var(--r);
    font-size: 13.5px;
    z-index: 70;
    animation: monte .24s cubic-bezier(.34,1.56,.64,1);
}
.toast svg { width: 17px; height: 17px; stroke: var(--papier); fill: none; stroke-width: 2.4; flex-shrink: 0; }
.toast button { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--papier); font-variation-settings: 'wght' 700; }

/* ============================================================
   Tablette et ordinateur
   ------------------------------------------------------------
   L'interface reste pensée pour le pouce : on ne la redessine
   pas, on élargit la colonne et on la délimite par deux filets.
   La barre d'onglets et la barre d'action suivent la même
   largeur, sinon elles flottent plus étroites que le contenu.

   Ce bloc remplace le cadre en forme de téléphone qui servait
   à présenter le prototype sur grand écran. Sur le vrai site,
   ce cadre donnait l'impression d'une page cassée.
   ============================================================ */
@media (min-width: 700px) {
    :root { --marge: 30px; }

    .app {
        max-width: 620px;
        border-left: 1px solid var(--trait-fin);
        border-right: 1px solid var(--trait-fin);
    }
    .onglets, .barre-action { max-width: 620px; }

    /* La place gagnée sert à montrer plus de maillots,
       pas à les agrandir. */
    .grille { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .rail > * { flex: 0 0 180px; }
}

@media (min-width: 1040px) {
    .app, .onglets, .barre-action { max-width: 760px; }
    .grille { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Favoris — le cœur
   ------------------------------------------------------------
   Placé en haut à GAUCHE de la photo, à l'opposé du « + » d'ajout
   rapide : deux gestes voisins ne doivent pas se confondre.
   ============================================================ */
.coeur {
    position: absolute; top: 8px; left: 8px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--craie) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.coeur svg { width: 17px; height: 17px; stroke: var(--encre); fill: none; stroke-width: 1.9; }
.coeur.on svg { fill: var(--encre); }
.coeur:active { transform: scale(.88); }
.coeur.bat { animation: battement .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes battement { 0%,100% { transform: scale(1) } 40% { transform: scale(1.28) } }

/* Cœur de la fiche produit, posé sur la galerie */
.coeur-fiche { top: 12px; left: auto; right: 12px; width: 40px; height: 40px; }
.coeur-fiche svg { width: 19px; height: 19px; }

/* ============================================================
   Sous-onglets (Ma sélection / Mes envies)
   ============================================================ */
.sous-onglets {
    display: flex;
    border: 1.5px solid var(--encre);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 20px;
}
.sous-onglet {
    flex: 1; min-height: 46px;
    font-size: 12.5px;
    font-variation-settings: 'wght' 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sous-onglet.on { background: var(--encre); color: var(--papier); }
.sous-onglet .compte {
    min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--encre-25); color: inherit;
    font-size: 10.5px;
}
.sous-onglet.on .compte { background: color-mix(in srgb, var(--papier) 28%, transparent); }

/* ============================================================
   Fiche technique du produit
   ============================================================ */
.fiche-tech { border-top: 1px solid var(--trait-fin); }
.fiche-tech div {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--trait-fin);
    font-size: 13.5px;
}
.fiche-tech dt { color: var(--encre-45); flex-shrink: 0; }
.fiche-tech dd { text-align: right; font-variation-settings: 'wght' 720; }

.tableau-tailles { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau-tailles th {
    text-align: left; padding: 8px 0;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--encre-45); font-variation-settings: 'wght' 700;
    border-bottom: 1px solid var(--trait);
}
.tableau-tailles td { padding: 9px 0; border-bottom: 1px solid var(--trait-fin); font-variant-numeric: tabular-nums; }
.tableau-tailles tr td:first-child { font-variation-settings: 'wght' 700; }

.note-redac {
    display: flex; gap: 8px;
    padding: 11px 12px;
    border: 1px dashed var(--trait);
    border-radius: var(--r);
    font-size: 12.5px;
    color: var(--encre-45);
    line-height: 1.45;
}