/* ==========================================================================
   Footer redesign — CSS extrait de homepage.css (blocs .ftr + .p2-*).
   Scopé (aucun reset global) -> chargé sur TOUT le site pour le footer global.
   ========================================================================== */

/* ---------- bloc style #10 ---------- */
        .ftr {
            --lime: #c2ee45;
            --lime-bright: #cdf24f;
            --dark: #0a1f0d;
            --line: rgba(255, 255, 255, .12);
            --muted: #aebaa9;
            --white: #ffffff;
        }

        .ftr :where(*) {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .ftr {
            font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
            background: #f1f3ef;
            color: var(--white);
            line-height: 1.5;
            padding: clamp(20px, 3vw, 36px) clamp(18px, 5vw, 40px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .ftr .footer {
            width: 100%;
            max-width: 1820px;
            background: #8e1d36;
            border-radius: 26px;
            padding: 56px 60px 30px;
        }

        .foot-cta {
            position: relative;
            z-index: 3;
            width: min(1400px, 92%);
            margin: 30px auto -55px;
            display: flex;
            align-items: stretch;
            background: #0f8b82;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .45);
        }

        .foot-cta-text {
            flex: 1 1 100%;
            padding: 30px 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 12px;
            color: #fff;
        }

        .foot-cta-eyebrow {
            align-self: flex-start;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, .16);
            padding: 6px 14px;
            border-radius: 40px;
        }

        .foot-cta h2 {
            font-size: 26px;
            line-height: 1.15;
            font-weight: 800;
            color: #fff;
            margin: 0;
        }

        .foot-cta-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 4px;
        }

        .foot-cta .cta-item {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 15px;
            color: rgba(255, 255, 255, .94);
        }

        .foot-cta .cta-item svg {
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
        }

        .foot-cta-btn {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: 8px;
            background: #0a1f1c;
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            padding: 8px 8px 8px 26px;
            border-radius: 40px;
            transition: transform .2s;
        }

        .foot-cta-btn:hover {
            transform: translateY(-2px);
        }

        .foot-cta-btn .cta-arrow {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #fff;
            color: #0a1f1c;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .foot-cta-btn .cta-arrow svg {
            width: 17px;
            height: 17px;
        }

        .foot-cta-img {
            flex: 1 1 48%;
            min-height: 170px;
        }

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

        @media (max-width: 860px) {
            .foot-cta {
                flex-direction: column;
            }

            .foot-cta-img {
                min-height: 160px;
            }
        }

        .ftr .contact .socials a.soc-wa {
            background: #25D366;
            color: #fff;
        }

        .ftr .contact .socials a.soc-wa i {
            color: #fff;
        }

        .ftr .contact .socials a.soc-tv,
        .ftr .contact .socials a.soc-radio,
        .ftr .contact .socials a.soc-news,
        .ftr .contact .socials a.soc-lib {
            background: #1aa23c;
            color: #fff;
        }

        .ftr .contact .socials a.soc-tv i,
        .ftr .contact .socials a.soc-radio i,
        .ftr .contact .socials a.soc-news i,
        .ftr .contact .socials a.soc-lib i {
            color: #fff;
        }

        .ftr .top {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
            padding-bottom: 42px;
            border-bottom: 1px solid var(--line);
        }

        .ftr .brand {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .ftr .brand .logo {
            /* width: 74px;
            height: 74px;
            border-radius: 18px;
            background: var(--lime); */
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .ftr .brand .logo svg {
            width: 38px;
            height: 38px;
            color: var(--dark);
        }

        .ftr .brand .name {
            font-size: 34px;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            letter-spacing: -0.01em;
        }

        .ftr .brand .tag {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            margin-top: 6px;
        }

        .ftr .news {}

        .ftr .news h3 {
            font-size: 26px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.01em;
            margin-bottom: 22px;
        }

        .ftr .news .row {
            display: flex;
            align-items: center;
            background: transparent;
            border: 1.5px solid var(--lime);
            border-radius: 50px;
            padding: 8px 8px 8px 28px;
        }

        .ftr .news input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-family: inherit;
            font-size: 17px;
            padding: 14px 8px;
        }

        .ftr .news input::placeholder {
            color: #cfd6cb;
        }

        .ftr .news button {
            background: #EDC006;
            color: var(--dark);
            border: none;
            border-radius: 50px;
            padding: 16px 34px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s;
        }

        .ftr .news button:hover {
            background: var(--lime-bright);
        }

        .ftr .cols {
            display: grid;
            grid-template-columns: 1.25fr 1fr 1.15fr 1.2fr;
            gap: 40px;
            padding: 46px 0;
            border-bottom: 1px solid var(--line);
        }

        .ftr .about p {
            font-size: 26px;
            font-weight: 800;
            line-height: 1.6;
            color: #fff;
            letter-spacing: -0.01em;
            max-width: 380px;
        }

        .ftr .contact .socials {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 18px;
        }

        .ftr .contact .socials a {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #EDC006;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dark);
            margin-bottom: 0;
            transition: transform .3s ease, box-shadow .3s ease;
        }

        .ftr .contact .socials a:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
        }

        .ftr .contact .socials a.soc-fb {
            background: #1877F2;
            color: #fff;
        }

        .ftr .contact .socials a.soc-fb i {
            color: #fff;
        }

        .ftr .contact .socials a.soc-x {
            background: #000000;
            color: #fff;
        }

        .ftr .contact .socials a.soc-x i {
            color: #fff;
        }

        .ftr .contact .socials a.soc-ig {
            background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
            color: #fff;
        }

        .ftr .contact .socials a.soc-ig i {
            color: #fff;
        }

        .ftr .contact .socials a.soc-li {
            background: #0A66C2;
            color: #fff;
        }

        .ftr .contact .socials a.soc-li i {
            color: #fff;
        }

        .ftr .contact .socials a.soc-yt {
            background: #FF0000;
            color: #fff;
        }

        .ftr .contact .socials a.soc-yt i {
            color: #fff;
        }

        .ftr .contact .socials svg {
            width: 22px;
            height: 22px;
        }

        .ftr .contact .socials a i {
            font-size: 20px;
            line-height: 1;
            color: var(--dark);
        }


        .ftr .col h4 {
            color: white;
            font-size: 21px;
            font-weight: 700;
            margin-bottom: 22px;
        }

        .ftr .col a {
            display: block;
            color: #e7ede5;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            margin-bottom: 16px;
            transition: color .2s;
        }

        .ftr .col a:hover {
            color: white;
        }

        .ftr .contact .item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 22px;
        }

        .ftr .contact .item .ic {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            flex: 0 0 auto;
            display: flex;
            /* align-items: center; */
            justify-content: center;
            color: #EDC006;
        }

        .ftr .contact .item .ic svg {
            width: 22px;
            height: 22px;
        }

        .ftr .contact .item .txt {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.35;
        }

        .ftr .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 26px;
            gap: 20px;
            flex-wrap: wrap;
        }

        .ftr .bottom .copy {
            color: #cfd6cb;
            font-size: 15px;
            font-weight: 500;
        }

        .ftr .bottom .legal {
            display: flex;
            align-items: center;
            gap: 22px;
        }

        .ftr .bottom .legal a {
            color: #e7ede5;
            font-size: 15px;
            text-decoration: none;
        }

        .ftr .bottom .legal a:hover {
            color: var(--lime);
        }

        .ftr .bottom .legal .sep {
            color: rgba(255, 255, 255, .3);
        }

        @media (max-width:1100px) {
            .ftr .top {
                grid-template-columns: 1fr;
                gap: 36px;
            }

            .ftr .cols {
                grid-template-columns: 1fr 1fr;
                gap: 40px 30px;
            }
        }

        @media (max-width:660px) {
            .ftr {
                padding: 16px;
            }

            .ftr .footer {
                padding: 36px 24px 24px;
                border-radius: 20px;
            }

            .ftr .news .row {
                flex-direction: column;
                align-items: stretch;
                padding: 14px;
                gap: 12px;
                border-radius: 18px;
            }

            .ftr .news button {
                border-radius: 14px;
            }

            .ftr .cols {
                grid-template-columns: 1fr;
            }

            .ftr .about p {
                font-size: 22px;
            }

            .ftr .bottom {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    


/* ---------- bloc style #24 ---------- */
        .p2-hero {
            width: 100%;
            max-width: 1820px;
            margin: 0 auto 34px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            align-items: stretch;
        }

        .p2-left {
            background: #8e1d36;
            border-radius: 24px;
            padding: 46px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 18px;
        }

        .p2-badge {
            align-self: flex-start;
            background: rgba(255, 255, 255, .16);
            border-radius: 40px;
            padding: 6px 16px;
            font-size: 12px;
            letter-spacing: .06em;
            font-weight: 700;
            text-transform: uppercase;
        }

        .p2-left h2 {
            font-size: 40px;
            line-height: 1.08;
            font-weight: 800;
            color: #fff;
            margin: 0;
        }

        .p2-left h2 span {
            color: #EDC006;
        }

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

        .p2-item {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 15px;
            color: rgba(255, 255, 255, .92);
        }

        .p2-item svg {
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
        }

        .p2-socials {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 4px;
        }

        .p2-socials a {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: #1aa23c;
            transition: transform .2s;
            text-decoration: none;
        }

        .p2-socials a:hover {
            transform: translateY(-2px);
        }

        .p2-socials a i {
            font-size: 18px;
            color: #fff;
        }

        .p2-socials a.soc-fb {
            background: #1877F2;
        }

        .p2-socials a.soc-li {
            background: #0A66C2;
        }

        .p2-socials a.soc-x {
            background: #000000;
        }

        .p2-socials a.soc-yt {
            background: #FF0000;
        }

        .p2-socials a.soc-wa {
            background: #25D366;
        }

        .p2-btn {
            align-self: flex-start;
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #EDC006;
            color: #10210f;
            text-decoration: none;
            font-weight: 700;
            padding: 14px 12px 14px 26px;
            border-radius: 40px;
        }


        .p2-btn:hover {
            background: #1AA23C;
            color: #fff;
            transform: translateY(-1px);
        }


        .p2-btn .p2-arrow {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #10210f;
            color: #EDC006;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .p2-right {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            min-height: 420px;
        }

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

        .p2-states {
            position: absolute;
            left: 18px;
            bottom: 18px;
            background: #fff;
            border-radius: 16px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4);
        }

        .p2-states strong {
            font-size: 34px;
            color: #1aa23c;
            line-height: 1;
        }

        .p2-states span {
            font-size: 13px;
            color: #10210f;
            font-weight: 600;
            max-width: 110px;
        }

        @media (max-width: 820px) {
            .p2-hero {
                grid-template-columns: 1fr;
            }

            .p2-right {
                min-height: 280px;
            }
        }

/* --- Section 11 (Footer) : dimensionner les icônes SVG sociales (inline, sans Font Awesome) --- */
.ftr .p2-socials a svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   BLINDAGE pages internes (CIBLÉ) : on corrige UNIQUEMENT les conflits réels
   avec le CSS du thème (Bootstrap, theme.css), via une spécificité .ftr .X.
   IMPORTANT : PAS de reset global « .ftr * » -> il écrasait les blocs .p2-*
   (classes simples, même spécificité) et faisait s'effondrer le CTA.
   Bootstrap pose déjà box-sizing:border-box globalement.
   ========================================================================== */

.ftr a { text-decoration: none; }
.ftr img { max-width: 100%; }

/* Logo : c'est un <img> (pas un <svg>) — même hauteur que la home (.gl-logo-img) */
.ftr .brand .logo img {
    height: 70px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Newsletter : le <h1> "Newsletter" n'avait AUCUNE règle -> le h1 du thème
   s'appliquait (noir / grande taille). On force le style du design. */
.ftr .news h1 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ftr .news h3 { color: #fff; }

/* Newsletter : champ + bouton sur UNE ligne. Le thème force input/button en
   width:100% et Bootstrap .row en flex-wrap:wrap -> le bouton prenait tout /
   passait dessous. On rétablit le comportement du design. */
.ftr .news .row {
    flex-wrap: nowrap;
    margin: 0;
}

.ftr .news input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.ftr .news button {
    flex: 0 0 auto;
    width: auto;
}

/* Bootstrap ajoute une gouttière (padding) à .col -> on l'annule dans le footer */
.ftr .cols .col {
    max-width: none;
    padding: 0;
}

/* Bootstrap p { margin-bottom:1rem } -> paragraphes du footer à plat */
.ftr .about p,
.ftr .bottom .copy,
.ftr .bottom p {
    margin: 0;
}

.ftr .col a { text-decoration: none; }

/* ==========================================================================
   Ajustements de tailles — bloc #13 de homepage.css (resync design).
   Écrase les tailles de base du bloc #10 -> tailles EXACTES de la home.
   ========================================================================== */
        .ftr .brand .name {
            font-size: 28px;
        }

        .ftr .brand .tag {
            font-size: 12px;
        }

        .ftr .news h3 {
            font-size: 22px;
            margin-bottom: 18px;
        }

        .ftr .news input {
            font-size: 15px;
            padding: 12px 8px;
        }

        .ftr .news button {
            font-size: 15px;
            padding: 14px 30px;
        }

        .ftr .about p {
            font-size: 22px;
        }

        .ftr .col h4 {
            font-size: 21px;
            margin-bottom: 18px;
        }

        .ftr .col a {
            font-size: 17px;
            margin-bottom: 14px;
        }

        .ftr .contact .item .txt {
            font-size: 18px;
        }

        .ftr .bottom .copy {
            font-size: 14px;
        }

        .ftr .bottom .legal a {
            font-size: 14px;
        }

/* ==========================================================================
   Boutons flottants (.fabw) — extrait de homepage.css. Chargé GLOBALEMENT
   (fab réseaux sociaux + back-to-top sur tout le site). Scopé .fabw.
   ========================================================================== */
        .fabw {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 300;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
        }

        .fabw .fab-b {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            color: #fff;
            background: #1aa23c;
            box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
            transition: transform .25s cubic-bezier(.22, .61, .36, 1), background .25s, opacity .3s;
            text-decoration: none;
            padding: 0;
        }

        /* boutons sociaux extensibles au survol */
        .fabw .fab-soc {
            width: auto;
            min-width: 50px;
            border-radius: 26px;
            overflow: hidden;
            flex-direction: row-reverse;
            justify-content: flex-start;
            padding: 0;
        }

        .fabw .fab-soc.sm {
            min-width: 44px;
            border-radius: 23px;
        }

        .fabw .fab-soc .fab-ic {
            width: 50px;
            height: 50px;
            flex: 0 0 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fabw .fab-soc.sm .fab-ic {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
        }

        .fabw .fab-soc .fab-lbl {
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            white-space: nowrap;
            font-weight: 700;
            font-size: 14px;
            padding: 0;
            transition: max-width .32s cubic-bezier(.22, .61, .36, 1), opacity .25s, padding .3s;
        }

        .fabw .fab-soc:hover {
            transform: translateY(-2px);
            background: #0c6b2a;
        }

        .fabw .fab-soc:hover .fab-lbl {
            max-width: 180px;
            opacity: 1;
            padding: 0 4px 0 18px;
        }

        .fabw .fab-b:hover {
            background: #0c6b2a;
            transform: translateY(-2px);
        }

        /* Couleurs de marque des réseaux sociaux (inspirées du footer) */
        .fabw .fab-fb {
            background: #1877F2;
        }

        .fabw .fab-fb:hover {
            background: #0f5ecb;
        }

        .fabw .fab-li {
            background: #0A66C2;
        }

        .fabw .fab-li:hover {
            background: #084e95;
        }

        .fabw .fab-x {
            background: #000000;
        }

        .fabw .fab-x:hover {
            background: #262626;
        }

        .fabw .fab-yt {
            background: #FF0000;
        }

        .fabw .fab-yt:hover {
            background: #cc0000;
        }

        .fabw .fab-wa {
            background: #25D366;
        }

        .fabw .fab-wa:hover {
            background: #1da851;
        }

        .fabw .fab-b svg {
            width: 21px;
            height: 21px;
        }

        .fabw .fab-b.sm {
            width: 44px;
            height: 44px;
        }

        .fabw .fab-b.fab-soc {
            width: auto;
        }

        .fabw .fab-b.sm svg {
            width: 18px;
            height: 18px;
        }

        .fabw .fab-toggle {
            background: #edc006;
            color: #141414;
        }

        .fabw .fab-toggle:hover {
            background: #edc006;
        }

        .fabw .fab-toggle svg {
            transition: transform .35s cubic-bezier(.22, .61, .36, 1);
        }

        .fabw.open .fab-toggle svg {
            transform: rotate(135deg);
        }

        .fabw .fab-back {
            background: #0c6b2a;
        }

        .fabw .fab-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height .42s cubic-bezier(.22, .61, .36, 1), opacity .3s;
        }

        .fabw.open .fab-actions {
            overflow: visible;
        }

        .fabw.open .fab-actions {
            max-height: 720px;
            opacity: 1;
        }

        .fabw .fab-actions .fab-b {
            transform: translateY(12px) scale(.6);
            opacity: 0;
            transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s, background .25s;
        }

        .fabw.open .fab-actions .fab-b {
            transform: none;
            opacity: 1;
        }

        .fabw.open .fab-actions .fab-b:nth-child(1) {
            transition-delay: .05s
        }

        .fabw.open .fab-actions .fab-b:nth-child(2) {
            transition-delay: .09s
        }

        .fabw.open .fab-actions .fab-b:nth-child(3) {
            transition-delay: .13s
        }

        .fabw.open .fab-actions .fab-b:nth-child(4) {
            transition-delay: .17s
        }

        .fabw.open .fab-actions .fab-b:nth-child(5) {
            transition-delay: .21s
        }

        .fabw.open .fab-actions .fab-b:nth-child(6) {
            transition-delay: .25s
        }

        .fabw.open .fab-actions .fab-b:nth-child(7) {
            transition-delay: .29s
        }

        .fabw.open .fab-actions .fab-b:nth-child(8) {
            transition-delay: .33s
        }

        .fabw.open .fab-actions .fab-b:nth-child(9) {
            transition-delay: .37s
        }

        .fabw .fab-back {
            opacity: 0;
            pointer-events: none;
            transform: translateY(8px);
            transition: opacity .3s, transform .3s, background .25s;
        }

        .fabw.show-top .fab-back {
            opacity: 1;
            pointer-events: auto;
            transform: none;
        }

        @media (max-width: 600px) {
            .fabw {
                right: 16px;
                bottom: 16px;
                gap: 10px;
            }

            .fabw .fab-b {
                width: 46px;
                height: 46px;
            }

            .fabw .fab-b.sm {
                width: 42px;
                height: 42px;
            }
        }
    

        @keyframes fabBeat {

            0%,
            100% {
                transform: scale(1);
            }

            12% {
                transform: scale(1.14);
            }

            24% {
                transform: scale(1);
            }

            36% {
                transform: scale(1.09);
            }

            50% {
                transform: scale(1);
            }
        }

        @keyframes fabRing {
            0% {
                box-shadow: 0 8px 22px rgba(0, 0, 0, .25), 0 0 0 0 rgba(237, 192, 6, .55);
            }

            70% {
                box-shadow: 0 8px 22px rgba(0, 0, 0, .25), 0 0 0 16px rgba(237, 192, 6, 0);
            }

            100% {
                box-shadow: 0 8px 22px rgba(0, 0, 0, .25), 0 0 0 0 rgba(237, 192, 6, 0);
            }
        }

        .fabw .fab-toggle {
            animation: fabBeat 2.4s ease-in-out infinite, fabRing 2.4s ease-out infinite;
        }

        .fabw .fab-toggle:hover {
            animation-play-state: paused;
        }

        @media (prefers-reduced-motion: reduce) {
            .fabw .fab-toggle {
                animation: none;
            }
        }