/**
 * ================================================================
 * FICHIER : WebExpress.css
 * EMPLACEMENT : 2027_B2B/pages/WebExpress/WebExpress.css
 * SHORT_DESC : Styles propres à la landing « Web Express » (en-tête compact, carte du questionnaire, sections)
 * DESCRIPTION : N'ajoute que des classes webexpress_* : les sections, étapes, inclus, tarif, FAQ et appel final
 *               réutilisent Web_Flash.css, les champs du formulaire de rappel réutilisent Contact.css (chargés par
 *               le brain). Jetons de _theme/theme.css uniquement (couleurs, espaces, rayons, durées), mobile
 *               d'abord, états de focus visibles, animations discrètes coupées par prefers-reduced-motion.
 *
 * SOMMAIRE :
 *   - WX_ENTETE        : En-tête compact, atouts, grille texte / carte
 *   - WX_CARTE         : Carte du questionnaire, progression, tarif en direct, reprise
 *   - WX_CHAMPS        : Champs, options (cases, choix), aides, erreurs
 *   - WX_TYPES         : Fichiers, domaine, pages, Google Ads, acompte
 *   - WX_ETATS         : Attente IA, message, actions, confirmation, confettis
 *   - WX_SECTIONS      : Sommaire, parcours en cinq étapes, tarif, Google Ads, conditions
 *   - RESPONSIVE
 *   - WX_JALONS        : Badges d'avancement (gamification), WX_RECAP : devis en direct, WX_BARRE_TARIF : barre mobile,
 *                        WX_INDICATEUR_IA, WX_ENCOURAGEMENT, WX_PAIEMENT_CARTE_CONTENEUR (Antigravity, 15:25)
 *   - WX_V2            : Tête collée, préparation IA, suggestions, puces, cartes de style, structure du site, dictée,
 *                        vignettes et visionneuse, estimation Google Ads, acompte libre, offre Famille, blocs lus,
 *                        formulaire fermé, mouvement réduit (lot P, 16:10)
 *
 * MODIFICATIONS :
 *   - 21/10/2026 17:14 : Mobile (Claude, Dialogue 2027_B2B n° 1803) : studio « Sur mesure » en auto-fit (plus de 620 px
 *                        imposés) et minmax(0, 1fr) sous 768 px, champ « Autre montant » Google Ads qui héritait des
 *                        20 px des cases (.webexpress_option input), acompte en minmax(0, 1fr), bloc MOBILE_DEBORDEMENT_1803
 *                        (montant libre à la ligne, longs mots coupés, encadrés imbriqués moins épais) — A VALIDER PAR JaxX
 *   - 14/10/2026 18:40 : Mobile (n° 1301, lot P) : grille en minmax(0, 1fr) et min-width: 0 sur ses enfants, la piste des
 *                        jalons (nowrap) provoquait un défilement horizontal de la page à 390 px — A VALIDER PAR JaxX
 *   - 14/10/2026 16:10 : V2 lot P (Dialogue n° 1301, Claude, sous-agent de Claude #1) : jalons (ex-paliers, collision
 *                        avec les paliers Google Ads), recap_montant (ex-compteur, collision avec le compteur de pages),
 *                        delta de prix, cartes de style IA, bloc structure One page / Multi-pages, puces cliquables,
 *                        suggestions IA, dictée, vignettes et visionneuse, estimation Ads, « Autre montant », offre
 *                        Famille (n° 1315), blocs lus à voix haute, formulaire fermé, tête collée — A VALIDER PAR JaxX
 *   - 14/10/2026 15:25 : V2 Onboarding & Micro-animations (Dialogue n° 1317, Antigravity) : paliers de gamification,
 *                        récapitulatif en direct, barre basse mobile de devis, indicateur IA, encouragement et
 *                        conteneur de paiement par carte (lot R) — A VALIDER PAR JaxX
 *   - 14/10/2026 05:52 : Création (Dialogue n° 1266, lot B, sous-agent de Claude #1) — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* WX_ENTETE =========================================================== */
.webexpress_entete
{
    position: relative;
    overflow: hidden;
    padding: clamp(16px, 4vw, 64px) 0 clamp(32px, 5vw, 72px);
    border-bottom: 1px solid var(--ligne);
    isolation: isolate;
}

.webexpress_entete_halo
{
    position: absolute;
    z-index: -1;
    width: clamp(280px, 40vw, 620px);
    aspect-ratio: 1;
    left: -12%;
    top: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent_halo) 0%, transparent 68%);
    pointer-events: none;
}

.webexpress_entete_grille
{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.webexpress_entete_texte
{
    padding-top: clamp(0px, 2vw, 32px);
}

.webexpress_entete_texte .sur_titre
{
    margin-bottom: 6px;
}

.webexpress_titre
{
    max-width: 16ch;
    margin: 0 0 var(--espace_2) 0;
    font-size: clamp(1.75rem, 1.1rem + 3vw, 3.4rem);
    line-height: 1.08;
}

.webexpress_promesse
{
    max-width: 52ch;
    margin: 0 0 var(--espace_2) 0;
    font-size: clamp(0.98rem, 0.9rem + 0.5vw, 1.15rem);
    color: var(--encre_second);
}

.webexpress_atouts
{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.webexpress_atouts li
{
    padding: 4px 10px;
    font-size: var(--texte_xs);
    font-weight: 600;
    color: var(--encre);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon);
    background: var(--surface_carte);
}

.webexpress_rassurance
{
    list-style: none;
    margin: var(--espace_4) 0 0 0;
    padding: 0;
}

.webexpress_rassurance li
{
    position: relative;
    padding: 10px 0 10px 26px;
    color: var(--encre_second);
    border-top: 1px solid var(--ligne);
}

.webexpress_rassurance li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 12px;
    height: 1px;
    background: var(--accent);
}
/* WX_ENTETE =========================================================== */

/* WX_CARTE ============================================================ */
.webexpress_carte
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espace_3);
    padding: clamp(18px, 3vw, 36px);
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-top: 2px solid var(--accent);
    border-radius: var(--rayon_carte);
    box-shadow: var(--ombre);
    scroll-margin-top: calc(var(--hauteur_header) + 12px);
    animation: webexpress_apparition 420ms var(--easing) both;
}

@keyframes webexpress_apparition
{
    from
    {
        opacity: 0;
        transform: translateY(10px);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

.webexpress_carte [hidden]
{
    display: none !important;
}

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

.webexpress_progression
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.webexpress_progression_texte
{
    font-size: var(--texte_xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_second);
}

.webexpress_progression_piste
{
    position: relative;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ligne);
}

.webexpress_progression_barre
{
    position: absolute;
    inset: 0 auto 0 0;
    width: 4%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 480ms var(--easing);
}

.webexpress_tarif_direct
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 10px 12px;
    font-size: var(--texte_s);
    color: var(--encre_second);
    background: var(--fond_second);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
}

.webexpress_tarif_direct strong
{
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

.webexpress_tarif_direct strong.webexpress_pulse
{
    animation: webexpress_pulse 520ms var(--easing);
}

@keyframes webexpress_pulse
{
    0%
    {
        color: var(--accent);
    }
    100%
    {
        color: var(--encre);
    }
}

.webexpress_reprise
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--succes);
    background: var(--fond_second);
}

.webexpress_reprise_texte
{
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_second);
}

.webexpress_lien_bouton
{
    padding: 6px 0;
    font: inherit;
    font-size: var(--texte_s);
    color: var(--accent);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.webexpress_lien_bouton:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webexpress_bandeau_admin
{
    margin: 0;
}
/* WX_CARTE ============================================================ */

/* WX_CHAMPS =========================================================== */
.webexpress_formulaire
{
    margin: 0;
}

.webexpress_etape
{
    animation: webexpress_etape_entree 360ms var(--easing) both;
}

.webexpress_etape.webexpress_etape_retour
{
    animation-name: webexpress_etape_entree_retour;
}

@keyframes webexpress_etape_entree
{
    from
    {
        opacity: 0;
        transform: translateX(14px);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

@keyframes webexpress_etape_entree_retour
{
    from
    {
        opacity: 0;
        transform: translateX(-14px);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

.webexpress_etape_titre
{
    margin: 0 0 6px 0;
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
    line-height: 1.2;
}

.webexpress_etape_titre:focus
{
    outline: none;
}

.webexpress_etape_titre:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.webexpress_etape_intro
{
    margin: 0 0 var(--espace_3) 0;
    color: var(--encre_second);
}

.webexpress_etape_agent
{
    display: inline-block;
    margin: 0 0 var(--espace_2) 0;
    padding: 3px 10px;
    font-size: var(--texte_xs);
    font-weight: 600;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
}

.webexpress_champs
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 16px;
}

.webexpress_champ
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.webexpress_libelle
{
    padding: 0;
    font-size: var(--texte_s);
    font-weight: 600;
    color: var(--encre);
}

.webexpress_requis
{
    color: var(--accent);
}

.webexpress_facultatif
{
    margin-left: 6px;
    font-weight: 400;
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

.webexpress_saisie
{
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--encre);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input);
    transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

textarea.webexpress_saisie
{
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

select.webexpress_saisie
{
    cursor: pointer;
}

.webexpress_saisie::placeholder
{
    color: var(--encre_attenuee);
}

.webexpress_saisie:hover
{
    border-color: var(--encre_attenuee);
}

.webexpress_saisie:focus
{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_halo), 0 4px 14px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.webexpress_saisie[aria-invalid="true"]
{
    border-color: var(--erreur);
}

.webexpress_aide
{
    margin: 0;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_erreur
{
    margin: 0;
    font-size: var(--texte_xs);
    font-weight: 600;
    color: var(--erreur);
}

.webexpress_options
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.webexpress_option
{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-size: var(--texte_s);
    color: var(--encre);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--duree) var(--easing), background-color var(--duree) var(--easing), transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--duree) var(--easing);
}

.webexpress_option:hover
{
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent_halo);
}

.webexpress_option:active
{
    transform: scale(0.985);
}

.webexpress_badge_offert
{
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--texte_xs);
    font-weight: 700;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.webexpress_option input
{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.webexpress_option input:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webexpress_option:has(input:checked)
{
    border-color: var(--accent);
    background: var(--accent_halo);
}

.webexpress_option_case
{
    background: transparent;
}

.webexpress_champ_options[aria-invalid="true"] .webexpress_option,
.webexpress_champ_case[aria-invalid="true"] .webexpress_option
{
    border-color: var(--erreur);
}

.webexpress_mention
{
    margin: var(--espace_3) 0 0 0;
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}
/* WX_CHAMPS =========================================================== */

/* WX_TYPES ============================================================ */
/* Fichiers : zone de dépôt, liste des fichiers envoyés */
.webexpress_depot
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 14px;
    text-align: center;
    color: var(--encre_second);
    background: var(--surface_input);
    border: 1px dashed var(--ligne_forte);
    border-radius: var(--rayon_input);
    cursor: pointer;
    transition: border-color var(--duree) var(--easing), background-color var(--duree) var(--easing);
}

.webexpress_depot:hover,
.webexpress_depot.webexpress_depot_survol
{
    border-color: var(--accent);
    background: var(--accent_halo);
}

.webexpress_depot input[type="file"]
{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.webexpress_depot:focus-within
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webexpress_depot_titre
{
    font-weight: 600;
    color: var(--encre);
}

.webexpress_depot_formats
{
    font-size: var(--texte_xs);
}

.webexpress_fichiers
{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.webexpress_fichier
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    font-size: var(--texte_xs);
    color: var(--encre_second);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
}

.webexpress_fichier_nom
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webexpress_fichier_retirer
{
    flex: 0 0 auto;
    min-width: 40px;
    min-height: 32px;
    padding: 4px 8px;
    font: inherit;
    color: var(--encre_second);
    background: none;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    cursor: pointer;
}

.webexpress_fichier_retirer:hover,
.webexpress_fichier_retirer:focus-visible
{
    color: var(--erreur);
    border-color: var(--erreur);
}

.webexpress_fichier_en_cours
{
    font-style: italic;
}

/* Domaine : état de disponibilité */
.webexpress_domaine_etat
{
    margin: 0;
    padding-left: 18px;
    position: relative;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_domaine_etat::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--encre_attenuee);
}

.webexpress_domaine_etat[data-etat="libre"]::before
{
    background: var(--succes);
}

.webexpress_domaine_etat[data-etat="pris"]::before,
.webexpress_domaine_etat[data-etat="extension"]::before,
.webexpress_domaine_etat[data-etat="format"]::before
{
    background: var(--erreur);
}

/* Pages supplémentaires : compteur */
.webexpress_compteur
{
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input);
    overflow: hidden;
}

.webexpress_compteur button
{
    min-width: 48px;
    min-height: 48px;
    font: inherit;
    font-size: 1.3rem;
    color: var(--encre);
    background: var(--surface_input);
    border: 0;
    cursor: pointer;
}

.webexpress_compteur button:hover:not(:disabled)
{
    color: var(--accent);
}

.webexpress_compteur button:disabled
{
    color: var(--encre_attenuee);
    cursor: not-allowed;
}

.webexpress_compteur button:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.webexpress_compteur output
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--encre);
    border-left: 1px solid var(--ligne);
    border-right: 1px solid var(--ligne);
}

/* Google Ads : paliers proposés et montant libre */
.webexpress_ads_texte
{
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_second);
}

.webexpress_paliers
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.webexpress_palier
{
    flex-direction: column;
    gap: 2px;
}

.webexpress_palier input
{
    position: absolute;
    top: 12px;
    right: 12px;
}

.webexpress_palier_nom
{
    font-size: var(--texte_xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_second);
}

.webexpress_palier_montant
{
    font-family: var(--police_titres);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--encre);
}

.webexpress_palier_clics
{
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_palier_conseille
{
    position: absolute;
    top: -9px;
    left: 10px;
    padding: 1px 8px;
    font-size: var(--texte_xs);
    font-weight: 700;
    color: var(--accent_texte);
    background: var(--accent);
    border-radius: var(--rayon);
}

.webexpress_ads_libre
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.webexpress_ads_libre .webexpress_saisie
{
    max-width: 140px;
    /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : le champ nombre héritait de « .webexpress_option input » (width et height 20 px, flex 0 0 auto, réservés au bouton radio) : il retrouve sa largeur et peut rétrécir */
    flex: 0 1 140px;
    width: 140px;
    height: auto;
    min-width: 72px;
    margin: 0;
}

/* Acompte : glissière et répartition */
.webexpress_acompte
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input);
    background: var(--surface_input);
}

.webexpress_acompte_valeurs
{
    display: grid;
    /* grid-template-columns: 1fr 1fr; */ /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : 1fr = minmax(auto, 1fr), un montant long élargissait la grille */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.webexpress_acompte_valeur
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.webexpress_acompte_valeur span
{
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_acompte_valeur strong
{
    font-family: var(--police_titres);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
    font-variant-numeric: tabular-nums;
    color: var(--encre);
}

.webexpress_acompte_valeur:last-child
{
    text-align: right;
}

.webexpress_glissiere
{
    width: 100%;
    min-height: 32px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.webexpress_glissiere:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.webexpress_acompte_reperes
{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

.webexpress_acompte_reperes button
{
    padding: 4px 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.webexpress_acompte_reperes button:hover,
.webexpress_acompte_reperes button:focus-visible
{
    color: var(--accent);
}
/* WX_TYPES ============================================================ */

/* WX_ETATS ============================================================ */
.webexpress_attente
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--espace_4) var(--espace_2);
    text-align: center;
}

.webexpress_attente_points
{
    display: inline-flex;
    gap: 6px;
}

.webexpress_attente_points span
{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    animation: webexpress_points 1.1s ease-in-out infinite;
}

.webexpress_attente_points span:nth-child(2)
{
    animation-delay: 0.15s;
}

.webexpress_attente_points span:nth-child(3)
{
    animation-delay: 0.3s;
}

@keyframes webexpress_points
{
    0%, 80%, 100%
    {
        opacity: 0.25;
        transform: scale(0.8);
    }
    40%
    {
        opacity: 1;
        transform: scale(1);
    }
}

.webexpress_attente_titre
{
    margin: 0;
    font-weight: 700;
    color: var(--encre);
}

.webexpress_attente_texte
{
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_second);
}

.webexpress_message
{
    margin: 0;
    padding: 10px 12px;
    font-size: var(--texte_s);
    color: var(--encre);
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--erreur);
    background: var(--fond_second);
}

.webexpress_message.webexpress_message_info
{
    border-left-color: var(--accent);
}

.webexpress_message.webexpress_message_succes
{
    border-left-color: var(--succes);
}

.webexpress_message .webexpress_lien_bouton
{
    margin-left: 8px;
}

.webexpress_actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding-top: var(--espace_2);
    border-top: 1px solid var(--ligne);
}

.webexpress_enregistre
{
    flex: 1 1 auto;
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

.webexpress_bouton_suivant
{
    margin-left: auto;
}

.webexpress_bouton_suivant[aria-busy="true"]
{
    opacity: 0.7;
    cursor: progress;
}

.webexpress_confirmation
{
    padding: var(--espace_3);
    border-top: 2px solid var(--succes);
    background: var(--fond_second);
}

.webexpress_confirmation p
{
    color: var(--encre_second);
}

.webexpress_confirmation:focus
{
    outline: none;
}

.webexpress_retour
{
    font-size: var(--texte_s);
}

/* Confettis discrets (créés par le script, retirés au bout de 2,5 s, jamais sous reduced-motion) */
.webexpress_confettis
{
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    pointer-events: none;
}

.webexpress_confetti
{
    position: absolute;
    top: -12px;
    width: 7px;
    height: 12px;
    border-radius: 1px;
    opacity: 0.9;
    animation: webexpress_chute 2.2s cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}

@keyframes webexpress_chute
{
    0%
    {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 0.95;
    }
    100%
    {
        transform: translate3d(var(--webexpress_derive, 0px), 70vh, 0) rotate(var(--webexpress_rotation, 360deg));
        opacity: 0;
    }
}
/* WX_ETATS ============================================================ */

/* WX_SECTIONS ========================================================= */
.webexpress_sommaire
{
    margin-top: 0;
    padding-top: var(--espace_1);
    border-top: 0;
}

.web_flash_etapes.webexpress_etapes_cinq
{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--espace_3);
}

.webexpress_tarif_exemple
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_3);
}

.webexpress_figure
{
    margin: 0;
    overflow: hidden;
    border-radius: var(--rayon_carte);
    box-shadow: var(--ombre);
}

.webexpress_figure img
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.webexpress_calcul
{
    margin: 0;
}

.webexpress_calcul div
{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--ligne);
}

.webexpress_calcul dt
{
    color: var(--encre_second);
}

.webexpress_calcul dd
{
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--encre);
    white-space: nowrap;
}

.webexpress_ads_grille
{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.webexpress_texte
{
    max-width: 62ch;
    color: var(--encre_second);
}

.webexpress_conditions
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--espace_3) var(--espace_4);
}

.webexpress_condition
{
    padding-top: var(--espace_2);
    border-top: 1px solid var(--ligne_forte);
}

.webexpress_condition_titre
{
    margin: 0 0 6px 0;
    font-size: var(--texte_m, 1.05rem);
}

.webexpress_condition_texte
{
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_second);
}
/* WX_SECTIONS ========================================================= */

/* RESPONSIVE ========================================================== */
@media (min-width: 640px)
{
    .webexpress_champs
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webexpress_champ_large
    {
        grid-column: 1 / -1;
    }

    .webexpress_options_choix,
    .webexpress_paliers
    {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .webexpress_options_cases
    {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 1100px)
{
    .web_flash_etapes.webexpress_etapes_cinq
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px)
{
    .webexpress_entete_grille,
    .webexpress_ads_grille
    {
        /* grid-template-columns: 1fr; */ /* 14/10/2026 18:40 (n° 1301, lot P) : 1fr = minmax(auto, 1fr), la piste des jalons (nowrap) élargissait la carte au-delà de l'écran */
        grid-template-columns: minmax(0, 1fr);
    }

    /* 14/10/2026 18:40 (n° 1301, lot P) : aucun enfant de la grille ne peut forcer un débordement horizontal (les jalons défilent dans leur piste) */
    .webexpress_entete_grille > *,
    .webexpress_ads_grille > *
    {
        min-width: 0;
    }

    .webexpress_entete_grille
    {
        gap: var(--espace_3);
    }

    .webexpress_entete_texte
    {
        padding-top: 0;
    }

    /* Le questionnaire passe au plus près du haut de l'écran : la rassurance est redite plus bas */
    .webexpress_rassurance
    {
        display: none;
    }

    .web_flash_etapes.webexpress_etapes_cinq
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px)
{
    .webexpress_promesse
    {
        margin-bottom: 10px;
    }

    .webexpress_carte
    {
        margin-left: calc(var(--espace_1, 8px) * -0.5);
        margin-right: calc(var(--espace_1, 8px) * -0.5);
    }

    .webexpress_actions
    {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 0 calc(clamp(18px, 3vw, 36px) * -1) calc(clamp(18px, 3vw, 36px) * -1);
        padding: 10px clamp(18px, 3vw, 36px);
        background: var(--surface_carte);
        backdrop-filter: blur(8px);
    }

    .webexpress_bouton_suivant
    {
        flex: 1 1 auto;
        justify-content: center;
    }

    .webexpress_enregistre
    {
        order: 3;
        flex-basis: 100%;
        text-align: center;
    }
}

/* WX_JALONS =========================================================== */
/* 14/10/2026 16:10 (n° 1301, lot P) : les badges d'avancement s'appellent « jalons » : les classes « paliers / palier »
   sont celles des paliers de budget Google Ads (WX_TYPES) et entraient en collision. Ancien bloc d'Antigravity (15:25) :
.webexpress_paliers
{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 0 6px 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.webexpress_paliers::-webkit-scrollbar { display: none; }
.webexpress_palier { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: var(--texte_xs); font-weight: 500; color: var(--encre_second); background: var(--surface_input); border: 1px solid var(--ligne_forte); border-radius: 20px; white-space: nowrap; }
.webexpress_palier_coche { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--encre_attenuee); }
.webexpress_palier.webexpress_palier_cours { color: var(--encre); font-weight: 600; border-color: var(--accent); background: var(--accent_halo); }
.webexpress_palier.webexpress_palier_cours .webexpress_palier_coche { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: webexpress_palier_pulse 1.8s infinite; }
.webexpress_palier.webexpress_palier_valide { color: var(--encre_second); border-color: #2f9e6b; background: var(--surface_carte); }
.webexpress_palier.webexpress_palier_valide .webexpress_palier_coche { background: #2f9e6b; }
@keyframes webexpress_palier_pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
*/
.webexpress_jalons
{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 0 6px 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.webexpress_jalons::-webkit-scrollbar
{
    display: none;
}

.webexpress_jalon
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--texte_xs);
    font-weight: 500;
    color: var(--encre_second);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: 20px;
    white-space: nowrap;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing), background-color var(--duree) var(--easing), transform var(--duree) var(--easing);
}

.webexpress_jalon_coche
{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--encre_attenuee);
    transition: background-color var(--duree) var(--easing), transform var(--duree) var(--easing);
}

.webexpress_jalon.webexpress_jalon_cours
{
    color: var(--encre);
    font-weight: 600;
    border-color: var(--accent);
    background: var(--accent_halo);
}

.webexpress_jalon.webexpress_jalon_cours .webexpress_jalon_coche
{
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
    animation: webexpress_jalon_pulse 1.8s infinite;
}

.webexpress_jalon.webexpress_jalon_valide
{
    color: var(--encre_second);
    border-color: var(--succes);
    background: var(--surface_carte);
}

.webexpress_jalon.webexpress_jalon_valide .webexpress_jalon_coche
{
    background: var(--succes);
}

/* Badge gagné : petit rebond puis halo, comme une application mobile */
.webexpress_jalon.webexpress_jalon_gagne
{
    animation: webexpress_jalon_gagne 640ms var(--easing);
}

@keyframes webexpress_jalon_pulse
{
    0%, 100%
    {
        transform: scale(1);
        opacity: 1;
    }
    50%
    {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

@keyframes webexpress_jalon_gagne
{
    0%
    {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--accent_halo);
    }
    35%
    {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px var(--accent_halo);
    }
    100%
    {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}
/* WX_JALONS =========================================================== */

/* WX_RECAP ============================================================ */
.webexpress_recap
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface_input);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_input);
    transition: border-color var(--duree) var(--easing);
}

.webexpress_recap:hover
{
    border-color: var(--ligne_forte);
}

.webexpress_recap_total
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
}

.webexpress_recap_libelle
{
    font-size: var(--texte_xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--encre_second);
}

/* 14/10/2026 16:10 (n° 1301, lot P) : « recap_montant » (la classe « compteur » est le compteur de pages de WX_TYPES).
   Ancien bloc d'Antigravity (15:25) :
.webexpress_compteur { font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.webexpress_compteur.webexpress_compteur_pulse { animation: webexpress_pulse 420ms var(--easing); }
*/
.webexpress_recap_total
{
    position: relative;
}

.webexpress_recap_montant
{
    font-family: var(--police_titres);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
    font-weight: 700;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
    transition: color var(--duree) var(--easing);
}

.webexpress_recap_montant.webexpress_pulse
{
    animation: webexpress_pulse 420ms var(--easing);
}

/* Différence qui s'envole (« + 100 € ») quand le devis change */
.webexpress_recap_delta
{
    position: absolute;
    right: 0;
    top: -1.2em;
    padding: 2px 8px;
    font-size: var(--texte_xs);
    font-weight: 700;
    color: var(--accent_texte);
    background: var(--accent);
    border-radius: var(--rayon_badge, 20px);
    pointer-events: none;
    animation: webexpress_delta_envol 1.9s var(--easing) both;
}

.webexpress_recap_delta.webexpress_recap_delta_moins
{
    color: #ffffff;
    background: var(--succes);
}

@keyframes webexpress_delta_envol
{
    0%
    {
        opacity: 0;
        transform: translateY(8px) scale(0.9);
    }
    15%
    {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
    70%
    {
        opacity: 1;
        transform: translateY(-6px) scale(1);
    }
    100%
    {
        opacity: 0;
        transform: translateY(-18px) scale(0.95);
    }
}

/* Offre Famille (n° 1315) : « Offert » à la place du total, acompte retiré */
.webexpress_recap_offert
{
    font-family: var(--police_titres);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
    font-weight: 700;
    color: var(--succes);
}

.webexpress_recap.webexpress_recap_offert_actif
{
    border-color: var(--succes);
}

.webexpress_recap_lignes
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
}

.webexpress_recap_ligne
{
    display: flex;
    justify-content: space-between;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_recap_acompte
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_second);
}

.webexpress_recap_acompte strong
{
    color: var(--accent);
    font-weight: 600;
}

.webexpress_recap_detail
{
    font-size: var(--texte_xs);
}

.webexpress_recap_detail summary
{
    cursor: pointer;
    color: var(--encre_attenuee);
    user-select: none;
}

.webexpress_recap_detail summary:hover
{
    color: var(--encre_second);
}
/* WX_RECAP ============================================================ */

/* WX_BARRE_TARIF (Mobile) ============================================== */
.webexpress_barre_tarif
{
    display: none;
}

@media (max-width: 900px)
{
    .webexpress_barre_tarif
    {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        background: var(--surface_carte);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--ligne_forte);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        animation: webexpress_apparition 300ms var(--easing);
    }

    .webexpress_barre_tarif[hidden]
    {
        display: none !important;
    }

    .webexpress_barre_total
    {
        font-size: var(--texte_s);
        color: var(--encre);
        font-weight: 600;
    }

    .webexpress_barre_acompte
    {
        font-size: var(--texte_xs);
        color: var(--encre_second);
    }

    .webexpress_barre_acompte strong
    {
        color: var(--accent);
    }

    .webexpress_barre_lien
    {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        font-size: var(--texte_s);
        font-weight: 600;
        color: #ffffff;
        background: var(--accent);
        border-radius: var(--rayon_input);
        text-decoration: none;
        transition: transform 160ms var(--easing), opacity var(--easing);
    }

    .webexpress_barre_lien:active
    {
        transform: scale(0.97);
    }
}
/* WX_BARRE_TARIF ======================================================= */

/* WX_INDICATEUR_IA ===================================================== */
.webexpress_ia_indicateur
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--texte_xs);
    font-weight: 500;
    color: var(--encre_second);
}

.webexpress_ia_point
{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--encre_attenuee);
    transition: background-color var(--duree) var(--easing);
}

.webexpress_ia_indicateur.webexpress_ia_indicateur_connecte .webexpress_ia_point
{
    background: #2f9e6b;
    box-shadow: 0 0 8px rgba(47, 158, 107, 0.6);
    animation: webexpress_pouls_vert 2s infinite;
}

/* WX_JARVIS_FILIGRANE (n° 1373 & 1405) : Jarvis en filigrane derrière le formulaire, variable dynamique par thème */
.webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_tchat_hd_net.png');
    isolation: isolate;
}

html.theme_corporate .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_corporate_cadre.png');
}

/* html.theme_minimaliste .webexpress_carte,
html.theme_suisse .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_minimaliste_cadre.png');
} */
/* 15/10/2026 03:41 (n° 1611) : Jarvis cyber-aristocratique pour Modern Minimaliste, Suisse garde l'ancien */
html.theme_minimaliste .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_cyberaristo_cadre.png');
}

html.theme_suisse .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_minimaliste_cadre.png');
}

html.theme_cyberpunk .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_cyberpunk_cadre.png');
}

html.theme_matrix .webexpress_carte,
html.theme_matrice .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_matrix_cadre.png');
}

html.theme_IAslop .webexpress_carte,
html.theme_futur2026 .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_iaslop_cadre.png');
}

html.theme_obsidian .webexpress_carte
{
    --wx_jarvis_url: url('/2027_B2B/_medias/site/visuels/divers/jarvis_filigrane_obsidian_centre_cadre.png');
}

.webexpress_jarvis_filigrane
{
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    background-image: var(--wx_jarvis_url, none);
    background-repeat: no-repeat;
    background-position: right 2% top;
    background-size: auto 100%;
    opacity: 0.10;
}

html.dark_mode .webexpress_jarvis_filigrane,
html.theme_cyberpunk .webexpress_jarvis_filigrane,
html.theme_matrix .webexpress_jarvis_filigrane,
html.theme_matrice .webexpress_jarvis_filigrane,
html.theme_obsidian .webexpress_jarvis_filigrane
{
    opacity: 0.14;
}

@media (max-width: 720px)
{
    .webexpress_jarvis_filigrane
    {
        background-position: center top;
        background-size: auto 70%;
        opacity: 0.07;
    }
}

.webexpress_ia_indicateur
{
    padding: 4px 10px;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--surface_input);
}

@keyframes webexpress_pouls_vert
{
    0%, 100%
    {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(47, 158, 107, 0.7);
    }
    50%
    {
        transform: scale(1.18);
        box-shadow: 0 0 0 5px rgba(47, 158, 107, 0);
    }
}
/* WX_INDICATEUR_IA ===================================================== */

/* WX_ENCOURAGEMENT ===================================================== */
.webexpress_encouragement
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0;
    font-size: var(--texte_xs);
    font-weight: 500;
    color: var(--accent);
    background: var(--accent_halo);
    border-radius: var(--rayon);
    border: 1px solid var(--accent);
    animation: webexpress_apparition 320ms var(--easing);
}
/* WX_ENCOURAGEMENT ===================================================== */

/* WX_PAIEMENT_CARTE_CONTENEUR ========================================= */
.webexpress_paiement
{
    padding-top: var(--espace_3);
    margin-top: var(--espace_2);
    border-top: 1px solid var(--ligne);
    animation: webexpress_apparition 400ms var(--easing);
}
/* WX_PAIEMENT_CARTE_CONTENEUR ========================================= */

/* WX_V2 =============================================================== */
/* 14/10/2026 16:10 (n° 1301, lot P) : composants V2 rendus par WebExpress.js et WebExpress_vue.php. Tout repose sur les
   variables de la charte 2027 (thème sombre et html.bright_mode) : aucune couleur en dur hors blanc sur accent. */

/* --- Tête collée (ordinateur) : le devis et les jalons restent visibles pendant le défilement --------------------- */
.webexpress_tete_sentinelle
{
    display: block;
    width: 100%;
    height: 1px;
    margin: -1px 0 0 0;
    pointer-events: none;
}

@media (min-width: 901px)
{
    .webexpress_carte_tete
    {
        position: sticky;
        top: calc(var(--hauteur_header) + 8px);
        z-index: 5;
        padding: 0 0 6px 0;
        background: var(--surface_carte);
        border-radius: var(--rayon);
        transition: box-shadow var(--duree) var(--easing), padding var(--duree) var(--easing);
    }

    .webexpress_carte_tete.webexpress_carte_tete_collee
    {
        padding: 10px 14px 8px 14px;
        margin-left: -14px;
        margin-right: -14px;
        box-shadow: 0 10px 24px -14px var(--ombre), 0 1px 0 0 var(--ligne);
    }

    .webexpress_carte_tete.webexpress_carte_tete_collee .webexpress_jalons
    {
        padding-bottom: 2px;
    }

    .webexpress_carte_tete.webexpress_carte_tete_collee .webexpress_encouragement,
    .webexpress_carte_tete.webexpress_carte_tete_collee .webexpress_famille
    {
        display: none;
    }
}

/* --- Progression et encouragement ------------------------------------------------------------------------------- */
.webexpress_progression_barre.webexpress_progression_barre_pleine
{
    background: var(--succes);
    box-shadow: 0 0 12px var(--succes);
}

.webexpress_encouragement.webexpress_encouragement_entree
{
    animation: webexpress_encouragement_entree 480ms var(--easing);
}

@keyframes webexpress_encouragement_entree
{
    0%
    {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    60%
    {
        opacity: 1;
        transform: translateY(-2px) scale(1.01);
    }
    100%
    {
        transform: translateY(0) scale(1);
    }
}

/* --- Formulaire fermé (lot O : visiteurs en attendant l'ouverture) --------------------------------------------- */
.webexpress_ferme
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_2);
    align-items: flex-start;
    animation: webexpress_apparition 320ms var(--easing);
}

.webexpress_ferme .web_flash_message
{
    margin: 0;
}

/* --- Blocs lus à voix haute (module commun lecture_vocale) ----------------------------------------------------- */
.webexpress_lecture
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--espace_2) var(--espace_3);
    background: var(--surface_input);
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
    animation: webexpress_apparition 320ms var(--easing);
}

.webexpress_lecture_article
{
    margin: 0;
}

.webexpress_lecture_titre
{
    margin: 0 0 4px 0;
    font-family: var(--police_titres);
    font-size: var(--texte_m);
    font-weight: 600;
    color: var(--encre);
}

.webexpress_lecture_texte
{
    margin: 0;
    font-size: var(--texte_s);
    line-height: 1.55;
    color: var(--encre_second);
}

.webexpress_lecture_page
{
    margin-top: var(--espace_2);
}

/* --- Préparation IA (rouages) et champs arrivés en retard ------------------------------------------------------ */
.webexpress_ia_preparation
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: var(--texte_xs);
    color: var(--encre_second);
    background: var(--surface_input);
    border: 1px dashed var(--ligne_forte);
    border-radius: var(--rayon);
    animation: webexpress_apparition 260ms var(--easing);
}

.webexpress_ia_rouages
{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.webexpress_ia_rouages span
{
    display: block;
    width: 9px;
    height: 9px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: webexpress_rouage 1.1s linear infinite;
}

.webexpress_ia_rouages span:nth-child(2)
{
    width: 13px;
    height: 13px;
    animation-direction: reverse;
    animation-duration: 1.5s;
}

.webexpress_ia_rouages span:nth-child(3)
{
    animation-duration: 0.9s;
}

@keyframes webexpress_rouage
{
    to
    {
        transform: rotate(360deg);
    }
}

.webexpress_champ.webexpress_champ_entree
{
    animation: webexpress_etape_entree 360ms var(--easing);
}

.webexpress_champ.webexpress_champ_ia
{
    padding: 10px 12px;
    background: var(--accent_halo);
    border-radius: var(--rayon);
    animation: webexpress_apparition 400ms var(--easing);
}

.webexpress_champs.webexpress_champs_ia
{
    animation: webexpress_champs_ia 900ms var(--easing);
}

@keyframes webexpress_champs_ia
{
    0%
    {
        box-shadow: 0 0 0 0 var(--accent_halo);
    }
    40%
    {
        box-shadow: 0 0 0 6px var(--accent_halo);
    }
    100%
    {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* --- Suggestions IA (pastilles cliquables sous un champ libre) ------------------------------------------------- */
.webexpress_suggestions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0 0;
    animation: webexpress_apparition 320ms var(--easing);
}

.webexpress_suggestions_titre
{
    width: 100%;
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

.webexpress_suggestion
{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 11px;
    font: inherit;
    font-size: var(--texte_xs);
    color: var(--encre_second);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: 20px;
    cursor: pointer;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing), background-color var(--duree) var(--easing), transform 160ms var(--easing);
}

.webexpress_suggestion:hover,
.webexpress_suggestion:focus-visible
{
    color: var(--encre);
    border-color: var(--accent);
    background: var(--accent_halo);
    transform: translateY(-1px);
    outline: none;
}

.webexpress_suggestion.webexpress_suggestion_utilisee
{
    color: var(--encre_attenuee);
    border-style: dashed;
    text-decoration: line-through;
}

/* --- Puces cliquables (choix multiples + ajout libre) ------------------------------------------------------------ */
.webexpress_puces
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.webexpress_puce
{
    margin: 0;
}

.webexpress_puce_bouton
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font: inherit;
    font-size: var(--texte_s);
    color: var(--encre_second);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: 20px;
    cursor: pointer;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing), background-color var(--duree) var(--easing), transform 160ms var(--easing);
}

.webexpress_puce_bouton::before
{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--ligne_forte);
    transition: background-color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.webexpress_puce_bouton:hover,
.webexpress_puce_bouton:focus-visible
{
    color: var(--encre);
    border-color: var(--accent);
    transform: translateY(-1px);
    outline: none;
}

.webexpress_puce_bouton[aria-pressed="true"],
.webexpress_puce_active .webexpress_puce_bouton
{
    color: var(--encre);
    font-weight: 600;
    border-color: var(--accent);
    background: var(--accent_halo);
}

.webexpress_puce_bouton[aria-pressed="true"]::before,
.webexpress_puce_active .webexpress_puce_bouton::before
{
    background: var(--accent);
    border-color: var(--accent);
}

.webexpress_puce_ia .webexpress_puce_bouton
{
    border-style: dashed;
}

.webexpress_puce.webexpress_puce_entree
{
    animation: webexpress_puce_entree 360ms var(--easing);
}

.webexpress_puce_bouton.webexpress_puce_choisie
{
    animation: webexpress_jalon_gagne 420ms var(--easing);
}

@keyframes webexpress_puce_entree
{
    from
    {
        opacity: 0;
        transform: scale(0.85);
    }
    to
    {
        opacity: 1;
        transform: scale(1);
    }
}

.webexpress_puces_ajout,
.webexpress_structure_ajout
{
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.webexpress_puces_ajout .webexpress_saisie,
.webexpress_structure_ajout .webexpress_saisie
{
    flex: 1 1 auto;
    min-width: 0;
}

.webexpress_puces_ajout .bouton_secondaire,
.webexpress_structure_ajout .bouton_secondaire
{
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Cartes de style (palette, typographie, aperçu) ------------------------------------------------------------- */
.webexpress_styles
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.webexpress_option.webexpress_style
{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 0 12px 0;
    overflow: hidden;
}

.webexpress_style input[type="radio"]
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.webexpress_style_apercu
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 92px;
    padding: 14px 14px 12px 14px;
    background: var(--wx_fond, var(--surface_input));
    color: var(--wx_encre, var(--encre));
    border-bottom: 1px solid var(--ligne);
}

.webexpress_style_titre_apercu
{
    font-family: var(--wx_police_titres, var(--police_titres));
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
}

.webexpress_style_texte_apercu
{
    font-family: var(--wx_police_texte, var(--police_texte));
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0.85;
}

.webexpress_style_bouton_apercu
{
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wx_accent_texte, #ffffff);
    background: var(--wx_accent, var(--accent));
    border-radius: 999px;
}

.webexpress_style_palette
{
    display: flex;
    gap: 6px;
    padding: 0 14px;
}

.webexpress_style_pastille
{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--ligne_forte);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.webexpress_style_nom
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-weight: 600;
    color: var(--encre);
}

.webexpress_style_badge
{
    padding: 2px 8px;
    font-size: var(--texte_xs);
    font-weight: 600;
    color: var(--accent_texte);
    background: var(--accent);
    border-radius: var(--rayon_badge, 20px);
}

.webexpress_style_description,
.webexpress_style_polices,
.webexpress_style_mots
{
    padding: 0 14px;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_style_polices
{
    font-family: var(--police_mono);
    color: var(--encre_attenuee);
}

.webexpress_style_ia
{
    border-style: dashed;
}

.webexpress_option.webexpress_option_choisie
{
    animation: webexpress_jalon_gagne 480ms var(--easing);
}

.webexpress_option.webexpress_option_active
{
    border-color: var(--accent);
    background: var(--accent_halo);
}

/* --- Structure du site : One page / Multi-pages, sections et pages réordonnables -------------------------------- */
.webexpress_formules
{
    margin-bottom: 12px;
}

.webexpress_formule_detail
{
    display: block;
    margin-top: 4px;
    font-size: var(--texte_xs);
    font-weight: 400;
    color: var(--encre_second);
}

.webexpress_structure_liste
{
    padding: 12px 14px;
    background: var(--surface_input);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    animation: webexpress_apparition 320ms var(--easing);
}

.webexpress_structure_titre
{
    margin: 0 0 8px 0;
    font-size: var(--texte_s);
    font-weight: 600;
    color: var(--encre);
}

.webexpress_structure_elements
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.webexpress_structure_element
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_input);
    transition: border-color var(--duree) var(--easing), background-color var(--duree) var(--easing);
}

.webexpress_structure_element.webexpress_structure_element_coche
{
    border-color: var(--accent);
}

.webexpress_structure_element.webexpress_structure_element_bouge
{
    animation: webexpress_structure_bouge 320ms var(--easing);
}

@keyframes webexpress_structure_bouge
{
    0%
    {
        background: var(--accent_halo);
        transform: scale(1.02);
    }
    100%
    {
        transform: scale(1);
    }
}

.webexpress_structure_case
{
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.webexpress_structure_case input
{
    flex: 0 0 auto;
    margin-top: 3px;
    accent-color: var(--accent);
}

.webexpress_structure_texte
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--texte_s);
    color: var(--encre);
}

.webexpress_structure_description
{
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_structure_ordre
{
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.webexpress_structure_ordre button
{
    width: 28px;
    height: 28px;
    padding: 0;
    font: inherit;
    line-height: 1;
    color: var(--encre_second);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input);
    cursor: pointer;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.webexpress_structure_ordre button:hover:not([disabled]),
.webexpress_structure_ordre button:focus-visible
{
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}

.webexpress_structure_ordre button[disabled]
{
    opacity: 0.35;
    cursor: default;
}

/* --- Dictée vocale (ordinateur) -------------------------------------------------------------------------------- */
.webexpress_saisie_dictee
{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.webexpress_saisie_dictee .webexpress_saisie
{
    flex: 1 1 auto;
    min-width: 0;
}

.webexpress_dictee
{
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    font: inherit;
    font-size: var(--texte_xs);
    font-weight: 600;
    color: var(--accent);
    background: var(--accent_halo);
    border: 1px solid var(--accent);
    border-radius: var(--rayon_input);
    cursor: pointer;
    transition: color var(--duree) var(--easing), background-color var(--duree) var(--easing), transform 160ms var(--easing);
}

.webexpress_dictee:hover,
.webexpress_dictee:focus-visible
{
    transform: translateY(-1px);
    outline: none;
}

.webexpress_dictee_icone
{
    position: relative;
    display: inline-block;
    width: 10px;
    height: 16px;
    background: currentColor;
    border-radius: 5px;
}

.webexpress_dictee_icone::after
{
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: -5px;
    height: 7px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 9px 9px;
}

.webexpress_dictee.webexpress_dictee_active
{
    color: #ffffff;
    background: var(--erreur);
    border-color: var(--erreur);
    animation: webexpress_dictee_pouls 1.4s infinite;
}

@keyframes webexpress_dictee_pouls
{
    0%, 100%
    {
        box-shadow: 0 0 0 0 rgba(220, 60, 60, 0.45);
    }
    50%
    {
        box-shadow: 0 0 0 7px rgba(220, 60, 60, 0);
    }
}

.webexpress_dictee_etat
{
    display: block;
    margin-top: 4px;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_saisie.webexpress_saisie_ecoute
{
    border-color: var(--erreur);
    box-shadow: 0 0 0 3px rgba(220, 60, 60, 0.15);
}

.webexpress_dictee_bulle
{
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 3;
    padding: 8px 12px;
    font-size: var(--texte_xs);
    font-weight: 500;
    white-space: nowrap;
    color: var(--accent_texte);
    background: var(--accent);
    border-radius: var(--rayon);
    box-shadow: 0 8px 20px -8px var(--ombre);
    animation: webexpress_bulle_entree 420ms var(--easing);
}

.webexpress_dictee_bulle::after
{
    content: '';
    position: absolute;
    right: 16px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: var(--accent);
    transform: rotate(45deg);
}

.webexpress_dictee_bulle.webexpress_dictee_bulle_sortie
{
    animation: webexpress_bulle_sortie 400ms var(--easing) forwards;
}

@keyframes webexpress_bulle_entree
{
    from
    {
        opacity: 0;
        transform: translateY(6px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes webexpress_bulle_sortie
{
    to
    {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (max-width: 900px), (pointer: coarse)
{
    .webexpress_dictee_texte
    {
        display: none;
    }
}

/* --- Vignettes des fichiers et visionneuse (lightbox) ------------------------------------------------------------ */
.webexpress_fichier.webexpress_fichier_image
{
    align-items: center;
}

.webexpress_vignette
{
    display: inline-flex;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input);
    cursor: zoom-in;
    transition: transform 160ms var(--easing), border-color var(--duree) var(--easing);
}

.webexpress_vignette:hover,
.webexpress_vignette:focus-visible
{
    border-color: var(--accent);
    transform: scale(1.05);
    outline: none;
}

.webexpress_vignette_image
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.webexpress_vignette.webexpress_vignette_attente
{
    animation: webexpress_vignette_attente 1.2s ease-in-out infinite;
}

.webexpress_vignette.webexpress_vignette_absente
{
    cursor: default;
    opacity: 0.5;
}

@keyframes webexpress_vignette_attente
{
    0%, 100%
    {
        opacity: 0.6;
    }
    50%
    {
        opacity: 1;
    }
}

.webexpress_lightbox
{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: webexpress_apparition 220ms var(--easing);
}

.webexpress_lightbox[hidden]
{
    display: none !important;
}

.webexpress_lightbox_fond
{
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.webexpress_lightbox_scene
{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 1100px);
    max-height: calc(100vh - 140px);
    margin: 0;
}

.webexpress_lightbox_image
{
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    border-radius: var(--rayon);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    transition: opacity var(--duree) var(--easing);
}

.webexpress_lightbox_image.webexpress_lightbox_image_attente
{
    opacity: 0.4;
}

.webexpress_lightbox_image.webexpress_lightbox_image_entree
{
    animation: webexpress_lightbox_glisse 300ms var(--easing);
}

.webexpress_lightbox_image.webexpress_lightbox_image_retour
{
    animation: webexpress_lightbox_glisse_retour 300ms var(--easing);
}

@keyframes webexpress_lightbox_glisse
{
    from
    {
        opacity: 0;
        transform: translateX(28px);
    }
    to
    {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes webexpress_lightbox_glisse_retour
{
    from
    {
        opacity: 0;
        transform: translateX(-28px);
    }
    to
    {
        opacity: 1;
        transform: translateX(0);
    }
}

.webexpress_lightbox_legende
{
    max-width: 100%;
    font-size: var(--texte_xs);
    color: #ffffff;
    opacity: 0.85;
    text-align: center;
    overflow-wrap: anywhere;
}

.webexpress_lightbox_bouton
{
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--duree) var(--easing), transform 160ms var(--easing);
}

.webexpress_lightbox_bouton:hover,
.webexpress_lightbox_bouton:focus-visible
{
    background: rgba(255, 255, 255, 0.26);
    transform: scale(1.06);
    outline: none;
}

.webexpress_lightbox_fermer
{
    top: 16px;
    right: 16px;
}

.webexpress_lightbox_prec
{
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.webexpress_lightbox_suiv
{
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.webexpress_lightbox_prec:hover,
.webexpress_lightbox_suiv:hover
{
    transform: translateY(-50%) scale(1.06);
}

.webexpress_lightbox_miniatures
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 12px 16px;
    overflow-x: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.webexpress_lightbox_miniature
{
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--rayon_input);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duree) var(--easing), border-color var(--duree) var(--easing), transform 160ms var(--easing);
}

.webexpress_lightbox_miniature img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.webexpress_lightbox_miniature:hover,
.webexpress_lightbox_miniature:focus-visible
{
    opacity: 1;
    transform: translateY(-2px);
    outline: none;
}

.webexpress_lightbox_miniature.webexpress_lightbox_miniature_active
{
    opacity: 1;
    border-color: var(--accent);
}

body.webexpress_lightbox_ouverte
{
    overflow: hidden;
}

/* --- Google Ads : estimation pédagogique et option « Création de la campagne » ---------------------------------- */
.webexpress_ads_estimation
{
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--surface_input);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    animation: webexpress_apparition 320ms var(--easing);
}

.webexpress_ads_estimation_titre
{
    margin: 0 0 8px 0;
    font-size: var(--texte_s);
    font-weight: 600;
    color: var(--encre);
}

.webexpress_ads_tableau
{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_ads_tableau th,
.webexpress_ads_tableau td
{
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--ligne);
    vertical-align: top;
}

.webexpress_ads_tableau th[scope="row"]
{
    font-weight: 400;
}

.webexpress_ads_tableau th[scope="row"] strong
{
    display: block;
    color: var(--encre);
}

.webexpress_ads_tableau td
{
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.webexpress_ads_tableau tr:last-child th,
.webexpress_ads_tableau tr:last-child td
{
    border-bottom: 0;
}

.webexpress_ads_tableau tr.webexpress_ads_ligne_conseillee th,
.webexpress_ads_tableau tr.webexpress_ads_ligne_conseillee td
{
    background: var(--accent_halo);
    color: var(--encre);
}

.webexpress_ads_mention
{
    margin: 8px 0 0 0;
}

.webexpress_option.webexpress_ads_creation
{
    margin-top: 12px;
    border-style: dashed;
}

/* --- Acompte : « Autre montant » en euros, synchronisé avec la glissière ---------------------------------------- */
.webexpress_acompte_saisie
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.webexpress_acompte_saisie label
{
    flex: 1 1 100%;
    font-size: var(--texte_xs);
    font-weight: 600;
    color: var(--encre_second);
}

.webexpress_acompte_saisie .webexpress_saisie
{
    width: 9em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.webexpress_acompte_saisie > span
{
    font-weight: 600;
    color: var(--encre);
}

.webexpress_acompte_saisie_aide
{
    margin-top: 4px;
}

/* --- Offre Famille (n° 1315, lot U) : bandeau chaleureux, « Offert », acompte retiré ----------------------------- */
.webexpress_famille
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 10px 14px;
    font-size: var(--texte_s);
    color: var(--encre);
    background: var(--surface_input);
    border: 1px solid var(--succes);
    border-left-width: 3px;
    border-radius: var(--rayon);
}

.webexpress_famille.webexpress_famille_entree
{
    animation: webexpress_encouragement_entree 520ms var(--easing);
}

.webexpress_famille_badge
{
    flex: 0 0 auto;
    padding: 3px 10px;
    font-size: var(--texte_xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--succes);
    border-radius: var(--rayon_badge, 20px);
}

.webexpress_famille_texte
{
    flex: 1 1 200px;
    line-height: 1.45;
}

.webexpress_famille_acompte
{
    padding: 8px 12px;
    color: var(--encre);
    background: var(--surface_input);
    border-left: 3px solid var(--succes);
    border-radius: var(--rayon_input);
}

.webexpress_carte.webexpress_offre_famille .webexpress_recap_acompte,
.webexpress_carte.webexpress_offre_famille .webexpress_barre_acompte
{
    display: none;
}

.webexpress_barre_offert
{
    font-size: var(--texte_s);
    font-weight: 700;
    color: var(--succes);
}

/* --- Responsive des composants V2 ------------------------------------------------------------------------------- */
@media (max-width: 640px)
{
    .webexpress_styles
    {
        grid-template-columns: 1fr;
    }

    .webexpress_puces_ajout,
    .webexpress_structure_ajout,
    .webexpress_acompte_saisie
    {
        flex-direction: column;
        align-items: stretch;
    }

    .webexpress_acompte_saisie .webexpress_saisie
    {
        width: 100%;
    }

    .webexpress_lightbox
    {
        padding: 12px;
    }

    .webexpress_lightbox_scene
    {
        max-width: 100vw;
    }

    .webexpress_lightbox_prec,
    .webexpress_lightbox_suiv
    {
        top: auto;
        bottom: 92px;
        transform: none;
    }

    .webexpress_lightbox_prec:hover,
    .webexpress_lightbox_suiv:hover
    {
        transform: scale(1.06);
    }

    .webexpress_ads_tableau td
    {
        white-space: normal;
    }
}
/* WX_V2 =============================================================== */

/* MOUVEMENT_REDUIT ==================================================== */
@media (prefers-reduced-motion: reduce)
{
    .webexpress_carte,
    .webexpress_etape,
    .webexpress_tarif_direct strong.webexpress_pulse
    {
        animation: none;
    }

    .webexpress_progression_barre,
    .webexpress_saisie,
    .webexpress_option,
    .webexpress_depot
    {
        transition: none;
    }

    .webexpress_attente_points span
    {
        animation: none;
        opacity: 0.8;
    }

    .webexpress_confettis
    {
        display: none;
    }

    /* 14/10/2026 16:10 (n° 1301, lot P) : composants V2, aucune animation ni transition de mouvement */
    .webexpress_jalon,
    .webexpress_jalon_coche,
    .webexpress_jalon.webexpress_jalon_gagne,
    .webexpress_recap_montant.webexpress_pulse,
    .webexpress_recap_delta,
    .webexpress_encouragement,
    .webexpress_encouragement.webexpress_encouragement_entree,
    .webexpress_famille.webexpress_famille_entree,
    .webexpress_ferme,
    .webexpress_lecture,
    .webexpress_ia_preparation,
    .webexpress_ia_rouages span,
    .webexpress_ia_indicateur .webexpress_ia_point,
    .webexpress_champ.webexpress_champ_entree,
    .webexpress_champ.webexpress_champ_ia,
    .webexpress_champs.webexpress_champs_ia,
    .webexpress_suggestions,
    .webexpress_puce.webexpress_puce_entree,
    .webexpress_puce_bouton.webexpress_puce_choisie,
    .webexpress_option.webexpress_option_choisie,
    .webexpress_structure_liste,
    .webexpress_structure_element.webexpress_structure_element_bouge,
    .webexpress_dictee.webexpress_dictee_active,
    .webexpress_dictee_bulle,
    .webexpress_dictee_bulle.webexpress_dictee_bulle_sortie,
    .webexpress_vignette.webexpress_vignette_attente,
    .webexpress_lightbox,
    .webexpress_lightbox_image.webexpress_lightbox_image_entree,
    .webexpress_lightbox_image.webexpress_lightbox_image_retour,
    .webexpress_ads_estimation,
    .webexpress_barre_tarif,
    .webexpress_paiement
    {
        animation: none;
    }

    .webexpress_ia_rouages span
    {
        border-top-color: var(--accent);
        opacity: 0.6;
    }

    .webexpress_recap_delta
    {
        opacity: 1;
    }

    .webexpress_dictee_bulle.webexpress_dictee_bulle_sortie
    {
        opacity: 0;
    }

    .webexpress_jalon,
    .webexpress_suggestion,
    .webexpress_puce_bouton,
    .webexpress_dictee,
    .webexpress_vignette,
    .webexpress_structure_element,
    .webexpress_lightbox_bouton,
    .webexpress_lightbox_miniature,
    .webexpress_carte_tete
    {
        transition: none;
    }

    .webexpress_suggestion:hover,
    .webexpress_puce_bouton:hover,
    .webexpress_dictee:hover,
    .webexpress_vignette:hover,
    .webexpress_lightbox_miniature:hover
    {
        transform: none;
    }
}
/* MOUVEMENT_REDUIT ==================================================== */

/* 14/10/2026 (Claude, Dialogue n° 1350) : accroche événementielle au-dessus du titre */
.webexpress_accroche
{
    display: inline-block;
    max-width: 52ch;
    margin: 0 0 var(--espace_2) 0;
    padding: 8px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--rayon, 8px) var(--rayon, 8px) 0;
    background: var(--accent_halo);
    font-size: clamp(0.98rem, 0.9rem + 0.5vw, 1.15rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--encre);
}

/* ================================================================
 * 14/10/2026 (Antigravity, Dialogue n° 1367) : Vitrine Hero Banner & bandeau d'illustrations
 * ================================================================ */

/* WX_HERO_VITRINE ====================================================== */
.webexpress_hero_vitrine
{
    margin: clamp(16px, 3vw, 24px) 0 clamp(16px, 2.5vw, 22px) 0;
}

.webexpress_hero_image_conteneur
{
    position: relative;
    width: 100%;
    border-radius: var(--rayon_carte, 16px);
    overflow: hidden;
    border: 1px solid var(--ligne_forte, rgba(255, 255, 255, 0.12));
    background: var(--surface_carte);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--ligne);
    transition: transform var(--duree, 250ms) var(--easing, ease), box-shadow var(--duree, 250ms) var(--easing, ease), border-color var(--duree, 250ms) var(--easing, ease);
}

.webexpress_hero_image_conteneur:hover
{
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 20px 42px -10px var(--accent_halo, rgba(212, 175, 55, 0.2)), 0 0 0 1px var(--accent);
}

.webexpress_hero_image
{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 600ms var(--easing, ease);
}

.webexpress_hero_image_conteneur:hover .webexpress_hero_image
{
    transform: scale(1.025);
}

.webexpress_hero_surimpression
{
    position: absolute;
    bottom: clamp(10px, 2vw, 16px);
    left: clamp(10px, 2vw, 16px);
    right: clamp(10px, 2vw, 16px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: none;
}

.webexpress_hero_etiquette
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--texte_xs, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--encre);
    background: rgba(8, 9, 10, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ligne_forte, rgba(255, 255, 255, 0.16));
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.webexpress_hero_etiquette svg
{
    flex-shrink: 0;
    color: var(--accent);
}

.webexpress_hero_etiquette_delai,
.webexpress_hero_etiquette_serenite
{
    border-color: var(--accent);
    color: var(--accent);
}

.webexpress_hero_etiquette_urgence
{
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

.webexpress_hero_actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: clamp(14px, 2.5vw, 20px) 0;
}

.webexpress_hero_cta_formulaire
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: var(--texte_m, 1rem);
    font-weight: 600;
}

.webexpress_hero_cta_infos,
.webexpress_hero_cta_contact
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    font-size: var(--texte_s, 0.92rem);
}
/* WX_HERO_VITRINE ====================================================== */

/* WX_BANDEAU_OCCASIONS ================================================= */
.webexpress_bandeau_titre_section
{
    margin-top: clamp(28px, 4vw, 54px);
    margin-bottom: clamp(12px, 2vw, 20px);
}

.webexpress_bandeau_titre_section .sur_titre
{
    margin-bottom: 4px;
}

.webexpress_bandeau_titre
{
    margin: 0;
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.85rem);
    line-height: 1.2;
    color: var(--encre);
}

.webexpress_bandeau
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.5vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.webexpress_bandeau_item
{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_carte, 14px);
    background: var(--surface_carte);
    box-shadow: var(--ombre);
    transition: transform var(--duree, 220ms) var(--easing, ease), border-color var(--duree, 220ms) var(--easing, ease), box-shadow var(--duree, 220ms) var(--easing, ease);
}

.webexpress_bandeau_item:hover
{
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 16px 32px -10px var(--accent_halo, rgba(212, 175, 55, 0.18));
}

.webexpress_bandeau_vignette_cadre
{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface_input);
}

.webexpress_bandeau_image
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 550ms var(--easing, ease);
}

.webexpress_bandeau_item:hover .webexpress_bandeau_image
{
    transform: scale(1.04);
}

.webexpress_bandeau_badge_flottant
{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre);
    background: rgba(8, 9, 10, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ligne_forte, rgba(255, 255, 255, 0.14));
    border-radius: 9999px;
}

.webexpress_bandeau_corps
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(14px, 2vw, 20px);
    flex-grow: 1;
}

.webexpress_bandeau_nom
{
    font-size: var(--texte_m, 1.05rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--encre);
}

.webexpress_bandeau_description
{
    font-size: var(--texte_xs, 0.88rem);
    line-height: 1.45;
    color: var(--encre_second);
}

/* 14/10/2026 (Claude, Dialogue n° 1353) : conservation des styles SVG historiques pour référence */
/*
.webexpress_bandeau_dessin { width: clamp(72px, 9vw, 104px); height: auto; margin-bottom: 6px; overflow: visible; }
.webexpress_bandeau_dessin .wx_d_plein { fill: var(--accent); }
.webexpress_bandeau_dessin .wx_d_fond { fill: var(--accent_halo); }
.webexpress_bandeau_dessin .wx_d_trait { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.webexpress_bandeau_dessin .wx_d_horloge { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.webexpress_bandeau_dessin .wx_d_onde { animation: wx_bandeau_onde 2.4s ease-in-out infinite; }
@keyframes wx_bandeau_onde { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
*/

/* RESPONSIVE HERO & BANDEAU ============================================ */
@media (max-width: 900px)
{
    .webexpress_bandeau
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px)
{
    .webexpress_hero_vitrine
    {
        margin: 14px 0 18px 0;
    }

    .webexpress_hero_surimpression
    {
        position: static;
        padding: 8px 10px 10px 10px;
        background: var(--surface_carte);
        gap: 6px;
    }

    .webexpress_hero_etiquette
    {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .webexpress_hero_actions
    {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .webexpress_hero_cta_formulaire,
    .webexpress_hero_cta_infos,
    .webexpress_hero_cta_contact
    {
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .webexpress_bandeau
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .webexpress_bandeau_item
    {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        align-items: center;
    }

    .webexpress_bandeau_vignette_cadre
    {
        height: 100%;
        aspect-ratio: auto;
    }

    .webexpress_bandeau_badge_flottant
    {
        top: 6px;
        left: 6px;
        right: auto;
        padding: 2px 6px;
        font-size: 0.65rem;
    }

    .webexpress_bandeau_corps
    {
        padding: 12px 14px;
    }

    .webexpress_bandeau_nom
    {
        font-size: var(--texte_s, 0.95rem);
    }

    .webexpress_bandeau_description
    {
        font-size: 0.8rem;
    }
}

@media (max-width: 440px)
{
    .webexpress_bandeau_item
    {
        display: flex;
        flex-direction: column;
    }

    .webexpress_bandeau_vignette_cadre
    {
        aspect-ratio: 16 / 10;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .webexpress_hero_image_conteneur,
    .webexpress_hero_image,
    .webexpress_bandeau_item,
    .webexpress_bandeau_image
    {
        animation: none;
        transition: none;
        transform: none !important;
    }
}


/* WX_HERO_PUB ========================================================== */
/* 14/10/2026 (Claude, Dialogue n° 1388) : hero façon affiche, image en arrière-plan, accroche et trois appels à l'action */
html:has(.webexpress_hero_pub)
{
    scroll-behavior: smooth;
}

.webexpress_hero_pub
{
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 68vh, 720px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--ligne);
    background: var(--surface_carte);
}

.webexpress_hero_pub_image
{
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.webexpress_hero_pub_voile
{
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 14/10/2026 (n° 1420) : voile couvrant doux pour contraster le texte de gauche sans masquer l'expression du personnage */
    background: linear-gradient(90deg, rgba(6, 8, 12, 0.82) 0%, rgba(6, 8, 12, 0.65) 34%, rgba(6, 8, 12, 0.22) 54%, rgba(6, 8, 12, 0) 74%);
    pointer-events: none;
}

.webexpress_hero_pub_contenu
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 20px);
    padding-top: clamp(32px, 6vw, 72px);
    padding-bottom: clamp(32px, 6vw, 72px);
    color: #fff;
}

.webexpress_hero_pub_accroche
{
    margin: 0;
    max-width: 22ch;
    font-size: clamp(1.35rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.webexpress_hero_pub_promesse
{
    margin: 0;
    max-width: 34ch;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    font-weight: 600;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.webexpress_hero_pub_actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 6px;
}

.webexpress_hero_pub_demarrer
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    font-size: var(--texte_m, 1.05rem);
    font-weight: 700;
    box-shadow: 0 10px 28px -8px var(--accent_halo);
}

.webexpress_hero_pub_infos
{
    padding: 13px 22px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}

.webexpress_hero_pub_rappel
{
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.webexpress_hero_pub_preuve
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 4px 0 0 0;
    font-size: var(--texte_xs, 0.8rem);
}

.webexpress_hero_pub_preuve span
{
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px)
{
    .webexpress_hero_pub
    {
        display: block;
        min-height: 0;
        background: #0b0d11;
    }

    .webexpress_hero_pub_image
    {
        inset: 0 0 auto 0;
        height: 280px;
        object-position: 62% center;
    }

    .webexpress_hero_pub_voile
    {
        inset: 0 0 auto 0;
        height: 280px;
        background: linear-gradient(180deg, rgba(11, 13, 17, 0) 40%, #0b0d11 100%);
    }

    .webexpress_hero_pub_contenu
    {
        padding-top: 232px;
    }

    .webexpress_hero_pub_actions
    {
        width: 100%;
    }

    .webexpress_hero_pub_demarrer,
    .webexpress_hero_pub_infos
    {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce)
{
    html:has(.webexpress_hero_pub)
    {
        scroll-behavior: auto;
    }
}
/* WX_HERO_PUB ========================================================== */

/* WX_HERO_PUB_TYPO (n° 1405) : desktop, énumération des cas de figure plus petite */
@media (min-width: 900px)
{
    .webexpress_hero_pub_accroche
    {
        font-size: 1.5rem;
        max-width: 30ch;
    }
}

/* WX_PARCOURS_INTRO (n° 1405) : présentation de la formule Présence Web EXPRESS au-dessus des étapes */
.web_flash_section_intro
{
    max-width: 68ch;
    margin: 0 auto clamp(18px, 3vw, 28px);
    text-align: center;
    font-size: var(--texte_m);
    line-height: 1.6;
}

/* WX_JARVIS_TRANSPARENCE (n° 1415) : les blocs de l'en-tête et du récapitulatif étaient opaques et masquaient le Jarvis du thème */
.webexpress_carte .webexpress_carte_tete,
.webexpress_carte .webexpress_carte_tete_collee,
.webexpress_carte .webexpress_recap
{
    background: color-mix(in srgb, var(--surface_carte) 45%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* WX_CARTE_TETE_TRANSPARENTE (n° 1418) : l'en-tête de la carte devient complètement transparent (remplace la semi-transparence ci-dessus pour ce bloc) */
.webexpress_carte .webexpress_carte_tete,
.webexpress_carte .webexpress_carte_tete_collee
{
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* WX_RECAP_FLOU (n° 1420) : flou d'arrière-plan sur le récapitulatif */
.webexpress_carte .webexpress_recap
{
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* WX_HERO_PUB_VOILE_TEXTE (n° 1420) : voile doux derrière le texte du hero pour la lisibilité (desktop ; le mobile garde son dégradé) */
@media (min-width: 721px)
{
    .webexpress_hero_pub_voile
    {
        background: radial-gradient(ellipse 62% 105% at 22% 50%, rgba(8, 10, 14, 0.72) 0%, rgba(8, 10, 14, 0.5) 45%, rgba(8, 10, 14, 0) 100%);
    }
}

/* WX_INSTRUCTIONS (n° 1426) : bandeau d'atelier derrière un bouton « Instructions » */
.webexpress_instructions
{
    margin: 0;
}

.webexpress_instructions_bouton
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--surface_input);
    color: inherit;
    font-size: var(--texte_s);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.webexpress_instructions_bouton::-webkit-details-marker
{
    display: none;
}

.webexpress_instructions_bouton::before
{
    content: "i";
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    line-height: 18px;
    text-align: center;
    font-style: italic;
}

.webexpress_instructions[open] .webexpress_instructions_bouton
{
    margin-bottom: 10px;
}

.webexpress_instructions_bouton:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* WX_DICTEE_HAUT (n° 1439) : bouton de dictée petit, à droite du titre du champ ; outline au repos, rouge pulsant en écoute */
.webexpress_champ_dictee
{
    position: relative;
}

.webexpress_champ_dictee > .webexpress_libelle
{
    padding-right: 96px;
}

.webexpress_champ_dictee > .webexpress_dictee
{
    position: absolute;
    top: -2px;
    right: 0;
    gap: 5px;
    padding: 2px 9px;
    font-size: var(--texte_xs);
    line-height: 1.4;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
}

.webexpress_champ_dictee > .webexpress_dictee .webexpress_dictee_icone
{
    width: 6px;
    height: 10px;
    border-radius: 3px;
    margin-bottom: 3px;
}

.webexpress_champ_dictee > .webexpress_dictee .webexpress_dictee_icone::after
{
    left: -3px;
    right: -3px;
    bottom: -4px;
    height: 5px;
    border-width: 1.5px;
    border-radius: 0 0 6px 6px;
}

.webexpress_champ_dictee > .webexpress_dictee.webexpress_dictee_active
{
    color: #ffffff;
    background: var(--erreur);
    border-color: var(--erreur);
}

@media (max-width: 900px), (pointer: coarse)
{
    .webexpress_champ_dictee > .webexpress_libelle
    {
        padding-right: 44px;
    }
}

/* WX_JARVIS_FIXE (n° 1452) : le filigrane de Jarvis est fixe par rapport à la fenêtre et fait au plus 80 % de sa hauteur ; la carte ne fait que le découper */
.webexpress_jarvis_filigrane
{
    background-image: none;
    clip-path: inset(0);
}

.webexpress_jarvis_filigrane::before
{
    content: '';
    position: fixed;
    top: 10vh;
    right: 2%;
    width: 60vw;
    height: 80vh;
    max-height: 80vh;
    background-image: var(--wx_jarvis_url, none);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
    pointer-events: none;
}

@media (max-width: 720px)
{
    .webexpress_jarvis_filigrane::before
    {
        right: 0;
        left: 0;
        width: auto;
        height: 70vh;
        max-height: 80vh;
        background-position: center top;
    }
}

/* WX_JARVIS_FIXE_ATTACHMENT (n° 1457) : JaxX voulait background-attachment: fixed ; remplace le pseudo-élément du n° 1452, l'image reste fixe dans la fenêtre et fait 80 % de sa hauteur au plus */
.webexpress_jarvis_filigrane
{
    clip-path: none;
    background-image: var(--wx_jarvis_url, none);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right 2% top 10vh;
    background-size: auto 80vh;
}

.webexpress_jarvis_filigrane::before
{
    content: none;
}

@media (max-width: 720px)
{
    .webexpress_jarvis_filigrane
    {
        background-position: center top 10vh;
        background-size: auto 70vh;
    }
}

/* WX_JARVIS_HAUT (n° 1459) : Jarvis aligné en haut de la fenêtre, juste sous l'en-tête du site (64 px), pour que sa tête domine les étapes */
.webexpress_jarvis_filigrane
{
    background-position: right 2% top 64px;
    background-size: auto calc(80vh - 64px);
}

@media (max-width: 720px)
{
    .webexpress_jarvis_filigrane
    {
        background-position: center top 64px;
        background-size: auto calc(70vh - 64px);
    }
}

/* WX_STYLES_COMPACTS (n° 1454) : quatre cartes de style compactes sur une ligne (3 proposées + « Sur mesure ») ;
   la description, les polices et les mots-clés passent en infobulle ; panneau « Sur mesure » (couleurs + polices) */
.webexpress_styles
{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.webexpress_option.webexpress_style
{
    gap: 6px;
    padding: 0 0 8px 0;
}

.webexpress_style_apercu
{
    gap: 3px;
    min-height: 56px;
    padding: 8px 10px;
}

.webexpress_style_titre_apercu
{
    font-size: 0.95rem;
}

.webexpress_style_texte_apercu
{
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.webexpress_style_bouton_apercu
{
    margin-top: 2px;
    padding: 2px 8px;
    font-size: 0.64rem;
}

.webexpress_style_palette
{
    gap: 4px;
    padding: 0 10px;
}

.webexpress_style_pastille
{
    width: 12px;
    height: 12px;
}

.webexpress_style_nom
{
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 0 10px;
    font-size: 0.85rem;
    line-height: 1.2;
}

.webexpress_style_badge
{
    padding: 1px 6px;
    font-size: 0.62rem;
}

.webexpress_style_description,
.webexpress_style_polices,
.webexpress_style_mots
{
    display: none;
}

.webexpress_style_sur_mesure
{
    border-style: dashed;
}

.webexpress_style_sur_mesure .webexpress_style_nom::before
{
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: conic-gradient(#ef4444, #f59e0b, #22c55e, #0ea5e9, #8b5cf6, #ef4444);
}

/* WX_STYLE_SUR_MESURE_PRO (n° 1484) : Studio de personnalisation 2 colonnes & maquette réaliste */
.webexpress_style_perso
{
    display: grid;
    /* grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); */ /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : 600 px imposés + gouttière et marges, le studio sortait de la carte dès qu'elle faisait moins de 660 px (tablette, carte en colonne à côté du texte) */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 14px;
    padding: 18px 20px;
    background: var(--surface_input, #f8fafc);
    border: 1px solid var(--ligne, #e2e8f0);
    border-radius: var(--rayon, 12px);
}

.webexpress_style_perso[hidden]
{
    display: none;
}

.webexpress_style_perso_selecteurs
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.webexpress_style_perso_section_titre
{
    margin: 0 0 8px 0;
    font-size: var(--texte_xs, 0.8rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--encre_second, #64748b);
}

.webexpress_style_perso_couleurs
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.webexpress_style_perso_couleur
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: var(--texte_xs, 0.8rem);
    color: var(--encre_second, #64748b);
    cursor: pointer;
}

.webexpress_style_perso_couleur input[type="color"]
{
    width: 38px;
    height: 38px;
    padding: 2px;
    background: transparent;
    border: 2px solid var(--ligne_forte, #cbd5e1);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.webexpress_style_perso_couleur input[type="color"]:hover
{
    transform: scale(1.08);
}

.webexpress_style_perso_couleur input[type="color"]::-webkit-color-swatch-wrapper
{
    padding: 0;
}

.webexpress_style_perso_couleur input[type="color"]::-webkit-color-swatch
{
    border: none;
    border-radius: 50%;
}

.webexpress_style_perso_couleur input[type="color"]::-moz-color-swatch
{
    border: none;
    border-radius: 50%;
}

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

.webexpress_style_perso_police
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--texte_xs, 0.8rem);
    color: var(--encre_second, #64748b);
}

.webexpress_style_perso_police select
{
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--encre, #0f172a);
    background: var(--surface, #ffffff);
    border: 1px solid var(--ligne_forte, #cbd5e1);
    border-radius: var(--rayon_input, 8px);
    transition: border-color 0.15s ease;
}

.webexpress_style_perso_police select option
{
    font-size: 1rem;
}

/* Colonne droite : Maquette de site réaliste et professionnelle */
.webexpress_style_perso_maquette
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.webexpress_style_carte_pro
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    min-height: 220px;
    border: 1px solid var(--ligne_forte, #cbd5e1);
    border-radius: var(--rayon, 12px);
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.webexpress_style_carte_nav
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.webexpress_style_carte_logo
{
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.webexpress_style_carte_badge
{
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.webexpress_style_carte_separateur
{
    width: 100%;
    height: 2px;
    border-radius: 1px;
    opacity: 0.85;
    transition: background-color 0.2s ease;
}

.webexpress_style_carte_corps
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.webexpress_style_carte_titre
{
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.2s ease;
}

.webexpress_style_carte_texte
{
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.webexpress_style_carte_pied
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed rgba(128, 128, 128, 0.2);
    flex-wrap: wrap;
}

.webexpress_style_carte_bouton
{
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 600;
    border-radius: var(--rayon_bouton, 8px);
    transition: background-color 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.webexpress_style_carte_nuancier
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.webexpress_style_carte_nuancier .webexpress_style_pastille
{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease;
}

@media (max-width: 768px)
{
    .webexpress_style_perso
    {
        /* grid-template-columns: 1fr; */ /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : 1fr = minmax(auto, 1fr), le contenu (menus des polices, maquette) pouvait élargir la colonne au-delà de l'écran */
        grid-template-columns: minmax(0, 1fr);
    }

    /* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803) : aucune colonne du studio ne force la largeur */
    .webexpress_style_perso > *
    {
        min-width: 0;
    }
}

/* WX_JARVIS_TETE_HAUTE (n° 1464) : (1) l'animation d'apparition de la carte, en fill-mode « both », laissait une transformation qui neutralisait background-attachment: fixed (le filigrane suivait la carte) ; « backwards » rend la carte sans transformation après l'animation. (2) Jarvis remonté pour que sa tête soit au-dessus de la ligne des étapes. */
.webexpress_carte
{
    animation-fill-mode: backwards;
}

.webexpress_jarvis_filigrane
{
    background-position: right 2% top 85px;
    background-size: auto 80vh;
}

@media (max-width: 720px)
{
    .webexpress_jarvis_filigrane
    {
        background-position: center top 85px;
        background-size: auto 70vh;
    }
}

/* WX_JARVIS_DANS_LA_CARTE (n° 1464) : le filigrane étant fixe par rapport à la fenêtre, on le cale sur le bord droit du conteneur (1200 px) pour que la tête de Jarvis ne soit pas coupée par la carte */
@media (min-width: 1000px)
{
    .webexpress_jarvis_filigrane
    {
        background-position: right max(2%, calc((100vw - 1200px) / 2 + 24px)) top 85px;
    }
}

/* WX_JARVIS_DANS_LA_CARTE_V2 (n° 1477) : le bord droit de la carte est à max(56 px, (largeur - 1200 px) / 2 + 16 px) du bord de la fenêtre : l'ancienne formule (réservée aux écrans de 1000 px et plus, 24 px) faisait sortir Jarvis de la carte entre 721 et 1100 px. On le cale donc 20 px à l'intérieur de la carte, dès 721 px. */
@media (min-width: 721px)
{
    .webexpress_jarvis_filigrane
    {
        background-position: right max(76px, calc((100vw - 1200px) / 2 + 36px)) top 85px;
    }
}

/* WX_POLICES_EXEMPLE (n° 1468) : exemple en direct sous chaque menu de polices de la carte « Sur mesure » */
.webexpress_style_perso_exemple
{
    display: block;
    margin-top: 2px;
    padding: 6px 10px;
    color: var(--encre);
    background: var(--surface, #ffffff);
    border: 1px dashed var(--ligne_forte);
    border-radius: var(--rayon_input);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-family 0s, color 0.2s, background-color 0.2s;
}

.webexpress_style_perso_exemple_titres
{
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.webexpress_style_perso_exemple_texte
{
    font-size: 0.9rem;
    line-height: 1.4;
}

.webexpress_style_perso_police select option
{
    font-size: 1rem;
}

/* WX_STYLE_SUR_MESURE_PRO (n° 1484) : maquette réaliste studio 2 colonnes intégrée plus haut */


/* WX_STYLE_CONFIANCE (n° 1487) : carte « Je vous fais confiance » à côté des univers proposés et de « Sur mesure » (cinq cartes sur une ligne dès 721 px) */
@media (min-width: 721px)
{
    .webexpress_styles
    {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.webexpress_style_apercu_confiance
{
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--surface_input);
    color: var(--encre);
}

.webexpress_style_apercu_confiance .webexpress_style_titre_apercu
{
    font-size: 1.3rem;
    color: var(--accent, var(--encre));
}


/* WX_VERRE_FUME (n° 1494) : tout ce qui passe au-dessus du filigrane de Jarvis est en verre fumé : fond jamais parfaitement opaque
   (couleur du thème à 62 %, via color-mix) et flou de l'arrière-plan (backdrop-filter). Les aperçus de couleurs des cartes de style restent opaques : ils montrent la vraie palette. */
.webexpress_jalon,
.webexpress_ia_indicateur,
.webexpress_option,
.webexpress_saisie,
.webexpress_puce_bouton
{
    background-color: color-mix(in srgb, var(--surface_input) 62%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
}

.webexpress_reprise
{
    background-color: color-mix(in srgb, var(--fond_second) 62%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
}

/* n° 1494 : l'aperçu de la carte « Je vous fais confiance » n'a pas de palette à montrer : il reste translucide */
.webexpress_style_apercu_confiance
{
    background: transparent;
}


/* WX_CONFIANCE_JARVIS (n° 1496) : miniature du Jarvis du thème courant en image de fond de la carte « Je vous fais confiance » (variable --wx_jarvis_mini posée par WebExpress_vue.php, via get_minified_img), sous un voile qui garde le texte lisible */
.webexpress_style_confiance
{
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface_input) 15%, transparent) 0%, color-mix(in srgb, var(--surface_input) 80%, transparent) 100%), var(--wx_jarvis_mini, none);
    background-size: cover, cover;
    background-position: center, center top;
    background-repeat: no-repeat;
}

.webexpress_style_apercu_confiance
{
    min-height: 56px;
}

/* WX_CARTE_100VH (n° 1500) : sur ordinateur, la carte du questionnaire occupe la hauteur de la fenêtre (100 vh moins
   l'en-tête du site) ; le formulaire défile à l'intérieur (overflow), l'en-tête de la carte (étapes, devis) et les
   boutons restent visibles. Seulement quand le formulaire est affiché (pas sur la confirmation ni le formulaire fermé). */
@media (min-width: 901px) and (min-height: 560px)
{
    .webexpress_carte:has(> .webexpress_formulaire:not([hidden]))
    {
        height: calc(100vh - var(--hauteur_header) - 24px);
        height: calc(100dvh - var(--hauteur_header) - 24px);
        min-height: 520px;
        overflow: hidden;
    }

    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])) > *
    {
        flex-shrink: 0;
    }

    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])) > .webexpress_formulaire
    {
        flex: 1 1 auto;
        min-height: 0;
        margin-right: calc(clamp(18px, 3vw, 36px) * -0.5);
        padding-right: calc(clamp(18px, 3vw, 36px) * 0.5);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--ligne_forte) transparent;
    }

    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])) .webexpress_carte_tete
    {
        position: relative;
        top: auto;
    }
}

/* WX_CARTE_100VH_PORTABLE (n° 1500) : sur un écran d'ordinateur peu haut (portable, moins de 880 px), l'en-tête de la carte
   (étapes + devis, environ 350 px) ne laissait que 70 à 110 px au formulaire. La carte garde ses 100 vh mais défile en entier :
   l'en-tête remonte avec le contenu, la barre Retour / Enregistrer reste collée en bas, en verre fumé (n° 1494). */
@media (min-width: 901px) and (min-height: 560px) and (max-height: 879px)
{
    .webexpress_carte:has(> .webexpress_formulaire:not([hidden]))
    {
        --wx_pad: clamp(18px, 3vw, 36px);
        --wx_h: max(520px, calc(100dvh - var(--hauteur_header) - 24px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--ligne_forte) transparent;
    }

    /* une zone qui défile peut recevoir le focus : l'arrivée par le lien #questionnaire l'affichait d'un anneau blanc ; les champs gardent le leur */
    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])):focus
    {
        outline: none;
    }

    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])) > .webexpress_formulaire
    {
        flex: 0 0 auto;
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    /* le filigrane de Jarvis reste collé à la carte pendant le défilement (sticky sur toute sa hauteur, sans décaler le contenu) */
    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])) > .webexpress_jarvis_filigrane
    {
        position: sticky;
        top: calc(var(--wx_pad) * -1);
        inset-inline: auto;
        bottom: auto;
        align-self: stretch;
        height: calc(var(--wx_h) - 3px);
        margin: calc(var(--wx_pad) * -1) calc(var(--wx_pad) * -1) calc(var(--wx_pad) - var(--wx_h) + 3px - var(--espace_3));
    }

    /* barre Retour / Enregistrer collée au vrai bord bas de la carte (padding compris) : plus rien ne défile dessous */
    .webexpress_carte:has(> .webexpress_formulaire:not([hidden])) > .webexpress_actions
    {
        position: sticky;
        bottom: calc(var(--wx_pad) * -1);
        z-index: 3;
        margin: auto calc(var(--wx_pad) * -1) calc(var(--wx_pad) * -1);
        padding: 12px var(--wx_pad) var(--wx_pad);
        border-radius: 0 0 var(--rayon_carte) var(--rayon_carte);
        background-color: color-mix(in srgb, var(--surface_carte) 62%, transparent);
        -webkit-backdrop-filter: blur(10px) saturate(1.15);
        backdrop-filter: blur(10px) saturate(1.15);
    }
}


/* WX_GELULE_RECAP_REPRISE (n° 1508) ====================================== */
/* 1. Gélule « Jarvis en ligne / hors ligne » : tout en haut à droite du cadre du formulaire (la carte est en position relative) ;
      un peu d'air au-dessus du contenu pour qu'elle ne chevauche ni le pourcentage ni le titre de l'étape */
.webexpress_carte
{
    padding-top: max(40px, clamp(18px, 3vw, 36px));
}

.webexpress_ia_indicateur.webexpress_ia_gelule
{
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 6;
}

/* 2. « Dossier retrouvé » : une petite ligne discrète à la place du bloc (plus de fond, de filet ni de flou) */
.webexpress_reprise
{
    justify-content: flex-start;
    gap: 2px 10px;
    padding: 0;
    border-left: 0;
    background: none;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.webexpress_reprise_texte
{
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

.webexpress_reprise .webexpress_lien_bouton
{
    padding: 0;
    font-size: var(--texte_xs);
}

/* 3. Récapitulatif : seul le prix reste visible, la case à cocher (sans JavaScript) déplie les détails en glissant */
.webexpress_recap_bascule_case
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.webexpress_recap_bascule
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 4px;
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
    cursor: pointer;
    user-select: none;
    transition: color var(--duree) var(--easing);
}

.webexpress_recap_bascule:hover
{
    color: var(--encre_second);
}

.webexpress_recap_bascule svg
{
    transition: transform var(--duree) var(--easing);
}

.webexpress_recap_bascule_case:checked ~ .webexpress_recap_total .webexpress_recap_bascule svg
{
    transform: rotate(180deg);
}

.webexpress_recap_bascule_case:focus-visible ~ .webexpress_recap_total .webexpress_recap_bascule
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.webexpress_recap_corps
{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms var(--easing);
}

.webexpress_recap_corps_interieur
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 280ms;
}

.webexpress_recap_bascule_case:checked ~ .webexpress_recap_corps
{
    grid-template-rows: 1fr;
}

.webexpress_recap_bascule_case:checked ~ .webexpress_recap_corps .webexpress_recap_corps_interieur
{
    visibility: visible;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce)
{
    .webexpress_recap_corps,
    .webexpress_recap_bascule svg
    {
        transition: none;
    }
}


/* WX_ACTIONS_ALIGNEES (n° 1510) ========================================== */
/* Retour à gauche et Enregistrer à droite sur la même ligne, bien centrés l'un par rapport à l'autre ;
   « Enregistré à hh:mm » juste en dessous du bouton Enregistrer ; bouton Retour plus compact */
.webexpress_carte .webexpress_actions
{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "retour suivant"
        ". enregistre";
    align-items: center;
    gap: 6px 14px;
}

.webexpress_carte .webexpress_actions .webexpress_bouton_retour
{
    grid-area: retour;
    align-self: center;
    min-height: 0;
    padding: 7px 14px;
    font-size: var(--texte_s);
}

.webexpress_carte .webexpress_actions .webexpress_bouton_suivant
{
    grid-area: suivant;
    justify-self: end;
    margin-left: 0;
}

.webexpress_carte .webexpress_actions .webexpress_enregistre
{
    grid-area: enregistre;
    justify-self: end;
    flex: none;
    order: 0;
    text-align: right;
}

@media (max-width: 720px)
{
    .webexpress_carte .webexpress_actions .webexpress_bouton_suivant
    {
        justify-self: stretch;
    }

    .webexpress_carte .webexpress_actions .webexpress_enregistre
    {
        justify-self: stretch;
        text-align: center;
    }
}


/* WX_BANDEAU_FAMILLE_GELULES (n° 1515) =================================== */
/* 1. Les 2 gélules (Instructions à gauche, Jarvis en ligne à droite) sont sur la même ligne, en haut du cadre ;
      le bandeau « Coucou [prénom] ! Click Me !! » (offre Famille) est juste au-dessus, il déplie l'encadré en glissant */
.webexpress_carte
{
    padding-top: clamp(14px, 2vw, 22px);
}

.webexpress_carte_haut
{
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.webexpress_carte_gelules
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.webexpress_carte_gelules:empty
{
    display: none;
}

.webexpress_carte_gelules .webexpress_ia_indicateur.webexpress_ia_gelule
{
    position: static;
    margin-left: auto;
}

.webexpress_carte_gelules .webexpress_instructions
{
    position: relative;
    flex: 0 0 auto;
}

.webexpress_carte_gelules .webexpress_instructions[open] .webexpress_instructions_bouton
{
    margin-bottom: 0;
}

/* Le contenu des instructions s'ouvre en volet sous la gélule, il ne pousse pas la ligne */
.webexpress_carte_gelules .webexpress_instructions .webexpress_bandeau_admin
{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 8;
    box-sizing: border-box;
    width: min(540px, calc(100vw - 48px));
    padding: 12px 14px;
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* 2. Bandeau Famille : visible seulement quand le script le montre ([hidden]) */
.webexpress_famille_bandeau
{
    display: flex;
    flex-direction: column;
}

.webexpress_famille_bascule_case
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.webexpress_famille_bascule
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: var(--texte_s);
    font-weight: 700;
    color: var(--accent_texte, #ffffff);
    background: var(--accent);
    border-radius: var(--rayon);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 0 0 0 var(--accent);
    animation: webexpress_famille_appel 2.4s ease-in-out infinite;
}

.webexpress_famille_bascule_texte
{
    display: inline-block;
    animation: webexpress_famille_salut 2.4s ease-in-out infinite;
}

.webexpress_famille_bascule svg
{
    flex: 0 0 auto;
    transition: transform var(--duree) var(--easing);
}

.webexpress_famille_bascule:hover
{
    filter: brightness(1.08);
}

.webexpress_famille_bascule_case:checked + .webexpress_famille_bascule
{
    animation: none;
}

.webexpress_famille_bascule_case:checked + .webexpress_famille_bascule .webexpress_famille_bascule_texte
{
    animation: none;
}

.webexpress_famille_bascule_case:checked + .webexpress_famille_bascule svg
{
    transform: rotate(180deg);
}

.webexpress_famille_bascule_case:focus-visible + .webexpress_famille_bascule
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webexpress_famille_corps
{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms var(--easing);
}

.webexpress_famille_corps_interieur
{
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 280ms;
}

.webexpress_famille_bascule_case:checked ~ .webexpress_famille_corps
{
    grid-template-rows: 1fr;
}

.webexpress_famille_bascule_case:checked ~ .webexpress_famille_corps .webexpress_famille_corps_interieur
{
    visibility: visible;
    transition-delay: 0s;
    padding-top: 8px;
}

/* Animation « ne pas le manquer » : halo qui pulse + petit salut du texte, toutes les 2,4 s */
@keyframes webexpress_famille_appel
{
    0%, 100%
    {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    }
    50%
    {
        box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

@keyframes webexpress_famille_salut
{
    0%, 55%, 100%
    {
        transform: rotate(0deg) scale(1);
    }
    62%
    {
        transform: rotate(-3deg) scale(1.06);
    }
    70%
    {
        transform: rotate(3deg) scale(1.06);
    }
    78%
    {
        transform: rotate(-2deg) scale(1.03);
    }
    86%
    {
        transform: rotate(0deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .webexpress_famille_bascule,
    .webexpress_famille_bascule_texte,
    .webexpress_famille_corps,
    .webexpress_famille_bascule svg
    {
        animation: none;
        transition: none;
    }
}

/* WX_COMPACT_1540 ===================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1540 de JaxX) — A VALIDER PAR JaxX : le but est d'avoir tout le formulaire accessible.
 *   - récapitulatif réduit : padding réduit, tout le bloc ouvre le slideToggle, « Détails » à gauche et prix à droite ;
 *   - « Étape N sur M » sur la même ligne que le pourcentage (à droite) ;
 *   - bandeau « Dossier retrouvé » : sous le bouton Retour, en bas à gauche, replié, détails en slideToggle ;
 *   - studio « Sur mesure » (palette de couleurs) : plus aucun défilement horizontal, toute la largeur utile prise quand il est ouvert.
 */
.webexpress_carte .webexpress_recap
{
    gap: 0;
    padding: 6px 12px;
}

.webexpress_carte .webexpress_recap:has( .webexpress_recap_bascule_case:checked )
{
    gap: 8px;
}

.webexpress_recap_total
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.webexpress_recap_total .webexpress_recap_bascule
{
    order: -1;
    margin-left: 0;
    padding: 2px 6px 2px 0;
}

.webexpress_recap_total .webexpress_recap_libelle
{
    margin-left: 4px;
}

.webexpress_recap_total .webexpress_recap_montant,
.webexpress_recap_total .webexpress_recap_offert
{
    margin-left: auto;
}

.webexpress_recap_total:hover .webexpress_recap_bascule
{
    color: var(--encre_second);
}

.webexpress_recap_bascule_case:checked ~ .webexpress_recap_total .webexpress_recap_bascule svg
{
    transform: rotate(180deg);
}

/* Progression : « Étape N sur M » à gauche, pourcentage à droite, barre dessous */
.webexpress_progression
{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.webexpress_progression_texte
{
    flex: 1 1 auto;
}

.webexpress_progression_pourcent
{
    margin-left: auto;
    font-size: var(--texte_xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--encre_second);
}

.webexpress_progression_piste
{
    flex: 0 0 100%;
}

/* Bandeau « Dossier retrouvé » : discret, sous Retour, replié */
.webexpress_reprise
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    align-self: flex-start;
    padding: 0;
    border-left: 0;
    background: transparent;
}

.webexpress_reprise[hidden]
{
    display: none;
}

.webexpress_reprise_case
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.webexpress_reprise_bascule
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: var(--texte_xs);
    color: var(--succes);
    cursor: pointer;
    user-select: none;
}

.webexpress_reprise_bascule::before
{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--succes);
}

.webexpress_reprise_bascule svg
{
    transition: transform var(--duree) var(--easing);
}

.webexpress_reprise_case:checked ~ .webexpress_reprise_bascule svg
{
    transform: rotate(180deg);
}

.webexpress_reprise_case:focus-visible ~ .webexpress_reprise_bascule
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.webexpress_reprise_corps
{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms var(--easing);
}

.webexpress_reprise_interieur
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 280ms;
}

.webexpress_reprise_case:checked ~ .webexpress_reprise_corps
{
    grid-template-rows: 1fr;
}

.webexpress_reprise_case:checked ~ .webexpress_reprise_corps .webexpress_reprise_interieur
{
    visibility: visible;
    transition-delay: 0s;
    padding-top: 4px;
}

/* Studio « Sur mesure » : les colonnes se replient au lieu de déborder, la carte prend la largeur quand il est ouvert */
.webexpress_style_perso
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    min-width: 0;
}

.webexpress_style_perso > *,
.webexpress_style_perso_couleurs,
.webexpress_style_perso_polices
{
    min-width: 0;
}

.webexpress_style_perso_couleurs
{
    gap: 10px;
}

.webexpress_styles,
.webexpress_champs
{
    min-width: 0;
}

@media (min-width: 901px)
{
    .webexpress_entete_grille:has( .webexpress_style_perso:not([hidden]) )
    {
        grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .webexpress_reprise_corps,
    .webexpress_reprise_bascule svg
    {
        transition: none;
    }
}
/* WX_COMPACT_1540 ===================================================== */

/* CRAN_1594 =========================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1594 de JaxX : « un cran qui permettait de stabiliser le formulaire sur la hauteur de la
 * fenêtre disponible, comme une encoche où cette section serait calée ») — A VALIDER PAR JaxX.
 * Le questionnaire est une encoche de défilement : quand on s'en approche, la page se cale d'elle-même pour que la carte
 * commence juste sous l'en-tête, donc occupe la hauteur disponible de la fenêtre. « proximity » : le défilement reste libre
 * ailleurs (on n'est jamais piégé), seul le voisinage de l'encoche est magnétique. Écrans tactiles : l'inertie native sert de cran.
 */
@media (min-width: 901px) and (hover: hover)
{
    /* n° 1604 : le cran CSS « proximity » était trop discret ; remplacé par l'aimant de WebExpress.js (bloc AIMANT_1604)
    html:has( #questionnaire )
    {
        scroll-snap-type: y proximity;
    }
    */

    #questionnaire
    {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        scroll-margin-top: calc(var(--hauteur_header) + 12px);
    }
}
/* CRAN_1594 =========================================================== */

/* BARRE_BAS_1599 ====================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1599 de JaxX : barre du bas plus compacte pour laisser le plus de place au formulaire,
 * ligne de délimitation en haut et/ou en bas quand le formulaire peut défiler, « Enregistré à hh:mm » au-dessus du bouton,
 * Retour et Enregistrer alignés en bas) — A VALIDER PAR JaxX.
 */
.webexpress_carte .webexpress_actions
{
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        ". enregistre"
        "retour suivant";
    align-items: end;
    gap: 2px 12px;
    padding-top: 8px;
}

.webexpress_carte .webexpress_actions .webexpress_bouton_retour
{
    align-self: end;
    padding: 6px 12px;
}

.webexpress_carte .webexpress_actions .webexpress_bouton_suivant
{
    align-self: end;
    min-height: 0;
    padding: 9px 20px;
}

.webexpress_carte .webexpress_actions .webexpress_enregistre
{
    align-self: end;
    line-height: 1.2;
    margin: 0;
}

.webexpress_carte .webexpress_actions .webexpress_enregistre:empty
{
    display: none;
}

.webexpress_reprise
{
    margin: 0;
}

/* Lignes de délimitation du formulaire qui défile : haut s'il reste du contenu au-dessus, bas s'il en reste en dessous
   (classes posées par WebExpress.js, bloc BARRE_BAS_1599) ; la bordure existe toujours (transparente) : aucun saut de mise en page */
.webexpress_formulaire
{
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease;
}

.webexpress_formulaire.webexpress_defile_haut
{
    border-top-color: var(--ligne_forte);
}

.webexpress_formulaire.webexpress_defile_bas
{
    border-bottom-color: var(--ligne_forte);
}

@media (max-width: 720px)
{
    .webexpress_carte .webexpress_actions
    {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "enregistre enregistre"
            "retour suivant";
    }

    .webexpress_carte .webexpress_actions .webexpress_enregistre
    {
        justify-self: stretch;
        text-align: right;
    }
}
/* BARRE_BAS_1599 ====================================================== */

/* ESPACE_FORM_1627 ==================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1627 de JaxX : boutons calés tout en bas, « Dossier retrouvé » au-dessus de Retour comme
 * « Enregistré à… », moins d'espace entre l'étape et l'instruction, « Coucou » au-dessus du bloc de prix, un maximum d'espace
 * pour le formulaire) — A VALIDER PAR JaxX.
 */
.webexpress_carte .webexpress_actions
{
    grid-template-areas:
        "reprise enregistre"
        "retour suivant";
    margin-top: auto;
}

.webexpress_carte .webexpress_actions .webexpress_reprise
{
    grid-area: reprise;
    align-self: end;
    justify-self: start;
}

.webexpress_carte .webexpress_actions .webexpress_bouton_retour
{
    grid-area: retour;
    /* 15/10/2026 (n° 1646) : Retour gardait la largeur du message « Dossier retrouvé » placé dans la même colonne (étirement de la grille) */
    justify-self: start;
    width: auto;
    max-width: 100%;
}

.webexpress_carte .webexpress_actions .webexpress_bouton_suivant
{
    grid-area: suivant;
}

.webexpress_carte .webexpress_actions .webexpress_enregistre
{
    grid-area: enregistre;
}

/* moins d'air autour du titre d'étape et de l'instruction, dans le haut de la carte et dans l'en-tête */
.webexpress_etape_titre
{
    margin-bottom: 2px;
}

.webexpress_etape_intro
{
    margin-bottom: var(--espace_2);
    line-height: 1.4;
}

.webexpress_carte
{
    padding-top: max(34px, clamp(14px, 2.4vw, 28px));
}

.webexpress_carte_haut
{
    gap: 4px;
}

.webexpress_carte_tete
{
    gap: 6px;
}

.webexpress_carte_tete .webexpress_famille_bandeau
{
    margin: 0;
}

.webexpress_carte_tete .webexpress_famille_bandeau[hidden]
{
    display: none;
}

@media (max-width: 720px)
{
    .webexpress_carte .webexpress_actions
    {
        grid-template-areas:
            "reprise reprise"
            "enregistre enregistre"
            "retour suivant";
    }
}
/* ESPACE_FORM_1627 ==================================================== */

/* THEMES_GRANDS_1632 ================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1632 de JaxX : « deux thèmes de couleur, un thème personnalisé et je vous fais confiance,
 * des cartes un peu plus grandes, sur deux lignes même ; un bouton pour suggérer un nouveau thème sur la carte concernée »)
 * — A VALIDER PAR JaxX.
 */
.webexpress_styles
{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.webexpress_option.webexpress_style
{
    gap: 8px;
    padding: 0 0 12px 0;
}

.webexpress_style_apercu
{
    gap: 5px;
    min-height: 92px;
    padding: 14px 16px;
}

.webexpress_style_titre_apercu
{
    font-size: 1.25rem;
}

.webexpress_style_texte_apercu
{
    font-size: 0.82rem;
}

.webexpress_style_bouton_apercu
{
    padding: 3px 12px;
    font-size: 0.74rem;
}

.webexpress_style_palette
{
    gap: 6px;
    padding: 0 16px;
}

.webexpress_style_pastille
{
    width: 16px;
    height: 16px;
}

.webexpress_style_nom
{
    padding: 0 16px;
    font-size: 0.98rem;
}

.webexpress_style_autre
{
    align-self: flex-start;
    margin: 0 16px;
    padding: 3px 10px;
    font: inherit;
    font-size: var(--texte_xs);
    color: var(--encre_second);
    background: transparent;
    border: 1px solid var(--ligne_forte);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing), background-color var(--duree) var(--easing);
}

.webexpress_style_autre:hover,
.webexpress_style_autre:focus-visible
{
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 420px)
{
    .webexpress_styles
    {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* THEMES_GRANDS_1632 ================================================== */

/* POLICES_APERCU_1633 ================================================= */
/* 15/10/2026 (Claude #1, Dialogue n° 1633 de JaxX : les polices changent instantanément dans l'aperçu pendant le défilement) */
.webexpress_style_perso_police .webexpress_police_natif
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.webexpress_police_menu
{
    position: relative;
}

.webexpress_police_declencheur
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 1rem;
    text-align: left;
    color: var(--encre);
    background: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input, var(--rayon));
    cursor: pointer;
}

.webexpress_police_declencheur::after
{
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
}

.webexpress_police_declencheur:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webexpress_police_liste
{
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    color: var(--encre);
    background: color-mix(in srgb, var(--surface_carte) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input, var(--rayon));
    box-shadow: var(--ombre);
}

.webexpress_police_liste[hidden]
{
    display: none;
}

.webexpress_police_groupe
{
    padding: 8px 10px 3px;
    font-size: var(--texte_xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_second);
}

.webexpress_police_item
{
    padding: 7px 10px;
    font-size: 1.05rem;
    border-radius: calc(var(--rayon_input, 8px) - 2px);
    cursor: pointer;
}

.webexpress_police_item_active
{
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* POLICES_APERCU_1633 ================================================= */

/* POLICES_ACCESSIBLE_1636 ============================================= */
/* 15/10/2026 (Claude #1, Dialogue n° 1636 de JaxX : « le menu déroulant, mais plus accessible ») : cibles plus grandes
   (44 px au moins, la norme tactile), police du menu plus lisible, ouverture vers le haut si besoin, contraste de l'élément actif */
.webexpress_police_declencheur
{
    min-height: 44px;
}

.webexpress_police_valeur
{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webexpress_police_item
{
    min-height: 40px;
    display: flex;
    align-items: center;
}

@media (pointer: coarse)
{
    .webexpress_police_item
    {
        min-height: 48px;
    }

    .webexpress_police_liste
    {
        max-height: min(320px, 50vh);
    }
}

.webexpress_police_liste_haut
{
    top: auto;
    bottom: calc(100% + 4px);
}

.webexpress_police_item_active
{
    box-shadow: inset 3px 0 0 var(--accent);
    font-weight: 600;
}

.webexpress_police_item[aria-selected="true"]::after
{
    content: "";
    width: 6px;
    height: 10px;
    margin-left: auto;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(40deg);
}
/* POLICES_ACCESSIBLE_1636 ============================================= */

/* ENTONNOIR_1640 ====================================================== */
/* 15/10/2026 (Claude #1, Dialogue n° 1640 de JaxX : choisir son style par comparaisons successives, clair ou sombre d'abord) — A VALIDER PAR JaxX. */
.webexpress_styles[hidden],
.webexpress_entonnoir [hidden]
{
    display: none;
}

.webexpress_entonnoir
{
    margin-bottom: 12px;
}

.webexpress_entonnoir_zone
{
    padding: 14px;
    color: var(--encre);
    background: color-mix(in srgb, var(--surface_carte) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input, var(--rayon));
    box-shadow: var(--ombre);
}

.webexpress_entonnoir_progres
{
    margin: 0 0 2px 0;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_entonnoir_titre
{
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.webexpress_entonnoir_duel
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.webexpress_entonnoir_carte
{
    cursor: pointer;
    transition: transform var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.webexpress_entonnoir_carte:hover,
.webexpress_entonnoir_carte:focus-visible
{
    transform: translateY(-2px);
    border-color: var(--accent);
}

.webexpress_entonnoir_carte:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webexpress_entonnoir_actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
}

.webexpress_entonnoir_lien
{
    padding: 8px 0;
    min-height: 44px;
    font: inherit;
    font-size: var(--texte_xs);
    color: var(--accent);
    text-decoration: underline;
    background: transparent;
    border: 0;
    cursor: pointer;
}

@media (max-width: 420px)
{
    .webexpress_entonnoir_duel
    {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .webexpress_entonnoir_carte:hover,
    .webexpress_entonnoir_carte:focus-visible
    {
        transform: none;
    }
}
/* ENTONNOIR_1640 ====================================================== */

/* LOGO_ENTONNOIR_1649 ================================================= */
/* 15/10/2026 (Claude #1, Dialogue n° 1649 de JaxX : logo demandé avant les univers graphiques, couleurs reprises) — A VALIDER PAR JaxX. */
.webexpress_entonnoir_logo
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px 0;
    font-size: var(--texte_xs);
    color: var(--encre_second);
}

.webexpress_entonnoir_logo .webexpress_style_pastille
{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--ligne_forte);
}
/* LOGO_ENTONNOIR_1649 ================================================= */

/* LIGNE_UNIQUE_1676 =================================================== */
/* 15/10/2026 (Claude #1, Dialogue n° 1676 de JaxX : « ce bouton était mieux sur deux lignes, pas sur 3 ; idem Enregistré à… : peut-être sur une ligne de la largeur du bouton ») :
   les libellés courts de la barre du bas (Retour, Dossier retrouvé, Enregistré à…) ne se coupent plus, chacun tient sur une seule ligne */
.webexpress_carte .webexpress_actions .webexpress_bouton_retour,
.webexpress_carte .webexpress_actions .webexpress_enregistre,
.webexpress_reprise_bascule
{
    white-space: nowrap;
}

.webexpress_carte .webexpress_actions .webexpress_enregistre
{
    overflow: hidden;
    text-overflow: ellipsis;
}
/* LIGNE_UNIQUE_1676 =================================================== */

/* BAS_COMPACT_1681 ==================================================== */
/* 15/10/2026 (Claude #1, Dialogue n° 1681 de JaxX : « réduire l'espace en bas du formulaire pour laisser la place au contenu réel ») :
   marge basse de la carte, espace entre formulaire et boutons et air au-dessus des boutons resserrés */
.webexpress_carte
{
    padding-bottom: clamp(8px, 1.2vw, 14px);
    gap: 8px;
}

.webexpress_carte .webexpress_actions
{
    padding-top: 6px;
    margin-bottom: 0;
}
/* BAS_COMPACT_1681 ==================================================== */

/* HAUTEUR_CONTENU_1671 ================================================= */
/* 15/10/2026 (Claude #1, Dialogue n° 1671 de JaxX : « au maximum la taille de la fenêtre, pas besoin de tirer le formulaire jusqu'en bas si son contenu ne le nécessite pas ») :
   la carte du questionnaire n'est plus fixée à 100 vh, elle épouse son contenu et ne dépasse la fenêtre qu'en défilant (max-height) */
@media (min-width: 901px) and (min-height: 560px)
{
    .webexpress_carte:has(> .webexpress_formulaire:not([hidden]))
    {
        height: auto;
        min-height: 0;
        max-height: calc(100vh - var(--hauteur_header) - 24px);
        max-height: calc(100dvh - var(--hauteur_header) - 24px);
    }
}
/* HAUTEUR_CONTENU_1671 ================================================= */

/* MOBILE_DEBORDEMENT_1803 ============================================== */
/* 21/10/2026 17:14 (Claude, Dialogue 2027_B2B n° 1803 de JaxX : « formulaire Web Express en version mobile, un champ dépasse ») — A VALIDER PAR JaxX.
   Garde-fous de largeur : aucun champ ni encadré du questionnaire ne peut être plus large que son conteneur entre 320 et 600 px. */
/* la carte garde ses marges négatives sous 640 px (pas de max-width sur elle) */
.webexpress_carte
{
    min-width: 0;
}

.webexpress_formulaire,
.webexpress_etape,
.webexpress_champs,
.webexpress_champ
{
    min-width: 0;
    max-width: 100%;
}

.webexpress_saisie,
.webexpress_style_perso select,
.webexpress_police_declencheur
{
    max-width: 100%;
}

@media (max-width: 600px)
{
    /* « Autre montant » : le champ et « € / jour » passent à la ligne au lieu de pousser l'encadré hors de l'écran */
    .webexpress_ads_libre
    {
        flex-wrap: wrap;
    }

    /* adresses e-mail, noms de domaine et mots longs : coupés plutôt que de dépasser */
    .webexpress_libelle,
    .webexpress_aide,
    .webexpress_erreur,
    .webexpress_option_texte,
    .webexpress_domaine_etat,
    .webexpress_style_carte_titre,
    .webexpress_style_carte_texte
    {
        overflow-wrap: anywhere;
    }

    /* encadrés imbriqués (carte, studio, maquette) : marges internes cumulées réduites */
    .webexpress_style_perso
    {
        padding: 14px 12px;
        gap: 14px;
    }

    .webexpress_style_carte_pro
    {
        padding: 16px 14px;
    }

    .webexpress_acompte
    {
        padding: 12px;
    }
}
/* MOBILE_DEBORDEMENT_1803 ============================================== */