/**
 * ================================================================
 * FICHIER : Web_Flash.css
 * EMPLACEMENT : 2027_B2B/pages/Web_Flash/Web_Flash.css
 * SHORT_DESC : Styles de la page d'atterrissage « Web Flash »
 * DESCRIPTION : En-tête avec visuel, sommaire ancré, étapes numérotées, inclus / non inclus,
 *               réalisations, questions fréquentes, formulaire, appel final. Jetons de theme.css
 *               uniquement (mêmes motifs que Engagements.css) ; les champs du formulaire viennent
 *               de pages/Contact/Contact.css, chargé par le brain.
 *
 * SOMMAIRE :
 *   - WF_ENTETE
 *   - WF_SECTIONS
 *   - WF_ETAPES
 *   - WF_INCLUS
 *   - WF_TARIF
 *   - WF_REALISATIONS
 *   - WF_FAQ
 *   - WF_FORMULAIRE
 *   - WF_CTA
 *   - RESPONSIVE
 *
 * MODIFICATIONS :
 *   - 13/10/2026 04:05 : Création (Dialogue n° 1016, Claude) — A VALIDER PAR JaxX
 *   - 13/10/2026 09:15 : Section tarif et commande en ligne (Dialogue n° 1096, Claude) — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* WF_ENTETE =========================================================== */
.web_flash_entete
{
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 5vw, 56px);
    border-bottom: 1px solid var(--ligne);
    isolation: isolate;
}

.web_flash_entete_halo
{
    position: absolute;
    z-index: -1;
    width: clamp(320px, 40vw, 600px);
    aspect-ratio: 1;
    left: -10%;
    top: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent_halo) 0%, transparent 68%);
    pointer-events: none;
}

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

.web_flash_entete_texte h1
{
    max-width: 14ch;
}

.web_flash_entete_promesse
{
    max-width: 58ch;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--encre_second);
    margin-bottom: var(--espace_4);
}

.web_flash_atouts
{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: var(--espace_3) 0 0 0;
    padding: 0;
    font-size: var(--texte_sm, 0.92rem);
    color: var(--encre_second);
}

.web_flash_atouts li
{
    position: relative;
    padding-left: 18px;
}

.web_flash_atouts li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 10px;
    height: 1px;
    background: var(--accent);
}

.web_flash_entete_figure
{
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: var(--ombre);
}

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

.web_flash_sommaire
{
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--espace_4);
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: var(--espace_2);
    border-top: 1px solid var(--ligne);
}

.web_flash_sommaire_lien
{
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-size: var(--texte_sm, 0.92rem);
    color: var(--encre_second);
}

.web_flash_sommaire_lien:hover
{
    color: var(--accent);
}
/* WF_ENTETE =========================================================== */

/* WF_SECTIONS ========================================================= */
.web_flash_section
{
    padding: clamp(56px, 8vw, 104px) 0;
    scroll-margin-top: var(--hauteur_header);
}

.web_flash_section_fond
{
    background: var(--fond_second);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
}

.web_flash_section_titre
{
    max-width: 24ch;
    margin-bottom: var(--espace_4);
}

.web_flash_actions_centre
{
    justify-content: center;
    margin-top: var(--espace_4);
}
/* WF_SECTIONS ========================================================= */

/* WF_ETAPES =========================================================== */
.web_flash_etapes
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espace_4);
}

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

.web_flash_etape_numero
{
    display: block;
    font-family: var(--police_titres);
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--encre_attenuee);
    margin-bottom: var(--espace_2);
}

.web_flash_etape_titre
{
    margin-bottom: var(--espace_1);
}

.web_flash_etape_texte
{
    color: var(--encre_second);
    margin: 0;
}
/* WF_ETAPES =========================================================== */

/* WF_INCLUS =========================================================== */
.web_flash_inclus_grille
{
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.web_flash_inclus_titre
{
    margin-bottom: var(--espace_2);
}

.web_flash_points
{
    list-style: none;
    margin: 0;
    padding: 0;
}

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

/* Inclus : tiret couleur accent ; non inclus : croix discrète, en couleur atténuée */
.web_flash_point_inclus::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 12px;
    height: 1px;
    background: var(--accent);
}

.web_flash_point_exclu::before
{
    content: "×";
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--encre_attenuee);
}

.web_flash_inclus_note
{
    margin-top: var(--espace_3);
    font-size: var(--texte_sm, 0.92rem);
    color: var(--encre_second);
}
/* WF_INCLUS =========================================================== */

/* WF_TARIF ============================================================ */
/* 13/10/2026 (Dialogue n° 1096) : carte de prix, commande en ligne, messages ; jetons de theme.css uniquement */
#commander
{
    scroll-margin-top: var(--hauteur_header);
}

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

.web_flash_tarif_carte,
.web_flash_commande_carte
{
    position: relative;
    padding: clamp(24px, 3vw, 40px);
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-radius: 2px;
}

.web_flash_tarif_carte
{
    border-top: 2px solid var(--accent);
    box-shadow: var(--ombre);
}

.web_flash_tarif_prix
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 var(--espace_3) 0;
}

.web_flash_tarif_montant
{
    font-family: var(--police_titres);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--encre);
}

.web_flash_tarif_unite
{
    color: var(--encre_second);
}

.web_flash_commande
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_2);
}

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

.web_flash_commande_total
{
    margin: var(--espace_3) 0 var(--espace_2) 0;
    padding-top: var(--espace_2);
    border-top: 1px solid var(--ligne);
}

.web_flash_commande_total strong
{
    color: var(--encre);
}

.web_flash_case label
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.web_flash_case input[type="checkbox"]
{
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.web_flash_champ_erreur
{
    display: block;
    margin-top: 4px;
    font-size: var(--texte_sm, 0.92rem);
    color: var(--erreur);
}

.web_flash_message
{
    margin: 0;
    padding: var(--espace_2);
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--accent);
    background: var(--surface_carte);
}

.web_flash_message_erreur
{
    border-left-color: var(--erreur);
}

.web_flash_badge_test
{
    display: inline-block;
    margin-bottom: var(--espace_2);
    padding: 4px 10px;
    font-size: var(--texte_sm, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--erreur);
    border: 1px solid var(--erreur);
    border-radius: 2px;
}

.web_flash_confirmation
{
    border-top: 2px solid var(--succes);
}

.web_flash_bandeau_admin
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--espace_2);
    font-size: var(--texte_sm, 0.92rem);
    color: var(--encre_second);
    border: 1px dashed var(--erreur);
    border-radius: 2px;
}

.web_flash_bandeau_admin strong
{
    color: var(--encre);
}
/* WF_TARIF ============================================================ */

/* WF_REALISATIONS ===================================================== */
.web_flash_realisations
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--espace_4);
}

.web_flash_realisation_lien
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_1);
    color: inherit;
}

.web_flash_realisation_visuel
{
    display: block;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid var(--ligne);
    margin-bottom: var(--espace_1);
}

.web_flash_realisation_visuel img
{
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 494;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--duree) var(--easing);
}

.web_flash_realisation_lien:hover .web_flash_realisation_visuel img
{
    transform: scale(1.03);
}

.web_flash_realisation_nom
{
    font-family: var(--police_titres);
    font-weight: 700;
    color: var(--encre);
}

.web_flash_realisation_lien:hover .web_flash_realisation_nom
{
    color: var(--accent);
}

.web_flash_realisation_resume
{
    font-size: var(--texte_sm, 0.92rem);
    color: var(--encre_second);
}
/* WF_REALISATIONS ===================================================== */

/* WF_FAQ ============================================================== */
.web_flash_faq_grille
{
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.web_flash_question
{
    border-top: 1px solid var(--ligne);
}

.web_flash_question:last-child
{
    border-bottom: 1px solid var(--ligne);
}

.web_flash_question_titre
{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 14px 40px 14px 0;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    list-style: none;
}

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

.web_flash_question_titre::after
{
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform var(--duree) var(--easing);
}

.web_flash_question[open] .web_flash_question_titre::after
{
    transform: translateY(-50%) rotate(45deg);
}

.web_flash_question_titre:hover
{
    color: var(--accent);
}

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

.web_flash_question_reponse
{
    max-width: 64ch;
    margin: 0 0 var(--espace_3) 0;
    color: var(--encre_second);
}
/* WF_FAQ ============================================================== */

/* WF_FORMULAIRE ======================================================= */
/* Champs, mentions et retours : pages/Contact/Contact.css. Ici, la mise en page sur une seule colonne. */
.web_flash_formulaire
{
    scroll-margin-top: var(--hauteur_header);
}

.web_flash_formulaire_grille
{
    max-width: 860px;
}

.web_flash_formulaire_intro
{
    max-width: 60ch;
    color: var(--encre_second);
    margin-bottom: var(--espace_4);
}
/* WF_FORMULAIRE ======================================================= */

/* WF_CTA ============================================================== */
.web_flash_cta
{
    background: var(--surface);
    border-top: 1px solid var(--ligne);
    padding: clamp(64px, 9vw, 120px) 0;
}

.web_flash_cta_contenu
{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.web_flash_cta h2
{
    max-width: 22ch;
}

.web_flash_cta_texte
{
    max-width: 56ch;
    color: var(--encre_second);
    margin-bottom: var(--espace_4);
}

.web_flash_cta .groupe_actions
{
    justify-content: center;
}
/* WF_CTA ============================================================== */

/* RESPONSIVE ========================================================== */
@media (max-width: 900px)
{
    .web_flash_entete_grille,
    .web_flash_inclus_grille,
    .web_flash_tarif_grille,
    .web_flash_faq_grille
    {
        grid-template-columns: 1fr;
    }

    .web_flash_entete_figure
    {
        max-width: 640px;
    }

    .web_flash_etapes
    {
        grid-template-columns: 1fr;
        gap: var(--espace_3);
    }
}

@media (max-width: 640px)
{
    .web_flash_entete .groupe_actions > .bouton_principal,
    .web_flash_entete .groupe_actions > .bouton_secondaire,
    .web_flash_actions_centre > .bouton_principal,
    .web_flash_cta .groupe_actions > .bouton_principal,
    .web_flash_cta .groupe_actions > .bouton_secondaire
    {
        flex: 1 1 100%;
        justify-content: center;
    }

    .web_flash_sommaire
    {
        gap: 0 var(--espace_3);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .web_flash_realisation_visuel img,
    .web_flash_question_titre::after
    {
        transition: none;
    }
}
/* RESPONSIVE ========================================================== */