/* =============================================================================
   SHEIN MG — Feuille de style unique
   Parti pris : « crépuscule lavande ». Un papier lavande très clair, une encre
   indigo nuit, deux accents rares (mangue pour l'état, violet pour l'action)
   et des rayons généreux : la page reste colorée mais reposante, même après
   une longue session de travail.

   Deux fontes, auto-hébergées dans « assets/polices » (aucun CDN, aucune
   requête vers un tiers : le site reste identique hors connexion et le service
   worker les met en cache comme le reste) :
     — Fraunces, serif à axe optique : les titres de page et les grands chiffres ;
     — Archivo, grotesque : l'interface, les libellés, les montants.
   Chacune est réduite au jeu latin et à un fichier variable (35 Ko et 67 Ko),
   sous licence OFL, fournie à côté (OFL-Archivo.txt, OFL-Fraunces.txt).

   Règles tenues dans tout le fichier :
     — rayons généreux (9 à 12 px), ombres diffuses teintées d'indigo, aucun
       dégradé décoratif ;
     — DEUX accents : la mangue marque l'ÉTAT et la marque (lien actif, prix,
       compteur, filet d'onglet, sceau), le violet marque l'ACTION (liens,
       focus, champs actifs) — jamais un aplat plein sur toute une bande ;
     — la couleur des statuts vit dans le point et dans un fond très dilué :
       teinté, jamais saturé, et lisible même imprimé en noir et blanc ;
     — boutons : hauteur fixe, soulèvement de 1 px au survol, enfoncement au
       clic, anneau de focus violet — un bouton doit céder sous le doigt ;
     — chiffres tabulaires : les colonnes de prix s'alignent exactement.
   ============================================================================= */

/* ------------------------------- Fontes ----------------------------------- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('../polices/archivo-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../polices/fraunces-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* ------------------------------- Variables -------------------------------- */
:root {
    /* ENCRE INDIGO : indigo nuit, profond mais jamais noir. Il porte
       jamais noir. Il porte les titres, les boutons pleins et le bandeau —
       la marque reste une couleur, pas une absence de couleur. */
    --noir:        #1e1c4e;
    --encre:       #2b2965;
    --texte:       #4a4770;
    --gris:        #6f6c8f;   /* texte secondaire */
    --gris-clair:  #9a97b5;   /* mentions légères, pagination */
    --bordure:     #e4e2f2;   /* le filet : lavande, jamais gris froid */
    --bordure-fort:#cfcce7;

    --fond:        #fcfbff;   /* papier lavande : les cartes blanches reposent dessus */
    --fond-2:      #f6f5fc;   /* surfaces à peine teintées */
    --fond-3:      #efedf8;
    --fond-4:      #e6e3f3;

    /* DEUX ACCENTS, DEUX MÉTIERS — c'est la règle de la palette :
       • la mangue (--accent) parle de l'ÉTAT et de la MARQUE : repère actif
         de navigation, compteur, prix mis en avant, lot prêt à commander ;
       • le violet (--accent-lien) parle d'ACTION : liens de texte, focus
         clavier, champ actif, option choisie. Tout ce qui se clique.
       Teintes lumineuses et rondes, choisies pour rester agréables longtemps :
       aucun aplat saturé, chaque accent reste rare et donc lisible. */
    --accent:      #d96f1e;
    --rose:        #d96f1e;
    --rose-fonce:  #b2570a;
    --rose-doux:   #fdeee0;   /* fonds d'alerte et de sceau */
    --accent-lien:       var(--violet);   /* #6d4aff, déclaré avec les états */
    --accent-lien-fonce: #5433d6;
    --mauve:       #2b2965;
    --mauve-doux:  #f1effb;

    /* États : teintes cousins des accents, en texte, point ou filet de 3 px —
       jamais en fond plein. */
    --vert:        #2f7d4f;
    --vert-doux:   #e9f5ec;
    --orange:      #9c6a1c;
    --orange-doux: #fbf3e2;
    --bleu:        #41689e;
    --bleu-doux:   #ecf2fa;
    --violet:      #6d4aff;
    --violet-doux: #efebff;
    --teal:        #2e7d74;
    --teal-doux:   #eaf4f2;
    --rouge:       #c04a54;
    --rouge-doux:  #fceff0;

    /* Rayons généreux : c'est le geste qui adoucit toute l'interface d'un coup —
       cartes, champs, boutons et pastilles perdent leurs angles secs. */
    --r:           12px;
    --r-petit:     9px;
    --r-pilule:    999px;
    --r-rond:      999px;

    /* Ombres teintées d'indigo, très diffuses : elles posent les cartes sans
       jamais peser sur la page. */
    --ombre-filet:    0 1px 2px rgba(30, 28, 78, .05);
    --ombre-carte:    0 1px 2px rgba(30, 28, 78, .04), 0 14px 30px -20px rgba(30, 28, 78, .35);
    --ombre-forte:    0 16px 40px -18px rgba(30, 28, 78, .3);

    --tete-h:      104px;

    --police: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --police-titre: 'Fraunces', "Iowan Old Style", "Palatino Linotype", Palatino,
              Georgia, "Times New Roman", serif;

    /* Courbe unique des micro-animations : départ vif, arrivée posée. */
    --sortie: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------- Base ---------------------------------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.6;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    /* Chiffres de largeur fixe : les colonnes de prix et de quantités
       s'alignent exactement, comme dans un vrai back-office. */
    font-variant-numeric: tabular-nums;
    /* Aucun élément ne doit pouvoir élargir la page : une seule bande qui
       dépasse décalerait tout le site au téléphone. */
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--encre); text-decoration: none; }
a:hover { opacity: .78; }

/* Les liens de TEXTE prennent la couleur interactive : un lien noir se fond
   dans le paragraphe, un lien violet se trouve d'un coup d'œil. Le
   soulignement reste discret (1 px, teinté) — lisible sans faire pédale. */
.lien,
a.petit {
    color: var(--accent-lien);
}
.lien {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(109, 74, 255, .4);
}
.lien:hover,
a.petit:hover {
    color: var(--accent-lien-fonce);
    text-decoration-color: currentColor;
    opacity: 1;
}

/* Titre cliquable d'une ligne de tableau : la couleur seule suffit à dire « on
   peut ouvrir » ; le soulignement n'apparaît qu'au survol, pour que la liste
   reste nette sur dix lignes d'affilée. */
.lien-titre { color: var(--accent-lien); }
.lien-titre:hover {
    color: var(--accent-lien-fonce);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    opacity: 1;
}

/* Les titres repassent en Fraunces : la serif douce donne un ton éditorial
   et chaleureux qui suit le papier lavande, pendant que l'interface reste en
   Archivo. Les GRANDS CHIFFRES (statistiques, totaux, jauges) le partagent. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--noir); line-height: 1.2; }
h1 { font-family: var(--police-titre); font-size: 34px; font-weight: 700; line-height: 1.08; letter-spacing: -.012em; }
h2 { font-family: var(--police-titre); font-size: 25px; font-weight: 700; line-height: 1.14; letter-spacing: -.008em; }
h3 { font-size: 16.5px; letter-spacing: -.01em; }
h4 { font-size: 13px; letter-spacing: -.005em; }
p  { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--bordure); margin: 14px 0; }

/* Repère de section : un filet, puis un mot en capitales espacées. C'est le
   seul endroit où l'accent mangue touche du texte courant. */
.oeil {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--accent);
    margin-bottom: 12px;
}
.oeil::before { content: ""; width: 26px; height: 1px; background: currentColor; }

.ic { flex: 0 0 auto; vertical-align: -3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cache { display: none !important; }
.muet { color: var(--gris); }
.petit { font-size: 12.5px; }
.gras { font-weight: 700; }
.centre { text-align: center; }
.droite { text-align: right; }
.mt-8 { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-24 { margin-top: 24px; }
.mb-14 { margin-bottom: 14px; }
.ligne { display: flex; align-items: center; }
.retrait { width: 16px; display: inline-block; }

/* Une ancre n'est jamais cachée sous l'en-tête collant. */
[id] { scroll-margin-top: calc(var(--tete-h) + 14px); }

/* ------------------------------- Conteneur ------------------------------- */
.conteneur { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.conteneur--large { max-width: 1420px; }

/* --------------------------- Bandeau supérieur ---------------------------- */
.bandeau {
    background: var(--noir);
    color: rgba(255, 255, 255, .8);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.bandeau-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 34px;
    flex-wrap: wrap;
}
.bandeau-info { display: inline-flex; align-items: center; gap: 7px; }
.bandeau-info .ic { color: rgba(255, 255, 255, .55); }
.bandeau-liens { display: inline-flex; gap: 18px; }
.bandeau a { color: #fff; text-transform: uppercase; letter-spacing: .12em; }
.bandeau a:hover { text-decoration: underline; opacity: 1; }

/* -------------------------------- En-tête -------------------------------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Le papier du site, légèrement translucide : le contenu qui défile reste
       perceptible sous la barre, sans jamais gêner la lecture. */
    background: rgba(252, 251, 255, .94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--bordure);
}
.entete-haut { display: flex; align-items: center; gap: 26px; min-height: 72px; }
.marque { display: flex; flex-direction: column; line-height: 1; }
.marque-nom { font-size: 25px; font-weight: 800; letter-spacing: .16em; color: var(--noir); }
.marque-nom span {
    background: var(--noir);
    color: #fff;
    padding: 2px 7px 3px;
    margin-left: 4px;
    border-radius: var(--r-petit);
    letter-spacing: .1em;
}
.marque-slogan {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gris);
    margin-top: 4px;
}
.entete-nav { display: flex; gap: 24px; margin-left: 10px; }
.entete-nav a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--encre);
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color .15s var(--sortie), color .15s var(--sortie);
}
.entete-nav a.actif,
/* Survole de la navigation : la couleur interactive annonce « ceci se clique »,
   pendant que le soulignement mangue reste réservé à la page où l'on est. */
.entete-nav a:hover { border-bottom-color: var(--accent-lien); color: var(--noir); opacity: 1; }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.lien-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--encre);
    position: relative;
    padding: 6px 2px;
    font-family: inherit;
}
.lien-action:hover { color: var(--noir); opacity: 1; }
.compteur, .pastille {
    background: var(--accent);
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--r-rond);
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.pastille--pret { background: var(--orange); }

/* -------------------------- Menu du compte -------------------------------- */
.menu-utilisateur { position: relative; }
.menu-liste {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #fff;
    border: 1px solid var(--bordure);
    min-width: 216px;
    padding: 8px;
    border-radius: var(--r);
    box-shadow: var(--ombre-forte);
    z-index: 60;
}
.menu-liste a { display: block; padding: 9px 12px; font-size: 13.5px; border-radius: var(--r); }
.menu-liste a:hover { background: var(--fond-3); color: var(--noir); opacity: 1; }
.menu-titre {
    display: block;
    padding: 7px 12px 10px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gris);
}

/* ------------------------------- Boutons ----------------------------------
   Un bouton tient sur une hauteur fixe (38, 40, 44 ou 54 px) : c'est ce qui
   aligne une barre d'actions, quel que soit le nombre de mots. Au survol il se
   soulève d'un pixel et gagne une ombre portée ; au clic il s'enfonce. Aucun
   dégradé, aucune ombre colorée : la forme et le contraste suffisent.
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 20px;
    background: var(--noir);
    color: #fff;
    border: 1px solid var(--noir);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 3px rgba(30, 28, 78, .2);
    transition: background .15s var(--sortie), border-color .15s var(--sortie),
                color .15s var(--sortie), transform .15s var(--sortie), box-shadow .15s var(--sortie);
}
.btn:hover {
    background: #27265c;
    border-color: #27265c;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 20px -12px rgba(30, 28, 78, .55);
    opacity: 1;
}
.btn:active {
    background: #000;
    border-color: #000;
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(12, 10, 40, .35);
}
.btn:focus-visible { outline: 2px solid var(--accent-lien); outline-offset: 3px; }
.btn .ic { opacity: .9; }
.btn--large { min-height: 54px; padding: 0 28px; font-size: 12.5px; letter-spacing: .1em; }
.btn--serre { min-height: 38px; padding: 0 14px; font-size: 11px; letter-spacing: .07em; }
.btn--petit { min-height: 40px; padding: 0 15px; font-size: 11px; letter-spacing: .07em; }
.btn--bloc { width: 100%; }
.btn--ligne { background: #fff; color: var(--encre); border-color: var(--bordure-fort); box-shadow: 0 1px 2px rgba(30, 28, 78, .06); }
.btn--ligne:hover { background: #fff; border-color: var(--noir); color: var(--noir); box-shadow: 0 8px 18px -14px rgba(30, 28, 78, .7); }
.btn--ligne:active { background: var(--fond-3); border-color: var(--noir); box-shadow: none; }
.btn--accent { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(30, 28, 78, .2); }
.btn--accent:hover { background: var(--rose-fonce); border-color: var(--rose-fonce); }
.btn--accent:active { background: #b2570a; border-color: #b2570a; }
/* Alias explicite du bouton plein : la barre de l'en-tête l'écrit « btn--noir ». */
.btn--noir { background: var(--noir); border-color: var(--noir); }
.btn--noir:hover { background: #27265c; border-color: #27265c; }
.btn--rouge { background: var(--rouge); border-color: var(--rouge); }
.btn--rouge:hover { background: #a83e47; border-color: #a83e47; }
.btn--vert  { background: var(--vert);  border-color: var(--vert); }
.btn--vert:hover { background: #276a44; border-color: #276a44; }
/* Lien d'échappement : ni cadre ni fond, un simple filet qui se souligne. */
.btn--texte {
    background: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--encre);
    padding: 0 4px;
    min-height: 38px;
    text-decoration: underline;
    text-decoration-color: var(--bordure-fort);
    text-underline-offset: 4px;
}
.btn--texte:hover { background: none; color: var(--accent); text-decoration-color: currentColor; transform: none; box-shadow: none; }
.btn:disabled, .btn[disabled], .btn.charge { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.charge { cursor: progress; }
.btn-groupe { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------- Alertes ---------------------------------- */
.alerte {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--noir);
    border-radius: var(--r-petit);
    background: #fff;
    font-size: 13.5px;
    box-shadow: var(--ombre-filet);
    margin-bottom: 12px;
}
.alerte .ic { margin-top: 2px; }
.alerte--succes  { border-left-color: var(--vert);   background: var(--vert-doux); }
.alerte--erreur  { border-left-color: var(--rouge);  background: var(--rouge-doux); }
.alerte--info    { border-left-color: var(--bleu);   background: var(--bleu-doux); }
.alerte--attention { border-left-color: var(--orange); background: var(--orange-doux); }
/* Fermeture des messages : un bouton rond discret, et une sortie en fondu
   quand la disparition automatique se déclenche. */
.alerte-fermer {
    margin-left: auto;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .55;
}
.alerte-fermer:hover { opacity: 1; background: rgba(30, 28, 78, .07); }
.alerte.part { opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--sortie), transform .35s var(--sortie); }

/* -------------------------------- Cartes ----------------------------------
   Une carte, c'est un filet d'un pixel, un rayon de 3 px et une ombre si
   diffuse qu'on ne la voit pas : elle pose l'élément sans le décorer.
   ------------------------------------------------------------------------- */
.carte {
    border: 1px solid var(--bordure);
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--ombre-carte);
    margin-bottom: 20px;
    overflow: hidden;
}
.carte-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bordure);
    background: #fff;
}
.carte-entete h2, .carte-entete h3 { font-size: 15px; letter-spacing: -.005em; }
.carte-corps { padding: 20px; }
.carte-pied {
    padding: 15px 20px;
    border-top: 1px solid var(--bordure);
    background: var(--fond-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.bloc-libelle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gris);
    display: block;
    margin-bottom: 10px;
}

/* ------------------------------- Sections --------------------------------- */
.section { padding: 44px 0; border-top: 1px solid var(--bordure); }
.section-tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.section-tete h2 { font-size: 29px; }
.section-tete p { color: var(--gris); margin: 8px 0 0; font-size: 14px; max-width: 62ch; }

/* ------------------------------- Étiquettes -------------------------------
   Un fond teinté très dilué ET un point de couleur : le statut se lit d'un
   coup d'œil, sans qu'aucune teinte ne crie. Le point garde le ton plein, donc
   le statut reste identifiable même imprimé en noir et blanc.
   ------------------------------------------------------------------------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 5px 10px;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r-petit);
    background: var(--fond-2);
    color: var(--texte);
    white-space: nowrap;
}
.tag::before {
    content: "";
    width: 5px; height: 5px; flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}
.tag--attente { color: var(--orange); background: var(--orange-doux); border-color: #ecdfc4; }
.tag--info    { color: var(--bleu);   background: var(--bleu-doux);   border-color: #dbe6f0; }
.tag--pret    { color: var(--accent); background: var(--rose-doux);   border-color: #f0d9ca; }
.tag--achat   { color: #8e4585;       background: #f9edf7;            border-color: #eedaeb; }
.tag--transit { color: var(--teal);   background: var(--teal-doux);   border-color: #d8ebe8; }
.tag--livre   { color: var(--vert);   background: var(--vert-doux);   border-color: #d3e8db; }
.tag--annule  { border-color: var(--bordure); color: var(--gris-clair); background: var(--fond-2); }
.tag--neutre  { border-color: var(--bordure); color: var(--gris);       background: var(--fond-2); }

/* ------------------------------- Formulaires ------------------------------ */
.champ { margin-bottom: 18px; }
.champ > label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--encre);
    margin-bottom: 7px;
}
.champ > label em {
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gris);
    margin-left: 4px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], input[type="datetime-local"], input[type="date"],
select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--encre);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(30, 28, 78, .04);
    transition: border-color .15s var(--sortie), box-shadow .15s var(--sortie);
}
input:hover, select:hover, textarea:hover { border-color: var(--gris-clair); }
/* Le champ actif prend la couleur interactive (bleu pétrole) : l'anneau dit
   « vous écrivez ici » pendant que la bordure rouge d'un champ invalide reste
   visible même quand il a le focus. */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-lien);
    box-shadow: 0 0 0 3px rgba(109, 74, 255, .18);
}
.champ.invalide input:focus, .champ.invalide select:focus, .champ.invalide textarea:focus {
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(192, 74, 84, .14);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--fond-3); color: var(--gris); }
textarea { min-height: 96px; resize: vertical; }
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                      linear-gradient(135deg, var(--gris) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
.champ .aide { display: block; font-size: 12.5px; color: var(--gris); margin-top: 6px; }
.champ .erreur { display: block; font-size: 12.5px; color: var(--rouge); margin-top: 6px; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--rouge);    box-shadow: 0 0 0 3px rgba(192, 74, 84, .12); }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.aide-prix { font-size: 12.5px; color: var(--gris); margin-top: 7px; }

/* --------------------------- Dépôt d'une image ---------------------------- */
.depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 30px 18px;
    border: 1px dashed var(--bordure-fort);
    border-radius: var(--r);
    background: var(--fond-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s var(--sortie), background .15s var(--sortie);
}
.depot:hover { border-color: var(--noir); background: #fff; }
.depot .ic { color: var(--gris); }
.depot b { font-size: 13.5px; }
.depot span { font-size: 12.5px; color: var(--gris); }
.apercu { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.apercu-figure { width: 132px; margin: 0; }
.apercu-figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--bordure); border-radius: var(--r-petit); }
.apercu-figure figcaption { font-size: 11.5px; color: var(--gris); margin-top: 5px; }

/* ------------------------- Grille de vignettes ----------------------------
   Une vignette de catalogue : la photo porte le propos, le texte se tient
   dessous, en trois lignes courtes. Aucun cadre coloré, aucun badge criard.
   ------------------------------------------------------------------------- */
.grille-vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 28px 20px;
}
/* Comme pour .panneau-grille : sans min-width, une carte au contenu dense
   (le panneau du lot) empêchait la piste « 1fr » de rétrécir sous son
   minimum et faisait déborder la page sur les écrans de 320 px. */
.grille-vignettes > * { min-width: 0; }
.vignette { display: block; }
.vignette-image {
    position: relative;
    background: var(--fond-2);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    box-shadow: var(--ombre-filet);
    transition: border-color .2s var(--sortie), box-shadow .2s var(--sortie);
}
.vignette:hover .vignette-image { border-color: var(--bordure-fort); box-shadow: var(--ombre-carte); }
.vignette-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sortie); }
.vignette:hover .vignette-image img { transform: scale(1.025); }
.vignette-sans-photo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gris-clair);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.vignette-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(30, 28, 78, .92);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 5px 8px;
    border-radius: var(--r-petit);
}
.vignette-badge--noir { background: var(--accent); }
.vignette-infos { padding: 11px 2px 0; }
.vignette-titre {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--encre);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.vignette-variante { font-size: 11px; color: var(--gris); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.vignette-prix { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; }
.vignette-prix .prix { font-size: 17px; font-weight: 800; color: var(--noir); letter-spacing: -.01em; }
.vignette-prix .prix-usd { font-size: 12px; color: var(--gris); }
.vignette-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* ------------------------------- Montants --------------------------------- */
.montant-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.montant-ligne:last-child { border-bottom: 0; }
.montant-ligne span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.montant-ligne b { font-size: 15px; color: var(--noir); }
.montant-ligne--total b { font-family: var(--police-titre); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.prix-barre { color: var(--gris-clair); text-decoration: line-through; font-size: 12px; }

/* ---------------------- Jauge de remplissage d'un lot ---------------------
   La barre est un instrument de mesure : piste creusée, remplissage net,
   chiffres alignés au-dessus. La mangue ne s'allume qu'au seuil atteint.
   ------------------------------------------------------------------------- */
.jauge { margin-top: 12px; }
.jauge-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 12px; flex-wrap: wrap; }
.jauge-tete b { font-family: var(--police-titre); font-size: 19px; font-weight: 600; color: var(--noir); letter-spacing: -.01em; white-space: nowrap; margin-left: auto; }
.jauge-piste {
    height: 7px;
    background: var(--fond-4);
    border-radius: var(--r-rond);
    box-shadow: inset 0 1px 2px rgba(30, 28, 78, .14);
    margin-top: 9px;
    overflow: hidden;
}
.jauge-remplie { height: 100%; border-radius: var(--r-rond); background: var(--noir); transition: width .35s var(--sortie); }
.jauge-remplie--pret { background: var(--accent); }
.jauge-note { font-size: 11.5px; color: var(--gris); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
/* Les deux bornes de la fourchette, juste sous les chiffres de remplissage :
   le lot est mûr au seuil, complet au plafond. */
.jauge-bande { font-size: 11.5px; color: var(--gris); margin-top: 5px; }
.jauge-bande b { color: var(--noir); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------- État du dernier lot (accueil connecté) ------------------
   Deux chiffres face à face : ce qui est déjà VALIDÉ (l'argent encaissé qui
   compte vers le seuil) et ce qui est EN ATTENTE DE VALIDATION (paiement
   transmis, vérification en cours). La clarté plutôt que la décoration.
   ------------------------------------------------------------------------- */
.section--serree { padding: 30px 0; }
.lot-etat { border-left: 3px solid var(--accent); }
.lot-etat-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lot-etat-cell {
    border-radius: var(--r-petit);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lot-etat-cell--ok      { background: var(--vert-doux); border: 1px solid #d3e8db; }
.lot-etat-cell--attente { background: var(--orange-doux); border: 1px solid #f0e3c8; }
.lot-etat-libelle { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--noir); display: flex; align-items: center; gap: 6px; }
.lot-etat-valeur { font-family: var(--police-titre); font-size: 27px; font-weight: 600; color: var(--noir); line-height: 1; }
.lot-etat-note { font-size: 11.5px; color: var(--gris); }
.lot-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.lot-info {
    border: 1px solid var(--bordure);
    border-radius: var(--r-petit);
    padding: 10px 12px;
    background: var(--fond-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lot-info-valeur { font-family: var(--police-titre); font-size: 17px; font-weight: 600; color: var(--noir); }
.lot-info-cle { font-size: 11px; color: var(--gris); display: flex; align-items: center; gap: 5px; }
@media (max-width: 640px) {
    .lot-etat-colonnes { grid-template-columns: 1fr; }
    .lot-info-valeur { font-size: 15.5px; }
}

/* --------------------- Contenu d'un lot (ce qu'on achète) -----------------
   Un registre, pas une galerie : nom de l'article, prix, date. Trois colonnes
   alignées au filet, chiffres en largeur fixe. La ligne du client lui-même
   porte un filet mangue à gauche — la seule marque de couleur de la liste.
   ------------------------------------------------------------------------- */
/* La largeur utile dépend de la carte qui accueille la liste (260 px dans une
   grille à deux colonnes, 700 px sur une fiche de commande). Une requête de
   conteneur adapte donc la ligne à la place disponible ; le navigateur qui ne
   la connaît pas garde la disposition empilée, qui reste juste — jamais serrée. */
.articles-lot {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--bordure);
    container-type: inline-size;
}
.articles-lot li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    padding: 11px 0 11px 10px;
    border-bottom: 1px solid var(--bordure);
}
.articles-lot li.est-moi {
    border-left: 3px solid var(--accent);
    padding-left: 11px;
    background: linear-gradient(90deg, var(--rose-doux), rgba(255, 255, 255, 0) 62%);
}
.articles-lot-nom { flex: 1 1 100%; font-size: 14.5px; color: var(--noir); font-weight: 500; letter-spacing: -.005em; }
.articles-lot-vous {
    font-style: normal;
    display: inline-block;
    margin-left: 7px;
    padding: 1px 6px;
    border: 1px solid var(--accent);
    border-radius: var(--r-petit);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    vertical-align: 1px;
}
.articles-lot-prix {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.articles-lot-prix b {
    font-family: var(--police-titre);
    font-size: 16px;
    font-weight: 600;
    color: var(--noir);
    letter-spacing: -.01em;
}
.articles-lot-prix small { font-size: 11px; color: var(--gris-clair); }
.articles-lot-date {
    font-size: 11px;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lot-legende {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--gris);
}
.lot-legende svg { flex: none; margin-top: 2px; }

/* Carte large : nom, prix et date tiennent sur une seule ligne, alignés au
   filet — un registre. Le prix passe au-dessus de son équivalent en dollars. */
@container (min-width: 430px) {
    .articles-lot li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; }
    .articles-lot-nom { flex: none; }
    .articles-lot-prix { margin-left: 0; display: block; text-align: right; }
    .articles-lot-prix b { display: block; }
    .articles-lot-prix small { display: block; }
    .articles-lot-date { min-width: 74px; text-align: right; }
}


/* ------------------------------- Frise suivi ------------------------------
   Le parcours d'un colis, du dépôt de la photo à la remise : un filet
   vertical, des points, et trois états seulement — fait, en cours, à venir.
   ------------------------------------------------------------------------- */
.frise { list-style: none; margin: 0; padding: 0; }
.frise-etape { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
.frise-etape:last-child { padding-bottom: 0; }
.frise-puce { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.frise-point {
    width: 32px; height: 32px;
    border: 1px solid var(--bordure-fort);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    color: var(--gris-clair);
    flex: 0 0 auto;
}
.frise-trait { flex: 1 1 auto; width: 1px; background: var(--bordure); min-height: 16px; }
.frise-etape.fait .frise-point { border-color: var(--vert); color: var(--vert); }
.frise-etape.encours .frise-point { border-color: var(--noir); color: #fff; background: var(--noir); }
.frise-etape.encours .frise-texte b { color: var(--noir); }
.frise-texte b { display: block; font-size: 14px; }
.frise-texte span { font-size: 12.5px; color: var(--gris); }
.frise-etape.a_venir .frise-texte b { color: var(--gris); font-weight: 600; }

/* ------------------------------- Tableaux ---------------------------------
   Un tableau de gestion : en-tête en capitales, lignes séparées d'un filet,
   survol à peine teinté. Les montants restent alignés à droite.
   ------------------------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tableau th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--gris);
    padding: 10px;
    border-bottom: 1px solid var(--bordure-fort);
    white-space: nowrap;
}
.tableau td { padding: 13px 10px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tr:dernier td, .tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--fond-2); }
.tableau .miniature { width: 48px; height: 64px; object-fit: cover; border: 1px solid var(--bordure); border-radius: var(--r-petit); }
.tableau .cellule-produit { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.tableau-enveloppe { overflow-x: auto; }

/* La barre de l'espace client devient une bande horizontale au téléphone : sa
   barre de défilement native (épaisse, grise) cassait le filet, on la masque.
   Le défilement reste entier, au doigt comme à la molette. */
.espace-nav { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.espace-nav::-webkit-scrollbar { height: 0; width: 0; }

/* Un tableau qui reste un tableau (back-office) garde au contraire une barre
   fine : c'est l'indice honnête qu'il reste des colonnes à droite. */
.tableau-enveloppe { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--bordure-fort) transparent; }
.tableau-enveloppe::-webkit-scrollbar { height: 7px; }
.tableau-enveloppe::-webkit-scrollbar-track { background: transparent; }
.tableau-enveloppe::-webkit-scrollbar-thumb { background: var(--bordure-fort); border-radius: var(--r-rond); }
.tableau-enveloppe::-webkit-scrollbar-thumb:hover { background: var(--gris-clair); }

/* ------------------------------- Statistiques ------------------------------
   Un chiffre, son libellé, une note : c'est tout. Le grand chiffre est en
   Fraunces pour qu'un tableau de bord se lise d'un coup d'œil.
   ------------------------------------------------------------------------- */
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.stat { border: 1px solid var(--bordure); border-radius: var(--r); padding: 18px; background: #fff; box-shadow: var(--ombre-filet); }
.stat-libelle { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); display: flex; align-items: center; gap: 7px; }
.stat-valeur { font-family: var(--police-titre); font-size: 31px; font-weight: 600; color: var(--noir); margin-top: 8px; line-height: 1; letter-spacing: -.025em; }
.stat-note { font-size: 11.5px; color: var(--gris); margin-top: 6px; }
/* Un repère de 3 px sur le bord gauche suffit à distinguer la carte, sans
   transformer le tableau de bord en arc-en-ciel. */
.stat--accent { border-left: 3px solid var(--accent); }
.stat--pret { border-left: 3px solid var(--orange); }

/* -------------------------------- Vide ------------------------------------ */
.vide { border: 1px dashed var(--bordure-fort); border-radius: var(--r); padding: 52px 22px; text-align: center; color: var(--gris); background: var(--fond-2); }
.vide h3 { margin-bottom: 8px; color: var(--encre); font-family: var(--police-titre); font-size: 22px; font-weight: 600; }
.vide .ic { color: var(--gris-clair); margin-bottom: 12px; }
.vide p { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ---------------------------- Espace (sidebar) ---------------------------- */
.espace { display: grid; grid-template-columns: 240px 1fr; gap: 30px; padding: 30px 20px 54px; align-items: start; }
/* Un élément de grille refuse par défaut d'être plus étroit que son contenu :
   sans min-width, la bande de navigation élargissait la page entière au lieu
   de défiler dans sa propre boîte, ce qui faisait apparaître une barre de
   défilement horizontale sur tout le site au téléphone. */
.espace > * { min-width: 0; }
.espace-nav {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 14px 12px;
    background: #fff;
    box-shadow: var(--ombre-filet);
    position: sticky;
    top: calc(var(--tete-h) + 14px);
}
.espace-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    font-size: 13.5px;
    border-radius: var(--r);
    color: var(--encre);
    transition: background .15s var(--sortie), color .15s var(--sortie);
}
.espace-nav a:hover { background: var(--fond-3); color: var(--noir); opacity: 1; }
.espace-nav a.actif { background: var(--fond-3); color: var(--noir); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.espace-nav a .pastille { margin-left: auto; }
.espace-nav hr { margin: 12px 0; }
.espace-nav-titre { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); padding: 0 8px 12px; }
.espace-nav--admin { border-color: var(--noir); }
.espace-nav--admin .espace-nav-titre { color: var(--noir); }
.espace-rappel { margin-top: 16px; padding: 14px; border-top: 1px solid var(--bordure); }
.espace-rappel-titre { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--noir); }
.espace-rappel p { font-size: 12.5px; color: var(--gris); margin: 7px 0 0; }
.espace-corps > *:last-child { margin-bottom: 0; }

/* --------------------------------- Héros ----------------------------------
   À gauche la promesse, à droite deux commandes réelles : ce que le client
   obtiendra, avec sa photo, son prix et son statut. Les deux colonnes sont
   centrées l'une sur l'autre — pas de vide sous les boutons.
   Le héros est posé sur un fond légèrement teinté, souligné d'un filet mangue :
   c'est la seule « couverture » du site, et le seul endroit où la couleur
   occupe vraiment la page.
   ------------------------------------------------------------------------- */
.hero {
    padding: 46px 40px 44px;
    margin-top: 26px;
    background: var(--fond-2);
    border: 1px solid var(--bordure);
    border-top: 2px solid var(--accent);
    border-radius: var(--r);
}
.hero-grille { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
.hero-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--accent);
    margin-bottom: 18px;
}
.hero-etiquette::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.hero h1 { font-size: clamp(38px, 4.6vw, 57px); line-height: 1.03; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-texte { font-size: 15.5px; color: var(--texte); margin: 18px 0 24px; max-width: 48ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Liste de points à coche — page de commande, de paiement et de connexion.
   La coche est posée dans un disque mangue très dilué : un repère, pas une
   décoration. */
.hero-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.hero-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--texte); }
.hero-points .ic {
    color: var(--accent);
    background: var(--rose-doux);
    border-radius: 50%;
    padding: 4px;
    margin-top: -1px;
}
.hero-vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hero-vignettes .vignette-image { box-shadow: var(--ombre-carte); }
.hero-vignettes .vignette-titre { font-size: 13.5px; }

/* ---------------------------- Étapes numérotées ---------------------------
   Quatre cartes, un numéro en Fraunces, une phrase. Les cartes se soulèvent
   une à une au survol : le seul mouvement de la page d'accueil.
   ------------------------------------------------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.etape {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 22px 20px 20px;
    position: relative;
    background: var(--fond-2);
    box-shadow: var(--ombre-filet);
    transition: transform .18s var(--sortie), box-shadow .18s var(--sortie), border-color .18s var(--sortie);
}
.etape:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); border-color: var(--bordure-fort); background: #fff; }
.etape-numero {
    font-family: var(--police-titre);
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--accent);
    display: block;
    margin-bottom: 14px;
}
.etape h3 { font-size: 16px; margin-bottom: 7px; }
.etape p { font-size: 13.5px; color: var(--gris); margin: 0; }
.etape-icone { position: absolute; top: 20px; right: 18px; color: var(--rose-doux); }

/* --------------------------- Fiche d'une commande ------------------------- */
.fiche { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: start; }
.fiche-image {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--fond-2);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: var(--ombre-carte);
}
.fiche-image img { width: 100%; height: 100%; object-fit: cover; }
.fiche-titre { font-family: var(--police-titre); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.fiche-sous { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.panneau-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; }
/* Un enfant de grille naît avec « min-width: auto » : il ne peut pas descendre
   sous la largeur de son contenu. Sans cette ligne, le tableau de 600 px de
   « Comment ça marche » imposait sa largeur à sa colonne et faisait déborder la
   page entière de 614 px sur un écran de 390. */
.panneau-grille > * { min-width: 0; }

/* ------------------------------- Onglets ---------------------------------- */
.onglets { display: flex; gap: 6px; border-bottom: 1px solid var(--bordure); margin-bottom: 20px; flex-wrap: wrap; }
.onglets a {
    padding: 11px 15px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--gris);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s var(--sortie), border-color .15s var(--sortie);
}
.onglets a:hover { color: var(--noir); opacity: 1; border-bottom-color: var(--bordure-fort); }
.onglets a.actif { color: var(--noir); border-bottom-color: var(--accent); }
.onglets .compteur { background: var(--rouge); }

/* Listes par état (commandes) : le compteur y est un repère de FILE DE TRAVAIL,
   pas une alerte — il reste donc sobre. « À valider » fait exception : c'est la
   seule file qui réclame une action immédiate, elle garde le rouge. */
.onglets--etats .compteur { background: var(--bordure-fort); color: var(--encre); }
.onglets--etats .onglet--action .compteur { background: var(--rouge); color: #fff; }
/* Deux barres à la suite (sections, puis états d'une liste) : la seconde remonte
   contre la première pour se lire comme un sous-niveau, pas comme une page. */
.onglets + .onglets--etats { margin-top: -10px; }

/* ------------------------------- Filtres ---------------------------------- */
.filtres { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filtres .champ { margin: 0; min-width: 172px; }

/* ------------------------------ Pagination --------------------------------
   Des cases de 36 px, chiffres tabulaires, la page courante en encre pleine.
   ------------------------------------------------------------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordure);
    border-radius: var(--r-petit);
    font-size: 13.5px;
    padding: 0 9px;
    transition: border-color .15s var(--sortie), background .15s var(--sortie);
}
.pagination a:hover { border-color: var(--noir); opacity: 1; }
.pagination .actif { background: var(--noir); color: #fff; border-color: var(--noir); }
.pagination .inactif { color: var(--gris-clair); }

/* --------------------------------- Pied ----------------------------------- */
.garanties {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--fond-2);
    margin-top: 44px;
    overflow: hidden;
}
.garantie { display: flex; gap: 13px; align-items: flex-start; padding: 20px; border-right: 1px solid var(--bordure); }
.garantie:last-child { border-right: 0; }
.garantie .ic { color: var(--accent); background: var(--rose-doux); border-radius: var(--r); padding: 8px; box-sizing: content-box; }
/* Une teinte par argument — quatre touches de couleur, jamais plus, toujours
   sur un carré pâle pour que les quatre repères restent alignés. */
.garantie:nth-child(2) .ic { color: var(--vert);   background: var(--vert-doux); }
.garantie:nth-child(3) .ic { color: var(--orange); background: var(--orange-doux); }
.garantie:nth-child(4) .ic { color: var(--bleu);   background: var(--bleu-doux); }
.garantie b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.garantie span { font-size: 12.5px; color: var(--gris); display: block; line-height: 1.5; }

.pied { margin-top: 0; border-top: 2px solid var(--accent); background: var(--fond-2); }
.pied-haut { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; padding: 48px 0 34px; }
.pied-titre { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gris); margin-bottom: 16px; display: block; }
.pied-marque { font-size: 21px; font-weight: 800; letter-spacing: .16em; color: var(--noir); display: block; margin-bottom: 12px; }
.pied-marque span { background: var(--noir); color: #fff; padding: 2px 7px 3px; margin-left: 4px; border-radius: var(--r-petit); }
.pied a { display: block; font-size: 13.5px; color: var(--texte); padding: 4px 0; }
.pied a:hover { color: var(--noir); text-decoration: underline; text-decoration-color: var(--bordure-fort); text-underline-offset: 3px; opacity: 1; }
.pied p { font-size: 13.5px; color: var(--gris); max-width: 44ch; }
.pied-contact { display: grid; gap: 11px; font-size: 13.5px; }
.pied-contact-ligne { display: flex; gap: 9px; align-items: flex-start; color: var(--texte); }
.pied-contact-ligne .ic { color: var(--gris); margin-top: 3px; flex: 0 0 auto; }
.pied-contact-ligne span { display: block; }
.pied-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pied-reseaux { display: flex; gap: 8px; margin-top: 18px; }
.pied-reseau {
    width: 40px; height: 40px;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    color: var(--noir);
    background: #fff;
    transition: border-color .15s var(--sortie), transform .15s var(--sortie);
}
.pied-reseau:hover { border-color: var(--noir); transform: translateY(-1px); opacity: 1; }
.pied-moyens-paiement { display: flex; flex-wrap: wrap; gap: 6px; }
.pied-moyens-paiement span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gris);
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r-petit);
    background: #fff;
    padding: 5px 9px;
}
.pied-bas {
    border-top: 1px solid var(--bordure);
    padding: 18px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 11.5px;
    color: var(--gris);
    flex-wrap: wrap;
}
.pied-bas nav { display: flex; gap: 16px; flex-wrap: wrap; }
.pied-bas a { display: inline; font-size: 11.5px; color: var(--gris); padding: 0; }
.pied-bas a:hover { color: var(--noir); opacity: 1; }

/* Bouton « retour en haut », discret, apparaît après un défilement */
.retour-haut {
    position: fixed;
    right: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 75;
    width: 46px; height: 46px;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r-rond);
    /* Légèrement translucide : le bouton flotte au-dessus du contenu, il ne
       doit jamais masquer un prix ou une date qu'on est venu lire. */
    background: rgba(252, 251, 255, .92);
    backdrop-filter: blur(4px);
    color: var(--noir);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ombre-forte);
}
.retour-haut.visible { display: flex; }
.retour-haut:hover { border-color: var(--noir); }

/* ------------------------------ Barre mobile ------------------------------ */
.barre-mobile {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(252, 251, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bordure-fort);
    z-index: 70;
}
.barre-mobile a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 2px 9px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris);
}
.barre-mobile a.actif { color: var(--noir); }
.barre-mobile a.actif .ic { color: var(--accent); }

/* --------------------------- Outils de l'équipe ---------------------------
   La bande de travail du back-office : filtres à gauche, action à droite,
   posée sur un fond à peine teinté pour la distinguer des fiches.
   ------------------------------------------------------------------------- */
.barre-outils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--fond-2);
    margin-bottom: 20px;
}
.barre-outils form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.encart {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 16px;
    background: var(--fond-2);
    font-size: 13.5px;
}
.encart h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 9px; }
.encart--pret { border-left: 3px solid var(--accent); background: #fff; box-shadow: var(--ombre-filet); }
.encart--pret h4 { color: var(--accent); }
.ligne-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ligne-actions form { display: inline-flex; gap: 6px; align-items: center; }
.ligne-actions input, .ligne-actions select { width: auto; min-width: 134px; min-height: 40px; padding: 8px 11px; font-size: 13.5px; }
.puce-liste { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--gris); align-items: center; }
.puce-liste b { color: var(--noir); }

/* ------------------------- Prochaine action du client ---------------------
   Une seule chose à faire, dite en clair, avec le bouton qui va avec : c'est ce
   qui remplace l'empilement d'étiquettes que le client devait interpréter.
   ------------------------------------------------------------------------- */
.banniere-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 20px;
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    background: var(--fond-2);
}
.banniere-action-titre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--accent);
    margin-bottom: 7px;
}
.banniere-action p { margin: 0; font-size: 14.5px; color: var(--texte); max-width: 72ch; }
.banniere-action .btn { flex: 0 0 auto; }

/* État d'une commande côté client : une phrase, puis l'étiquette technique. */
.etat-client b { font-size: 13.5px; font-weight: 600; display: block; }
.etat-client-tag { display: inline-block; margin-top: 7px; }

/* ------------------------- Tâches de l'équipe -----------------------------
   Le tableau de bord de l'équipe est une liste de choses à faire, pas un
   tableau de chiffres : chaque tâche porte son bouton, et rien d'autre.
   ------------------------------------------------------------------------- */
.taches { display: grid; gap: 12px; margin-bottom: 22px; }
.tache {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--bordure-fort);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--ombre-filet);
}
.tache--urgent { border-left-color: var(--accent); background: var(--fond-2); }
.tache--calme  { border-left-color: var(--vert); }
.tache-texte { min-width: 0; }
.tache-texte b { display: block; font-size: 15px; margin-bottom: 3px; color: var(--noir); }
.tache-texte span { font-size: 13.5px; color: var(--gris); }
.tache-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------- Adaptation ------------------------------- */
@media (max-width: 1080px) {
    .hero-grille { grid-template-columns: 1fr; gap: 34px; }
    .hero-texte { max-width: 62ch; }
    .etapes { grid-template-columns: 1fr 1fr; }
    .panneau-grille, .fiche { grid-template-columns: 1fr; }
    .fiche-image { max-width: 360px; }
}

@media (max-width: 860px) {
    :root { --tete-h: 88px; }
    .entete-nav { display: none; }
    .entete-haut { gap: 12px; min-height: 56px; }
    .entete-actions .lien-action-texte { display: none; }
    /* La barre de navigation du bas est disponible sur TOUT téléphone, quel
       que soit l'écran : la navigation du haut est masquée dès 860 px, la barre
       du bas prend le relais au même point de rupture — jamais de page sans menu. */
    .barre-mobile { display: flex; }
    body { padding-bottom: 64px; }
    .retour-haut { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    body.avec-barre-collante .retour-haut { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
    body:not(.avec-barre-collante) .installation { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    .espace { grid-template-columns: 1fr; padding: 20px 16px 46px; gap: 20px; }
    .espace-nav { position: static; display: flex; gap: 6px; overflow-x: auto; align-items: center; padding: 8px; }
    /* Une file de travail du back-office garde ses colonnes lisibles et défile,
       plutôt que de tasser sept colonnes dans 350 px. */
    .tableau-enveloppe .tableau:not(.tableau-cartes) { min-width: 600px; }
    .espace-nav a { white-space: nowrap; }
    .espace-nav hr, .espace-rappel { display: none; }
    .espace-nav-titre { display: none; }
    .grille-champs { grid-template-columns: 1fr; }
    /* Le bandeau perd sa deuxième accroche : la première suffit, et c'est elle
       qui porte l'argument de vente. (Cibler .bandeau-info ne marchait pas :
       le dernier « span » du bandeau est la liste de liens, pas une info.) */
    .bandeau-inner > .bandeau-info:nth-child(2) { display: none; }
}

/* =============================================================================
   COMMANDER EN QUELQUES SECONDES — formulaire en étapes, barre d'action
   collante sur téléphone, moyens de paiement en pastilles, compteur de
   quantité, aide de conversion dollars vers Ariary.
   ============================================================================= */

/* Une étape est une carte : la tête porte le numéro et le titre, le corps les
   champs. Une fois l'étape remplie, sa tête se teinte et rappelle le résumé. */
.pas {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--ombre-filet);
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color .18s var(--sortie), box-shadow .18s var(--sortie);
}
.pas-tete {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--bordure);
    background: #fff;
}
.pas-numero {
    width: 28px; height: 28px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--noir); color: #fff;
    border-radius: var(--r-petit);
    font-size: 12px; font-weight: 700;
    letter-spacing: .02em;
}
.pas-titre { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--noir); }
.pas-note { margin-left: auto; font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .07em; text-align: right; }
.pas-corps { padding: 18px; }
.pas--accompli .pas-numero { background: var(--vert); }
.pas--accompli { box-shadow: none; }

/* Étape en cours, et résumé de ce qui a déjà été rempli */
.pas--active { border-color: var(--noir); box-shadow: var(--ombre-carte); }
.pas-recap { display: none; margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--vert);
             max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pas--accompli .pas-recap { display: block; }
.pas--accompli .pas-note { display: none; }
.pas-suite { display: none; margin-top: 18px; }

/* --------------------------- Blocs repliables ---------------------------
   « Où livrer » tient en une ligne quand nous connaissons déjà l'adresse, et
   le convertisseur dollars ne s'impose pas. Le contenu replié reste dans le
   formulaire : rien n'est perdu à l'envoi, c'est seulement caché à l'œil.
   ---------------------------------------------------------------------- */
details.retenue, details.repli {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--fond-2);
    margin-bottom: 16px;
}
details.retenue > summary, details.repli > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    color: var(--texte);
}
details.retenue > summary::-webkit-details-marker,
details.repli > summary::-webkit-details-marker { display: none; }
details.retenue > summary::marker,
details.repli > summary::marker { content: ''; }
details.retenue[open] > summary,
details.repli[open] > summary { border-bottom: 1px solid var(--bordure); }
.retenue-recap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.retenue-recap b {
    display: flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--noir); letter-spacing: -.005em;
}
.retenue-recap > span { font-size: 12.5px; color: var(--gris); line-height: 1.45; }
.retenue-lien {
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--accent-lien);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    white-space: nowrap;
}
details.retenue > .retenue-corps { padding: 16px 15px 2px; }
details.repli > *:not(summary) { padding-left: 15px; padding-right: 15px; }
details.repli > .conversion { padding-top: 15px; }
details.repli > .conversion-resultat { padding-bottom: 15px; }

/* Pastilles de choix (moyens de paiement) : tactiles, lisibles, sans menu */
.pastilles { display: flex; gap: 10px; flex-wrap: wrap; }
.pastille-choix { position: relative; flex: 1 1 172px; }
.pastille-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* > span : la règle ne vise QUE la case cliquable. Sans ce « > », elle
   s'appliquait aussi aux textes placés dedans (chacun recevait bordure, fond et
   padding : des cases dans la case) et étirait le rond de sélection. */
.pastille-choix > span {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 13px 15px;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ombre-filet);
    transition: border-color .15s var(--sortie), box-shadow .15s var(--sortie);
}
.pastille-choix > span:hover { border-color: var(--gris-clair); }
.pastille-choix .pastille-rond {
    width: 18px; height: 18px; min-height: 0; flex: 0 0 auto;
    border: 1px solid var(--bordure-fort);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
}
/* Sélection : le cadre s'épaissit d'un filet intérieur, le rond se remplit
   d'accent. Aucun fond coloré — la pastille reste lisible en noir et blanc. */
/* Option choisie : bordure, fond et puce dans la couleur interactive. Le
   client voit d'un coup d'œil ce qu'il a coché, sans ambiguïté, et la teinte
   douce reste un repère discret plutôt qu'un aplat criard. */
.pastille-choix input:checked + span {
    border-color: var(--accent-lien);
    box-shadow: 0 0 0 1px var(--accent-lien) inset, var(--ombre-filet);
    background: var(--violet-doux);
}
.pastille-choix input:checked + span .pastille-rond { border-color: var(--accent-lien); background: var(--accent-lien); }
.pastille-choix input:checked + span .pastille-rond::after { content: ""; width: 6px; height: 6px; background: #fff; border-radius: 50%; }
.pastille-choix input:focus-visible + span { outline: 2px solid var(--accent-lien); outline-offset: 2px; }
.pastille-choix > span > span:last-child { min-width: 0; }
.pastille-choix small { display: block; font-weight: 400; font-size: 11.5px; color: var(--gris); }

/* Compteur de quantité (− 1 +) : pas de clavier sur téléphone */
.compteur-quantite { display: inline-flex; align-items: center; border: 1px solid var(--bordure-fort); border-radius: var(--r); overflow: hidden; background: #fff; }
.compteur-quantite button {
    width: 52px; height: 52px;
    border: 0; background: #fff;
    font-size: 20px; line-height: 1; font-weight: 700;
    color: var(--encre); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s var(--sortie);
}
.compteur-quantite button:hover { background: var(--fond-3); }
.compteur-quantite button:active { background: var(--fond-4); }
.compteur-quantite input {
    width: 64px; height: 52px; min-height: 52px;
    border: 0; border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure);
    border-radius: 0;
    text-align: center; font-size: 15px; font-weight: 700;
}

/* Aide de conversion : « le prix sur SHEIN est en dollars ? » */
.conversion { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.conversion-resultat { font-size: 13.5px; color: var(--gris); margin-top: 7px; }
.conversion-resultat b { color: var(--noir); font-size: 16px; }

/* Encadré récapitulatif du prix, toujours sous les yeux */
.recap-prix { border: 1px solid var(--bordure); background: var(--fond-2); padding: 16px; border-radius: var(--r); }
.recap-prix-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--gris); }
.recap-prix-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordure); }
.recap-prix-total b { font-family: var(--police-titre); font-size: 28px; font-weight: 600; color: var(--noir); letter-spacing: -.025em; }
.recap-prix-total .usd { font-size: 12.5px; color: var(--gris); }

/* Barre d'action collante : sur téléphone, le bouton reste sous le pouce */
.barre-collante {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: rgba(252, 251, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bordure-fort);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: center;
    gap: 12px;
}
.barre-collante .montant { margin-right: auto; line-height: 1.2; }
.barre-collante .montant span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }
.barre-collante .montant b { font-family: var(--police-titre); font-size: 21px; font-weight: 600; color: var(--noir); letter-spacing: -.02em; }
.barre-collante .etape-dite { display: block; font-size: 11px; color: var(--gris); }
.barre-collante .btn { flex: 0 0 auto; }
.barre-collante small { display: block; font-size: 10.5px; color: var(--gris); }

/* --- Photo : UN seul gros bouton, un seul champ de fichier -----------------
   Le téléphone propose déjà la galerie ET l'appareil dans son sélecteur : un
   seul bouton suffit, et le choix reste celui du client. */
.photo-choix { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bouton-photo {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 132px; min-width: 0; padding: 18px 14px; text-align: center; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--encre);
    text-transform: uppercase; letter-spacing: .09em;
    background: #fff; border: 1px dashed var(--bordure-fort); border-radius: var(--r);
    transition: border-color .15s var(--sortie), background .15s var(--sortie);
}
.bouton-photo:hover { border-color: var(--noir); background: var(--fond-2); }
.bouton-photo .ic { color: var(--gris); }
.bouton-photo small { display: block; font-weight: 400; font-size: 11.5px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--gris); margin-top: 4px; }
.bouton-photo--pris { border-style: solid; border-color: var(--vert); }
.bouton-photo--pris .ic { color: var(--vert); }

/* --- Prix : quelques montants courants, réglés d'un seul geste ------------- */
.prix-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prix-raccourcis .puce {
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    min-height: 40px; padding: 0 14px; cursor: pointer;
    color: var(--texte); background: #fff;
    border: 1px solid var(--bordure-fort); border-radius: var(--r);
    transition: border-color .15s var(--sortie), color .15s var(--sortie), transform .15s var(--sortie);
}
.prix-raccourcis .puce:hover { border-color: var(--noir); color: var(--noir); transform: translateY(-1px); }

@media (max-width: 860px) {
    /* Une seule question à l'écran : les étapes déjà remplies se replient.
       Sans JavaScript, aucune de ces règles ne s'applique (le formulaire
       complet reste affiché et envoyable tel quel). */
    .avec-etapes .pas--repliee .pas-corps { display: none; }
    .avec-etapes .pas--repliee .pas-note { display: none; }
    .avec-etapes .pas-suite { display: block; }
    .avec-etapes .pas-tete { cursor: pointer; }
    .photo-choix { grid-template-columns: 1fr; }
    .bouton-photo { min-height: 112px; }
}

/* Étape illustrée d'aide (téléphone) : photo prise ou choisie */
.aide-appareil { font-size: 12.5px; color: var(--gris); margin-top: 12px; text-align: center; }
.aide-appareil .ic { color: var(--gris); }

/* Le menu de l'espace se replie en deux colonnes au lieu de défiler
   horizontalement : sur un téléphone, une bande qui défile cache la moitié des
   pages, et l'équipe doit voir « Clients » et « Lots & expéditions » sans deviner
   qu'il faut balayer la barre du doigt. */
@media (max-width: 700px) {
    .espace-nav { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
    .espace-nav a { flex: 1 1 calc(50% - 8px); min-width: 0; white-space: normal; }
    .espace-nav a .retrait { display: none; }
}

/* =============================================================================
   MOBILE — le site est souvent utilisé depuis un téléphone : on soigne les
   cibles tactiles, la hauteur de l'en-tête, les barres fixes et les zones sûres
   (encoche iPhone). Les tableaux deviennent des fiches, les colonnes s'empilent.
   ============================================================================= */
@media (max-width: 1080px) {
    .pied-haut { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
    .garanties { grid-template-columns: 1fr 1fr; }
    .garantie { border-right: 0; border-bottom: 1px solid var(--bordure); }
    .garantie:nth-child(odd) { border-right: 1px solid var(--bordure); }
    .garantie:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 860px) {
    /* La barre d'action de la page de commande se pose AU-DESSUS de la barre de
       navigation du bas : les deux restent visibles et cliquables, l'une ne
       recouvre plus l'autre. */
    .barre-mobile { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .barre-collante {
        display: flex;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: 12px;
    }
    body.avec-barre-collante { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
    .espace-nav a,
    .barre-mobile a,
    .onglets a { min-height: 44px; }
    .tableau td { padding: 14px 10px; }
    .pied-haut { grid-template-columns: 1fr 1fr; }
    .hero-vignettes { gap: 14px; }
}

@media (max-width: 620px) {
    /* Les champs passent à 16 px : en dessous, iOS zoome brutalement au focus. */
    input[type="text"], input[type="email"], input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"],
    select, textarea { font-size: 16px; padding: 13px 12px; }
    .btn { min-height: 48px; }
    .btn--petit { min-height: 44px; }
    .btn--serre { min-height: 40px; }
    .champ > label { font-size: 11.5px; }

    .bandeau-inner { justify-content: center; gap: 10px; }
    .bandeau-info { font-size: 10px; }
    .bandeau-liens { display: none; }
    .marque-slogan { display: none; }
    .entete-actions { gap: 10px; }
    .entete-actions .btn--serre { padding: 0 12px; }
    /* Débordement mesuré : à 390 px de large, la page faisait 401 px, et ce
       bouton en était la seule cause (libellé cassé sur deux lignes). Sur
       téléphone il ne garde que le « + » ; l'intitulé reste annoncé aux
       lecteurs d'écran par l'aria-label posé dans entete.php. */
    .entete .btn--entete { min-width: 48px; padding: 0 12px; }
    .entete .btn--entete .btn-libelle { display: none; }
    .conteneur { padding: 0 14px; }

    /* Les deux appels du héros s'empilent en pleine largeur : au pouce, on ne
       vise jamais un bouton de 160 px à côté d'un autre. L'encart du héros
       garde son fond chaud, avec des marges de téléphone. */
    .hero { padding: 24px 16px 22px; margin-top: 14px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-vignettes .vignette-titre { font-size: 13px; }
    .hero-vignettes .vignette-variante { font-size: 10px; }

    .etapes { grid-template-columns: 1fr; }
    .grille-vignettes { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
    .vignette-titre { font-size: 13px; min-height: 34px; }
    .vignette-prix .prix { font-size: 15px; }
    .section { padding: 30px 0; }
    .section-tete h2 { font-size: 25px; }
    .carte-corps, .carte-entete { padding: 16px; }
    .carte-pied { padding: 15px 16px; }
    .vide { padding: 38px 18px; }
    .stat-valeur { font-size: 26px; }

    /* Dépôt de photo : grande cible, gestes clairs sur téléphone */
    .depot { padding: 34px 16px; min-height: 176px; }
    .depot b { font-size: 15px; }
    .apercu-figure { width: 46%; }
    .aide-appareil { font-size: 12px; }

    /* Jauge et frise plus visibles */
    .jauge-piste { height: 8px; }
    .frise-point { width: 34px; height: 34px; }

    /* Tableaux transformés en cartes : chaque ligne devient une fiche lisible */
    .tableau-cartes, .tableau-cartes tbody, .tableau-cartes tr, .tableau-cartes td { display: block; width: 100%; }
    .tableau-cartes thead { display: none; }
    .tableau-cartes tr {
        border: 1px solid var(--bordure);
        border-radius: var(--r);
        margin-bottom: 14px;
        padding: 14px;
        background: #fff;
        box-shadow: var(--ombre-filet);
    }
    .tableau-cartes td { border: 0; padding: 6px 0; }
    .tableau-cartes td[data-libelle]::before {
        content: attr(data-libelle);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .11em;
        color: var(--gris);
        margin-bottom: 4px;
    }
    .tableau-cartes .cellule-produit { min-width: 0; align-items: flex-start; }
    .tableau-cartes .miniature { width: 64px; height: 86px; }
    /* Les tableaux déjà transformés en fiches n'ont plus besoin de défiler ;
       les autres gardent leur propre défilement pour ne jamais élargir la
       page. D'où le ciblage explicite plutôt qu'un overflow: visible global. */
    .tableau-enveloppe:has(.tableau-cartes) { overflow: visible; }

    /* Pied de page en une colonne, bouton de retour au-dessus de la barre */
    /* Pied de page : la marque prend toute la largeur, les trois autres
       blocs passent en deux colonnes — le pied reste dense sans être tassé. */
    .pied-haut { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 26px 0 20px; }
    .pied-haut > div:first-child { grid-column: 1 / -1; }
    /* Garanties en deux cartes par rangée, avec les filets qui vont bien. */
    .garanties { grid-template-columns: 1fr 1fr; }
    .garantie { border-right: 1px solid var(--bordure) !important; border-bottom: 1px solid var(--bordure); padding: 14px 12px; }
    .garantie:nth-child(even) { border-right: 0 !important; }
    .garantie:nth-last-child(-n+2) { border-bottom: 0; }
    .garantie b { font-size: 12.5px; }
    .garantie span { font-size: 11.5px; }
    .pied-bas { flex-direction: column; gap: 8px; }
    .pied-bas nav { gap: 12px; }
    .filtres .champ { min-width: 100%; }
    .pied { margin-top: 0; }
    .garanties { margin-top: 30px; }

    .bouton-photo { min-height: 112px; }

    .barre-mobile { display: flex; }
    body { padding-bottom: 64px; }
    .retour-haut { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); right: 12px; width: 42px; height: 42px; }
    body.avec-barre-collante .retour-haut { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
    .barre-collante .btn { padding: 0 18px; flex: 1 1 auto; min-width: 0; }

    /* --- Réorganisation mobile : composants resserrés, gestes au pouce --- */
    /* En-tête plus bas : le contenu commence plus haut sans perdre de lisibilité. */
    .entete-haut { min-height: 56px; }
    .lien-action { padding: 8px 4px; }

    /* Héros : le texte respire moins, les points de repère se resserrent. */
    .hero-texte { margin: 14px 0 18px; }
    .hero-points { gap: 8px; margin-top: 18px; }

    /* Sections : la page dure moins en défilement. */
    .section { padding: 26px 0; }
    .section-tete { margin-bottom: 16px; gap: 12px; }
    .carte-entete h2, .carte-entete h3 { font-size: 14px; }

    /* Statistiques et infos du lot en DEUX colonnes : quatre cartes empilées
       coûtaient quatre écrans de défilement ; deux par rangée se lisent d'un
       coup d'œil et la valeur reste lisible à 22 px. */
    .grille-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat { padding: 13px 12px; }
    .stat-valeur { font-size: 22px; margin-top: 6px; }
    .lot-infos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .lot-info { padding: 8px 10px; }

    /* Onglets sur UNE rangée qui défile (barre masquée) au lieu de s'étaler
       sur deux ou trois lignes : le geste de balayage est connu, la page
       gagne de la hauteur. */
    .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
    .onglets::-webkit-scrollbar { display: none; }
    .onglets a { flex: 0 0 auto; }

    /* Formulaires et barres d'outils : champs empilés, boutons sous le pouce. */
    .pas-corps { padding: 15px 14px; }
    .pas-tete { padding: 13px 14px; }
    .barre-outils { padding: 12px 14px; }
    .ligne-actions form { flex-wrap: wrap; }
    .ligne-actions input, .ligne-actions select { flex: 1 1 100%; min-width: 0; }
    .banniere-action { padding: 14px 16px; }
    .banniere-action .btn { width: 100%; }

    /* Listes : lignes un peu plus denses sans perdre les cibles tactiles. */
    .cmd-tete { padding: 11px 12px; }
    .cmd-corps { padding: 2px 12px 14px; }
    .ligne-commande { padding: 11px 12px; }
    .tableau-cartes tr { padding: 12px; }
    .tableau-cartes .miniature { width: 56px; height: 75px; }
    .tache { padding: 13px 15px; }
}

/* Écrans très étroits : on empile, rien ne dépasse */
@media (max-width: 400px) {
    .hero h1 { font-size: 31px; }
    .barre-collante .montant b { font-size: 18px; }
    .section-tete h2 { font-size: 23px; }
}

/* Sous 360 px seulement (iPhone SE 1re génération), les vignettes du
   catalogue passent à une colonne : à 375 px, deux vignettes de 165 px
   tiennent encore confortablement côte à côte. */
@media (max-width: 360px) {
    .grille-vignettes { grid-template-columns: 1fr; }
    .garanties { grid-template-columns: 1fr; }
    .garantie { border-right: 0 !important; }
    .garantie:last-child { border-bottom: 0; }
    .pied-haut { grid-template-columns: 1fr; }
    .pied-haut > div:first-child { grid-column: auto; }
}

/* =============================================================================
   APPLICATION INSTALLABLE (PWA)
   Bandeau discret proposé par le navigateur, plus une invitation maison pour
   iPhone (Safari n'expose pas d'événement d'installation).
   ============================================================================= */

.installation {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 85;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r);
    box-shadow: var(--ombre-forte);
}
.installation[hidden] { display: none; }
.installation-icone {
    width: 40px; height: 40px;
    background: var(--noir);
    color: #fff;
    border-radius: var(--r-petit);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.installation-texte { flex: 1 1 auto; min-width: 0; }
.installation-texte b { display: block; font-size: 13.5px; }
.installation-texte span { display: block; font-size: 11.5px; color: var(--gris); }
.installation-fermer {
    border: 0;
    background: none;
    color: var(--gris);
    cursor: pointer;
    padding: 6px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.installation-fermer:hover { color: var(--noir); }

/* Le bandeau ne doit jamais recouvrir les barres du bas. */
body.avec-barre-collante .installation { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 620px) {
    .installation { flex-wrap: wrap; }
    .installation .btn { width: 100%; }
    body:not(.avec-barre-collante) .installation { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* Écrans de 320 px (iPhone SE de première génération, encore en circulation) :
   la marque cède un peu de corps, sinon la rangée marque + actions de l'en-tête
   dépasse de 33 px et la page entière se décale. */
@media (max-width: 380px) {
    .marque-nom { font-size: 20px; letter-spacing: .12em; }
    .entete-haut { gap: 10px; }
    .entete-actions { gap: 8px; }
}

/* =============================================================================
   FINITIONS — accessibilité et confort
   Un anneau de focus visible partout (on navigue au clavier sur un back-office),
   et l'arrêt des animations pour qui l'a demandé dans son système.
   ============================================================================= */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent-lien);
    outline-offset: 3px;
    border-radius: var(--r-petit);
}
::selection { background: var(--rose-doux); color: var(--noir); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .etape:hover, .pied-reseau:hover, .prix-raccourcis .puce:hover { transform: none; }
    .vignette:hover .vignette-image img { transform: none; }
}

/* =============================================================================
   APERÇU D'UNE PREUVE DANS LA PAGE
   L'équipe vérifie une capture de paiement sans quitter son tableau : la
   photo s'affiche en voile, se ferme d'un clic ou d'Échap. Même code, même
   discrétion : un voile, un filet, rien d'autre.
   ============================================================================= */
.apercu-capture {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.apercu-capture[hidden] { display: none; }
.apercu-capture-fond { position: absolute; inset: 0; background: rgba(24, 22, 58, .86); }
.apercu-capture-boite {
    position: relative;
    margin: 0;
    max-width: min(560px, 94vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.apercu-capture-boite img {
    max-width: 100%;
    max-height: 76vh;
    display: block;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--fond);
}
.apercu-capture-boite figcaption {
    color: #eceafb;
    font-size: 13px;
    text-align: center;
    letter-spacing: .02em;
}
.apercu-capture-fermer {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordure);
    border-radius: var(--r-rond);
    background: var(--fond);
    color: var(--texte);
    cursor: pointer;
}
.apercu-capture-fermer:hover { background: var(--fond-3); }

/* =============================================================================
   LISTE DE COMMANDES COMPACTE (espace client et espace équipe)
   Une ligne par commande, l'essentiel seulement : numéro, article, montant,
   état. Tout le reste vit dans la fiche ouverte par « Voir détail ».
   Sur téléphone la ligne s'empile en un bloc : aucune colonne étroite, donc
   aucun chevauchement possible.
   ============================================================================= */
.liste-commandes { list-style: none; margin: 0; padding: 0; }
.ligne-commande {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bordure);
    flex-wrap: wrap;
    min-width: 0;
}
.liste-commandes li:last-child { border-bottom: 0; }
.ligne-commande:hover { background: var(--fond-2); }
.ligne-commande-produit { display: flex; align-items: center; gap: 11px; flex: 1 1 240px; min-width: 0; }
.ligne-commande .miniature {
    flex: 0 0 auto;
    width: 46px;
    height: 61px;
    object-fit: cover;
    border: 1px solid var(--bordure);
    border-radius: var(--r-petit);
    background: var(--fond-2);
}
.ligne-commande-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ligne-commande-titre { font-size: 13.5px; color: var(--encre); overflow-wrap: anywhere; }
.ligne-commande-texte .muet { overflow-wrap: anywhere; }
.ligne-commande-etats { display: flex; gap: 6px; flex-wrap: wrap; }
.ligne-commande-montant { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; }
.ligne-commande-montant b { font-family: var(--police-titre); font-size: 16px; color: var(--noir); white-space: nowrap; }
.ligne-commande-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ligne-commande-actions form { display: inline-flex; }

/* =============================================================================
   FICHE RAPIDE D'UNE COMMANDE — la popup ouverte par « Voir détail »
   Le voile couvre l'écran, la boîte défile À L'INTÉRIEUR : la page derrière ne
   bouge pas et rien ne peut dépasser. Sur téléphone (≤ 720 px) la boîte devient
   une feuille qui monte du bas et occupe tout l'écran : le geste attendu d'une
   application.
   ============================================================================= */
body.fiche-ouverte { overflow: hidden; }

.fiche-voile {
    position: fixed;
    inset: 0;
    z-index: 150;               /* l'aperçu d'une preuve (200) passe au-dessus */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.fiche-voile[hidden] { display: none; }
.fiche-fond { position: absolute; inset: 0; background: rgba(24, 22, 58, .72); }

.fiche-boite {
    position: relative;
    width: min(720px, 100%);
    max-height: min(88vh, 960px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    box-shadow: var(--ombre-forte);
    overflow: hidden;           /* les coins restent nets, c'est le corps qui défile */
}
.fiche-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--bordure);
    background: var(--fond-2);
}
.fiche-tete h3 {
    font-family: var(--police-titre);
    font-size: 22px;
    font-weight: 600;
    color: var(--noir);
    margin: 2px 0 8px;
    overflow-wrap: anywhere;
}
.fiche-fermer {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordure-fort);
    border-radius: var(--r-rond);
    background: #fff;
    color: var(--texte);
    cursor: pointer;
}
.fiche-fermer:hover { background: var(--fond-3); }

.fiche-corps {
    padding: 16px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}
.fiche-article { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.fiche-photo { flex: 0 0 auto; width: 116px; max-width: 100%; }
.fiche-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border: 1px solid var(--bordure);
    border-radius: var(--r-petit);
    background: var(--fond-2);
}
.fiche-article-texte { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.fiche-article-texte > b { font-size: 15px; color: var(--noir); display: block; }
.fiche-bloc { margin-top: 18px; border-top: 1px solid var(--bordure); padding-top: 14px; }
.fiche-bloc .montant-ligne { gap: 14px; }
.fiche-bloc .montant-ligne > b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.fiche-coupe, .fiche-adresse > b { overflow-wrap: anywhere; }
.fiche-paiements { list-style: none; margin: 0; padding: 0; }
.fiche-paiements li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bordure);
    min-width: 0;
    overflow-wrap: anywhere;
}
.fiche-paiements li:last-child { border-bottom: 0; }
.fiche-paiement-haut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fiche-pied {
    border-top: 1px solid var(--bordure);
    padding: 14px 18px;
    background: var(--fond-2);
}

@media (max-width: 720px) {
    /* Feuille pleine largeur qui monte du bas : le corps défile, le pied des
       actions reste collé au bas de la feuille. */
    .fiche-voile { padding: 0; align-items: flex-end; }
    .fiche-boite { width: 100%; max-height: 94vh; border-radius: var(--r) var(--r) 0 0; border-bottom: 0; }
    .fiche-tete { padding: 14px 15px 12px; }
    .fiche-tete h3 { font-size: 19px; }
    .fiche-corps { padding: 14px 15px; }
    .fiche-photo { width: 92px; }
    .fiche-article-texte { flex: 1 1 150px; }
    .fiche-pied { padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .fiche-pied .btn { flex: 1 1 auto; justify-content: center; }
    .fiche-pied .ligne-actions { gap: 8px; }

    /* Une ligne de commande = un bloc empilé : plus de colonnes serrées. */
    .ligne-commande { padding: 12px; gap: 9px; }
    .ligne-commande-produit { flex: 1 1 100%; }
    .ligne-commande .miniature { width: 40px; height: 53px; }
    .ligne-commande-montant { flex-direction: row; align-items: baseline; gap: 8px; margin-left: 0; }
    .ligne-commande-actions { flex: 1 1 100%; justify-content: stretch; }
    .ligne-commande-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 38px; }
}

/* ============================== FACTURE ====================================
   Document imprimable : papier blanc, typographie posée, un seul accent (le
   sceau « Payé » en vert). Les styles @media print gèrent la mise en page du
   PDF que le navigateur produit via « Enregistrer au format PDF ».
   ------------------------------------------------------------------------- */
.facture-outils { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.facture {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    box-shadow: var(--ombre-carte);
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 34px 38px 26px;
}
.facture-entete { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.facture-logo {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--noir);
    display: block;
    line-height: 1;
}
.facture-logo em {
    font-style: normal;
    background: var(--noir);
    color: #fff;
    border-radius: var(--r-petit);
    padding: 2px 7px 3px;
    margin-left: 4px;
    letter-spacing: .1em;
}
.facture-slogan { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--gris); margin-top: 6px; }
.facture-contact { display: block; font-size: 11.5px; color: var(--gris); margin-top: 3px; }
.facture-titres { text-align: right; }
.facture-titres h1 { font-size: 30px; line-height: 1; }
.facture-numero { display: block; font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 5px; letter-spacing: .06em; }
.facture-emission { display: block; font-size: 11.5px; color: var(--gris); margin-top: 3px; }
.facture-filet { height: 3px; background: var(--noir); border-radius: var(--r-rond); margin: 20px 0 22px; }
.facture-parties { display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between; }
.facture-bloc-libelle { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); margin-bottom: 6px; }
.facture-client { margin: 0; font-size: 14.5px; line-height: 1.55; }
.facture-qrcode { text-align: center; }
.facture-qr-image { width: 104px; height: 104px; margin: 0 auto 6px; }
.facture-qr-image svg { width: 100%; height: 100%; display: block; }
.facture-tableau { width: 100%; border-collapse: collapse; margin: 22px 0 8px; font-size: 14px; }
.facture-tableau th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--gris);
    border-bottom: 2px solid var(--noir);
    padding: 8px 10px 8px 0;
}
.facture-tableau td { padding: 13px 10px 13px 0; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.facture-th-nombre, .facture-th-montant { text-align: right; }
.facture-td-nombre, .facture-td-montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facture-totaux { max-width: 380px; margin-left: auto; margin-top: 14px; }
.facture-total-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--gris);
}
.facture-total-ligne b { color: var(--noir); font-variant-numeric: tabular-nums; }
.facture-total-ligne--final {
    border-top: 2px solid var(--noir);
    margin-top: 8px;
    padding-top: 11px;
    font-size: 15px;
}
.facture-total-ligne--final b { font-family: var(--police-titre); font-size: 22px; }
.facture-note { font-size: 11px; color: var(--gris); margin: 10px 0 0; }
.facture-pied { display: flex; align-items: center; gap: 18px; margin-top: 26px; border-top: 1px solid var(--bordure); padding-top: 16px; }
.facture-pied p { margin: 0; font-size: 11.5px; color: var(--gris); line-height: 1.6; }
.facture-sceau {
    flex: 0 0 auto;
    border: 2px solid var(--vert);
    color: var(--vert);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .22em;
    padding: 9px 16px 9px 19px;
    border-radius: var(--r-petit);
    transform: rotate(-7deg);
}
@media (max-width: 640px) {
    .facture { padding: 20px 15px; }
    .facture-titres { text-align: left; }
    .facture-titres h1 { font-size: 25px; }
    .facture-logo { font-size: 22px; }
    /* Les outils (retour, PDF) s'empilent en pleine largeur : deux boutons de
       300 px côte à côte ne tenaient déjà plus, autant en faire des cibles
       larges et nettes. */
    .facture-outils { flex-direction: column; align-items: stretch; }
    .facture-outils .btn { width: 100%; }
    .facture-tableau { font-size: 13px; }
    .facture-tableau td { padding: 10px 8px 10px 0; }
    .facture-totaux { max-width: none; }
    .facture-qr-image { width: 88px; height: 88px; }
    /* Le sceau descend sous les mentions, en bas à droite : il termine la
       facture comme un tampon posé à la main. */
    .facture-pied { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }
    .facture-sceau { align-self: flex-end; }
}

/* Impression / PDF : on ne garde QUE la facture, pleine page, sans en-tête,
   sans pied de site, sans boutons — un document propre comme sorti d'un logiciel
   de facturation. */
@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; font-variant-numeric: tabular-nums; padding-bottom: 0 !important; }
    .bandeau, .entete, .pied, .barre-mobile, .facture-outils, .retour-haut, .btn-flottant, .alerte { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .facture { border: 0; box-shadow: none; border-radius: 0; max-width: none; padding: 0; margin: 0; }
    .facture-sceau { border-color: #1a6b3c; color: #1a6b3c; }
    .facture-filet { background: #1e1c4e; }
}

/* =============================================================================
   BOUTON FLOTTANT « COMMANDER » — le geste principal, toujours au pouce.
   Posé en bas à droite, au-dessus du bouton « retour en haut » : les deux ne se
   croisent jamais et aucune ligne de commande n'est masquée.
   ============================================================================= */
.btn-flottant {
    position: fixed;
    right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 88;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--ombre-forte);
    transition: transform .15s var(--sortie), background .15s var(--sortie);
}
.btn-flottant:hover { background: var(--rose-fonce); color: #fff; transform: translateY(-2px); }
.btn-flottant:active { transform: translateY(0); }

@media (max-width: 720px) {
    /* La barre de navigation (64 px) et le « retour en haut » (78 px) occupent
       déjà le bas : le bouton se pose plus haut pour ne jamais les croiser. */
    .btn-flottant { right: 12px; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); padding: 12px 16px; }
}

/* =============================================================================
   COURS DU JOUR — le taux actif, lisible dès l'arrivée dans l'espace client.
   ============================================================================= */
.cours-jour {
    display: flex;
    align-items: center;
    gap: 14px 24px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    box-shadow: var(--ombre-filet);
}
.cours-jour-taux { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cours-jour-libelle {
    width: 100%;
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris);
    margin-bottom: 2px;
}
.cours-jour-taux b { font-family: var(--police-titre); font-size: 26px; color: var(--noir); letter-spacing: -.02em; }
.cours-jour-note { flex: 1 1 240px; min-width: 0; }
.cours-jour-note p { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12.5px; color: var(--texte); }

/* =============================================================================
   LISTE DE COMMANDES DÉPLIABLE — une ligne compacte, un chevron pour ouvrir.
   L'essentiel (date, quantité, total, état) tient sur la ligne ; le détail et
   les actions vivent dans le panneau et dans la fiche.
   ============================================================================= */
.liste-cmd { list-style: none; margin: 0; padding: 0; }
.cmd { border-bottom: 1px solid var(--bordure); }
.liste-cmd .cmd:last-child { border-bottom: 0; }
.cmd-tete {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 13px 14px;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.cmd-tete:hover { background: var(--fond-2); }
.cmd-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gris); }
.cmd-qte { font-size: 12.5px; color: var(--gris); }
.cmd-statut { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cmd-total { margin-left: auto; font-family: var(--police-titre); font-size: 16px; color: var(--noir); white-space: nowrap; }
.cmd-chevron { flex: 0 0 auto; color: var(--gris); transition: transform .2s var(--sortie); }
.cmd-tete.ouvert .cmd-chevron { transform: rotate(180deg); }
.cmd-corps { padding: 4px 14px 16px; }
.cmd-corps[hidden] { display: none; }
.cmd-resume { margin: 0 0 4px; font-size: 13.5px; color: var(--encre); overflow-wrap: anywhere; }
.cmd-resume b { color: var(--noir); }
.cmd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Ligne « suivi de mes commandes » : TOUTE la rangée est un lien vers la fiche.
   La désignation porte la ligne ; la date, l'heure et l'état suivent. */
/* Sans montant sur la ligne (liste de suivi), le chevron se colle à droite
   au lieu de retomber tout seul sur une rangée supplémentaire. */
.cmd-tete:not(:has(.cmd-total)) .cmd-chevron { margin-left: auto; }
/* Sur téléphone, la ligne de suivi devient une grille : la désignation prend
   sa rangée, puis date + état + chevron tiennent ensemble sur la suivante —
   une ligne lisible d'un seul coup d'œil, sans chevron orphelin. */
@media (max-width: 620px) {
    .cmd-tete:not(:has(.cmd-total)) { display: grid; grid-template-columns: 1fr auto auto; align-items: center; row-gap: 8px; }
    .cmd-tete:not(:has(.cmd-total)) .cmd-designation { grid-column: 1 / -1; }
    .cmd-tete:not(:has(.cmd-total)) .cmd-chevron { margin-left: 0; justify-self: end; }
}
a.cmd-tete { text-decoration: none; }
a.cmd-tete:hover { background: var(--fond-2); opacity: 1; }
.cmd-designation {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 600;
    color: var(--noir);
}

/* Lien de téléchargement sous la photo d'une commande (fiche). */
.fiche-photo-lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--accent-lien);
}
.fiche-photo-lien:hover { text-decoration: underline; }


/* =============================================================================
   PORTEFEUILLE (wallet) — solde, historique des mouvements, retraits.
   ============================================================================= */
.formulaire { display: flex; flex-direction: column; gap: 12px; }

.liste-mouv { list-style: none; margin: 0; padding: 0; }
.mouv { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--bordure); }
.liste-mouv .mouv:last-child { border-bottom: 0; }
.mouv-icone {
    flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; background: var(--fond-3); color: var(--gris);
}
.mouv--credit .mouv-icone { background: #e7f6ec; color: #157a3a; }
.mouv--debit .mouv-icone { background: #fbeaea; color: #b32b2b; }
.mouv-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mouv-texte b { color: var(--noir); font-size: 14px; }
.mouv-texte .petit { overflow-wrap: anywhere; }
.mouv-montant { flex: 0 0 auto; font-family: var(--police-titre); font-size: 15px; white-space: nowrap; color: var(--noir); }
.mouv--credit .mouv-montant { color: #157a3a; }
.mouv--debit .mouv-montant { color: #b32b2b; }

/* Champ « vendeur porteur » du formulaire de commande (vendeur/admin). */
.champ--vendeur { grid-column: 1 / -1; }
.champ--vendeur select { max-width: 420px; }

/* =============================================================================
   MENU LATÉRAL DE L'ESPACE (téléphone) — à la manière du menu de Telegram :
   un bouton l'ouvre, un panneau glisse depuis la gauche, un voile le referme.
   Sur grand écran, la barre latérale reste dans le flux : rien ne change.
   ============================================================================= */
.espace-menu-bouton,
.espace-nav-fermer { display: none; }

.espace-menu-bouton {
    position: fixed;
    top: calc(66px + env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: 90;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--noir);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--ombre-forte);
    cursor: pointer;
}
.espace-nav-fermer {
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 40px; height: 40px;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: var(--fond-2);
    color: var(--encre);
    cursor: pointer;
}

.drawer-voile { position: fixed; inset: 0; z-index: 94; background: rgba(24, 22, 58, .55); }
.drawer-voile[hidden] { display: none; }

@media (max-width: 860px) {
    .espace-menu-bouton { display: inline-flex; }
    .espace-nav-fermer { display: inline-flex; }

    /* Le panneau quitte le flux et glisse depuis la gauche. */
    .espace-nav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 84%;
        max-width: 320px;
        margin: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: #fff;
        box-shadow: var(--ombre-forte);
        transform: translateX(-104%);
        transition: transform .24s var(--sortie);
        z-index: 96;
    }
    .espace-nav a { flex: none; width: 100%; white-space: normal; min-height: 44px; }
    .espace-nav a .retrait { display: inline-block; }
    body.espace-menu-ouvert .espace-nav { transform: translateX(0); }
    body.espace-menu-ouvert { overflow: hidden; }

    /* Une seule colonne : la barre latérale est sortie du flux. */
    .espace { grid-template-columns: 1fr; }
}


/* ---------------- Popup « articles d'un lot » : édition sur place ----------- */
/* Les articles d'un lot s'ouvrent par-dessus la liste, et chaque ligne se règle
   directement : prix d'achat réel (Ariary) + statut, sans changer de page. */
.lot-articles { display: flex; flex-direction: column; gap: 10px; }
.lot-article {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 11px 13px; border: 1px solid var(--bordure);
    border-radius: var(--r); background: var(--fond-2);
}
.lot-article__infos { display: flex; align-items: center; gap: 11px; flex: 1 1 220px; min-width: 0; }
.lot-article__infos img {
    flex: 0 0 auto; width: 44px; height: 58px; object-fit: cover;
    border: 1px solid var(--bordure); border-radius: var(--r-petit);
}
.lot-article__infos b { display: block; }
.lot-article__reglages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; flex: 0 1 auto; }
.lot-article__reglages .champ-mini { display: flex; flex-direction: column; gap: 3px; }
.lot-article__reglages input[name="prix_shein"] { width: 112px; }
.lot-article__reglages select { min-width: 156px; }
.lot-article__note { flex: 1 1 100%; margin: 0; }
@media (max-width: 620px) {
    .lot-article__reglages { flex: 1 1 100%; }
    .lot-article__reglages .champ-mini { flex: 1 1 100%; }
    .lot-article__reglages input[name="prix_shein"],
    .lot-article__reglages select { width: 100%; }
    .lot-article__reglages .btn { flex: 1 1 100%; justify-content: center; }
}