/* =============================================================================
   options-vente.css — habillage des 9 leviers de conversion de la fiche produit
   -----------------------------------------------------------------------------
   Vitamiel / thème Melipona. Ce fichier NE REMPLACE PAS vitamiel.css : il se
   charge APRÈS lui et ne fait que reprendre la main sur les blocs de vente
   (chrono, affluence, offres, arguments, FAQ, réassurance).

   Trois principes tiennent tout le fichier :

   1. UNE IDENTITÉ COMMUNE. Mêmes rayons, mêmes ombres, mêmes espacements,
      mêmes tailles de texte. Avant, chaque bloc avait son rayon (8, 10, 12 px)
      et sa bordure (pointillée rouge, pleine ambre, filet beige) : la colonne
      avait l'air d'un empilement de widgets d'origines différentes.

   2. UNE HIÉRARCHIE. Tout ne peut pas crier. L'URGENCE (compte à rebours,
      stock bas, heure de départ) est pleine et colorée ; l'OFFRE (paliers) est
      cadrée et lisible ; l'INFORMATIF (durée, commandes, FAQ, réassurance,
      affluence) reste discret, en gris chaud. Trois niveaux, pas plus.

   3. LA COULEUR APPARTIENT AU MARCHAND. Aucune teinte d'accent en dur : tout
      part de --shop-primary (avec repli sur les noms déjà utilisés par le
      thème, --pq-themes-color puis --primary-color). Les variantes de couleur
      par bloc se posent avec des classes utilitaires (voir § VARIANTES).

   NOTE D'INTÉGRATION — la règle `.vm-bloc:not(.vm-bloc--nu) > .vm-arguments`
   de vitamiel.css efface bordure/fond/padding des blocs placés dans une
   enveloppe `.vm-bloc` (pour éviter le cadre dans le cadre). On la respecte :
   le poids visuel est donc porté par les ÉLÉMENTS INTERNES (lignes, pastilles,
   puces), qui survivent à cet effacement, et non par le conteneur racine.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. JETONS COMMUNS
   Un seul endroit pour les rayons, ombres, espacements et couleurs neutres.
   -------------------------------------------------------------------------- */

:root {
    /* Accent du marchand. --shop-primary est le nom cible ; les deux replis
       couvrent l'existant du thème tant qu'il n'est pas généralisé. */
    --vm-accent:        var(--shop-primary, var(--pq-themes-color, var(--primary-color, #FFB606)));

    /* Neutres chauds de la maison (miel). */
    --vm-encre:         #241C15;   /* texte fort, chiffres */
    --vm-texte:         #4A4239;   /* texte courant */
    --vm-texte-doux:    #7A6E60;   /* texte secondaire, arabe, mentions */
    --vm-trait:         rgba(120, 90, 40, .16);
    --vm-trait-fort:    rgba(120, 90, 40, .30);
    --vm-fond:          #FFFFFF;
    --vm-fond-doux:     #FFFCF4;   /* crème : fonds de cartes informatives */

    /* Sémantique : ces trois-là ne sont PAS pilotables par le marchand,
       elles portent un sens (danger / gain / confiance) et doivent rester
       lisibles quelle que soit la couleur de la boutique. */
    --vm-rouge:         #D92B1F;
    --vm-vert:          #17804A;
    --vm-bleu:          #1D6FB8;

    /* Géométrie commune. */
    --vm-rayon:         14px;      /* cartes */
    --vm-rayon-s:       10px;      /* lignes, champs */
    --vm-rayon-pill:    999px;     /* pastilles */
    --vm-gap:           10px;
    --vm-bloc-espace:   18px;      /* respiration verticale entre blocs */

    /* Ombres : une seule famille, très basse, jamais de "drop shadow" 2014. */
    --vm-ombre:         0 1px 2px rgba(36, 28, 21, .05),
                        0 6px 18px -10px rgba(36, 28, 21, .22);
    --vm-ombre-forte:   0 2px 4px rgba(36, 28, 21, .07),
                        0 12px 28px -12px rgba(36, 28, 21, .35);

    /* Typo : une échelle courte, fluide entre mobile et desktop. */
    --vm-fs-titre:      clamp(14.5px, 1.6vw, 16px);
    --vm-fs-corps:      clamp(13.5px, 1.5vw, 15px);
    --vm-fs-petit:      clamp(11.5px, 1.2vw, 12.5px);
}

/* Le complément arabe : il accompagne, il ne concurrence pas. Ton plus doux et
   taille légèrement réduite partout, au lieu des trois traitements actuels. */
.vm-chrono .vm-ar,
.vm-arguments .vm-ar,
.vm-affluence .vm-ar,
.vm-offres .vm-ar,
.vm-faq .vm-ar,
.vm-reassurance .vm-ar {
    display: block;
    margin-inline-start: 0;
    font-size: .88em;
    font-weight: 500;
    color: var(--vm-texte-doux);
    opacity: .95;
}

/* Espacement vertical homogène entre les blocs de vente. */
.vm-chrono,
.vm-arguments,
.vm-offres,
.vm-faq,
.vm-reassurance {
    margin-block: var(--vm-bloc-espace);
}


/* -----------------------------------------------------------------------------
   2. VARIANTES DE COULEUR (classes utilitaires)

   Chaque bloc lit deux variables locales :
       --vm-c       la teinte pleine (bordure, texte fort, fond des pastilles)
       --vm-c-fond  le fond très pâle correspondant
   Une variante ne fait que réassigner ces deux-là. Ajouter une couleur = 4
   lignes, sans toucher au reste du fichier.

   Classes disponibles, posables sur .vm-chrono, .vm-arguments, .vm-offres,
   .vm-faq, .vm-reassurance, .vm-affluence :
       --rouge  --or  --vert  --bleu  --nuit  --neutre
   -------------------------------------------------------------------------- */

.vm-chrono,
.vm-arguments,
.vm-offres,
.vm-faq,
.vm-reassurance,
.vm-affluence {
    --vm-c: var(--vm-accent);
    --vm-c-fond: var(--vm-fond-doux);
}

/* color-mix donne un fond pâle DÉRIVÉ de la teinte : le marchand change sa
   couleur, les fonds suivent tout seuls. Les navigateurs qui ne connaissent pas
   color-mix ignorent la ligne et gardent le repli déclaré juste au-dessus. */
@supports (background: color-mix(in srgb, red 10%, white)) {
    .vm-chrono,
    .vm-arguments,
    .vm-offres,
    .vm-faq,
    .vm-reassurance,
    .vm-affluence {
        --vm-c-fond: color-mix(in srgb, var(--vm-c) 8%, #fff);
    }
}

.vm-chrono--rouge, .vm-arguments--rouge, .vm-offres--rouge,
.vm-faq--rouge, .vm-reassurance--rouge, .vm-affluence--rouge { --vm-c: var(--vm-rouge); }

.vm-chrono--or, .vm-arguments--or, .vm-offres--or,
.vm-faq--or, .vm-reassurance--or, .vm-affluence--or { --vm-c: #B87A00; }

.vm-chrono--vert, .vm-arguments--vert, .vm-offres--vert,
.vm-faq--vert, .vm-reassurance--vert, .vm-affluence--vert { --vm-c: var(--vm-vert); }

.vm-chrono--bleu, .vm-arguments--bleu, .vm-offres--bleu,
.vm-faq--bleu, .vm-reassurance--bleu, .vm-affluence--bleu { --vm-c: var(--vm-bleu); }

.vm-chrono--nuit, .vm-arguments--nuit, .vm-offres--nuit,
.vm-faq--nuit, .vm-reassurance--nuit, .vm-affluence--nuit { --vm-c: #2E2A24; }

.vm-chrono--neutre, .vm-arguments--neutre, .vm-offres--neutre,
.vm-faq--neutre, .vm-reassurance--neutre, .vm-affluence--neutre {
    --vm-c: #6B6155;
    --vm-c-fond: #FAF8F4;
}


/* =============================================================================
   3. NIVEAU URGENCE — LE COMPTE À REBOURS (.vm-chrono)

   Diagnostic de l'existant : bordure rouge en POINTILLÉS sur fond blanc, texte
   13,5 px, pastilles minuscules en rouge pâle. Le pointillé est le tic visuel
   des années 2010 (et lit "brouillon" plus que "urgent") ; surtout, les
   chiffres — la seule chose qui doit accrocher l'œil — étaient plus petits que
   la phrase qui les introduit. On inverse : la phrase explique, les CHIFFRES
   dominent.
   ========================================================================== */

/* Sélecteur doublé : reprend la main sur la règle `.vm-chrono` de vitamiel.css
   sans avoir à toucher ce fichier. Même procédé pour les autres racines. */
.vm-chrono.vm-chrono {
    --vm-c: var(--vm-rouge);            /* l'urgence est rouge par défaut */

    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px var(--vm-gap);
    padding: 14px 16px 14px 18px;
    border: 0;
    border-radius: var(--vm-rayon);
    background: var(--vm-c-fond);
    box-shadow: var(--vm-ombre);
    overflow: hidden;
}

/* Le liseré d'accent : plus net qu'une bordure complète, il signale sans
   encadrer, et il reste du bon côté en RTL grâce à inset-inline-start. */
.vm-chrono.vm-chrono::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--vm-c);
}

.vm-chrono .vm-chrono__icone {
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--vm-rayon-pill);
    background: var(--vm-fond);
    color: var(--vm-c);
    box-shadow: inset 0 0 0 1px var(--vm-trait);
}

.vm-chrono .vm-chrono__texte {
    grid-row: 1;
    min-width: 0;
    font-size: var(--vm-fs-corps);
    font-weight: 700;
    line-height: 1.3;
    color: var(--vm-encre);
}

/* Les pastilles passent sur leur propre rangée, pleine largeur : quatre blocs
   de chiffres alignés se lisent comme un cadran, alors que serrés en bout de
   ligne ils passaient pour une décoration. */
.vm-chrono .vm-chrono__pastilles {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.vm-chrono .vm-chrono__pastille {
    flex: 1 1 0;
    min-width: 46px;
    padding: 7px 4px;
    border-radius: var(--vm-rayon-s);
    background: var(--vm-c);
    color: #fff;
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" 1;
}

/* La pastille des secondes respire à chaque tic : un seul élément animé, très
   faible amplitude — assez pour dire "ça tourne", pas assez pour distraire. */
.vm-chrono .vm-chrono__pastille[data-chrono-secondes] {
    animation: vm-pouls 1s ease-in-out infinite;
}

@keyframes vm-pouls {
    0%, 70%, 100% { opacity: 1; }
    35%           { opacity: .78; }
}

/* L'échéance reste lue par les lecteurs d'écran (repris tel quel de
   vitamiel.css, car `position:absolute` a besoin du conteneur relatif). */
.vm-chrono .vm-chrono__echeance {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Desktop : tout tient sur une ligne, les pastilles reviennent à droite. */
@media (min-width: 576px) {
    .vm-chrono.vm-chrono {
        grid-template-columns: auto 1fr auto;
    }
    .vm-chrono .vm-chrono__pastilles {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
    }
    .vm-chrono .vm-chrono__pastille {
        flex: 0 0 auto;
        min-width: 44px;
    }
}


/* =============================================================================
   4. NIVEAU OFFRE — LES PALIERS DE QUANTITÉ (.vm-offres / .vm-offre)

   Diagnostic : la mécanique est bonne (lignes à cocher, prix à droite), mais
   l'état sélectionné ne se distinguait que par la couleur de bordure — sur un
   fond crème quasi identique à l'état de survol, le client ne voyait pas
   toujours ce qu'il avait choisi. Et `.vm-offre--rubanne { padding-top: 26px }`
   décalait UNE ligne sur deux : la liste n'était pas alignée.
   ========================================================================== */

.vm-offres.vm-offres { margin-block: var(--vm-bloc-espace); }

.vm-offres .vm-offres__titre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--vm-fs-titre);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--vm-encre);
}

.vm-offres .vm-offres__liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vm-offres .vm-offre {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    width: 100%;
    /* Hauteur réservée en haut pour TOUTES les lignes : rubannées ou non,
       elles gardent la même géométrie. */
    padding: 22px 14px 12px;
    border: 1px solid var(--vm-trait);
    border-radius: var(--vm-rayon);
    background: var(--vm-fond);
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vm-offres .vm-offre--rubanne { padding-top: 22px; }

.vm-offres .vm-offre:hover {
    border-color: var(--vm-trait-fort);
    background: var(--vm-fond);
    box-shadow: var(--vm-ombre);
}

/* L'état choisi : bordure pleine + halo de la teinte + fond teinté. Trois
   signaux au lieu d'un — visible même à contre-jour sur un téléphone. */
.vm-offres .vm-offre.is-active {
    border-color: var(--vm-c);
    background: var(--vm-c-fond);
    box-shadow: 0 0 0 2px var(--vm-c) inset, var(--vm-ombre);
}

.vm-offres .vm-offre:focus-visible {
    outline: 2px solid var(--vm-c);
    outline-offset: 2px;
}

.vm-offres .vm-offre__coche {
    width: 20px;
    height: 20px;
    border: 2px solid var(--vm-trait-fort);
    border-radius: 50%;
    background: var(--vm-fond);
    flex-shrink: 0;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.vm-offres .vm-offre.is-active .vm-offre__coche {
    border-color: var(--vm-c);
    box-shadow: inset 0 0 0 5px var(--vm-c);
}

.vm-offres .vm-offre__texte {
    font-size: var(--vm-fs-corps);
    font-weight: 600;
    line-height: 1.35;
    color: var(--vm-encre);
}

.vm-offres .vm-offre__prix {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    white-space: nowrap;
}

/* Le total est le chiffre que le client compare : il doit être le plus gros
   caractère de la ligne, et le seul en tabular-nums pour que les colonnes de
   prix s'alignent verticalement d'un palier à l'autre. */
.vm-offres .vm-offre__total {
    font-size: clamp(16px, 4.4vw, 19px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vm-encre);
    font-variant-numeric: tabular-nums;
}

.vm-offres .vm-offre__barre {
    font-size: var(--vm-fs-petit);
    color: var(--vm-texte-doux);
    font-variant-numeric: tabular-nums;
}

/* Le ruban : bandeau plein dans l'angle, pas une étiquette flottante. */
.vm-offres .vm-offre__ruban {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    padding: 3px 12px;
    border-end-end-radius: var(--vm-rayon-s);
    background: var(--vm-rouge);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* L'économie : c'est un GAIN, donc vert, et sous forme de pastille — elle sort
   du gris du texte courant sans voler la vedette au total. */
.vm-offres .vm-offre__gain {
    grid-column: 2 / -1;
    justify-self: start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--vm-rayon-pill);
    background: rgba(23, 128, 74, .10);
    color: var(--vm-vert);
    font-size: var(--vm-fs-petit);
    font-weight: 800;
}

@media (max-width: 400px) {
    .vm-offres .vm-offre { column-gap: 9px; padding-inline: 11px; }
}


/* =============================================================================
   5. LES ARGUMENTS DE VENTE (.vm-arguments / .vm-argument)

   Diagnostic : une carte crème avec six lignes au même poids typographique,
   différenciées seulement par la couleur du texte (rouge / vert / gris). Or un
   texte coloré sur fond coloré, en 14 px, ne "tranche" pas : à un mètre, les
   six lignes se ressemblent. Le stock bas — l'argument le plus fort de la
   page — passait inaperçu. On sépare : les lignes urgentes deviennent des
   BANDEAUX pleins, les lignes informatives restent des puces nues.
   ========================================================================== */

.vm-arguments.vm-arguments {
    list-style: none;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: var(--vm-fs-corps);
    color: var(--vm-texte);
}

.vm-arguments .vm-argument {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--vm-rayon-s);
    background: var(--vm-fond-doux);
    line-height: 1.4;
}

.vm-arguments .vm-argument__icone {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.3;
    /* Les emojis du gabarit gardent leurs couleurs natives : on les cadre
       seulement pour que les lignes s'alignent au pixel près. */
    width: 20px;
    text-align: center;
}

.vm-arguments .vm-argument strong {
    color: var(--vm-encre);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* --- URGENT : le seul niveau qui a le droit d'être plein. ---------------- */
.vm-arguments .vm-argument--urgent {
    background: var(--vm-rouge);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--vm-ombre);
}

.vm-arguments .vm-argument--urgent strong { color: #fff; }
.vm-arguments .vm-argument--urgent .vm-ar { color: rgba(255, 255, 255, .82); }

/* --- CADEAU : un gain, donc vert, mais en teinte pâle : c'est un bonus, pas
       une urgence. Il ne doit jamais rivaliser avec le bandeau rouge. ------ */
.vm-arguments .vm-argument--cadeau {
    background: rgba(23, 128, 74, .09);
    color: var(--vm-vert);
    font-weight: 600;
}

.vm-arguments .vm-argument--cadeau strong { color: var(--vm-vert); }

/* --- DURÉE D'UN POT : une phrase-titre, puis le détail (dose, autres
       formats, cure) en lignes plus discrètes. ---------------------------- */
.vm-arguments .vm-duree {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vm-arguments .vm-duree__ligne {
    font-size: .92em;
    color: var(--vm-texte-doux);
}

.vm-arguments .vm-duree__cure { color: var(--vm-texte); }

/* --- Variante douce : si le marchand trouve le bandeau plein trop agressif,
       `.vm-arguments--doux` ramène l'urgence à un simple liseré. ---------- */
.vm-arguments--doux .vm-argument--urgent {
    background: rgba(217, 43, 31, .08);
    color: var(--vm-rouge);
    box-shadow: inset 3px 0 0 var(--vm-rouge);
}

.vm-arguments--doux .vm-argument--urgent strong { color: var(--vm-rouge); }
.vm-arguments--doux .vm-argument--urgent .vm-ar { color: var(--vm-texte-doux); }


/* =============================================================================
   6. L'AFFLUENCE (.vm-affluence)

   Diagnostic : phrase centrée 13 px avec le nombre dans un rectangle ambre.
   Deux défauts : la pastille ambre est la MÊME couleur que le bouton d'achat
   (elle lui vole de l'attention), et la ligne flotte sans ancrage. On en fait
   une mention discrète — c'est une preuve sociale, pas un appel à l'action —
   avec un point vivant en tête.
   ========================================================================== */

.vm-affluence.vm-affluence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 7px 12px;
    border-radius: var(--vm-rayon-pill);
    background: var(--vm-fond-doux);
    font-size: var(--vm-fs-petit);
    color: var(--vm-texte-doux);
    text-align: center;
}

/* Le point "en direct" : deux pixels qui valent mieux qu'une pastille pleine. */
.vm-affluence.vm-affluence::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vm-vert);
    box-shadow: 0 0 0 0 rgba(23, 128, 74, .45);
    animation: vm-halo 2.4s ease-out infinite;
}

@keyframes vm-halo {
    0%   { box-shadow: 0 0 0 0   rgba(23, 128, 74, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(23, 128, 74, 0); }
    100% { box-shadow: 0 0 0 0   rgba(23, 128, 74, 0); }
}

.vm-affluence .vm-affluence__nombre {
    padding: 0;
    border-radius: 0;
    background: none;                 /* plus de rectangle ambre concurrent */
    color: var(--vm-encre);
    font-size: 1.15em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vm-affluence .vm-ar { display: inline; margin-inline-start: 6px; }


/* =============================================================================
   7. LA RÉASSURANCE (.vm-reassurance)

   Diagnostic : trois lignes empilées, séparées par des filets, icônes vertes
   et ambre mélangées sans logique. En mobile c'est correct ; en desktop, trois
   lignes pleine largeur pour neuf mots chacune, c'est du vide. On passe en
   grille auto : empilé sous 576 px, trois colonnes au-delà. Les icônes
   reçoivent un cercle, ce qui les pose et les rend cliquables à l'œil.
   ========================================================================== */

.vm-reassurance.vm-reassurance {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--vm-trait);
    border-radius: var(--vm-rayon);
    background: var(--vm-fond);
}

.vm-reassurance .vm-reassurance__ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border: 0;
    font-size: var(--vm-fs-corps);
    line-height: 1.4;
    color: var(--vm-texte);
}

/* Le filet ne sépare que dans l'empilement vertical : en grille, il ferait
   trois traits orphelins. */
.vm-reassurance .vm-reassurance__ligne + .vm-reassurance__ligne {
    border-top: 1px solid var(--vm-trait);
}

.vm-reassurance .vm-reassurance__ligne i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: var(--vm-rayon-pill);
    background: var(--vm-c-fond);
    color: var(--vm-c);
    font-size: 13px;
}

/* Le paiement à la livraison lève le dernier doute : il reste le plus fort,
   et prend le vert de la confiance plutôt que l'ambre de la marque. */
.vm-reassurance .vm-reassurance__ligne--paiement {
    font-weight: 700;
    color: var(--vm-encre);
}

.vm-reassurance .vm-reassurance__ligne--paiement i {
    background: rgba(23, 128, 74, .10);
    color: var(--vm-vert);
}

@media (min-width: 576px) {
    .vm-reassurance.vm-reassurance {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 12px;
    }
    .vm-reassurance .vm-reassurance__ligne {
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 6px 8px;
        text-align: center;
        font-size: var(--vm-fs-petit);
    }
    .vm-reassurance .vm-reassurance__ligne + .vm-reassurance__ligne {
        border-top: 0;
        border-inline-start: 1px solid var(--vm-trait);
    }
    .vm-reassurance .vm-reassurance__ligne .vm-ar { display: block; }
}

/* Variante compacte, à poser quand le bloc vit juste sous le bouton d'achat et
   ne doit pas repousser le formulaire : `.vm-reassurance--compact`. */
.vm-reassurance--compact .vm-reassurance__ligne i { width: 24px; height: 24px; font-size: 11px; }
.vm-reassurance--compact .vm-reassurance__ligne { padding-block: 5px; }
.vm-reassurance--compact .vm-ar { display: none; }


/* =============================================================================
   8. LA FAQ (.vm-faq)

   Diagnostic : filets horizontaux nus + chevron en bordures CSS tournées. Ça
   fonctionne, mais rien ne signale qu'une réponse s'ouvre tant qu'on n'a pas
   cliqué, et la zone cliquable s'arrête au texte. On passe en cartes fines
   avec une zone de clic pleine largeur, et un signe + / − plus explicite qu'un
   chevron à 45°. Le bloc reste le plus SOBRE des neuf : c'est de
   l'informatif — il ne doit pas concurrencer l'offre.
   ========================================================================== */

.vm-faq .vm-faq__titre {
    margin: 0 0 10px;
    font-size: var(--vm-fs-titre);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--vm-encre);
}

.vm-faq .vm-faq__item {
    margin-bottom: 6px;
    border: 1px solid var(--vm-trait);
    border-radius: var(--vm-rayon-s);
    background: var(--vm-fond);
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease;
}

.vm-faq .vm-faq__item:first-of-type { border-top: 1px solid var(--vm-trait); }
.vm-faq .vm-faq__item:last-of-type  { margin-bottom: 0; }

.vm-faq .vm-faq__item[open] {
    border-color: var(--vm-trait-fort);
    background: var(--vm-c-fond);
}

.vm-faq .vm-faq__question {
    position: relative;
    padding: 12px 40px 12px 14px;
    font-size: var(--vm-fs-corps);
    font-weight: 700;
    color: var(--vm-encre);
    cursor: pointer;
    list-style: none;
}

.vm-faq .vm-faq__question::-webkit-details-marker { display: none; }
.vm-faq .vm-faq__question::marker { content: none; }

.vm-faq .vm-faq__question:focus-visible {
    outline: 2px solid var(--vm-c);
    outline-offset: -2px;
}

/* Le signe : une croix en dégradé conique serait un caprice ; deux barres en
   background linéaire suffisent, et la barre verticale disparaît à
   l'ouverture — un "moins" universellement compris. */
.vm-faq .vm-faq__question::after {
    content: '';
    position: absolute;
    inset-inline-end: 13px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin: 0;
    border: 0;
    transform: translateY(-50%);
    background:
        linear-gradient(var(--vm-c), var(--vm-c)) center / 13px 2px no-repeat,
        linear-gradient(var(--vm-c), var(--vm-c)) center / 2px 13px no-repeat;
    transition: transform .18s ease, opacity .18s ease;
}

.vm-faq .vm-faq__item[open] .vm-faq__question::after {
    transform: translateY(-50%) rotate(90deg);
    background:
        linear-gradient(var(--vm-c), var(--vm-c)) center / 13px 2px no-repeat;
}

.vm-faq .vm-faq__reponse {
    padding: 0 14px 13px;
    font-size: var(--vm-fs-corps);
    line-height: 1.6;
    color: var(--vm-texte);
}


/* =============================================================================
   9. DANS UNE ENVELOPPE .vm-bloc

   vitamiel.css efface bordure et fond des blocs posés dans une `.vm-bloc` pour
   éviter le cadre dans le cadre. On ne combat pas cette règle : on se contente
   d'annuler la marge verticale (l'enveloppe fournit déjà son padding) et de
   rendre au chrono sa carte, qui est son identité.
   ========================================================================== */

.vm-bloc > .vm-chrono,
.vm-bloc > .vm-arguments,
.vm-bloc > .vm-offres,
.vm-bloc > .vm-faq,
.vm-bloc > .vm-reassurance,
.vm-bloc > .vm-affluence {
    margin-block: 0;
}

/* L'enveloppe du chrono s'efface déjà (`.vm-bloc--chrono`) : on rétablit la
   carte pleine, car sans elle le compte à rebours perd tout relief. */
.vm-bloc--chrono > .vm-chrono.vm-chrono {
    background: var(--vm-c-fond);
    box-shadow: var(--vm-ombre-forte);
}


/* =============================================================================
   10. MOUVEMENT RÉDUIT

   Une seule règle, en fin de fichier, qui coupe TOUT ce que ce fichier anime.
   Les blocs restent entièrement lisibles sans animation : rien ici ne porte
   d'information par le mouvement seul.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .vm-chrono .vm-chrono__pastille[data-chrono-secondes],
    .vm-affluence.vm-affluence::before {
        animation: none;
    }

    .vm-offres .vm-offre,
    .vm-offres .vm-offre__coche,
    .vm-faq .vm-faq__item,
    .vm-faq .vm-faq__question::after {
        transition: none;
    }
}

/* =============================================================================
   5 bis. LES FAMILLES D'ARGUMENTS (.vm-argument--f-*)

   Diagnostic : avec trois ou quatre leviers allumés, la colonne se lisait. Avec
   onze, elle ne se lit plus — onze lignes du même poids, deux bandeaux rouges
   qui se disputent l'œil, et le formulaire de commande repoussé d'un écran et
   demi vers le bas. Allumer plus d'arguments faisait vendre moins.

   On ne coupe rien : on RANGE. Chaque argument porte sa famille depuis le blade
   (`vm-argument--f-urgence`, `--f-preuve`, `--f-reassurance`, `--f-bandeau`) et
   `order` les regroupe visuellement quel que soit leur ordre d'écriture. Trois
   registres, du plus fort au plus calme :

     1. URGENCE      pleine largeur, couleur pleine — mais UNE SEULE. La
                     deuxième urgence redescend en liseré : deux bandeaux
                     pleins ne crient pas deux fois plus fort, ils s'annulent.
     2. PREUVE       une bande de chiffres, deux par ligne, petite et sobre.
                     Ce sont des faits, pas des cris ; ils rassurent par le
                     nombre, pas par la taille.
     3. RÉASSURANCE  deux colonnes d'icônes. Gain de hauteur d'environ 40 %,
                     et le regard les prend d'un bloc plutôt qu'une par une.
     4. BANDEAU      le mot du marchand, en dernier, à sa propre couleur.
   ========================================================================== */

.vm-arguments.vm-arguments {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
}

/* Par défaut, un argument sans famille occupe toute la largeur : une option
   ajoutée plus tard reste lisible même si personne n'a pensé à la ranger. */
.vm-arguments .vm-argument { flex: 1 1 100%; order: 3; }

.vm-arguments .vm-argument--f-urgence     { order: 1; flex: 1 1 100%; }
.vm-arguments .vm-argument--f-preuve      { order: 2; flex: 1 1 calc(50% - 3px); }
.vm-arguments .vm-argument--f-reassurance { order: 3; flex: 1 1 calc(50% - 3px); }
.vm-arguments .vm-argument--f-bandeau     { order: 4; flex: 1 1 100%; }

/* --- 1. URGENCE : une seule pleine ---------------------------------------
   `~` atteint toutes les urgences SAUF la première rencontrée dans le DOM.
   La plus forte garde le fond plein ; les suivantes deviennent un liseré. */
.vm-arguments .vm-argument--f-urgence ~ .vm-argument--f-urgence.vm-argument--urgent {
    background: rgba(217, 43, 31, .07);
    color: var(--vm-rouge);
    box-shadow: inset 3px 0 0 var(--vm-rouge);
    font-weight: 600;
}

.vm-arguments .vm-argument--f-urgence ~ .vm-argument--f-urgence.vm-argument--urgent strong { color: var(--vm-rouge); }
.vm-arguments .vm-argument--f-urgence ~ .vm-argument--f-urgence.vm-argument--urgent .vm-ar { color: var(--vm-texte-doux); }

/* --- 2. PREUVE : des chiffres, pas des slogans --------------------------- */
.vm-arguments .vm-argument--f-preuve {
    background: transparent;
    border: 1px solid var(--vm-trait, rgba(15, 23, 42, .1));
    padding: 7px 10px;
    font-size: calc(var(--vm-fs-corps) - 1px);
    color: var(--vm-texte-doux);
    align-items: center;
}

.vm-arguments .vm-argument--f-preuve .vm-argument__icone { font-size: 14px; width: 17px; opacity: .75; }
.vm-arguments .vm-argument--f-preuve strong { color: var(--vm-encre); font-weight: 800; }

/* --- 3. RÉASSURANCE : le calme, en deux colonnes ------------------------- */
.vm-arguments .vm-argument--f-reassurance {
    background: var(--vm-fond-doux);
    align-items: center;
}

/* --- 4. BANDEAU : le mot du marchand ------------------------------------- */
.vm-arguments .vm-argument--f-bandeau {
    background: color-mix(in srgb, var(--vm-c, var(--vm-accent)) 9%, transparent);
    box-shadow: inset 3px 0 0 var(--vm-c, var(--vm-accent));
    font-weight: 600;
}

/* --- L'arabe reste sur SA ligne. En `inline`, il s'intercalait la ou le texte
       francais passait a la ligne — « 289 commandes ces 7 derniers <arabe>
       jours » — et coupait la phrase francaise en deux. Un fragment RTL pose au
       milieu d'un paragraphe LTR tombe la ou le retour a la ligne veut bien ;
       en bloc, il tombe toujours dessous. On le rend simplement plus discret :
       en deux colonnes, la hauteur est deja divisee par deux. ------------- */
.vm-arguments .vm-argument--f-preuve .vm-ar,
.vm-arguments .vm-argument--f-reassurance .vm-ar {
    display: block;
    margin-inline-start: 0;
    margin-block-start: 1px;
    font-size: 11px;
    line-height: 1.35;
    opacity: .65;
}

/* --- Mobile : une seule colonne. Deux colonnes sous 560 px donnent des
       lignes de quatre mots qui se coupent n'importe où. ------------------- */
@media (max-width: 560px) {
    .vm-arguments .vm-argument--f-preuve,
    .vm-arguments .vm-argument--f-reassurance { flex: 1 1 100%; }

}

/* =============================================================================
   4 bis. LES PALIERS, À L'ÉCHELLE (.vm-offre compacte)

   Diagnostic : avec un ou deux paliers, la ligne aérée se lisait bien. Avec
   sept, l'échelle mesurait 918 px — un écran entier avant d'atteindre le
   formulaire de commande. Trois coûts, par ligne, pour rien :

     1. « Acheter 3 à 165,000 DT seulement » écrivait le total que la colonne
        de droite affiche déjà en gros. Le blade ne dit plus que « Acheter 3 ».
     2. « Vous économisez X » en pastille pleine largeur prenait sa propre
        rangée : 40 px par palier. Elle passe sous le prix, en petit.
     3. 22 px de padding haut réservés au ruban sur TOUTES les lignes, alors
        qu'une ou deux seulement en portent un.

   Ce qu'on AJOUTE au passage : le prix à l'unité. C'est lui qui se compare
   d'un palier à l'autre — il était calculé, puis caché derrière `hidden`.
   ========================================================================== */

/* Le padding haut ne sert qu'aux lignes rubannées. */
.vm-offres .vm-offre { padding: 10px 14px; row-gap: 0; }
.vm-offres .vm-offre--rubanne { padding-top: 24px; }

/* Le libellé et le prix unitaire tiennent la colonne du milieu. */
.vm-offres .vm-offre__texte { grid-column: 2; }

.vm-offres .vm-offre__unitaire {
    grid-column: 2;
    font-size: var(--vm-fs-petit);
    font-weight: 500;
    color: var(--vm-texte-doux);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/* L'économie rejoint la colonne des prix, sous le total barré : le client lit
   la pile « total / ancien prix / gain » d'un seul regard vertical, au lieu de
   sauter d'un bord à l'autre de la ligne. */
.vm-offres .vm-offre__gain {
    grid-column: 3;
    justify-self: end;
    margin-top: 1px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: var(--vm-fs-petit);
    font-weight: 800;
    color: var(--vm-vert);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le prix barré et le gain se suivent : on les sort du conteneur en colonne
   pour qu'ils s'empilent dans la grille, alignés a droite. */
.vm-offres .vm-offre__prix { grid-column: 3; row-gap: 0; }

/* Pas de hauteur bornee ici. L'essai precedent posait `max-height: 62vh` +
   `overflow-y: auto` sur cette liste : comme c'est un conteneur flex en
   colonne, ses enfants heritent de `flex-shrink: 1` et se faisaient ecraser
   des que le total depassait la borne — la rangee de grille mesurait bien
   50 px, la carte n'en faisait que 44, et le gain passait sous le
   `overflow: hidden`. Un defilement imbrique se pilote mal au doigt de toute
   facon : la page defile, la liste non. */
.vm-offres .vm-offres__liste { gap: 6px; }

@media (max-width: 400px) {
    .vm-offres .vm-offre { padding-inline: 11px; }
    .vm-offres .vm-offre__unitaire { font-size: 11px; }
}

/* Le gain est désormais un enfant de .vm-offre__prix : il suit la pile, plus
   besoin de le placer dans la grille. Et la ligne respire à nouveau — 35 px
   était trop serré pour trois informations empilées. */
.vm-offres .vm-offre { padding: 12px 14px; align-items: center; }
.vm-offres .vm-offre--rubanne { padding-top: 26px; }

.vm-offres .vm-offre__gain {
    grid-column: auto;
    justify-self: auto;
    margin-top: 0;
}

/* La liste est un conteneur flex en colonne AVEC une hauteur bornée : ses
   enfants héritent donc de `flex-shrink: 1` et se laissent écraser jusqu'à
   couper le gain sous le prix. La carte doit garder sa hauteur naturelle et
   c'est la LISTE qui défile. */
.vm-offres .vm-offres__liste > .vm-offre { flex-shrink: 0; }

/* La colonne des prix empilait trois lignes — total, ancien prix, gain — et
   chaque palier retombait à 76 px. L'ancien prix et le gain disent la même
   chose (ce que le palier fait gagner) : ils tiennent sur UNE ligne, côte à
   côte, sous le total. Deux lignes au lieu de trois. */
.vm-offres .vm-offre__prix {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 7px;
}

.vm-offres .vm-offre__total { flex: 0 0 100%; text-align: end; }

/* Le prix à l'unité prend sa propre ligne sous le libellé. En flux inline il
   se coupait n'importe où — « Acheter 4 soit 52,000 / DT l'unité » — et la
   coupure changeait d'un palier à l'autre, si bien que la colonne ne
   s'alignait plus. Deux lignes à gauche, deux à droite : la carte est carrée. */
.vm-offres .vm-offre__unitaire {
    display: block;
    margin-top: 1px;
    line-height: 1.25;
    white-space: nowrap;
}

.vm-offres .vm-offre__texte { line-height: 1.25; }

/* Le ruban doit épouser son texte. En position absolue dans une carte en
   grille il s'étalait sur toute la largeur et pesait autant qu'un bandeau
   d'alerte — « LE + CHOISI » criait plus fort que le prix qu'il désigne. */
.vm-offres .vm-offre__ruban {
    width: fit-content;
    max-width: calc(100% - 20px);
    border-end-end-radius: var(--vm-rayon-s);
    border-start-start-radius: var(--vm-rayon-s);
}