/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   SubmitX — chrome.css : ce que la barre, le pied de page et le méga-menu « Network » ajoutent à site.css / faq/styles.css.
   Lié (avec ?v=<empreinte>) par scripts/sync-site-chrome.mjs dans TOUTES les pages qui portent le menu — les deux familles
   de feuilles (site.css et faq/styles.css) le partagent, d'où ses propres jetons --sxc-* (aucune dépendance à --sx-* / --ink).
     1. logos par thème (deux <img>, un seul visible : fonds TRANSPARENTS, plus de filtre invert) ;
     2. carte « Network » du méga-menu (suit le thème, plus de rectangle noir) ;
     3. transition vers / depuis SubmitX Network (assets/site/transition.js) ;
   Le bloc « generated:brand-logos » est ÉCRIT par scripts/sync-site-chrome.mjs à partir de scripts/brand-logos.manifest.json.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* BEGIN generated:brand-logos — ne pas modifier à la main (node scripts/sync-site-chrome.mjs) */
:root{--sx-logo-app-l:url("/assets/site/logo-app-full.png");--sx-logo-app-d:url("/assets/site/logo-app-full-on-dark-48ed2b57.webp");--sx-logo-net-l:url("/assets/site/network-logo-on-light-91cba11c.webp");--sx-logo-net-d:url("/assets/site/network-logo-on-dark-a2477b37.webp")}
/* END generated:brand-logos */

:root{
  --sxc-orange:#FF6B2C;
  --sxc-bg:#FFFFFF;
  --sxc-card:#F7F7F5;
  --sxc-line:#E5E7EB;
  --sxc-ink:#111827;
  --sxc-sub:#4B5563;
  --sxc-cta:#C2410C;
  --sxc-cta-d:#9A3412;
  --sxc-tr-panel:#FFFFFF;
  --sxc-tr-line:rgba(15,23,42,.10);
  --sx-tr-app-logo:var(--sx-logo-app-l);
  --sx-tr-net-logo:var(--sx-logo-net-l);
}
:root[data-theme="dark"]{
  --sxc-bg:#0F0F0F;
  --sxc-card:#161616;
  --sxc-line:#2A2A2A;
  --sxc-ink:#F3F4F6;
  --sxc-sub:#A3A9B5;
  --sxc-tr-panel:#0F0F0F;
  --sxc-tr-line:rgba(255,255,255,.09);
  --sx-tr-app-logo:var(--sx-logo-app-d);
  --sx-tr-net-logo:var(--sx-logo-net-d);
}

/* ── 1. Logos par thème ─────────────────────────────────────────────────────────────────────────────────────────
   Deux <img> frères : .sx-th-l (fond clair) et .sx-th-d (fond sombre). !important : les feuilles de base posent
   « display:block » (et parfois un style en ligne) sur le logo de la barre / du pied. */
img.sx-th-d{display:none!important}
:root[data-theme="dark"] img.sx-th-l{display:none!important}
:root[data-theme="dark"] img.sx-th-d{display:block!important}
/* Accueil : la barre flottante, tant qu'elle n'est pas « scrolled », est un verre SOMBRE posé sur la vidéo du hero, dans les
   deux thèmes → logo blanc. Sous 1141 px la barre devient opaque (couleur du thème) : le logo suit alors le thème. */
@media (min-width:1141px){
  .sx-nav.sx-nav--float:not(.scrolled) .sx-logo img.sx-th-l{display:none!important}
  .sx-nav.sx-nav--float:not(.scrolled) .sx-logo img.sx-th-d{display:block!important}
}

/* ── 2. Carte « Network » du méga-menu ──────────────────────────────────────────────────────────────────────────
   Le logo est transparent et pris dans la variante du thème : plus de boîte noire. La carte suit le thème
   (clair : papier du site + liseré ; sombre : surface sombre du site). Contrastes ≥ 4,5:1. */
li[data-sx-network] .sx-mega-cta{
  align-items:flex-start;min-width:200px;max-width:236px;box-sizing:border-box;
  padding:16px;border:1px solid var(--sxc-line);border-radius:14px;background:var(--sxc-card);
}
li[data-sx-network] .sx-mega-cta .sx-net-logo{display:block;width:100%;margin:0 0 12px}
li[data-sx-network] .sx-mega-cta .sx-net-logo img{
  display:block;width:100%;max-width:168px;height:auto;margin:0;padding:0;border:0;border-radius:0;
  object-fit:contain;object-position:left center;background:none;
}
/* titres de colonne : le gris de base (#9CA3AF) n'atteint que 2,4:1 sur blanc → ≥ 4,5:1 ; bouton = orange accessible du site (le blanc sur #FF6B2C = 2,8:1) */
li[data-sx-network] .sx-mega-col h4{color:var(--sxc-sub)}
li[data-sx-network] .sx-mega-cta .sx-mega-cta-btn{background:var(--sxc-cta);color:#fff!important}
li[data-sx-network] .sx-mega-cta .sx-mega-cta-btn:hover{background:var(--sxc-cta-d)}
li[data-sx-network] .sx-mega-cta strong{color:var(--sxc-ink)}
li[data-sx-network] .sx-mega-cta span{color:var(--sxc-sub)}
li[data-sx-network] .sx-mega-cta .sx-mega-cta-alt{color:var(--sxc-sub)!important}
li[data-sx-network] .sx-mega-cta .sx-mega-cta-alt:hover{color:var(--sxc-orange)!important}
@media (max-width:1140px){
  /* accordéon du menu burger : le fond du panneau est déjà gris/sombre → carte sur le fond de page */
  li[data-sx-network] .sx-mega-cta{max-width:none;width:100%;background:var(--sxc-bg);margin-top:10px;align-items:center;text-align:center}
  li[data-sx-network] .sx-mega-cta .sx-net-logo img{margin:0 auto;object-position:center}
}

/* ── 3. Transition vers / depuis SubmitX Network ────────────────────────────────────────────────────────────────
   Iris orange (#FF6B2C) qui s'ouvre depuis le point de clic, panneau de la couleur du thème avec quadrillage de relevé qui se
   dessine, réticule au point de clic, logo au centre. transform / opacity / clip-path uniquement (GPU) ; aucune boîte de la page
   ne bouge. Départ : assets/site/transition.js (≤ 650 ms puis navigation). Arrivée (?nwt=1) : 100 % CSS, pour qu'il n'y ait
   aucun instant où la page apparaît avant le voile ; le JS ne fait que nettoyer l'adresse. */
.sx-tr{position:fixed;inset:0;z-index:2147483000;overflow:hidden;pointer-events:all;cursor:progress}
.sx-tr-rim,.sx-tr-panel{position:absolute;inset:0;clip-path:circle(0 at var(--x) var(--y));will-change:clip-path}
.sx-tr-rim{background:var(--sxc-orange)}
.sx-tr-panel{background:var(--sxc-tr-panel)}
.sx-tr-panel i,.sx-tr-panel b{position:absolute;display:block;pointer-events:none}
/* quadrillage : lignes horizontales révélées de gauche à droite, verticales de haut en bas */
.sx-tr-gh,.sx-tr-gv{inset:0;background-size:56px 56px;background-position:center}
.sx-tr-gh{background-image:linear-gradient(var(--sxc-tr-line) 1px,transparent 1px);clip-path:inset(0 100% 0 0)}
.sx-tr-gv{background-image:linear-gradient(90deg,var(--sxc-tr-line) 1px,transparent 1px);clip-path:inset(0 0 100% 0)}
/* réticule + point de relevé au point de clic */
.sx-tr-ch,.sx-tr-cv{background:var(--sxc-orange);opacity:.9}
.sx-tr-ch{left:0;right:0;top:var(--y);height:1px;transform:scaleX(0);transform-origin:var(--x) 50%}
.sx-tr-cv{top:0;bottom:0;left:var(--x);width:1px;transform:scaleY(0);transform-origin:50% var(--y)}
.sx-tr-pt{left:calc(var(--x) - 7px);top:calc(var(--y) - 7px);width:14px;height:14px;border:2px solid var(--sxc-orange);border-radius:50%;box-sizing:border-box;transform:scale(0)}
.sx-tr-logo{left:50%;top:50%;width:min(420px,72vw);aspect-ratio:900/360;margin:0;
  background:var(--sx-tr-net-logo) center/contain no-repeat;transform:translate(-50%,-50%) scale(.94);opacity:0}
.sx-tr.go .sx-tr-rim{animation:sxTrOpen .46s cubic-bezier(.7,0,.2,1) forwards}
.sx-tr.go .sx-tr-panel{animation:sxTrOpen .46s cubic-bezier(.7,0,.2,1) .045s forwards}
.sx-tr.go .sx-tr-gh{animation:sxTrWipeX .36s cubic-bezier(.4,0,.2,1) .16s forwards}
.sx-tr.go .sx-tr-gv{animation:sxTrWipeY .36s cubic-bezier(.4,0,.2,1) .2s forwards}
.sx-tr.go .sx-tr-ch{animation:sxTrLineX .34s cubic-bezier(.3,0,.2,1) .04s forwards}
.sx-tr.go .sx-tr-cv{animation:sxTrLineY .34s cubic-bezier(.3,0,.2,1) .04s forwards}
.sx-tr.go .sx-tr-pt{animation:sxTrPop .22s cubic-bezier(.3,1.4,.5,1) forwards}
.sx-tr.go .sx-tr-logo{animation:sxTrLogo .28s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes sxTrOpen{to{clip-path:circle(var(--r) at var(--x) var(--y))}}
@keyframes sxTrWipeX{to{clip-path:inset(0 0 0 0)}}
@keyframes sxTrWipeY{to{clip-path:inset(0 0 0 0)}}
@keyframes sxTrLineX{to{transform:scaleX(1)}}
@keyframes sxTrLineY{to{transform:scaleY(1)}}
@keyframes sxTrPop{to{transform:scale(1)}}
@keyframes sxTrLogo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Arrivée (retour depuis Network, adresse ?nwt=1) : posé avant le premier affichage par le script de <head> (data-sx-arrive). */
html[data-sx-arrive]::before,html[data-sx-arrive]::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  clip-path:circle(150vmax at 50% 50%);will-change:clip-path;
}
html[data-sx-arrive]::before{background:var(--sxc-orange);animation:sxTrClose .5s cubic-bezier(.7,0,.2,1) .085s forwards}
html[data-sx-arrive]::after{
  background:
    var(--sx-tr-app-logo) center / min(340px,64vw) auto no-repeat,
    linear-gradient(var(--sxc-tr-line) 1px,transparent 1px) center / 56px 56px,
    linear-gradient(90deg,var(--sxc-tr-line) 1px,transparent 1px) center / 56px 56px,
    var(--sxc-tr-panel);
  animation:sxTrClose .5s cubic-bezier(.7,0,.2,1) .04s forwards;
}
@keyframes sxTrClose{to{clip-path:circle(0 at 50% 50%)}}

@media (prefers-reduced-motion:reduce){
  .sx-tr{display:none}
  html[data-sx-arrive]::before,html[data-sx-arrive]::after{display:none}
}
@media print{.sx-tr,html[data-sx-arrive]::before,html[data-sx-arrive]::after{display:none}}