@charset "UTF-8"; .mfb-footer{--vd:#0d1b3e;--vp:#17236f;--vl:#5D52F6;--vlx:#8059FA;--vlight:#a89cff;--vlighter:#c4b5fd;--vlightest:#e0d4ff;font-family:'Outfit',-apple-system,sans-serif;background:linear-gradient(150deg,#0b1638 0%,#15205f 52%,#1b2870 100%);color:#fff;border-radius:34px;max-width:1440px;margin:80px auto 28px;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 40px 90px -40px rgba(13,27,62,.55);content-visibility:auto;contain-intrinsic-size:0 1400px} .mfb-footer::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 50% at 100% 0%,rgba(96,140,255,.30) 0%,transparent 68%),radial-gradient(55% 45% at 0% 100%,rgba(128,89,250,.24) 0%,transparent 70%)} /* Layer SVG signature MFB (filigrane decoratif, iso maquette preview-footer-v6). Purement visuel : aria-hidden + pointer-events:none, derriere le contenu (.mfb-footer__inner est en z-index:1). */ .mfb-footer__layer{position:absolute;right:-70px;top:-60px;width:440px;height:440px;opacity:.05;pointer-events:none;color:#fff;z-index:0} .mfb-footer__layer svg{width:100%;height:100%;display:block} .mfb-footer__inner{position:relative;z-index:1;padding:0 76px} .mfb-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.13);border-radius:50px;padding:8px 16px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--vlighter)} .mfb-eyebrow svg{width:14px;height:14px;color:var(--vlight)} .mfb-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--vl);box-shadow:0 0 0 4px rgba(93,82,246,.25)} .mfb-footer__cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:48px 56px;border-radius:24px;background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);margin-top:56px;overflow:hidden} .mfb-footer__cta-text{position:relative;max-width:620px} .mfb-footer__cta-text .mfb-ft-h2{font-size:30px;font-weight:800;line-height:1.18;letter-spacing:-.5px;margin:16px 0 10px;color:#fff} .mfb-footer__cta-text .mfb-ft-h2 em{font-style:normal;background:linear-gradient(90deg,var(--vlighter),var(--vlightest));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .mfb-footer__cta-text p{font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.6} .mfb-footer__cta-actions{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .mfb-btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;text-decoration:none;border-radius:14px;padding:16px 26px;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap} .mfb-btn svg{width:17px;height:17px} .mfb-btn--primary{background:linear-gradient(135deg,var(--vl),var(--vlx));color:#fff;box-shadow:0 14px 34px -12px rgba(93,82,246,.8);border:0;cursor:pointer} .mfb-btn--primary:hover{transform:translateY(-2px)} .mfb-btn--ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18)} .mfb-btn--ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)} .mfb-footer .mfb-ft-h3{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--vlight);margin:0 0 22px;display:flex;align-items:center;gap:11px;line-height:1.2} .mfb-footer .mfb-ft-h3 .h3-bar{flex:0 0 auto;width:26px;height:2px;background:linear-gradient(90deg,var(--vl),transparent);border-radius:2px;order:2} .mfb-footer .mfb-ft-h3 svg{width:15px;height:15px;flex-shrink:0;color:var(--vlight);order:0} .mfb-footer .mfb-ft-h3 span{order:1} .mfb-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .mfb-list a{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;color:rgba(255,255,255,.84);text-decoration:none;transition:color .2s,gap .2s;line-height:1.45} .mfb-list a:hover{color:#fff;gap:11px} .mfb-list a::before{content:'→';font-size:12px;color:var(--vlight);opacity:0;transform:translateX(-5px);transition:opacity .25s,transform .25s;display:inline-block;flex-shrink:0;margin-right:-2px} .mfb-list a:hover::before{opacity:1;transform:translateX(0)} .mfb-list.is-wide{column-count:2;column-gap:28px} .mfb-list.is-wide li{break-inside:avoid} .mfb-footer__col--wide{grid-column:span 2} .mfb-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 50%,transparent);margin:56px 0;position:relative;z-index:1} .mfb-footer__top{display:grid;grid-template-columns:1.4fr 3fr;gap:56px;margin-top:64px;align-items:start} .mfb-footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 44px;align-content:start} .mfb-brand__logo{display:flex;align-items:center;margin:18px 0 22px} .mfb-brand__logo img{height:66px;width:auto} .mfb-brand__desc{font-size:15px;color:rgba(255,255,255,.72);line-height:1.6;margin-bottom:28px;max-width:320px} .mfb-brand__contact,.mfb-brand__social{display:flex;flex-direction:column;gap:10px;margin-bottom:26px} .mfb-brand__contact-label,.mfb-brand__certs-label{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--vlight)} .mfb-brand__contact a{display:inline-flex;align-items:center;gap:11px;font-size:15px;color:rgba(255,255,255,.88);text-decoration:none;font-weight:600} .mfb-brand__contact a:hover{color:#fff} .mfb-brand__contact a svg{width:16px;height:16px;color:var(--vlight);flex-shrink:0} .mfb-brand__social-icons{display:flex;gap:11px} .mfb-brand__social-icons a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#fff;transition:background .2s,transform .2s} .mfb-brand__social-icons a:hover{background:var(--vl);transform:translateY(-2px)} .mfb-brand__social-icons svg{width:17px;height:17px} .mfb-brand__certs{display:flex;flex-direction:column;gap:12px} .mfb-brand__certs-logos{display:flex;align-items:center;gap:18px} .mfb-brand__certs-logos .cert-img{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:7px 11px} .mfb-brand__certs-scope{margin:0;max-width:340px;font-size:12px;line-height:1.5;color:var(--vlight)} .mfb-brand__certs-logos .cert-img img{height:44px;width:auto;display:block} .mfb-brand__certs-logos .cert-fr-tech img{height:64px;filter:brightness(0) invert(1)} .mfb-section{position:relative;z-index:1} .mfb-section__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:28px} .mfb-section__head .mfb-ft-h3{margin:0;font-size:13px} .mfb-section__head a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--vlightest);text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:9px 18px;transition:all .2s} .mfb-section__head a:hover{color:#fff;background:rgba(255,255,255,.12)} .mfb-section__head a svg{width:14px;height:14px} .mfb-subhead{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--vlighter);margin:0 0 16px;display:flex;align-items:center;gap:9px} .mfb-dom-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 28px} .mfb-dom-group__head{display:flex;align-items:center;gap:10px;text-decoration:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:11px 13px;margin-bottom:14px;transition:transform .2s,background .2s,border-color .2s} .mfb-dom-group__head:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(168,156,255,.5)} .dom-ico{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(93,82,246,.32),rgba(128,89,250,.18));border:1px solid rgba(168,156,255,.28);color:var(--vlightest)} .dom-ico svg{width:17px;height:17px} .dom-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .dom-name{font-size:14px;font-weight:700;color:#fff;line-height:1.25} .dom-count{font-size:11px;font-weight:500;color:rgba(255,255,255,.46)} .mfb-dom-sub{list-style:none;margin:0;padding:0 0 0 3px;display:flex;flex-direction:column;gap:8px} .mfb-dom-sub a{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;line-height:1.35;transition:color .2s} .mfb-dom-sub a::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--vlight);opacity:.55;flex-shrink:0;transition:opacity .2s} .mfb-dom-sub a small{margin-left:auto;padding-left:10px;font-size:11px;font-weight:500;color:rgba(255,255,255,.38);flex-shrink:0} .mfb-dom-sub a:hover{color:#fff} .mfb-dom-sub a:hover::before{opacity:1} .mfb-dom-sub a:hover small{color:rgba(255,255,255,.6)} .mfb-grid-top{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 28px} .mfb-grid-top a{display:flex;align-items:center;gap:13px;text-decoration:none;padding:9px 12px;border-radius:11px;transition:background .2s} .mfb-grid-top a:hover{background:rgba(255,255,255,.05)} .mfb-grid-top .rk{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--vlightest);background:rgba(93,82,246,.16);border:1px solid rgba(168,156,255,.24)} .mfb-grid-top a:nth-child(-n+3) .rk{background:linear-gradient(135deg,var(--vl),var(--vlx));color:#fff;border-color:transparent} .mfb-grid-top .nm{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.84);line-height:1.35} .mfb-grid-top a:hover .nm{color:#fff} .mfb-footer__bottom{position:relative;z-index:1;background:rgba(0,0,0,.20);margin-top:56px;padding:26px 76px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .mfb-footer__copyright{font-size:13.5px;color:rgba(255,255,255,.56);font-weight:500} .mfb-footer__legal{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0} .mfb-footer__legal li{position:relative;padding:0 16px} .mfb-footer__legal li:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(255,255,255,.18)} .mfb-footer__legal a{font-size:13.5px;color:rgba(255,255,255,.56);text-decoration:none;font-weight:500} .mfb-footer__legal a:hover{color:#fff} .mfb-footer a:focus-visible,.mfb-footer button:focus-visible{outline:2px solid var(--vlighter);outline-offset:3px;border-radius:6px} @media(max-width:1200px){.mfb-footer__top{grid-template-columns:1fr;gap:44px}.mfb-footer__nav{grid-template-columns:repeat(2,1fr)}.mfb-dom-groups{grid-template-columns:repeat(2,1fr)}.mfb-grid-top{grid-template-columns:repeat(2,1fr)}.mfb-footer__inner{padding:0 52px}.mfb-footer__bottom{padding:24px 52px}.mfb-footer__cta{padding:40px 44px}} /* ═══ PREMIUM POLISH (iso tpl-single-formation-v7) ═══════════════════════════ Transpose les signatures visuelles de la fiche formation : shimmer sur CTA et badges, puces violettes en dégradé, icônes de domaine profondes, orbes de profondeur, hairlines violettes. Tout est scopé .mfb-footer et purement décoratif (aucune structure HTML modifiée). */ /* 1. Shimmer sweep sur les CTA — iso .mfbp-end__cta::after */ .mfb-footer .mfb-btn{position:relative;overflow:hidden;isolation:isolate} .mfb-footer .mfb-btn::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);pointer-events:none;transition:left .65s ease;z-index:1} .mfb-footer .mfb-btn:hover::after{left:135%} .mfb-footer .mfb-btn--primary{box-shadow:0 14px 34px -12px rgba(93,82,246,.8),inset 0 1px 0 rgba(255,255,255,.22)} .mfb-footer .mfb-btn--primary:hover{box-shadow:0 18px 42px -12px rgba(93,82,246,.9),inset 0 1px 0 rgba(255,255,255,.28)} /* 2. Eyebrow : shimmer lent — iso .sf-datebadge::before */ .mfb-footer .mfb-eyebrow{position:relative;overflow:hidden;isolation:isolate} .mfb-footer .mfb-eyebrow::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(196,181,253,.24),transparent);transform:translateX(-100%);animation:mfb-ft-shimmer 5.2s ease-in-out infinite;pointer-events:none;z-index:-1} @keyframes mfb-ft-shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}} /* 3. Bloc CTA : orbe de profondeur — iso .sf-fx-opco::after */ .mfb-footer .mfb-footer__cta::after{content:'';position:absolute;top:-46%;right:-4%;width:380px;height:380px;background:radial-gradient(circle,rgba(128,89,250,.30),transparent 70%);pointer-events:none;z-index:0} .mfb-footer .mfb-footer__cta-text,.mfb-footer .mfb-footer__cta-actions{z-index:2} /* 4. Puces violettes dégradé sur les listes nav — remplace la flèche plate */ .mfb-footer .mfb-list a::before{content:'';width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--vlx),var(--vl));opacity:.45;transform:none;box-shadow:0 0 0 0 rgba(128,89,250,0);transition:opacity .25s ease,box-shadow .25s ease,transform .25s ease;margin-right:0} .mfb-footer .mfb-list a:hover::before{opacity:1;transform:scale(1.15);box-shadow:0 0 0 4px rgba(128,89,250,.18)} .mfb-footer .mfb-list a{gap:10px} .mfb-footer .mfb-list a:hover{gap:12px} /* 5. Sous-domaines : puce dégradé + halo au survol */ .mfb-footer .mfb-dom-sub a::before{width:5px;height:5px;background:linear-gradient(135deg,var(--vlighter),var(--vl));opacity:.5;box-shadow:0 0 0 0 rgba(128,89,250,0);transition:opacity .22s ease,box-shadow .22s ease} .mfb-footer .mfb-dom-sub a:hover::before{opacity:1;box-shadow:0 0 0 3.5px rgba(128,89,250,.18)} /* 6. Icône de domaine : dégradé profond + relief — iso .mfbp-end__cat-icon */ .mfb-footer .dom-ico{background:linear-gradient(135deg,rgba(128,89,250,.38) 0%,rgba(6,60,255,.30) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -10px rgba(93,82,246,.75);transition:box-shadow .25s ease,transform .25s ease} .mfb-footer .mfb-dom-group__head:hover .dom-ico{transform:scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 24px -10px rgba(93,82,246,.95)} .mfb-footer .mfb-dom-group__head{position:relative;overflow:hidden} .mfb-footer .mfb-dom-group__head::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 0% 0%,rgba(128,89,250,.18),transparent 62%);opacity:0;transition:opacity .25s ease;pointer-events:none} .mfb-footer .mfb-dom-group__head:hover::after{opacity:1} /* 7. Top 20 : podium premium — iso .sf-fx-step__n (multi-shadow + shimmer) */ .mfb-footer .mfb-grid-top .rk{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .mfb-footer .mfb-grid-top a:nth-child(-n+3) .rk{background:linear-gradient(145deg,#8059FA 0%,#5D52F6 52%,#063CFF 100%);box-shadow:0 8px 18px -8px rgba(93,82,246,.7),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(6,60,255,.32)} .mfb-footer .mfb-grid-top a:nth-child(-n+3) .rk::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);transform:translateX(-130%);animation:mfb-ft-rk-shimmer 4.8s ease-in-out infinite;pointer-events:none} @keyframes mfb-ft-rk-shimmer{0%,100%{transform:translateX(-130%)}50%{transform:translateX(130%)}} .mfb-footer .mfb-grid-top a{position:relative} .mfb-footer .mfb-grid-top a::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:0;border-radius:2px;background:linear-gradient(180deg,var(--vlx),var(--vl));transition:height .25s ease} .mfb-footer .mfb-grid-top a:hover::before{height:60%} .mfb-footer .mfb-grid-top a:hover .rk{transform:scale(1.06)} .mfb-footer .mfb-grid-top .rk{transition:transform .25s ease} /* 8. Titres de colonne : barre dégradée + point d'accroche violet */ .mfb-footer .mfb-ft-h3 .h3-bar{width:30px;height:2px;background:linear-gradient(90deg,var(--vl),rgba(128,89,250,0));box-shadow:0 0 10px -2px rgba(128,89,250,.7)} .mfb-footer .mfb-ft-h3 svg{filter:drop-shadow(0 0 8px rgba(128,89,250,.45))} /* 9. Séparateurs : accent violet au centre */ .mfb-footer .mfb-divider{background:linear-gradient(90deg,transparent,rgba(168,156,255,.28) 50%,transparent)} .mfb-footer .mfb-divider::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(128,89,250,.65),transparent)} /* 10. Pastilles de section (Voir les X formations) : relief au survol */ .mfb-footer .mfb-section__head a{transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease} .mfb-footer .mfb-section__head a:hover{transform:translateY(-2px);border-color:rgba(168,156,255,.45);box-shadow:0 10px 24px -14px rgba(93,82,246,.9)} /* 11. Réseaux sociaux : halo violet au survol */ .mfb-footer .mfb-brand__social-icons a{transition:background .22s ease,transform .22s ease,box-shadow .22s ease,border-color .22s ease} .mfb-footer .mfb-brand__social-icons a:hover{border-color:transparent;box-shadow:0 10px 24px -10px rgba(93,82,246,.85),inset 0 1px 0 rgba(255,255,255,.25)} /* 12. Barre légale : hairline violette de séparation */ .mfb-footer .mfb-footer__bottom{border-top:1px solid rgba(255,255,255,.06)} .mfb-footer .mfb-footer__bottom::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(128,89,250,.5) 50%,transparent);pointer-events:none} .mfb-footer .mfb-footer__bottom{position:relative} /* 13. Calage du jeu d'icônes duotone (masse pleine = lecture plus lourde qu'un trait, on remonte légèrement les tailles et on garde currentColor partout) */ .mfb-footer .mfb-eyebrow svg{width:15px;height:15px;color:var(--vlighter)} .mfb-footer .mfb-ft-h3 svg{width:17px;height:17px} .mfb-footer .mfb-brand__contact a svg{width:17px;height:17px} .mfb-footer .mfb-btn svg{width:16px;height:16px} .mfb-footer .dom-ico svg{width:18px;height:18px} /* Les marques sociales restent les logos officiels : on neutralise le calage duotone. */ .mfb-footer .mfb-brand__social-icons svg{width:17px;height:17px} /* Le combiné est au trait : à surface égale il pèse beaucoup moins qu'une silhouette pleine, on le monte donc d'un cran pour équilibrer la ligne. Sélecteurs calés pour passer devant `.mfb-brand__contact a svg` (0,2,2) et `.mfb-btn svg` (0,2,1), sinon le combiné restait bridé à 17px. */ .mfb-footer .mfb-ico--phone{width:20px;height:20px} .mfb-footer .mfb-brand__contact a .mfb-ico--phone{width:20px;height:20px} .mfb-footer .mfb-btn .mfb-ico--phone{width:19px;height:19px} /* 14. Bandeau haut scindé : CTA commercial à gauche, catalogue à droite. Les deux cartes partagent le traitement verre du bloc CTA d'origine, avec une hauteur alignée (align-items:stretch) pour que la rangée reste franche. */ .mfb-footer .mfb-footer__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;margin-top:56px;position:relative;z-index:1} .mfb-footer .mfb-footer__duo>*{margin-top:0} /* En demi-largeur le CTA n'a plus la place de mettre texte et boutons côte à côte. */ .mfb-footer .mfb-footer__duo .mfb-footer__cta{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:26px;padding:38px 36px} .mfb-footer .mfb-footer__duo .mfb-footer__cta-text{max-width:none} .mfb-footer .mfb-footer__cat{position:relative;display:flex;align-items:center;gap:26px;padding:38px 36px;border-radius:24px;background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden} .mfb-footer .mfb-footer__cat::after{content:'';position:absolute;bottom:-48%;left:-8%;width:340px;height:340px;background:radial-gradient(circle,rgba(96,140,255,.26),transparent 70%);pointer-events:none;z-index:0} .mfb-footer .mfb-footer__cat>*{position:relative;z-index:1} /* Couverture : la vraie cover du PDF, inclinée, avec une pile de pages derrière. */ .mfb-footer .mfb-cat__cover{position:relative;flex:0 0 auto;width:152px} .mfb-footer .mfb-cat__paper{display:block;border-radius:10px;overflow:hidden;transform:rotate(-4deg);box-shadow:0 26px 48px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14);transition:transform .3s ease,box-shadow .3s ease} .mfb-footer .mfb-cat__paper img{display:block;width:100%;height:auto} .mfb-footer .mfb-cat__cover::before,.mfb-footer .mfb-cat__cover::after{content:'';position:absolute;inset:0;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);z-index:-1} .mfb-footer .mfb-cat__cover::before{transform:rotate(2deg) translate(7px,5px)} .mfb-footer .mfb-cat__cover::after{transform:rotate(6deg) translate(13px,10px);background:rgba(255,255,255,.06)} .mfb-footer .mfb-footer__cat:hover .mfb-cat__paper{transform:rotate(-2deg) translateY(-4px);box-shadow:0 32px 58px -20px rgba(0,0,0,.7),0 0 0 1px rgba(168,156,255,.35)} .mfb-footer .mfb-cat__tag{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(135deg,var(--vl),var(--vlx));color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 13px;border-radius:50px;box-shadow:0 10px 22px -10px rgba(93,82,246,.9);z-index:2} .mfb-footer .mfb-cat__body{min-width:0} .mfb-footer .mfb-cat__body .mfb-ft-h2{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.5px;margin:14px 0 10px;color:#fff} .mfb-footer .mfb-cat__body .mfb-ft-h2 em{font-style:normal;background:linear-gradient(90deg,var(--vlighter),var(--vlightest));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .mfb-footer .mfb-cat__body p{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.6;margin:0 0 20px} /* Les deux sorties du bloc catalogue ont le même poids : une grille de pistes égales les aligne à largeur identique, qu'elles tiennent côte à côte ou qu'elles passent l'une sous l'autre. */ .mfb-footer .mfb-cat__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px} .mfb-footer .mfb-cat__actions .mfb-btn{font-size:14px;padding:13px 18px;width:100%;justify-content:center;text-align:center} /* Le primaire est en border:0 et le ghost en border:1px : sans cette bordure transparente les deux boutons ne font pas la même hauteur (2px d'écart). */ .mfb-footer .mfb-btn--primary{border:1px solid transparent} @media(max-width:1200px){.mfb-footer .mfb-footer__duo{grid-template-columns:minmax(0,1fr)}} @media(max-width:680px){ .mfb-footer .mfb-footer__duo{gap:16px;margin-top:40px} .mfb-footer .mfb-footer__duo .mfb-footer__cta,.mfb-footer .mfb-footer__cat{padding:28px 22px} .mfb-footer .mfb-footer__cat{flex-direction:column;align-items:flex-start;gap:34px} .mfb-footer .mfb-cat__cover{width:132px;align-self:center} .mfb-footer .mfb-cat__actions .mfb-btn{width:100%;justify-content:center} } /* 15. Sous-titres de groupe dans une colonne : la colonne "L'organisme" porte trois familles de liens, un intertitre discret les sépare sans ajouter de colonne. Un petit tiret dégradé le rattache visuellement au h3 de colonne. */ .mfb-footer .mfb-subhead{margin:26px 0 14px;font-size:11px;letter-spacing:1.4px;color:var(--vlighter)} .mfb-footer .mfb-subhead::before{content:'';width:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--vl),rgba(128,89,250,0));flex:0 0 auto} /* 16. Logo Qualiopi : le gabarit 44px l'écrasait face à la French Tech. */ .mfb-footer .mfb-brand__certs-logos .cert-qualiopi img{height:68px} .mfb-footer .mfb-brand__certs-logos .cert-qualiopi{padding:6px 10px} /* 17. Colonnes de navigation réellement égales. `1fr` vaut `minmax(auto,1fr)` : un titre de formation long élargissait sa piste et déséquilibrait la rangée (227/379/254px constatés). `minmax(0,1fr)` force les 3 pistes à la même largeur et laisse les libellés passer à la ligne. */ .mfb-footer .mfb-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1200px){.mfb-footer .mfb-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.mfb-footer .mfb-footer__nav{grid-template-columns:minmax(0,1fr)}} /* 18. Note d'avis remontée juste sous le logo : elle sert de preuve avant le descriptif, donc elle se colle au logo et respire vers le paragraphe. */ .mfb-footer .mfb-brand__logo{margin-bottom:14px} .mfb-footer .mfb-brand__note{margin:0 0 18px} /* 19. Webperf — réservation d'espace. `contain-intrinsic-size:0 1400px` sous-estimait la hauteur réelle (1842px sur une page courante, 2386px sur l'accueil, 4958px en 375px) : au moment où le footer entrait dans le viewport, la page sautait. Le mot-clé `auto` fait mémoriser au navigateur la dernière hauteur rendue ; la valeur qui suit ne sert plus qu'au tout premier affichage. */ .mfb-footer{contain-intrinsic-size:auto 1900px} @media(max-width:680px){.mfb-footer{contain-intrinsic-size:auto 4900px}} /* 20. Webperf mobile — le flou de fond est le poste GPU le plus lourd du bloc (4 occurrences). Sur mobile on le retire et on compense par un aplat un peu plus opaque : le rendu reste identique à l'oeil, le scroll redevient fluide sur les Android d'entrée de gamme. Idem pour les animations décoratives. */ @media(max-width:680px){ .mfb-footer .mfb-eyebrow, .mfb-footer .mfb-footer__cta, .mfb-footer .mfb-footer__cat, .mfb-footer .mfb-note--dark.mfb-note--pill{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.09)} .mfb-footer .mfb-footer__cta,.mfb-footer .mfb-footer__cat{background:rgba(255,255,255,.06)} .mfb-footer .mfb-eyebrow::after, .mfb-footer .mfb-grid-top a:nth-child(-n+3) .rk::before{animation:none;display:none} } /* ═══ FINITION ══════════════════════════════════════════════════════════════ Passe de rendu : filigranes de marque, grain, liserés. Rien ici n'ajoute de backdrop-filter ni d'animation permanente — le budget GPU reste celui fixé au point 20. */ /* 21. Filigranes de marque. Le sprite n'occupe aucune place. */ .mfb-footer .mfb-footer__sprite{position:absolute;width:0;height:0;overflow:hidden} .mfb-footer .mfb-footer__layer svg{width:100%;height:100%;display:block} /* Second exemplaire en bas à gauche, retourné et plus discret : il referme la diagonale ouverte par celui du haut sans alourdir la lecture. */ .mfb-footer .mfb-footer__layer--alt{right:auto;top:auto;left:-90px;bottom:-70px;width:360px;height:360px;opacity:.035;transform:scaleX(-1)} /* Filigrane interne aux cartes du pré-footer : donne de la matière aux grands aplats de verre, qui paraissaient un peu nus. */ .mfb-footer .mfb-card-layer{position:absolute;right:-46px;bottom:-58px;width:230px;height:230px;opacity:.05;color:#fff;pointer-events:none;z-index:0} .mfb-footer .mfb-card-layer svg{width:100%;height:100%;display:block} .mfb-footer .mfb-card-layer--left{right:auto;left:-52px;top:-56px;bottom:auto;transform:scaleX(-1);opacity:.045} /* 22. Grain. Une trame très basse casse le côté « aplat numérique » des grands dégradés ; elle est en background-image donc rasterisée une fois. */ .mfb-footer::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} /* 23. Liserés. Une arête claire en haut de la carte footer et des cartes du pré-footer simule l'épaisseur : c'est ce qui sépare un aplat d'un objet. */ .mfb-footer{box-shadow:0 40px 90px -40px rgba(13,27,62,.55),inset 0 1px 0 rgba(255,255,255,.10)} .mfb-footer .mfb-footer__cta,.mfb-footer .mfb-footer__cat{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 50px -34px rgba(0,0,0,.55)} .mfb-footer .mfb-dom-group__head{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .mfb-footer .mfb-dom-group__head:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px -16px rgba(93,82,246,.8)} /* 24. Podium : les trois premières lignes du classement méritent d'être lues comme un bloc, pas comme trois lignes parmi vingt. */ .mfb-footer .mfb-grid-top a:nth-child(-n+3){background:linear-gradient(90deg,rgba(128,89,250,.10),transparent 78%)} .mfb-footer .mfb-grid-top a:nth-child(-n+3):hover{background:linear-gradient(90deg,rgba(128,89,250,.18),rgba(255,255,255,.04) 78%)} .mfb-footer .mfb-grid-top a:nth-child(-n+3) .nm{color:#fff;font-weight:600} /* 25. Typographie. Les titres de section gagnent en tenue avec un peu d'air entre les lettres, et les gros titres se resserrent. */ .mfb-footer .mfb-section__head .mfb-ft-h3,.mfb-footer .mfb-ft-h3{letter-spacing:1.9px} .mfb-footer .mfb-footer__cta-text .mfb-ft-h2,.mfb-footer .mfb-cat__body .mfb-ft-h2{letter-spacing:-.6px;text-wrap:balance} .mfb-footer .mfb-brand__desc,.mfb-footer .mfb-footer__cta-text p,.mfb-footer .mfb-cat__body p{text-wrap:pretty} /* 26. Barre légale : un aplat un peu plus profond détache le pied du corps. */ .mfb-footer .mfb-footer__bottom{background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.26))} @media(max-width:680px){ /* Sur petit écran les filigranes internes n'apportent plus rien et le grain coûte un repaint sur toute la hauteur : on les retire. */ .mfb-footer .mfb-card-layer{display:none} .mfb-footer::after{display:none} .mfb-footer .mfb-footer__layer--alt{width:240px;height:240px;left:-80px;bottom:-50px;opacity:.03} } /* 27. Accessibilité : on coupe toute animation décorative si l'utilisateur le demande */ @media(prefers-reduced-motion:reduce){ .mfb-footer .mfb-eyebrow::after,.mfb-footer .mfb-grid-top a:nth-child(-n+3) .rk::before{animation:none} .mfb-footer .mfb-btn::after{transition:none} .mfb-footer .mfb-btn:hover,.mfb-footer .mfb-dom-group__head:hover,.mfb-footer .mfb-section__head a:hover,.mfb-footer .mfb-brand__social-icons a:hover{transform:none} } @media(max-width:680px){.mfb-footer .mfb-footer__cta::after{width:260px;height:260px;top:-30%}.mfb-footer .mfb-grid-top a::before{display:none}} /* ═══════════════════════════════════════════════════════════════ ANTI-THÈME · à garder en DERNIER dans cette feuille (2026-07-21) ═══════════════════════════════════════════════════════════════ Le thème émet `a{color:#063CFF!important}` et le kit Elementor repasse au rouge sur hover/focus/active. Sans ce bloc, tous les liens du footer virent au bleu — constaté en prod au déploiement. Deux familles traitées séparément : - liens de contenu : on force la couleur et on tue le soulignement - boutons (.mfb-btn) : on force la couleur du TEXTE uniquement, surtout PAS le background (le primary est un dégradé, l'écraser le rendrait plat). Il faut les 5 pseudo-classes : le thème cible :visited et :focus séparément, en oublier une suffit à laisser passer le bleu. ═══════════════════════════════════════════════════════════════ */ html body .mfb-footer a, html body .mfb-footer a:link, html body .mfb-footer a:visited, html body .mfb-footer a:hover, html body .mfb-footer a:active, html body .mfb-footer a:focus{ text-decoration:none!important; text-decoration-color:transparent!important; border-bottom:0!important; box-shadow:none!important; } /* ═══════════════════════════════════════════════════════════════ Le border-bottom:0 ci-dessus vaut pour les liens de TEXTE : il tue le soulignement-bordure du thème. Mais il frappe aussi les liens qui dessinent un CADRE, qui se retrouvent bordés sur trois côtés seulement et paraissent rognés en bas. On rend le 4e côté aux boutons, à spécificité supérieure et couleur comprise : sans couleur explicite le bord retombe sur currentColor, donc le bleu de lien par défaut. Tout nouveau bouton-lien du footer doit être ajouté ici. ═══════════════════════════════════════════════════════════════ */ html body .mfb-footer a.mfb-btn, html body .mfb-footer a.mfb-btn:link, html body .mfb-footer a.mfb-btn:visited, html body .mfb-footer a.mfb-btn:hover, html body .mfb-footer a.mfb-btn:active, html body .mfb-footer a.mfb-btn:focus{ border-bottom:1px solid transparent!important; } html body .mfb-footer a.mfb-btn--ghost, html body .mfb-footer a.mfb-btn--ghost:link, html body .mfb-footer a.mfb-btn--ghost:visited, html body .mfb-footer a.mfb-btn--ghost:hover, html body .mfb-footer a.mfb-btn--ghost:active, html body .mfb-footer a.mfb-btn--ghost:focus{ border-bottom:1px solid rgba(255,255,255,.18)!important; } /* Liens « voir tout » des en-têtes de section (Tout le classement, Voir tout…) : ils portent aussi un cadre, et n'ont pas de classe propre — on les cible par leur position dans .mfb-section__head. */ html body .mfb-footer .mfb-section__head>a, html body .mfb-footer .mfb-section__head>a:link, html body .mfb-footer .mfb-section__head>a:visited, html body .mfb-footer .mfb-section__head>a:hover, html body .mfb-footer .mfb-section__head>a:active, html body .mfb-footer .mfb-section__head>a:focus{ border-bottom:1px solid rgba(255,255,255,.12)!important; } html body .mfb-footer .mfb-section__head>a:hover{ border-bottom-color:rgba(196,181,253,.42)!important; } /* Pastilles réseaux sociaux : cercles bordés, même correctif. */ html body .mfb-footer .mfb-brand__social-icons a, html body .mfb-footer .mfb-brand__social-icons a:link, html body .mfb-footer .mfb-brand__social-icons a:visited, html body .mfb-footer .mfb-brand__social-icons a:hover, html body .mfb-footer .mfb-brand__social-icons a:active, html body .mfb-footer .mfb-brand__social-icons a:focus{ border-bottom:1px solid rgba(255,255,255,.13)!important; } /* Liens de navigation, domaines, top 20, mentions légales : lavande au repos */ html body .mfb-footer .mfb-footer__nav a, html body .mfb-footer .mfb-footer__nav a:link, html body .mfb-footer .mfb-footer__nav a:visited, html body .mfb-footer .mfb-dom-group a, html body .mfb-footer .mfb-dom-group a:link, html body .mfb-footer .mfb-dom-group a:visited, html body .mfb-footer .mfb-grid-top a, html body .mfb-footer .mfb-grid-top a:link, html body .mfb-footer .mfb-grid-top a:visited, html body .mfb-footer .mfb-legal a, html body .mfb-footer .mfb-legal a:link, html body .mfb-footer .mfb-legal a:visited, html body .mfb-footer .mfb-section__head a, html body .mfb-footer .mfb-section__head a:link, html body .mfb-footer .mfb-section__head a:visited{ color:rgba(255,255,255,.72)!important; } html body .mfb-footer .mfb-footer__nav a:hover, html body .mfb-footer .mfb-footer__nav a:focus, html body .mfb-footer .mfb-dom-group a:hover, html body .mfb-footer .mfb-dom-group a:focus, html body .mfb-footer .mfb-grid-top a:hover, html body .mfb-footer .mfb-grid-top a:focus, html body .mfb-footer .mfb-legal a:hover, html body .mfb-footer .mfb-legal a:focus, html body .mfb-footer .mfb-section__head a:hover, html body .mfb-footer .mfb-section__head a:focus{ color:#fff!important; } /* Coordonnées (tel / email) */ html body .mfb-footer .mfb-brand__contact a, html body .mfb-footer .mfb-brand__contact a:link, html body .mfb-footer .mfb-brand__contact a:visited{color:#fff!important} html body .mfb-footer .mfb-brand__contact a:hover, html body .mfb-footer .mfb-brand__contact a:focus{color:var(--vlighter)!important} /* Boutons : couleur du texte forcée, background laissé intact */ html body .mfb-footer a.mfb-btn--primary, html body .mfb-footer a.mfb-btn--primary:link, html body .mfb-footer a.mfb-btn--primary:visited, html body .mfb-footer a.mfb-btn--primary:hover, html body .mfb-footer a.mfb-btn--primary:active, html body .mfb-footer a.mfb-btn--primary:focus{color:#fff!important} html body .mfb-footer a.mfb-btn--ghost, html body .mfb-footer a.mfb-btn--ghost:link, html body .mfb-footer a.mfb-btn--ghost:visited, html body .mfb-footer a.mfb-btn--ghost:active, html body .mfb-footer a.mfb-btn--ghost:focus{color:#fff!important} html body .mfb-footer a.mfb-btn--ghost:hover{color:#fff!important} /* Le kit Elementor impose padding/radius/display sur tout