/* ==========================================================================
   Swip UI - barre de navigation flottante + animations de boutons
   Inspiration : traitement utilise sur free-hub.fr (nav en pilule + remplissage
   diagonal des boutons au survol). Charge en dernier dans le <head><meta charset="utf-8"> : cette
   feuille surcharge volontairement les styles existants de chaque section.
   ========================================================================== */

/* --- Palette d'accent par section (classe posee sur <body>) --------------- */
body.swip-sec-group{
  --swip-fx-1:#F0EDE8; --swip-fx-2:#c3bdb4; --swip-fx-ink:#0d0d0d;
  --swip-nav-bg:rgba(16,16,16,.60); --swip-nav-bg-mini:rgba(10,10,10,.88);
  --swip-nav-line:rgba(240,237,232,.12); --swip-nav-glow:rgba(240,237,232,.14);
}
body.swip-sec-agency{
  --swip-fx-1:#ff5602; --swip-fx-2:#d94400; --swip-fx-ink:#fff;
  --swip-nav-bg:rgba(14,11,9,.60); --swip-nav-bg-mini:rgba(10,8,6,.88);
  --swip-nav-line:rgba(255,86,2,.20); --swip-nav-glow:rgba(255,86,2,.32);
}
body.swip-sec-studio{
  --swip-fx-1:#E62837; --swip-fx-2:#bd1626; --swip-fx-ink:#fff;
  --swip-nav-bg:rgba(15,14,17,.62); --swip-nav-bg-mini:rgba(11,10,13,.88);
  --swip-nav-line:rgba(230,40,55,.20); --swip-nav-glow:rgba(230,40,55,.30);
}
body.swip-sec-media{
  --swip-fx-1:#FF00AD; --swip-fx-2:#cc0089; --swip-fx-ink:#fff;
  --swip-nav-bg:rgba(255,255,255,.82); --swip-nav-bg-mini:rgba(255,255,255,.94);
  --swip-nav-line:rgba(22,17,15,.10); --swip-nav-glow:rgba(255,0,173,.26);
}
body.swip-sec-invest{
  --swip-fx-1:#9650DC; --swip-fx-2:#6f33b0; --swip-fx-ink:#fff;
  --swip-nav-bg:rgba(10,9,14,.62); --swip-nav-bg-mini:rgba(8,7,11,.88);
  --swip-nav-line:rgba(150,80,220,.20); --swip-nav-glow:rgba(150,80,220,.32);
}
/* Le theme clair du site groupe inverse la pilule. */
body.swip-sec-group.theme-light,
.theme-light body.swip-sec-group{
  --swip-nav-bg:rgba(255,255,255,.84); --swip-nav-bg-mini:rgba(255,255,255,.94);
  --swip-nav-line:rgba(13,13,13,.10); --swip-nav-glow:rgba(13,13,13,.10);
  --swip-fx-1:#161616; --swip-fx-2:#000; --swip-fx-ink:#fff;
}

/* --- La barre devient une pilule flottante -------------------------------- */
body[class*="swip-sec-"] header.nav{
  position:fixed !important;
  /* Le voile de tete est pose a z-index 99. Les feuilles de pole montent
     leur barre a 100, mais les deux pages legales la laissaient a 50 :
     le fondu passait devant la pilule. On la fixe ici, pour toutes. */
  z-index:100 !important;
  top:14px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(1180px, calc(100% - 28px)) !important;
  padding:9px 9px 9px 20px !important;
  border-radius:100px !important;
  background:var(--swip-nav-bg) !important;
  background:color-mix(in srgb, var(--bg, #101010) 70%, transparent) !important;
  -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
  backdrop-filter:blur(16px) saturate(135%) !important;
  border:1px solid var(--swip-nav-line) !important;
  border:1px solid color-mix(in srgb, var(--text, #fff) 12%, transparent) !important;
  box-shadow:0 18px 46px -26px rgba(0,0,0,.70), 0 0 30px -10px var(--swip-nav-glow) !important;
  transition:padding .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1),
             background .38s ease, box-shadow .38s ease, border-color .38s ease !important;
}
/* Proportions relevees sur la reference visuelle : la bascule de theme est un
   satellite legerement PLUS PETIT que la CTA (~90 % de sa hauteur), les deux
   centres verticalement avec la meme marge au bord de la pilule.
   Etat de repos puis etat compact (au scroll). */
body[class*="swip-sec-"] header.nav .theme-toggle{width:36px;height:36px}
body[class*="swip-sec-"] header.nav .theme-toggle svg{width:17px;height:17px}
body[class*="swip-sec-"] header.nav .nav-cta-desktop{height:40px}

body[class*="swip-sec-"] header.nav.scrolled .theme-toggle{width:32px;height:32px}
body[class*="swip-sec-"] header.nav.scrolled .theme-toggle svg{width:15px;height:15px}
body[class*="swip-sec-"] header.nav.scrolled .nav-cta-desktop{
  height:36px;padding-left:22px;padding-right:22px;font-size:13.5px;
}
/* la transition de taille accompagne celle de la pilule (liste complete :
   une regle de transition en remplace une autre, on reprend donc aussi les
   proprietes deja animees sur ces elements) */
body[class*="swip-sec-"] header.nav .theme-toggle,
body[class*="swip-sec-"] header.nav .nav-cta-desktop{
  transition:width .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1),
             padding .38s cubic-bezier(.4,0,.2,1), font-size .38s cubic-bezier(.4,0,.2,1),
             transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease,
             background-color .35s ease, color .35s ease, border-color .35s ease;
}
body[class*="swip-sec-"] header.nav.scrolled{
  width:min(1060px, calc(100% - 28px)) !important;
  padding:7px 7px 7px 18px !important;
  background:var(--swip-nav-bg-mini) !important;
  background:color-mix(in srgb, var(--bg, #0a0a0a) 92%, transparent) !important;
  box-shadow:0 22px 54px -22px rgba(0,0,0,.82), 0 0 44px -8px var(--swip-nav-glow) !important;
}
body[class*="swip-sec-"] header.nav .nav-logo img{transition:height .38s cubic-bezier(.4,0,.2,1), max-height .38s cubic-bezier(.4,0,.2,1)}
/* Certaines barres d'origine posent un voile de lisibilite en pseudo-element
   rectangulaire (inset:0, sans rayon). Une fois la barre transformee en
   pilule, ses angles carres depassent aux deux extremites. La pilule a deja
   son propre fond translucide : on retire le voile. */
body[class*="swip-sec-"] header.nav::before{display:none !important}

@media (max-width:760px){
  body[class*="swip-sec-"] header.nav{
    top:10px !important;
    width:calc(100% - 20px) !important;
    padding:8px 8px 8px 14px !important;
  }
  body[class*="swip-sec-"] header.nav.scrolled{
    width:calc(100% - 20px) !important;
    padding:6px 6px 6px 12px !important;
  }
}

/* --- Boutons : remplissage diagonal au survol -----------------------------
   Le calque de remplissage est un <span class="swip-fill"> injecte par
   swip-ui.js : on evite ainsi tout conflit avec les ::before / ::after deja
   utilises par le site (bordures degradees, fleches, etc.).
   -------------------------------------------------------------------------- */
body[class*="swip-sec-"] .swip-fx{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .28s ease, transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
body[class*="swip-sec-"] .swip-fx > .swip-fill{
  position:absolute;
  left:0; top:0;
  width:150%;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(120deg, var(--swip-fx-1), var(--swip-fx-2));
  transform:translate(-50%,-50%) scale(0);
  transform-origin:center;
  z-index:-1;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.3,.7,.3,1);
}
body[class*="swip-sec-"] .swip-fx:hover > .swip-fill,
body[class*="swip-sec-"] .swip-fx:focus-visible > .swip-fill{
  transform:translate(-50%,-50%) scale(2.2);
}
body[class*="swip-sec-"] .swip-fx:hover,
body[class*="swip-sec-"] .swip-fx:focus-visible{
  color:var(--swip-fx-ink) !important;
  border-color:transparent !important;
  transform:translateY(-1px);
}
body[class*="swip-sec-"] .swip-fx:hover svg{color:var(--swip-fx-ink)}

@media (prefers-reduced-motion:reduce){
  body[class*="swip-sec-"] header.nav,
  body[class*="swip-sec-"] .swip-fx,
  body[class*="swip-sec-"] .swip-fx > .swip-fill{transition:none !important}
}

/* --- Mode clair (Studio) : le contenu de la pilule passe en sombre ----------
   vp.css force logo blanc + liens blancs au-dessus du hero (nav posee sur la
   video), mais la pilule swip-ui a un fond CLAIR en theme-light : le logo
   blanc y devenait invisible. Ici, des que le theme est clair, logo noir et
   liens sombres — pilule scrollee ou non. */
:root.theme-light body.swip-sec-studio header.nav:not(.scrolled) .nav-logo .logo-light{display:block}
:root.theme-light body.swip-sec-studio header.nav:not(.scrolled) .nav-logo .logo-dark{display:none}
/* liens de nav en mode clair : noir franc (le gris ne ressortait pas), quel
   que soit l'etat de la pilule */
@media (min-width:881px){
  :root.theme-light body.swip-sec-studio header.nav .nav-links a{color:var(--text,#161013)}
  :root.theme-light body.swip-sec-studio header.nav .nav-links a:hover{color:var(--red,#E62837)}
}
:root.theme-light body.swip-sec-studio header.nav:not(.scrolled) .theme-toggle,
:root.theme-light body.swip-sec-studio header.nav:not(.scrolled) .nav-burger{
  color:var(--text,#161013);border-color:var(--line,rgba(22,16,19,.14));
}

/* --- Voile de tete (tous les poles) : des que la pilule est compacte, le
   contenu s'estompe et se floute progressivement en passant sous elle — la
   nav ressort, le defilement derriere devient discret. Sous la nav (z 100). */
body[class*="swip-sec-"]::before{
  content:"";position:fixed;top:0;left:0;right:0;height:120px;z-index:99;pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--bg,#0F0E11) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg,#0F0E11) 45%, transparent) 55%,
    transparent 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 85%);
  mask-image:linear-gradient(to bottom,#000 25%,transparent 85%);
  opacity:0;transition:opacity .45s ease;
}
body[class*="swip-sec-"]:has(header.nav.scrolled)::before{opacity:1}

/* --- Mobile : les deux commandes de droite ont la MEME taille et perdent
   leur contour. Un rond cercle a cote d'un rond plein faisait desordre a
   cette taille ; sans contour, la pilule respire. --- */
@media (max-width:880px){
  body[class*="swip-sec-"] header.nav .theme-toggle,
  body[class*="swip-sec-"] header.nav .nav-burger,
  body[class*="swip-sec-"] header.nav.scrolled .theme-toggle,
  body[class*="swip-sec-"] header.nav.scrolled .nav-burger{
    width:40px;height:40px;border:0;background:transparent;box-shadow:none;
  }
  body[class*="swip-sec-"] header.nav .theme-toggle svg,
  body[class*="swip-sec-"] header.nav.scrolled .theme-toggle svg{width:19px;height:19px}
  body[class*="swip-sec-"] header.nav .nav-burger svg{width:21px;height:21px}
  body[class*="swip-sec-"] header.nav .theme-toggle:hover{transform:none}
}

/* --- Pop-up de contact ouverte : on coupe les backdrop-filter de la pilule et
   du voile de tete. Les empiler sous celui de la pop-up force une
   recomposition par image -> le flou du fond apparaissait en retard sur la nav
   et le footer. Cette feuille est la derniere chargee : c'est le seul endroit
   d'ou l'on peut surcharger le !important pose plus haut. */
body.fc-modal-open header.nav{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.fc-modal-open::before{display:none !important}

/* ============================================================
   MENU MOBILE — commun aux quatre poles
   Calque sur free-hub.fr (assets/app.css) : burger a trois barres qui se
   croisent, et tiroir qui se pose SOUS la pilule en absolu plutot qu'un
   panneau lateral. Utilise --accent, l'alias present sur les 4 poles.
   ============================================================ */

/* plus aucun halo rectangulaire au toucher, nulle part */
*{-webkit-tap-highlight-color:transparent}

.nav-burger .nb-bars{
  display:flex;flex-direction:column;justify-content:center;gap:4.5px;
  width:20px;height:auto;
}
.nav-burger .nb-bars i{
  display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.3,.7,.3,1), opacity .2s;
}
.nav-burger[aria-expanded="true"] .nb-bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .nb-bars i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .nb-bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-burger .nb-bars i{transition:none}}

@media (max-width:880px){
  body[class*="swip-sec-"] header.nav .nav-burger{
    width:40px;height:40px;padding:0 10px;border:0;border-radius:12px;
    background:transparent;transition:background .2s;
  }
  body[class*="swip-sec-"] header.nav .nav-burger:hover,
  body[class*="swip-sec-"] header.nav .nav-burger:active,
  body[class*="swip-sec-"] header.nav .nav-burger:focus{
    background:color-mix(in srgb, var(--text) 9%, transparent);outline:none;
  }
  body[class*="swip-sec-"] header.nav .nav-links{
    position:absolute;grid-column:1 / -1;grid-row:1;
    left:0;right:auto;top:100%;margin-top:10px;
    width:100%;height:auto;max-height:calc(100svh - 130px);
    padding:10px;border-radius:22px;
    background:color-mix(in srgb, var(--surface) 96%, transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid var(--line);
    box-shadow:0 18px 44px -22px rgba(6,4,10,.5),
               0 0 30px -10px color-mix(in srgb, var(--accent) 34%, transparent);
    opacity:0;transform:translateY(-10px);
    transition:opacity .25s, transform .25s;
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;
  }
  body[class*="swip-sec-"] header.nav .nav-links::-webkit-scrollbar{width:0;display:none}
  body[class*="swip-sec-"] header.nav .nav-links:not(.open){pointer-events:none;visibility:hidden}
  body[class*="swip-sec-"] header.nav .nav-links.open{opacity:1;transform:none;visibility:visible}
  /* on ne garde que les liens et la CTA */
  body[class*="swip-sec-"] header.nav .drawer-head,
  body[class*="swip-sec-"] header.nav .drawer-foot,
  body[class*="swip-sec-"] header.nav .nav-links .dl-num{display:none}
  body[class*="swip-sec-"] header.nav .nav-links a{
    display:block;padding:13px 16px;border-radius:14px;border-bottom:0;
    font-size:15.5px;font-weight:700;color:var(--text);
    transition:background-color .2s;
  }
  body[class*="swip-sec-"] header.nav .nav-links a:hover{
    background:color-mix(in srgb, var(--text) 6%, transparent);
  }
  body[class*="swip-sec-"] header.nav .nav-links a.drawer-cta{
    width:100%;margin-top:8px;padding:13px;border-radius:100px;
    display:flex;justify-content:center;font-size:15px;color:#fff !important;
  }
  /* le voile plein ecran du tiroir lateral n'a plus lieu d'etre */
  body[class*="swip-sec-"] .nav-backdrop{display:none}
}

/* ============================================================
   BARRE DE DEFILEMENT — aux couleurs de chaque pole
   Deux syntaxes : `scrollbar-color` (Firefox et navigateurs
   recents) et les pseudo-elements WebKit pour Chrome et Safari.
   La couleur vient de --accent, l'alias deja pose sur les quatre
   poles ; l'accueil garde un gris neutre, faute d'accent unique.
   ============================================================ */
:root{--swip-sb:rgba(140,140,140,.55);--swip-sb-hover:rgba(140,140,140,.8)}
/* La barre du document est pilotee par <html> : la variable doit etre
   posee la, pas sur <body>, sinon elle n'est jamais lue. */
html:has(body.swip-sec-agency){--swip-sb:#ff5602;--swip-sb-hover:#d94400}
html:has(body.swip-sec-studio){--swip-sb:#E62837;--swip-sb-hover:#bd1626}
html:has(body.swip-sec-media) {--swip-sb:#FF00AD;--swip-sb-hover:#cc0089}
html:has(body.swip-sec-invest){--swip-sb:#9650DC;--swip-sb-hover:#6f33b0}
/* Repli pour les moteurs sans :has() — la couleur reste neutre, rien ne casse. */
body.swip-sec-agency{--swip-sb:#ff5602;--swip-sb-hover:#d94400}
body.swip-sec-studio{--swip-sb:#E62837;--swip-sb-hover:#bd1626}
body.swip-sec-media {--swip-sb:#FF00AD;--swip-sb-hover:#cc0089}
body.swip-sec-invest{--swip-sb:#9650DC;--swip-sb-hover:#6f33b0}

/* Uniquement la barre de la PAGE. Le selecteur nu ::-webkit-scrollbar
   s'applique a tous les elements defilables : carrousels, tiroirs, listes
   internes — d'ou des barres qui apparaissaient et disparaissaient un peu
   partout sur mobile. */
html{scrollbar-width:thin;scrollbar-color:var(--swip-sb) transparent}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  background:var(--swip-sb);
  border-radius:99px;
  /* la bordure transparente affine le curseur sans changer sa zone
     cliquable — sinon il colle aux bords */
  border:3px solid transparent;
  background-clip:content-box;
}
html::-webkit-scrollbar-thumb:hover{background:var(--swip-sb-hover);background-clip:content-box}
html::-webkit-scrollbar-corner{background:transparent}
/* Sur mobile la barre est un ornement systeme : on n'y touche pas. */
@media (max-width:760px){
  html{scrollbar-width:auto;scrollbar-color:auto}
  html::-webkit-scrollbar{width:auto;height:auto}
  html::-webkit-scrollbar-thumb{background:initial;border:0}
}

/* --- Accueil : gris neutre. Le degrade quatre couleurs ne tenait que sur
   Chrome et Safari — Firefox n'accepte qu'une teinte unie — et le rose de
   repli faisait croire a une page Media. */
html:has(body.swip-sec-group){--swip-sb:rgba(150,150,150,.5);--swip-sb-hover:rgba(150,150,150,.75)}

/* ============================================================
   ARRIVEE DES TEXTES DE SECTION — commun aux cinq pages
   Les titres portaient deja .reveal, mais une simple montee de
   quelques pixels sur un titre de 60 px ne se remarque pas. On
   ajoute un deflouage, et le mot en italique arrive juste apres
   le reste de la phrase : c'est lui qui porte le sens.
   Le declencheur reste celui de chaque page (.reveal.in), on ne
   touche a aucun mecanisme existant.
   ============================================================ */
body[class*="swip-sec-"] .reveal .section-title,
body[class*="swip-sec-"] .reveal.section-title,
body[class*="swip-sec-"] .reveal .page-lead,
body[class*="swip-sec-"] .reveal .section-lead{
  filter:blur(9px);
  transition:filter .95s cubic-bezier(.22,1,.36,1);
}
body[class*="swip-sec-"] .reveal.in .section-title,
body[class*="swip-sec-"] .reveal.in.section-title,
body[class*="swip-sec-"] .reveal.in .page-lead,
body[class*="swip-sec-"] .reveal.in .section-lead{filter:blur(0)}

/* Le chapo suit le titre plutot que d'arriver avec lui. */
body[class*="swip-sec-"] .reveal.in .section-lead,
body[class*="swip-sec-"] .reveal.in .page-lead{transition-delay:.16s}

/* Le mot accentue se pose en dernier. */
body[class*="swip-sec-"] .section-title em,
body[class*="swip-sec-"] .page-head h1 em{
  display:inline-block;
  /* la boite doit couvrir le debord des italiques, sinon les jambages
     se font rogner quand le titre est peint en background-clip:text */
  padding-inline:.08em;margin-inline:-.08em;
  padding-block:.16em;margin-block:-.16em;
}
body[class*="swip-sec-"] .reveal .section-title em,
body[class*="swip-sec-"] .reveal.section-title em,
body[class*="swip-sec-"] .reveal .page-head h1 em{
  opacity:0;transform:translateY(.3em);
  transition:opacity .75s ease .3s, transform .85s cubic-bezier(.22,1,.36,1) .3s;
}
body[class*="swip-sec-"] .reveal.in .section-title em,
body[class*="swip-sec-"] .reveal.in.section-title em,
body[class*="swip-sec-"] .reveal.in .page-head h1 em{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  body[class*="swip-sec-"] .reveal .section-title,
  body[class*="swip-sec-"] .reveal .section-lead,
  body[class*="swip-sec-"] .reveal .page-lead,
  body[class*="swip-sec-"] .reveal .section-title em{
    filter:none;transition-duration:.01s;opacity:1;transform:none;
  }
}

/* ============================================================
   MOBILE — la barre abandonne le flou d'arriere-plan
   backdrop-filter sur un element fixe oblige le navigateur a
   relire les pixels derriere lui a chaque image. Combine aux
   fonds animes des heros, c'est ce qui faisait vibrer la barre
   et accrocher le defilement. Un fond opaque rend presque la
   meme chose pour une fraction du cout.
   Cette feuille est la derniere chargee : c'est le seul endroit
   d'ou l'on peut surcharger le !important pose plus haut.
   ============================================================ */
@media (max-width:900px){
  body[class*="swip-sec-"] header.nav,
  body[class*="swip-sec-"] header.nav.scrolled{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    /* --swip-nav-bg-mini n'existe en version claire que pour le groupe : sur
       les quatre poles, la pilule restait sombre en theme clair et le logo
       noir devenait illisible dessus. On repart de --bg, que chaque pole
       redefinit avec son theme — comme le fait deja la regle du grand ecran.
       La variable reste en premiere declaration : elle sert de repli aux
       navigateurs sans color-mix(). */
    background:var(--swip-nav-bg-mini, rgba(14,14,14,.94)) !important;
    background:color-mix(in srgb, var(--bg, #101010) 92%, transparent) !important;
  }
  body[class*="swip-sec-"]::before{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  body[class*="swip-sec-"] .nav-links{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

/* ============================================================
   PAGE GROUPE — meme raison, a toutes les largeurs
   La hero de l'accueil porte desormais un mur de vignettes qui
   derive en continu. Une barre fixe en backdrop-filter posee
   dessus doit relire et reflouter ce mur a chaque image : c'est
   litteralement le cas que le bloc ci-dessus corrige sur mobile,
   sauf qu'ici il vaut aussi sur grand ecran. Fond un peu plus
   opaque, aucun flou, cout nul.
   ============================================================ */
body.swip-sec-group header.nav,
body.swip-sec-group header.nav.scrolled,
body.swip-sec-group .nav-links,
body.swip-sec-group::before{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.swip-sec-group header.nav{
  background:color-mix(in srgb, var(--bg, #0F0E11) 84%, transparent) !important;
}
body.swip-sec-group header.nav.scrolled{
  background:color-mix(in srgb, var(--bg, #0F0E11) 94%, transparent) !important;
}

/* ==========================================================================
   « PROPULSÉ PAR SWIPGROUP » — le logo passe devant
   Le badge alignait la mention et le logo sur une meme ligne : le logo,
   contraint a la hauteur d'une capitale de 10 px, faisait 15 px et se
   lisait a peine. On empile — mention en surtitre, logo dessous — ce qui
   libere toute la largeur pour lui : 26 px, soit trois quarts de plus,
   pour une boite qui reste sous soixante-dix pixels de haut et devient
   meme plus etroite qu'avant.
   Une seule regle ici plutot que quatre dans les feuilles de pole : la
   structure du badge est identique partout, et la teinte vient de
   --swip-fx-1, deja definie par section en haut de ce fichier.
   ========================================================================== */
body[class*="swip-sec-"] .powered{
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 15px;
  position:relative;
  overflow:hidden;
}
/* Liseré de pôle : le badge s'annonce comme une signature, pas comme un
   bouton de plus. Il est pose en pseudo-element et non en border-left,
   qui se serait mal accorde avec le rayon des angles. */
body[class*="swip-sec-"] .powered::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--swip-fx-1,currentColor);opacity:.9;
}
/* Un voile de la meme teinte, tres faible, pour detacher le badge du reste
   du pied de page sans le transformer en pave colore. */
body[class*="swip-sec-"] .powered::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    color-mix(in srgb, var(--swip-fx-1,#888) 9%, transparent) 0%,
    transparent 62%);
}
body[class*="swip-sec-"] .powered > span:first-child{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  position:relative;z-index:1;
}
body[class*="swip-sec-"] .powered .pw-label{
  font-size:9px;letter-spacing:.22em;line-height:1;
  margin:0;opacity:.75;
}
body[class*="swip-sec-"] .powered .pw-img{--lh:26px}
/* La fleche devient une pastille : a cote d'un logo de 26 px, un chevron
   de 14 px flottant dans le vide ne tenait plus la composition. */
body[class*="swip-sec-"] .powered .pw-arrow{
  align-self:center;margin:0;flex:none;
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--swip-nav-line,rgba(128,128,128,.22));
  position:relative;z-index:1;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             color .35s ease, border-color .35s ease, background-color .35s ease;
}
body[class*="swip-sec-"] .powered .pw-arrow svg{width:12px;height:12px}
body[class*="swip-sec-"] .powered:hover .pw-arrow{
  transform:translate(2px,-2px);
  border-color:var(--swip-fx-1,currentColor);
  background:color-mix(in srgb, var(--swip-fx-1,#888) 14%, transparent);
}
@media (prefers-reduced-motion:reduce){
  body[class*="swip-sec-"] .powered:hover .pw-arrow{transform:none}
}