/* ==========================================================================
   Formulaire de commande
   ==========================================================================
   On reste dans l'aspect clair de TikTak Pro — c'est ce que les clients du
   marchand connaissent, et un formulaire de paiement a la livraison n'est pas
   l'endroit ou desorienter quelqu'un. Ce qu'on ameliore tient en trois points :

     · la place laissee au doigt,
     · le choix du gouvernorat, qui etait le vrai point de friction,
     · un repere d'avancement, pour savoir combien il reste a faire.

   Toute la couleur vive est depensee a UN endroit : le bouton d'envoi.
   ------------------------------------------------------------------------ */
.shop-order-form {
    --miel-or: #FFB606;
    --miel-or-fonce: #E09A00;
    --miel-ambre: #B87A00;
    --miel-encre: #241C13;
    --miel-gris: #6B6257;
    --miel-trait: #E8DFCF;
    --miel-fond: #FFFDF9;
    --miel-champ: #FFFFFF;
    --miel-vert: #1F8A4C;

    position: relative;
    padding: 22px 20px 26px;
    border: 1px solid var(--miel-trait);
    border-radius: 18px;
    background: var(--miel-fond);
    color: var(--miel-encre);
    box-shadow: 0 14px 34px rgba(36, 28, 19, .07);
}

.shop-order-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--miel-gris);
}

.shop-order-form .form__control {
    width: 100%;
    /* 52 px : on tape au pouce, souvent debout, souvent presse. */
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid var(--miel-trait);
    border-radius: 12px;
    background: var(--miel-champ);
    color: var(--miel-encre);
    font-size: 16px;   /* en dessous de 16 px, iOS zoome au focus et deplace la page */
    transition: border-color .18s ease, box-shadow .18s ease;
}

.shop-order-form .form__control::placeholder { color: #A79C8C; }

/* Le halo de focus : de la lumiere qui traverse l'ambre. */
.shop-order-form .form__control:focus {
    outline: none;
    border-color: var(--miel-or);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .22);
}

.shop-order-form .shop-hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--miel-gris);
}

/* Le telephone est le champ le plus precieux : c'est par lui que l'agent
   confirme la commande. Chiffres a chasse fixe, pour se relire d'un coup. */
.shop-order-form input[data-phone-field] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

/* --- Le select natif reste, mais ne se voit plus ------------------------- */
.vm-select-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Gouvernorat : un champ replie qui ouvre une grille ------------------ */
.vm-declencheur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid var(--miel-trait);
    border-radius: 12px;
    background: var(--miel-champ);
    color: #A79C8C;
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.vm-declencheur--rempli { color: var(--miel-encre); }

.vm-declencheur:hover { border-color: #D9C9A8; }

.vm-declencheur:focus-visible {
    outline: none;
    border-color: var(--miel-or);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .22);
}

.vm-declencheur__fleche {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--miel-ambre);
    border-bottom: 2px solid var(--miel-ambre);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s ease;
}

.vm-choix--ouvert .vm-declencheur__fleche { transform: rotate(-135deg) translate(-3px, -3px); }
.vm-choix--ouvert .vm-declencheur { border-color: var(--miel-or); }

.vm-panneau {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--miel-trait);
    border-radius: 12px;
    background: #FFF8EC;
    /* Le panneau ne pousse pas la page a l'infini : au-dela, il defile seul. */
    max-height: 46vh;
    overflow-y: auto;
}

.vm-panneau[hidden] { display: none; }

.vm-choix__recherche {
    width: 100%;
    min-height: 46px;
    margin-bottom: 10px;
    padding: 11px 14px;
    border: 1px solid var(--miel-trait);
    border-radius: 10px;
    background: var(--miel-champ);
    color: var(--miel-encre);
    font-size: 15px;
}

.vm-choix__recherche:focus {
    outline: none;
    border-color: var(--miel-or);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .18);
}

/* Trois colonnes des que la place le permet : vingt-quatre tuiles sur deux
   colonnes font douze rangees, soit plus long a parcourir que le menu qu'on
   remplace. */
.vm-choix__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.vm-tuile,
.vm-pastille {
    position: relative;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--miel-trait);
    border-radius: 11px;
    background: var(--miel-champ);
    color: #4A4239;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.vm-tuile:hover,
.vm-pastille:hover { border-color: var(--miel-or); background: #FFF4DC; }

.vm-tuile:focus-visible,
.vm-pastille:focus-visible {
    outline: none;
    border-color: var(--miel-or);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .22);
}

.vm-tuile--choisi,
.vm-pastille--choisi {
    border-color: var(--miel-or-fonce);
    background: linear-gradient(180deg, #FFC53D 0%, var(--miel-or) 100%);
    color: var(--miel-encre);
}

/* La marque du choix : une cellule de ruche. C'est le SEUL endroit ou
   l'hexagone apparait — ailleurs il serait du decor. */
.vm-tuile--choisi::after,
.vm-pastille--choisi::after {
    content: "";
    position: absolute;
    top: 5px;
    inset-inline-end: 6px;
    width: 9px;
    height: 10px;
    background: var(--miel-encre);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    opacity: .5;
}

/* --- Delegation : les pastilles coulent ---------------------------------- */
.vm-choix__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vm-choix__liste .vm-pastille { min-width: 0; padding: 10px 14px; }

.vm-choix__attente {
    margin: 0;
    padding: 13px 15px;
    border: 1px dashed var(--miel-trait);
    border-radius: 12px;
    font-size: 13.5px;
    color: #A79C8C;
}

.vm-pastille--coule {
    opacity: 0;
    animation: vm-couler .32s ease forwards;
}

@keyframes vm-couler {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Le recapitulatif ---------------------------------------------------- */
.shop-order-form .shop-summary {
    border: 1px solid var(--miel-trait);
    border-radius: 14px;
    background: #FFF8EC;
    padding: 6px 16px;
}

.shop-order-form .checkout__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
}

.shop-order-form .checkout__item + .checkout__item { border-top: 1px solid #F0E6D2; }
.shop-order-form .checkout__item .title { margin: 0; font-size: 14px; font-weight: 600; color: var(--miel-gris); }
.shop-order-form .checkout__item .price { font-variant-numeric: tabular-nums; }

/* Le total est le chiffre qu'on retient : le plus gros de la carte. */
.shop-order-form .checkout__total .title { color: var(--miel-encre); font-size: 15px; }
.shop-order-form .checkout__total [data-total-amount] {
    font-size: 24px;
    font-weight: 800;
    color: var(--miel-ambre);
    font-variant-numeric: tabular-nums;
}

/* --- Le bouton : toute la couleur vive de la carte ----------------------- */
.vm-envoi {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    padding: 16px 22px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #F3E9D6;
    color: #7A6A55;
    font-size: 16.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease, box-shadow .2s ease;
}

/* La jauge : le bouton se remplit d'ambre a mesure que les champs se
   completent. C'est la seule reponse dont un formulaire a besoin a la question
   « il m'en reste combien ? ». */
.vm-envoi__jauge {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(180deg, #FFC53D 0%, var(--miel-or-fonce) 100%);
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.vm-envoi > *:not(.vm-envoi__jauge) { position: relative; z-index: 1; }

.vm-envoi--pret {
    color: var(--miel-encre);
    box-shadow: 0 12px 26px rgba(255, 182, 6, .32);
}

.vm-envoi:focus-visible { outline: 3px solid rgba(255, 182, 6, .55); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .vm-envoi__jauge { transition: none; }
    .vm-pastille--coule { opacity: 1; animation: none; }
    .vm-declencheur__fleche { transition: none; }
}

/* --- Le choix du poids : des boutons, comme sur l'etiquette du pot ------- */
.vm-poids__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vm-poids__bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 92px;
    min-height: 56px;
    padding: 9px 16px;
    border: 1px solid var(--miel-trait);
    border-radius: 12px;
    background: var(--miel-champ);
    color: #4A4239;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.vm-poids__bouton:hover { border-color: var(--miel-or); background: #FFF4DC; }

.vm-poids__bouton:focus-visible {
    outline: none;
    border-color: var(--miel-or);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .22);
}

/* Le poids se choisit, le prix se compare : deux tailles, deux roles. */
.vm-poids__valeur {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
}

.vm-poids__prix {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--miel-gris);
    font-variant-numeric: tabular-nums;
}

.vm-poids__bouton--choisi {
    border-color: var(--miel-or-fonce);
    background: linear-gradient(180deg, #FFC53D 0%, var(--miel-or) 100%);
    color: var(--miel-encre);
}

.vm-poids__bouton--choisi .vm-poids__prix { color: #6B4E00; }

/* Le libelle du declencheur tient sur une ligne : « Choisir votre gouvernorat »
   passait sur deux et doublait la hauteur du champ. */
.vm-declencheur__valeur {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chaque morceau lit dans son propre sens : « 450 غ » est arabe, « 24,000 DT »
   ne l'est pas. Sans isolation, le navigateur melange les deux et affiche
   « 450 24,000 — غ DT ». */
.vm-poids__valeur,
.vm-poids__prix {
    unicode-bidi: isolate;
}

/* --- Les menus natifs qui restent ----------------------------------------
   Le theme impose « line-height » a la hauteur de la boite : la ligne de texte
   occupait alors toute la hauteur dans une zone amputee du padding, et le
   libelle ressortait coupe en bas. Se voyait sur chaque produit a une seule
   declinaison, et se reverra le jour ou le gouvernorat reviendra. */
.shop-order-form select.form__control,
.shop-order-form .form__control {
    height: auto;
    line-height: 1.35;
}

/* La fleche du menu : sans elle, un select sans habillage ne se distingue plus
   d'un champ de saisie. */
.shop-order-form select.form__control {
    appearance: none;
    padding-inline-end: 40px;
    background-image: linear-gradient(45deg, transparent 49%, var(--miel-ambre) 51%),
                      linear-gradient(135deg, var(--miel-ambre) 51%, transparent 49%);
    background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.shop-order-form select.form__control:dir(rtl) {
    background-position: 16px calc(50% + 2px), 22px calc(50% + 2px);
}

/* ==========================================================================
   La zone d'achat : quantite, commander, ajouter au panier
   ==========================================================================
   La disposition de l'autre boutique du marchand — ses clients la connaissent
   par coeur. Trois gestes, dans l'ordre ou on les fait : combien, j'achete,
   ou bien je mets de cote.
   ------------------------------------------------------------------------ */
.vm-achat {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;
}

.vm-qte {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    border: 1px solid var(--miel-trait);
    border-radius: 14px;
    background: var(--miel-champ);
    overflow: hidden;
}

.vm-qte__btn {
    width: 46px;
    border: 0;
    background: transparent;
    color: var(--miel-ambre);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.vm-qte__btn:hover { background: var(--miel-clair, #FFF4DC); }
.vm-qte__btn:active { background: #FFE9B8; }

.vm-qte__btn:focus-visible {
    outline: none;
    background: #FFF4DC;
    box-shadow: inset 0 0 0 2px var(--miel-or);
}

.vm-qte__valeur {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 4px;
    border-inline: 1px solid var(--miel-trait);
    font-size: 17px;
    font-weight: 700;
    color: var(--miel-encre);
    font-variant-numeric: tabular-nums;
}

.vm-achat .vm-envoi { flex: 1 1 auto; margin: 0; }

/* La secousse : deux fois par cycle, le bouton bouge d'un cheveu. C'est le
   rappel que le marchand emploie sur son autre boutique — assez pour attirer
   l'oeil, trop bref pour gener la lecture. */
@keyframes vm-secousse {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-2px); }
    40%, 60% { transform: translateX(2px); }
}

.vm-envoi--achat {
    animation: vm-secousse 2s cubic-bezier(.36, .07, .19, .97) infinite;
}

/* Elle s'arrete des qu'on s'en approche : un bouton qui tremble sous le doigt
   se rate. */
.vm-envoi--achat:hover,
.vm-envoi--achat:focus-visible,
.vm-envoi--achat:active {
    animation: none;
}

/* --- Ajouter au panier : le second choix, et il en a l'air ----------------
   Selecteur double : le theme peint TOUS les boutons de soumission en ambre
   plein, et les deux boutons se ressemblaient au point qu'on ne savait plus
   lequel achetait. */
.shop-order-form button.vm-panier[type="submit"],
.vm-panier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 14px 20px;
    border: 1px solid var(--miel-or);
    border-radius: 14px;
    background: transparent;
    color: var(--miel-ambre);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.shop-order-form button.vm-panier[type="submit"]:hover,
.vm-panier:hover { background: #FFF4DC; color: var(--miel-ambre); }

.vm-panier:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .28);
}

.vm-panier svg { flex: 0 0 auto; }

/* --- Le cadre en pointilles ----------------------------------------------
   Il dit « ceci est un formulaire, pas du texte » sans peser comme une boite
   pleine — c'est le repere visuel de l'autre boutique. */
.shop-order-form {
    border-style: dashed;
    border-width: 2px;
    border-color: var(--miel-or-fonce);
}

@media (max-width: 480px) {
    .vm-achat { flex-wrap: wrap; }
    .vm-qte { width: 100%; }
    .vm-qte__valeur { flex: 1 1 auto; }
    .vm-achat .vm-envoi { width: 100%; }
}

/* La secousse du bouton d'achat suit la meme regle que le bandeau : elle
   tourne toujours. Le marchand l'a demandee deux fois apres l'avoir vue sur sa
   propre boutique ; elle reste breve, horizontale, et s'arrete des que le
   doigt approche. */

/* ==========================================================================
   La fenetre de commande, ouverte depuis une carte produit
   ==========================================================================
   « Ajouter au panier » se comprenait mal : beaucoup de clients pensaient
   avoir commande. La fenetre montre CE qu'on commande, et nomme les deux
   issues sans detour.
   ------------------------------------------------------------------------ */
.vm-fenetre {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(36, 28, 19, .55);
    overflow-y: auto;
    animation: vm-fenetre-fond .18s ease;
}

.vm-fenetre[hidden] { display: none; }

@keyframes vm-fenetre-fond { from { opacity: 0; } to { opacity: 1; } }

.vm-fenetre__boite {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 22px;
    border-radius: 18px;
    background: #FFFDF9;
    box-shadow: 0 24px 60px rgba(36, 28, 19, .28);
    animation: vm-fenetre-boite .22s cubic-bezier(.22, .61, .36, 1);
}

@keyframes vm-fenetre-boite {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.vm-fenetre__fermer {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6B6257;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.vm-fenetre__fermer:hover { background: #F3EDE4; }

.vm-fenetre__fermer:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .4);
}

.vm-fenetre__attente {
    padding: 40px 0;
    text-align: center;
    color: #6B6257;
}

/* Le produit, avant le formulaire : on doit voir ce qu'on commande. */
.vm-panneau-commande__produit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-inline-end: 34px;
}

.vm-panneau-commande__image {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    object-fit: cover;
    background: #F3EDE4;
}

.vm-panneau-commande__nom {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    color: #241C13;
}

.vm-panneau-commande__nom-ar {
    margin: 2px 0 0;
    font-size: 14px;
    color: #B87A00;
}

.vm-panneau-commande__prix {
    margin: 4px 0 0;
    font-size: 15px;
    color: #241C13;
}

.vm-panneau-commande__prix del {
    margin-inline-end: 8px;
    color: #A79C8C;
    font-size: 13.5px;
}

.vm-panneau-commande__prix strong { font-size: 18px; color: #B87A00; }

/* Dans la fenetre, la carte du formulaire ne redouble pas le cadre. */
.vm-fenetre .shop-order-form {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* La page ne defile plus derriere la fenetre : on perdait sa place. */
body.vm-fenetre-ouverte { overflow: hidden; }

@media (max-width: 480px) {
    .vm-fenetre { padding: 12px 10px; }
    .vm-fenetre__boite { padding: 18px 16px; }
}

/* Le pot de miel anti-robots : hors écran, pas « display:none » — certains
   scripts sautent les champs display:none mais remplissent ceux-ci. */
.vm-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Formulaire calqué sur la boutique vitamiel.tn (2026-09-27)
   ==========================================================================
   Demande du marchand : « exactement comme » sa boutique TikTak — même cadre
   en pointillés autour des SEULS champs, mêmes champs à bordure de 2 px sans
   icône, nom et téléphone côte à côte, adresse sur une demi-largeur, bouton
   plein qui tremble. Seule différence volontaire : la couleur reste l'ambre
   Vitamiel (vitamiel.tn utilise le violet par défaut du thème TikTak), et
   chaque libellé porte son arabe.
   ------------------------------------------------------------------------ */
.shop-order-form {
    --vt-accent: #E09A00;
    --vt-accent-fonce: #B87A00;
    --vt-gris-bord: #D1D5DB;
    --vt-texte: #111827;
    --vt-libelle: #374151;
}

/* 1. Le cadre : sur la fiche, le formulaire enveloppe TOUTE la colonne (titre,
      prix, déclinaisons). Le cadre passe donc du formulaire au seul bloc de
      commande, comme le « quickCheckoutFormContainer » de vitamiel.tn. */
.shop-order-form:has(> .vm-bloc--commande) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shop-order-form > .vm-bloc--commande.pq-quick-order,
.shop-order-form:not(:has(> .vm-bloc--commande)) {
    margin: 24px 0;
    padding: 16px;
    border: 2px dashed var(--vt-accent);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .08);
}

/* Dans la fenêtre ouverte depuis une carte, pas de second cadre. */
.vm-fenetre .shop-order-form:not(:has(> .vm-bloc--commande)) {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.shop-order-form .pq-quick-order-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--vt-texte);
}

.shop-order-form .pq-quick-order-title .vm-ar {
    display: block;
    margin: 2px 0 0;
    color: var(--vt-accent-fonce);
}

/* 2. La grille : 12 px d'écart sur mobile, 16 px au-delà, sans marge sous
      chaque champ (c'est l'écart de la grille qui espace). */
.shop-order-form .vm-champs {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .shop-order-form .vm-champs { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
}

.shop-order-form .vm-champs .checkout-form__item { margin-bottom: 0; }

/* 3. Le libellé : 14 px, graisse moyenne, gris foncé, astérisque rouge ;
      l'arabe en face, sur la même ligne. */
.shop-order-form .vm-champs label.vm-libelle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 10px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vt-libelle);
}

.vm-requis { color: #EF4444; font-weight: 500; }

.vm-libelle__option { color: #6B7280; }

.shop-order-form .vm-libelle .vm-libelle__ar {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--vt-libelle);
}

/* 4. Le champ : blanc, bordure grise de 2 px, coins de 6 px ; la couleur de
      la marque au survol, un anneau de 2 px au focus. */
.shop-order-form .vm-champs .checkout-form__item .form__control {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 9px 12px;
    border: 2px solid var(--vt-gris-bord);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--vt-texte);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.shop-order-form .vm-champs .checkout-form__item .form__control::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.shop-order-form .vm-champs .checkout-form__item .form__control:hover {
    border-color: var(--vt-accent);
}

.shop-order-form .vm-champs .checkout-form__item .form__control:focus {
    outline: none;
    border-color: var(--vt-accent);
    background: #FFFFFF;
    box-shadow: 0 0 0 2px var(--vt-accent);
}

.shop-order-form .vm-champs .shop-hint {
    margin-top: 4px;
    font-size: 12.5px;
    color: #6B7280;
}

.shop-order-form .vm-champs .shop-hint .vm-ar { display: block; margin: 0; font-weight: 400; }

/* 5. Quantité et bouton : centrés sur une ligne, 28 px sous les champs. */
.shop-order-form .vm-achat {
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.shop-order-form .vm-qte {
    border: 1px solid var(--vt-gris-bord);
    border-radius: 6px;
    background: #FFFFFF;
}

.shop-order-form .vm-qte__btn {
    width: auto;
    min-width: 40px;
    padding: 12px;
    color: #6B7280;
    font-size: 18px;
}

.shop-order-form .vm-qte__btn:hover { background: #F3F4F6; color: #374151; }

.shop-order-form .vm-qte__valeur {
    min-width: 48px;
    border-inline: 1px solid var(--vt-gris-bord);
    font-size: 16px;
    font-weight: 400;
}

/* Le bouton d'achat est plein d'entrée — plus de jauge qui se remplit :
   sur vitamiel.tn il est de la couleur de la marque avant même le premier
   champ, et c'est ce que le marchand veut retrouver. */
.shop-order-form .vm-envoi.vm-envoi--achat {
    min-height: 48px;
    padding: 12px 20px;
    border: 2px solid var(--vt-accent);
    border-radius: 6px;
    background: var(--vt-accent);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    box-shadow: none;
}

.shop-order-form .vm-envoi.vm-envoi--achat:hover {
    border-color: var(--vt-accent-fonce);
    background: var(--vt-accent-fonce);
}

.shop-order-form .vm-envoi--achat .vm-envoi__jauge { display: none; }

/* Ajouter au panier : contour de 1 px, pleine largeur, sous la ligne. */
.shop-order-form button.vm-panier[type="submit"] {
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 20px;
    border: 1px solid var(--vt-accent);
    border-radius: 6px;
    color: var(--vt-accent-fonce);
    font-size: 16px;
    font-weight: 500;
}

.shop-order-form button.vm-panier[type="submit"]:hover { background: #FFF7E6; }

@media (max-width: 480px) {
    .shop-order-form .vm-achat { flex-wrap: nowrap; gap: 10px; }
    .shop-order-form .vm-qte { width: auto; }
    .shop-order-form .vm-qte__valeur { flex: 0 0 auto; }
}

/* ==========================================================================
   Le formulaire en volume (2026-09-27)
   ==========================================================================
   Demande du marchand : un cadre « spécial », des champs plus nets, et que
   l'ensemble paraisse en relief. Trois moyens, pas plus :
     · un cadre doré en dégradé, doublé d'un pointillé intérieur (le repère
       de vitamiel.tn, gardé à l'intérieur) ;
     · une ombre sur trois niveaux, qui décolle la carte de la page ;
     · des champs légèrement creusés, et un bouton qui dépasse — ce qu'on
       remplit s'enfonce, ce qu'on presse ressort.
   ------------------------------------------------------------------------ */

/* 1. La carte */
.shop-order-form > .vm-bloc--commande.pq-quick-order,
.shop-order-form:not(:has(> .vm-bloc--commande)) {
    position: relative;
    margin: 26px 0;
    padding: 22px 18px 24px;
    border: 3px solid transparent;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FFFCF5 100%) padding-box,
        linear-gradient(135deg, #FFD36B 0%, #E09A00 45%, #B87A00 100%) border-box;
    outline: 1.5px dashed rgba(224, 154, 0, .55);
    outline-offset: -10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 2px 4px rgba(36, 28, 19, .06),
        0 12px 24px -8px rgba(184, 122, 0, .35),
        0 28px 56px -18px rgba(36, 28, 19, .30);
}

.vm-fenetre .shop-order-form:not(:has(> .vm-bloc--commande)) {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

/* 2. Le titre : un bandeau doré qui coiffe la carte. */
.shop-order-form .vm-bloc--commande .pq-quick-order-title,
.shop-order-form .pq-quick-order-title {
    margin: -6px -2px 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFE39A 0%, #FFC53D 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 8px -2px rgba(184, 122, 0, .45);
    color: #241C13;
    font-size: 16.5px;
    font-weight: 800;
    text-align: center;
}

.shop-order-form .pq-quick-order-title .vm-ar {
    display: block;
    margin: 3px 0 0;
    color: #5A3E00;
    font-weight: 700;
}

/* 3. Les champs : bordure franche, fond à peine crème, léger creux. */
.shop-order-form .vm-champs .checkout-form__item .form__control {
    min-height: 48px;
    border: 2px solid #CDB88C;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFFDF8 0%, #FFFFFF 100%);
    box-shadow: inset 0 2px 4px rgba(36, 28, 19, .08), 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.shop-order-form .vm-champs .checkout-form__item .form__control:hover {
    border-color: #E09A00;
}

/* Au focus, le champ remonte : il sort du creux et s'éclaire. */
.shop-order-form .vm-champs .checkout-form__item .form__control:focus {
    border-color: #E09A00;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .28), 0 8px 16px -6px rgba(184, 122, 0, .40);
    transform: translateY(-1px);
}

.shop-order-form .vm-champs label.vm-libelle {
    font-weight: 700;
    color: #241C13;
}

.shop-order-form .vm-libelle .vm-libelle__ar { font-weight: 700; color: #8A5B00; }

/* 4. Le bouton : il dépasse, et s'enfonce quand on appuie. Texte sombre sur
      l'ambre — le blanc n'y atteint pas un contraste lisible. */
.shop-order-form .vm-envoi.vm-envoi--achat {
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFC53D 0%, #E09A00 100%);
    color: #241C13;
    font-size: 17px;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 4px 0 #A56D00,
        0 12px 22px -6px rgba(184, 122, 0, .55);
}

.shop-order-form .vm-envoi.vm-envoi--achat:hover {
    background: linear-gradient(180deg, #FFCD55 0%, #E8A200 100%);
}

.shop-order-form .vm-envoi.vm-envoi--achat:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #A56D00, 0 4px 10px -4px rgba(184, 122, 0, .5);
}

/* La quantité, en relief elle aussi, mais plus discrète que le bouton. */
.shop-order-form .vm-qte {
    border: 2px solid #CDB88C;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8EA 100%);
    box-shadow: 0 3px 0 #E3D2AE, 0 8px 14px -8px rgba(36, 28, 19, .25);
}

.shop-order-form .vm-qte__btn { color: #8A5B00; font-weight: 700; }
.shop-order-form .vm-qte__valeur { border-inline-color: #E3D2AE; font-weight: 700; }

/* Ajouter au panier : le second choix, en contour doré. */
.shop-order-form button.vm-panier[type="submit"] {
    margin-top: 14px;
    border: 2px solid #E09A00;
    border-radius: 12px;
    background: #FFFFFF;
    color: #8A5B00;
    font-weight: 700;
    box-shadow: 0 3px 0 #F0D9A6;
}

.shop-order-form button.vm-panier[type="submit"]:hover { background: #FFF7E6; }

/* Le récapitulatif : un encart crème, légèrement creusé. */
.shop-order-form .vm-bloc--commande .shop-summary {
    border: 1.5px solid #E8D6AE;
    border-radius: 12px;
    background: #FFF8EC;
    box-shadow: inset 0 2px 4px rgba(36, 28, 19, .05);
}

@media (prefers-reduced-motion: reduce) {
    .shop-order-form .vm-champs .checkout-form__item .form__control:focus { transform: none; }
}

@media (max-width: 480px) {
    .shop-order-form > .vm-bloc--commande.pq-quick-order { padding: 20px 14px 22px; outline-offset: -8px; }
}

/* ==========================================================================
   Finitions et micro-animations (2026-09-27)
   ==========================================================================
   Proposition de design validée avec le marchand : le relief reste, on y
   ajoute de la lumière (reflet du bouton), un total en « ticket », une coche
   quand un champ est bon, et une entrée en fondu de la carte. Aucune
   animation ne touche au `transform` du bouton : la secousse l'occupe.
   ------------------------------------------------------------------------ */

/* Le thème espace les lettres des titres et des boutons ; dans un
   formulaire, cet espacement fait passer les libellés à la ligne. */
.shop-order-form .vm-bloc--commande,
.shop-order-form .vm-bloc--commande * { letter-spacing: 0; }

/* L'arabe dans une police qui a ses glyphes (Quicksand n'en a pas). */
.shop-order-form .vm-ar {
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
    line-height: 1.55;
}

.shop-order-form .pq-quick-order-title {
    font-family: var(--subtitle-fonts, inherit);
    font-weight: 400;
    font-size: 19px;
}

.shop-order-form .pq-quick-order-title .vm-ar { font-size: 16px; font-weight: 700; }

/* --- 1. Le bouton : un reflet qui passe, puis se repose ------------------ */
.shop-order-form .vm-envoi.vm-envoi--achat {
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.25;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.shop-order-form .vm-envoi.vm-envoi--achat::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
    transform: skewX(-18deg) translateX(0);
    animation: vm-reflet 4.2s ease-in-out 1.2s infinite;
}

@keyframes vm-reflet {
    0%        { transform: skewX(-18deg) translateX(0); }
    18%, 100% { transform: skewX(-18deg) translateX(420%); }
}

/* Tous les champs remplis : le bouton s'allume d'un halo doré. */
.shop-order-form .vm-envoi.vm-envoi--achat.vm-envoi--pret {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 4px 0 #A56D00,
        0 0 0 4px rgba(255, 182, 6, .30),
        0 14px 26px -6px rgba(184, 122, 0, .6);
}

/* --- 2. Le récapitulatif, et le total en ticket de caisse --------------- */
.shop-order-form .vm-bloc--commande .shop-summary {
    margin-top: 22px;
    padding: 4px 16px 0;
    overflow: hidden;
}

.shop-order-form .vm-bloc--commande .checkout__item {
    align-items: center;
    padding: 10px 0;
}

.shop-order-form .vm-bloc--commande .checkout__item .title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #4A3D33;
}

.shop-order-form .vm-bloc--commande .checkout__item .title .vm-ar {
    display: block;
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #8A5B00;
}

.shop-order-form .vm-bloc--commande .checkout__item .price {
    font-size: 15px;
    font-weight: 700;
    color: #241C13;
    white-space: nowrap;
}

.shop-order-form .vm-bloc--commande .shop-summary .checkout__total {
    margin: 4px -16px 0;
    padding: 14px 16px;
    border-top: 2px dashed #E3C98A !important;
    background: #FFEFC7;
}

.shop-order-form .vm-bloc--commande .checkout__total .title { color: #241C13; font-size: 15px; font-weight: 700; }

.shop-order-form .checkout__total [data-total-amount] {
    display: inline-block;
    font-size: 24px;
    font-weight: 800;
    color: #8A5B00;
    white-space: nowrap;
}

.shop-order-form .checkout__total [data-total-amount].vm-maj { animation: vm-maj .38s ease-out; }

@keyframes vm-maj {
    40%  { transform: scale(1.08); color: #E09A00; }
    100% { transform: none; }
}

/* --- 3. Les états des champs -------------------------------------------- */
.shop-order-form .vm-champs .checkout-form__item .form__control:not(:placeholder-shown):valid:not(:focus):not([data-phone-field]),
.shop-order-form .vm-champs .vm-tel-ok .form__control:not(:focus) {
    border-color: #B87A00;
    background: #FFFFFF;
}

/* La coche, dans le libellé et pas dans le champ. */
.shop-order-form .vm-champs .checkout-form__item:has(.form__control:not([data-phone-field]):not(:placeholder-shown):valid) .vm-libelle__fr::after,
.shop-order-form .vm-champs .vm-tel-ok .vm-libelle__fr::after {
    content: "✓";
    display: inline-block;
    margin-inline-start: 6px;
    color: #1F7A45;
    font-weight: 800;
    animation: vm-coche .26s ease-out;
}

@keyframes vm-coche {
    0%   { transform: scale(.4); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: none; opacity: 1; }
}

/* Rouge seulement après que le client a touché au champ. */
.shop-order-form .vm-champs .checkout-form__item .form__control:user-invalid {
    border-color: #D14343;
    box-shadow: 0 0 0 3px rgba(209, 67, 67, .15);
}

/* --- 4. La ligne d'achat, sans libellés coupés -------------------------- */
.shop-order-form .vm-achat { gap: 10px; }

.shop-order-form .vm-qte__btn { min-width: 40px; min-height: 44px; padding: 0 10px; }
.shop-order-form .vm-qte__btn:active { background: #FFEFC7; transform: translateY(1px); }
.shop-order-form .vm-qte__valeur { min-width: 40px; }

.shop-order-form button.vm-panier[type="submit"] {
    font-size: 15px;
    line-height: 1.3;
}

/* --- 5. L'entrée de la carte (état caché posé par le JS seulement) ------ */
.shop-order-form .vm-anim {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

.shop-order-form .vm-anim.vm-vu,
.shop-order-form.vm-anim.vm-vu { opacity: 1; transform: none; }

.shop-order-form.vm-anim {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .shop-order-form .vm-envoi.vm-envoi--achat::after { animation: none; display: none; }
    .shop-order-form .checkout__total [data-total-amount].vm-maj,
    .shop-order-form .vm-champs .vm-libelle__fr::after { animation: none; }
    .shop-order-form .vm-anim,
    .shop-order-form.vm-anim { opacity: 1; transform: none; transition: none; }
}

/* Le libellé du bouton : le français, puis l'arabe dessous, plus petit. */
.shop-order-form .vm-envoi--achat .vm-envoi__texte { display: flex; flex-direction: column; align-items: center; }
.shop-order-form .vm-envoi--achat .vm-envoi__ar {
    display: block;
    margin: 1px 0 0;
    font-size: 15px;
    font-weight: 800;
    color: #3A2A00;
    line-height: 1.3;
}
.shop-order-form .vm-qte__btn { min-width: 38px; padding: 0 8px; }

@media (max-width: 480px) {
    .shop-order-form .vm-envoi.vm-envoi--achat { padding: 10px 10px; font-size: 15px; }
    .shop-order-form .vm-envoi--achat .vm-envoi__ar { font-size: 14.5px; }
    .shop-order-form .vm-qte__btn { min-width: 34px; padding: 0 6px; }
    .shop-order-form .vm-qte__valeur { min-width: 34px; }
}

/* ==========================================================================
   Page « Commander » (2026-09-28)
   ==========================================================================
   Le formulaire du panier reprend la carte dorée de la fiche produit (classe
   `vm-bloc--commande`, posée par order-form.blade.php quand `$carte` est
   fourni). Ici, seulement ce qui est propre à la page : la carte alignée sur
   le récapitulatif, le bouton seul sur sa ligne, et le récapitulatif habillé
   comme le total de la carte, en français et en arabe.
   ------------------------------------------------------------------------ */
.vm-commande .shop-order-form > .vm-bloc--commande.pq-quick-order { margin: 0; }

.vm-commande .vm-achat--seul { margin-top: 24px; }
.vm-commande .vm-achat--seul .vm-envoi.vm-envoi--achat { flex: 1 1 100%; width: 100%; min-height: 58px; }

.vm-commande .vm-ar {
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
    line-height: 1.55;
    letter-spacing: 0;
}

.vm-commande__head { margin-bottom: 18px; }
.vm-commande__lead { font-size: 15px; }
.vm-commande__lead .vm-ar { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: #8A5B00; }

/* Le récapitulatif : même crème, même liseré doré que la carte. */
.vm-commande__summary {
    border: 1.5px solid #E8D6AE;
    border-top: 4px solid #E09A00;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8EC 100%);
    box-shadow: 0 2px 4px rgba(36, 28, 19, .05), 0 14px 30px -14px rgba(184, 122, 0, .35);
}

.vm-summary-title,
.vm-summary-title * { letter-spacing: 0; }
.vm-summary-title .vm-ar { margin-inline-start: 6px; font-size: 15px; font-weight: 700; color: #8A5B00; }

.vm-commande__row .vm-ar { margin-inline-start: 4px; font-size: 13px; font-weight: 600; color: #8A5B00; }
.vm-commande__row.is-offert > span:last-child { font-weight: 700; color: #1F7A45; }

.vm-commande__trust li > span { display: block; }
.vm-commande__trust .vm-ar { display: block; font-size: 13px; font-weight: 500; color: #8A5B00; text-align: left; }

@media (max-width: 991.98px) {
    /* Sur téléphone, le récapitulatif passe avant : on le resserre pour que
       la carte de commande arrive vite sous le pouce. */
    .vm-commande { padding-block: 24px 40px; }
    /* L'introduction redit ce que disent déjà le récapitulatif et le bandeau
       de la carte : sur téléphone, elle ne ferait que repousser les champs. */
    .vm-commande__head { display: none; }
    .vm-commande__summary { padding: 18px 16px; }
    .vm-summary-title { margin-bottom: 10px; font-size: 17px; }
    .vm-commande__trust { gap: 8px; font-size: 13.5px; }
    .vm-commande__back { margin-top: 14px; }
}

@media (max-width: 480px) {
    .vm-commande .shop-order-form > .vm-bloc--commande.pq-quick-order { padding: 20px 14px 22px; }
}

/* ==========================================================================
   Lisibilité des champs (2026-09-28)
   ==========================================================================
   Demande du marchand : nom, téléphone, adresse… plus grands. Libellés
   14 → 17 px, saisie 16 → 18 px, champs plus hauts ; placé en fin de
   fichier pour l'emporter sur les passes précédentes. */
.shop-order-form .vm-champs label.vm-libelle {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 26px;
}

.shop-order-form .vm-libelle .vm-libelle__ar { font-size: 18px; }

.shop-order-form .vm-champs .checkout-form__item .form__control {
    min-height: 54px;
    padding: 12px 14px;
    font-size: 18px;
}

.shop-order-form .vm-champs .checkout-form__item .form__control::placeholder { font-size: 16.5px; }

.shop-order-form .vm-champs .vm-declencheur {
    min-height: 54px;
    font-size: 18px;
}

.shop-order-form .vm-champs .shop-hint { font-size: 14px; }