/**
 * ================================================================
 * FICHIER : Offres.css
 * EMPLACEMENT : 2027_B2B/pages/Offres/Offres.css
 * SHORT_DESC : Styles de la page « Offres »
 * DESCRIPTION : Hero avec sommaire ancré, cartes d'offres comparables (format, promesse, inclus,
 *               tarif « Gratuit » / « Sur devis »), tableau comparatif des packs, bloc « sur devis »,
 *               méthode en quatre étapes, FAQ, appel au configurateur. Jetons de theme.css uniquement,
 *               rayons ≤ 2px, classes préfixées offres_.
 *
 * SOMMAIRE :
 *   - OFFRES_HERO
 *   - OFFRES_WEB_FLASH
 *   - OFFRES_GROUPES
 *   - OFFRES_CARTES
 *   - OFFRES_COMPARATIF
 *   - OFFRES_METHODE
 *   - OFFRES_FAQ
 *   - OFFRES_CTA
 *   - OFFRES_RESPONSIVE
 *
 * MODIFICATIONS :
 *   - 06/11/2026 13:33 : Groupe de quatre (≥ 1200 px) : la mention du pied de carte (« Le prototype et son code vous sont remis… ») passe sous le tarif et le bouton, sur toute la largeur, au lieu d'une colonne étroite entre les deux (JaxXBot n° 2123 de JaxX, Claude Opus 5.5) — A VALIDER PAR JaxX
 *   - 13/10/2026 05:02 : Section OFFRES_WEB_FLASH : bandeau « Nouveau · Web Flash » du hero et section Web Flash (texte + carte), jetons du thème uniquement (Dialogue n° 1078, Claude) — A VALIDER PAR JaxX
 *   - 06/10/2026 14:00 : Création — A VALIDER PAR JaxX
 *   - 06/10/2026 14:24 : Fiches compactes sur bureau (≥ 1025 px) et groupe de quatre en 2 × 2 à l’horizontale (≥ 1200 px) : aucune fiche ne dépasse l’écran — A VALIDER PAR JaxX
 *   - 06/10/2026 13:56 : Groupes d'actions (hero, CTA) en grille à une colonne sur mobile (débordement horizontal des boutons avec flex column + wrap), cadre du tableau borné — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* OFFRES_HERO ========================================================= */
.offres_hero
{
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ligne);
    background: var(--fond_second);
}

.offres_hero_grille
{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--gouttiere_grille);
    align-items: center;
    padding: clamp(40px, 7vh, 88px) 0;
}

.offres_hero h1
{
    max-width: 18ch;
}

.offres_hero_texte
{
    max-width: 58ch;
    color: var(--encre_second);
    font-size: 1.05rem;
}

.offres_hero_sommaire
{
    list-style: none;
    padding: 0;
    margin: var(--espace_3) 0 var(--espace_4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace_2);
}

.offres_hero_sommaire a
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    background: var(--surface);
    color: var(--encre);
    text-decoration: none;
    font-size: var(--texte_s);
    font-weight: 600;
    transition: border-color var(--duree) var(--easing), color var(--duree) var(--easing);
}

.offres_hero_sommaire a .texte_mono
{
    color: var(--accent);
    font-size: var(--texte_xs);
}

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

.offres_hero_figure
{
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--ligne);
}

.offres_hero_figure img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* OFFRES_HERO ========================================================= */

/* OFFRES_WEB_FLASH ==================================================== */
/* 13/10/2026 05:02 (Claude, Dialogue n° 1078) : bandeau d'appel en tête du hero (visible sans défiler) et section Web Flash */
.offres_bandeau_web_flash
{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: 100%;
    margin-bottom: var(--espace_3);
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    background: var(--surface);
    color: var(--encre);
    text-decoration: none;
    font-size: var(--texte_s);
    line-height: 1.35;
    transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing), transform var(--duree) var(--easing);
}

.offres_bandeau_web_flash:hover,
.offres_bandeau_web_flash:focus-visible
{
    box-shadow: 0 0 0 1px var(--accent) inset, var(--ombre);
    transform: translateY(-1px);
}

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

.offres_bandeau_badge
{
    flex: none;
    padding: 3px 8px;
    border-radius: 2px;
    background: var(--accent);
    color: var(--accent_texte);
    font-size: var(--texte_xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.offres_bandeau_texte
{
    min-width: 0;
}

.offres_bandeau_texte strong
{
    font-weight: 700;
}

.offres_bandeau_action
{
    flex: none;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.offres_web_flash
{
    padding: var(--espace_5) 0;
    border-bottom: 1px solid var(--ligne);
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
}

.offres_web_flash_grille
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gouttiere_grille);
    align-items: center;
}

.offres_web_flash_entete
{
    margin-bottom: 0;
}

.offres_web_flash_entete .groupe_actions
{
    margin-top: var(--espace_3);
}

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

@media (max-width: 480px)
{
    .offres_bandeau_web_flash
    {
        display: flex;
        padding: 8px 12px 8px 8px;
    }

    .offres_web_flash_entete .groupe_actions
    {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .offres_web_flash_entete .groupe_actions a
    {
        width: 100%;
        white-space: normal;
        justify-content: center;
    }
}

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

    .offres_bandeau_web_flash:hover,
    .offres_bandeau_web_flash:focus-visible
    {
        transform: none;
    }
}
/* OFFRES_WEB_FLASH ==================================================== */

/* OFFRES_GROUPES ====================================================== */
.offres_groupe
{
    padding: var(--espace_5) 0;
    border-bottom: 1px solid var(--ligne);
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
}

.offres_groupe:nth-of-type(odd)
{
    background: var(--fond_second);
}

.offres_groupe_entete
{
    max-width: 68ch;
    margin-bottom: var(--espace_4);
}

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

.offres_groupe_entete .sur_titre .texte_mono
{
    color: var(--accent);
    margin-right: 6px;
}

.offres_groupe_texte
{
    color: var(--encre_second);
    font-size: 1.05rem;
    margin: 0;
}

.offres_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere_grille);
    align-items: stretch;
}

.offres_grille_4
{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* OFFRES_GROUPES ====================================================== */

/* OFFRES_CARTES ======================================================= */
.offres_carte
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_3);
    padding: var(--espace_4);
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    background: var(--surface_carte);
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
    transition: border-color var(--duree) var(--easing), transform var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

.offres_carte:hover
{
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--ombre);
}

.offres_carte_mise_en_avant
{
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
    background: var(--surface);
}

.offres_carte_entete h3
{
    margin: 6px 0 10px;
    font-size: var(--texte_l);
}

.offres_carte_format
{
    font-size: var(--texte_xs);
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.offres_carte_promesse
{
    margin: 0;
    color: var(--encre);
}

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

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

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

.offres_carte_inclus_titre
{
    display: block;
    font-size: var(--texte_xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre_attenuee);
    margin-bottom: 10px;
}

.offres_carte_inclus ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.offres_carte_inclus li
{
    position: relative;
    padding-left: 18px;
    font-size: var(--texte_s);
    color: var(--encre_second);
}

.offres_carte_inclus li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 2px;
    background: var(--accent);
}

.offres_carte_pied
{
    margin-top: auto;
    padding-top: var(--espace_3);
    border-top: 1px solid var(--ligne);
    display: grid;
    gap: 10px;
}

.offres_carte_tarif
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.offres_prix
{
    font-family: var(--police_titres);
    font-weight: 700;
    font-size: var(--texte_xl);
    line-height: 1;
    color: var(--encre);
}

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

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

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

.offres_carte_pied .bouton_principal
{
    justify-content: center;
    width: 100%;
    margin-top: 6px;
}
/* OFFRES_CARTES ======================================================= */

/* OFFRES_COMPARATIF =================================================== */
.offres_comparatif
{
    padding: var(--espace_5) 0;
    border-bottom: 1px solid var(--ligne);
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
}

.offres_tableau_indice
{
    display: none;
    margin: 0 0 var(--espace_1);
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre_second);
}

.offres_tableau_cadre
{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    background: var(--surface);
}

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

.offres_tableau
{
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--texte_s);
}

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

.offres_tableau thead th
{
    font-family: var(--police_titres);
    font-size: var(--texte_m);
    font-weight: 600;
    color: var(--encre);
    background: var(--fond_second);
    border-bottom: 1px solid var(--ligne_forte);
}

.offres_tableau thead th:nth-child(3)
{
    color: var(--accent);
}

.offres_tableau tbody th
{
    font-weight: 600;
    color: var(--encre);
    width: 22%;
    white-space: nowrap;
}

.offres_tableau tbody td
{
    color: var(--encre_second);
}

.offres_tableau tbody tr:last-child th,
.offres_tableau tbody tr:last-child td
{
    border-bottom: 0;
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.offres_sur_devis
{
    margin-top: var(--espace_4);
    padding: var(--espace_3) var(--espace_4);
    border-left: 2px solid var(--accent);
    background: var(--surface_carte);
    max-width: 72ch;
}

.offres_sur_devis_numero
{
    display: block;
    font-size: var(--texte_xs);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.offres_sur_devis p
{
    margin: 0;
    color: var(--encre_second);
}

.visually_hidden_offres
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* OFFRES_COMPARATIF =================================================== */

/* OFFRES_METHODE ====================================================== */
.offres_methode
{
    padding: var(--espace_5) 0;
    border-bottom: 1px solid var(--ligne);
    background: var(--fond_second);
    scroll-margin-top: calc(var(--hauteur_header) + var(--espace_3));
}

.offres_methode_liste
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gouttiere_grille);
}

.offres_methode_etape
{
    padding: var(--espace_3) 0 0;
    border-top: 2px solid var(--ligne_forte);
}

.offres_methode_numero
{
    display: block;
    font-size: var(--texte_xs);
    color: var(--accent);
    margin-bottom: 6px;
}

.offres_methode_nom
{
    display: block;
    font-size: var(--texte_xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre_attenuee);
}

.offres_methode_etape h3
{
    font-size: var(--texte_m);
    margin: 10px 0 8px;
}

.offres_methode_etape p
{
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_second);
}
/* OFFRES_METHODE ====================================================== */

/* OFFRES_FAQ ========================================================== */
.offres_section_faq
{
    padding: var(--espace_5) 0;
    border-bottom: 1px solid var(--ligne);
}

.offres_faq_grille
{
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--gouttiere_grille);
    align-items: start;
}

.offres_faq_grille h2
{
    max-width: 18ch;
}

.offres_faq details
{
    border-top: 1px solid var(--ligne_forte);
}

.offres_faq details:last-child
{
    border-bottom: 1px solid var(--ligne_forte);
}

.offres_faq summary
{
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--police_titres);
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--espace_2);
    min-height: 48px;
}

.offres_faq summary::-webkit-details-marker
{
    display: none;
}

.offres_faq summary::after
{
    content: '+';
    font-family: var(--police_mono);
    color: var(--accent);
    flex: none;
    transition: transform var(--duree) var(--easing);
}

.offres_faq details[open] summary::after
{
    transform: rotate(45deg);
}

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

.offres_faq p
{
    color: var(--encre_second);
    margin: 0 0 18px;
    max-width: 62ch;
}
/* OFFRES_FAQ ========================================================== */

/* OFFRES_CTA ========================================================== */
.offres_cta
{
    padding: var(--espace_5) 0;
    background: var(--fond_second);
}

.offres_cta_cadre
{
    padding: var(--espace_5) var(--espace_4);
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    background: var(--surface);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--espace_2);
}

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

.offres_cta_cadre .offres_hero_texte
{
    margin: 0 auto;
}

.offres_cta_cadre .groupe_actions
{
    justify-content: center;
    margin-top: var(--espace_2);
}
/* OFFRES_CTA ========================================================== */

/* OFFRES_RESPONSIVE =================================================== */
/* 06/10/2026 14:24 (Claude) : sur bureau, les fiches ne doivent pas dépasser la hauteur de l'écran (demande de JaxX) */
@media (min-width: 1025px)
{
    .offres_carte
    {
        gap: var(--espace_2);
        padding: var(--espace_3);
    }

    .offres_carte_entete h3
    {
        margin: 4px 0 8px;
    }

    .offres_carte_inclus,
    .offres_carte_pied
    {
        padding-top: var(--espace_2);
    }

    .offres_carte_inclus ul
    {
        gap: 6px;
    }

    .offres_carte_pied
    {
        gap: 8px;
    }

    .offres_carte_pied .bouton_principal
    {
        margin-top: 2px;
    }

    .offres_prix
    {
        font-size: clamp(1.4rem, 1rem + 0.9vw, 1.9rem);
    }

    .offres_grille_4
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Groupe de quatre : grille 2 × 2, fiches à l'horizontale (identité à gauche, inclus à droite, pied en ligne) */
@media (min-width: 1200px)
{
    .offres_grille_4 .offres_carte
    {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "entete   inclus"
            "pour_qui inclus"
            "pied     pied";
        column-gap: var(--espace_3);
        row-gap: var(--espace_2);
    }

    .offres_grille_4 .offres_carte_entete
    {
        grid-area: entete;
    }

    .offres_grille_4 .offres_carte_pour_qui
    {
        grid-area: pour_qui;
    }

    .offres_grille_4 .offres_carte_inclus
    {
        grid-area: inclus;
        padding-top: 0;
        padding-left: var(--espace_3);
        border-top: 0;
        border-left: 1px solid var(--ligne);
    }

    .offres_grille_4 .offres_carte_pied
    {
        grid-area: pied;
        /* grid-template-columns: auto minmax(0, 1fr) auto; */
        /* 06/11/2026 13:33 (Claude Opus 5.5, JaxXBot n° 2123 de JaxX) : la mention, coincée en colonne étroite entre le tarif
           et le bouton, passe sur une ligne en dessous, sur toute la largeur de la carte — A VALIDER PAR JaxX */
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "tarif   bouton"
            "mention mention";
        align-items: center;
        column-gap: var(--espace_3);
    }

    .offres_grille_4 .offres_carte_tarif
    {
        grid-area: tarif;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .offres_grille_4 .offres_carte_mention
    {
        grid-area: mention;
    }

    .offres_grille_4 .offres_carte_pied .bouton_principal
    {
        grid-area: bouton;
        width: auto;
        margin-top: 0;
    }
}

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

    .offres_methode_liste
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .offres_hero_figure
    {
        aspect-ratio: 16 / 9;
    }

    .offres_grille
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px)
{
    .offres_grille,
    .offres_grille_4,
    .offres_methode_liste
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .offres_carte
    {
        padding: var(--espace_3);
    }

    .offres_carte:hover
    {
        transform: none;
    }

    .offres_tableau tbody th
    {
        white-space: normal;
    }

    .offres_cta_cadre
    {
        padding: var(--espace_4) var(--espace_3);
        min-width: 0;
        max-width: 100%;
    }

    /* Grille à une colonne : « flex-direction: column » + « flex-wrap: wrap » du thème
       faisait passer chaque bouton (flex-basis 100 %) dans une nouvelle colonne → débordement. */
    .offres_cta_cadre .groupe_actions
    {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }

    .offres_cta_cadre .groupe_actions a
    {
        width: 100%;
        white-space: normal;
        justify-content: center;
    }

    .offres_tableau_cadre
    {
        min-width: 0;
        max-width: 100%;
    }

    .offres_tableau_indice
    {
        display: block;
    }
}

@media (max-width: 480px)
{
    .offres_hero_sommaire a
    {
        flex: 1 1 auto;
        justify-content: center;
    }

    .offres_hero .groupe_actions
    {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }

    .offres_hero .groupe_actions a
    {
        width: 100%;
        white-space: normal;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .offres_carte,
    .offres_hero_sommaire a,
    .offres_faq summary::after
    {
        transition: none;
    }

    .offres_carte:hover
    {
        transform: none;
    }
}
/* OFFRES_RESPONSIVE =================================================== */