/* =============================================================================
   GESTIONN'AIR V3
   SITE VITRINE PUBLIC
   =============================================================================

   FICHIER :
   style.css

   OBJECTIF
   -----------------------------------------------------------------------------
   Feuille de style principale du site public Gestionn'Air V3.

   PRINCIPES DE CETTE VERSION
   -----------------------------------------------------------------------------

   - conservation intégrale de l'identité visuelle existante ;
   - factorisation des règles réellement communes ;
   - suppression de plusieurs répétitions inutiles ;
   - conservation de classes métier explicites ;
   - prise en charge du Cloud Gestionn'Air ;
   - prise en charge de la présentation des paiements Stripe ;
   - prise en charge des nouvelles réservations de démonstration ;
   - prise en charge du statut opérationnel du footer ;
   - responsive maintenu ;
   - aucune dépendance Bootstrap ;
   - aucun framework CSS.

   IMPORTANT
   -----------------------------------------------------------------------------

   La factorisation ne doit pas aller au détriment de la maintenance.

   Certaines classes qui pourraient techniquement être regroupées restent donc
   volontairement distinctes lorsqu'elles représentent des composants métier
   différents.

   ============================================================================= */


/* =============================================================================
   1. VARIABLES GLOBALES
   ============================================================================= */

:root
{
    /* -------------------------------------------------------------------------
       COULEURS DE MARQUE
       ------------------------------------------------------------------------- */

    --ga-navy:
        #123847;

    --ga-navy-2:
        #0c2d39;

    --ga-primary:
        #116d86;

    --ga-primary-hover:
        #0d5c72;

    --ga-primary-soft:
        #e5f2f6;

    --ga-primary-softer:
        #f1f8fa;

    --ga-blue:
        #267c9c;

    --ga-blue-soft:
        #e7f1f6;


    /* -------------------------------------------------------------------------
       COULEURS D'ÉTAT
       ------------------------------------------------------------------------- */

    --ga-green:
        #18825c;

    --ga-green-soft:
        #e8f6ef;

    --ga-green-border:
        #acdcca;

    --ga-orange:
        #bb7518;

    --ga-orange-soft:
        #fff2dd;

    --ga-red:
        #c64b55;

    --ga-red-soft:
        #fff0f1;

    --ga-purple:
        #73569d;

    --ga-purple-soft:
        #f2edf8;

    --ga-yellow:
        #b37b19;

    --ga-yellow-soft:
        #fff6dc;


    /* -------------------------------------------------------------------------
       TEXTE ET SURFACES
       ------------------------------------------------------------------------- */

    --ga-text:
        #17313d;

    --ga-text-secondary:
        #526a76;

    --ga-text-muted:
        #778c97;

    --ga-border:
        #d3e0e6;

    --ga-border-light:
        #e6edf0;

    --ga-page:
        #edf4f7;

    --ga-page-alt:
        #f5f8fa;

    --ga-white:
        #ffffff;


    /* -------------------------------------------------------------------------
       OMBRES
       ------------------------------------------------------------------------- */

    --ga-shadow-sm:
        0 4px 15px rgba(20, 55, 72, 0.06);

    --ga-shadow-md:
        0 13px 34px rgba(20, 55, 72, 0.10);

    --ga-shadow-lg:
        0 28px 70px rgba(13, 45, 60, 0.16);


    /* -------------------------------------------------------------------------
       ARRONDIS
       ------------------------------------------------------------------------- */

    --ga-radius-xs:
        7px;

    --ga-radius-sm:
        10px;

    --ga-radius:
        15px;

    --ga-radius-lg:
        24px;


    /* -------------------------------------------------------------------------
       STRUCTURE
       ------------------------------------------------------------------------- */

    --ga-container:
        1220px;

    --ga-header:
        72px;

    --ga-transition:
        180ms ease;
}


/* =============================================================================
   2. RESET ET BASE
   ============================================================================= */

*,
*::before,
*::after
{
    box-sizing:
        border-box;
}


html
{
    scroll-behavior:
        smooth;

    scroll-padding-top:
        calc(var(--ga-header) + 20px);
}


body
{
    margin:
        0;

    overflow-x:
        hidden;

    background:
        var(--ga-page-alt);

    color:
        var(--ga-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.55;

    -webkit-font-smoothing:
        antialiased;
}


body.menu-open
{
    overflow:
        hidden;
}


a
{
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
select,
textarea
{
    font:
        inherit;
}


button
{
    border:
        0;

    cursor:
        pointer;
}


img,
svg
{
    display:
        block;
}


h1,
h2,
h3,
h4,
p
{
    margin-top:
        0;
}


h1,
h2,
h3,
h4
{
    line-height:
        1.12;

    letter-spacing:
        -0.028em;
}


/* =============================================================================
   3. PRIMITIVES DE MISE EN PAGE
   ============================================================================= */

.container
{
    width:
        min(
            calc(100% - 40px),
            var(--ga-container)
        );

    margin:
        0 auto;
}


.section
{
    position:
        relative;

    padding:
        92px 0;
}


.section--white
{
    background:
        var(--ga-white);
}


.section--soft
{
    background:
        var(--ga-page-alt);
}


.section--blue
{
    background:
        var(--ga-page);
}


.section--dark
{
    background:
        var(--ga-navy-2);

    color:
        white;
}


/* =============================================================================
   4. TITRES ET EN-TÊTES DE SECTION
   ============================================================================= */

.section-header
{
    max-width:
        770px;

    margin-bottom:
        42px;
}


.section-header--center
{
    margin-right:
        auto;

    margin-left:
        auto;

    text-align:
        center;
}


.eyebrow
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        var(--ga-primary);

    font-size:
        12px;

    font-weight:
        850;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.eyebrow::before,
.section-header--center .eyebrow::after
{
    content:
        "";

    width:
        20px;

    height:
        2px;

    border-radius:
        999px;

    background:
        currentColor;
}


.section-title
{
    margin-bottom:
        16px;

    color:
        var(--ga-text);

    font-size:
        clamp(
            34px,
            4.2vw,
            49px
        );

    font-weight:
        830;
}


.section-description
{
    margin:
        0;

    color:
        var(--ga-text-secondary);

    font-size:
        17px;

    line-height:
        1.68;
}


/* =============================================================================
   5. BADGES ET ICÔNES
   ============================================================================= */

.tag
{
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        27px;

    padding:
        0 9px;

    border-radius:
        999px;

    background:
        var(--ga-primary-soft);

    color:
        var(--ga-primary);

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;
}


.tag--green
{
    background:
        var(--ga-green-soft);

    color:
        var(--ga-green);
}


.tag--orange
{
    background:
        var(--ga-orange-soft);

    color:
        var(--ga-orange);
}


.tag--purple
{
    background:
        var(--ga-purple-soft);

    color:
        var(--ga-purple);
}


.tag--future
{
    border:
        1px solid #d5cae5;

    background:
        #f6f2fb;

    color:
        #6c5791;
}


.icon
{
    width:
        20px;

    height:
        20px;

    flex:
        0 0 auto;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =============================================================================
   6. BOUTONS
   ============================================================================= */

.button
{
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        47px;

    padding:
        0 18px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    font-size:
        14px;

    font-weight:
        800;

    transition:
        transform var(--ga-transition),
        box-shadow var(--ga-transition),
        background var(--ga-transition),
        border-color var(--ga-transition),
        color var(--ga-transition);
}


.button:hover
{
    transform:
        translateY(-1px);
}


.button--primary
{
    background:
        var(--ga-primary);

    color:
        white;

    box-shadow:
        0 7px 18px rgba(17, 109, 134, 0.20);
}


.button--primary:hover
{
    background:
        var(--ga-primary-hover);
}


.button--secondary
{
    border-color:
        var(--ga-border);

    background:
        white;

    color:
        var(--ga-text);
}


.button--secondary:hover
{
    border-color:
        #b9ccd5;

    background:
        #f9fbfc;
}


.button--white
{
    background:
        white;

    color:
        var(--ga-navy);
}


.button--ghost
{
    border-color:
        rgba(255, 255, 255, 0.28);

    background:
        rgba(255, 255, 255, 0.07);

    color:
        white;
}


.button--small
{
    min-height:
        40px;

    padding:
        0 14px;

    font-size:
        12px;
}


.button--large
{
    min-height:
        54px;

    padding:
        0 23px;

    font-size:
        15px;
}


/* =============================================================================
   7. HEADER
   ============================================================================= */

.site-header
{
    position:
        fixed;

    z-index:
        2000;

    top:
        0;

    right:
        0;

    left:
        0;

    height:
        var(--ga-header);

    border-bottom:
        1px solid rgba(202, 219, 227, 0.85);

    background:
        rgba(247, 251, 252, 0.95);

    backdrop-filter:
        blur(16px);

    transition:
        box-shadow var(--ga-transition);
}


.site-header.is-scrolled
{
    box-shadow:
        0 9px 30px rgba(19, 54, 70, 0.08);
}


.site-header-inner,
.site-header-actions,
.site-nav,
.brand
{
    display:
        flex;

    align-items:
        center;
}


.site-header-inner
{
    justify-content:
        space-between;

    height:
        100%;
}


.brand
{
    gap:
        11px;

    min-width:
        max-content;
}

.brand-mark
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        58px;

    height:
        44px;

    flex:
        0 0 58px;
}


.brand-logo-image
{
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}

.brand-copy
{
    display:
        flex;

    flex-direction:
        column;
}


.brand-name
{
    color:
        var(--ga-navy);

    font-size:
        20px;

    font-weight:
        880;

    line-height:
        1;
}


.brand-subtitle
{
    margin-top:
        5px;

    color:
        #79909a;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.04em;
}


.site-nav
{
    gap:
        4px;

    margin-right:
        23px;

    margin-left:
        auto;
}


.site-nav-link
{
    position:
        relative;

    padding:
        10px 9px;

    color:
        #4c6570;

    font-size:
        13px;

    font-weight:
        720;
}


.site-nav-link:hover,
.site-nav-link.active
{
    color:
        var(--ga-primary);
}


.site-nav-link.active::after
{
    content:
        "";

    position:
        absolute;

    right:
        9px;

    bottom:
        3px;

    left:
        9px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--ga-primary);
}


.site-header-actions
{
    gap:
        8px;
}


.menu-toggle
{
    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid var(--ga-border);

    border-radius:
        10px;

    background:
        white;

    color:
        var(--ga-primary);
}


/* =============================================================================
   8. MENU MOBILE
   ============================================================================= */

.mobile-nav
{
    position:
        fixed;

    z-index:
        1900;

    top:
        var(--ga-header);

    right:
        0;

    left:
        0;

    display:
        none;

    padding:
        15px 18px 22px;

    border-bottom:
        1px solid var(--ga-border);

    background:
        white;

    box-shadow:
        var(--ga-shadow-md);
}


.mobile-nav.open
{
    display:
        block;
}


.mobile-nav-links
{
    display:
        grid;
}


.mobile-nav-links a
{
    padding:
        13px 6px;

    border-bottom:
        1px solid var(--ga-border-light);

    color:
        var(--ga-text-secondary);

    font-size:
        14px;

    font-weight:
        750;
}


.mobile-nav-actions
{
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

    margin-top:
        17px;
}


/* =============================================================================
   9. HERO
   ============================================================================= */

.hero
{
    position:
        relative;

    padding:
        calc(var(--ga-header) + 57px)
        0
        72px;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #f8fbfc 0%,
            #edf5f8 70%,
            #f5f8fa 100%
        );
}


.hero::before
{
    content:
        "";

    position:
        absolute;

    top:
        40px;

    left:
        55%;

    width:
        800px;

    height:
        800px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 117, 147, 0.09),
            rgba(21, 117, 147, 0) 67%
        );

    pointer-events:
        none;
}


.hero-intro
{
    position:
        relative;

    z-index:
        2;

    max-width:
        920px;

    margin:
        0 auto 44px;

    text-align:
        center;
}


.hero-kicker
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;

    padding:
        7px 11px;

    border:
        1px solid #c7dce5;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.78);

    color:
        var(--ga-primary);

    font-size:
        12px;

    font-weight:
        820;
}


.hero-title
{
    margin-bottom:
        21px;

    color:
        var(--ga-text);

    font-size:
        clamp(
            45px,
            5.7vw,
            72px
        );

    font-weight:
        880;

    letter-spacing:
        -0.058em;
}


.hero-title span
{
    color:
        var(--ga-primary);
}


.hero-description
{
    max-width:
        800px;

    margin:
        0 auto 29px;

    color:
        var(--ga-text-secondary);

    font-size:
        19px;

    line-height:
        1.65;
}


.hero-actions,
.hero-proof,
.hero-proof-item
{
    display:
        flex;

    align-items:
        center;
}


.hero-actions
{
    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        27px;
}


.hero-proof
{
    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        10px 25px;

    color:
        #697f8a;

    font-size:
        12px;

    font-weight:
        670;
}


.hero-proof-item
{
    gap:
        7px;
}


.hero-proof-check
{
    color:
        var(--ga-primary);

    font-weight:
        900;
}


/* =============================================================================
   10. MAQUETTE DE L'APPLICATION V3
   ============================================================================= */

.v3-demo
{
    position:
        relative;

    z-index:
        2;

    padding:
        8px;

    border:
        1px solid #cbdce4;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.68);

    box-shadow:
        var(--ga-shadow-lg);
}


.v3-scroll
{
    width:
        100%;

    overflow-x:
        auto;

    border-radius:
        inherit;
}


.v3-app
{
    min-width:
        1020px;

    overflow:
        hidden;

    border:
        1px solid #c9dbe3;

    border-radius:
        13px;

    background:
        var(--ga-page);
}


/* -----------------------------------------------------------------------------
   BARRE SUPÉRIEURE
   ----------------------------------------------------------------------------- */

.v3-topbar
{
    display:
        grid;

    grid-template-columns:
        210px 1fr 260px;

    align-items:
        center;

    min-height:
        57px;

    padding:
        0 14px;

    border-bottom:
        1px solid #cddde4;

    background:
        #f8fbfc;
}


.v3-logo
{
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.v3-logo-main
{
    color:
        #153c4b;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1;
}


.v3-logo-sub
{
    margin-top:
        4px;

    color:
        #78909b;

    font-size:
        8px;

    font-weight:
        800;
}


.v3-main-menu,
.v3-account,
.v3-toolbar-left,
.v3-toolbar-right,
.v3-day-selector,
.v3-ephemerides
{
    display:
        flex;

    align-items:
        center;
}


.v3-main-menu
{
    justify-content:
        center;

    gap:
        4px;
}


.v3-menu-button
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        39px;

    padding:
        0 13px;

    border:
        1px solid transparent;

    border-radius:
        8px;

    color:
        #4d6874;

    font-size:
        10px;

    font-weight:
        800;
}


.v3-menu-button.active
{
    border-color:
        #c5d8e1;

    background:
        white;

    color:
        var(--ga-text);
}


.v3-menu-button.primary
{
    background:
        var(--ga-primary);

    color:
        white;
}


.v3-menu-button.admin
{
    color:
        #c34f5a;
}


.v3-account
{
    justify-content:
        flex-end;

    gap:
        7px;
}


.v3-balance
{
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        39px;

    padding:
        0 11px;

    border:
        1px solid #cadbe3;

    border-radius:
        8px;

    background:
        white;
}


.v3-balance-dot
{
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--ga-green);

    box-shadow:
        0 0 0 3px rgba(24, 130, 92, 0.12);
}


.v3-balance-label
{
    display:
        block;

    color:
        #81949e;

    font-size:
        6px;

    font-weight:
        800;

    line-height:
        1;
}


.v3-balance-value
{
    display:
        block;

    margin-top:
        2px;

    color:
        #173c4b;

    font-size:
        10px;

    font-weight:
        900;
}


.v3-icon-button
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        39px;

    height:
        39px;

    border:
        1px solid #cadbe3;

    border-radius:
        8px;

    background:
        white;

    color:
        #436775;

    font-size:
        15px;
}


.v3-icon-button.logout
{
    border-color:
        #efc7cb;

    background:
        #fff6f7;

    color:
        #c4515b;
}


/* -----------------------------------------------------------------------------
   BARRE D'OUTILS
   ----------------------------------------------------------------------------- */

.v3-toolbar
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        48px;

    padding:
        7px 15px;

    border-bottom:
        1px solid #cbdde5;

    background:
        #edf5f8;
}


.v3-toolbar-left,
.v3-toolbar-right
{
    gap:
        6px;
}


.v3-chip,
.v3-toggle
{
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    border:
        1px solid #c7d9e2;

    border-radius:
        7px;

    background:
        white;

    color:
        #365563;

    font-size:
        8px;

    font-weight:
        800;
}


.v3-chip
{
    padding:
        0 11px;
}


.v3-chip.active
{
    border-color:
        var(--ga-primary);

    background:
        var(--ga-primary);

    color:
        white;
}


.v3-toggle
{
    gap:
        8px;

    padding:
        0 10px;
}


.v3-toggle-switch
{
    position:
        relative;

    width:
        29px;

    height:
        16px;

    border-radius:
        999px;

    background:
        var(--ga-primary);
}


.v3-toggle-switch::after
{
    content:
        "";

    position:
        absolute;

    top:
        2px;

    right:
        2px;

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

    background:
        white;
}


/* -----------------------------------------------------------------------------
   JOUR ET ÉPHÉMÉRIDES
   ----------------------------------------------------------------------------- */

.v3-daybar
{
    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        15px;

    align-items:
        center;

    min-height:
        53px;

    padding:
        8px 15px;

    background:
        #edf5f8;
}


.v3-day-selector
{
    gap:
        5px;
}


.v3-day-arrow
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        34px;

    border:
        1px solid #bfd3dd;

    border-radius:
        7px;

    background:
        white;

    color:
        #53717e;
}


.v3-day-card
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        440px;

    min-height:
        34px;

    padding:
        0 10px;

    border:
        1px solid #bfd3dd;

    border-radius:
        7px;

    background:
        white;
}


.v3-day-title
{
    color:
        #183b49;

    font-size:
        9px;

    font-weight:
        900;
}


.v3-day-sub
{
    margin-top:
        2px;

    color:
        #81949e;

    font-size:
        6px;

    font-weight:
        700;
}


.v3-ephemerides
{
    gap:
        6px;
}


.v3-ephemeris
{
    min-width:
        158px;

    padding:
        7px 9px;

    border:
        1px solid #cfdee5;

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, 0.82);

    color:
        #496671;

    font-size:
        6.5px;
}


.v3-ephemeris strong
{
    color:
        #173c4b;
}


/* =============================================================================
   11. PLANNING DE DÉMONSTRATION
   ============================================================================= */

.v3-planning
{
    display:
        grid;

    grid-template-columns:
        165px 1fr;

    border-top:
        1px solid #bdd2dc;

    background:
        #e9eff2;
}


.v3-resources
{
    background:
        white;
}


.v3-resource-header,
.v3-instructor-header
{
    display:
        flex;

    align-items:
        center;

    padding:
        0 10px;

    font-size:
        7px;

    font-weight:
        900;
}


.v3-resource-header
{
    height:
        32px;

    border-right:
        1px solid #bcd1db;

    border-bottom:
        1px solid #bcd1db;

    background:
        #e9f3f6;

    color:
        #336377;

    letter-spacing:
        0.03em;
}


.v3-resource
{
    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    height:
        48px;

    padding:
        0 8px;

    border-right:
        1px solid #bdd1db;

    border-bottom:
        1px solid #cbd9df;

    background:
        white;
}


.v3-resource-name
{
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #173b49;

    font-size:
        8px;

    font-weight:
        900;
}


.v3-resource-status
{
    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--ga-green);
}


.v3-resource-status.warning
{
    background:
        #dc9128;
}


.v3-resource-detail
{
    margin-top:
        2px;

    color:
        #6f858f;

    font-size:
        5.5px;

    font-weight:
        650;
}


.v3-registration
{
    color:
        var(--ga-primary);

    font-size:
        6.5px;

    font-weight:
        900;
}


.v3-instructor-header
{
    justify-content:
        space-between;

    height:
        30px;

    border-right:
        1px solid #a9cbd8;

    border-bottom:
        1px solid #8bbdcd;

    background:
        #dff0f5;

    color:
        #176078;
}


.v3-instructor
{
    height:
        43px;

    padding:
        7px 8px;

    border-right:
        1px solid #bdd1db;

    border-bottom:
        1px solid #cbd9df;

    background:
        white;

    color:
        #173b49;

    font-size:
        7.5px;

    font-weight:
        900;
}


.v3-instructor span
{
    display:
        block;

    margin-top:
        3px;

    color:
        var(--ga-green);

    font-size:
        5.5px;

    font-weight:
        750;
}


/* -----------------------------------------------------------------------------
   GRILLE HORAIRE
   ----------------------------------------------------------------------------- */

.v3-grid
{
    position:
        relative;

    min-width:
        900px;
}


.v3-hours
{
    display:
        grid;

    grid-template-columns:
        repeat(17, 1fr);

    height:
        32px;

    border-bottom:
        1px solid #bdd1db;

    background:
        #e8f1f4;
}


.v3-hour
{
    display:
        flex;

    align-items:
        center;

    padding-left:
        6px;

    border-right:
        1px solid #bfd1d9;

    color:
        #2e5b6d;

    font-size:
        7px;

    font-weight:
        900;
}


.v3-grid-row
{
    position:
        relative;

    height:
        48px;

    border-bottom:
        1px solid #cedbe1;

    background-color:
        #eef2f4;

    background-image:
        linear-gradient(
            90deg,
            rgba(126, 152, 164, 0.24) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(126, 152, 164, 0.10) 1px,
            transparent 1px
        );

    background-size:
        calc(100% / 17) 100%,
        calc(100% / 34) 100%;
}


.v3-instructor-row
{
    height:
        43px;
}


.v3-grid-separator
{
    height:
        30px;

    border-bottom:
        1px solid #8cb9c8;

    background:
        #dff0f5;
}


/* -----------------------------------------------------------------------------
   JOUR / NUIT
   ----------------------------------------------------------------------------- */

.v3-night,
.v3-sunrise,
.v3-sunset
{
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    pointer-events:
        none;
}


.v3-night
{
    background:
        rgba(20, 53, 68, 0.78);
}


.v3-night.left
{
    left:
        0;

    width:
        6.5%;
}


.v3-night.right
{
    right:
        0;

    width:
        6%;
}


.v3-sunrise
{
    left:
        6.5%;

    width:
        2.8%;

    background:
        linear-gradient(
            90deg,
            rgba(28, 57, 70, 0.7),
            rgba(230, 161, 86, 0.76),
            rgba(255, 230, 175, 0.42)
        );
}


.v3-sunset
{
    right:
        6%;

    width:
        3%;

    background:
        linear-gradient(
            90deg,
            rgba(255, 244, 215, 0.22),
            rgba(40, 74, 90, 0.55)
        );
}


.v3-current-line
{
    position:
        absolute;

    z-index:
        5;

    top:
        0;

    bottom:
        0;

    left:
        94.5%;

    width:
        2px;

    background:
        #de3644;
}


/* -----------------------------------------------------------------------------
   RÉSERVATIONS
   ----------------------------------------------------------------------------- */

.v3-booking
{
    position:
        absolute;

    z-index:
        4;

    top:
        6px;

    height:
        36px;

    padding:
        4px 6px;

    overflow:
        hidden;

    border:
        1px solid #efc0ba;

    border-radius:
        6px;

    background:
        #f7b8b1;

    color:
        #4e2422;

    box-shadow:
        0 2px 5px rgba(83, 53, 49, 0.08);

    font-size:
        5.5px;

    line-height:
        1.15;
}


.v3-booking strong
{
    display:
        block;

    margin-bottom:
        2px;

    color:
        inherit;

    font-size:
        6.2px;
}


/* -----------------------------------------------------------------------------
   RÉSERVATIONS D'INSTRUCTION EXISTANTES

   Ces positions correspondent aux réservations de l'Ikarus C42 et à leur
   reproduction exacte sur la ligne de Xavier LEROY.
   ----------------------------------------------------------------------------- */

.v3-booking.b1
{
    left:
        13.2%;

    width:
        6%;
}


.v3-booking.b2
{
    left:
        19.3%;

    width:
        6%;
}


.v3-booking.b3
{
    left:
        60.3%;

    width:
        6%;
}


/* -----------------------------------------------------------------------------
   RÉSERVATION STANDARD AJOUTÉE SUR LE SD2
   ----------------------------------------------------------------------------- */

.booking-extra-standard
{
    left:
        36%;

    width:
        12%;

    border-color:
        #8acdd0;

    background:
        linear-gradient(
            135deg,
            #a5e0dc,
            #c2ece8
        );

    color:
        #174f4d;
}


/* -----------------------------------------------------------------------------
   VOL PARTAGÉ AJOUTÉ SUR LE TANARG
   ----------------------------------------------------------------------------- */

.booking-extra-shared
{
    left:
        50%;

    width:
        9%;

    padding-right:
        25px;

    border-color:
        #9bc876;

    background:
        linear-gradient(
            135deg,
            #c9e6b5,
            #def0ce
        );

    color:
        #355321;
}


.v3-booking-share-count
{
    position:
        absolute;

    top:
        4px;

    right:
        4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        18px;

    height:
        14px;

    padding:
        0 4px;

    border-radius:
        5px;

    background:
        #518832;

    color:
        white;

    font-size:
        5px;

    font-weight:
        900;
}


.v3-booking-subtitle
{
    display:
        block;

    margin-top:
        2px;

    opacity:
        0.82;
}


/* -----------------------------------------------------------------------------
   MAINTENANCE
   ----------------------------------------------------------------------------- */

.v3-maintenance
{
    position:
        absolute;

    z-index:
        3;

    top:
        0;

    right:
        6%;

    left:
        58%;

    height:
        48px;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(108, 118, 123, 0.20),
            rgba(108, 118, 123, 0.20) 8px,
            rgba(85, 94, 99, 0.30) 8px,
            rgba(85, 94, 99, 0.30) 12px
        );
}


.v3-maintenance-label
{
    position:
        absolute;

    z-index:
        4;

    top:
        11px;

    right:
        22%;

    color:
        #454f54;

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        0.04em;
}


/* =============================================================================
   12. BANDEAU DES CHIFFRES CLÉS
   ============================================================================= */

.proof-band
{
    padding:
        28px 0;

    border-top:
        1px solid var(--ga-border);

    border-bottom:
        1px solid var(--ga-border);

    background:
        white;
}


.proof-grid
{
    display:
        grid;

    grid-template-columns:
        1.2fr 1fr 1fr 1fr;

    gap:
        20px;
}


.proof-item
{
    position:
        relative;

    padding:
        5px 19px;
}


.proof-item:not(:first-child)
{
    border-left:
        1px solid var(--ga-border);
}


.proof-value
{
    margin-bottom:
        3px;

    color:
        var(--ga-primary);

    font-size:
        28px;

    font-weight:
        900;

    letter-spacing:
        -0.045em;
}


.proof-value--small
{
    font-size:
        18px;

    line-height:
        1.25;
}


.proof-label
{
    color:
        var(--ga-text-secondary);

    font-size:
        12px;

    line-height:
        1.45;
}


/* =============================================================================
   13. POSITIONNEMENT
   ============================================================================= */

.positioning
{
    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items:
        center;

    gap:
        70px;
}


.positioning-points
{
    display:
        grid;

    gap:
        12px;

    margin-top:
        26px;
}


.positioning-point
{
    display:
        grid;

    grid-template-columns:
        30px 1fr;

    gap:
        11px;

    align-items:
        flex-start;
}


.positioning-check
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        8px;

    background:
        var(--ga-green-soft);

    color:
        var(--ga-green);

    font-size:
        13px;

    font-weight:
        900;
}


.positioning-point strong
{
    display:
        block;

    margin-bottom:
        2px;

    font-size:
        14px;
}


.positioning-point span
{
    color:
        var(--ga-text-secondary);

    font-size:
        13px;
}


.positioning-visual
{
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        12px;
}


/* -----------------------------------------------------------------------------
   MINI MODULES
   ----------------------------------------------------------------------------- */

.mini-module
{
    min-height:
        155px;

    padding:
        21px;

    border:
        1px solid var(--ga-border);

    border-radius:
        var(--ga-radius);

    background:
        white;

    box-shadow:
        var(--ga-shadow-sm);
}


.mini-module:first-child
{
    grid-column:
        1 / -1;

    background:
        var(--ga-navy);

    color:
        white;
}


.mini-module-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    margin-bottom:
        16px;

    border-radius:
        10px;

    background:
        var(--ga-primary-soft);

    color:
        var(--ga-primary);
}


.mini-module:first-child .mini-module-icon
{
    background:
        rgba(255, 255, 255, 0.09);

    color:
        white;
}


.mini-module-title
{
    margin-bottom:
        6px;

    font-size:
        16px;

    font-weight:
        800;
}


.mini-module:first-child .mini-module-title
{
    color:
        white;
}


.mini-module-text
{
    margin:
        0;

    color:
        var(--ga-text-secondary);

    font-size:
        12px;

    line-height:
        1.55;
}


.mini-module:first-child .mini-module-text
{
    color:
        rgba(255, 255, 255, 0.68);
}


/* =============================================================================
   14. MODULES PRINCIPAUX
   ============================================================================= */

.module-nav
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-bottom:
        25px;
}


.module-nav-button
{
    min-height:
        39px;

    padding:
        0 13px;

    border:
        1px solid var(--ga-border);

    border-radius:
        9px;

    background:
        white;

    color:
        var(--ga-text-secondary);

    font-size:
        11px;

    font-weight:
        800;
}


.module-nav-button.active
{
    border-color:
        var(--ga-primary);

    background:
        var(--ga-primary);

    color:
        white;
}


.module-panels
{
    position:
        relative;
}


.module-panel
{
    display:
        none;

    grid-template-columns:
        0.75fr 1.25fr;

    gap:
        44px;

    min-height:
        440px;

    padding:
        38px;

    border:
        1px solid var(--ga-border);

    border-radius:
        var(--ga-radius-lg);

    background:
        white;

    box-shadow:
        var(--ga-shadow-md);
}


.module-panel.active
{
    display:
        grid;
}


.module-panel-label
{
    margin-bottom:
        9px;

    color:
        var(--ga-primary);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.module-panel-title
{
    margin-bottom:
        14px;

    font-size:
        31px;

    font-weight:
        850;
}


.module-panel-description
{
    margin-bottom:
        22px;

    color:
        var(--ga-text-secondary);

    font-size:
        14px;

    line-height:
        1.68;
}


.module-key
{
    padding:
        16px;

    border:
        1px solid #cde1e8;

    border-radius:
        12px;

    background:
        var(--ga-primary-softer);
}


.module-key-label
{
    margin-bottom:
        4px;

    color:
        var(--ga-primary);

    font-size:
        9px;

    font-weight:
        850;

    text-transform:
        uppercase;
}


.module-key strong
{
    font-size:
        13px;
}


.module-feature-list
{
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;
}


.module-feature
{
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        13px;

    border:
        1px solid var(--ga-border-light);

    border-radius:
        10px;

    background:
        #fafcfd;
}


.module-feature-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    border-radius:
        8px;

    background:
        var(--ga-primary-soft);

    color:
        var(--ga-primary);

    font-size:
        11px;

    font-weight:
        900;
}


.module-feature-title
{
    margin-bottom:
        2px;

    color:
        var(--ga-text);

    font-size:
        12px;

    font-weight:
        820;
}


.module-feature-text
{
    color:
        var(--ga-text-secondary);

    font-size:
        10.5px;

    line-height:
        1.45;
}


/* =============================================================================
   15. GRILLE DES CAPACITÉS
   ============================================================================= */

.capability-grid
{
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        14px;
}


.capability-card
{
    min-height:
        194px;

    padding:
        21px;

    border:
        1px solid var(--ga-border);

    border-radius:
        var(--ga-radius);

    background:
        white;

    transition:
        transform var(--ga-transition),
        box-shadow var(--ga-transition);
}


.capability-card:hover
{
    transform:
        translateY(-3px);

    box-shadow:
        var(--ga-shadow-md);
}


.capability-card-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    margin-bottom:
        16px;

    border-radius:
        10px;

    background:
        var(--ga-primary-soft);

    color:
        var(--ga-primary);
}


.capability-card:nth-child(2n) .capability-card-icon
{
    background:
        var(--ga-green-soft);

    color:
        var(--ga-green);
}


.capability-card:nth-child(3n) .capability-card-icon
{
    background:
        var(--ga-orange-soft);

    color:
        var(--ga-orange);
}


.capability-card:nth-child(4n) .capability-card-icon
{
    background:
        var(--ga-purple-soft);

    color:
        var(--ga-purple);
}


.capability-card-title
{
    margin-bottom:
        7px;

    font-size:
        15px;

    font-weight:
        820;
}


.capability-card-text
{
    margin:
        0;

    color:
        var(--ga-text-secondary);

    font-size:
        12px;

    line-height:
        1.6;
}


/* =============================================================================
   16. OPTIMISATION DE FLOTTE
   ============================================================================= */

.optimization-card
{
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        50px;

    align-items:
        center;

    padding:
        44px;

    border-radius:
        var(--ga-radius-lg);

    background:
        linear-gradient(
            135deg,
            #113a4a,
            #126c85
        );

    color:
        white;

    box-shadow:
        var(--ga-shadow-lg);
}


.optimization-card .eyebrow
{
    color:
        #98d0df;
}


.optimization-card h2
{
    margin-bottom:
        14px;

    color:
        white;

    font-size:
        36px;

    font-weight:
        850;
}


.optimization-card p
{
    margin-bottom:
        24px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        14px;

    line-height:
        1.7;
}


.optimization-points
{
    display:
        grid;

    gap:
        9px;
}


.optimization-point
{
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255, 255, 255, 0.86);

    font-size:
        12px;
}


.optimization-point span:first-child
{
    color:
        #a8e3c9;

    font-weight:
        900;
}


.optimization-visual
{
    padding:
        24px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, 0.075);
}


.optimization-label
{
    margin-bottom:
        19px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        9px;

    font-weight:
        850;

    text-transform:
        uppercase;
}


.optimization-row
{
    display:
        grid;

    grid-template-columns:
        95px 1fr 42px;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        13px;
}


.optimization-row:last-child
{
    margin-bottom:
        0;
}


.optimization-aircraft
{
    color:
        white;

    font-size:
        10px;

    font-weight:
        800;
}


.optimization-bar
{
    position:
        relative;

    height:
        11px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.10);
}


.optimization-reserved,
.optimization-flown
{
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    border-radius:
        inherit;
}


.optimization-reserved
{
    background:
        rgba(255, 255, 255, 0.25);
}


.optimization-flown
{
    background:
        #70d0ac;
}


.optimization-score
{
    color:
        white;

    text-align:
        right;

    font-size:
        10px;

    font-weight:
        850;
}


.optimization-legend
{
    display:
        flex;

    gap:
        17px;

    margin-top:
        20px;

    color:
        rgba(255, 255, 255, 0.60);

    font-size:
        8px;
}


.optimization-legend span
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;
}


.optimization-legend-dot
{
    width:
        8px;

    height:
        8px;

    border-radius:
        2px;

    background:
        rgba(255, 255, 255, 0.25);
}


.optimization-legend-dot.flown
{
    background:
        #70d0ac;
}


/* =============================================================================
   17. CLOUD GESTIONN'AIR
   ============================================================================= */

.cloud-layout
{
    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items:
        center;

    gap:
        60px;
}


.cloud-window
{
    overflow:
        hidden;

    border:
        1px solid #cbdce4;

    border-radius:
        18px;

    background:
        white;

    box-shadow:
        var(--ga-shadow-md);
}


.cloud-window-header
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        19px 21px;

    border-bottom:
        1px solid var(--ga-border);

    background:
        linear-gradient(
            180deg,
            #fbfdfe,
            #f5f9fa
        );
}


.cloud-window-title
{
    color:
        var(--ga-text);

    font-size:
        15px;

    font-weight:
        850;
}


.cloud-window-subtitle
{
    margin-top:
        3px;

    color:
        var(--ga-text-muted);

    font-size:
        9px;
}


.cloud-window-toolbar
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        10px 16px;

    border-bottom:
        1px solid var(--ga-border-light);

    background:
        #fafcfd;
}


.cloud-breadcrumb
{
    color:
        var(--ga-text-muted);

    font-size:
        9px;

    font-weight:
        700;
}


.cloud-action
{
    min-height:
        30px;

    padding:
        0 10px;

    border:
        1px solid #bcd5df;

    border-radius:
        7px;

    background:
        white;

    color:
        var(--ga-primary);

    font-size:
        9px;

    font-weight:
        850;
}


.cloud-file-list
{
    padding:
        7px 15px 13px;
}


.cloud-file
{
    display:
        grid;

    grid-template-columns:
        38px 1fr auto;

    align-items:
        center;

    gap:
        11px;

    min-height:
        62px;

    padding:
        9px 7px;

    border-bottom:
        1px solid var(--ga-border-light);
}


.cloud-file:last-child
{
    border-bottom:
        0;
}


.cloud-file-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    border-radius:
        9px;

    background:
        var(--ga-primary-soft);

    color:
        var(--ga-primary);

    font-size:
        14px;

    font-weight:
        900;
}


.cloud-file--document .cloud-file-icon
{
    background:
        var(--ga-red-soft);

    color:
        var(--ga-red);

    font-size:
        8px;
}


.cloud-file-content strong
{
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ga-text);

    font-size:
        11px;
}


.cloud-file-content span,
.cloud-file-meta
{
    color:
        var(--ga-text-muted);

    font-size:
        8px;
}


.cloud-file-meta
{
    font-weight:
        750;

    white-space:
        nowrap;
}


/* =============================================================================
   18. PAIEMENTS ET STRIPE
   ============================================================================= */

.payment-layout
{
    display:
        grid;

    grid-template-columns:
        0.88fr 1.12fr;

    align-items:
        center;

    gap:
        48px;
}


.stripe-explainer
{
    padding:
        27px;

    border:
        1px solid #cbdde5;

    border-radius:
        18px;

    background:
        var(--ga-primary-softer);

    box-shadow:
        var(--ga-shadow-sm);
}


.stripe-explainer-header
{
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        20px;
}


.stripe-explainer-title
{
    color:
        var(--ga-text);

    font-size:
        19px;

    font-weight:
        850;
}


.stripe-explainer-subtitle
{
    margin-top:
        4px;

    color:
        var(--ga-text-muted);

    font-size:
        10px;
}


.stripe-flow
{
    display:
        grid;

    gap:
        8px;
}


.stripe-flow-row
{
    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        18px;

    padding:
        13px 14px;

    border:
        1px solid var(--ga-border);

    border-radius:
        10px;

    background:
        white;
}


.stripe-flow-row strong
{
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ga-text);

    font-size:
        11px;
}


.stripe-flow-row span
{
    color:
        var(--ga-text-muted);

    font-size:
        9px;
}


.stripe-flow-row--total
{
    border-color:
        #b9d5df;

    background:
        #f9fcfd;
}


.stripe-flow-value
{
    color:
        var(--ga-primary);

    font-size:
        18px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.stripe-flow-value--positive
{
    color:
        var(--ga-green);
}


.stripe-flow-value--fee
{
    color:
        var(--ga-orange);
}


.stripe-summary
{
    margin-top:
        15px;

    padding:
        12px 14px;

    border-radius:
        10px;

    background:
        white;

    color:
        var(--ga-text-secondary);

    font-size:
        10px;

    line-height:
        1.55;
}


.stripe-summary strong
{
    color:
        var(--ga-text);
}


.stripe-information
{
    margin-top:
        13px;

    padding:
        12px 14px;

    border-left:
        3px solid var(--ga-orange);

    border-radius:
        0 9px 9px 0;

    background:
        var(--ga-orange-soft);

    color:
        #675a44;

    font-size:
        9px;

    line-height:
        1.58;
}


/* =============================================================================
   19. VOLDEO
   ============================================================================= */

.voldeo
{
    display:
        grid;

    grid-template-columns:
        1fr 0.9fr;

    align-items:
        center;

    gap:
        65px;
}


.voldeo-link
{
    display:
        grid;

    grid-template-columns:
        1fr 74px 1fr;

    align-items:
        center;

    gap:
        14px;
}


.voldeo-product
{
    padding:
        23px;

    border:
        1px solid var(--ga-border);

    border-radius:
        16px;

    background:
        white;

    box-shadow:
        var(--ga-shadow-sm);
}


.voldeo-product-name
{
    margin-bottom:
        5px;

    color:
        var(--ga-text);

    font-size:
        17px;

    font-weight:
        850;
}


.voldeo-product-text
{
    margin:
        0;

    color:
        var(--ga-text-secondary);

    font-size:
        11px;
}


.voldeo-bridge
{
    position:
        relative;

    height:
        2px;

    background:
        var(--ga-border);
}


.voldeo-bridge::before,
.voldeo-bridge::after
{
    content:
        "";

    position:
        absolute;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--ga-primary);

    transform:
        translateY(-50%);
}


.voldeo-bridge::before
{
    left:
        0;
}


.voldeo-bridge::after
{
    right:
        0;
}


/* =============================================================================
   20. VOLS PARTAGÉS
   ============================================================================= */

.share-layout
{
    display:
        grid;

    grid-template-columns:
        0.83fr 1.17fr;

    gap:
        45px;
}


.share-options
{
    display:
        grid;

    gap:
        12px;
}


.share-card
{
    padding:
        22px;

    border:
        1px solid var(--ga-border);

    border-radius:
        14px;

    background:
        white;
}


.share-card-header
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        9px;
}


.share-card-title
{
    margin:
        0;

    font-size:
        16px;

    font-weight:
        820;
}


.share-card p
{
    margin:
        0;

    color:
        var(--ga-text-secondary);

    font-size:
        12px;

    line-height:
        1.6;
}


.share-example
{
    padding:
        30px;

    border:
        1px solid #cddfe7;

    border-radius:
        17px;

    background:
        var(--ga-primary-softer);
}


.share-example-title
{
    margin-bottom:
        5px;

    font-size:
        18px;

    font-weight:
        850;
}


.share-example-sub
{
    margin-bottom:
        25px;

    color:
        var(--ga-text-secondary);

    font-size:
        12px;
}


.share-amount
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        15px;

    border:
        1px solid var(--ga-border);

    border-radius:
        11px;

    background:
        white;
}


.share-amount + .share-amount
{
    margin-top:
        8px;
}


.share-person
{
    color:
        var(--ga-text-secondary);

    font-size:
        11px;
}


.share-person strong
{
    display:
        block;

    color:
        var(--ga-text);

    font-size:
        13px;
}


.share-price
{
    color:
        var(--ga-primary);

    font-size:
        20px;

    font-weight:
        900;
}


.share-total
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        17px;

    padding-top:
        15px;

    border-top:
        1px solid var(--ga-border);

    color:
        var(--ga-text-secondary);

    font-size:
        11px;
}


.share-total strong
{
    color:
        var(--ga-text);

    font-size:
        15px;
}


.share-legal
{
    margin-top:
        19px;

    padding:
        12px 14px;

    border-left:
        3px solid var(--ga-primary);

    border-radius:
        0 9px 9px 0;

    background:
        #eaf4f7;

    color:
        #45616d;

    font-size:
        10px;

    line-height:
        1.55;
}


/* =============================================================================
   21. COMMUNAUTÉ
   ============================================================================= */

.community-card
{
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap:
        45px;

    overflow:
        hidden;

    padding:
        42px;

    border-radius:
        var(--ga-radius-lg);

    background:
        #123746;

    color:
        white;
}


.community-card::after
{
    content:
        "";

    position:
        absolute;

    right:
        -100px;

    bottom:
        -180px;

    width:
        500px;

    height:
        500px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        50%;
}


.community-card .eyebrow
{
    color:
        #97d4e4;
}


.community-title
{
    margin-bottom:
        13px;

    color:
        white;

    font-size:
        36px;

    font-weight:
        850;
}


.community-copy
{
    margin-bottom:
        20px;

    color:
        rgba(255, 255, 255, 0.67);

    font-size:
        14px;

    line-height:
        1.7;
}


.community-features
{
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;
}


.community-feature
{
    padding:
        14px;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.06);
}


.community-feature strong
{
    display:
        block;

    margin-bottom:
        3px;

    color:
        white;

    font-size:
        11px;
}


.community-feature span
{
    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        9px;

    line-height:
        1.4;
}


/* =============================================================================
   22. TUTORIELS
   ============================================================================= */

.tutorial-toolbar
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        25px;
}


.tutorial-search
{
    position:
        relative;

    width:
        min(390px, 100%);
}


.tutorial-search input
{
    width:
        100%;

    height:
        45px;

    padding:
        0 42px;

    outline:
        none;

    border:
        1px solid var(--ga-border);

    border-radius:
        10px;

    background:
        white;

    color:
        var(--ga-text);
}


.tutorial-search-icon
{
    position:
        absolute;

    top:
        50%;

    left:
        14px;

    color:
        #83969f;

    transform:
        translateY(-50%);
}


.tutorial-search-clear
{
    position:
        absolute;

    top:
        50%;

    right:
        8px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        7px;

    background:
        transparent;

    color:
        #738994;

    transform:
        translateY(-50%);
}


.tutorial-search-clear.visible
{
    display:
        flex;
}


.tutorial-filters
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.tutorial-filter
{
    min-height:
        37px;

    padding:
        0 12px;

    border:
        1px solid var(--ga-border);

    border-radius:
        8px;

    background:
        white;

    color:
        var(--ga-text-secondary);

    font-size:
        10px;

    font-weight:
        800;
}


.tutorial-filter.active
{
    border-color:
        var(--ga-primary);

    background:
        var(--ga-primary);

    color:
        white;
}


.tutorial-grid
{
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        15px;
}


.tutorial-card
{
    overflow:
        hidden;

    border:
        1px solid var(--ga-border);

    border-radius:
        14px;

    background:
        white;

    transition:
        transform var(--ga-transition),
        box-shadow var(--ga-transition);
}


.tutorial-card:hover
{
    transform:
        translateY(-3px);

    box-shadow:
        var(--ga-shadow-md);
}


.tutorial-card.hidden
{
    display:
        none;
}


.tutorial-cover
{
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        130px;

    background:
        linear-gradient(
            135deg,
            #deedf3,
            #f1f7fa
        );
}


.tutorial-cover.green
{
    background:
        linear-gradient(
            135deg,
            #dff0e8,
            #f1f8f5
        );
}


.tutorial-cover.orange
{
    background:
        linear-gradient(
            135deg,
            #faead4,
            #fff8ed
        );
}


.tutorial-cover.purple
{
    background:
        linear-gradient(
            135deg,
            #ece5f5,
            #f8f5fb
        );
}


.tutorial-cover::before
{
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(17, 109, 134, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17, 109, 134, 0.06) 1px,
            transparent 1px
        );

    background-size:
        22px 22px;
}


.tutorial-play
{
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        56px;

    height:
        56px;

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius:
        17px;

    background:
        rgba(255, 255, 255, 0.75);

    color:
        var(--ga-primary);

    box-shadow:
        var(--ga-shadow-sm);

    font-size:
        18px;
}


.tutorial-body
{
    padding:
        18px;
}


.tutorial-meta
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;

    color:
        var(--ga-text-muted);

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.tutorial-meta span:first-child
{
    color:
        var(--ga-primary);
}


.tutorial-title
{
    margin-bottom:
        7px;

    font-size:
        15px;

    font-weight:
        820;
}


.tutorial-description
{
    margin-bottom:
        13px;

    color:
        var(--ga-text-secondary);

    font-size:
        11px;

    line-height:
        1.55;
}


.tutorial-link
{
    color:
        var(--ga-primary);

    font-size:
        11px;

    font-weight:
        820;
}


.tutorial-no-result
{
    display:
        none;

    grid-column:
        1 / -1;

    padding:
        40px;

    border:
        1px dashed #c5d7df;

    border-radius:
        13px;

    color:
        var(--ga-text-secondary);

    text-align:
        center;
}


.tutorial-no-result.visible
{
    display:
        block;
}


/* =============================================================================
   23. TARIFICATION
   ============================================================================= */

.pricing-layout
{
    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap:
        28px;
}


.pricing-copy
{
    padding:
        37px;

    border-radius:
        var(--ga-radius-lg);

    background:
        var(--ga-navy);

    color:
        white;
}


.pricing-copy .eyebrow
{
    color:
        #a0d7e4;
}


.pricing-copy .section-title
{
    color:
        white;
}


.pricing-copy .section-description
{
    color:
        rgba(255, 255, 255, 0.65);
}


.pricing-copy-list
{
    display:
        grid;

    gap:
        10px;

    margin-top:
        25px;
}


.pricing-copy-item
{
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255, 255, 255, 0.83);

    font-size:
        12px;
}


.pricing-copy-item span:first-child
{
    color:
        #9fdfc5;

    font-weight:
        900;
}


.pricing-card
{
    padding:
        36px;

    border:
        1px solid #c9dde5;

    border-radius:
        var(--ga-radius-lg);

    background:
        white;

    box-shadow:
        var(--ga-shadow-md);
}


.pricing-card-head
{
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;
}


.pricing-name
{
    margin-bottom:
        5px;

    font-size:
        20px;

    font-weight:
        850;
}


.pricing-description
{
    color:
        var(--ga-text-muted);

    font-size:
        11px;
}


.pricing-price
{
    display:
        flex;

    align-items:
        flex-end;

    gap:
        5px;

    margin-bottom:
        5px;
}


.pricing-price strong
{
    color:
        var(--ga-primary);

    font-size:
        48px;

    font-weight:
        900;

    letter-spacing:
        -0.055em;

    line-height:
        1;
}


.pricing-price span
{
    padding-bottom:
        6px;

    color:
        var(--ga-text-muted);

    font-size:
        11px;
}


.pricing-list
{
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        9px;

    margin:
        25px 0;

    padding:
        0;

    list-style:
        none;
}


.pricing-list li
{
    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        var(--ga-text-secondary);

    font-size:
        11px;
}


.pricing-list li span
{
    color:
        var(--ga-green);

    font-weight:
        900;
}


.pricing-card .button
{
    width:
        100%;
}


.pricing-secure
{
    margin-top:
        11px;

    color:
        var(--ga-text-muted);

    text-align:
        center;

    font-size:
        9px;
}


/* =============================================================================
   24. FAQ
   ============================================================================= */

.faq-layout
{
    display:
        grid;

    grid-template-columns:
        300px 1fr;

    gap:
        55px;
}


.faq-intro
{
    position:
        sticky;

    top:
        calc(var(--ga-header) + 25px);

    align-self:
        start;
}


.faq-contact
{
    margin-top:
        22px;

    padding:
        17px;

    border:
        1px solid var(--ga-border);

    border-radius:
        12px;

    background:
        white;
}


.faq-contact strong
{
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        13px;
}


.faq-contact p
{
    margin-bottom:
        11px;

    color:
        var(--ga-text-secondary);

    font-size:
        11px;
}


.faq-list
{
    border-top:
        1px solid var(--ga-border);
}


.faq-item
{
    border-bottom:
        1px solid var(--ga-border);
}


.faq-question
{
    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        15px;

    width:
        100%;

    padding:
        19px 0;

    background:
        transparent;

    color:
        var(--ga-text);

    text-align:
        left;

    font-size:
        14px;

    font-weight:
        800;
}


.faq-plus
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border:
        1px solid var(--ga-border);

    border-radius:
        8px;

    color:
        var(--ga-primary);

    transition:
        transform var(--ga-transition),
        background var(--ga-transition);
}


.faq-item.open .faq-plus
{
    background:
        var(--ga-primary-soft);

    transform:
        rotate(45deg);
}


.faq-answer
{
    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows 230ms ease;
}


.faq-answer-inner
{
    min-height:
        0;

    overflow:
        hidden;
}


.faq-answer p
{
    max-width:
        800px;

    margin:
        0;

    padding:
        0 45px 19px 0;

    color:
        var(--ga-text-secondary);

    font-size:
        12px;

    line-height:
        1.65;
}


.faq-item.open .faq-answer
{
    grid-template-rows:
        1fr;
}


/* =============================================================================
   25. CONTACT
   ============================================================================= */

.contact-layout
{
    display:
        grid;

    grid-template-columns:
        0.78fr 1.22fr;

    gap:
        45px;
}


.contact-options
{
    display:
        grid;

    gap:
        10px;

    margin-top:
        25px;
}


.contact-option
{
    display:
        grid;

    grid-template-columns:
        39px 1fr;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px;

    border:
        1px solid var(--ga-border);

    border-radius:
        11px;

    background:
        white;
}


.contact-option-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        39px;

    height:
        39px;

    border-radius:
        9px;

    background:
        var(--ga-primary-soft);

    color:
        var(--ga-primary);
}


.contact-option strong
{
    display:
        block;

    margin-bottom:
        2px;

    font-size:
        12px;
}


.contact-option span
{
    color:
        var(--ga-text-muted);

    font-size:
        10px;
}


.contact-form-card
{
    padding:
        30px;

    border:
        1px solid var(--ga-border);

    border-radius:
        var(--ga-radius-lg);

    background:
        white;

    box-shadow:
        var(--ga-shadow-md);
}


.contact-form-title
{
    margin-bottom:
        4px;

    font-size:
        20px;

    font-weight:
        850;
}


.contact-form-sub
{
    margin-bottom:
        21px;

    color:
        var(--ga-text-muted);

    font-size:
        11px;
}


.form-grid
{
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        14px;
}


.form-group--full
{
    grid-column:
        1 / -1;
}


.form-label
{
    display:
        block;

    margin-bottom:
        6px;

    color:
        #455f6a;

    font-size:
        10px;

    font-weight:
        800;
}


.form-label span
{
    color:
        var(--ga-red);
}


.form-control
{
    width:
        100%;

    min-height:
        43px;

    padding:
        0 12px;

    outline:
        none;

    border:
        1px solid #d1dee4;

    border-radius:
        9px;

    background:
        #fafcfd;

    color:
        var(--ga-text);

    transition:
        border-color var(--ga-transition),
        box-shadow var(--ga-transition);
}


textarea.form-control
{
    min-height:
        130px;

    padding:
        11px 12px;

    resize:
        vertical;
}


.form-control:focus
{
    border-color:
        #7db1c4;

    box-shadow:
        0 0 0 4px rgba(17, 109, 134, 0.08);
}


.form-control.invalid
{
    border-color:
        #d78a91;
}


.form-error
{
    display:
        none;

    margin-top:
        4px;

    color:
        var(--ga-red);

    font-size:
        9px;
}


.form-error.visible
{
    display:
        block;
}


.form-footer
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        19px;
}


.form-privacy
{
    max-width:
        370px;

    margin:
        0;

    color:
        var(--ga-text-muted);

    font-size:
        9px;

    line-height:
        1.45;
}


.form-result
{
    display:
        none;

    margin-top:
        15px;

    padding:
        12px;

    border:
        1px solid var(--ga-green-border);

    border-radius:
        9px;

    background:
        var(--ga-green-soft);

    color:
        #356d57;

    font-size:
        10px;
}


.form-result.visible
{
    display:
        block;
}


/* =============================================================================
   26. CTA FINAL
   ============================================================================= */

.final-cta
{
    padding:
        0 0 85px;
}


.final-cta-card
{
    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        40px;

    padding:
        40px 44px;

    border-radius:
        var(--ga-radius-lg);

    background:
        linear-gradient(
            120deg,
            #0e3341,
            #12637b
        );

    color:
        white;

    box-shadow:
        var(--ga-shadow-lg);
}


.final-cta-title
{
    margin-bottom:
        7px;

    color:
        white;

    font-size:
        29px;

    font-weight:
        850;
}


.final-cta-text
{
    max-width:
        690px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        12px;

    line-height:
        1.6;
}


.final-cta-actions
{
    display:
        flex;

    gap:
        8px;
}


/* =============================================================================
   27. FOOTER
   ============================================================================= */

.site-footer
{
    padding:
        42px 0 24px;

    background:
        #0a2834;

    color:
        white;
}


/* -----------------------------------------------------------------------------
   ÉTAT OPÉRATIONNEL

   La couleur verte est ici utilisée à bon escient : elle indique réellement
   l'état de fonctionnement du service.
   ----------------------------------------------------------------------------- */

.footer-service-status
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        39px;

    padding:
        13px 15px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.045);
}


.footer-service-status-main
{
    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.footer-service-status-dot
{
    width:
        9px;

    height:
        9px;

    flex:
        0 0 9px;

    border-radius:
        50%;

    background:
        #42c88a;

    box-shadow:
        0 0 0 4px rgba(66, 200, 138, 0.12);
}


.footer-service-status-main strong
{
    display:
        block;

    color:
        white;

    font-size:
        11px;
}


.footer-service-status-main span
{
    display:
        block;

    margin-top:
        2px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size:
        8px;
}


.footer-service-status-link
{
    color:
        #a9dce9;

    font-size:
        9px;

    font-weight:
        800;
}


.footer-grid
{
    display:
        grid;

    grid-template-columns:
        1.5fr repeat(3, 1fr);

    gap:
        42px;

    padding-bottom:
        38px;
}


.footer-brand .brand-name
{
    color:
        white;
}


.footer-brand .brand-subtitle
{
    color:
        rgba(255, 255, 255, 0.42);
}


.footer-description
{
    max-width:
        350px;

    margin:
        18px 0 0;

    color:
        rgba(255, 255, 255, 0.52);

    font-size:
        11px;

    line-height:
        1.6;
}


.footer-title
{
    margin-bottom:
        13px;

    color:
        white;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.footer-links
{
    display:
        grid;

    gap:
        8px;
}


.footer-link
{
    padding:
        0;

    background:
        transparent;

    color:
        rgba(255, 255, 255, 0.57);

    font-size:
        11px;

    text-align:
        left;
}


.footer-link:hover
{
    color:
        white;
}


.footer-bottom
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding-top:
        20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    color:
        rgba(255, 255, 255, 0.39);

    font-size:
        9px;
}


/* =============================================================================
   28. NOTIFICATIONS TOAST
   ============================================================================= */

.toast-container
{
    position:
        fixed;

    z-index:
        3000;

    right:
        18px;

    bottom:
        18px;

    display:
        grid;

    gap:
        8px;

    width:
        min(
            360px,
            calc(100% - 36px)
        );

    pointer-events:
        none;
}


.toast
{
    padding:
        13px;

    border:
        1px solid var(--ga-border);

    border-radius:
        10px;

    background:
        white;

    box-shadow:
        var(--ga-shadow-md);

    color:
        var(--ga-text-secondary);

    font-size:
        10px;

    opacity:
        0;

    transform:
        translateY(10px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


.toast.visible
{
    opacity:
        1;

    transform:
        translateY(0);
}


.toast strong
{
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ga-text);

    font-size:
        11px;
}


/* =============================================================================
   29. ANIMATIONS D'APPARITION
   ============================================================================= */

[data-reveal]
{
    opacity:
        0;

    transform:
        translateY(17px);

    transition:
        opacity 570ms ease,
        transform 570ms ease;
}


[data-reveal].revealed
{
    opacity:
        1;

    transform:
        translateY(0);
}


/* =============================================================================
   30. RESPONSIVE — TABLETTES ET PETITS DESKTOPS
   ============================================================================= */

@media
(
    max-width: 1080px
)
{

    /* -------------------------------------------------------------------------
       HEADER
       ------------------------------------------------------------------------- */

    .site-nav
    {
        display:
            none;
    }


    .site-header-actions .button--secondary
    {
        display:
            none;
    }


    .menu-toggle
    {
        display:
            flex;
    }


    /* -------------------------------------------------------------------------
       CHIFFRES CLÉS
       ------------------------------------------------------------------------- */

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


    .proof-item:nth-child(3)
    {
        border-left:
            0;
    }


    /* -------------------------------------------------------------------------
       GRILLES QUI PASSENT SUR UNE COLONNE
       ------------------------------------------------------------------------- */

    .positioning,
    .optimization-card,
    .cloud-layout,
    .payment-layout,
    .voldeo,
    .share-layout,
    .community-card,
    .pricing-layout,
    .contact-layout
    {
        grid-template-columns:
            1fr;
    }


    .module-panel
    {
        grid-template-columns:
            1fr;
    }


    /* -------------------------------------------------------------------------
       CAPACITÉS ET TUTORIELS
       ------------------------------------------------------------------------- */

    .capability-grid,
    .tutorial-grid
    {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* -------------------------------------------------------------------------
       FOOTER
       ------------------------------------------------------------------------- */

    .footer-grid
    {
        grid-template-columns:
            1.4fr repeat(2, 1fr);
    }

}


/* =============================================================================
   31. RESPONSIVE — MOBILE
   ============================================================================= */

@media
(
    max-width: 760px
)
{

    :root
    {
        --ga-header:
            66px;
    }


    .container
    {
        width:
            min(
                calc(100% - 28px),
                var(--ga-container)
            );
    }


    .section
    {
        padding:
            70px 0;
    }


    /* -------------------------------------------------------------------------
       HEADER
       ------------------------------------------------------------------------- */

    .site-header-actions > .button
    {
        display:
            none;
    }


    /* -------------------------------------------------------------------------
       HERO
       ------------------------------------------------------------------------- */

    .hero
    {
        padding-top:
            calc(var(--ga-header) + 45px);
    }


    .hero-title
    {
        font-size:
            clamp(
                40px,
                12vw,
                55px
            );
    }


    .hero-description
    {
        font-size:
            16px;
    }


    .hero-actions
    {
        display:
            grid;

        grid-template-columns:
            1fr;

        max-width:
            440px;

        margin-right:
            auto;

        margin-left:
            auto;
    }


    .hero-actions .button
    {
        width:
            100%;
    }


    .v3-demo
    {
        margin-right:
            -14px;

        margin-left:
            -14px;

        border-radius:
            14px;
    }


    /* -------------------------------------------------------------------------
       CHIFFRES
       ------------------------------------------------------------------------- */

    .proof-grid
    {
        grid-template-columns:
            1fr 1fr;
    }


    .proof-item
    {
        padding:
            9px 10px;
    }


    .proof-item:not(:first-child)
    {
        border-left:
            0;
    }


    .proof-item:nth-child(even)
    {
        border-left:
            1px solid var(--ga-border);
    }


    /* -------------------------------------------------------------------------
       POSITIONNEMENT
       ------------------------------------------------------------------------- */

    .positioning-visual
    {
        grid-template-columns:
            1fr;
    }


    .mini-module:first-child
    {
        grid-column:
            auto;
    }


    /* -------------------------------------------------------------------------
       MODULES
       ------------------------------------------------------------------------- */

    .module-nav
    {
        flex-wrap:
            nowrap;

        margin-right:
            -14px;

        margin-left:
            -14px;

        padding:
            0 14px 5px;

        overflow-x:
            auto;
    }


    .module-nav-button
    {
        min-width:
            max-content;
    }


    .module-panel
    {
        padding:
            24px;
    }


    .module-feature-list,
    .capability-grid,
    .community-features,
    .pricing-list,
    .tutorial-grid
    {
        grid-template-columns:
            1fr;
    }


    /* -------------------------------------------------------------------------
       CARTES SOMBRES
       ------------------------------------------------------------------------- */

    .optimization-card,
    .community-card
    {
        padding:
            28px 22px;
    }


    /* -------------------------------------------------------------------------
       CLOUD
       ------------------------------------------------------------------------- */

    .cloud-window-header,
    .cloud-window-toolbar
    {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .cloud-file
    {
        grid-template-columns:
            36px 1fr;
    }


    .cloud-file-meta
    {
        grid-column:
            2;

        margin-top:
            -5px;
    }


    /* -------------------------------------------------------------------------
       STRIPE
       ------------------------------------------------------------------------- */

    .stripe-explainer
    {
        padding:
            22px;
    }


    .stripe-explainer-header
    {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .stripe-flow-row
    {
        grid-template-columns:
            1fr auto;
    }


    /* -------------------------------------------------------------------------
       VOLDEO
       ------------------------------------------------------------------------- */

    .voldeo-link
    {
        grid-template-columns:
            1fr;
    }


    .voldeo-bridge
    {
        width:
            2px;

        height:
            35px;

        margin:
            0 auto;
    }


    .voldeo-bridge::before
    {
        top:
            0;

        left:
            50%;

        transform:
            translate(-50%, -50%);
    }


    .voldeo-bridge::after
    {
        top:
            auto;

        right:
            auto;

        bottom:
            0;

        left:
            50%;

        transform:
            translate(-50%, 50%);
    }


    /* -------------------------------------------------------------------------
       TUTORIELS
       ------------------------------------------------------------------------- */

    .tutorial-toolbar
    {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    /* -------------------------------------------------------------------------
       FAQ
       ------------------------------------------------------------------------- */

    .faq-layout
    {
        grid-template-columns:
            1fr;
    }


    .faq-intro
    {
        position:
            static;
    }


    /* -------------------------------------------------------------------------
       FORMULAIRE
       ------------------------------------------------------------------------- */

    .form-grid
    {
        grid-template-columns:
            1fr;
    }


    .form-group--full
    {
        grid-column:
            auto;
    }


    .form-footer
    {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .form-footer .button
    {
        width:
            100%;
    }


    /* -------------------------------------------------------------------------
       CTA
       ------------------------------------------------------------------------- */

    .final-cta-card
    {
        grid-template-columns:
            1fr;

        padding:
            31px 24px;
    }


    /* -------------------------------------------------------------------------
       FOOTER
       ------------------------------------------------------------------------- */

    .footer-service-status
    {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .footer-grid
    {
        grid-template-columns:
            1fr 1fr;
    }


    .footer-brand
    {
        grid-column:
            1 / -1;
    }


    .footer-bottom
    {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =============================================================================
   32. RESPONSIVE — PETITS MOBILES
   ============================================================================= */

@media
(
    max-width: 480px
)
{

    .brand-subtitle
    {
        display:
            none;
    }


    .hero-proof
    {
        align-items:
            center;

        flex-direction:
            column;
    }


    .proof-grid
    {
        grid-template-columns:
            1fr;
    }


    .proof-item:nth-child(even)
    {
        border-left:
            0;
    }


    .proof-item + .proof-item
    {
        border-top:
            1px solid var(--ga-border);
    }


    .optimization-row
    {
        grid-template-columns:
            75px 1fr 35px;
    }


    .stripe-flow-row
    {
        grid-template-columns:
            1fr;
    }


    .stripe-flow-value
    {
        font-size:
            20px;
    }


    .share-amount
    {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .final-cta-actions
    {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .footer-grid
    {
        grid-template-columns:
            1fr;
    }


    .footer-brand
    {
        grid-column:
            auto;
    }

}


/* =============================================================================
   33. ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ============================================================================= */

@media
(
    prefers-reduced-motion: reduce
)
{

    html
    {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after
    {
        animation-duration:
            0.01ms !important;

        transition-duration:
            0.01ms !important;
    }


    [data-reveal]
    {
        opacity:
            1;

        transform:
            none;
    }

}