/* =====================================================================
   Pied de page du site : le même sur l'accueil, les pages du site et tout le blog.
   La nuit d'ORBITECH : la marque en tête, huit colonnes de liens en deux bandes de quatre
   (apprendre, puis le site), la grande marque en relief.
   Balisage à garder pareil partout : index.html, 404.html, les pages de site-marketing/pages/
   (legal, site, pour) et site-marketing/shared/js/footer-loader.js (blog).
   Les couleurs de liens sont en !important, gardé de l'ancien thème sombre du blog (il visait
   tous les liens avec un sélecteur très fort). Les réglages d'accessibilité passent quand même devant.
   Police Bricolage : déclarée par le socle de la page (site.css ou socle.css).
   ===================================================================== */

.site-footer {
    --sf-ink: #f4f2ff;
    --sf-soft: #c9c4f2;
    --sf-line: rgba(255, 255, 255, .13);
    --sf-yellow: #ffc93c;
    --sf-pink: #ff5da2;
    --sf-mint: #2ed8a3;
    --sf-violet: #9c6bff;
    --sf-blue: #3d8bff;
    --sf-orange: #ff8a3d;
    position: relative; isolation: isolate; overflow: hidden;
    margin: clamp(88px, 11vw, 150px) 0 0;
    padding: clamp(56px, 7vw, 92px) clamp(18px, 5vw, 72px) 0;
    border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
    background:
        radial-gradient(60% 80% at 85% 0%, rgba(156, 107, 255, .35), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(61, 139, 255, .25), transparent 60%),
        #130f3d;
    color: var(--sf-ink);
    font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: left;
    -webkit-font-smoothing: antialiased;
}
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer .sf-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }

/* Ciel : quelques planètes qui flottent à côté de la grande marque (jamais sur les liens) */
.site-footer .sf-markrow { position: relative; }
.site-footer .sf-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer .sf-p {
    position: absolute; border-radius: 50%;
    box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .35), inset 6px 7px 12px rgba(255, 255, 255, .45), 0 0 34px -4px var(--g);
    animation: sf-float 9s ease-in-out infinite;
}
.site-footer .sf-p1 { --g: rgba(255, 201, 60, .7); width: 74px; height: 74px; right: 6%; top: 34%; background: radial-gradient(circle at 34% 30%, #fff1c2, var(--sf-yellow) 45%, #d99a00); }
.site-footer .sf-p2 { --g: rgba(255, 93, 162, .7); width: 38px; height: 38px; right: 24%; top: 4%; background: radial-gradient(circle at 34% 30%, #ffd0e4, var(--sf-pink) 50%, #c22f72); animation-delay: -3s; }
.site-footer .sf-p3 { --g: rgba(46, 216, 163, .7); width: 22px; height: 22px; right: 1%; top: -10%; background: radial-gradient(circle at 34% 30%, #c8ffee, var(--sf-mint) 50%, #13946d); animation-delay: -6s; }
@keyframes sf-float { 50% { transform: translateY(-12px); } }

/* ---- Haut : la marque à gauche, le bouton à droite, un trait dessous ---- */
.site-footer .sf-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px;
    padding-bottom: clamp(32px, 4vw, 48px); margin-bottom: clamp(36px, 5vw, 60px);
    border-bottom: 1px solid var(--sf-line);
}
.site-footer .sf-head .sf-cta { margin-top: 0; }
.site-footer .sf-logo {
    display: inline-flex; align-items: baseline; gap: 8px;
    color: var(--sf-ink) !important; text-decoration: none !important;
    font-size: 1.75rem; font-weight: 800; font-stretch: 78%; letter-spacing: -.01em; line-height: 1;
}
.site-footer .sf-logo small { font-size: .82rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--sf-soft); }
.site-footer .sf-pitch { margin: 16px 0 0; max-width: 32em; color: var(--sf-soft); font-size: 1.02rem; line-height: 1.5; }
.site-footer .sf-who { margin: 12px 0 0; max-width: 32em; color: var(--sf-soft); font-size: .95rem; line-height: 1.5; }
.site-footer .sf-who a { color: var(--sf-ink) !important; font-weight: 700; text-decoration: underline !important; text-decoration-color: rgba(255, 255, 255, .35) !important; text-underline-offset: 3px; }
.site-footer .sf-who a:hover { text-decoration-color: currentColor !important; }
.site-footer .sf-cta {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 24px; padding: 12px 20px; border-radius: 999px;
    color: #ffffff !important; text-decoration: none !important;
    font-weight: 750; font-size: 1rem;
    background: linear-gradient(180deg, #7465ff, #5b4bff 55%, #4a3be6);
    box-shadow: 0 5px 0 #2f22b8, 0 14px 24px -10px rgba(91, 75, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
    transform: translateY(-4px);
    transition: transform .15s, box-shadow .15s;
}
.site-footer .sf-cta svg { width: 18px; height: 18px; transition: transform .15s; }
.site-footer .sf-cta:hover { transform: translateY(-6px); box-shadow: 0 7px 0 #2f22b8, 0 18px 28px -10px rgba(91, 75, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
.site-footer .sf-cta:hover svg { transform: translateX(3px); }
.site-footer .sf-cta:active { transform: translateY(0); box-shadow: 0 1px 0 #2f22b8, 0 4px 10px -4px rgba(91, 75, 255, .6); }

/* Les colonnes : quatre par bande ; la 2e bande (le site) est séparée de la 1re (apprendre) par un trait */
.site-footer .sf-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 28px; }
.site-footer .sf-col:nth-child(n+5) { padding-top: 36px; border-top: 1px solid var(--sf-line); }
.site-footer .sf-h {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 18px; padding: 0; border: 0; background: none;
    color: var(--sf-soft); font-family: inherit; font-size: .8rem; font-weight: 800; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; text-shadow: none;
}
.site-footer .sf-h::before {
    content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), var(--c) 55%);
    box-shadow: 0 0 14px var(--c);
}
.site-footer .sf-col:nth-child(6n+1) .sf-h { --c: var(--sf-yellow); }
.site-footer .sf-col:nth-child(6n+2) .sf-h { --c: var(--sf-pink); }
.site-footer .sf-col:nth-child(6n+3) .sf-h { --c: var(--sf-mint); }
.site-footer .sf-col:nth-child(6n+4) .sf-h { --c: var(--sf-violet); }
.site-footer .sf-col:nth-child(6n+5) .sf-h { --c: var(--sf-blue); }
.site-footer .sf-col:nth-child(6n+6) .sf-h { --c: var(--sf-orange); }
.site-footer .sf-links { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.site-footer .sf-links li { margin: 0; padding: 0; }
.site-footer .sf-links li::before, .site-footer .sf-links li::marker { content: none; }
/* un trait qui se dessine sous le lien survolé, et le lien qui avance un peu */
.site-footer .sf-links a {
    display: inline-block;
    color: var(--sf-ink) !important; text-decoration: none !important;
    font-size: .98rem; font-weight: 600; line-height: 1.3;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    padding-bottom: 2px;
    transition: background-size .2s ease, transform .2s ease, color .2s ease;
}
.site-footer .sf-links a:hover, .site-footer .sf-links a:focus-visible { background-size: 100% 2px; transform: translateX(4px); color: #ffffff !important; }
/* « tu es ici » : la page en cours (page) ou la rubrique de l'article (true) */
.site-footer .sf-links a[aria-current] { background-size: 100% 2px; }
.site-footer .sf-links .sf-more { color: var(--sf-soft) !important; font-size: .95rem; }
.site-footer .sf-links .sf-more::after { content: " \2192"; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 3px solid var(--sf-yellow); outline-offset: 4px; border-radius: 6px; }

/* ---- La grande marque en relief ---- */
.site-footer .sf-mark {
    margin: clamp(48px, 7vw, 88px) 0 0; padding: 0;
    color: var(--sf-ink);
    font-size: clamp(3.4rem, 15.5vw, 13.5rem);
    line-height: .82; font-weight: 800; font-stretch: 75%; letter-spacing: -.035em;
    text-shadow: 0 2px 0 #8b7dff, 0 4px 0 #7464f0, 0 6px 0 #5e4ee0, 0 8px 0 #4a3bc9, 0 10px 0 #3a2db0, 0 26px 44px rgba(0, 0, 0, .5);
    user-select: none;
}

/* ---- Bas : le copyright et le retour en haut (la marge de droite laisse la place au bouton Accessibilité) ---- */
.site-footer .sf-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    margin-top: 30px; padding: 20px 84px 26px 0;
    border-top: 1px solid var(--sf-line);
}
.site-footer .sf-made { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.site-footer .sf-copy { margin: 0; color: var(--sf-soft); font-size: .9rem; }
/* RGPD, avec les drapeaux français et européen (dessinés en SVG : les émojis de drapeaux ne s'affichent pas sous Windows) */
.site-footer .sf-rgpd {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px 6px 9px; border-radius: 999px;
    border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .06);
    color: var(--sf-ink) !important; text-decoration: none !important;
    font-size: .85rem; font-weight: 750; letter-spacing: .04em;
    transition: background .15s;
}
.site-footer .sf-rgpd:hover, .site-footer .sf-rgpd[aria-current] { background: rgba(255, 255, 255, .14); }
.site-footer .sf-flag { display: block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.site-footer .sf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-footer .sf-up {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--sf-line); background: rgba(255, 255, 255, .06);
    color: var(--sf-ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.site-footer .sf-up:hover { background: rgba(255, 255, 255, .14); }
.site-footer .sf-up svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
    .site-footer .sf-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
    .site-footer .sf-col:nth-child(n+5) { padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
    .site-footer .sf-p1 { width: 44px; height: 44px; right: 2%; top: 20%; }
    .site-footer .sf-p2 { width: 22px; height: 22px; right: 18%; top: -18%; }
    .site-footer .sf-p3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-footer .sf-p { animation: none; }
    .site-footer .sf-cta, .site-footer .sf-cta svg, .site-footer .sf-links a, .site-footer .sf-up, .site-footer .sf-rgpd { transition: none; }
}
@media print {
    .site-footer { display: none !important; }
}