/* ==========================================================================
   Commande en grande quantité (29/09/2026) : page /devis-grande-quantite/
   Formulaire de demande, accusé, devis imprimable.

   MÊME LANGUE QUE LE PANIER ET LE TUNNEL (« cartes claires », bio-panier-b.css et bio-checkout-b.css), à la demande
   du gérant (« garde la même DA que tout le site ») : UN seul vert, le jeton --bio-green, et ses teintes par
   transparence ; textes en brun ; cartes blanches de 26 px à ombre douce ; filets pointillés ; champs de 52 px ;
   options en cartes cochées à l'anis ; gros bouton anis au rond brun et à la flèche ; icônes au feutre.
   Aucune couleur verte écrite en dur. Rien sous 13 px. Un état ne se lit jamais par la couleur seule
   (« Erreur : », « Exclu : »). Sans :has(), tout reste visible et le serveur trie.
   ========================================================================== */

.bio-dv {
    --dv-brun: var(--bio-brown, #422E2D);
    --dv-brun2: var(--bio-brown-dark, #372726);
    --dv-anis: var(--bio-green, #A8C400);
    --dv-teinte: rgba(var(--bio-green-rgb, 168, 196, 0), .14);
    --dv-choisi: rgba(var(--bio-green-rgb, 168, 196, 0), .05);
    --dv-survol: rgba(var(--bio-green-rgb, 168, 196, 0), .5);
    --dv-anneau: 0 0 0 3px rgba(var(--bio-green-rgb, 168, 196, 0), .22);
    --dv-creme: var(--bio-cream, #F9F7F2);
    --dv-gris: #6f6660;
    --dv-bord: var(--bio-border-warm, #e8e3dc);
    --dv-bord2: #ddd4c7;
    --dv-champ: #e3dccf;
    --dv-ombre: 0 18px 48px rgba(66, 46, 45, .08);
    --dv-erreur: #a3281f;
    box-sizing: border-box;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 16px 64px;
    color: var(--dv-brun);
    font-family: var(--bio-font, 'Quicksand', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.55;
}
.bio-dv *, .bio-dv *::before, .bio-dv *::after { box-sizing: border-box; }

/* En-tête : petit intitulé, titre */
.bio-dv-entete { max-width: 780px; margin: 0 0 24px; }
.bio-dv-surtitre {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--dv-teinte);
    color: var(--dv-brun);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.bio-dv-titre { margin: 0 0 10px; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--dv-brun); }
.bio-dv-intro { margin: 0; font-size: 17px; color: var(--dv-gris); }

/* Mise en page : formulaire + encadré (dessous sur téléphone) */
.bio-dv-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 980px) {
    .bio-dv-grille { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
    .bio-dv-aside { position: sticky; top: 110px; }
}

.bio-dv-carte {
    min-width: 0;
    margin: 0;
    padding: 22px 18px;
    border: 1px solid var(--dv-bord);
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--dv-ombre);
}
@media (min-width: 600px) { .bio-dv-carte { padding: 28px; } }

/* Sections : titre à la tuile d'icône au feutre, filet pointillé dessous */
.bio-dv-section { min-width: 0; margin: 0 0 30px; }
.bio-dv-section:last-of-type { margin-bottom: 18px; }
.bio-dv-h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1.5px dashed var(--dv-bord2);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dv-brun);
}
.bio-dv-tuile {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--dv-teinte) center / 34px 34px no-repeat url("../icones/feutre/sac.svg");
}
.bio-dv-tuile--client { background-image: url("../icones/feutre/client.svg"); }
.bio-dv-tuile--camion { background-image: url("../icones/feutre/camion.svg"); }
.bio-dv-tuile--telephone { background-image: url("../icones/feutre/telephone.svg"); }
.bio-dv-tuile--carnet { background-image: url("../icones/feutre/carnet.svg"); }
.bio-dv-tuile--enveloppe { background-image: url("../icones/feutre/enveloppe.svg"); }
.bio-dv-h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--dv-brun); }
.bio-dv-texte { margin: 0 0 12px; }
.bio-dv-texte--doux { color: var(--dv-gris); font-size: 15px; }
.bio-dv-sous { margin: -6px 0 12px; color: var(--dv-gris); font-size: 15px; }

/* Messages */
.bio-dv-alerte {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 0;
    border-radius: 18px;
    background: var(--dv-teinte);
    color: var(--dv-brun);
    font-size: 16px;
}
.bio-dv-alerte--erreur { background: #fdf1f0; box-shadow: inset 0 0 0 1.5px rgba(163, 40, 31, .35); }
.bio-dv-alerte-mot { font-weight: 700; }

/* Champs */
.bio-dv-form { margin: 0; }
.bio-dv-champ { min-width: 0; margin: 0 0 18px; }
.bio-dv-libelle { display: block; margin: 0 0 7px; padding: 0; font-size: 15px; font-weight: 700; color: var(--dv-brun); }
.bio-dv-requis { font-weight: 500; font-size: 13px; color: var(--dv-gris); }
.bio-dv .bio-dv-saisie {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--dv-champ);
    border-radius: 14px;
    background: #fff;
    color: var(--dv-brun);
    font: inherit;
    font-size: 16px; /* 16 px : iOS ne zoome pas */
    line-height: 1.3;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bio-dv .bio-dv-saisie--zone { height: 104px; min-height: 104px; padding: 12px 16px; resize: vertical; }
.bio-dv .bio-dv-saisie:hover { border-color: var(--dv-survol); }
.bio-dv .bio-dv-saisie:focus { outline: 0; border-color: var(--dv-anis); box-shadow: var(--dv-anneau); }
.bio-dv-champ--erreur .bio-dv-saisie { border: 2px solid var(--dv-erreur); }
.bio-dv-aide-champ { margin: 7px 0 0; font-size: 14px; color: var(--dv-gris); }
.bio-dv-erreur { margin: 7px 0 0; font-size: 15px; font-weight: 600; color: var(--dv-erreur); }
.bio-dv-duo { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 600px) { .bio-dv-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Choix : cartes à cocher, cochées à l'anis (options de réception du tunnel) */
.bio-dv-choix { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.bio-dv-choix > .bio-dv-libelle { margin-bottom: 10px; }
.bio-dv-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    margin: 0 0 10px;
    padding: 14px 18px 14px 16px;
    border: 2px solid var(--dv-bord);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bio-dv-option:hover { border-color: var(--dv-survol); }
.bio-dv-option:has(.bio-dv-radio:checked) { border-color: var(--dv-anis); background: var(--dv-choisi); box-shadow: var(--dv-anneau); }
.bio-dv .bio-dv-radio {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid #cbbfad;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.bio-dv .bio-dv-radio:checked { border-color: var(--dv-anis); background: radial-gradient(circle, var(--dv-brun2) 0 5px, #fff 5.5px); }
.bio-dv .bio-dv-radio:focus-visible, .bio-dv .bio-dv-case:focus-visible { outline: 3px solid rgba(var(--bio-green-rgb, 168, 196, 0), .45); outline-offset: 2px; }
.bio-dv-option-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bio-dv-option-titre { font-size: 16px; font-weight: 700; color: var(--dv-brun); }
.bio-dv-option-detail { font-size: 14px; color: var(--dv-gris); }

/* Ce qui ne concerne que les professionnels ou la palette : masqué quand un autre choix est fait. */
.bio-dv-form:has(#bio-dv-profil-particulier:checked) .bio-dv-pro,
.bio-dv-form:has(#bio-dv-profil-particulier:checked) .bio-dv-option--palette,
.bio-dv-form:has(#bio-dv-profil-pro:checked) .bio-dv-majeur,
.bio-dv-form:not(:has(#bio-dv-mode-palette:checked)) .bio-dv-reception { display: none; }

/* Case de majorité : la rangée à cocher du tunnel */
.bio-dv-majeur { padding: 14px 16px; border: 2px solid var(--dv-bord); border-radius: 18px; background: #fff; }
.bio-dv-majeur:has(.bio-dv-case:checked) { border-color: var(--dv-anis); background: var(--dv-choisi); }
.bio-dv-case-libelle { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; cursor: pointer; }
.bio-dv .bio-dv-case { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--dv-brun2); }

/* Produits repris du panier : lignes crème du panier */
.bio-dv-lignes { list-style: none; margin: 0 0 8px; padding: 0; }
.bio-dv-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    column-gap: 16px;
    align-items: center;
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid var(--dv-bord);
    border-radius: 18px;
    background: var(--dv-creme);
}
.bio-dv-ligne--exclue { grid-template-columns: minmax(0, 1fr); background: #fff; border-style: dashed; }
.bio-dv-ligne-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bio-dv-ligne-nom { font-weight: 700; overflow-wrap: anywhere; }
.bio-dv-ligne--exclue .bio-dv-ligne-nom { color: var(--dv-gris); text-decoration: line-through; text-decoration-thickness: 1px; }
.bio-dv-ligne-prix { font-size: 14px; color: var(--dv-gris); font-variant-numeric: tabular-nums; }
.bio-dv-etat { font-size: 14px; color: var(--dv-gris); }
.bio-dv-ligne--exclue .bio-dv-etat { color: var(--dv-erreur); font-weight: 600; }
.bio-dv-ligne-qte { min-width: 0; }
.bio-dv-qte-libelle { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--dv-gris); text-align: right; }
.bio-dv .bio-dv-saisie--qte { height: 48px; padding: 0 14px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Piège à robots : hors écran, jamais atteint au clavier */
.bio-dv-pot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.bio-dv .screen-reader-text {
    position: absolute !important; 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;
}

.bio-dv-rgpd { margin: 6px 0 0; padding-top: 16px; border-top: 1.5px dashed var(--dv-bord2); font-size: 14px; color: var(--dv-gris); }

/* Boutons : le gros bouton anis du tunnel, rond brun et flèche au vert du site */
.bio-dv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 20px 0 0; }
.bio-dv .bio-dv-bouton,
#bio-dv-principal .bio-dv button.bio-dv-bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    margin: 0;
    padding: 8px 9px 8px 22px;
    border: 0;
    border-radius: 18px;
    background: var(--dv-anis);
    color: var(--dv-brun2) !important;
    box-shadow: 0 6px 18px rgba(var(--bio-green-rgb, 168, 196, 0), .28);
    font: 700 16px/1.2 var(--bio-font, 'Quicksand', system-ui, sans-serif);
    letter-spacing: 0;
    text-align: left;
    text-decoration: none !important;
    text-transform: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bio-dv .bio-dv-bouton::after {
    content: "";
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dv-brun2);
}
.bio-dv .bio-dv-bouton::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 21px;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-color: var(--dv-anis);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.bio-dv .bio-dv-bouton:hover,
#bio-dv-principal .bio-dv button.bio-dv-bouton:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--bio-green-rgb, 168, 196, 0), .34); background: var(--dv-anis); color: var(--dv-brun2) !important; }
.bio-dv .bio-dv-bouton:focus-visible { outline: 3px solid var(--dv-brun2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .bio-dv .bio-dv-bouton, #bio-dv-principal .bio-dv button.bio-dv-bouton { transition: none; }
    .bio-dv .bio-dv-bouton:hover, #bio-dv-principal .bio-dv button.bio-dv-bouton:hover { transform: none; }
}
#bio-dv-principal .bio-dv button.bio-dv-bouton-second,
.bio-dv .bio-dv-bouton-second {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 2px;
    border: 0; background: transparent; color: var(--dv-brun);
    font: 600 16px/1.2 var(--bio-font, 'Quicksand', system-ui, sans-serif);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
.bio-dv .bio-dv-bouton-second:hover, #bio-dv-principal .bio-dv button.bio-dv-bouton-second:hover { color: var(--dv-brun2); background: transparent; }
@media (max-width: 599px) {
    .bio-dv .bio-dv-actions .bio-dv-bouton { width: 100%; }
}

/* Encadré « Comment ça se passe » : carte crème compacte du tunnel */
.bio-dv-aside {
    padding: 22px 20px;
    border: 1px solid var(--dv-bord);
    border-radius: 22px;
    background: var(--dv-creme);
    font-size: 15px;
}
.bio-dv-etapes { list-style: none; margin: 14px 0 20px; padding: 0 0 18px; border-bottom: 1.5px dashed var(--dv-bord2); counter-reset: dv; }
.bio-dv-etapes li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 14px;
    padding-left: 44px;
    counter-increment: dv;
}
.bio-dv-etapes li:last-child { margin-bottom: 0; }
.bio-dv-etapes li::before {
    content: counter(dv);
    position: absolute; left: 0; top: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--dv-anis); color: var(--dv-brun2);
    font-weight: 700; font-size: 15px;
}
.bio-dv-etape-titre { font-weight: 700; font-size: 16px; }
.bio-dv-etape-texte { color: var(--dv-gris); }
.bio-dv a:not(.bio-dv-bouton):not(.bio-dv-bouton-second) {
    color: var(--dv-brun);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.bio-dv a:not(.bio-dv-bouton):not(.bio-dv-bouton-second):hover { color: var(--dv-brun2); text-decoration-thickness: 1px; }

/* Accusé */
.bio-dv-liste { margin: 6px 0 0; padding-left: 20px; }
.bio-dv-liste li { margin: 0 0 8px; }
.bio-dv-liste li::marker { color: var(--dv-anis); }

/* Devis imprimable */
.bio-dv--devis { max-width: 920px; }
.bio-dv-doc-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1.5px dashed var(--dv-bord2); }
.bio-dv-doc-vendeur { font-size: 14px; color: var(--dv-gris); line-height: 1.55; }
.bio-dv-doc-vendeur b { color: var(--dv-brun); }
.bio-dv-doc-client { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--dv-bord); border-radius: 18px; background: var(--dv-creme); }
.bio-dv-doc-client .bio-dv-sous { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bio-dv-doc-client .bio-dv-texte { margin: 0; }
.bio-dv-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.bio-dv-table th, .bio-dv-table td { padding: 11px 8px; border-bottom: 1px solid #efe9df; text-align: left; vertical-align: top; }
.bio-dv-table thead th { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-gris); border-bottom: 1.5px dashed var(--dv-bord2); }
.bio-dv-table .bio-dv-num-col { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bio-dv-table tfoot th { text-align: right; font-weight: 500; }
.bio-dv-table tfoot td { font-weight: 700; }
.bio-dv-table .bio-dv-total th, .bio-dv-table .bio-dv-total td { padding-top: 18px; font-size: 22px; font-weight: 700; border-bottom: 0; }
.bio-dv-mot { padding: 14px 16px; border-radius: 18px; background: var(--dv-teinte); }
/* Sur téléphone, le tableau défile dans sa carte plutôt que d'élargir la page. */
.bio-dv-table-defile { margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bio-dv-table-defile .bio-dv-table { margin: 0; min-width: 560px; }

@media print {
    .bio-dv-body header, .bio-dv-body footer, .bio-dv-non-imprime, #wpadminbar { display: none !important; }
    .bio-dv { padding: 0; max-width: none; }
    .bio-dv-carte { border: 0; box-shadow: none; padding: 0; }
    .bio-dv-table-defile { overflow: visible; }
    .bio-dv-table-defile .bio-dv-table { min-width: 0; }
}