/*
 * Claude — 2026-08-13 — Modification 1 validée par Antony.
 *
 * Le bouton "Ajouter à mon devis" ne doit plus jamais être visuellement grisé tant
 * qu'aucune couleur n'est choisie. Un bouton disabled sort de l'arbre d'accessibilité :
 * ni focus clavier, ni annonce par un lecteur d'écran (position constante de la
 * littérature — Adrian Roselli, Axess Lab, discussions du groupe WCAG). Le script coeur
 * WooCommerce (add-to-cart-variation.js) pose disabled + les classes "disabled" et
 * "wc-variation-selection-needed" tant que la variation n'est pas complète : ce fichier
 * neutralise uniquement l'ASPECT visuel de ces classes. Le retrait réel de l'attribut
 * disabled et l'interception du clic sont gérés par koaprint-variation-required.js.
 *
 * Portée : strictement le bouton du formulaire de devis (.koaprint-quote__form), jamais
 * les autres boutons disabled du site (ex. bouton de paiement pendant traitement).
 */

.koaprint-quote__form .single_add_to_cart_button.disabled,
.koaprint-quote__form .single_add_to_cart_button.wc-variation-selection-needed,
.koaprint-quote__form .single_add_to_cart_button:disabled {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/*
 * Astérisque -> "(facultatif)" (Modification 2) : mention discrète mais explicite,
 * jamais de couleur d'alerte — ce n'est pas une erreur, c'est une précision.
 */
.koaprint-quote__optional {
    font-weight: 400;
    color: #5a6570;
    font-size: 0.9em;
}

/*
 * Claude — 2026-08-13 — Pendant de .koaprint-quote__optional ci-dessus pour les labels
 * obligatoires : Antony a remonté que les 4 libellés du formulaire ne suivaient pas la
 * même règle visuelle (astérisque en gras d'un côté, "(facultatif)" en texte plein de
 * l'autre). Même poids, même couleur, même taille que .koaprint-quote__optional — seul le
 * caractère affiché change (* au lieu de "(facultatif)").
 */
.koaprint-quote__required {
    font-weight: 400;
    color: #5a6570;
    font-size: 0.9em;
}

/*
 * Claude — 2026-08-13 — Point 4 validé par Antony : texte d'aide persistant sous le label
 * "Dis-nous en plus sur ton projet" (remplace un placeholder, qui disparaissait dès la
 * première frappe). Reprend EXACTEMENT les valeurs de .koaprint-quote__optional ci-dessus
 * (même style de texte secondaire déjà utilisé sur cette fiche) : même poids, même
 * couleur, même taille relative — seul le display change (bloc, avec un peu d'espace
 * avant le textarea).
 */
.koaprint-quote__hint {
    display: block;
    font-weight: 400;
    color: #5a6570;
    font-size: 0.9em;
    line-height: 1.4;
    margin: 4px 0 10px;
}

/*
 * Message d'erreur accessible affiché au clic si aucune couleur n'est choisie. Le noeud
 * reste TOUJOURS présent dans le DOM (jamais [hidden] ni display:none) pour que
 * l'aria-describedby posé sur le bouton reste valide en permanence : seul son CONTENU
 * change, ce qui déclenche l'annonce du role="alert" sans jouer sur la visibilité.
 * Repli sur :empty pour ne prendre aucune place tant qu'il n'y a rien à afficher.
 */
.koaprint-variation-error {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

/*
 * Claude — 2026-08-13 — Allégé sur demande d'Antony (l'encadré "pesait" trop lourd à
 * l'écran) : padding et bordure réduits, graisse baissée de 600 à 500. Couleur de fond et
 * de TEXTE inchangées à dessein (contraste vérifié 9,03:1, très au-dessus du minimum AA de
 * 4,5:1 — largement assez de marge pour alléger sans jamais repasser sous le seuil).
 */
.koaprint-variation-error:not(:empty) {
    margin: 6px 0 16px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fdecea;
    border: 1px solid #d9a9a2;
    color: #7a1f14;
}


/*
 * Claude - 2026-08-13 - Retours UX d'Antony sur le rendu du bloc devis.
 *
 * 1. Le minimum de commande s'affichait en vert et en gras : il se lisait comme un
 *    titre, et il precedait immediatement l'encadre "Attention" lui aussi vert. Deux
 *    blocs verts consecutifs se neutralisent et on ne lit plus ni l'un ni l'autre.
 *    Ce n'est pas une alerte, c'est une information de cadrage rattachee au champ
 *    quantite : meme famille de texte secondaire que .koaprint-quote__hint, juste un
 *    cran plus lisible car Antony l'a demande plus visible.
 */
.koaprint-quote__form .koaprint-quote__min-note {
    color: #5a6570;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.4;
    margin: 6px 0 16px;
}

/*
 * 2. Le haut du bloc etait compresse : l'accroche "Gratuit - Sans engagement - Reponse
 *    rapide" touchait le premier libelle. On rend au sous-titre l'air qui lui manquait.
 */
.koaprint-quote__form .koaprint-quote__subtitle {
    margin-bottom: 22px;
}

/*
 * 3. Rythme vertical unique entre les groupes de champs : les ecarts variaient d'un
 *    groupe a l'autre, ce qui donnait une impression de bloc charge.
 */
.koaprint-quote__form .koaprint-quote__label {
    display: block;
    margin-top: 18px;
    margin-bottom: 6px;
}

.koaprint-quote__form .koaprint-quote__swatches {
    margin-bottom: 4px;
}


/*
 * UX2-2026-08-13 - Retour d'Antony : la consigne "Plus tu es precis, plus ton devis
 * arrive vite." touchait le champ de saisie (margin-bottom mesure a 0 en production).
 * On lui donne le meme ecart que les autres groupes de champs, pour un rythme uniforme.
 *
 * Surcharge explicite car une declaration plus specifique du theme gagnait.
 * Le minimum de commande n'est volontairement PAS touche : Antony le garde tel quel.
 */
.koaprint-quote__form .koaprint-quote__hint {
    margin-bottom: 10px !important;
}


/*
 * DND-2026-08-13 - Glisser-deposer sur le champ logo (demande d'Antony : « on peut pas
 * mettre plusieurs fichiers » puis « on peut pas deposer dessus directement »).
 * L'input portait deja `multiple` : ce qui manquait, c'etait de le DIRE et de permettre
 * le depot direct. La zone devient une cible de depot explicite.
 */
.koaprint-quote__form .koaprint-quote__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px dashed #c3ccd4;
    border-radius: 10px;
    background: #fbfbfa;
    transition: border-color .15s ease, background-color .15s ease;
}

.koaprint-quote__form .koaprint-quote__upload.is-survol {
    border-color: #0f544d;
    border-style: solid;
    background: #f0f6f4;
}

.koaprint-quote__form .koaprint-quote__upload.is-erreur {
    border-color: #d9a9a2;
    background: #fdecea;
}

.koaprint-quote__form .koaprint-quote__upload-filename {
    color: #5a6570;
    font-size: 0.9em;
    line-height: 1.4;
}

.koaprint-quote__form .koaprint-quote__upload-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.koaprint-quote__form .koaprint-quote__upload-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #e6e6e2;
    border-radius: 8px;
    font-size: 0.9em;
}

.koaprint-quote__form .koaprint-quote__upload-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #17171a;
}

.koaprint-quote__form .koaprint-quote__upload-item-size {
    flex: 0 0 auto;
    color: #5a6570;
    font-size: 0.9em;
}

.koaprint-quote__form .koaprint-quote__upload-remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f0ee;
    color: #5a6570;
    font-size: 15px;
    cursor: pointer;
}

.koaprint-quote__form .koaprint-quote__upload-remove:hover,
.koaprint-quote__form .koaprint-quote__upload-remove:focus-visible {
    background: #e2e2de;
    color: #17171a;
}


/*
 * SIMPLE-2026-08-13 - Antony : « moche, t'as pas besoin d'indiquer de deposer, fais un
 * truc simple ». On retire l'encadre en pointilles et l'invitation au depot : il ne
 * reste que le bouton et le nom des fichiers. Le glisser-deposer reste ACTIF, il est
 * juste devenu invisible - qui essaie de deposer voit la zone reagir, les autres ne
 * voient qu'un bouton.
 */
.koaprint-quote__form .koaprint-quote__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.koaprint-quote__form .koaprint-quote__upload.is-survol {
    outline: 2px dashed #0f544d;
    outline-offset: 6px;
    background: transparent !important;
}

.koaprint-quote__form .koaprint-quote__upload-list {
    margin-top: 2px;
}

.koaprint-quote__form .koaprint-quote__upload-item {
    padding: 6px 10px;
}




/* UPLOAD-V2-2026-08-13 — champ logo : bouton seul quand vide, depot possible partout
 * sur la zone, fichiers bien visibles une fois deposes. */
.koaprint-quote__form .koaprint-quote__upload {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.koaprint-quote__form .koaprint-quote__upload-filename:empty {
    display: none;
}

.koaprint-quote__form .koaprint-quote__upload.is-survol {
    outline: 2px dashed #0f544d;
    outline-offset: 8px;
    border-radius: 10px;
}

.koaprint-quote__form .koaprint-quote__upload-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.koaprint-quote__form .koaprint-quote__upload-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #dfe3e6;
    border-radius: 10px;
    font-size: 14px;
}

.koaprint-quote__form .koaprint-quote__upload-item::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    background-color: #0f544d;
    -webkit-mask: var(--koa-doc) center / contain no-repeat;
    mask: var(--koa-doc) center / contain no-repeat;
    --koa-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}

.koaprint-quote__form .koaprint-quote__upload-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #17171a;
    font-weight: 500;
}

.koaprint-quote__form .koaprint-quote__upload-item-size {
    flex: 0 0 auto;
    color: #5a6570;
    font-size: 13px;
}

.koaprint-quote__form .koaprint-quote__upload-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    line-height: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f0ee;
    color: #5a6570;
    font-size: 17px;
    cursor: pointer;
}

.koaprint-quote__form .koaprint-quote__upload-remove:hover,
.koaprint-quote__form .koaprint-quote__upload-remove:focus-visible {
    background: #fdecea;
    color: #7a1f14;
}



/* Le bloc conseil adopte la meme carte que la FAQ, juste en dessous. */
.koa-rea__cta,
.elementor-element-8f2c1a3 {
    margin-top: 12px !important;
    background: #fff !important;
    border: 1px solid #e6e6e2 !important;
    border-radius: 14px !important;
}

@media (max-width: 767px) {
    .koa-faq__q { padding: 13px 14px; }
    .koa-faq__r { padding: 0 14px 14px; }
}



/* Un intitule pour dire ce que c'est — sans lui, la liste ne s'annonce pas. */
.koa-faq__intitule {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: #17171a;
    line-height: 1.35;
}

/* CHEVRON-UNIQUE-2026-08-14 (1/3) — la retouche de couleur qui se trouvait ici visait une
 * implementation de chevron qui n'existe plus. Supprimee : la seule implementation du
 * chevron est desormais en fin de fichier (bloc ORDRE-CHEVRON), qui pose ses bordures en
 * entier, couleur comprise. */

.koa-faq__item[open] > .koa-faq__q {
    color: #0f544d;
}

/* --- Bloc « Besoin d'un conseil ? » : centre, texte sur une ligne, bouton dessous --- */
.elementor-element-8f2c1a3 {
    display: block !important;
    text-align: center !important;
    padding: 20px 22px !important;
}

/* La pastille jaune de l'icone : on la retire, l'icone passe en vert de marque.
 * Elle faisait concurrence au bouton, seul element qui doit capter l'oeil. */
.elementor-element-938251d .elementor-icon,
.elementor-element-938251d .elementor-icon-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    color: #0f544d !important;
    fill: #0f544d !important;
}

.elementor-element-938251d svg {
    width: 24px !important;
    height: 24px !important;
    fill: #0f544d !important;
}

/* Le texte ne doit plus se casser en deux lignes serrees a cote du bouton. */
.elementor-element-8f2c1a3 .elementor-widget-text-editor,
.elementor-element-8f2c1a3 .elementor-widget-container {
    max-width: none !important;
    text-align: center !important;
}

.elementor-element-8f2c1a3 p {
    margin: 0 auto !important;
}

/* Le bouton passe sous le texte, centre. */
.elementor-element-8f2c1a5 {
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;
}

@media (max-width: 767px) {
    .elementor-element-8f2c1a3 { padding: 18px 16px !important; }
}


/* DA-FINALE-2026-08-13 — bloc FAQ + conseil, aligne sur la DA reelle du site
 * (valeurs relevees en production : titre 25px/600/#0F544D, libelles 15px/600/#1A1A1A,
 * boutons en pilule 999px fond #0F544D graisse 700, Poppins).
 */
.koa-bloc {
    background: #f3f3f3;
    border-radius: 25px;
    padding: 26px 24px;
}

.koa-faq__intitule {
    margin: 0 0 18px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
    color: #0f544d;
}

.koa-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.koa-faq__item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.koa-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
    cursor: pointer;
    list-style: none;
}

.koa-faq__q::-webkit-details-marker { display: none; }

/* CHEVRON-UNIQUE-2026-08-14 (2/3) — l'implementation « pastille ronde 26x26 avec le
 * chevron en image de fond » qui se trouvait ici a ete SUPPRIMEE. Elle cohabitait avec une
 * seconde implementation (chevron dessine en bordures, en fin de fichier) qui reduisait la
 * boite a 8x8 sans jamais remettre a zero ni `background` ni `border-radius`. Mesure en
 * production avant correctif : width 8px, height 8px, border-radius 50%, background-image
 * = SVG 24x24 affiche en 14px — une image plus grande que sa boite, donc rognee, posee sur
 * une pastille ronde teintee. Rendu : un petit crochet gris illisible sur les 8 accordeons
 * fermes, l'affordance ouvrir/fermer ne se lisait plus. Une seule implementation subsiste. */
.koa-faq__item[open] > .koa-faq__q { color: #0f544d; }

.koa-faq__r {
    padding: 0 20px 18px;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #5a6570;
}

.koa-faq__r strong { color: #1a1a1a; font-weight: 600; }

/* --- Bloc conseil : meme carte que les questions, tout centre --- */
.koa-conseil {
    margin-top: 18px;
    padding: 24px 20px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
}

.koa-conseil__icone {
    display: inline-block;
    line-height: 0;
    color: #0f544d;
    margin-bottom: 10px;
}

.koa-conseil__icone svg { width: 26px; height: 26px; display: block; }

.koa-conseil__titre {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a1a;
}

.koa-conseil__texte {
    margin: 0 auto 16px;
    max-width: 30ch;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #5a6570;
}

.koa-conseil__horaires {
    margin: 10px 0 0;
    font-size: 13px;
    color: #84847d;
    line-height: 1.3;
}

@media (max-width: 767px) {
    /* GOUTTIERE-2026-08-14 : 16px de gouttiere laterale placaient le bloc FAQ a 16->359
     * quand toutes les autres sections de la fiche sont a 20->355 (carte devis, produit en
     * detail, caracteristiques, produits similaires). 4px de decalage de chaque cote, et un
     * axe vertical qui n'etait plus unique sur la page. On adopte les 20px d'Elementor. */
    .koa-bloc { padding: 20px; border-radius: 18px; }
    .koa-faq__intitule { font-size: 21px; margin-bottom: 14px; }
    .koa-faq__q { padding: 14px 16px; }
    .koa-faq__r { padding: 0 16px 16px; }
}


/* CORR-TEL-2026-08-13 — le numero s'affichait en NOIR sur le vert fonce : une regle du
 * theme sur les liens ecrasait la couleur declaree. On force le blanc avec assez de
 * specificite, sur le lien ET sur le span interieur. */
.koa-bloc .koa-conseil a.koa-conseil__tel,
.koa-bloc .koa-conseil a.koa-conseil__tel:link,
.koa-bloc .koa-conseil a.koa-conseil__tel:visited,
.koa-bloc .koa-conseil a.koa-conseil__tel span,
.koa-bloc .koa-conseil a.koa-conseil__tel svg {
    color: #fff !important;
    fill: currentColor;
}


/* STICKY-GALERIE-2026-08-13 — l'image reste visible pendant que le client remplit le
 * formulaire a droite. Uniquement au-dessus de 1024px : en dessous les colonnes
 * s'empilent et un element colle n'aurait aucun sens.
 * Le sticky se decolle naturellement quand la FAQ, plus bas dans la meme colonne,
 * arrive a son niveau. */
@media (min-width: 1025px) {
    .woocommerce-product-gallery {
        position: sticky;
        top: 24px;
        align-self: flex-start;
    }
}


/* CONSEIL-SOUS-CTA-2026-08-13 — le bloc conseil rejoint la colonne de droite, juste sous
 * « Ajouter a mon devis » : c'est au moment de cliquer que le client hesite, pas plus bas.
 * La FAQ reste a gauche sous la galerie, pour celui qui creuse. */
.koa-conseil--sous-cta {
    margin-top: 18px;
    padding: 20px 18px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
}

.koa-conseil--sous-cta .koa-conseil__titre { font-size: 16px; }
.koa-conseil--sous-cta .koa-conseil__texte { margin-bottom: 14px; }

@media (max-width: 767px) {
    .koa-conseil--sous-cta { padding: 18px 14px; }
}


/* CORR-FINAL-2026-08-13 ---------------------------------------------------- */

/* 1. Numero en blanc — la regle precedente dependait de .koa-bloc, or le bloc conseil
 *    est desormais rendu dans la colonne de droite, sous le bouton. On cible la classe
 *    elle-meme, ou qu'elle soit. */
a.koa-conseil__tel,
a.koa-conseil__tel:link,
a.koa-conseil__tel:visited,
a.koa-conseil__tel:hover,
a.koa-conseil__tel span,
a.koa-conseil__tel svg {
    color: #fff !important;
    fill: currentColor !important;
}

/* 2. Galerie collante : le sticky doit porter sur l'item flex (be5e48e), pas sur la
 *    galerie WooCommerce interne — sinon « position » est ecrase et seul « top » passe. */
@media (min-width: 1025px) {
    .elementor-element-be5e48e {
        position: sticky !important;
        top: 24px;
        align-self: flex-start !important;
    }
    .woocommerce-product-gallery { position: relative; top: auto; }
}

/* 3. MOBILE — ordre logique et allegement.
 *    Par defaut le DOM donne : galerie, FAQ, puis formulaire. Le client tomberait donc
 *    sur la FAQ avant meme d'avoir vu le formulaire. On remet l'ordre qui a du sens :
 *    je vois le produit, je demande mon devis, et si j'hesite je lis la FAQ. */
@media (max-width: 767px) {
    
    
    

    /* La galerie prend moins de hauteur : on voit le formulaire sans scroller trois ecrans. */
    .woocommerce-product-gallery { margin-bottom: 12px; }

    /* Le bloc « Les etapes pour ta commande » repete ce que dit deja la FAQ.
     * Sur mobile, chaque ecran compte : on le retire. */
    .elementor-element-4c56b2f,
    .koa-etapes-commande { display: none; }

    /* Le bloc conseil sous le CTA passe en pleine largeur, bouton compris. */
    .koa-conseil--sous-cta { padding: 18px 14px; }
}


/* FIX-CHEVAUCHEMENT-2026-08-13 — la FAQ recouvrait la galerie sur mobile.
 * Cause : « display: contents » sur le conteneur de la colonne gauche, combine au sticky.
 * La FAQ etant desormais en pleine largeur (koafaq01), l'ordre mobile n'a plus lieu d'etre.
 * On remet le flux normal et on desactive le sticky sous 1025px. */
.elementor-element-83a1873 { display: flex; }

@media (max-width: 1024px) {
    .elementor-element-be5e48e {
        position: static !important;
        top: auto !important;
    }
}

/* La colonne gauche ne contient plus que la galerie : pas de marge residuelle dessous. */
.elementor-element-83a1873 > .elementor-element-be5e48e { margin-bottom: 0; }


/* CONSEIL-LARGEUR-2026-08-13 — le bloc etait plus etroit que le formulaire, ce qui
 * creait un decalage visible avec le bouton et les champs. Il prend desormais toute la
 * largeur disponible, aligne sur le reste du formulaire. */
.koa-conseil--sous-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
}

.koa-conseil--sous-cta .koa-conseil__icone {
    display: inline-block !important;
    color: #0f544d;
}

.koa-conseil--sous-cta .koa-conseil__icone svg {
    width: 26px;
    height: 26px;
    display: block;
    stroke: #0f544d;
}


/* CONSEIL-DISCRET-2026-08-13 — le bloc conseil ne doit pas rivaliser avec le bouton
 * « Ajouter a mon devis ». Un seul bouton plein par zone : le devis. Le telephone
 * devient un lien affirme mais secondaire, sur un simple filet, sans carte ni fond. */
.koa-conseil--sous-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 14px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #e3e3e3;
    border-radius: 0;
    text-align: center;
}

/* L'icone et le titre sur une meme ligne, en petit. */
.koa-conseil--sous-cta .koa-conseil__icone { display: none; }

.koa-conseil--sous-cta .koa-conseil__titre {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.koa-conseil--sous-cta .koa-conseil__texte {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5a6570;
}

/* Le numero : lien vert souligne, plus un bouton plein. */
.koa-conseil--sous-cta a.koa-conseil__tel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    color: #0f544d !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.koa-conseil--sous-cta .koa-conseil__horaires {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: #84847d;
}

@media (max-width: 767px) {
    .koa-conseil--sous-cta { padding-top: 12px; }
}


/* CONSEIL-ALIGN-2026-08-13 — le flex-wrap mettait le titre a gauche, le texte a droite
 * et le numero centre : trois axes differents. Tout sur un seul axe centre, en colonne. */
.koa-conseil--sous-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    text-align: center !important;
}

.koa-conseil--sous-cta .koa-conseil__titre,
.koa-conseil--sous-cta .koa-conseil__texte,
.koa-conseil--sous-cta .koa-conseil__horaires {
    flex: 0 0 auto !important;
    width: 100%;
    margin: 0 !important;
}

.koa-conseil--sous-cta .koa-conseil__texte { max-width: 34ch; }
.koa-conseil--sous-cta .koa-conseil__horaires { margin-top: 4px !important; }


/* TITRES-SECTION-2026-08-13 — la page avait deux styles de titres de section :
 *   « Le produit en detail » / « Caracteristiques produits » : #333, 28px, 600
 *   « Tableau des tailles » / FAQ                            : #0f544d, 25px, 600
 * On aligne tout sur le premier, majoritaire. « Prepare ton devis » reste vert :
 * c'est un titre de bloc dans une carte, pas un titre de section. */
.koa-faq__intitule {
    color: #333 !important;
    font-size: 28px !important;
    font-weight: 600 !important;
}

/* « Tableau des tailles » est un h2 du contenu produit. */
.woocommerce-Tabs-panel h2,
.woocommerce-product-details__short-description h2,
.elementor-widget-woocommerce-product-content h2 {
    color: #333;
    font-size: 28px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .koa-faq__intitule { font-size: 23px !important; }
}


/* FINITIONS-2026-08-13
 * 1. Le numero paraissait decale : l'icone SVG occupait son espace sans s'afficher,
 *    ce qui decalait le centrage optique du lien. On la retire du flux.
 * 2. « Ajouter a mon devis » passe en pleine largeur : c'est le CTA principal, il ne
 *    doit pas ressembler a un bouton secondaire coince a gauche.
 */
.koa-conseil--sous-cta a.koa-conseil__tel {
    gap: 0 !important;
    justify-content: center !important;
    text-align: center;
}

.koa-conseil--sous-cta .koa-conseil__titre,
.koa-conseil--sous-cta .koa-conseil__texte,
.koa-conseil--sous-cta .koa-conseil__horaires,
.koa-conseil--sous-cta a.koa-conseil__tel {
    text-align: center !important;
    align-self: center !important;
}

/* CTA principal en pleine largeur */
.koaprint-quote__form .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 16px !important;
    text-align: center !important;
}


/* BLOC-QTE-2026-08-13 — bas du formulaire (desktop).
 * Le champ quantite et le bouton sont freres dans le <form> : on passe le formulaire en
 * flex-wrap, chaque element garde 100% sauf ces deux-la, qui partagent une ligne. */
@media (min-width: 768px) {
    .koaprint-quote__form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .koaprint-quote__form > * { flex: 1 1 100%; }

    /* Quantite et bouton sur la meme ligne */
    .koaprint-quote__form > .koaprint-quote__qty {
        flex: 0 0 auto;
        margin-right: 14px;
    }

    .koaprint-quote__form > .single_variation_wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .koaprint-quote__form .single_add_to_cart_button {
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* Le minimum de commande et l'avertissement repassent en dessous, pleine largeur. */
}

/* Carre de quantite : plus grand, chiffre plus lisible. */
.koaprint-quote__form .koaprint-quote__qty .qty,
.koaprint-quote__form input.qty {
    width: 96px !important;
    height: 52px !important;
    padding: 0 12px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 12px !important;
    border: 1px solid #d9dde0 !important;
    color: #1a1a1a !important;
}

/* Espace entre le champ et « Minimum de commande » */
.koaprint-quote__form .koaprint-quote__min-note {
    margin-top: 10px !important;
    margin-bottom: 18px !important;
}

/* L'encadre « Attention » descend un peu et respire. */
.koaprint-quote__form .koaprint-quote__price-warning,
.koaprint-quote__form [class*="warning"] {
    margin-top: 6px !important;
    margin-bottom: 22px !important;
}

/* Bloc conseil : un cran plus grand et mieux pose. */
.koa-conseil--sous-cta {
    margin-top: 24px !important;
    padding-top: 20px !important;
    gap: 5px !important;
}

.koa-conseil--sous-cta .koa-conseil__titre { font-size: 16px !important; }
.koa-conseil--sous-cta .koa-conseil__texte { font-size: 14px !important; max-width: 38ch; }
.koa-conseil--sous-cta .koa-conseil__horaires { font-size: 13px !important; }


/* ATTENTION-CARTE-2026-08-13 — l'avertissement etait un simple filet vertical vert,
 * peu lisible comme mise en garde. Il devient une carte arrondie a fond ambre :
 * l'ambre dit « fais attention » sans dramatiser, la ou le vert disait « tout va bien ».
 * Le contraste du texte reste tres au-dessus du seuil AA. */
.koaprint-quote__form .koaprint-quote__price-warning,
.koaprint-quote__form [class*="price-warning"] {
    display: block;
    border: 1px solid #f0dcae !important;
    border-left: 1px solid #f0dcae !important;
    border-radius: 14px !important;
    background: #fdf6e6 !important;
    padding: 14px 16px !important;
    color: #6b5416 !important;
    font-size: 13.5px;
    line-height: 1.55;
}

.koaprint-quote__form .koaprint-quote__price-warning strong,
.koaprint-quote__form .koaprint-quote__price-warning u,
.koaprint-quote__form [class*="price-warning"] strong {
    color: #4a3a0d !important;
    text-decoration: none !important;
    font-weight: 600;
}


/* HAUT-BLOC-2026-08-13 — le haut du bloc devis faisait brouillon : l'accroche
 * « Gratuit - Sans engagement - Reponse rapide » touchait « Choisis ta couleur »,
 * et son italique gras la faisait rivaliser avec le titre.
 * Elle redevient une ligne de service discrete, et chaque groupe respire pareil. */
.koaprint-quote__title {
    margin-bottom: 6px !important;
}

.koaprint-quote__subtitle {
    display: block;
    margin: 0 0 22px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #5a6570 !important;
    letter-spacing: 0.1px;
}

/* Rythme unique entre les groupes de champs : label -> aide -> champ -> respiration. */
.koaprint-quote__form .koaprint-quote__label {
    display: block;
    margin-top: 22px !important;
    margin-bottom: 8px !important;
}

.koaprint-quote__form .koaprint-quote__label:first-of-type {
    margin-top: 0 !important;
}

.koaprint-quote__form .koaprint-quote__swatches {
    margin-bottom: 4px !important;
}


/* ORDRE-NATUREL-2026-08-13 — les regles « order » avaient envoye « Minimum de commande »
 * apres le bouton et le bloc conseil, tout en bas. On revient a l'ordre du document :
 * quantite -> minimum -> avertissement -> bouton -> conseil.
 * Le bouton reste en pleine largeur : le mettre a droite de la quantite obligerait a
 * deplacer l'avertissement, qui perdrait son lien avec le champ qu'il explique. */

.koaprint-quote__form .koaprint-quote__min-note {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}


/* LIGNE-ACTION-2026-08-13 — quantite et bouton sur une meme ligne, comme demande.
 * Le minimum passe dans le libelle : la ligne « Minimum de commande » separee disparait.
 * Le bloc conseil reste en dessous, pleine largeur. */
.koaprint-quote__form .koaprint-quote__min-note { display: none !important; }

.koaprint-quote__label-min {
    font-weight: 400;
    color: #5a6570;
    font-size: 0.92em;
}

@media (min-width: 768px) {
    .koaprint-quote__form { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .koaprint-quote__form > * { flex: 1 1 100%; }

    .koaprint-quote__form > .koaprint-quote__qty { flex: 0 0 auto; margin-right: 12px; }
    .koaprint-quote__form > .single_variation_wrap { flex: 1 1 240px; min-width: 0; }
    .koaprint-quote__form > .variations { display: none !important; }
}

.koaprint-quote__form .single_add_to_cart_button {
    width: 100% !important;
    margin-top: 0 !important;
}

/* Le conseil reprend toute la largeur sous la ligne d'action. */
.koa-conseil--sous-cta { width: 100%; }


/* LIGNE-ACTION-V2-2026-08-13 — quantite et bouton sur une meme ligne.
 * L'avertissement, place entre les deux dans le DOM, est renvoye dessous par son order.
 * Le bloc conseil suit, pleine largeur. */
@media (min-width: 768px) {
    .koaprint-quote__form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .koaprint-quote__form > *            { flex: 1 1 100%; order: 1; }
    .koaprint-quote__form > .koaprint-quote__qty       { flex: 0 0 auto; order: 2; margin-right: 12px; }
    .koaprint-quote__form > .single_variation_wrap     { flex: 1 1 260px; order: 3; min-width: 0; }
    .koaprint-quote__form > .koaprint-quote__warning   { order: 4; margin-top: 16px !important; }
    .koaprint-quote__form > .variations                { display: none !important; }
}

/* Le bouton remplit la place restante a droite du champ. */
.koaprint-quote__form .single_add_to_cart_button {
    width: 100% !important;
    height: 52px;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

/* Un « + » discret avant le libelle, comme sur les fiches du secteur. */
.koaprint-quote__form .single_add_to_cart_button::before {
    content: "+";
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
}

.koa-conseil--sous-cta { width: 100%; }


/* QTE-FINALE-2026-08-13 — ordre definitif du bas de formulaire :
 * libelle -> [quantite | bouton] -> avertissement -> conseil. */
@media (min-width: 768px) {
    .koaprint-quote__form > .koaprint-quote__warning { order: 4 !important; }
    .koaprint-quote__form > .koa-conseil--sous-cta,
    .koaprint-quote__form > .koa-aide                { order: 5 !important; flex: 1 1 100%; }
}

/* Le minimum dans le libelle : discret, il complete le titre sans le concurrencer. */
.koaprint-quote__label-min {
    font-weight: 400;
    color: #5a6570;
    font-size: 0.9em;
}

/* Plus de ligne « Minimum de commande » separee. */
.koaprint-quote__form .koaprint-quote__min-note { display: none !important; }


/* ALIGN-BOUTON-2026-08-13 — le bouton retombait plus bas que le champ quantite :
 * WooCommerce insere un div « woocommerce-variation » vide avant lui, qui occupe de la
 * hauteur. On le neutralise quand il est vide et on aligne les deux sur la meme ligne. */
.koaprint-quote__form .single_variation_wrap .woocommerce-variation.single_variation:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .koaprint-quote__form > .single_variation_wrap {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-self: stretch;
    }

    .koaprint-quote__form > .single_variation_wrap .variations_button {
        margin: 0 !important;
        width: 100%;
    }

    /* Le champ et le bouton partagent la meme hauteur, donc la meme ligne de base. */
    .koaprint-quote__form .single_add_to_cart_button { height: 52px !important; }
    .koaprint-quote__form > .koaprint-quote__qty { align-self: flex-start; }
}

/* Le libelle « Quantité » reprend le meme espacement que les autres. */
.koaprint-quote__form .koaprint-quote__qty { margin-bottom: 0 !important; }


/* ALIGN-V2-2026-08-13 — les 40px de decalage venaient de deux endroits :
 * 20px de margin-top sur .single_variation_wrap, et 20px de hauteur residuelle dans
 * .variations_button (72px de conteneur pour un bouton de 52px). On remet tout a plat. */
@media (min-width: 768px) {
    .koaprint-quote__form > .single_variation_wrap {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .koaprint-quote__form .woocommerce-variation-add-to-cart,
    .koaprint-quote__form .variations_button {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: stretch;
    }
}


/* BTN-CONSEIL-2026-08-13
 * 1. Les 20px de decalage venaient du margin-top propre au bouton. Neutralise avec assez
 *    de specificite pour passer devant la regle du theme.
 * 2. Bloc conseil : ecart reduit et rendu moins fade — un fond doux, le titre en vert de
 *    marque, le numero mis en avant. Il reste secondaire par rapport au bouton devis. */
.koaprint-quote__form .variations_button .single_add_to_cart_button,
.koaprint-quote__form button.single_add_to_cart_button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.koaprint-quote__form .variations_button {
    align-items: flex-start !important;
    height: 52px !important;
    min-height: 0 !important;
}

/* --- Bloc conseil --- */
.koa-conseil--sous-cta {
    margin-top: 18px !important;
    padding: 16px 18px !important;
    background: #f6f8f7 !important;
    border: 1px solid #e2ebe8 !important;
    border-top: 1px solid #e2ebe8 !important;
    border-radius: 14px !important;
    gap: 2px !important;
}

.koa-conseil--sous-cta .koa-conseil__titre {
    font-size: 15px !important;
    color: #0f544d !important;
    font-weight: 600 !important;
}

.koa-conseil--sous-cta .koa-conseil__texte {
    font-size: 13.5px !important;
    color: #5a6570 !important;
    max-width: 40ch;
}
.koa-conseil--sous-cta .koa-conseil__horaires { font-size: 12.5px !important; margin-top: 6px !important; }


/* BTN-LARGE-2026-08-13 — le bouton faisait 250px dans un espace de 455 : 200px de vide
 * a droite, ligne bancale et CTA affaibli. Il remplit desormais toute la largeur
 * disponible a droite du champ quantite. */
.koaprint-quote__form .variations_button {
    display: flex !important;
    width: 100% !important;
}

.koaprint-quote__form .variations_button .single_add_to_cart_button,
.koaprint-quote__form button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* RYTHME-2026-08-13 — un ecart unique entre tous les groupes du formulaire.
 * Les espacements variaient de 25 a 40px selon les blocs, ce qui donnait une impression
 * de bricolage. Une seule valeur : 24px avant chaque libelle, rien d'autre. */
.koaprint-quote__form .koaprint-quote__label {
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}

.koaprint-quote__form .koaprint-quote__label:first-of-type { margin-top: 0 !important; }

/* Les elements qui suivent un libelle ne rajoutent pas d'ecart par-dessus. */
.koaprint-quote__form .koaprint-quote__swatches,
.koaprint-quote__form .koaprint-quote__upload,
.koaprint-quote__form .koaprint-quote__textarea,
.koaprint-quote__form .koaprint-quote__qty {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Le texte d'aide colle a son libelle, pas au champ. */
.koaprint-quote__form .koaprint-quote__hint {
    margin: 0 0 8px !important;
}

/* Avertissement et conseil : meme respiration que les groupes. */
.koaprint-quote__form .koaprint-quote__warning { margin: 24px 0 0 !important; }
.koa-conseil--sous-cta { margin-top: 24px !important; }


/* DESC-LINK-2026-08-13 — le lien vers la description faisait 13px et etait souligne :
 * personne ne le voyait, au point que les clients appellent pour avoir les infos produit.
 * Il devient un bouton secondaire, aux codes du site (pilule, vert de marque), avec un
 * libelle qui dit ce qu'on trouve derriere. Il reste subordonne au bouton devis, qui est
 * le seul bouton plein de la colonne. */
.koa-desc-link--bouton {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px !important;
    padding: 10px 20px;
    border: 1.5px solid #0f544d;
    border-radius: 999px;
    background: transparent;
    color: #0f544d !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.koa-desc-link--bouton::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
}

.koa-desc-link--bouton:hover,
.koa-desc-link--bouton:focus-visible {
    background: #0f544d;
    color: #fff !important;
}

@media (max-width: 767px) {
    .koa-desc-link--bouton { width: 100%; justify-content: center; }
}


/* DESC-BTN-V2-2026-08-13 — le bouton prenait toute la largeur de la colonne : il pesait
 * autant que « Ajouter a mon devis » alors qu'il est secondaire. Il revient a sa largeur
 * naturelle, avec un trait plus fin et un chevron mieux pose. */
.koa-desc-link--bouton {
    width: auto !important;
    max-width: max-content !important;
    padding: 9px 18px !important;
    border-width: 1px !important;
    /* CONTRASTE-2026-08-14 : #cfd8d5 sur blanc = 1,45:1, la pilule ne se lisait pas comme
     * un bouton au repos — seul le survol revelait que c'en etait un. WCAG 1.4.11 demande
     * 3:1 pour la limite d'un controle. rgba(15,84,77,.65) = 3,57:1 sur blanc : lisible,
     * derive du vert de marque, et assez leger pour rester un bouton secondaire. */
    border-color: rgba(15, 84, 77, .65) !important;
    color: #0f544d !important;
    font-size: 13.5px !important;
    gap: 7px !important;
}

.koa-desc-link--bouton::after {
    width: 7px;
    height: 7px;
    border-width: 1.8px;
    opacity: .75;
}

.koa-desc-link--bouton:hover,
.koa-desc-link--bouton:focus-visible {
    background: #f2f7f5 !important;
    border-color: #0f544d !important;
    color: #0f544d !important;
}

@media (max-width: 767px) {
    .koa-desc-link--bouton { width: auto !important; }
}



/* CLAUDE — 2026-08-13 — CORRECTIF "Besoin d'un conseil ?" (demande Antony, capture ecran).
 *
 * CAUSE RACINE du bouton neutralise : le bloc CONSEIL-DISCRET-2026-08-13 (~ligne 729)
 * a volontairement transforme le bouton telephone plein en simple lien souligne —
 * decision assumee a l'epoque ("un seul bouton plein par zone : le devis"), tracee par
 * son propre commentaire. Le fond passait a `background: transparent !important` et le
 * texte a `color: #0f544d !important` via le selecteur
 * `.koa-conseil--sous-cta a.koa-conseil__tel` (2 classes + 1 tag = specificite 0,2,1) :
 * cette regle a la MEME specificite que le style plein d'origine mais gagne parce
 * qu'elle est en `!important` et que le style d'origine (ligne 552) ne l'est pas —
 * l'importance prime toujours sur la specificite. Meme mecanisme pour l'icone :
 * `.koa-conseil--sous-cta a.koa-conseil__tel svg { display: none !important; }`
 * (ligne ~870) l'a retiree du rendu apres qu'un decalage optique a ete impute a tort a
 * l'icone plutot qu'a l'absence de gap. Antony souhaite desormais revenir a un vrai
 * bouton pastille plein — cette section l'emporte en reprenant les MEMES selecteurs
 * (donc meme specificite) mais en etant la derniere du fichier : a specificite et
 * importance egales, la regle la plus bas dans la cascade gagne. On ne supprime pas
 * l'historique ci-dessus, on le neutralise proprement.
 *
 * RYTHME VERTICAL : le conteneur flex portait un `gap` ET chaque enfant portait ses
 * propres margin-top/bottom en !important, empiles sur plusieurs correctifs successifs.
 * Les deux se cumulent dans un flex-container (les marges ne fusionnent jamais entre
 * enfants flex) : mesure avant correctif, l'ecart texte -> bouton atteignait 26px quand
 * les autres n'etaient qu'a 8-10px. On revient a une source unique : gap: 0 sur le
 * conteneur, une seule margin-bottom par enfant, jamais de margin-top, le dernier
 * enfant (horaires) sans marge. Nouvelle cadence : icone->titre 8px, titre->texte 6px,
 * texte->bouton 16px (respiration volontaire avant le CTA), bouton->horaires 10px.
 */

.koa-conseil--sous-cta { gap: 0 !important; }

.koa-conseil--sous-cta .koa-conseil__icone { margin: 0 0 8px !important; }
.koa-conseil--sous-cta .koa-conseil__titre { margin: 0 0 6px !important; }
.koa-conseil--sous-cta .koa-conseil__texte { margin: 0 auto 16px !important; }

/* Le bouton telephone : pastille pleine verte, plus un lien souligne. */
.koa-conseil--sous-cta a.koa-conseil__tel,
.koa-conseil--sous-cta a.koa-conseil__tel:link,
.koa-conseil--sous-cta a.koa-conseil__tel:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 13px 26px !important;
    background: #0f544d !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color .15s ease !important;
}

/* Le libelle et l'icone heritent du blanc, y compris en hover : ils portent chacun
 * leur propre regle de couleur plus haut dans le fichier, l'heritage depuis .tel ne
 * suffit pas a les changer. */
.koa-conseil--sous-cta a.koa-conseil__tel span,
.koa-conseil--sous-cta a.koa-conseil__tel:hover span,
.koa-conseil--sous-cta a.koa-conseil__tel:focus-visible span {
    color: #fff !important;
}

/* Icone remise dans le rendu (elle etait en display: none !important plus haut),
 * blanche, taille compacte, alignee avec le libelle grace au gap du bouton. */
.koa-conseil--sous-cta a.koa-conseil__tel svg,
.koa-conseil--sous-cta a.koa-conseil__tel:hover svg,
.koa-conseil--sous-cta a.koa-conseil__tel:focus-visible svg {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
    color: #fff !important;
    fill: currentColor !important;
}

.koa-conseil--sous-cta .koa-conseil__horaires { margin: 0 !important; }

/* Mobile : le bouton passe pleine largeur, comme le reste du formulaire. */
@media (max-width: 767px) {
}



/* Chaque enfant est centre et ne s'etire pas sur toute la largeur. */
.koa-conseil.koa-conseil--sous-cta > * {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: center !important;
}

.koa-conseil.koa-conseil--sous-cta .koa-conseil__icone {
    margin: 0 0 8px !important;
    color: #0f544d !important;
}

.koa-conseil.koa-conseil--sous-cta .koa-conseil__titre {
    margin: 0 0 6px !important;
    color: #0f544d !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
}

.koa-conseil.koa-conseil--sous-cta .koa-conseil__texte {
    max-width: 34ch !important;
    margin: 0 0 16px !important;
    color: #4a5a5e !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    text-wrap: balance;
}

/* Le bouton : centre par le flex parent, largeur sur son contenu. */
.koa-bloc .koa-conseil.koa-conseil--sous-cta a.koa-conseil__tel,
.koa-conseil.koa-conseil--sous-cta a.koa-conseil__tel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.koa-conseil.koa-conseil--sous-cta .koa-conseil__horaires {
    margin: 12px 0 0 !important;
    color: #7c8a8d !important;
    font-size: 12.5px !important;
}

@media (max-width: 767px) {
    .koa-conseil.koa-conseil--sous-cta { padding: 20px 16px !important; }
}




/* ============================================================================
 * KOA-AIDE — bloc « Besoin d'un conseil ? » sous le bouton devis.
 * Refait de zero le 13/08/2026 avec des classes neuves, apres cinq passes
 * correctives infructueuses sur l'ancien markup : il cumulait le CSS de base du
 * theme, celui de son ancien emplacement Elementor, et mes correctifs empiles.
 * Classes neuves = aucune regle existante ne s'applique = aucun !important requis.
 *
 * Centrage : flex colonne + align-items center. Chaque enfant est centre sur son
 * axe quelle que soit sa largeur — ce que text-align:center ne fait pas pour les
 * elements de type bloc, d'ou le decalage que voyait Antony.
 * box-sizing: border-box pour que bordure et padding ne creent aucune asymetrie.
 * ========================================================================= */
.koa-aide {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0 0;
    padding: 22px 24px;
    border: 1px solid #e2ebe8;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.koa-aide__ico {
    display: block;
    margin: 0 0 8px;
    line-height: 0;
    color: #0f544d;
}

.koa-aide__ico svg { display: block; width: 26px; height: 26px; }

.koa-aide__titre {
    margin: 0 0 6px;
    color: #0f544d;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
}

/* Claude — 2026-08-14 — texte du bloc conseil changé, retour à la ligne voulu par Antony
 * après "technique" via <br class="koa-aide__br"> dans le markup (koaprint-quote-form.php).
 * L'ancien max-width:34ch + text-wrap:balance servait à FORCER un passage à la ligne
 * automatique sur l'ancien texte en une phrase ; la 1re ligne du nouveau texte ("On t'aide
 * à choisir la bonne technique") fait ~38 caractères, plus large que 34ch : gardé tel quel,
 * elle aurait re-cassé sur une 3e ligne bancale. max-width retiré (aucune autre contrainte
 * de largeur nécessaire, le conteneur .koa-aide est déjà borné) ; balance retiré, il n'a
 * plus d'utilité avec une coupure posée à la main. */
.koa-aide__texte {
    margin: 0 0 16px;
    color: #4a5a5e;
    font-size: 14.5px;
    line-height: 1.5;
}

/* Le numero est SEUL dans le bouton : pas d'icone qui le decale.
 * La carte en porte deja une en tete. */
.koa-aide__tel {
    display: inline-block;
    margin: 0;
    padding: 13px 30px;
    border-radius: 999px;
    background: #0f544d;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.koa-aide__tel:link,
.koa-aide__tel:visited { color: #fff; text-decoration: none; }

.koa-aide__tel:hover,
.koa-aide__tel:focus-visible { background: #961038; color: #fff; text-decoration: none; }

/* CONTRASTE-2026-08-14 : #7c8a8d sur le fond blanc de la carte = 3,57:1 a 12,5px, sous le
 * seuil AA de 4,5:1 pour du texte de cette taille. #5a6a6d = 5,65:1, meme famille de gris
 * vert, aucune autre valeur ne bouge. */
.koa-aide__h {
    margin: 12px 0 0;
    color: #5a6a6d;
    font-size: 12.5px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .koa-aide { padding: 20px 16px; }
    .koa-aide__tel { display: block; width: 100%; }
}


/* ORDRE-AIDE-2026-08-13 — le bloc conseil doit rester le DERNIER element du formulaire.
 * Il s'etait glisse entre le libelle « Quantite » et le champ apres le renommage de sa
 * classe : la regle `order` du flex visait l'ancien nom et ne s'appliquait plus.
 * Pose ici sans media query pour que l'ordre tienne aussi sous 768px, ou le formulaire
 * passe en colonne unique. */
.koaprint-quote__form { display: flex; flex-wrap: wrap; }
.koaprint-quote__form > .koa-aide {
    order: 9 !important;
    flex: 1 1 100% !important;
    width: 100%;
}
.koaprint-quote__form > .koaprint-quote__warning { order: 8 !important; }


/* TEL-LOCK-2026-08-13 — le numero passait en bordeaux sur fond vert au survol : une regle
 * generique du theme sur les liens colore le texte sans toucher au fond, et l'emportait.
 * On fige la couleur sur tous les etats. C'est le seul !important de ce bloc, et il est
 * justifie : on se defend contre une regle globale qu'on ne maitrise pas. */
.koa-aide__tel,
.koa-aide__tel:link,
.koa-aide__tel:visited,
.koa-aide__tel:hover,
.koa-aide__tel:focus,
.koa-aide__tel:focus-visible,
.koa-aide__tel:active {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* Au survol c'est le FOND qui change, jamais le texte. */
.koa-aide__tel:hover,
.koa-aide__tel:focus-visible {
    background: #961038 !important;
}



/* Le conteneur ne porte plus d'aplat : ce sont les cartes blanches qui structurent. */
.koa-bloc:has(.koa-faq),
.koa-faq {
    background: transparent;
}

.koa-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.koa-faq__intitule {
    margin: 0 0 20px !important;
    letter-spacing: -.3px;
}

.koa-faq__item {
    border: 1px solid #e6ecea;
    border-left: 3px solid transparent;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color .16s ease, background-color .16s ease;
}

/* L'item ouvert se signale : lisere vert et teinte tres legere. */
.koa-faq__item[open] {
    border-color: #cfe0da;
    border-left-color: #0f544d;
    background: #fbfdfc;
}

.koa-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 15px 20px !important;
    color: #14312c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.koa-faq__q::-webkit-details-marker { display: none; }

.koa-faq__item[open] .koa-faq__q { color: #0f544d; }

.koa-faq__r {
    padding: 0 20px 18px !important;
    color: #4a5a5e;
    font-size: 14.5px;
    line-height: 1.65;
}

/* CHEVRON-UNIQUE-2026-08-14 (3/3) — troisieme declaration du meme chevron (9x9) supprimee.
 * Elle etait integralement recouverte par celle du bloc ORDRE-CHEVRON en fin de fichier
 * (8x8), a la propriete pres : la garder ne servait qu'a rendre le diagnostic impossible.
 * Seule la regle de mouvement reduit reste, elle porte sur l'item, pas sur le chevron. */
@media (prefers-reduced-motion: reduce) {
    .koa-faq__item { transition: none; }
}

@media (max-width: 767px) {
    .koa-faq { gap: 8px; }
    .koa-faq__q { padding: 14px 16px !important; font-size: 14.5px; }
    .koa-faq__r { padding: 0 16px 16px !important; }
}


/* ESPACEMENT-FINAL-2026-08-13 */

/* (1) L'encart « Attention prix » et le bloc conseil se touchaient : bas de l'un = haut
 * de l'autre, mesure a 2751 px pour les deux. Le bloc conseil n'avait aucune marge, alors
 * que le reste du formulaire respire de 24 px. On aligne sur ce meme rythme. */
.koaprint-quote__form > .koa-aide {
    margin-top: 24px !important;
}

/* Et l'encart garde sa propre respiration au-dessus, quel que soit l'ecran. */
.koaprint-quote__form > .koaprint-quote__warning {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

/* (2) En mobile, le champ quantite et le conteneur du bouton devis se chevauchaient de
 * 57 px (mesure a 375 px : bouton 44->287, quantite 230->330). Sous 768 px, chacun prend
 * toute la largeur et se place l'un sous l'autre. */
@media (max-width: 767px) {
    .koaprint-quote__form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .koaprint-quote__form > .koaprint-quote__qty {
        width: 100%;
        max-width: 140px;
        margin-right: 0 !important;
        margin-bottom: 12px;
        order: 6 !important;
    }

    .koaprint-quote__form > .single_variation_wrap {
        width: 100%;
        min-width: 0;
        order: 7 !important;
    }

    .koaprint-quote__form > .single_variation_wrap .single_add_to_cart_button,
    .koaprint-quote__form .single_add_to_cart_button {
        width: 100%;
    }
}


/* ICO-OUT-2026-08-13 — l'icone du bloc conseil occupait 34 px en haut sans rien afficher :
 * le bloc etait centre au pixel et paraissait decale vers le bas. Retiree du markup ;
 * la regle qui suit couvre le cas ou une version en cache la servirait encore. */
.koa-aide__ico { display: none !important; }

/* Equilibre vertical explicite, maintenant que plus rien de fantome ne s'intercale. */
.koa-aide {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

.koa-aide__titre { margin-top: 0 !important; }


/* UPLOAD-DEDOUBLON-2026-08-13 — la liste en lignes faisait doublon avec les vignettes a
 * apercu : chaque fichier depose apparaissait deux fois. On garde les vignettes, plus
 * informatives (on voit le logo), et on masque la liste. */
.koaprint-quote__upload-list,
.koaprint-quote__upload-list--desactivee { display: none !important; }

/* Espacement de la zone de depot : le bouton collait au libelle et aux vignettes. */
.koaprint-quote__upload { margin-bottom: 6px; }
.koaprint-quote__upload-btn { margin-top: 4px; }
.koa-logo-preview { margin-top: 12px !important; gap: 10px !important; }


/* FAQ-SOBRE-2026-08-13 — la FAQ reprend la grammaire des autres cartes de la fiche :
 * blanc, bordure 1px #e2ebe8, rayon 14px, pas d'ombre, pas d'ornement.
 * Aucun chevron ajoute ici : le theme en fournit deja un, et le mien se superposait au
 * sien — c'est ce qui produisait le symbole casse. */
.koa-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
}

.koa-faq__intitule { margin: 0 0 20px !important; }

.koa-faq__item {
    border: 1px solid #e2ebe8;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.koa-faq__item[open] { border-color: #cfe0da; }

.koa-faq__q {
    min-height: 52px;
    padding: 16px 20px !important;
    color: #14312c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.koa-faq__item[open] .koa-faq__q { color: #0f544d; }

.koa-faq__r {
    padding: 0 20px 18px !important;
    color: #4a5a5e;
    font-size: 14.5px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .koa-faq { gap: 8px; }
    .koa-faq__q { padding: 14px 16px !important; font-size: 14.5px; }
    .koa-faq__r { padding: 0 16px 16px !important; }
}


/* ORDRE-CHEVRON-2026-08-13 */

/* (1) Le champ quantite doit toujours PRECEDER le bouton de validation : on saisit une
 * quantite avant de valider. Il se retrouvait dessous sur fenetre etroite, le conteneur
 * du bouton heritant d'un order plus faible. On fixe les deux explicitement. */
.koaprint-quote__form > .koaprint-quote__qty { order: 6 !important; }
.koaprint-quote__form > .single_variation_wrap { order: 7 !important; }
.koaprint-quote__form > .koaprint-quote__warning { order: 8 !important; }
.koaprint-quote__form > .koa-aide { order: 9 !important; }

@media (max-width: 767px) {
    .koaprint-quote__form > .koaprint-quote__qty {
        order: 6 !important;
        width: 100%;
        max-width: 140px;
        margin: 0 0 12px !important;
    }
    .koaprint-quote__form > .single_variation_wrap { order: 7 !important; width: 100%; }
}

/* (2) Marqueur natif du <details> : masque dans toutes ses declinaisons. C'est lui qui
 * produisait le symbole parasite a droite des questions — pas mon pseudo-element. */
.koa-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none !important;
}

.koa-faq__q::-webkit-details-marker { display: none !important; }
.koa-faq__q::marker { content: "" !important; display: none !important; }
.koa-faq details > summary { list-style-type: none !important; }

/* Chevron dessine en bordures : aucune dependance a une police d'icones. */
.koa-faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #8b979d;
    border-bottom: 2px solid #8b979d;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease, border-color .18s ease;
}

.koa-faq__item[open] .koa-faq__q::after {
    border-color: #0f544d;
    transform: rotate(-135deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .koa-faq__q::after { transition: none; }
}


/* HARMONIE-FONDS-2026-08-13 — alternance blanc / gris section par section.
 * Avant : 2 700 px de blanc puis 1 500 px de gris couvrant quatre sections differentes.
 * Le fond ponctue la lecture ; un aplat unique sur quatre sujets ne ponctue rien. */

/* Avis Google : BLANC. Demande explicite d'Antony, et c'est la logique — on remonte le
 * contraste sur la preuve sociale juste avant le footer vert. */
.elementor-element-7282d08,
.elementor-section:has(.wp-google-reviews),
.elementor-section:has([class*="google-review"]),
.elementor-section:has([class*="trustindex"]) {
    background-color: #fff !important;
}

/* FAQ : blanc, pour que les neuf cartes se detachent. */
.elementor-section:has(> .elementor-container .koa-faq),
.elementor-element:has(> .elementor-widget-container .koa-faq) {
    background-color: #fff !important;
}

/* Produits similaires : gris clair, c'est un rebond, pas le sujet principal. */
.elementor-section:has(.related),
.elementor-section:has(.products) {
    background-color: #f7f8f8 !important;
}

/* Le bloc « Le produit en detail » garde son gris : lecture technique, contraste abaisse. */


/* MOBILE-FICHE-2026-08-13 — hierarchie mobile de la fiche produit.
 * Principe : sur mobile on hierarchise, on ne censure pas. Rien d'informatif n'est masque
 * (prix, delai, tailles, avis restent) ; on allege ce qui est decoratif et on rend la
 * largeur utile au contenu. */
@media (max-width: 767px) {

    /* Le formulaire de devis occupe toute la largeur utile. */
    .koaprint-quote,
    .koaprint-quote__form { width: 100%; box-sizing: border-box; }

    /* Bouton devis pleine largeur : c'est l'action principale de la page. */
    .koaprint-quote__form .single_add_to_cart_button {
        width: 100% !important;
        min-height: 52px;
        font-size: 16px;
    }

    /* Champ quantite : assez large pour le pouce, pas plus. */
    .koaprint-quote__form > .koaprint-quote__qty { max-width: 120px; }
    .koaprint-quote__qty input { min-height: 48px; font-size: 16px; }

    /* Zones tactiles : 44px minimum sur tout ce qui se touche. */
    .koaprint-quote__swatch { min-width: 44px; min-height: 44px; }
    .koaprint-quote__upload-btn { min-height: 48px; }

    /* Les blocs de la colonne respirent moins lateralement : a 375 px, 24 px de padding
     * de chaque cote coutent 13 % de la largeur utile. */
    .koa-aide,
    .koaprint-quote__warning { padding-left: 16px !important; padding-right: 16px !important; }

    /* Produits similaires : on en montre quatre. Au-dela, on fait defiler sans aider a
     * decider — et la fiche fait deja 5 000 px de haut. */
    /* Regle conservee pour les gabarits qui utilisent le loop WooCommerce standard.
     * Sur les fiches actuelles, les produits similaires viennent d'un widget Elementor :
     * .related n'existe pas, cette regle ne cible donc rien (verifie le 14/08). */
    .related.products li.product:nth-child(n+5),
    .products li.product:nth-child(n+5) { display: none; }

    .related.products ul.products,
    .products ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    /* Badges decoratifs superposes aux visuels : illisibles a cette taille. */
    .koa-badge--deco, .koa-product-badge--deco { display: none; }

    /* Titres de section un cran plus bas : ils prenaient trois lignes. */
    .koa-bloc h2, .koa-faq__intitule { font-size: 21px !important; line-height: 1.25 !important; }
}


/* ============================================================================
 * AUDIT-FICHE-2026-08-14 — corrections issues de l'audit visuel de la fiche produit.
 *
 * REGLE DE CASCADE VERIFIEE EN PRODUCTION LE 14/08, elle conditionne tout ce bloc :
 * dans le CSS combine par LiteSpeed, style.css (theme enfant) est servi APRES ce fichier
 * (offset mesure 602 696 contre 333 847). Une regle d'ici qui doit battre style.css a
 * donc besoin d'une specificite STRICTEMENT superieure — un simple !important a
 * specificite egale PERDRAIT, puisque style.css est plus bas dans la cascade. Chaque
 * regle ci-dessous indique la specificite qu'elle bat.
 * ========================================================================= */


/* --- 1. Tooltip des pastilles : il recouvrait le libelle « Choisis ta couleur : * » ----
 *
 * Mesure avant correctif a 1440 : libelle y915->930 a partir de x762 ; tooltip de la 1re
 * rangee y912->932, x744->832, fond opaque #0F544D, z-index 5. Recouvrement TOTAL en
 * vertical : la capture montrait « Choisis t » masque par la pilule verte, il ne restait
 * que « a couleur : * ». Les 8 tooltips de la rangee 1 etaient tous a y912->932, et le
 * meme defaut se reproduisait a 1920.
 *
 * Cause : le tooltip est pose AU-DESSUS de la pastille (bottom:100% + margin-bottom:6px
 * = 26px requis) alors que le libelle n'est qu'a 8px. Deux corrections, pas une :
 *   a. le tooltip passe SOUS la pastille. Le libelle n'est plus jamais sur son chemin —
 *      pour toutes les rangees, pas seulement la premiere, et quelle que soit la largeur
 *      de fenetre (le nombre de colonnes change, la premiere rangee reste la premiere).
 *   b. l'ecart entre rangees passe de 12 a 20px, sinon le tooltip d'une rangee mordrait
 *      la rangee suivante : 20px de haut + 4px de decalage = 24px requis sous la pastille.
 *      Sous la derniere rangee il y a deja 28px (4px de marge + 24px avant le libelle
 *      suivant), la place est donc suffisante partout.
 * Specificite (0,3,0) contre (0,1,0) dans style.css. */
.koaprint-quote__form .koaprint-quote__swatch .koaprint-quote__swatch-tooltip {
    top: 100%;
    bottom: auto;
    margin-top: 4px;
    margin-bottom: 0;
    padding: 3px 8px;
    z-index: 6;
}

.koaprint-quote__form .koaprint-quote__swatches {
    row-gap: 20px;
    column-gap: 12px;
}

/* Garde-fou horizontal : le tooltip de la 1re pastille debordait de 18px a gauche du bord
 * du formulaire (x744 pour un formulaire qui commence a x762). Il s'aligne desormais sur
 * le bord gauche de sa pastille au lieu d'etre centre dessus. Les colonnes suivantes
 * gardent le centrage, qui est le bon comportement quand il y a de la place des deux
 * cotes ; le cas de la derniere colonne est traite dans le bloc mobile, ou le nombre de
 * colonnes est fixe a 4 et donc connu. */
.koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch:first-child .koaprint-quote__swatch-tooltip {
    left: 0;
    transform: none;
}


/* --- 2. Anneau des pastilles : une couleur orpheline, et le meme etat pour deux etats ---
 *
 * Mesure avant correctif, au survol ET apres selection : box-shadow = inset 0 0 0 2px
 * #03bfac, 0 0 0 2px rgba(3,191,172,1) — valeur STRICTEMENT identique dans les deux cas.
 * Impossible de distinguer la couleur qu'on survole de celle qu'on a choisie. #03bfac
 * n'existait nulle part ailleurs dans le theme (2 lignes, contre 19 occurrences de
 * #0f544d dans le seul style.css) : une valeur orpheline, pas un jeton de marque. Son
 * contraste sur blanc, 2,32:1, passait par ailleurs sous le seuil de 3:1 exige par
 * WCAG 1.4.11 pour un indicateur d'etat non textuel.
 *
 * Survol      : anneau interieur vert de marque a 65% d'opacite = 3,57:1 sur blanc.
 *               Present, mais discret : il dit « tu passes dessus ».
 * Selectionne : anneau interieur plein #0F544D = 8,77:1, plus un halo externe. Deux
 *               anneaux contre un, opaque contre translucide : l'etat choisi est
 *               franchement plus fort que l'etat survole, ce qui n'etait pas le cas.
 * Specificite (0,4,0) contre (0,3,0) au survol, (0,4,0) contre (0,2,0) sur is-active. */
.koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch:hover,
.koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(15, 84, 77, .65);
}

.koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch.is-active,
.koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch.is-active:hover,
.koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch.is-active:focus-visible {
    box-shadow: inset 0 0 0 2px #0f544d, 0 0 0 3px rgba(15, 84, 77, .25);
}


/* --- 3. Grammaire des boutons : le champ quantite jouxte le bouton devis ---------------
 *
 * Mesure a 1440 : « AJOUTER A MON DEVIS » en pilule 999px, et juste a cote un champ
 * quantite en rayon 12px. Sur la meme ligne, deux rayons differents se voient. Le champ
 * prend le rayon de la pilule qu'il touche. (Le bouton « Choisir des fichiers », troisieme
 * grammaire de la colonne, est corrige dans koaprint-quote-form-clean.css, a sa source.) */
.koaprint-quote__form .koaprint-quote__qty .qty,
.koaprint-quote__form input.qty {
    border-radius: 999px !important;
}


/* --- 4. Lien « Voir nos avis ↓ » : cible tactile de 20px de haut -----------------------
 *
 * Mesure : 111,2 x 20,3px. C'etait le SEUL element interactif sous 44x44 de toute la
 * fiche entre y1200 et y4200. WCAG 2.5.5 et les Apple HIG demandent 44px.
 * Les styles de ce lien vivent dans un <style> inline du widget Elementor, servi APRES le
 * CSS du theme : le !important est ici le seul moyen de reprendre la main sans editer le
 * widget — la regle du hub interdit le code dans Elementor. La hauteur est prise en
 * hauteur minimale, l'aspect du lien ne bouge pas d'un pixel. */
.koa-av2 a.koa-avis-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
}


/* --- 5. Ordre des blocs en colonne unique ----------------------------------------------
 *
 * Mesure a 375 avant correctif : bouton « AJOUTER A MON DEVIS » a y2575, avertissement
 * tarifaire a y2651. Le client lisait la mise en garde sur le prix APRES avoir clique.
 * Le DOM prevoit pourtant l'inverse (quantite -> minimum -> avertissement -> bouton ->
 * conseil), et le commentaire ORDRE-NATUREL de ce fichier l'ecrit noir sur blanc.
 * Cause : `order: 8` pose sur l'avertissement SANS media query — il visait la ligne
 * d'action du desktop, ou le bouton est a cote du champ quantite et ou l'avertissement
 * doit effectivement passer dessous — combine a `order: 7` sur le conteneur du bouton
 * dans le bloc mobile.
 * Le desktop n'est pas touche : en deux colonnes, l'avertissement sous la ligne d'action
 * est le comportement voulu. Sous 768px seulement, on retablit l'ordre du document.
 * Le bloc conseil reste le DERNIER, comme l'exige ORDRE-AIDE. */
@media (max-width: 767px) {
    .koaprint-quote__form > .koaprint-quote__qty       { order: 6 !important; }
    .koaprint-quote__form > .koaprint-quote__min-note  { order: 7 !important; }
    .koaprint-quote__form > .koaprint-quote__warning   { order: 8 !important; }
    .koaprint-quote__form > .single_variation_wrap     { order: 9 !important; }
    .koaprint-quote__form > .koa-aide                  { order: 10 !important; }
}


/* --- 6. Corrections mobiles (< 768px) --------------------------------------------------- */
@media (max-width: 767px) {

    /* (a) La grille de pastilles laissait 39px de bande morte a droite sur 562px de haut :
     * 28 pastilles de 53px avec 12px de gouttiere donnent 4 colonnes qui s'arretent a
     * x292, quand le formulaire, le textarea et le bouton vont jusqu'a x331. Bord droit
     * en escalier, visible a l'oeil sur la capture.
     * On passe en grille de 4 colonnes egales : la pastille s'elargit (69px au lieu de
     * 53), la HAUTEUR NE BOUGE PAS (70px), la page ne s'allonge donc pas d'un pixel, et
     * la cible tactile gagne 16px de large. Specificite (0,3,0) et (0,3,1) contre (0,2,0)
     * et (0,1,1) !important dans style.css — d'ou le !important ici, qui ne gagne que
     * parce que la specificite est deja superieure. */
    .koaprint-quote__form .koaprint-quote__swatches {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 20px;
    }

    .koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 70px !important;
        flex: none !important;
    }

    .koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch img {
        width: 100% !important;
        height: 70px !important;
        object-fit: cover;
    }

    /* Le nombre de colonnes est fixe a 4 : les bords sont donc connus, et le tooltip peut
     * etre borne des deux cotes sans deviner. */
    .koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch:nth-child(4n+1) .koaprint-quote__swatch-tooltip {
        left: 0;
        right: auto;
        transform: none;
    }

    .koaprint-quote__form .koaprint-quote__swatches .koaprint-quote__swatch:nth-child(4n) .koaprint-quote__swatch-tooltip {
        left: auto;
        right: 0;
        transform: none;
    }

    /* (b) 56px de vide en bas de la carte « Prepare ton devis » contre 24px sur les trois
     * autres cotes : margin-bottom 32px du formulaire + padding-bottom 24px de la section.
     * Le padding de la section suffit, le cadre redevient symetrique a 24px. */
    .koaprint-quote__form { margin-bottom: 0 !important; }

    /* (c) Le second separateur « · » du bloc avis restait orphelin en fin de ligne quand le
     * lien passait a la ligne suivante : mesure a 375, separateur x267 y1389, lien x20
     * y1417 — le point median pendait dans le vide. Le retour a la ligne separe deja. */
    .koa-av2 .kv-sp:last-of-type { display: none; }
}


/* ============================================================================
 * FINAL-3-2026-08-14 — pose en fin de fichier a dessein : ces trois regles doivent
 * l'emporter sur toutes les couches accumulees le 13/08.
 * ========================================================================= */

/* (1) [10] | AJOUTER A MON DEVIS sur la MEME ligne. */
.koaprint-quote__form { display: flex !important; flex-wrap: wrap !important; align-items: flex-start; }

.koaprint-quote__form > .koaprint-quote__qty {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 12px 0 0 !important;
    order: 6 !important;
}

.koaprint-quote__form > .single_variation_wrap {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    order: 7 !important;
}

.koaprint-quote__form .single_add_to_cart_button {
    width: 100% !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.koaprint-quote__form > .koaprint-quote__warning { order: 8 !important; flex: 1 1 100% !important; }
.koaprint-quote__form > .koa-aide            { order: 9 !important; flex: 1 1 100% !important; }

/* En dessous de 768 px seulement, ils passent l'un sous l'autre. */
@media (max-width: 767px) {
    .koaprint-quote__form > .koaprint-quote__qty {
        flex: 0 0 auto !important;
        width: 120px !important;
        max-width: 120px !important;
        margin: 0 0 12px 0 !important;
    }
    .koaprint-quote__form > .single_variation_wrap { flex: 1 1 100% !important; width: 100% !important; }
}

/* Claude — 2026-08-23 — produits SIMPLES : bouton "AJOUTER A MON DEVIS" a droite de la
 * quantite, sur la meme ligne, comme sur les produits a variations. Dans
 * inc/koaprint-quote-form.php, la branche produit simple emet le bouton en ENFANT DIRECT
 * du form, sans wrapper .single_variation_wrap (contrairement a la branche variable) : il
 * retombait donc sur la regle generique `.koaprint-quote__form > * { order: 1 }`
 * (ligne 1029, media min-width:768px, sans !important) et remontait au-dessus du champ
 * quantite (order:6). Miroir exact du traitement de .single_variation_wrap ci-dessus
 * (bloc FINAL-3) : meme order desktop (7), meme order mobile (9). Aucune collision
 * possible avec les regles de .single_variation_wrap : le selecteur `>` ne matche jamais
 * le bouton quand il est niche dans .single_variation_wrap (produits a variations).
 *
 * Claude — 2026-08-23 (v2, correction post-controle visuel d'Antony) — order:7 passait
 * bien, mais flex/width restaient sur 100% pleine largeur : la regle BTN-LARGE-2026-08-13
 * (ligne ~1178) `.koaprint-quote__form button.single_add_to_cart_button { flex:1 1 auto
 * !important; width:100% !important; ... }` a une specificite (0,2,1) — 2 classes + element
 * `button` — superieure aux (0,2,0) de la regle ci-dessus (2 classes seulement), et gagne
 * sur flex/width quelle que soit sa position dans le fichier. Renforcee ici a (0,2,2) en
 * ajoutant l'element `form` devant `.koaprint-quote__form` et l'element `button` devant
 * `.single_add_to_cart_button` — bat (0,2,1) sans dependre de l'ordre dans le bundle. */
form.koaprint-quote__form > button.single_add_to_cart_button {
    order: 7 !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    form.koaprint-quote__form > button.single_add_to_cart_button {
        order: 9 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* (2) Bandeau d'avis du bas de fiche : fond blanc.
 * NE JAMAIS cibler c0aa01a — c'est la top barre, verte. */
.elementor-element-bb89e67,
.elementor-element-bb89e67 > .elementor-widget-container,
.elementor-element-12a0044,
.elementor-element-12a0044 > .elementor-widget-container {
    background-color: #fff !important;
}

.e-con:has(> .e-con-inner > .elementor-element-bb89e67),
.e-con-inner:has(> .elementor-element-bb89e67),
.elementor-widget-wrap:has(> .elementor-element-bb89e67),
.elementor-column:has(> .elementor-widget-wrap > .elementor-element-bb89e67),
.elementor-section:has(.elementor-element-bb89e67) {
    background-color: #fff !important;
}

/* (3) FAQ : un seul chevron, dessine en bordures. */
.koa-faq__q {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    list-style: none !important;
    list-style-type: none !important;
}

.koa-faq__q::-webkit-details-marker { display: none !important; }
.koa-faq__q::marker { content: "" !important; }
.koa-faq details > summary::-webkit-details-marker { display: none !important; }

.koa-faq__q::after {
    content: "" !important;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: 0 !important;
    border-right: 2px solid #8b979d !important;
    border-bottom: 2px solid #8b979d !important;
    border-radius: 0;
    background: none !important;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease, border-color .18s ease;
}

.koa-faq__item[open] .koa-faq__q::after {
    border-right-color: #0f544d !important;
    border-bottom-color: #0f544d !important;
    transform: rotate(-135deg) translate(-2px, -2px);
}


/* AERE-AVIS-2026-08-14 — le bandeau d'avis touchait les boutons « Voir produit » au-dessus
 * et le footer en dessous. Une preuve sociale collee a ses voisins se lit comme la suite du
 * bloc precedent ; il lui faut sa propre respiration pour exister comme chapitre. */
.elementor-element-bb89e67,
.elementor-element-12a0044 {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
}

.elementor-element-bb89e67 > .elementor-widget-container,
.elementor-element-12a0044 > .elementor-widget-container {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Les cartes d'avis respirent entre elles. */
.elementor-element-bb89e67 [class*="ti-review-item"],
.elementor-element-bb89e67 .ti-widget-container > div {
    margin-left: 7px;
    margin-right: 7px;
}

@media (max-width: 767px) {
    .elementor-element-bb89e67,
    .elementor-element-12a0044 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}


/* PARCOURS-MOBILE-2026-08-14 — raccourcir le chemin vers le bouton de devis.
 * Mesure : 3,3 ecrans de defilement avant « Ajouter a mon devis ». */
@media (max-width: 767px) {

  /* La galerie occupait 533 px, soit les deux tiers du premier ecran utile. */
  .woocommerce-product-gallery,
  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery__image img {
    max-height: 62vh;
  }

  .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Champs du formulaire : marges calibrees pour le desktop, resserrees d'un tiers. */
  .koaprint-quote__label { margin-bottom: 6px !important; }
  .koaprint-quote__hint  { margin-bottom: 8px !important; }
  .koaprint-quote__form > * { margin-bottom: 12px; }
  .koaprint-quote__upload { margin-bottom: 10px !important; }
  .koaprint-quote__textarea { min-height: 92px; }

  /* Pastilles de couleur : deux rangees visibles, le reste au tap.
   * Sur un produit a 20 coloris, la grille poussait le formulaire de plusieurs centaines
   * de pixels. Rien n'est retire — tout reste accessible. */
  .koaprint-quote__swatches {
    max-height: 108px;
    overflow: hidden;
    position: relative;
    transition: max-height .25s ease;
  }

  .koaprint-quote__swatches.koa-ouvert { max-height: none; }

  .koaprint-quote__swatches-plus {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid #cbdcd6;
    border-radius: 999px;
    background: #f2f7f5;
    color: #0f544d;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
  }
}