/*
 * Claude — 13/08/2026 — Refonte du bloc de réassurance de la fiche produit (template
 * Elementor "Produits", post 17560, containers e1cf76a / 8f2c1a3). Les 3 zones utilisent
 * maintenant la même structure : pastille ronde jaune (widget icon natif, view "stacked",
 * shape "circle", couleurs deja posees dans le JSON via __globals__) + titre gras +
 * detail. Ce fichier ne fait QUE la typographie du titre/detail (grille unique, garantie
 * par construction puisque les 3 zones partagent LITTERALEMENT les memes classes), la
 * largeur de la bande d'appel a desktop, et un correctif de densite mesure en direct
 * (voir plus bas).
 *
 * IMPORTANT #1 (verifie en direct sur le HTML rendu le 13/08) : le controle Elementor
 * "_css_classes" fonctionne sur les WIDGETS (icon, text-editor -> .koa-reassurance-badge,
 * .koa-reassurance-title, .koa-reassurance-detail sont bien dans le DOM) mais PAS sur les
 * CONTAINERS de cette version d'Elementor (Pro 4.2.0) : les classes posees sur les lignes
 * (icone+texte) et la colonne de texte ne sortent jamais dans le HTML. D'ou le recours a
 * l'ID d'element natif (.elementor-element-XXXXXXX) pour les regles qui doivent cibler un
 * conteneur — id stable, verifie present dans le rendu.
 *
 * IMPORTANT #2 (trouve en comparant deux captures d'ecran avant/apres un premier essai de
 * correctif qui ne changeait rien a l'affichage) : Elementor pose sa propre regle globale
 * ".elementor-widget-text-editor{font-size:var(--e-global-typography-text-font-size)}" sur
 * CE MEME element (text-editor widget) — meme specificite qu'un simple ".koa-reassurance-
 * title" (une seule classe chacune), donc c'est l'ORDRE d'apparition dans le CSS combine
 * par LiteSpeed qui tranche, pas la logique de cascade habituelle. Sans garantie sur cet
 * ordre (LiteSpeed recombine le CSS a chaque purge), toutes les regles de taille de police
 * ci-dessous sont en !important — seule facon fiable de ne jamais se faire ecraser par ce
 * style global, verifie apres coup sur le rendu reel.
 */

.koa-reassurance-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    color: #1A1A1A !important;
    margin: 0 !important;
}

.koa-reassurance-detail {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    color: #5A6570 !important;
    margin: 4px 0 0 !important;
}

/*
 * Correction mesurée en direct sur le rendu (captures 768 et 1440, 13/08) : la fiche
 * produit place ce bloc dans une colonne étroite (~600px de large, PAS liée au viewport —
 * galerie/infos en deux colonnes dès 768, colonne de contenu qui ne s'élargit plus au-delà
 * même à 1440). Résultat mesuré : à 16px, "Devis et maquette immédiats" et "Production en
 * 1 à 2 semaines" passaient sur 2 lignes, y compris à 1440 (181px de texte disponible par
 * zone une fois pastille + fente soustraites, largement sous les ~240px requis à 16px). Le
 * viewport à lui seul ne dit donc rien de la place réelle : on resserre pastille + fente +
 * padding ET on réduit le titre dès que cette colonne étroite peut être active, c'est-à-dire
 * dès 768px (en dessous, page en une seule colonne pleine largeur, 16px tient déjà — vérifié
 * à 375px).
 */
@media (min-width: 768px) {
    .koa-reassurance-title {
        font-size: 13.5px !important;
    }

    .koa-reassurance-detail {
        font-size: 12.5px !important;
    }

    /*
     * Rétrécissement du cercle par SES PROPRES leviers natifs (font-size + padding,
     * exactement ce que contrôlent "size"/"icon_padding" du widget icon Elementor) plutôt
     * que par un width/height forcé : un premier essai en width/height a désaligné l'icône
     * dans le cercle (le centrage interne d'Elementor part de font-size + padding, pas de
     * dimensions fixes) — corrigé en repassant par les mêmes propriétés que le natif.
     */
    .koa-reassurance-badge .elementor-icon {
        font-size: 16px !important;
        padding: 10px !important;
    }

    .koa-reassurance-badge .elementor-icon svg {
        height: 16px !important;
    }

    .elementor-element.elementor-element-fdc85a3,
    .elementor-element.elementor-element-b5dd29b,
    .elementor-element.elementor-element-9b21fb2 {
        gap: 10px !important;
    }

    .elementor-element.elementor-element-4439e63,
    .elementor-element.elementor-element-6c238d8,
    .elementor-element.elementor-element-8f2c1a3 {
        padding: 18px !important;
    }
}

/* Bande d'appel (post 17560, ligne icone+texte = id natif 9b21fb2) : sur desktop, on limite
 * la largeur du bloc pastille+texte pour laisser une vraie respiration au bouton vert a
 * droite. Uniquement au-dela du breakpoint tablette Elementor (1024px) : en dessous, la
 * bande passe deja en colonne (flex_direction_tablet: column, reglage natif du template),
 * la contrainte de largeur y serait donc inutile, voire genante. */
@media (min-width: 1025px) {
    .elementor-17560 .elementor-element.elementor-element-9b21fb2 {
        max-width: 380px;
    }
}

@media (max-width: 480px) {
    .koa-reassurance-title {
        font-size: 14.5px !important;
    }

    .koa-reassurance-detail {
        font-size: 13px !important;
    }
}