/*
 * Claude — 13/08/2026 — Nettoyage visuel du formulaire "Prépare ton devis" (fiche produit),
 * demandé par Antony après la refonte du bloc de réassurance : mêmes tailles de texte,
 * mêmes couleurs, même rayon (16px, kit Elementor) pour rester cohérent avec ce bloc.
 *
 * Contenu :
 *  1. Rythme vertical unique entre les groupes label + aide + champ (ils étaient irréguliers).
 *  2. Habillage du champ de dépôt de logo (le <input type="file"> natif reste dans le DOM,
 *     relié par un <label>, jamais remplacé par un faux composant JS).
 *  3. Minimum de commande grossi et recoloré (vert marque, sans devenir une alerte),
 *     visuellement distinct de l'encadré "prix indicatif" (fond gris, bordure gauche).
 *  4. Hauteur par défaut du textarea projet réduite à ~4 lignes (reste redimensionnable).
 *
 * Champ d'application : ne touche que .koaprint-quote__form et ses enfants directs —
 * jamais le reste du thème.
 */

/* --- 1. Rythme vertical --------------------------------------------------------------- */

.koaprint-quote__form > * {
    margin-top: 0;
    margin-bottom: 0;
}

.koaprint-quote__form > .koaprint-quote__label {
    display: block;
    margin-top: 24px;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #1A1A1A;
}

.koaprint-quote__form > .koaprint-quote__label:first-child {
    margin-top: 0;
}

.koaprint-quote__form > .koaprint-quote__swatches,
.koaprint-quote__form > .koaprint-quote__upload,
.koaprint-quote__form > .koaprint-quote__qty {
    margin-bottom: 4px;
}

.koaprint-quote__form > table.variations {
    margin-top: 4px;
    margin-bottom: 20px;
}

.koaprint-quote__form > .single_variation_wrap,
.koaprint-quote__form > .single_add_to_cart_button {
    margin-top: 20px;
}

/* --- 2. Champ de dépôt de logo ---------------------------------------------------------- */

.koaprint-quote__upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Le vrai <input type="file"> reste dans le DOM et reste focusable au clavier — masqué
 * visuellement uniquement (technique "visually hidden", jamais display:none). */
.koaprint-quote__upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.koaprint-quote__upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 16px;
    border: 1.5px solid #0F544D;
    background: #FFFFFF;
    color: #0F544D;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.koaprint-quote__upload-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex: 0 0 auto;
}

/* AUDIT-FICHE-2026-08-14 — grammaire des boutons de la colonne devis.
 *
 * Quatre boutons cohabitent dans cette colonne. Mesures a 1440 avant correctif :
 *   « AJOUTER A MON DEVIS »            h52   rayon 999px  plein #0F544D  survol bordeaux
 *   « 03 60 35 53 69 »                 h45   rayon 999px  plein #0F544D  survol bordeaux
 *   « Choisir des fichiers »           h40   rayon 16px   contour 1,5px  survol VERT plein
 *   « Voir la fiche technique »        h36   rayon 999px  contour 1px    survol vert clair
 * Trois grammaires pour quatre boutons, et le seul rectangle arrondi de la colonne pose
 * juste au-dessus de la pilule pleine du CTA : l'ecart se voit immediatement.
 *
 * On ramene tout a DEUX familles, et deux seulement :
 *   - boutons pleins (devis, telephone)  : pilule, survol bordeaux #961038 ;
 *   - boutons a contour (fichiers, fiche technique) : pilule, trait 1px, survol vert tres
 *     clair #F2F7F5 avec le trait qui se fonce.
 * Ce bouton change donc de famille de survol : il ne se remplit plus de vert plein, ce qui
 * le faisait peser autant que le CTA alors qu'il lui est subordonne. */
.koaprint-quote__upload-btn {
    border-radius: 999px;
    border-width: 1px;
}

.koaprint-quote__upload-btn:hover,
.koaprint-quote__upload-btn:focus-visible {
    background: #F2F7F5;
    color: #0F544D;
    border-color: #0F544D;
}

/* Focus clavier sur le VRAI input (Tab), reporté visuellement sur le bouton habillé. */
.koaprint-quote__upload-input:focus + .koaprint-quote__upload-btn {
    outline: 2px solid #0F544D;
    outline-offset: 2px;
}

.koaprint-quote__upload-filename {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #5A6570;
}

/* --- 3. Minimum de commande -------------------------------------------------------------- */

.koaprint-quote__form > .koaprint-quote__min-note {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #0F544D;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* --- 4. Textarea projet : hauteur réduite, toujours redimensionnable --------------------- */

.koaprint-quote__form > .koaprint-quote__textarea {
    height: 96px;
    min-height: 72px;
    resize: vertical;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}


/* MOBILE-2026-08-13 — corrections issues de l'audit mobile.
 *
 * 1. ZOOM iOS. Safari zoome automatiquement sur tout champ de saisie dont la taille de
 *    police est inferieure a 16 px, au moment du focus : la page saute et l'utilisateur
 *    perd son reperage. Le champ concerne est « Dis-nous en plus sur ton projet », qui est
 *    OBLIGATOIRE — c'est donc tout le formulaire de devis qui sautait au premier tap.
 *    16 px sur mobile uniquement ; le desktop garde 14 px.
 *
 * 2. CIBLES TACTILES. Deux boutons passaient sous 44 px (recommandation Apple HIG et
 *    WCAG 2.5.5). On agrandit la zone SANS changer le rendu, via un ::before transparent
 *    centre : le bouton garde son apparence, le doigt gagne la surface qui lui manque. */
@media (max-width: 767px) {

    .koaprint-quote__textarea,
    .koaprint-quote__form textarea,
    .koaprint-quote__form input[type="text"],
    .koaprint-quote__form input[type="email"],
    .koaprint-quote__form input[type="tel"],
    .koaprint-quote__form input[type="number"] {
        font-size: 16px !important;
    }

    /* Bouton « retirer ce fichier » : 26 x 26 visibles, 44 x 44 tactiles. */
    .koaprint-quote__upload-remove {
        position: relative;
    }

    .koaprint-quote__upload-remove::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Bouton « Choisir des fichiers » : hauteur portee au seuil tactile. */
    .koaprint-quote__upload-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* AUDIT-FICHE-2026-08-14 — le champ fichier invisible debordait du viewport et ouvrait le
 * selecteur sur une bande fantome.
 *
 * Mesure a 375 avant correctif : input.koaprint-quote__upload-input en position absolute,
 * left 24px, width 335px -> rect x43->378 alors que documentElement.clientWidth vaut 375.
 * C'est ce qui portait scrollWidth a 378. Aucun impact visuel (l'input est clippe) et
 * aucun defilement (body en overflow-x hidden), mais pointer-events restait actif : la
 * bande y2208->2234, x43->378 ouvrait le selecteur de fichiers, soit 137px cliquables a
 * droite du bouton visible, qui s'arrete a x241,7.
 *
 * Le motif visually-hidden etait pourtant deja pose plus haut dans ce fichier (width:1px).
 * Il etait battu par `.koaprint-quote__upload input[type="file"]` de style.css, qui lui
 * rendait width:100%, max-width:420px, padding, bordure et fond : specificite (0,2,1)
 * contre (0,1,0), et style.css est servi plus tard dans le CSS combine. On reprend la main
 * avec une specificite superieure (0,3,1), sans aucun !important. */
.koaprint-quote__form .koaprint-quote__upload input.koaprint-quote__upload-input {
    position: absolute;
    width: 1px;
    max-width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: none;
}